mypgs 2.0.0 → 3.0.0

package/reference/html/components/search.html

@@ -0,0 +1,109 @@
+<!--
+/**
+ * @title Search
+ * @description Search markup, configuration, behavior, and usage example.
+ *
+ * @pgs
+ * - search: identifies the search element used by Search.
+ * - search-suggestions: identifies the search-suggestions element used by Search.
+ * - search-suggestions-item: identifies the search-suggestions-item element used by Search.
+ * - search-modal: identifies the search-modal element used by Search.
+ * - search-mobile: identifies the search-mobile element used by Search.
+ *
+ * @pgs-option
+ * - containerPGS: identifies the containerPGS element used by Search.
+ * - buttonNohover: disables hover behavior on the search container.
+ * - buttonIcon: presents search and close actions as icon buttons.
+ *
+ * @pgs-state
+ * - open: identifies the open element used by Search.
+ * - loading: identifies the loading element used by Search.
+ * - error: identifies the error element used by Search.
+ * - selected: identifies the selected element used by Search.
+ *
+ * @api
+ * - pgs.search.init(root): initializes matching elements within the specified root.
+ * - pgs.search.api(element): returns the instance associated with the specified initialized element.
+ * - instance.configure(options): provides the documented operation through the component public API.
+ * - instance.setSource(source): provides the documented operation through the component public API.
+ * - instance.search(query): provides the documented operation through the component public API.
+ * - instance.open(): opens the component.
+ * - instance.close(): closes the component.
+ * - instance.clear(): provides the documented operation through the component public API.
+ * - instance.cancel(): annulla debounce e richiesta attiva.
+ * - instance.select(index, submit): provides the documented operation through the component public API.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ * - instance.destroy(): removes listeners and releases the component instance.
+ * - instance.items(): provides the documented operation through the component public API.
+ * - instance.isOpen(): returns true when the component is open.
+ * - instance.isLoading(): returns true while the component is loading.
+ * - instance.setActiveIndex(index): provides the documented operation through the component public API.
+ *
+ * @related
+ * - button: provides the base styling for search controls.
+ * - modal: uses the related modal component or utility in this example.
+ * - modal-button: uses the related modal-button component or utility in this example.
+ * - modal-close: uses the related modal-close component or utility in this example.
+ * - flexRow: uses the related flexRow component or utility in this example.
+ * - section: uses the related section component or utility in this example.
+ *
+ * @return Complete HTML markup and usage example for Search.
+ */
+-->
+
+<form pgs="button search" pgs-option="buttonNohover" autocomplete="off" action="" method="get">
+    <button type="submit" title="Search"><i class="fa-solid fa-search"></i></button>
+    <input type="search" name="s" placeholder="Search" value="">
+    <ul pgs="search-suggestions"></ul>
+</form>
+
+<div pgs="modal search-modal" pgs-option="containerPGS[header]">
+
+    <button type="button" pgs="modal-button button" pgs-option="buttonIcon" title="Search">
+        <i class="fa-solid fa-search"></i>
+    </button>
+
+    <dialog>
+        <div pgs="flexRow section search-mobile">
+
+            <form pgs="button search" pgs-option="buttonNohover" autocomplete="off" action="/" method="get">
+                <button type="submit" title="Search">
+                    <i class="fa-solid fa-search"></i>
+                </button>
+
+                <input type="search" name="s" placeholder="Search" value="">
+                <ul pgs="search-suggestions"></ul>
+
+                <button type="button" pgs="modal-close button" pgs-option="buttonIcon">
+                    <i class="fa-solid fa-close"></i>
+                </button>
+            </form>
+
+
+        </div>
+    </dialog>
+</div>
+
+<script type="module">
+    import { pgs } from "mypgs";
+
+    const components = [
+        { label: "Accordion", value: "/componenti/accordion", data: { category: "component" } },
+        { label: "Dropdown", value: "/componenti/dropdown", data: { category: "component" } },
+        { label: "Modal", value: "/componenti/modal", data: { category: "component" } },
+        { label: "Search", value: "/componenti/search", data: { category: "component" } },
+        { label: "Page Shell", value: "/layout/page-shell", data: { category: "layout" } },
+    ];
+
+    pgs(document).querySelectorAll("search").forEach(search => {
+        pgs.search.api(search)?.configure({
+            minLength: 1,
+            debounce: 150,
+            limit: 5,
+            source: components,
+            onSelect: ({ item, value }) => {
+                console.log(`Selezionato ${item.label}: ${value}`);
+            },
+        });
+    });
+</script>

package/reference/html/components/slides.html

@@ -0,0 +1,75 @@
+<!--
+/**
+ * @title Slides
+ * @description Slides markup, configuration, behavior, and usage example.
+ *
+ * @pgs
+ * - slides: identifies the slides element used by Slides.
+ * - slides-container: identifies the slides-container element used by Slides.
+ * - slides-prec: identifies the slides-prec element used by Slides.
+ * - slides-next: identifies the slides-next element used by Slides.
+ * - slides-dots: identifies the slides-dots element used by Slides.
+ *
+ * @pgs-option
+ * - singleScroll: identifies the singleScroll element used by Slides.
+ * - shadowDesktop: identifies the shadowDesktop element used by Slides.
+ * - notScrollAnimation: identifies the notScrollAnimation element used by Slides.
+ * - notScrollWithMouse: identifies the notScrollWithMouse element used by Slides.
+ * - buttonIcon: styles the previous and next actions generated at runtime.
+ *
+ * @api
+ * - pgs.slides.init(root): initializes matching elements within the specified root.
+ * - pgs.slides.api(element): returns the instance associated with the specified initialized element.
+ * - instance.previous(): moves to the previous item.
+ * - instance.next(): moves to the next item.
+ * - instance.goTo(index): provides the documented operation through the component public API.
+ * - instance.getCurrentIndexes(): provides the documented operation through the component public API.
+ * - instance.getCurrentElements(): provides the documented operation through the component public API.
+ * - instance.getTotal(): returns the total number of items.
+ * - instance.isAtStart(): provides the documented operation through the component public API.
+ * - instance.isAtEnd(): provides the documented operation through the component public API.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ *
+ * @related
+ * - card: uses the related card component or utility in this example.
+ * - card-img: uses the related card-img component or utility in this example.
+ * - imgCover: uses the related imgCover component or utility in this example.
+ * - flexColumn: uses the related flexColumn component or utility in this example.
+ *
+ * @return Complete HTML markup and usage example for Slides.
+ */
+-->
+
+<div pgs="slides" pgs-option="singleScroll shadowDesktop">
+    <ul pgs="slides-container">
+        <li>
+            <article pgs="card flexColumn">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+1" alt="Slide 1">
+                <div pgs="flexColumn">
+                    <h3>Slide uno</h3>
+                    <p>First slide content.</p>
+                </div>
+            </article>
+        </li>
+
+        <li>
+            <article pgs="card flexColumn">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+2" alt="Slide 2">
+                <div pgs="flexColumn">
+                    <h3>Slide due</h3>
+                    <p>Second slide content.</p>
+                </div>
+            </article>
+        </li>
+
+        <li>
+            <article pgs="card flexColumn">
+                <img pgs="card-img imgCover" src="https://placehold.co/800x500?text=Slide+3" alt="Slide 3">
+                <div pgs="flexColumn">
+                    <h3>Slide tre</h3>
+                    <p>Third slide content.</p>
+                </div>
+            </article>
+        </li>
+    </ul>
+</div>

package/reference/html/components/stepTabs.html

@@ -0,0 +1,83 @@
+<!--
+/**
+ * @title Step Tabs
+ * @description Step Tabs markup, configuration, behavior, and usage example.
+ *
+ * @pgs
+ * - stepTabs: identifies the stepTabs element used by Step Tabs.
+ * - stepTabs-dots: identifies the stepTabs-dots element used by Step Tabs.
+ * - stepTabs-dots-dot: identifies the stepTabs-dots-dot element used by Step Tabs.
+ * - stepTabs-container: identifies the stepTabs-container element used by Step Tabs.
+ * - tab: identifies the tab element used by Step Tabs.
+ * - stepTabs-prev: identifies the stepTabs-prev element used by Step Tabs.
+ * - stepTabs-restart: identifies the stepTabs-restart element used by Step Tabs.
+ * - stepTabs-next: identifies the stepTabs-next element used by Step Tabs.
+ *
+ * @pgs-option
+ * - tabIcon: identifies the tabIcon element used by Step Tabs.
+ * - step: identifies the step element used by Step Tabs.
+ * - buttonReverse: identifies the buttonReverse element used by Step Tabs.
+ *
+ * @pgs-state
+ * - is-active: identifies the is-active element used by Step Tabs.
+ * - is-completed: identifies the is-completed element used by Step Tabs.
+ * - is-locked: identifies the is-locked element used by Step Tabs.
+ *
+ * @api
+ * - pgs.stepTabs.init(root): initializes matching elements within the specified root.
+ * - pgs.stepTabs.api(element): returns the instance associated with the specified initialized element.
+ * - instance.restart(): torna al primo tab e ripristina i blocchi dichiarati inizialmente.
+ * - instance.goTo(index, scroll): provides the documented operation through the component public API.
+ * - instance.next(): moves to the next item.
+ * - instance.prev(): moves to the previous item.
+ * - instance.toggleLock(index, lock): provides the documented operation through the component public API.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ * - instance.getCurrent(): provides the documented operation through the component public API.
+ * - instance.getState(): provides the documented operation through the component public API.
+ *
+ * @related
+ * - flexColumn: uses the related flexColumn component or utility in this example.
+ * - gapElements: applies element spacing to the step tab container.
+ * - flexRow: uses the related flexRow component or utility in this example.
+ * - button: uses the related button component or utility in this example.
+ *
+ * @return Complete HTML markup and usage example for Step Tabs.
+ */
+-->
+
+<div pgs="stepTabs flexColumn gapElements">
+    <div pgs="stepTabs-dots" aria-label="Avanzamento"></div>
+
+    <div pgs="stepTabs-container">
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-user]">
+            <h3>Personal details</h3>
+            <p>First tab content.</p>
+        </section>
+
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-list-check]">
+            <h3>Preferences</h3>
+            <p>Second tab content.</p>
+        </section>
+
+        <section pgs="tab flexColumn" tabindex="-1" pgs-option="tabIcon[fa-check]">
+            <h3>Confirmation</h3>
+            <p>Third tab content.</p>
+        </section>
+    </div>
+
+    <div pgs="flexRow">
+        <button pgs="stepTabs-prev button" type="button">
+            <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
+            Back
+        </button>
+
+        <button pgs="stepTabs-restart button" type="button">
+            Ricomincia
+        </button>
+
+        <button pgs="stepTabs-next button" pgs-option="buttonReverse" type="button">
+            Next
+            <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
+        </button>
+    </div>
+</div>

package/reference/html/components/steps.html

@@ -0,0 +1,49 @@
+<!--
+/**
+ * @title Steps
+ * @description Ordered list of steps showing a number, content, and connecting line, with missing structural elements added at runtime.
+ *
+ * @pgs
+ * - steps: identifies the ordered list initialized by the steps module.
+ * - steps-step: identifies each step in the sequence.
+ * - steps-step-circle: identifies the numeric indicator, which is created automatically when missing.
+ * - steps-step-content: identifies the text content of the step.
+ * - steps-step-line: identifies the connecting line dynamically added to each step.
+ *
+ * @api
+ * - pgs.steps.init(root): initializes unregistered step lists within the specified Document or Element.
+ * - pgs.steps.api(element): returns the instance associated with an initialized steps root.
+ * - instance.steps(): returns an array containing every steps-step element.
+ * - instance.getStep(index): returns the step at the specified index.
+ * - instance.getTotal(): returns the total number of steps.
+ * - instance.refresh(): reinitializes the list, recreates missing elements, and returns the new instance.
+ *
+ * @return Ordered HTML list of numbered steps completed by the JavaScript module.
+ */
+-->
+
+<ol pgs="steps">
+    <li pgs="steps-step">
+        <span pgs="steps-step-circle">1</span>
+        <div pgs="steps-step-content">
+            <h3>Primo step</h3>
+            <p>Descrizione del primo passaggio.</p>
+        </div>
+    </li>
+
+    <li pgs="steps-step">
+        <span pgs="steps-step-circle">2</span>
+        <div pgs="steps-step-content">
+            <h3>Secondo step</h3>
+            <p>Descrizione del secondo passaggio.</p>
+        </div>
+    </li>
+
+    <li pgs="steps-step">
+        <span pgs="steps-step-circle">3</span>
+        <div pgs="steps-step-content">
+            <h3>Terzo step</h3>
+            <p>Descrizione del terzo passaggio.</p>
+        </div>
+    </li>
+</ol>

package/reference/html/components/summary.html

@@ -0,0 +1,41 @@
+<!--
+/**
+ * @title Summary
+ * @description Summary markup, configuration, behavior, and usage example.
+ *
+ * @pgs
+ * - summary: identifies the summary element used by Summary.
+ * - summary-content: identifies the summary-content element used by Summary.
+ * - summary-button: identifies the summary-button element used by Summary.
+ *
+ * @pgs-state
+ * - overflow: identifies the overflow element used by Summary.
+ * - open: identifies the open element used by Summary.
+ *
+ * @api
+ * - pgs.summary.init(root): initializes matching elements within the specified root.
+ * - pgs.summary.api(element): returns the instance associated with the specified initialized element.
+ * - instance.open(): opens the component.
+ * - instance.close(): closes the component.
+ * - instance.toggle(): toggles the component state.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ * - instance.isOpen(): returns true when the component is open.
+ *
+ * @return Complete HTML markup and usage example for Summary.
+ */
+-->
+
+<div pgs="summary">
+    <div pgs="summary-content">
+        <p>
+            This demonstration text is long enough to span multiple lines and show the summary component behavior. Content can include text, links, and other inline elements without requiring additional markup.
+        </p>
+        <p>
+            When content exceeds three lines, a button is shown to expand or collapse the visible area.
+        </p>
+    </div>
+
+    <button pgs="summary-button" type="button">
+        Show more
+    </button>
+</div>

package/{templates → reference}/html/components/table.html

@@ -1,12 +1,12 @@
 <!--
 /**
  * @title Table
- * @description Contenitore responsive per una tabella semantica con intestazioni e righe di dati coerenti con gli stili del design system.
+ * @description Responsive container for a semantic table with headers and data rows consistent with the design system styles.
  *
  * @pgs
- * - table: identifica il wrapper che gestisce presentazione e scorrimento della tabella nativa.
+ * - table: identifies the wrapper that manages presentation and scrolling for the native table.
  *
- * @return Tabella HTML completa racchiusa nel contenitore PGS dedicato.
+ * @return Complete HTML table wrapped in the dedicated PGS container.
  */
 -->
 
@@ -14,7 +14,7 @@
     <table>
         <thead>
             <tr>
-                <th>Nome</th>
+                <th>Name</th>
                 <th>Stato</th>
                 <th>Data</th>
             </tr>
@@ -23,7 +23,7 @@
         <tbody>
             <tr>
                 <td>Elemento uno</td>
-                <td>Attivo</td>
+                <td>Active</td>
                 <td>2026-01-01</td>
             </tr>
             <tr>

package/reference/html/components/tooltip.html

@@ -0,0 +1,44 @@
+<!--
+/**
+ * @title Tooltip
+ * @description Tooltip markup, configuration, behavior, and usage example.
+ *
+ * @pgs
+ * - tooltip: identifies the tooltip element used by Tooltip.
+ * - tooltip-button: identifies the tooltip-button element used by Tooltip.
+ * - tooltip-content: identifies the tooltip-content element used by Tooltip.
+ *
+ * @pgs-option
+ * - position: identifies the position element used by Tooltip.
+ * - buttonMini: applies the smallest button variant to the tooltip trigger.
+ *
+ * @pgs-state
+ * - open: identifies the open element used by Tooltip.
+ *
+ * @api
+ * - pgs.dropdown.init(root): initializes matching elements within the specified root.
+ * - pgs.dropdown.api(element): returns the instance associated with the specified initialized element.
+ * - instance.open(): opens the component.
+ * - instance.close(): closes the component.
+ * - instance.toggle(): toggles the component state.
+ * - instance.refresh(): refreshes the component and returns its updated instance.
+ * - instance.isOpen(): returns true when the component is open.
+ *
+ * @related
+ * - button: provides the base styling for the tooltip trigger.
+ * - dropdown: uses the related dropdown component or utility in this example.
+ * - dropdown-button: uses the related dropdown-button component or utility in this example.
+ * - dropdown-content: uses the related dropdown-content component or utility in this example.
+ *
+ * @return Complete HTML markup and usage example for Tooltip.
+ */
+-->
+
+<span pgs="dropdown tooltip">
+    <button pgs="dropdown-button button tooltip-button" pgs-option="buttonMini" title="open-tooltip" type="button">
+        <i class="fa-solid fa-info"></i>
+    </button>
+    <div pgs="dropdown-content tooltip-content">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto hic, id consectetur facilis et, iste animi minima quidem praesentium omnis quod. Quidem provident ad cum aut reprehenderit laboriosam eum placeat.
+    </div>
+</span>

package/reference/html/layout/body.html

@@ -0,0 +1,34 @@
+<!--
+/**
+ * @title Body
+ * @description Base HTML document that enables MyPGS, configures essential metadata, and applies shared background, text, and heading variants to the body.
+ *
+ * @pgs
+ * - htmlBase: applies the fundamental rules to the html element.
+ * - initP: enables layout, component, and pattern styles scoped to the MyPGS namespace.
+ * - bodyBase: applies the base structure and spacing to the body.
+ * - bodyImg: enables shared rules for images contained in the page.
+ * - bodyText: enables text typography and spacing.
+ * - bodyHeading: enables the typographic heading hierarchy.
+ *
+ * @pgs-state
+ * - darkmode: is applied dynamically to html and body to activate the dark theme.
+ *
+ * @return Complete HTML skeleton required to initialize the MyPGS library.
+ */
+-->
+
+<!DOCTYPE html>
+<html lang="it-IT" pgs="htmlBase initP">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<!-- Colori Browsers -->
+	<meta name="theme-color" content="">
+	<meta name="apple-mobile-web-app-status-bar-color" content="">
+
+</head>
+
+<body pgs="bodyBase bodyImg bodyText bodyHeading" >

package/reference/html/layout/footer.html

@@ -0,0 +1,67 @@
+<!--
+/**
+ * @title Footer
+ * @description Complete footer with theme control, brand area, navigation, informational content, and a link to cookie preferences.
+ *
+ * @pgs
+ * - footer: identifies the main footer container.
+ * - footer-top: identifies the upper section containing the brand and content.
+ * - footer-top-content: identifies the responsive inner layout of the upper section.
+ * - footer-brand: identifies the group dedicated to the brand.
+ * - footer-brand-motto: identifies the descriptive text associated with the brand.
+ * - footer-content: identifies an informational footer column.
+ * - footer-legal: identifies the lower section dedicated to legal information.
+ * - footer-legal-content: identifies the content of the legal section.
+ *
+ * @pgs-option
+ * - column-3: configures the footer flex layout with three columns.
+ *
+ * @related
+ * - button: presents theme and cookie preference controls as buttons.
+ * - toggleDarkmode: connects the control to the global light or dark theme handler.
+ * - section: applies the shared section structure to the upper and legal areas.
+ * - flexRow: distributes the upper columns responsively.
+ * - logo: inserts the brand into the footer.
+ * - logo-text: uses the text variant of the logo.
+ * - cookieConsent-actionOpen: opens the Cookie Consent preference panel.
+ *
+ * @return Complete footer HTML structure with brand, menu, and legal area.
+ */
+-->
+
+<footer pgs="footer">
+    <button pgs="button toggleDarkmode" type="button" aria-label="Change theme">
+        <i class="fa-solid fa-moon"></i>
+    </button>
+
+    <section pgs="footer-top section">
+        <div pgs="footer-top-content flexRow" pgs-option="column-3">
+            <div pgs="footer-brand">
+                <a aria-label="Logo" pgs="logo" href="/">
+                    <span pgs="logo-text">MyPGS</span>
+                </a>
+                <p pgs="footer-brand-motto">Componenti frontend riutilizzabili.</p>
+            </div>
+
+            <div pgs="footer-content">
+                <h2>Menu</h2>
+                <nav aria-label="Menu footer">
+                    <ul>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="/contatti">Contatti</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </section>
+
+    <section pgs="footer-legal section">
+        <div pgs="footer-legal-content">
+            <button type="button" pgs="button cookieConsent-actionOpen">Cookie preferences</button>
+            <p><a href="">Privacy Policy</a></p>
+            <p><a href="">Cookie Policy</a></p>
+            <p><a href="">Termini e Condizioni</a></p>
+            <p>© 2026 MyPgs. No rights reserved.</p>
+        </div>
+    </section>
+</footer>

package/reference/html/layout/header.html

@@ -0,0 +1,108 @@
+<!--
+/**
+ * @title Header
+ * @description Responsive header that measures available space, switches between desktop and mobile content, and integrates menus, dark mode, and modal navigation.
+ *
+ * @pgs
+ * - header: identifies the main header observed by the JavaScript module.
+ * - header-element: identifies the inner group measured to determine the switch to mobile mode.
+ * - header-element-alwaysOn: identifies the initial area that is always visible.
+ * - header-element-onlyDesktop: identifies content shown only while the desktop menu is active.
+ * - header-element-onlyMobile: identifies content shown only in mobile mode.
+ * - header-element-alwaysOnLast: identifies the final area that is always visible.
+ * - header-element-hamburger: identifies the mobile navigation group.
+ * - header-element-hamburger-button: identifies the header-specific hamburger control.
+ *
+ * @pgs-option
+ * - horizontal: arranges the related desktop menu horizontally.
+ * - vertical: arranges the related mobile menu vertically.
+ * - menuHeader: adapts both menus to the header context.
+ * - containerPGS: uses containerPGS[header] on the modal wrapper to move the dialog into the header.
+ * - right: presents the mobile navigation dialog content from the right side.
+ * - buttonIcon: presents theme and hamburger controls as icon buttons.
+ *
+ * @pgs-state
+ * - mobileActive: is applied to header and header-element when their width or the viewport requires mobile navigation.
+ *
+ * @related
+ * - button: provides the base styling for header controls.
+ * - logo: inserts the brand into the initial area.
+ * - logo-text: uses the text variant of the logo.
+ * - menu: provides desktop and mobile navigation.
+ * - toggleDarkmode: connects the control to the global theme handler.
+ * - modal: provides opening and closing behavior for mobile navigation.
+ * - modal-button: opens the mobile panel.
+ * - modal-close: closes the mobile panel and shares the hamburger control.
+ * - modal-dialog: identifies the mobile navigation dialog.
+ * - modal-dialog-content: identifies the inner mobile navigation panel.
+ *
+ * @return Complete header HTML with desktop navigation and a side mobile panel.
+ */
+-->
+
+<header pgs="header">
+	<div pgs="header-element">
+		<div pgs="header-element-alwaysOn">
+			<a aria-label="Logo" pgs="logo" href="/">
+				<span pgs="logo-text">MyPGS</span>
+			</a>
+		</div>
+
+		<div pgs="header-element-onlyDesktop">
+			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Main menu">
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="#components">Components</a></li>
+					<li><a href="#layout">Layout</a></li>
+				</ul>
+			</nav>
+		</div>
+
+		<div pgs="header-element-onlyMobile">
+		</div>
+
+		<div pgs="header-element-alwaysOnLast">
+			<button pgs="button toggleDarkmode" pgs-option="buttonIcon" type="button" aria-label="Change theme">
+				<i class="fa-solid fa-moon"></i>
+			</button>
+		</div>
+
+		<div pgs="header-element-hamburger modal" pgs-option="containerPGS[header] ">
+
+			<button pgs="button modal-button modal-close header-element-hamburger-button" pgs-option="buttonIcon" type="button"></button>
+
+			<dialog pgs="modal-dialog" pgs-option="right">
+				<div pgs="modal-dialog-content">
+					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Mobile menu">
+						<ul>
+							<li><a href="/">Home</a></li>
+							<li><a href="#components">Components</a></li>
+							<li><a href="#layout">Layout</a></li>
+						</ul>
+					</nav>
+				</div>
+			</dialog>
+		</div>
+	</div>
+
+	<!-- //# HEADER BOTTOM -->
+
+	<script>
+		const addPgsState = (element, state) => {
+			if (!element) return;
+
+			const states = element.getAttribute("pgs-state")?.split(/\s+/) ?? [];
+			element.setAttribute("pgs-state", [...new Set([...states, state])].join(" "));
+		};
+
+		if (localStorage.getItem("screenIsDarkMode") === "true") {
+			addPgsState(document.documentElement, "darkmode");
+			addPgsState(document.body, "darkmode");
+		}
+
+		if (window.innerWidth < 600) {
+			addPgsState(document.querySelector("header"), "mobileActive");
+			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
+		}
+	</script>
+</header>