mypgs 1.3.2 → 1.3.3

package/templates/demo.js

@@ -7,35 +7,37 @@ if (localStorage.getItem("screenIsDarkMode") === "true") {
 
 
 const templateFiles = [
-    "components/md-tooltip.html",
-    "components/md-modal.html",
-    "components/md-stepTabs.html",
-    "layout/md-header.html",
-    "components/md-accordion.html",
-    "components/md-breadcumbs.html",
-    "components/md-button.html",
-    "components/md-card.html",
-    "components/md-dropdown.html",
-    "components/md-form.html",
-    "components/md-logo.html",
-    "components/md-menu.html",
-    "components/md-searchbar.html",
-    "components/md-slides.html",
-    "components/md-steps.html",
-    "components/md-table.html",
-    "layout/md-body.html",
-    "layout/md-cookieConsent.html",
-    "layout/md-section.html",
-    "layout/md-pageShell.html",
-    "layout/md-footer.html",
-    "components/md-notification.html",
+    "layout/body.html",
+    "layout/section.html",
+    "layout/flex.html",
+    "layout/grid.html",
+    "layout/pageShell.html",
+    "patterns/cookieConsent.html",
+    "patterns/header.html",
+    "patterns/footer.html",
+    "components/menu.html",
+    "components/tooltip.html",
+    "components/modal.html",
+    "components/stepTabs.html",
+    "components/accordion.html",
+    "components/breadcumbs.html",
+    "components/button.html",
+    "components/card.html",
+    "components/dropdown.html",
+    "components/tooltip.html",
+    "components/form.html",
+    "components/logo.html",
+    "components/searchbar.html",
+    "components/slides.html",
+    "components/steps.html",
+    "components/table.html",
+    "components/notification.html",
 ];
 
 function getTemplateTitle(path) {
     return path
         .replace(".html", "")
         .replace("/", " / ")
-        .replace("md-", "");
 }
 
 function renderSourceTemplate(section, html) {
@@ -54,27 +56,16 @@ function renderTemplate(section, path, html) {
 }
 
 function renderLayout(root, path, html) {
-    if (path === "layout/md-body.html") {
-        const section = document.createElement("section");
-        section.setAttribute("pgs", "section flexColumnElements");
-        section.dataset.template = path;
-
-        const title = document.createElement("h2");
-        title.textContent = getTemplateTitle(path);
-        section.append(title);
-        renderSourceTemplate(section, html);
-        root.append(section);
-        return;
-    }
-
     const template = document.createElement("template");
     template.innerHTML = html.trim();
     root.append(template.content.cloneNode(true));
 }
 
-function getLayoutRoot(path, beforeRoot, afterRoot) {
-    if (path === "layout/md-header.html") return beforeRoot;
-    return afterRoot;
+function renderTitle(section, path) {
+    const title = document.createElement("p");
+    title.classList.add("template-title");
+    title.innerHTML = "<strong>" + getTemplateTitle(path) + "</strong>";
+    section.append(title);
 }
 
 async function loadTemplate(path) {
@@ -92,19 +83,19 @@ function loadPgsJavascript() {
 }
 
 async function bootDemo() {
-    const componentsRoot = document.getElementById("templates-demo-components");
-    const layoutsBeforeRoot = document.getElementById("templates-demo-layouts-before");
-    const layoutsRoot = document.getElementById("templates-demo-layouts");
+    const BEEFORE = document.getElementById("templates-demo-before");
+    const MAIN = document.getElementById("templates-demo-main");
+    const AFTER = document.getElementById("templates-demo-after");
 
     for (const path of templateFiles) {
-        const isLayout = path.startsWith("layout/");
-
-        if (isLayout) {
-            const layoutRoot = getLayoutRoot(path, layoutsBeforeRoot, layoutsRoot);
+        const isHeader = path === "patterns/header.html";
+        const isfooter = path === "patterns/footer.html";
+        const isBody = path === "layout/body.html";
 
+        if (isHeader || isfooter) {
             try {
                 const html = await loadTemplate(path);
-                renderLayout(layoutRoot, path, html);
+                renderLayout(isHeader ? BEEFORE : AFTER, path, html);
             } catch (error) {
                 const message = document.createElement("p");
                 message.textContent = `Template non caricato: ${error.message}`;
@@ -117,11 +108,15 @@ async function bootDemo() {
         const section = document.createElement("section");
         section.setAttribute("pgs", "section flexColumnElements");
         section.dataset.template = path;
+        renderTitle(section, path);
 
-        const title = document.createElement("p");
-        title.classList.add("template-title");
-        title.innerHTML = "<strong>" + getTemplateTitle(path) + "</strong>";
-        section.append(title);
+        if (isBody) {
+            const html = await loadTemplate(path);
+            renderSourceTemplate(section, html);
+            MAIN.append(section);
+
+            continue
+        }
 
         try {
             const html = await loadTemplate(path);
@@ -132,7 +127,13 @@ async function bootDemo() {
             section.append(message);
         }
 
-        componentsRoot.append(section);
+        MAIN.append(section);
+
+        if (path == "layout/section.html" || path == "layout/pageShell.html") {
+            section.style.display = "contents";
+
+            Array.from(section.children).forEach(c => c.style.width = "100%");
+        }
     }
 
     loadPgsJavascript();

package/templates/layout/flex.html

@@ -0,0 +1,89 @@
+<div pgs="container flexColumnTexts">
+    <strong>Sezione standard</strong>
+    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+</div>
+
+
+<div pgs="flex-2">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="flex-3">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="flex-4">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+</div>
+
+<div pgs="flex-6">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna cinque</strong>
+        <p>Contenuto della quinta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna sei</strong>
+        <p>Contenuto della sesta colonna.</p>
+    </article>
+</div

package/templates/layout/grid.html

@@ -0,0 +1,89 @@
+<div pgs="container flexColumnTexts">
+    <strong>Sezione standard</strong>
+    <p>Contenuto centrato dentro una sezione MyPGS.</p>
+</div>
+
+
+<div pgs="grid-2">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="grid-3">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+</div>
+
+
+<div pgs="grid-4">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+</div>
+
+<div pgs="grid-6">
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna uno</strong>
+        <p>Contenuto della prima colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna due</strong>
+        <p>Contenuto della seconda colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna tre</strong>
+        <p>Contenuto della terza colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna quattro</strong>
+        <p>Contenuto della quarta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna cinque</strong>
+        <p>Contenuto della quinta colonna.</p>
+    </article>
+
+    <article pgs="card flexColumnTexts">
+        <strong>Colonna sei</strong>
+        <p>Contenuto della sesta colonna.</p>
+    </article>
+</div

package/templates/layout/pageShell.html

@@ -0,0 +1,59 @@
+<div pgs="pageShell">
+    <aside pgs="pageShell-asideLeft">
+        <div pgs="flexColumnTexts">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
+        </div>
+    </aside>
+
+    <main pgs="pageShell-content">
+        <section pgs="flexColumnElements" id="sezione-uno">
+            <strong>Lorem ipsum</strong>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
+        </section>
+    </main>
+
+    <aside pgs="pageShell-asideRight">
+        <div pgs="flexColumnTexts">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
+        </div>
+    </aside>
+</div>
+<div pgs="pageShell">
+    <aside pgs="pageShell-asideLeft">
+        <div pgs="flexColumnTexts">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
+        </div>
+    </aside>
+
+    <main pgs="pageShell-content">
+        <section pgs="flexColumnElements" id="sezione-uno">
+            <strong>Lorem ipsum</strong>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
+        </section>
+    </main>
+</div>
+
+<div pgs="pageShell">
+
+    <main pgs="pageShell-content">
+        <section pgs="flexColumnElements" id="sezione-uno">
+            <strong>Lorem ipsum</strong>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
+        </section>
+    </main>
+
+    <aside pgs="pageShell-asideRight">
+        <div pgs="flexColumnTexts">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab modi ut sunt est illum accusantium dolores eum aut cum itaque.</p>
+        </div>
+    </aside>
+</div>
+<div pgs="pageShell">
+
+    <main pgs="pageShell-content">
+        <section pgs="flexColumnElements" id="sezione-uno">
+            <strong>Lorem ipsum</strong>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolore veniam nulla hic voluptatum harum illo voluptatem quos. Id quibusdam nemo, mollitia iusto quisquam tenetur doloremque corrupti natus nisi est sed consectetur deserunt? Fugiat consectetur iure aut id voluptate unde autem eius facilis dolorum? Eveniet, sit, excepturi iusto porro eos temporibus illum non ut sunt ex aut earum neque. Iure harum similique autem commodi ratione enim quisquam soluta rem, eius dolor officiis necessitatibus voluptatibus obcaecati vel sint iusto. Eligendi reiciendis aut error rem? Hic aliquid tenetur porro itaque quaerat excepturi consequatur veniam, et alias molestiae, eius odio quae maiores suscipit iure voluptatibus sed dolor facere ipsa quod libero necessitatibus, placeat natus. Doloribus esse nobis culpa ab ut dolorem id expedita nesciunt necessitatibus ipsam natus accusantium eius eveniet eum, distinctio quos modi perspiciatis earum sequi nostrum consequatur quibusdam? Blanditiis iusto possimus officia odio animi repudiandae? Repellendus autem ut soluta facere accusamus magni aut architecto cumque cupiditate. Nostrum officiis, tenetur consequuntur quaerat alias animi debitis? Quae quas placeat iure alias totam quaerat fugit recusandae sed, earum ipsa nihil molestiae quam odit itaque, odio asperiores, mollitia porro ratione tempora laboriosam. Incidunt aliquam nobis sunt ut molestiae nam animi placeat neque vero ratione? Eaque?</p>
+        </section>
+    </main>
+</div>

package/templates/layout/section.html

@@ -0,0 +1,40 @@
+<div pgs="flexColumnSections">
+    <section pgs="section flexColumnElements">
+        <div pgs="container flexColumnTexts">
+            <strong>Sezione standard</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionFull flexColumnElements">
+        <div pgs="container flexColumnTexts">
+            <strong>Sezione full-width</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionSpecificity flexColumnElements">
+        <div pgs="container flexColumnTexts">
+            <strong>Sezione specificità</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+        <div pgs="sectionSpecificity-child container flexColumnTexts">
+            <strong>Sezione specificità-child</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionMax flexColumnElements" style="background-color: var(--color-primary-soft)">
+        <div pgs="container flexColumnTexts">
+            <strong>Sezione max-width</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+    </section>
+
+    <section pgs="sectionNoPadding flexColumnElements">
+        <div pgs="container flexColumnTexts">
+            <strong>Sezione no-padding</strong>
+            <p>Contenuto centrato dentro una sezione MyPGS.</p>
+        </div>
+    </section>
+</div>

package/templates/{layout/md-footer.html → patterns/footer.html}

@@ -26,6 +26,7 @@
 
     <section pgs="footer-legal section">
         <div pgs="footer-legal-content">
+            <button type="button" pgs="button cookieConsent-actionOpen">Preferenze cookie</button>
             <p><a href="">Privacy Policy</a></p>
             <p><a href="">Cookie Policy</a></p>
             <p><a href="">Termini e Condizioni</a></p>

package/templates/{layout/md-header.html → patterns/header.html}

@@ -7,7 +7,7 @@
 		</div>
 
 		<div pgs="header-element-onlyDesktop">
-			<nav pgs="menuHorizontal" aria-label="Menu principale">
+			<nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
 				<ul>
 					<li><a href="/">Home</a></li>
 					<li><a href="#componenti">Componenti</a></li>
@@ -27,14 +27,11 @@
 
 		<div pgs="header-element-hamburger modal" pgs-option="containerPGS[header] ">
 
-			<button pgs="buttonIcon modal-button header-element-hamburger-button" type="button" title="Menu">
-				<span pgs="header-element-hamburger-row"></span>
-				<span pgs="header-element-hamburger-row"></span>
-			</button>
+			<button pgs="buttonIcon modal-button modal-close header-element-hamburger-button" type="button"></button>
 
-			<dialog pgs="header-mobile-dialog" pgs-option="right ">
-				<div pgs="modal-dialog-content header-mobile-content">
-					<nav pgs="menuVertical" aria-label="Menu mobile">
+			<dialog pgs="modal-dialog" pgs-option="right">
+				<div pgs="modal-dialog-content">
+					<nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
 						<ul>
 							<li><a href="/">Home</a></li>
 							<li><a href="#componenti">Componenti</a></li>
@@ -60,4 +57,4 @@
 			document.querySelector("[pgs~=header-element]").setAttribute("data-header-mobileActive", "true");
 		}
 	</script>
-</header>
+</header>

package/assets/scss/base/_reset.scss

@@ -1,15 +0,0 @@
-//= Reset properties 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
-}
-
-:root {
-    interpolate-size: allow-keywords;
-}
-
-@view-transition {
-    navigation: auto;
-}

package/assets/scss/mixin/_mx-menu.scss

@@ -1,154 +0,0 @@
-//# MENU
-@mixin menu($direction: row, $isHeader: true) {
-
-    >ul {
-        display: flex;
-        font-weight: 600;
-        align-items: center;
-        flex-direction: $direction;
-        column-gap: var(--gap-texts);
-        row-gap: 1.0rem;
-        // width: 100%;
-        isolation: isolate;
-        flex-wrap: nowrap;
-
-        //= Content
-        >li {
-
-            >a {
-                flex-grow: 1;
-                min-width: fit-content;
-                
-                @include button();
-                @if($isHeader) {
-                    @include button_header();
-                }
-                span {
-                    line-height: 1.6;
-                    flex-grow: 1;
-                }
-            }
-        }
-    }
-
-    //= ROW 
-    @if($direction ==row) {
-        ul {
-            >li>a {
-                width: max-content;
-            }
-
-            //== Sub menu
-            >li.menu-item-has-children {
-                display: flex;
-                gap: 0.2rem;
-                flex-wrap: nowrap;
-                isolation: isolate;
-
-                >a {
-                    border-radius: var(--border-radius-input);
-                    // box-shadow: var(--box-shadow);
-                }
-
-                ul.sub-menu {
-                    &:not([popover]) {
-                        display: none;
-
-                        li a {
-                            min-width: 100% !important;
-                        }
-                    }
-
-                    &[pgs-state~=open] {
-                        display: flex;
-                    }
-                }
-
-                //== ICON
-                button.icon-down {
-                    --button-size: 0.9rem;
-                    margin-right: -15px;
-                    margin-block: auto;
-                    scale: 0.9;
-                    height: min-content;
-                    cursor: pointer;
-                    translate: -15px;
-                    z-index: -1;
-
-                    &[aria-expanded="true"] {
-                        span {
-                            rotate: 180deg;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    //= COLUMN 
-    @if($direction ==column) {
-        ul {
-            li {
-                width: -webkit-fill-available;
-
-                >a {
-                    width: 100%;
-                    padding: 1.5rem;
-                    --button-background: transaprent;
-                }
-            }
-
-            //== Sub menu
-            >li:has(ul.sub-menu) {
-                @include flexRow;
-                align-items: center;
-
-                button.icon-down {
-                    --button-background: var(--color-boxDark);
-                    --button-color: var(--color-white);
-                    max-height: max-content;
-                    justify-content: center;
-
-                    span {
-                        transition: all 300ms;
-                    }
-
-                    &[aria-expanded="true"] span {
-                        rotate: 180deg;
-                    }
-                }
-
-                a {
-                    max-width: calc(90% - var(--gap-texts));
-                }
-
-                >ul {
-                    flex-basis: 100%;
-
-                    &.sub-menu:not([pgs-state~=open]) {
-                        display: none;
-                    }
-
-                    &.sub-menu[pgs-state~=open] {
-                        padding-left: 2rem;
-                        margin-left: 2rem;
-                        border-left: solid 2px var(--color-gray);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin menuFooter() {
-    ul {
-        @include flexColumn();
-
-        li {
-            a {
-                color: var(--color-text);
-                font-weight: 600;
-            }
-        }
-    }
-}

package/templates/components/md-dropdown.html

@@ -1,16 +0,0 @@
-<span pgs="dropdown">
-    <button pgs="dropdown-button button" pgs-option="buttonReverse" type="button">
-        Apri menu
-        <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
-    </button>
-
-    <div pgs="dropdown-content">
-        <nav aria-label="Menu dropdown">
-            <ul>
-                <li><a href="#">Voce uno</a></li>
-                <li><a href="#">Voce due</a></li>
-                <li><a href="#">Voce tre</a></li>
-            </ul>
-        </nav>
-    </div>
-</span>