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

package/dist/collection/components/spw-card/spw-card-excerpt/spw-card-excerpt.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-card/spw-card-excerpt/spw-card-excerpt.js

@@ -13,7 +13,7 @@ export class SpwCardExcerpt {
         };
     }
     render() {
-        return (h(Host, { key: '94f53e8e2d7a9c333ab2320ca3f37d13657fece3' }, h("div", { key: '84c391bea45ccec30809e488c8ff12d2e921edbb', class: this.elementClass }, h("slot", { key: 'd9b85510693fe08e8b9951ab7395dca3ebfaa0d9' }))));
+        return (h(Host, { key: '382c610ee81d190b085f243921b0265cc43c27d3' }, h("div", { key: '98e7cc2cc710a8ce0fd50d9b321a964a2ab2e07d', class: this.elementClass }, h("slot", { key: '99a6fc954a3710997f688ff5518cee11318f4a24' }))));
     }
     static get is() { return "spw-card-excerpt"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-image/spw-card-image.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);
   }
@@ -476,17 +477,17 @@ template {
   line-height: 1;
 }
 
-:host(.--hovered:not(.--video)) .spw-card-image .spw-card-image__icon,
-:host(.--hovered:not(.--video)) .spw-card-image.--is-hovered .spw-card-image__icon {
+:host(.--hovered:not(.--video):not(.--event)) .spw-card-image .spw-card-image__icon,
+:host(.--hovered:not(.--video):not(.--event)) .spw-card-image.--is-hovered .spw-card-image__icon {
   visibility: visible;
   opacity: 1;
 }
-:host(.--hovered:not(.--video)) .spw-card-image .spw-card-image__icon spw-icon,
-:host(.--hovered:not(.--video)) .spw-card-image.--is-hovered .spw-card-image__icon spw-icon {
+:host(.--hovered:not(.--video):not(.--event)) .spw-card-image .spw-card-image__icon spw-icon,
+:host(.--hovered:not(.--video):not(.--event)) .spw-card-image.--is-hovered .spw-card-image__icon spw-icon {
   transform: scale(1);
 }
-:host(.--hovered:not(.--video)) .spw-card-image ::slotted(img),
-:host(.--hovered:not(.--video)) .spw-card-image.--is-hovered ::slotted(img) {
+:host(.--hovered:not(.--video):not(.--event)) .spw-card-image ::slotted(img),
+:host(.--hovered:not(.--video):not(.--event)) .spw-card-image.--is-hovered ::slotted(img) {
   transform: scale(1.1);
 }
 
@@ -512,6 +513,16 @@ template {
   object-position: var(--spw-card-image-object-position, center);
 }
 
+:host(.--vertical) {
+  width: 170px;
+  min-width: 170px;
+}
+
+:host(.--event) {
+  width: 100px;
+  min-width: 100px;
+}
+
 :host(.--sidebar) {
   width: 75px;
   min-width: 75px;

package/dist/collection/components/spw-card/spw-card-image/spw-card-image.js

@@ -54,7 +54,7 @@ export class SpwCardImage {
         if (this.imageFit) {
             style['--spw-card-image-object-fit'] = this.imageFit;
         }
-        return (h("div", { key: 'c9ffeacabaf599a9562559ccaa1a5c115e6f159e', class: this.elementClass, style: style }, this.label && h("span", { key: 'a3d537c2db0473ba0627d4c2ff49ae23a5b5c610', class: "spw-card-image__label" }, this.label), h("slot", { key: '795a34b5ac13c9193fb300296d305bff356d874a' }), h("div", { key: 'bc1ac9a4db7a9c6126d8aaf087e21b9b561d2b1f', class: "spw-card-image__icon" }, h("spw-icon", { key: 'c65bc7dbb9f2b8dc6c13de087b173657566d3209', icon: this.hoverIcon }))));
+        return (h("div", { key: 'e4cfa022f3319a0afd6d47d088d1ca9bd0de906b', class: this.elementClass, style: style }, this.label && h("span", { key: '4022dba885fba56e9b590be013cd6420912ae918', class: "spw-card-image__label" }, this.label), h("slot", { key: 'cbf151ddf4db09a88aa2b177d09a87586b1b5f9f' }), h("div", { key: '81ab97574ec5a91605cebee5c6dc77df4e6c3cb2', class: "spw-card-image__icon" }, h("spw-icon", { key: 'c5e4be497be3fa106e4b6c079ebe2d36c536064e', icon: this.hoverIcon }))));
     }
     static get is() { return "spw-card-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-subtag-item/spw-card-subtag-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-card/spw-card-subtag-item/spw-card-subtag-item.js

@@ -12,7 +12,7 @@ export class SpwCardSubtagItem {
         };
     }
     render() {
-        return (h(Host, { key: 'b9cc69c396246f2312c714f9a92064051a2a7593' }, h("span", { key: '18ceda99d47d27ff2a465fde67d426590445d3d8', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: '332ea40deefbe4b854c4dbeb07eabbf0c964d61b' }))));
+        return (h(Host, { key: '069a3dd57332cbc07497570790dc0c6b43cd3c55' }, h("span", { key: 'f888db1b02f2a29492c56995c293b2c811f66a51', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: 'ecd74f3803b7f5ba4ea3b8678adce16f270bffa3' }))));
     }
     static get is() { return "spw-card-subtag-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-subtags/spw-card-subtags.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-card/spw-card-subtags/spw-card-subtags.js

@@ -26,7 +26,7 @@ export class SpwCardSubtags {
         };
     }
     render() {
-        return (h(Host, { key: '932526d39865c60a98dc2c5b3a725d08116a8435' }, h("div", { key: '5127d371be9c14528be9afa1badbd1278b1ae40c', class: this.elementClass }, h("slot", { key: '06cb3b41922d0f2a4bcc1dee186a01b515581144' }))));
+        return (h(Host, { key: 'dd1415e28ab658b479fe353b27b1b63394d06b34' }, h("div", { key: '46cd99dde752fd3e206c449457e294201568a006', class: this.elementClass }, h("slot", { key: '5fa75e7d8a990e434c4306ca88253b88ea237f84' }))));
     }
     static get is() { return "spw-card-subtags"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-card/spw-card-title/spw-card-title.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-card/spw-card-title/spw-card-title.js

@@ -5,7 +5,7 @@ export class SpwCardTitle {
         this.borderColor = '';
     }
     render() {
-        return (h(Host, { key: '334d6835dd28e414809f7de8b2f6ad82708d88e6', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: 'ff00413ca35178fc4cbf60a605fe350e1239e7b7', class: "spw-card-title" }, h("span", { key: '629c669018ecb697c63c9d938b46010c8706b6ba', class: "spw-card-title__text" }, h("slot", { key: 'dac76a2afd228e94dd389122d060304f165743ed' })))));
+        return (h(Host, { key: '6bb60b7bfda451d86156271bfcac19d62867ed08', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: '9f1f616fef2f6a0b519bce3ad420795e8fa4b38f', class: "spw-card-title" }, h("span", { key: 'df69580022638f2c34a9cbeedbb626e7ecb9fa4f', class: "spw-card-title__text" }, h("slot", { key: '57b0a399404c3d8866238bc3d87f17bc3a582522' })))));
     }
     static get is() { return "spw-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,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;
@@ -339,7 +340,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);
   }
@@ -354,7 +355,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);
   }
@@ -398,25 +399,51 @@ template {
   cursor: pointer;
   position: absolute;
   top: 50%;
-  left: 0;
-  transform: translate(-50%, -50%);
+  left: 25px;
+  transform: translate(0, -50%);
   flex-direction: column;
   line-height: 1.1;
-  width: 80px;
-  height: 80px;
+  width: 50px;
   text-align: center;
-  color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--spw-ds-primary);
-  border-radius: 50%;
-  font-size: 18px;
   text-decoration: none;
-  z-index: 2;
+  z-index: 6;
+}
+.spw-card__dates--single {
+  top: auto;
+  transform: none;
+  bottom: 24px;
+}
+.spw-card--no-image.spw-card--event .spw-card__dates {
+  left: 15px;
 }
-.spw-card__date-item span:first-of-type {
+.spw-card__date-item {
+  text-align: center;
+  margin: 4px 0;
+}
+.spw-card__date-label {
+  display: block;
+  font-size: 12px;
+  color: var(--spw-color-themes-grey-grey-600);
+  margin-bottom: 4px;
+}
+.spw-card__date-day {
+  font-size: 18px;
   font-weight: bold;
+  display: block;
+  color: var(--spw-color-themes-grey-grey-900);
+}
+.spw-card__date-month {
+  font-size: 12px;
+  display: block;
+  color: var(--spw-color-themes-grey-grey-900);
+}
+.spw-card__date-content {
+  padding: 8px 12px;
+  background: white;
+  border-radius: 6px;
 }
 
 .spw-card__link {
@@ -429,6 +456,9 @@ template {
 .spw-card--no-image .spw-card__link {
   padding-top: 15px;
 }
+.spw-card--no-image.spw-card--event .spw-card__link {
+  padding-top: 0;
+}
 .spw-card__link:focus-visible {
   outline: 3px solid white;
   outline-offset: -1px;
@@ -442,6 +472,13 @@ template {
   min-height: 240px;
 }
 
+.spw-card--has-2-dates .spw-card__link {
+  min-height: 180px;
+}
+
+.spw-card--event {
+  position: relative;
+}
 .spw-card--event .spw-card__link {
   display: flex;
 }
@@ -457,12 +494,6 @@ template {
   gap: 16px;
 }
 
-.spw-card--event {
-  position: relative;
-  width: calc(100% - 40px);
-  left: 40px;
-}
-
 .spw-card--rounded-picture {
   box-shadow: none;
   background: transparent;

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

@@ -9,6 +9,12 @@ export class SpwCard {
         this.elementType = 'a';
         /** Attribut target, s'applique uniquement si href est rempli */
         this.target = '_self';
+        /** Tableau des abréviations de mois (index 0 = janvier). Par défaut en français. */
+        this.monthLabels = ['jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jul', 'aoû', 'sep', 'oct', 'nov', 'déc'];
+        /** Préfixe affiché avant dateStart quand les deux dates sont présentes */
+        this.fromLabel = 'du';
+        /** Préfixe affiché avant dateEnd quand les deux dates sont présentes */
+        this.toLabel = 'au';
         /** Si vrai, les cartes ont la même hauteur */
         this.fullHeight = false;
         /** Si désactivée, la carte n'est pas utilisable */
@@ -68,10 +74,13 @@ export class SpwCard {
         });
     }
     formatDate(date) {
+        var _a;
         if (!date)
             return [];
-        const parts = date.split('/');
-        return parts.flatMap((part, index) => (index < parts.length - 1 ? [h("span", null, part), h("span", null, "/")] : [h("span", null, part)]));
+        const [day, month] = date.split('/');
+        const monthIndex = parseInt(month, 10) - 1;
+        const monthLabel = (_a = this.monthLabels[monthIndex]) !== null && _a !== void 0 ? _a : month;
+        return [h("span", { class: "spw-card__date-day" }, day), h("span", { class: "spw-card__date-month" }, monthLabel)];
     }
     applyVariantToChildren() {
         requestAnimationFrame(() => {
@@ -104,6 +113,7 @@ export class SpwCard {
             'spw-card--hoverable': !!this.href,
             'spw-card--no-image': !this.hasImage,
             [`spw-card--${this.variant}`]: true,
+            'spw-card--has-2-dates': this.variant === 'event' && !!(this.dateStart && this.dateEnd),
         };
     }
     render() {
@@ -120,7 +130,7 @@ export class SpwCard {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': this.disabled ? 'true' : null,
         };
-        return (h(Host, { key: '1ba4f06ba66af1625688a01d08c34fab95499577', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '135ae12d051e9ebc078029c99ac52ea49bf540db', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '99c5e749128c5293c44ddeb4c85bf143dbe3c6b1' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: 'fcf0661e3aae2de10ad7b845da453553662b3154', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: '11cc7956f31154ac081e6e819294fcfe6aafff5d', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: 'bc3380c036847c8ac197e731f05f0333a2734634' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'c4c0f79011ee0ca8a893a080c177f17c51526768' })))));
+        return (h(Host, { key: 'e0c3cdd9da2dbe327323418a2ce8886084b42d91', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '44b922611365e2ea2a026d064f933deb5365ead6', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '721a1594f257a751ba5148395c72a4757b6e157b' }, attrs, { class: { 'spw-card__dates': true, 'spw-card__dates--range': !!(dateStart && dateEnd), 'spw-card__dates--single': !!(dateStart && !dateEnd) } }), dateStart && (h("div", { key: '6348b9aa873b4fb163a610ac9a5ebf834b4b337c', class: "spw-card__date-item" }, h("div", { key: 'b9622320dcffb6641510f46fe8065b4d8a19b482', class: "spw-card__date-content" }, dateEnd && h("span", { key: 'ab97a4b2eb85776483fd13370c36d8d6e2037377', class: "spw-card__date-label" }, this.fromLabel), this.formatDate(dateStart)))), dateEnd && (h("div", { key: 'd5d886efce8f6b49a1fdf7b73d207e1e4fef10f9', class: "spw-card__date-item" }, h("div", { key: '7b10129d916c49fb02abcfb2cc190f092c0dd4b7', class: "spw-card__date-content" }, h("span", { key: '569a278970fa7a1cbe4fae4816e96b90ec51a54c', class: "spw-card__date-label" }, this.toLabel), this.formatDate(dateEnd)))))), h(TagType, Object.assign({ key: '910a82e7567ba8c4cdbe76133a8664dade563ce4' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '9065f8b373dfd6bbc69733a283509ccd0db3d8b9' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }
@@ -246,7 +256,7 @@ export class SpwCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "D\u00E9finir une date de d\u00E9but si la carte est un \u00E9v\u00E8nement"
+                    "text": "D\u00E9finir une date de d\u00E9but si la carte est un \u00E9v\u00E8nement (format : jour/mois, ex. 08/04)"
                 },
                 "getter": false,
                 "setter": false,
@@ -265,13 +275,71 @@ export class SpwCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "D\u00E9finir une date de fin si la carte est un \u00E9v\u00E8nement"
+                    "text": "D\u00E9finir une date de fin si la carte est un \u00E9v\u00E8nement (format : jour/mois, ex. 08/04)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "date-end"
             },
+            "monthLabels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tableau des abr\u00E9viations de mois (index 0 = janvier). Par d\u00E9faut en fran\u00E7ais."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['jan', 'f\u00E9v', 'mar', 'avr', 'mai', 'jun', 'jul', 'ao\u00FB', 'sep', 'oct', 'nov', 'd\u00E9c']"
+            },
+            "fromLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pr\u00E9fixe affich\u00E9 avant dateStart quand les deux dates sont pr\u00E9sentes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "from-label",
+                "defaultValue": "'du'"
+            },
+            "toLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pr\u00E9fixe affich\u00E9 avant dateEnd quand les deux dates sont pr\u00E9sentes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "to-label",
+                "defaultValue": "'au'"
+            },
             "fullHeight": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,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;
@@ -339,7 +340,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);
   }
@@ -354,7 +355,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-checkbox/spw-checkbox.js

@@ -75,7 +75,7 @@ export class SpwCheckbox {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: 'c38a01b2898e391335b55297929b50109d892434', class: "spw-checkbox" }, h("input", { key: '2e696c49a36c92eed15f06e64b4a52722fab8062', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'aaa5422e96bd40d32972996be19f389cdb276e70', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'baa3fbdb4b6a17b91dba5c6077bd50a1f8207b61' }))), h("div", { key: '36a552efdb1a0afe004d8e518978175cfb788ccb', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: '95cdfbb6513f76bb570e3707cf34cb8ccf8e1107', icon: this.icon }))));
+        return (h("div", { key: '42165c5a437c03c55486b9468ef089bdae0466d0', class: "spw-checkbox" }, h("input", { key: '1d5b10952a932ab1f1b5f2aa08b7cb0b943918bc', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'd1a358a567b5d899e28badefd60e20fa848435de', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'b38fd399291ab9cdfe879b55f42271cbd3510254' }))), h("div", { key: '89a613bd0000c0d2b599c9865c4e91f9bf510cf6', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: 'f047f0ce2dc2cd66116a79759a28c38b252517d6', icon: this.icon }))));
     }
     static get is() { return "spw-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-cookies/spw-cookies.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-custom-select/spw-custom-select.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);
   }