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

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

@@ -5,29 +5,50 @@ export class SpwBox {
         this.hasRadius = false;
         /** Permet d'appliquer un box-shadow sur la box */
         this.hasShadow = false;
+        /** Permet d'afficher une bordure autour de la box */
+        this.hasBorder = false;
         /** Permet de rendre la box sticky */
         this.isSticky = false;
         /** Définit le padding de la box */
         this.padding = 'none';
         /** Permet de rendre le contenu de la box collapsible sur un breakpoint donné */
         this.isCollapsible = false;
-        /** Définit le breakpoint en dessous duquel la box est collapsible (sm: 460px, md: 768px, lg: 1024px, xl: 1350px,
-        xxl: 1770px, always: toujours collapsible) */
+        /** Définit le breakpoint en dessous duquel la box est collapsible (sm: 360px, md: 768px, lg: 1024px, xl: 1200px,
+        xxl: 1700px, always: toujours collapsible) */
         this.collapsibleBreakpoint = 'md';
         this.isOpen = false;
+        this.windowWidth = window.innerWidth;
+        this.contentScrollHeight = 0;
         this.toggle = () => {
             if (!this.isCollapsibleActive)
                 return;
             this.isOpen = !this.isOpen;
         };
+        this.setContentRef = (el) => {
+            var _a;
+            if (el === this.contentRef)
+                return;
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.contentRef = el;
+            if (!el)
+                return;
+            this.contentScrollHeight = el.offsetHeight;
+            this.resizeObserver = new ResizeObserver(() => {
+                this.contentScrollHeight = el.offsetHeight;
+            });
+            this.resizeObserver.observe(el);
+        };
+    }
+    onResize() {
+        this.windowWidth = window.innerWidth;
     }
     get isCollapsibleActive() {
         if (!this.isCollapsible)
             return false;
         if (this.collapsibleBreakpoint === 'always')
             return true;
-        const breakpoints = { sm: 460, md: 768, lg: 1024, xl: 1350, xxl: 1770 };
-        return window.innerWidth <= breakpoints[this.collapsibleBreakpoint];
+        const breakpoints = { sm: 360, md: 768, lg: 1024, xl: 1200, xxl: 1700 };
+        return this.windowWidth < breakpoints[this.collapsibleBreakpoint];
     }
     get hostClass() {
         return {
@@ -40,14 +61,15 @@ export class SpwBox {
             'spw-box': true,
             'spw-box--has-radius': this.hasRadius,
             'spw-box--has-shadow': this.hasShadow,
+            'spw-box--has-border': this.hasBorder,
             [`spw-box--padding-${this.padding}`]: this.padding !== 'none',
+            'spw-box--collapsible-active': this.isCollapsibleActive && !this.isOpen,
         };
     }
     render() {
-        var _a, _b;
         const hostStyle = this.stickyTop ? { '--spw-box-sticky-top': this.stickyTop } : undefined;
-        const contentStyle = this.isCollapsible ? { height: this.isOpen || !this.isCollapsibleActive ? `${(_b = (_a = this.contentRef) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0}px` : '0px' } : undefined;
-        return (h(Host, { key: '71f0ca883b24d20c68e415905b9a7adfe4817268', class: this.hostClass, style: hostStyle }, h("div", { key: '370a502d2df32122bb1dbddd1e77fbb809f503e3', class: this.elementClass }, h("div", { key: '8fce2c39ca9fb109f5b76583c84afe17d53f7a99', class: { 'spw-box__header': true, 'spw-box__header--collapsible': this.isCollapsible }, onClick: this.toggle }, h("slot", { key: '838b378e976f8f567e31bca92190581356d6e6ba', name: "header" }), this.isCollapsible && (h("spw-icon", { key: '4bd92026ce4f1dcd353f7ccd75f23c958a1ff6ae', icon: "fa-chevron-down", class: { 'spw-box__header-icon--open': this.isOpen } }))), h("div", { key: '08d4138fcc99855e95c27d99d1aadeb33f5aa836', class: { 'spw-box__content': true, 'spw-box__content--collapsed': this.isCollapsible }, style: contentStyle, ref: el => (this.contentRef = el) }, h("slot", { key: 'f8990c3198f4058bf836f4496aac3af4bf8fe005' })))));
+        const clipperStyle = this.isCollapsibleActive ? { height: this.isOpen ? `${this.contentScrollHeight}px` : '0px' } : undefined;
+        return (h(Host, { key: '788d32484e30f9e2994fb4b8dce673286f8d3275', class: this.hostClass, style: hostStyle }, h("div", { key: '1ed797fbff5baf6779c00d0099c2fe9b5bbe73a0', class: this.elementClass, onClick: !this.isOpen ? this.toggle : undefined }, h("div", { key: '48bb1710bf62d9a6546ef31b48ee1e06f8547491', class: { 'spw-box__header': true, 'spw-box__header--collapsible': this.isCollapsibleActive }, onClick: this.isOpen ? this.toggle : undefined }, h("slot", { key: '7af6869c5e833133e596a36b6431756e72778eda', name: "header" }), this.isCollapsibleActive && h("spw-icon", { key: '578f5e5720f3a39c156f61cc8a2bd9efc84e496a', icon: "fa-chevron-down", class: { 'spw-box__header-icon--open': this.isOpen } })), h("div", { key: '49e2f1b37cb360ae81bc442e08d0b10386f3030a', class: { 'spw-box__content-clipper': this.isCollapsibleActive }, style: clipperStyle }, h("div", { key: '239a121e5182f3e665b1fd318021d8601491ac85', class: "spw-box__content", ref: this.setContentRef }, h("slot", { key: 'bd26b0fe7c3260b82eba613fca6e3ec432b28f4b' }))))));
     }
     static get is() { return "spw-box"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +125,26 @@ export class SpwBox {
                 "attribute": "has-shadow",
                 "defaultValue": "false"
             },
+            "hasBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet d'afficher une bordure autour de la box"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-border",
+                "defaultValue": "false"
+            },
             "isSticky": {
                 "type": "boolean",
                 "mutable": false,
@@ -194,7 +236,7 @@ export class SpwBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "D\u00E9finit le breakpoint en dessous duquel la box est collapsible (sm: 460px, md: 768px, lg: 1024px, xl: 1350px,\nxxl: 1770px, always: toujours collapsible)"
+                    "text": "D\u00E9finit le breakpoint en dessous duquel la box est collapsible (sm: 360px, md: 768px, lg: 1024px, xl: 1200px,\nxxl: 1700px, always: toujours collapsible)"
                 },
                 "getter": false,
                 "setter": false,
@@ -206,8 +248,19 @@ export class SpwBox {
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isOpen": {},
+            "windowWidth": {},
+            "contentScrollHeight": {}
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

package/dist/collection/components/spw-breadcrumb/spw-breadcrumb-item/spw-breadcrumb-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);
   }
@@ -361,14 +362,17 @@ template {
 
 :host {
   display: contents;
+  white-space: nowrap;
 }
 
 .spw-breadcrumb-item {
   list-style: none;
   display: inline;
+  white-space: nowrap;
 }
 .spw-breadcrumb-item__text {
   font-weight: 700;
+  white-space: nowrap;
   color: var(--spw-color-themes-grey-grey-900);
 }
 :host(.spw-breadcrumb-item--dark) .spw-breadcrumb-item__text {
@@ -377,6 +381,11 @@ template {
 .spw-breadcrumb-item spw-link {
   --spw-link-font-weight: 400;
 }
+@media (min-width: 1024px) {
+  .spw-breadcrumb-item spw-link {
+    --spw-link-white-space: nowrap;
+  }
+}
 :host(.spw-breadcrumb-item--light) .spw-breadcrumb-item spw-link {
   --spw-link-color: var(--spw-color-themes-grey-grey-900);
   --spw-link-hover-color: var(--spw-color-themes-grey-grey-900);

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

@@ -4,6 +4,8 @@ export class SpwBreadcrumbItem {
         /** Permet de définir un lien sur l'élément du breadcrumb */
         this.href = '';
         this.surface = 'light';
+        this.label = '';
+        this.truncated = '';
     }
     surfaceChanged() {
         this.updateSurfaceClass();
@@ -11,6 +13,15 @@ export class SpwBreadcrumbItem {
     componentWillLoad() {
         this.getSurfaceFromParent();
     }
+    componentDidLoad() {
+        this.readSlotText();
+    }
+    readSlotText() {
+        var _a, _b;
+        const text = (_b = (_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+        this.label = text;
+        this.truncated = text.length > 40 ? text.slice(0, 40) + '…' : text;
+    }
     getSurfaceFromParent() {
         let parent = this.el.parentElement;
         while (parent) {
@@ -35,7 +46,7 @@ export class SpwBreadcrumbItem {
         this.el.classList.add(`spw-breadcrumb-item--${this.surface}`);
     }
     render() {
-        return (h(Host, { key: '68661d36076f8e2ded2e0d3d438157e4bf5eeba7' }, h("div", { key: '9bbabf1f3d7a3d5655b08670e4f021adc48c50c3', role: "listitem", class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface }, h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page" }, h("slot", null))))));
+        return (h(Host, { key: 'f64a5f5a918e05f9d5a9a81e4d2c57418d7523e1' }, h("div", { key: '343508e3765ce67ca3a72cdd673b5149b4923044', role: "listitem", class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface, title: this.label }, this.truncated || h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page", title: this.label }, this.truncated || h("slot", null))))));
     }
     static get is() { return "spw-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }
@@ -75,7 +86,9 @@ export class SpwBreadcrumbItem {
     }
     static get states() {
         return {
-            "surface": {}
+            "surface": {},
+            "label": {},
+            "truncated": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/spw-breadcrumb/spw-breadcrumb.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);
   }
@@ -401,14 +402,14 @@ template {
   padding-left: 24px !important;
   position: relative;
   display: none;
+  white-space: nowrap;
 }
 ::slotted(spw-breadcrumb-item):after {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
-  font-family: var(--spw-ds-font-icons-solid);
-  font-weight: 700;
+  font-family: var(--spw-ds-font-icons-regular);
   content: "\f060";
   font-size: 14px;
 }
@@ -505,26 +506,29 @@ template {
 }
 
 ::slotted(.collapsed-item) {
-  font-size: 0;
-  position: relative;
+  display: none;
 }
-::slotted(.collapsed-item):before {
-  font-family: var(--spw-ds-font-icons-solid);
-  font-weight: 700;
-  content: "\f141";
-  font-size: 16px;
-  color: var(--spw-color-themes-grey-grey-500);
+@media (min-width: 1024px) {
+  ::slotted(.collapsed-item) {
+    display: inline-block;
+    font-size: 0;
+    position: relative;
+  }
 }
 
-.spw-breadcrumb--surface-light ::slotted(spw-breadcrumb-item):after {
-  opacity: 1;
-  color: var(--spw-ds-primary);
-}
 @media (min-width: 1024px) {
-  .spw-breadcrumb--surface-light ::slotted(spw-breadcrumb-item):after {
-    color: var(--spw-color-themes-grey-grey-600);
+  ::slotted(.collapsed-item)::before {
+    font-family: var(--spw-ds-font-icons-solid);
+    font-weight: 700;
+    content: "\f141";
+    font-size: 14px;
+    color: var(--spw-color-themes-grey-grey-900);
   }
 }
+.spw-breadcrumb--surface-light ::slotted(spw-breadcrumb-item):after {
+  opacity: 1;
+  color: var(--spw-color-themes-grey-grey-900);
+}
 
 .spw-breadcrumb--surface-dark {
   color: var(--spw-ds-white) !important;

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class SpwBreadcrumb {
     constructor() {
         /** Permet de limiter le breadcrumb à x éléments visibles */
-        this.maxItems = 9999;
+        this.maxItems = 5;
         /** Permet de sélectionner la variante de breadcrumb */
         this.variant = 'default';
         /** Permet de choisir la surface d'arrière-plan du breadcrumb */
@@ -43,7 +43,7 @@ export class SpwBreadcrumb {
             [`spw-breadcrumb--font-size-${this.fontSize}`]: true,
             [`spw-breadcrumb--${this.variant}`]: true,
         };
-        return (h(Host, { key: '72cd3232357b54b5fa081df2c605ea039b791fd7' }, h("nav", { key: '214606d2a4d13a2d629d9d88aa8a5182be5006c3', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: '4ea1cedcd9fcd650e8198c1d613959bbee9f155e', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: '8cc4da01764ace42c2de886f453e3c322c2f0483' })))));
+        return (h(Host, { key: '861030111eef4e2edacdd344424a1195688c842a' }, h("nav", { key: '91c4e99a0d9f701adef2f18e313c7f963cf01f4f', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: 'df3e61bdfed35994ffa68a177b3baf2612b30fa6', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: 'c607d42f810a001e41926f17b8fc60eba327071f' })))));
     }
     static get is() { return "spw-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-button/spw-button.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);
   }
@@ -406,7 +407,6 @@ template {
   width: 100%;
   white-space: nowrap;
   border-radius: 9999px;
-  letter-spacing: 0.18px;
   cursor: pointer;
   font-weight: bold;
   outline: 3px solid transparent;

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

@@ -109,7 +109,7 @@ export class SpwButton {
             'aria-label': this.accAriaLabel || this.name || slotText || 'Label',
             'aria-disabled': isDisabled ? 'true' : null,
         };
-        return (h(TagType, Object.assign({ key: 'af8ac1a8762a7da373014f322ee004297a8295f5' }, attrs, { ref: (el) => (this.nativeEl = el), class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: 'dc40b975fc312377bcbdc89ee1e0da4707893b13', class: "spw-button__inner" }, h("div", { key: 'c5a397c631fd9984fca6f711b1cc890cf1516f79', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: '92e532897aa0f62a2c1927026b15a7e81307256c' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: 'f7ae144bc041a0fa7d189a532a069cf7ed3e3aa5', text: "" })));
+        return (h(TagType, Object.assign({ key: 'e8413b7bedacc2d4f6f2b8d676eb6d59fd4055ed' }, attrs, { ref: (el) => (this.nativeEl = el), class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: 'eda3ddaf848756c60c64279efae141ae1a22f1df', class: "spw-button__inner" }, h("div", { key: '2d3c979bf6d2998d9f3eec6dddf1b58d23e27cbf', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: 'ba4f377ef77ca4f37a691ef72e117503ffac2958' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: '59561ea5f18844639de6b624e96f2ba3c2525f85', text: "" })));
     }
     static get is() { return "spw-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-card/spw-card-content/spw-card-content.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);
   }
@@ -385,8 +386,17 @@ template {
   margin-top: 12px;
 }
 :host(.--no-image.--event) .spw-card-content {
-  padding-left: 64px;
-  padding-top: 12px;
+  padding-left: 104px;
+}
+:host(.--no-image.--event) .spw-card-content:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80px;
+  height: 100%;
+  background: var(--spw-color-themes-grey-grey-300);
+  border-radius: 5px 0 0 5px;
 }
 :host(.--sidebar) .spw-card-content {
   padding: 0;

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { formatDate } from "../../../utils/utils";
 export class SpwCardContent {
     render() {
-        return (h("div", { key: '66ceb610e7cb0b66d4aa8287f75f698840a50819', class: "spw-card-content" }, this.tag && h("span", { key: '51e3aa55120ee1ae99fc37843a8cd1d118418b63', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: 'e507fba4526c323f520378e711da8418c3c4b929', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: '104ffaf30fd8c9a3b1d274141971a7c747894fad' })));
+        return (h("div", { key: '6f4638eb1e8f4559c5680b8f65794421008af67d', class: "spw-card-content" }, this.tag && h("span", { key: '17819e9631a23ab975b29f98c8c28aba7c067a02', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: '0b8ab265493a816cb2865ede68eed3cbd90068b6', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: '47d4b9b10df9698d97b3518b76bc760badf350df' })));
     }
     static get is() { return "spw-card-content"; }
     static get encapsulation() { return "shadow"; }

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: '4dda2eb94a01dbbf2dbc49b8ae9fa3e8168f2826' }, h("div", { key: '666274920caf145e18c2115a7e228826cd5d896e', class: this.elementClass }, h("slot", { key: '67a54073067d7240b415466d98d1a495e086b293' }))));
     }
     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: '63fd7dc51e934f45c7a54e60c83410351e4c6f76', class: this.elementClass, style: style }, this.label && h("span", { key: 'baa9943ec3e165129353f554119d9ae075054b53', class: "spw-card-image__label" }, this.label), h("slot", { key: '5ee91af7b9efe54b56cd76e087122988fb955f99' }), h("div", { key: 'f1e6dda447d3f112f37ad1663a50dfc7cac15fc1', class: "spw-card-image__icon" }, h("spw-icon", { key: 'b8692b751c0be959589cc445eab3732d99a48868', 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: '7c20e182434e8dc1a34babbb67ed261c2fd8e525' }, h("span", { key: '93cabd65e045ba3af65cd0037effb567d592197a', class: this.elementClass, onClick: () => this.handleClick() }, h("slot", { key: 'dd8e86278ed00180c967a73cdccff14ac2de4a6f' }))));
     }
     static get is() { return "spw-card-subtag-item"; }
     static get encapsulation() { return "shadow"; }