mypgs 2.1.0 → 3.0.0

package/.vscode/tasks.json

@@ -0,0 +1,39 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "Webpack watch",
+            "type": "shell",
+            "command": "npm run \"start watch\"",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "presentation": {
+                "reveal": "always",
+                "panel": "shared"
+            }
+        },
+        {
+            "label": "Webpack",
+            "type": "shell",
+            "command": "npm run start",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": false
+            },
+            "presentation": {
+                "reveal": "always",
+                "panel": "shared"
+            }
+        }
+    ]
+}

package/AGENTS.md

@@ -9,7 +9,7 @@ This guide is for any AI/Codex agent that initializes or modifies a project base
 - HTML `pgs` attributes as the contract between markup, SCSS, and JavaScript;
 - SCSS sources with base styles, layouts, components, patterns, CSS variables, and mixins;
 - JavaScript modules for recurring behaviors such as accordions, dropdowns, menus, modals, search suggestions, slides, steps, step tabs, notifications, header, cookie consent, and dark mode;
-- example HTML templates in `templates/`;
+- canonical HTML and React references in `reference/`;
 - compiled assets in `dist/`.
 
 It solves the problem of rewriting layouts, buttons, forms, modals, menus, tabs, spacing, states, and base interactions every time. It should be used as the design system foundation because it centralizes naming, spacing, colors, radii, shadows, accessible behaviors, and reusable patterns.
@@ -26,7 +26,7 @@ Write custom code only when the pattern does not exist, or when you are adding a
 ## 2. General Usage Rules
 
 - Use `mypgs` as the first choice for layouts, components, helpers, variables, utilities, and available patterns.
-- Do not recreate existing components from scratch: buttons, forms, dropdowns, modals, menus, slides, accordions, steps, stepTabs, notifications, tooltips, tables, search, logos, headers, footers, and cookie consent.
+- Do not recreate existing components from scratch: alerts, buttons, forms, dropdowns, modals, menus, slides, accordions, steps, stepTabs, notifications, tooltips, tables, search, logos, headers, footers, and cookie consent.
 - Do not duplicate logic already handled by the `mypgs` JS modules, such as modal open/close, accordion state, Popover API dropdowns, step tabs, notifications, or form validation.
 - Keep `pgs` tokens in markup, SCSS selectors, and JS queries consistent.
 - Prefer composing `pgs` tokens over adding new CSS classes.
@@ -63,22 +63,22 @@ Files analyzed:
 - `assets/scss/components/*`
 - `assets/scss/patterns/*`
 - `assets/scss/mixin/*`
-- `templates/html/components/*`
-- `templates/html/layout/*`
-- `templates/html/patterns/*`
+- `reference/html/components/*`
+- `reference/html/layout/*`
+- `reference/html/patterns/*`
 
 Patterns found:
 
 - `pgs` is the main attribute: tokens are separated by spaces, for example `pgs="button modal-button"`.
 - `assets/scss/index.scss` imports base, layout, components, and patterns; layouts/components/patterns are almost all scoped under `[pgs~=initP]`.
-- The main markup must enable the library with `htmlBase initP`, and the body with base body tokens. Use `demo/demo.html` and `templates/html/layout/body.html` as the canonical references.
-- Components use a root token and child tokens with a consistent prefix. Use `templates/html/components/` as the canonical markup source.
+- The main markup must enable the library with `htmlBase initP`, and the body with base body tokens. Use `demo/demo.html` and `reference/html/layout/body.html` as the canonical references.
+- Components use a root token and child tokens with a consistent prefix. Use `reference/html/components/` as the canonical markup source.
 
 - Runtime states use `pgs-state`, for example `open`, `is-active`, `is-completed`, `is-locked`, `success`, `error`, `warning`, and `info`.
 - La ricerca componibile usa esclusivamente `pgs="search"` come root grafico e comportamentale e il figlio opzionale `pgs="search-suggestions"`. La sorgente dati si configura tramite `pgs.search.api(element)?.configure({ source })` e deve restare indipendente dal backend.
-- Configurable options use `pgs-option`, with simple tokens or values inside square brackets. Prefer copying the current option syntax from the relevant template rather than duplicating examples in this guide.
+- Configurable options use `pgs-option`, with simple tokens or values inside square brackets. Prefer copying the current option syntax from the relevant reference file rather than duplicating examples in this guide.
 
-- Naming is mostly camelCase for compound tokens (`menuHorizontal`, `buttonStrong`, `flexColumnElements`) and kebab-like for component sub-elements (`accordion-button`, `modal-dialog-content`, `cookieConsent-actionAccept`).
+- Naming is mostly camelCase for compound tokens (`menuHorizontal`, `buttonStrong`, `flexColumn gapElements`) and kebab-like for component sub-elements (`accordion-button`, `modal-dialog-content`, `cookieConsent-actionAccept`).
 - JS modules export objects with `init` and/or `api`; `_imports.js` registers them with `pgs.registerModules` for direct `pgs.*` access.
 
 ## 4. SCSS Guidelines
@@ -106,7 +106,8 @@ import "mypgs/style.css";
 SCSS rules:
 
 - Use the existing custom properties, for example `--color-primary`, `--color-box`, `--color-text`, `--padding`, `--padding-page`, `--gap-texts`, `--gap-elements`, `--gap-sections`, `--border-radius`, `--border-radius-input`, `--border-complete`, `--box-shadow`, and `--focus-visible`.
-- Use existing mixins and tokens instead of rewriting layouts: `flexColumn`, `flexRow`, `grid-*`, `section`, `container`, `card`, `button`, `form`.
+- Use existing mixins and tokens instead of rewriting layouts: `flexColumn`, `flexRow`, `grid` with `pgs-option="column-N"`, `section`, `container`, `card`, `button`, `form`.
+- Compose buttons explicitly with `buttonBase`, either `buttonContent` or `buttonIcon`, either `buttonHover` or `buttonNohover`, and any required variant such as `buttonStrong`, `buttonMini`, `buttonBig`, or `buttonClose`. Variant mixins do not include the base button styles.
 - Configure dropdown placement with `pgs-option="position[side align]"`, for example `position[top left]`, `position[bottom right]`, or `position[left center]`; do not use a SCSS/CSS custom property for dropdown placement.
 - Prefer overrides through custom properties on the component:
 
@@ -222,16 +223,16 @@ pgs.modal.api(modalEl)?.open();
 
 ## 6. Components and Markup
 
-Use the templates as the single source of truth for component and layout markup. Do not copy full HTML examples into this guide; this avoids drift when templates change.
+Use the reference files as the single source of truth for component and layout markup. Do not copy full HTML examples into this guide; this avoids drift when references change.
 
-Canonical template references:
+Canonical reference files:
 
-- Layouts: `templates/html/layout/body.html`, `templates/html/layout/flex.html`, `templates/html/layout/grid.html`, `templates/html/layout/pageShell.html`, `templates/html/layout/section.html`
-- Components: `templates/html/components/accordion.html`, `templates/html/components/breadcumbs.html`, `templates/html/components/button.html`, `templates/html/components/card.html`, `templates/html/components/dropdown.html`, `templates/html/components/form.html`, `templates/html/components/logo.html`, `templates/html/components/menu.html`, `templates/html/components/modal.html`, `templates/html/components/notification.html`, `templates/html/components/search.html`, `templates/html/components/slides.html`, `templates/html/components/stepTabs.html`, `templates/html/components/steps.html`, `templates/html/components/table.html`, `templates/html/components/tooltip.html`
-- Patterns: `templates/html/patterns/cookieConsent.html`, `templates/html/patterns/footer.html`, `templates/html/patterns/header.html`
+- Layouts: `reference/html/layout/body.html`, `reference/html/layout/responsive.html`, `reference/html/layout/pageShell.html`, `reference/html/layout/section.html`
+- Components: `reference/html/components/accordion.html`, `reference/html/components/alerts.html`, `reference/html/components/breadcumbs.html`, `reference/html/components/button.html`, `reference/html/components/card.html`, `reference/html/components/dropdown.html`, `reference/html/components/form.html`, `reference/html/components/logo.html`, `reference/html/components/menu.html`, `reference/html/components/modal.html`, `reference/html/components/notification.html`, `reference/html/components/search.html`, `reference/html/components/slides.html`, `reference/html/components/stepTabs.html`, `reference/html/components/steps.html`, `reference/html/components/table.html`, `reference/html/components/tooltip.html`
+- Patterns: `reference/html/patterns/cookieConsent.html`, `reference/html/patterns/footer.html`, `reference/html/patterns/header.html`
 - Complete demo assembly. DO NOT use this for inspiration. It is only used to show all the modules: `demo/demo.html`
 
-Before creating markup, open the relevant template and reuse its current structure, tokens, ARIA attributes, and `pgs-option` syntax.
+Before creating markup, open the relevant reference file and reuse its current structure, tokens, ARIA attributes, and `pgs-option` syntax.
 
 To extend a component:
 
@@ -244,7 +245,7 @@ To extend a component:
 
 - Do not replace `mypgs` with custom solutions without a clear technical reason.
 - Do not hardcode colors if variables or custom properties exist; always use `var(--color-primary)`, etc.
-- Do not create duplicate components for buttons, forms, modals, dropdowns, slides, tabs, notifications, or menus.
+- Do not create duplicate components for alerts, buttons, forms, modals, dropdowns, slides, tabs, notifications, or menus.
 - Do not duplicate open, close, state, or accessibility logic already handled by the modules.
 - Do not make the code more complex than necessary.
 - Do not invent APIs: if a method is not present in `assets/javascript/*` or in the `.d.ts` files, it must be verified or explicitly added.
@@ -266,7 +267,7 @@ Source SCSS import:
 @include meta.load-css("../../node_modules/mypgs/assets/scss/index.scss");
 ```
 
-Recommended: use PGS layout tokens from `templates/html/layout/`.
+Recommended: use PGS layout tokens from `reference/html/layout/`.
 
 Avoid: equivalent custom layout with ad hoc classes when a PGS layout token already exists.
 
@@ -316,7 +317,7 @@ Avoid: creating a separate toast system outside `pgs.notification`.
 
 Before developing a new feature:
 
-- check `README.md`, `templates/`, `assets/scss/`, and `assets/javascript/`;
+- check `README.md`, `reference/`, `assets/scss/`, and `assets/javascript/`;
 - search for existing tokens or APIs with `rg "featureName|pgs-token"`;
 - verify whether `mypgs` already provides suitable components, helpers, mixins, or variables;
 - use naming consistent with the existing project;
@@ -331,7 +332,7 @@ For a new reusable component:
 - create JS in `assets/javascript/components/` or `assets/javascript/patterns/` only if behavior is needed;
 - export an object with `init` and/or `api` when the module needs a public API;
 - register it in `assets/javascript/_imports.js` with `pgs.registerModules` if it must be available as `pgs.moduleName`;
-- add a template in `templates/html/components/` or `templates/html/layout/`;
+- add a reference file in `reference/html/components/` or `reference/html/layout/`;
 - update `README.md` and this guide if the usage changes.
 
 Example for a new module:
@@ -347,7 +348,7 @@ pgs.registerModules({
 ## 10. Quick AI Checklist
 
 - Did I check whether a suitable `pgs` token or component already exists?
-- Did I consult `templates/` to copy the correct markup?
+- Did I consult `reference/` to copy the correct markup?
 - Did I enable `htmlBase initP` and the base body tokens when the full library is needed?
 - Am I using PGS CSS variables and mixins instead of hardcoded values?
 - Am I using `pgs-state` for runtime states and `pgs-option` for configuration?

package/README.md

@@ -2,13 +2,13 @@
 
 `mypgs` is a shared frontend library for building consistent interfaces through `pgs` attributes, SCSS sources, UI components, and reusable JavaScript behaviors.
 
-The library provides a design-system foundation: layouts, spacing, colors, buttons, forms, menus, modals, dropdowns, suggestion search, slides, notifications, and recurring patterns are defined once and reused across projects.
+The library provides a design-system foundation: layouts, spacing, colors, buttons, forms, alerts, menus, modals, dropdowns, suggestion search, slides, notifications, and recurring patterns are defined once and reused across projects.
 
 ## What it includes
 
 - `assets/scss/`: SCSS sources divided into base, layouts, components, patterns, and mixins.
 - `assets/javascript/`: the `pgs` helper, JavaScript components, functions, and patterns.
-- `templates/`: ready-to-use HTML examples for components and layouts.
+- `reference/`: canonical HTML and React references for components, layouts, and patterns.
 - `dist/css/`: compiled CSS.
 - `dist/javascript/`: compiled JavaScript bundle.
 - `dist/index.d.ts`: TypeScript declarations exported by the package.

package/assets/javascript/components/_menu.js

@@ -22,7 +22,8 @@ function PGS_menu_init(root = document) {
                 pgs(li).add("dropdown")
                 pgs(li).option.setValueBrackets("position", "bottom right")
                 pgs(button).add("dropdown-button")
-                pgs(button).add("buttonNohover")
+                pgs(button).add("button")
+                pgs(button).option.add("buttonNohover")
                 pgs(ul).add("dropdown-content")
 
             }

package/assets/javascript/components/_modals.js

@@ -19,7 +19,7 @@ function initializeModal(MODAL, existingDialog = null) {
     let historyTimeout = null;
 
     //== SELECTOR
-    const DOMButtonClose = '<button pgs="buttonClose modal-close" type="button" tabindex="0" aria-label="Chiudi"><i class="fa-solid fa-close"></i></button>';
+    const DOMButtonClose = '<button pgs="button modal-close" pgs-option="buttonClose" type="button" tabindex="0" aria-label="Chiudi"><i class="fa-solid fa-close"></i></button>';
     const modalContentHeader = pgs(DIALOG).querySelector("modal-dialog-content-header");
 
 

package/assets/javascript/components/_notifications.js

@@ -95,7 +95,8 @@ const fn_notification = {
         btnDelete.type = "button";
         btnDelete.ariaLabel = "Rimuovi notifica";
         btnDelete.innerHTML = '<i class="fa-solid fa-xmark"></i>';
-        btnDelete.setAttribute("pgs", "buttonClose");
+        btnDelete.setAttribute("pgs", "button");
+        btnDelete.setAttribute("pgs-option", "buttonClose");
         notification.insertAdjacentElement("afterbegin", btnDelete);
 
         //== event

package/assets/javascript/components/_slides.js

@@ -36,10 +36,10 @@ class PGS_Slides {
 
         //== PULSANTI
         if (!pgs(EL).querySelector('slides-prec')) {
-            EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec buttonIcon" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
+            EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec button" pgs-option="buttonIcon" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
         }
         if (!pgs(EL).querySelector('slides-next')) {
-            EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next buttonIcon" type="button" class="nextButton" aria-label="prossima slide"> <span> <i class="fa-solid fa-arrow-right"></i></span></button>`);
+            EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next button" pgs-option="buttonIcon" type="button" class="nextButton" aria-label="prossima slide"> <span> <i class="fa-solid fa-arrow-right"></i></span></button>`);
         }
 
         //== DOTS

package/assets/scss/base/_body.scss

@@ -47,12 +47,12 @@
     i {
         line-height: 1.2;
         font-size: var(--fa-size);
-        transition: color 300ms;
+        // transition: color 300ms;
 
-        &::before,
-        &::after {
-            transition: color 300ms;
-        }
+        // &::before,
+        // &::after {
+        //   transition: color 300ms;
+        // }
     }
 
     img,

package/assets/scss/base/_general.scss

@@ -1,10 +1,6 @@
 @use "../mixin/mixin" as *;
 
 //# GENERAL
-[pgs~=boxtext] {
-    @include boxtext();
-}
-
 [pgs~=darkmode] {
     color-scheme: dark;
 }
@@ -13,6 +9,24 @@
     color-scheme: light;
 }
 
+[pgs~=blur] {
+    backdrop-filter: var(--blur);
+}
+
+[pgs~=appearanceNone] {
+    all: unset;
+    appearance: none;
+}
+
+[pgs~=pointer] {
+    cursor: pointer;
+}
+
+[pgs~=hidden] {
+    display: none !important;
+}
+
+//= IMG
 [pgs~=imgCover] {
     object-fit: cover;
 }
@@ -21,6 +35,7 @@
     object-fit: contain;
 }
 
+//= BORDER RADIUS
 [pgs~=borderRadius] {
     border-radius: var(--border-radius);
 }
@@ -33,19 +48,13 @@
     border-radius: var(--border-radius-external);
 }
 
-[pgs~=blur] {
-    backdrop-filter: var(--blur);
-}
-
-[pgs~=appearanceNone] {
-    all: unset;
-    appearance: none;
-}
-
-[pgs~=pointer] {
-    cursor: pointer;
-}
+//= HOVER
+[pgs~=hover] {
+    @include hover();
 
-[pgs~=hidden] {
-    display: none !important;
+    &:not(:disabled):hover {
+        [pgs~=hover-text] {
+            color: var(--hover-color);
+        }
+    }
 }

package/assets/scss/base/_variables.scss

@@ -16,7 +16,7 @@
     --border-complete: var(--border) var(--border-color);
     --border-complete-hover: var(--border) var(--color-white);
     --box-shadow: 0px 0px 38px 0px #0000000d;
-    --text-shadow: 0px 0px 50px #000000;
+    --text-shadow: 0px 0px 50px #00000060;
     --backdrop: #0000003e;
     --blur: blur(20px);
     --page-top: calc(var(--heightOfHeader) + var(--heightOfHeader));

package/assets/scss/components/_accordion.scss

@@ -8,11 +8,8 @@
     width: 100% !important;
     position: relative;
     user-select: unset !important;
-
-    &:not([pgs-state~=open]) {
-        @include button(true);
-        --button-size: var(--padding-2);
-    }
+    @include buttonBase();
+    @include buttonContent();
 
     //= BUTTON
     [pgs~="accordion-button"] {
@@ -55,9 +52,14 @@
         overflow: hidden;
     }
 
-    //= OPEN
+    //= OPEN - NOT OPEN
+    &:not([pgs-state~=open]) {
+        @include buttonHover();
+        --button-size: var(--padding-2);
+    }
+
     &[pgs-state~=open] {
-        @include button(false);
+        @include buttonNohover();
         --button-size: var(--padding-2);
         margin-top: var(--padding);
 

package/assets/scss/components/_alerts.scss

@@ -0,0 +1,71 @@
+@use "../mixin/mixin" as *;
+
+[pgs~="alert"] {
+    --alert-accent: var(--color-primary);
+    --alert-background: var(--color-primary-soft);
+    --alert-color: var(--color-text);
+    --alert-title-color: var(--alert-accent);
+    --alert-padding: var(--padding-2);
+    --alert-gap: var(--gap-texts);
+    --alert-border-size: 0.4rem;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: var(--alert-gap);
+    width: 100%;
+    padding: var(--alert-padding);
+    border: var(--border-complete);
+    border-inline-start: var(--alert-border-size) solid var(--alert-accent);
+    border-radius: var(--border-radius-input);
+    background: var(--alert-background);
+    color: var(--alert-color);
+
+    [pgs~="alert-icon"] {
+        display: grid;
+        place-items: center;
+        min-inline-size: 2.4rem;
+        min-block-size: 2.4rem;
+        color: var(--alert-accent);
+        font-size: 2rem;
+        line-height: 1;
+        --fa-size: 2rem;
+        --fa-primary-color: var(--alert-accent);
+        --fa-secondary-color: var(--alert-accent);
+        --fa-secondary-opacity: 0.5;
+    }
+
+    [pgs~="alert-content"] {
+        @include flexColumn(calc(var(--alert-gap) / 2));
+        min-width: 0;
+    }
+
+    [pgs~="alert-title"] {
+        color: var(--alert-title-color);
+        font-weight: 800;
+        line-height: 1.2;
+    }
+
+    p {
+        color: var(--alert-color);
+    }
+
+    &[pgs-state~="info"] {
+        --alert-accent: var(--color-link);
+        --alert-background: var(--color-linkBackgorud);
+    }
+
+    &[pgs-state~="success"] {
+        --alert-accent: var(--color-success);
+        --alert-background: var(--color-success-background);
+    }
+
+    &[pgs-state~="warning"] {
+        --alert-accent: var(--color-warning);
+        --alert-background: var(--color-warning-background);
+    }
+
+    &[pgs-state~="error"] {
+        --alert-accent: var(--color-error);
+        --alert-background: var(--color-error-background);
+    }
+}

package/assets/scss/components/_badges.scss

@@ -33,61 +33,53 @@
     }
 }
 
-[pgs~="badge"],
-[pgs~="badgePrimary"],
-[pgs~="badgeStrong"],
-[pgs~="badgeSuccess"],
-[pgs~="badgeWarning"],
-[pgs~="badgeError"],
-[pgs~="badgeInfo"],
-[pgs~="badgeNeutral"],
-[pgs~="badgeDot"] {
+[pgs~="badge"] {
     @include _badge();
-}
 
-[pgs~="badgePrimary"] {
-    --badge-background: var(--color-primary-soft);
-    --badge-color: var(--color-primary-strong);
-}
+    &[pgs-option~="badgePrimary"] {
+        --badge-background: var(--color-primary-soft);
+        --badge-color: var(--color-primary-strong);
+    }
 
-[pgs~="badgeStrong"] {
-    --badge-background: var(--color-primary);
-    --badge-color: var(--color-whiteFixed);
-}
+    &[pgs-option~="badgeStrong"] {
+        --badge-background: var(--color-primary);
+        --badge-color: var(--color-whiteFixed);
+    }
 
-[pgs~="badgeSuccess"] {
-    --badge-background: var(--color-success-background);
-    --badge-color: var(--color-success);
-}
+    &[pgs-option~="badgeSuccess"] {
+        --badge-background: var(--color-success-background);
+        --badge-color: var(--color-success);
+    }
 
-[pgs~="badgeWarning"] {
-    --badge-background: var(--color-warning-background);
-    --badge-color: var(--color-warning);
-}
+    &[pgs-option~="badgeWarning"] {
+        --badge-background: var(--color-warning-background);
+        --badge-color: var(--color-warning);
+    }
 
-[pgs~="badgeError"] {
-    --badge-background: var(--color-error-background);
-    --badge-color: var(--color-error);
-}
+    &[pgs-option~="badgeError"] {
+        --badge-background: var(--color-error-background);
+        --badge-color: var(--color-error);
+    }
 
-[pgs~="badgeInfo"] {
-    --badge-background: var(--color-linkBackgorud);
-    --badge-color: var(--color-link);
-}
+    &[pgs-option~="badgeInfo"] {
+        --badge-background: var(--color-linkBackgorud);
+        --badge-color: var(--color-link);
+    }
 
-[pgs~="badgeNeutral"] {
-    --badge-background: var(--color-box-transparent);
-    --badge-color: var(--color-text);
-}
+    &[pgs-option~="badgeNeutral"] {
+        --badge-background: var(--color-box-transparent);
+        --badge-color: var(--color-text);
+    }
 
-[pgs~="badgeDot"] {
-    &::before {
-        content: "";
-        display: block;
-        inline-size: 0.65em;
-        block-size: 0.65em;
-        flex: 0 0 auto;
-        border-radius: 50%;
-        background: currentColor;
+    &[pgs-option~="badgeDot"] {
+        &::before {
+            content: "";
+            display: block;
+            inline-size: 0.65em;
+            block-size: 0.65em;
+            flex: 0 0 auto;
+            border-radius: 50%;
+            background: currentColor;
+        }
     }
-}
+}

package/assets/scss/components/_button.scss

@@ -2,29 +2,37 @@
 
 //# BUTTON
 [pgs~=button] {
-    @include button()
-}
+    @include buttonBase();
 
-[pgs~=buttonNohover] {
-    @include button(false)
-}
+    &:not([pgs-option~=buttonIcon], [pgs-option~=buttonMini], [pgs-option~=buttonClose]) {
+        @include buttonContent();
+    }
 
-[pgs~=buttonIcon] {
-    @include button(true, true);
-}
+    &:is([pgs-option~=buttonIcon], [pgs-option~=buttonMini], [pgs-option~=buttonClose]) {
+        @include buttonIcon();
+    }
 
-[pgs~=buttonStrong] {
-    @include button(true, false, true)
-}
+    &:not([pgs-option~=buttonNohover]) {
+        @include buttonHover();
+    }
 
-[pgs~=buttonMini] {
-    @include buttonMini();
-}
+    &[pgs-option~=buttonNohover] {
+        @include buttonNohover();
+    }
 
-[pgs~=buttonBig] {
-    @include buttonBig()
-}
+    &[pgs-option~=buttonStrong] {
+        @include buttonStrong();
+    }
+
+    &[pgs-option~=buttonMini] {
+        @include buttonMini();
+    }
+
+    &[pgs-option~=buttonBig] {
+        @include buttonBig();
+    }
 
-[pgs~=buttonClose] {
-    @include buttonClose();
+    &[pgs-option~=buttonClose] {
+        @include buttonClose();
+    }
 }

package/assets/scss/components/_card.scss

@@ -1,10 +1,15 @@
 @use "../mixin/mixin" as *;
 
-[pgs~=card],
-[pgs~=cardImg] {
+[pgs~=card]{
     @include card();
 
     [pgs~=card-img] {
-        @include card-insideImg();
+        @include cardAndWell-insideImg("card");
     }
-}
+}
+[pgs~=well] {
+    @include well();
+    [pgs~=card-img] {
+        @include cardAndWell-insideImg("box");
+    }
+}

package/assets/scss/components/_formAddon.scss

@@ -15,4 +15,8 @@
 
 [pgs~=chips] {
     @include chips();
-}
+}
+
+[pgs~=chip] {
+    @include chip();
+}

package/assets/scss/components/_logo.scss

@@ -8,15 +8,14 @@
     --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 
     //== DARKMODE
-    @at-root [pgs-state~=darkmode] #{&}[pgs-option~="logoDarkmode"] [pgs~="logo-image"] {
+    &:is(body[pgs-state~="darkmode"] [pgs-option~="logoDarkmode"]) [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
-    
+
     //== FIXED DARKMODE
     &[pgs-option~="logoDarkmodeFixed"] [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
-    
 
     //- tablet 
     @media (max-width: $tablet) {
@@ -50,4 +49,4 @@
             text-wrap: nowrap;
         }
     }
-}
+}