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

package/dist/collection/components/spw-accordion/spw-accordion-content/spw-accordion-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);
   }

package/dist/collection/components/spw-accordion/spw-accordion-item/spw-accordion-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-accordion/spw-accordion-title/spw-accordion-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-accordion/spw-accordion.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-avatar/spw-avatar.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-block-content/spw-block-content.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-box/spw-box.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);
   }
@@ -376,8 +377,14 @@ template {
   --spw-box-padding-large: 48px;
   /** @prop --spw-box-collapse-duration: Durée de l'animation de collapse */
   --spw-box-collapse-duration: 0.3s;
-  /** @prop --spw-box-background: Couleur de fond de la box */
+  /** @prop --spw-box-background: Couleur de fond de la box (variant white) */
   --spw-box-background: white;
+  /** @prop --spw-box-border-color: Couleur de la bordure de la box */
+  --spw-box-border-color: var(--spw-colors-support-grey-grey-300);
+  /** @prop --spw-box-border-width: Épaisseur de la bordure de la box */
+  --spw-box-border-width: 1px;
+  /** @prop --spw-box-border-style: Style de la bordure de la box */
+  --spw-box-border-style: solid;
 }
 
 @media (min-width: 1024px) {
@@ -397,6 +404,9 @@ template {
 .spw-box--has-radius {
   border-radius: var(--spw-box-radius);
 }
+.spw-box--has-border {
+  border: var(--spw-box-border-width) var(--spw-box-border-style) var(--spw-box-border-color);
+}
 .spw-box--padding-small {
   padding: var(--spw-box-padding-small);
 }
@@ -429,7 +439,7 @@ template {
 :host(.spw-box--collapsible-sm) .spw-box__header {
   display: flex;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   :host(.spw-box--collapsible-sm) .spw-box__header {
     display: none;
   }
@@ -465,7 +475,7 @@ template {
 :host(.spw-box--collapsible-xl) .spw-box__header {
   display: flex;
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   :host(.spw-box--collapsible-xl) .spw-box__header {
     display: none;
   }
@@ -477,7 +487,7 @@ template {
 :host(.spw-box--collapsible-xxl) .spw-box__header {
   display: flex;
 }
-@media (min-width: 1770px) {
+@media (min-width: 1700px) {
   :host(.spw-box--collapsible-xxl) .spw-box__header {
     display: none;
   }

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

@@ -5,6 +5,8 @@ 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 */
@@ -40,6 +42,7 @@ 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',
         };
     }
@@ -47,7 +50,7 @@ export class SpwBox {
         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' })))));
+        return (h(Host, { key: 'd542225ff409f745c90e27452d30ac3a92634187', class: this.hostClass, style: hostStyle }, h("div", { key: 'a163a09341668f1c5a816493946721e9bda092d3', class: this.elementClass }, h("div", { key: '7a26421915460a04b7e058e724ae451f5267758b', class: { 'spw-box__header': true, 'spw-box__header--collapsible': this.isCollapsible }, onClick: this.toggle }, h("slot", { key: '0dc6e1f95bb94276f6dfd31cb4ed546a8c98ccd8', name: "header" }), this.isCollapsible && h("spw-icon", { key: '0149b3d3bf222ccc4a851a8053bbb1db08242202', icon: "fa-chevron-down", class: { 'spw-box__header-icon--open': this.isOpen } })), h("div", { key: '916792ede5446f2bfb961c9ba38f9fc402ba3de1', class: { 'spw-box__content': true, 'spw-box__content--collapsed': this.isCollapsible }, style: contentStyle, ref: el => (this.contentRef = el) }, h("slot", { key: '602aa1324df25731c5c8caadfa3f637b8d4f20b7' })))));
     }
     static get is() { return "spw-box"; }
     static get encapsulation() { return "shadow"; }
@@ -103,6 +106,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,

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: 'b2dfcb9ee34d3e6b60759bfec969e4f5618cc721' }, h("div", { key: '3064ddc686b0113f131ca34e50f259163f436cff', 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,6 +402,7 @@ template {
   padding-left: 24px !important;
   position: relative;
   display: none;
+  white-space: nowrap;
 }
 ::slotted(spw-breadcrumb-item):after {
   position: absolute;
@@ -505,26 +507,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: 'a596323b098cc1ced9679bfdc0e7bf6d1b099b91' }, h("nav", { key: '2acde0b7352dae535e10dcb213a58f71babcef24', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: 'a20afd807b7bf47254bba0b1f016e3adf27a035c', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: 'ffe6bf868ce252fece46dbc0637e933994d01148' })))));
     }
     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-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: '2b3a9a4e065774bcd5252bedbbc59972a02a716d', class: "spw-card-content" }, this.tag && h("span", { key: 'a60ef25fddee06ea80394b8c630450e924dd150d', class: "spw-card-content__tag" }, this.tag), this.date && (h("time", { key: 'fe63cd8631b889b23b703e5751d508acd5e10669', "date-time": this.date, class: "spw-card-content__date" }, formatDate(this.date))), h("slot", { key: 'ff65fca4b713ac34d8ed0dd4d7e2337b214a0124' })));
     }
     static get is() { return "spw-card-content"; }
     static get encapsulation() { return "shadow"; }