<div class="rtds-background-01 rtds-border-b rtds-border-gray-03 rtds-px-4 rtds-py-3 rtds-space-y-2">
<p class="rtds-text-sm rtds-content-02">
<strong>Test widget Atti</strong> — carica <code>core.css</code> + <code>servizi.css</code>.
Verifica: lista risultati, empty state, loading, dettaglio atto.
</p>
<nav aria-label="Sezioni di test">
<ul class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-list-none rtds-p-0 rtds-m-0 rtds-text-sm">
<li><a href="#lista" class="rtds-link">Lista atti</a></li>
<li><a href="#empty" class="rtds-link">Empty state</a></li>
<li><a href="#loading" class="rtds-link">Loading</a></li>
<li><a href="#dettaglio" class="rtds-link">Dettaglio atto</a></li>
</ul>
</nav>
</div>
<div class="rtds-space-y-16 rtds-py-8">
<section id="lista">
<div id="lista-h" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">1. Widget — Lista atti</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mt-1">Stato normale: widget-nav + widget-search + widget-chip-filters + card--widget (×6) + pagination.</p>
</div>
<div class="rtds-widget">
<!-- navigazione sezioni WIDGET -->
<nav class="rtds-widget-nav" aria-label="Sezioni atti">
<ul class="rtds-widget-nav__list">
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
is-active" id="widget-nav-tab-1">
<span class="rtds-tab__label">Dalla giunta</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">
<span class="rtds-tab__label">Dal Presidente</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">dai Dirigenti</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>
</a>
</li>
</ul>
</nav>
<div class="rtds-container-sm rtds-py-8 lg:rtds-px-12 xl:rtds-px-16">
<div class="rtds-grid rtds-gap-8 xl:rtds-gap-12">
<!-- testata WIDGET -->
<div class="rtds-flex rtds-items-center rtds-justify-between">
<h1 class="rtds-heading-2">Gli atti della Giunta</h1>
</div>
<!-- RICERCA -->
<section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
<!-- SEARCH -->
<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
<h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
<span class="rtds-accordion__trigger-label">
Ricerca avanzata
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
</button>
</h2>
<div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">
<form name="search-form">
<div class="rtds-grid rtds-gap-6">
<!-- ROW 1 -->
<div class="rtds-field-row">
<!-- FIELDSET DATA -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Data atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoStart" class="rtds-input-field__label rtds-sr-only">
Data inizio atto
</label>
<div class="rtds-input">
<input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataInizioAtto">
Anno inizio ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
Data fine atto
</label>
<div class="rtds-input">
<input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataFineAtto">
Anno fine ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
</div>
</fieldset>
<!-- FIELDSET NUMERO ATTO -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Numero atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
Numero atto - inizio
</label>
<div class="rtds-input">
<input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoInizio">
Da numero
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
Numero atto - fine
</label>
<div class="rtds-input">
<input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoFine">
A numero
</span>
</span>
</div>
</div>
</fieldset>
</div>
<!-- ROW 2 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-gap-1 ">
<label for="oggetto" class="rtds-input-field__label">
Oggetto
</label>
<div class="rtds-input">
<input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputOggetto">
Ricerca esatta del testo inserito
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Assessore
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAssessore">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAssessore">
Seleziona nome dell'assessore
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Tipologia Atto
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAtto">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAtto">
Ricerca tipologia atto
</span>
</span>
</div>
</div>
<!-- ROW 3 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Struttura di vertice
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectStrutturaVertice">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="procedimento" class="rtds-input-field__label">
Procedimento
</label>
<div class="rtds-input">
<input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputProcedimento">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW 4 - DEM0 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 1
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo1">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo1">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo2" class="rtds-input-field__label">
Field demo 2
</label>
<div class="rtds-input">
<input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo2">
Ricerca tipologia procedimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 3
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo3">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo3">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo4" class="rtds-input-field__label">
Field demo 4
</label>
<div class="rtds-input">
<input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo4">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW ACTIONS -->
<div class="rtds-form-actions rtds-flex rtds-justify-start">
<button type="submit" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary">
Cerca
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- FILTERS -->
<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
<li><span class="rtds-chip has-button-close rtds-chip--filter">
ALESSANDRA NARDINI
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Data atto inizio: 23/05/2024
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
</button>
</span>
</li>
<li><span class="rtds-chip has-button-close rtds-chip--filter">
Oggetto: Atto
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Tipologia atto: Lorem ipsum dolor sit
amet
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
amet</span>
</button>
</span>
</li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Numero atto - da numero: 12
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
</button>
</span>
</li>
</ul>
</section>
<!-- CONTENUTO RICERCA -->
<section class="rtds-grid rtds-gap-4">
<!-- HEADING PER MESSAGGIO DI CARICAMENTO RISULTATI/LISTA RISULTATI TROVATI
IN FASE CARICAMENTO, aria-busy = true,
RISULTATI CARICATI, aria-busy = false,
NO RISULTATI, aria-busy = false
In questo caso il contenuto di rtds-loading-status è il titolo con il numero di risultati
-->
<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<!-- HEADING PER RISULTATI -->
<h2 class="rtds-heading-3"><span class="rtds-sr-only">Risultati: </span>2632 <span class="rtds-font-normal">Atti</span></h2>
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - CON I RISULTATI HA CLASSE -> rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4 rtds-sr-only" aria-live="assertive" aria-atomic="true"></div>
<!-- CONTAINER PER RISULTATI -->
<div class="rtds-grid rtds-gap-4">
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Delibera n.1 del 08-01-2001
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Oggetto:</strong> Dgr n.1116 del 24/ 10/2000 "D.lgs. 31.03.1998, n. 112 - Conferimento di funzioni e compiti amministrativi dello Stato alle Regioni e agli Enti locali, in attuazione del capo I della legge 59/97- Riparto risorse tra le regioni e gli enti locali", e Dgr.n.1292 del 4/12/2000. Modifiche.
</p>
<div class="rtds-card__publication-details">
<p>
<strong>Tipo di pubblicazione:</strong> Atto soggetto a pubblicazione integrale
</p>
</div>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Delibera n.1 del 08-01-2001
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Oggetto:</strong> Dgr n.1116 del 24/ 10/2000 "D.lgs. 31.03.1998, n. 112 - Conferimento di funzioni e compiti amministrativi dello Stato alle Regioni e agli Enti locali, in attuazione del capo I della legge 59/97- Riparto risorse tra le regioni e gli enti locali", e Dgr.n.1292 del 4/12/2000. Modifiche.
</p>
<div class="rtds-card__publication-details">
<p>
<strong>Tipo di pubblicazione:</strong> Atto soggetto a pubblicazione integrale
</p>
</div>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Delibera n.1 del 08-01-2001
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Oggetto:</strong> Dgr n.1116 del 24/ 10/2000 "D.lgs. 31.03.1998, n. 112 - Conferimento di funzioni e compiti amministrativi dello Stato alle Regioni e agli Enti locali, in attuazione del capo I della legge 59/97- Riparto risorse tra le regioni e gli enti locali", e Dgr.n.1292 del 4/12/2000. Modifiche.
</p>
<div class="rtds-card__publication-details">
<p>
<strong>Tipo di pubblicazione:</strong> Atto soggetto a pubblicazione integrale
</p>
</div>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Delibera n.1 del 08-01-2001
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Oggetto:</strong> Dgr n.1116 del 24/ 10/2000 "D.lgs. 31.03.1998, n. 112 - Conferimento di funzioni e compiti amministrativi dello Stato alle Regioni e agli Enti locali, in attuazione del capo I della legge 59/97- Riparto risorse tra le regioni e gli enti locali", e Dgr.n.1292 del 4/12/2000. Modifiche.
</p>
<div class="rtds-card__publication-details">
<p>
<strong>Tipo di pubblicazione:</strong> Atto soggetto a pubblicazione integrale
</p>
</div>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
<article class="rtds-card rtds-card--information-02 rtds-card--widget is-card-fullclickable rtds-group/card">
<div class="rtds-card__content">
<div class="rtds-card__heading">
<h3 class="rtds-card__title">
<a class="group-hover/card:rtds-underline" href="">
Delibera n.1 del 08-01-2001
</a>
</h3>
</div>
<div class="rtds-card__description">
<p>
<strong>Oggetto:</strong> Dgr n.1116 del 24/ 10/2000 "D.lgs. 31.03.1998, n. 112 - Conferimento di funzioni e compiti amministrativi dello Stato alle Regioni e agli Enti locali, in attuazione del capo I della legge 59/97- Riparto risorse tra le regioni e gli enti locali", e Dgr.n.1292 del 4/12/2000. Modifiche.
</p>
<div class="rtds-card__publication-details">
<p>
<strong>Tipo di pubblicazione:</strong> Atto soggetto a pubblicazione integrale
</p>
</div>
</div>
<div class="rtds-space-y-2 -rtds-ml-3 md:rtds-space-y-0 md:rtds-flex md:rtds-items-baseline md:rtds-justify-between md:rtds-gap-2">
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s">
Dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</div>
</div>
</article>
</div>
</section>
<!-- PAGINAZIONE -->
<nav class="rtds-pagination rtds-flex-wrap rtds-justify-center" role="navigation" aria-label="Paginazione">
<ul class="rtds-pagination__list rtds-justify-center">
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Prima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="page">2</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Ultima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section id="empty">
<div id="empty-h" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">2. Widget — Empty state</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mt-1">Nessun risultato trovato. Verifica che il messaggio di stato vuoto sia visibile e accessibile (aria-live).</p>
</div>
<div class="rtds-widget">
<!-- navigazione sezioni WIDGET -->
<nav class="rtds-widget-nav" aria-label="Sezioni atti">
<ul class="rtds-widget-nav__list">
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
is-active" id="widget-nav-tab-1">
<span class="rtds-tab__label">Dalla giunta</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">
<span class="rtds-tab__label">Dal Presidente</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">dai Dirigenti</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>
</a>
</li>
</ul>
</nav>
<div class="rtds-container-sm rtds-py-8 lg:rtds-px-12 xl:rtds-px-16">
<div class="rtds-grid rtds-gap-8 xl:rtds-gap-12">
<!-- testata WIDGET -->
<div class="rtds-flex rtds-items-center rtds-justify-between">
<h1 class="rtds-heading-2">Gli atti della Giunta</h1>
</div>
<!-- RICERCA -->
<section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
<!-- SEARCH -->
<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
<h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
<span class="rtds-accordion__trigger-label">
Ricerca avanzata
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
</button>
</h2>
<div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">
<form name="search-form">
<div class="rtds-grid rtds-gap-6">
<!-- ROW 1 -->
<div class="rtds-field-row">
<!-- FIELDSET DATA -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Data atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoStart" class="rtds-input-field__label rtds-sr-only">
Data inizio atto
</label>
<div class="rtds-input">
<input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataInizioAtto">
Anno inizio ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
Data fine atto
</label>
<div class="rtds-input">
<input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataFineAtto">
Anno fine ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
</div>
</fieldset>
<!-- FIELDSET NUMERO ATTO -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Numero atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
Numero atto - inizio
</label>
<div class="rtds-input">
<input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoInizio">
Da numero
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
Numero atto - fine
</label>
<div class="rtds-input">
<input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoFine">
A numero
</span>
</span>
</div>
</div>
</fieldset>
</div>
<!-- ROW 2 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-gap-1 ">
<label for="oggetto" class="rtds-input-field__label">
Oggetto
</label>
<div class="rtds-input">
<input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputOggetto">
Ricerca esatta del testo inserito
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Assessore
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAssessore">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAssessore">
Seleziona nome dell'assessore
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Tipologia Atto
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAtto">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAtto">
Ricerca tipologia atto
</span>
</span>
</div>
</div>
<!-- ROW 3 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Struttura di vertice
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectStrutturaVertice">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="procedimento" class="rtds-input-field__label">
Procedimento
</label>
<div class="rtds-input">
<input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputProcedimento">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW 4 - DEM0 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 1
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo1">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo1">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo2" class="rtds-input-field__label">
Field demo 2
</label>
<div class="rtds-input">
<input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo2">
Ricerca tipologia procedimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 3
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo3">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo3">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo4" class="rtds-input-field__label">
Field demo 4
</label>
<div class="rtds-input">
<input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo4">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW ACTIONS -->
<div class="rtds-form-actions rtds-flex rtds-justify-start">
<button type="submit" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary">
Cerca
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- FILTERS -->
<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
<li><span class="rtds-chip has-button-close rtds-chip--filter">
ALESSANDRA NARDINI
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Data atto inizio: 23/05/2024
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
</button>
</span>
</li>
<li><span class="rtds-chip has-button-close rtds-chip--filter">
Oggetto: Atto
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Tipologia atto: Lorem ipsum dolor sit
amet
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
amet</span>
</button>
</span>
</li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Numero atto - da numero: 12
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
</button>
</span>
</li>
</ul>
</section>
<!-- CONTENUTO RICERCA -->
<section class="rtds-grid rtds-gap-4">
<!-- HEADING PER MESSAGGIO DI CARICAMENTO RISULTATI/LISTA RISULTATI TROVATI
IN FASE CARICAMENTO, aria-busy = true,
RISULTATI CARICATI, aria-busy = false,
NO RISULTATI, aria-busy = false
In questo caso il contenuto di rtds-loading-status è il titolo con testo Nessun risultato trovato
-->
<div class="rtds-loading-status" aria-live="polite" aria-busy="false" role="status">
<!-- HEADING PER RISULTATI - IN EMPTY STATE IL CONTENUTO è QUELLO QUI INDICATO -->
<h2 class="rtds-heading-3">Nessun risultato trovato</h2>
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - senza risultati non ha classe rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
<!-- CONTENUTO EMPTY STATE - PRESENTE SOLO SE NON CI SONO RISULTATI -->
<div class="rtds-font-bold rtds-text-center rtds-grid rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20">
<svg class="rtds-icon rtds-fill-current rtds-w-16 rtds-h-16 rtds-content-03" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--exclamation-circle" />
</svg>
<h3 class="rtds-heading-4">Non ci sono risultati per questi criteri di ricerca</h3>
</div>
</div>
</section>
<!-- PAGINAZIONE -->
<nav class="rtds-pagination rtds-flex-wrap rtds-justify-center" role="navigation" aria-label="Paginazione">
<ul class="rtds-pagination__list rtds-justify-center">
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Prima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="page">2</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Ultima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section id="loading">
<div id="loading-h" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">3. Widget — Loading results (wip)</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mt-1">Caricamento in corso. Verifica aria-busy, spinner/skeleton e che il layout non collassi.</p>
</div>
<div class="rtds-widget">
<!-- navigazione sezioni WIDGET -->
<nav class="rtds-widget-nav" aria-label="Sezioni atti">
<ul class="rtds-widget-nav__list">
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
is-active" id="widget-nav-tab-1">
<span class="rtds-tab__label">Dalla giunta</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-2">
<span class="rtds-tab__label">Dal Presidente</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">dai Dirigenti</span>
</a>
</li>
<li>
<a href="#" class="rtds-tab is-tab rtds-tab--borderless
rtds-content-02 rtds-min-w-4
" id="widget-nav-tab-3">
<span class="rtds-tab__label">di Protezione Civile (dal 20/01/22)</span>
</a>
</li>
</ul>
</nav>
<div class="rtds-container-sm rtds-py-8 lg:rtds-px-12 xl:rtds-px-16">
<div class="rtds-grid rtds-gap-8 xl:rtds-gap-12">
<!-- testata WIDGET -->
<div class="rtds-flex rtds-items-center rtds-justify-between">
<h1 class="rtds-heading-2">Gli atti della Giunta</h1>
</div>
<!-- RICERCA -->
<section class="rtds-grid rtds-gap-8 lg:rtds-gap-12">
<!-- SEARCH -->
<div class="rtds-accordion rtds-p-0 rtds-accordion--widget">
<h2 class="rtds-accordion__title rtds-flex rtds-font-bold rtds-p-2 rtds-text-base rtds-background-03">
<button type="button" aria-expanded="true" class="rtds-accordion__trigger rtds-group rtds-flex rtds-items-center rtds-flex-1 rtds-transition-all" aria-controls="accordionSearch-1" id="accordionSearch1id">
<span class="rtds-accordion__trigger-label">
Ricerca avanzata
</span>
<span class="rtds-accordion__icon rtds-flex rtds-p-2 rtds-ml-auto rtds-h-auto rtds-transition-all">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-transition-all is-expand-arrow group-aria-expanded:rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-up" />
</svg>
</span>
</button>
</h2>
<div id="accordionSearch-1" role="region" aria-labelledby="accordionSearch1id" class="rtds-accordion__pane rtds-transition-all rtds-px-2">
<form name="search-form">
<div class="rtds-grid rtds-gap-6">
<!-- ROW 1 -->
<div class="rtds-field-row">
<!-- FIELDSET DATA -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Data atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoStart" class="rtds-input-field__label rtds-sr-only">
Data inizio atto
</label>
<div class="rtds-input">
<input id="attoStart" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataInizioAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataInizioAtto">
Anno inizio ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoEnd" class="rtds-input-field__label rtds-sr-only">
Data fine atto
</label>
<div class="rtds-input">
<input id="attoEnd" class="rtds-text-sm rtds-input-placeholder" type="date" aria-describedBy="inputDataFineAtto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDataFineAtto">
Anno fine ricerca - formato gg/mm/aaaa
</span>
</span>
</div>
</div>
</fieldset>
<!-- FIELDSET NUMERO ATTO -->
<fieldset class="rtds-input-field rtds-input-fieldset">
<legend class="rtds-input-field__label">
Numero atto
</legend>
<div class="rtds-grid sm:rtds-flex rtds-gap-4 sm:rtds-gap-6 sm:rtds-items-start">
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberStart" class="rtds-input-field__label rtds-sr-only">
Numero atto - inizio
</label>
<div class="rtds-input">
<input id="attoNumberStart" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoInizio">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoInizio">
Da numero
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 sm:rtds-flex-1 ">
<label for="attoNumberEnd" class="rtds-input-field__label rtds-sr-only">
Numero atto - fine
</label>
<div class="rtds-input">
<input id="attoNumberEnd" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputNumeroAttoFine">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputNumeroAttoFine">
A numero
</span>
</span>
</div>
</div>
</fieldset>
</div>
<!-- ROW 2 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-gap-1 ">
<label for="oggetto" class="rtds-input-field__label">
Oggetto
</label>
<div class="rtds-input">
<input id="oggetto" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputOggetto">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputOggetto">
Ricerca esatta del testo inserito
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Assessore
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAssessore">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAssessore">
Seleziona nome dell'assessore
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Tipologia Atto
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectAtto">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectAtto">
Ricerca tipologia atto
</span>
</span>
</div>
</div>
<!-- ROW 3 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Struttura di vertice
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectStrutturaVertice">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectStrutturaVertice">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="procedimento" class="rtds-input-field__label">
Procedimento
</label>
<div class="rtds-input">
<input id="procedimento" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputProcedimento">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputProcedimento">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW 4 - DEM0 -->
<div class="rtds-field-row">
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 1
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo1">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo1">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo2" class="rtds-input-field__label">
Field demo 2
</label>
<div class="rtds-input">
<input id="demo2" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo2">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo2">
Ricerca tipologia procedimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-select-field">
<label for="selectId" class="rtds-input-field__label">
Field demo 3
</label>
<div class="rtds-select">
<select id="selectId" class="" aria-describedBy="selectDemo3">
<option value="1">Text</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
<option value="6">Option 5</option>
</select>
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="selectDemo3">
Ricerca struttura di riferimento
</span>
</span>
</div>
<div class="rtds-input-field rtds-gap-1 ">
<label for="demo4" class="rtds-input-field__label">
Field demo 4
</label>
<div class="rtds-input">
<input id="demo4" class="rtds-text-sm rtds-input-placeholder" type="text" aria-describedBy="inputDemo4">
</div>
<span class="rtds-input-field__hint">
<span class="rtds-input-field__description" id="inputDemo4">
Ricerca tipologia procedimento
</span>
</span>
</div>
</div>
<!-- ROW ACTIONS -->
<div class="rtds-form-actions rtds-flex rtds-justify-start">
<button type="submit" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary">
Cerca
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- FILTERS -->
<ul class="rtds-flex rtds-flex-wrap rtds-gap-2" aria-label="Filtri attivi">
<li><span class="rtds-chip has-button-close rtds-chip--filter">
ALESSANDRA NARDINI
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi ALESSANDRA NARDINI</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Data atto inizio: 23/05/2024
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Data atto inizio: 23/05/2024</span>
</button>
</span>
</li>
<li><span class="rtds-chip has-button-close rtds-chip--filter">
Oggetto: Atto
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Oggetto: Atto</span>
</button>
</span></li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Tipologia atto: Lorem ipsum dolor sit
amet
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Tipologia atto: Lorem ipsum dolor sit
amet</span>
</button>
</span>
</li>
<li>
<span class="rtds-chip has-button-close rtds-chip--filter">
Numero atto - da numero: 12
<button class="rtds-chip__close rtds-w-5 rtds-h-5" type="button">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only">Rimuovi Numero atto - da numero: 12</span>
</button>
</span>
</li>
</ul>
</section>
<!-- CONTENUTO RICERCA -->
<section class="rtds-grid rtds-gap-4">
<!-- HEADING PER MESSAGGIO DI CARICAMENTO RISULTATI/LISTA RISULTATI TROVATI
IN FASE CARICAMENTO, aria-busy = true,
RISULTATI CARICATI, aria-busy = false,
NO RISULTATI, aria-busy = false
in questo caso il contenuto di rtds-loading-status è il loader...
UNA VOLTA CARICATI I RISULTATI, IL FOCUS VA SUL PRIMO DEI RISULTATI TROVATI
-->
<div class="rtds-loading-status" aria-live="polite" aria-busy="true" role="status">
<!-- MESSAGGIO DI CARICAMENTO -->
<div class="rtds-loading-results rtds-grid rtds-font-bold rtds-text-center rtds-gap-8 rtds-justify-center rtds-justify-items-center rtds-py-20">
<svg class="rtds-icon rtds-fill-current rtds-w-12 rtds-h-12 rtds-animate-spin" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#spinner" />
</svg>
<h2 class="rtds-heading-3">Caricamento risultati...</h2>
</div>
<!-- <h2 class="rtds-heading-3" aria-live="polite" role="region" aria-busy="false"><span class="rtds-sr-only">Risultati: </span>2632 <span class="rtds-font-normal">Atti</span></h2> -->
</div>
<!-- CONTAINER PER EMPTY STATE - HA CONTENUTO SOLO SE NON CI SONO RISULTATI - DEVE ESSERE SEMPRE PRESENTE - senza risultati non ha classe rtds-sr-only -->
<div class="rtds-empty-state rtds-grid rtds-gap-4" aria-live="assertive" aria-atomic="true">
</div>
</section>
<!-- PAGINAZIONE -->
<nav class="rtds-pagination rtds-flex-wrap rtds-justify-center" role="navigation" aria-label="Paginazione">
<ul class="rtds-pagination__list rtds-justify-center">
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Prima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina precedente">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-left" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 1">1</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text rtds-background-primary rtds-border-primary rtds-text-white hover:rtds-content-01" href="#" aria-label="Pagina corrente, pagina 2" aria-current="page">2</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 3">3</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button rtds-pagination__link-text " href="#" aria-label="pagina 4">4</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button" href="#" aria-label="Pagina successiva">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</li>
<li>
<a class="rtds-pagination__link rtds-pagination__link-button " href="#" aria-label="Ultima pagina">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-5 md:rtds-w-5 md:rtds-h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-double-right" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section id="dettaglio">
<div id="dettaglio-h" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">4. Widget — Dettaglio atto</h2>
<p class="rtds-text-sm rtds-content-02 rtds-mt-1">Vista di dettaglio del singolo atto: back-link, definition list, documenti scaricabili.</p>
</div>
<div class="rtds-widget">
<div class="rtds-container rtds-py-8 lg:rtds-px-12 xl:rtds-px-16 rtds-space-y-8 lg:rtds-space-y-12 xl:rtds-space-y-16">
<div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
<a href="" class="rtds-link-back rtds-content-03 hover:rtds-underline rtds-inline-flex rtds-items-center rtds-text-sm">
<svg class="rtds-icon rtds-stroke-current rtds-w-4 rtds-h-4 rtds-mr-2" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-left" />
</svg>
Torna ai risultati della ricerca
</a>
<h1 class="rtds-heading-2">Decisione n.1 del 10-02-2003</h1>
</div>
<section>
<div class="rtds-grid rtds-gap-3 lg:rtds-gap-4">
<h2 class="rtds-sr-only">Dati atto</h2>
<dl class="rtds-grid rtds-gap-2 lg:rtds-gap-3 xl:rtds-gap-4">
<div class="rtds-flex rtds-gap-[0.5ch]">
<dt class="rtds-font-bold">Oggetto:</dt>
<dd class="">Agenda normativa per l'anno 2003.</dd>
</div>
<div class="rtds-flex rtds-gap-[0.5ch]">
<dt class="rtds-font-bold">Tipo pubblicazione:</dt>
<dd class="">Atto soggetto a pubblicazione integrale.</dd>
</div>
<div class="rtds-flex rtds-gap-[0.5ch]">
<dt class="rtds-font-bold">Ufficio:</dt>
<dd class="">DIPARTIMENTO PRESIDENZA AFFARI LEGISLATIVI E GIURIDICI</dd>
</div>
<div class="rtds-flex rtds-gap-[0.5ch]">
<dt class="rtds-font-bold">Tipo pubblicazione:</dt>
<dd class="">Atto soggetto a pubblicazione integrale</dd>
</div>
</dl>
</div>
</section>
<section class="xl:rtds-max-w-1/2 rtds-space-y-5">
<div class="rtds-flex rtds-items-center rtds-gap-4">
<div class="rtds-vertical-divider rtds-w-9">
<img class="rtds-w-full rtds-h-auto" src="../../images/vertical-divider.svg" alt="">
</div>
<h2 class="rtds-heading-3">Documenti</h2>
</div>
<ul class="rtds-grid">
<li class=" rtds-border-b rtds-border-gray-02">
<a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--has-cta">
<span class="rtds-flex rtds-gap-2 rtds-items-center">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down-tray" />
</svg>
Allegato 1 (PDF - 40Kb)
</span>
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s rtds-ml-auto">
Scarica
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</a>
</li>
<li class=" rtds-border-b rtds-border-gray-02">
<a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--has-cta">
<span class="rtds-flex rtds-gap-2 rtds-items-center">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down-tray" />
</svg>
Allegato a - Tabella proposte di legge (PDF - 40Kb)
</span>
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s rtds-ml-auto">
Scarica
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</a>
</li>
<li class=" rtds-border-b rtds-border-gray-02">
<a href="#" class="rtds-text-link rtds-leading-snug rtds-text-link--has-cta">
<span class="rtds-flex rtds-gap-2 rtds-items-center">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-down-tray" />
</svg>
Allegato B - Tabella proposte di legge consectetur adipiscing elit Duis posuere elit eu blandit fringilla (PDF - 40Kb)
</span>
<span class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text rtds-btn--s rtds-ml-auto">
Scarica
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</span>
</a>
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
{#
Test widget Atti — carica core.css + servizi.css (via _preview-core-servizi.njk)
Verifica il funzionamento del widget completo per gli atti:
— widget (lista risultati)
— widget--empty-state (nessun risultato)
— widget--loading-results (caricamento in corso)
— widget--atto (dettaglio singolo atto)
Il widget integra: widget-nav, widget-search, widget-chip-filters,
card--widget, pagination — tutti componenti di core.
Questa pagina verifica che l'intera catena funzioni con core.css + servizi.css.
#}
{% macro testSection(id, title, note) %}
<div id="{{ id }}" class="rtds-border-b rtds-border-gray-03 rtds-pb-2 rtds-mb-6">
<h2 class="rtds-text-xl rtds-font-bold">{{ title }}</h2>
{% if note %}<p class="rtds-text-sm rtds-content-02 rtds-mt-1">{{ note }}</p>{% endif %}
</div>
{% endmacro %}
{# Banner di contesto + indice #}
<div class="rtds-background-01 rtds-border-b rtds-border-gray-03 rtds-px-4 rtds-py-3 rtds-space-y-2">
<p class="rtds-text-sm rtds-content-02">
<strong>Test widget Atti</strong> — carica <code>core.css</code> + <code>servizi.css</code>.
Verifica: lista risultati, empty state, loading, dettaglio atto.
</p>
<nav aria-label="Sezioni di test">
<ul class="rtds-flex rtds-flex-wrap rtds-gap-3 rtds-list-none rtds-p-0 rtds-m-0 rtds-text-sm">
<li><a href="#lista" class="rtds-link">Lista atti</a></li>
<li><a href="#empty" class="rtds-link">Empty state</a></li>
<li><a href="#loading" class="rtds-link">Loading</a></li>
<li><a href="#dettaglio" class="rtds-link">Dettaglio atto</a></li>
</ul>
</nav>
</div>
<div class="rtds-space-y-16 rtds-py-8">
{# ── 1. Lista risultati (default) ─────────────────────────────────────── #}
<section id="lista">
{{ testSection("lista-h", "1. Widget — Lista atti",
"Stato normale: widget-nav + widget-search + widget-chip-filters + card--widget (×6) + pagination.") }}
{% render '@widget', {}, true %}
</section>
{# ── 2. Empty state ───────────────────────────────────────────────────── #}
<section id="empty">
{{ testSection("empty-h", "2. Widget — Empty state",
"Nessun risultato trovato. Verifica che il messaggio di stato vuoto sia visibile e accessibile (aria-live).") }}
{% render '@widget--empty-state', {}, true %}
</section>
{# ── 3. Loading results ───────────────────────────────────────────────── #}
<section id="loading">
{{ testSection("loading-h", "3. Widget — Loading results (wip)",
"Caricamento in corso. Verifica aria-busy, spinner/skeleton e che il layout non collassi.") }}
{% render '@widget--loading-results', {}, true %}
</section>
{# ── 4. Dettaglio atto ────────────────────────────────────────────────── #}
<section id="dettaglio">
{{ testSection("dettaglio-h", "4. Widget — Dettaglio atto",
"Vista di dettaglio del singolo atto: back-link, definition list, documenti scaricabili.") }}
{% render '@widget--atto', {}, true %}
</section>
</div>
/* No context defined. */
No notes defined.