@spw-ds/spw-stencil-library 1.14.1 → 1.15.0

package/dist/collection/components/spw-drawer/spw-drawer.js

@@ -0,0 +1,507 @@
+import { Host, h } from "@stencil/core";
+import { queryShadowRoot, isHidden, isFocusable } from "../../utils/focus-trap";
+import { animationTo } from "../../utils/animation";
+const SLIDE_KEYFRAMES = {
+    left: {
+        open: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(-100%)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(0)' },
+        ],
+        close: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(0)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(-100%)' },
+        ],
+    },
+    right: {
+        open: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(100%)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(0)' },
+        ],
+        close: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(0)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateX(100%)' },
+        ],
+    },
+    top: {
+        open: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(-100%)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(0)' },
+        ],
+        close: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(0)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(-100%)' },
+        ],
+    },
+    bottom: {
+        open: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(100%)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(0)' },
+        ],
+        close: [
+            { offset: 0, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(0)' },
+            { offset: 1, easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)', transform: 'translateY(100%)' },
+        ],
+    },
+};
+export class SpwDrawer {
+    constructor() {
+        /** Indique si le drawer est ouvert ou fermé, mutable et reflété dans le DOM */
+        this.opened = false;
+        this.showDrawer = this.opened || false;
+        /** Titre du drawer */
+        this.caption = 'Titre du drawer';
+        /** Texte du bouton de fermeture */
+        this.closeButtonText = 'Fermer';
+        /** Indique si la fermeture du drawer est possible en cliquant sur l'overlay */
+        this.closeOnOverlayClick = true;
+        /** Position du drawer : 'left', 'right', 'top' ou 'bottom' */
+        this.position = 'right';
+        /** Taille du drawer (largeur pour left/right) : 'small', 'medium', 'large' ou 'full' */
+        this.size = 'medium';
+        /** Indique si le bouton de fermeture est visible */
+        this.showCloseButton = true;
+        /** Indique si le titre est visible */
+        this.showCaption = true;
+        /** Indique si l'overlay (fond sombre) est visible */
+        this.modal = true;
+        this.slotFooterPresent = false;
+        this.focusableElements = [];
+        this.handleTriggerClick = (event) => {
+            const path = event.composedPath();
+            const trigger = path.find(el => { var _a; return el instanceof HTMLElement && ((_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-drawer-trigger')); });
+            if (trigger) {
+                const drawerId = trigger.getAttribute('data-drawer-trigger');
+                if (drawerId === this.hostElement.id) {
+                    this.opened = true;
+                }
+            }
+        };
+        this.handleCloseAttribute = (event) => {
+            const path = event.composedPath();
+            const trigger = path.find(el => { var _a; return el instanceof HTMLElement && ((_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-drawer-close')); });
+            if (trigger) {
+                const drawerId = trigger.getAttribute('data-drawer-close');
+                if (drawerId === this.hostElement.id) {
+                    this.opened = false;
+                }
+            }
+        };
+        this.handleKeypress = (event) => {
+            if (this.showDrawer && event.key === 'Escape') {
+                this.doBeforeClose('ESCAPE_KEY');
+            }
+        };
+        this.handleBottomFocus = () => {
+            this.attemptFocus(this.getFirstFocusableElement());
+        };
+    }
+    /**
+     * Méthode publique pour ouvrir le drawer programmatiquement
+     */
+    async openDrawer() {
+        this.opened = true;
+    }
+    /**
+     * Méthode publique pour fermer le drawer programmatiquement
+     */
+    async closeDrawer() {
+        this.doBeforeClose('PROGRAMMATIC');
+    }
+    componentDidLoad() {
+        this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+        window.addEventListener('click', this.handleTriggerClick, { capture: true });
+        window.addEventListener('click', this.handleCloseAttribute, { capture: true });
+        window.addEventListener('keydown', this.handleKeypress);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this.handleTriggerClick);
+        window.removeEventListener('click', this.handleCloseAttribute);
+        window.removeEventListener('keydown', this.handleKeypress);
+    }
+    getFirstFocusableElement() {
+        return this.focusableElements[0];
+    }
+    attemptFocus(element) {
+        if (element == null) {
+            setTimeout(() => {
+                var _a;
+                (_a = this.closeButtonEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+            return;
+        }
+        setTimeout(() => {
+            element.focus();
+        }, 0);
+    }
+    getSiblings() {
+        const parent = this.hostElement.parentElement;
+        if (!parent)
+            return [];
+        return Array.from(parent.children).filter(el => el !== this.hostElement);
+    }
+    setInert(inert) {
+        this.getSiblings().forEach(el => {
+            if (inert) {
+                el.setAttribute('inert', '');
+            }
+            else {
+                el.removeAttribute('inert');
+            }
+        });
+    }
+    open() {
+        this.showDrawer = true;
+        this.setInert(true);
+        requestAnimationFrame(() => {
+            if (this.drawerContent) {
+                this.drawerContent.scrollTop = 0;
+            }
+        });
+        try {
+            const keyframes = SLIDE_KEYFRAMES[this.position];
+            const anim = animationTo(this.drawerPanel, keyframes.open, { duration: 250 });
+            anim.addEventListener('finish', () => {
+                this.attemptFocus(this.getFirstFocusableElement());
+                this.spwDrawerOpen.emit();
+            });
+        }
+        catch (err) {
+            this.attemptFocus(this.getFirstFocusableElement());
+            this.spwDrawerOpen.emit();
+        }
+    }
+    close() {
+        this.setInert(false);
+        try {
+            const keyframes = SLIDE_KEYFRAMES[this.position];
+            const anim = animationTo(this.drawerPanel, keyframes.close, { duration: 250 });
+            anim.addEventListener('finish', () => {
+                this.showDrawer = false;
+                this.spwDrawerClose.emit();
+            });
+        }
+        catch (err) {
+            this.showDrawer = false;
+            this.spwDrawerClose.emit();
+        }
+    }
+    openedChanged(newValue) {
+        newValue === true ? this.open() : this.close();
+    }
+    handleOverlayClick() {
+        if (this.closeOnOverlayClick) {
+            this.doBeforeClose('BACKDROP');
+        }
+    }
+    doBeforeClose(trigger) {
+        const triggers = [];
+        triggers.push(trigger);
+        const prevented = triggers.some((event) => event.defaultPrevented);
+        if (!prevented) {
+            this.opened = false;
+        }
+    }
+    get containerClass() {
+        return {
+            'spw-drawer': true,
+            'spw-drawer--opened': this.showDrawer,
+            [`spw-drawer--${this.position}`]: true,
+        };
+    }
+    get panelClass() {
+        return {
+            'spw-drawer__panel': true,
+            [`spw-drawer__panel--${this.size}`]: true,
+            [`spw-drawer__panel--${this.position}`]: true,
+        };
+    }
+    render() {
+        return (h(Host, { key: '621548e815f396df4a54e05b836f0b07f793e142' }, h("div", { key: 'fd7925dd51fe814ac4ce8f10f525b3b230fb736f', class: this.containerClass }, this.modal && h("div", { key: '1a8d8e04568be0dfd2d59eeb349daf44982f00e0', class: "spw-drawer__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'c0c0d0f4eb333fd789eac3d9234983010de130f1', ref: el => (this.drawerPanel = el), class: this.panelClass, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: 'b297bbcb3fd2c5d989d1521cbd9d34b9a643d0b2', class: "spw-drawer__header" }, this.showCaption && h("h2", { key: 'd66a41696e970fab84f995bc32f4a697a74a0033', class: "spw-drawer__caption" }, this.caption), this.showCloseButton && (h("div", { key: 'afc4bb96c03867d4936495e7fba7903abaa4b2a6', class: "spw-drawer__close-button", ref: el => (this.closeButtonEl = el), tabindex: "0", role: "button", onClick: () => this.doBeforeClose('CLOSE_BUTTON'), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: 'e779de1391e99db2c6ce001bec61f9785e6c6e2c', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'c7911fff41d8d1c19ef0a25b412a8d477b8512c6', class: "spw-drawer__body", ref: el => (this.drawerContent = el) }, h("slot", { key: '5d8d6c05a13294a5033e8d113eb4e579e20c5b92', name: "content" })), h("div", { key: 'd5d9ef307a1de26f1efbff685a3020521a2b5459', class: {
+                'spw-drawer__footer': true,
+                'spw-drawer__footer--present': this.slotFooterPresent,
+            } }, h("slot", { key: '7c9f0e9a6aafaba1cfd56073992626aa6f4696ec', name: "footer", onSlotchange: (e) => {
+                const slot = e.target;
+                this.slotFooterPresent = slot.assignedNodes({ flatten: true }).length > 0;
+            } }))), h("div", { key: 'bfb80879502d4c22689953893f208270f74594d3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+    }
+    static get is() { return "spw-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le drawer est ouvert ou ferm\u00E9, mutable et refl\u00E9t\u00E9 dans le DOM"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opened",
+                "defaultValue": "false"
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Titre du drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption",
+                "defaultValue": "'Titre du drawer'"
+            },
+            "closeButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton de fermeture"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-button-text",
+                "defaultValue": "'Fermer'"
+            },
+            "closeOnOverlayClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si la fermeture du drawer est possible en cliquant sur l'overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-overlay-click",
+                "defaultValue": "true"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position du drawer : 'left', 'right', 'top' ou 'bottom'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'right'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | 'full'",
+                    "resolved": "\"full\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Taille du drawer (largeur pour left/right) : 'small', 'medium', 'large' ou 'full'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le bouton de fermeture est visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-close-button",
+                "defaultValue": "true"
+            },
+            "showCaption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le titre est visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-caption",
+                "defaultValue": "true"
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si l'overlay (fond sombre) est visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showDrawer": {},
+            "slotFooterPresent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwDrawerOpen",
+                "name": "spwDrawerOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement d\u00E9clench\u00E9 lors de l'ouverture du drawer"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "spwDrawerClose",
+                "name": "spwDrawerClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement d\u00E9clench\u00E9 lors de la fermeture du drawer"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openDrawer": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9thode publique pour ouvrir le drawer programmatiquement",
+                    "tags": []
+                }
+            },
+            "closeDrawer": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9thode publique pour fermer le drawer programmatiquement",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "openedChanged"
+            }];
+    }
+}

package/dist/collection/components/spw-dropdown/spw-dropdown-container/spw-dropdown-container.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-dropdown/spw-dropdown-container/spw-dropdown-container.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwDropdownContainer {
     render() {
-        return (h(Host, { key: '79dc2cc099719ae4705b6b17fa914f137145bbf4' }, h("div", { key: 'e91b67898f25f782a67681a03c5a7ab6c2ed58a1', class: "spw-dropdown-container" }, h("slot", { key: 'c3ddaa4ae9f44d5e90cd1e26d93297935910be85' }))));
+        return (h(Host, { key: 'a139c525c1cc0f93f7f112ac5dcb9563babc24ee' }, h("div", { key: '45c05feacdbb1281411a3e6aa50832efc0d49028', class: "spw-dropdown-container" }, h("slot", { key: '3201b3d0fcdd663dafe25a87997691151dc50db8' }))));
     }
     static get is() { return "spw-dropdown-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-dropdown/spw-dropdown-item/spw-dropdown-item.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-dropdown/spw-dropdown-item/spw-dropdown-item.js

@@ -83,7 +83,7 @@ export class SpwDropdownItem {
             'spw-dropdown-item__toggle': true,
             'spw-dropdown-item__toggle--open': this.subItemsOpen,
         };
-        return (h(Host, { key: '9972c17813e0f7be9d07188a6a6596fc5f3e9b75' }, h(Tag, { key: '9048817b668d6f9ea4294f327af676b2128b2632', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: 'a43132e6f697d77849d158164bcdbe783b56ab21', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '5c8643b3c22b79c1a665c420edb9529453699341', variant: this.iconVariant, icon: this.icon }))), h("div", { key: '65db2295b5086d4e342234a336251ec282b9eebc', class: "spw-dropdown-item__content" }, h("div", { key: '54d0059dd24a51a136b0afee730cea8c25f02ecb', class: "spw-dropdown-item__label" }, h("slot", { key: '4e992a877d20ec0b84c83a8f5786eec8301a1e63' })), this.hasSubItems && (h("div", { key: 'f8a34e4a575ae202670cb86ec3095e0b7b717ed2', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '44593757e5e18c481ed0faab171adaf6129e29fe', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: 'fde76f69a90e770c732899d326c4880915b0baa7', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '2b1f6087cd1063dd3a028b9ba2f091702f960290', name: "sub-items" })))));
+        return (h(Host, { key: 'f200649da21b3c2485e65c8c43a6df5a54b9226b' }, h(Tag, { key: '2c8356dac6b653516cbd466dd2ccf1e4aac5a168', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: '91b5e991816a7c2d267448226cd5488cbc0ec844', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '532f255b8e3ad7819bebeb611a4cb6319bc72660', variant: this.iconVariant, icon: this.icon }))), h("div", { key: 'b45f1cec592a1deb9303f94fdaf89f80e5f23191', class: "spw-dropdown-item__content" }, h("div", { key: '31bf6ca7cddc19b62cb35ec0b65be3375b679b66', class: "spw-dropdown-item__label" }, h("slot", { key: '9ea3efc3da2793f9001a6aea33a5036da2f90100' })), this.hasSubItems && (h("div", { key: '268b3d9cb66f74983b2eacb8c101b1f98af0ca33', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: 'd6f1dcaad451c99861a8538f4327809636e0aad4', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: 'ca31f823beb452a38a4a8a8dbb99b390b87a55ad', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: 'd38901c9f180d7e92cf016aa9ee439359c1f57b6', name: "sub-items" })))));
     }
     static get is() { return "spw-dropdown-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-dropdown/spw-dropdown.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-dropdown/spw-dropdown.js

@@ -228,7 +228,7 @@ export class SpwDropdown {
         dropdown.style.visibility = 'visible';
     }
     render() {
-        return (h("div", { key: '9436b4657389ba587830dcc8f7dc9f13aa33ef0a', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: '3abcf24a43d046fde173ffe2ac73d376cf78ec6e' })));
+        return (h("div", { key: '9161936bf0f6dd13672f81e9fe6a6b1264986094', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: '814cd4da36bff9d43a9d5b22389f6f7801a61614' })));
     }
     static get is() { return "spw-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-field-label/spw-field-label.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }