@spw-ds/spw-stencil-library 1.2.2 → 1.2.3

package/dist/components/spw-hero.js

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-_q4w18VU.js';
 
-const spwHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-hero-content-max-width:578px;--spw-hero-ratio-picture:initial;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-hero{overflow:hidden;position:relative}.spw-hero:not(.spw-hero--maxi){border-radius:12px}.spw-hero--surface-dark{color:#fff}.spw-hero--surface-light{color:var(--spw-color-themes-grey-grey-900)}.spw-hero--grey{background:var(--spw-color-themes-grey-grey-100)}.spw-hero--white{background:#fff}.spw-hero--grey,.spw-hero--white{display:flex;flex-direction:column;gap:24px;padding:24px}@media (min-width:1024px){.spw-hero--grey,.spw-hero--white{align-items:center;flex-direction:row;padding:64px}}.spw-hero--has-picture-full{gap:0;padding:0}.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:column}@media (min-width:1024px){.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:row-reverse}}.spw-hero__container{display:flex;margin:0 auto;position:relative;z-index:3}.spw-hero--photo .spw-hero__container{padding:48px 24px}@media (min-width:1024px){.spw-hero--photo .spw-hero__container{padding:64px}}.spw-hero--has-picture-full .spw-hero__container{padding:24px}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__container{padding:80px 60px}.spw-hero--has-picture-full.spw-hero--left .spw-hero__container{padding-left:calc(48% + 60px)}.spw-hero--has-picture-full.spw-hero--right .spw-hero__container{padding-right:calc(48% + 60px)}}.spw-hero--maxi .spw-hero__container{padding:80px 24px}@media (min-width:1024px){.spw-hero--maxi .spw-hero__container{padding:148px 24px}}.spw-hero--left .spw-hero__container{justify-content:flex-start}.spw-hero--center .spw-hero__container{justify-content:center}.spw-hero--right .spw-hero__container{justify-content:flex-end}.spw-hero__image,.spw-hero__overlay{height:100%;left:0;position:absolute;top:0;width:100%}.spw-hero__overlay{z-index:2}.spw-hero--surface-dark .spw-hero__overlay{background:var(--spw-color-themes-grey-grey-900)}.spw-hero--surface-light .spw-hero__overlay{background:#fff}.spw-hero__image{-o-object-fit:cover;object-fit:cover;z-index:1}.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{max-width:435px}}.spw-hero--has-picture-full .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__image{max-width:48%;position:absolute}}.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-top-left-radius:0;left:auto;right:0}}.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-right-radius:0;border-top-right-radius:0}}.spw-hero__content{max-width:var(--spw-hero-content-max-width);width:100%}.spw-hero--maxi .spw-hero__content{--spw-hero-content-max-width:784px;margin:0 auto;text-align:center}.spw-hero--photo .spw-hero__content{background-color:var(--spw-ds-white);border-radius:8px;box-shadow:var(--spw-effect-elevation-8);padding:32px}";
+const spwHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;--spw-hero-content-max-width:578px;--spw-hero-ratio-picture:initial;--spw-hero-shadow:none;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-hero{box-shadow:var(--spw-hero-shadow);overflow:hidden;position:relative}.spw-hero:not(.spw-hero--maxi){border-radius:12px}.spw-hero--surface-dark{color:#fff}.spw-hero--surface-light{color:var(--spw-color-themes-grey-grey-900)}.spw-hero--grey{background:var(--spw-color-themes-grey-grey-100)}.spw-hero--white{background:#fff}.spw-hero--grey,.spw-hero--white{display:flex;flex-direction:column;gap:24px;padding:24px}@media (min-width:1024px){.spw-hero--grey,.spw-hero--white{align-items:center;flex-direction:row;padding:64px}}.spw-hero--has-picture-full{gap:0;padding:0}.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:column}@media (min-width:1024px){.spw-hero.spw-hero--grey.spw-hero--left,.spw-hero.spw-hero--white.spw-hero--left{flex-direction:row-reverse}}.spw-hero__container{display:flex;margin:0 auto;position:relative;z-index:3}.spw-hero--photo .spw-hero__container{padding:48px 24px}@media (min-width:1024px){.spw-hero--photo .spw-hero__container{padding:64px}}.spw-hero--has-picture-full .spw-hero__container{padding:24px}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__container{padding:80px 60px}.spw-hero--has-picture-full.spw-hero--left .spw-hero__container{padding-left:calc(48% + 60px)}.spw-hero--has-picture-full.spw-hero--right .spw-hero__container{padding-right:calc(48% + 60px)}}.spw-hero--maxi .spw-hero__container{padding:80px 24px}@media (min-width:1024px){.spw-hero--maxi .spw-hero__container{padding:148px 24px}}.spw-hero--left .spw-hero__container{justify-content:flex-start}.spw-hero--center .spw-hero__container{justify-content:center}.spw-hero--right .spw-hero__container{justify-content:flex-end}.spw-hero__image,.spw-hero__overlay{height:100%;left:0;position:absolute;top:0;width:100%}.spw-hero__overlay{pointer-events:none;z-index:2}.spw-hero--surface-dark .spw-hero__overlay{background:var(--spw-color-themes-grey-grey-900)}.spw-hero--surface-light .spw-hero__overlay{background:#fff}.spw-hero__image-play{align-items:center;background:var(--spw-ds-primary);border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:24px;height:64px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .3s ease;width:64px;z-index:2}.spw-hero__image-play:hover{transform:translate(-50%,-50%) scale(1.1)}.spw-hero__image{overflow:hidden;z-index:1}.spw-hero__image img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.spw-hero--has-video .spw-hero__image{z-index:4}.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--grey .spw-hero__image,.spw-hero--white .spw-hero__image{max-width:435px}}.spw-hero--has-picture-full .spw-hero__image{aspect-ratio:var(--spw-hero-ratio-picture);border-radius:6px;display:block;position:relative;width:100%}@media (min-width:1024px){.spw-hero--has-picture-full .spw-hero__image{max-width:48%;position:absolute}}.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--right .spw-hero__image{border-bottom-left-radius:0;border-top-left-radius:0;left:auto;right:0}}.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:1024px){.spw-hero--has-picture-full.spw-hero--left .spw-hero__image{border-bottom-right-radius:0;border-top-right-radius:0}}.spw-hero__content{width:100%}@media (min-width:1024px){.spw-hero__content{max-width:var(--spw-hero-content-max-width)}}.spw-hero--maxi .spw-hero__content{--spw-hero-content-max-width:784px;margin:0 auto;text-align:center}.spw-hero--photo .spw-hero__content{background-color:var(--spw-ds-white);border-radius:8px;box-shadow:var(--spw-effect-elevation-8);padding:32px}";
 
 const SpwHero$1 = /*@__PURE__*/ proxyCustomElement(class SpwHero extends H {
     constructor() {
@@ -13,18 +14,32 @@ const SpwHero$1 = /*@__PURE__*/ proxyCustomElement(class SpwHero extends H {
         this.surface = 'light';
         /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */
         this.hasPictureFull = false;
+        /** Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) */
+        this.hasVideo = false;
         /** Permet de choisir le variant du hero */
         this.variant = 'grey';
         /** Permet de choisir l'alignement du contenu */
         this.alignment = 'left';
         /** Permet de spécifier l'opacité de l'overlay (0 à 100) */
         this.overlayOpacity = 0;
+        this.triggerModal = () => {
+            const modal = document.getElementById(this.modalVideoId);
+            if (modal && modal.openModal) {
+                modal.openModal();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                this.triggerModal();
+            }
+        };
     }
     get elementClass() {
         return {
             'spw-hero': true,
             [`spw-hero--surface-${this.surface}`]: true,
             [`spw-hero--has-picture-full`]: this.hasPictureFull,
+            [`spw-hero--has-video`]: this.hasVideo,
             [`spw-hero--${this.variant}`]: true,
             [`spw-hero--${this.alignment}`]: true,
         };
@@ -35,7 +50,7 @@ const SpwHero$1 = /*@__PURE__*/ proxyCustomElement(class SpwHero extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'f4a32cb603d9a5bba07cf122ff15ebd92f0af014' }, h("div", { key: '148901a0db4fe8b178f340b61c8c29fcc9838389', class: this.elementClass }, this.imageSrc && h("img", { key: 'd1c7d5272a8de2d6fb16690ff6328383b0efc7d3', src: this.imageSrc, alt: this.imageAlt, class: "spw-hero__image" }), h("div", { key: 'b9874d61163ed0bdfab1a59bea1c1b8da85053a8', class: "spw-hero__overlay", style: this.overlayStyle }), h("div", { key: '06d4a31e7a7f062721ef2cc0750445ef0df4307e', class: "spw-ds-container spw-hero__container" }, h("div", { key: 'f9e2fb931122efd6d8b11510133664e5b9501d2e', class: "spw-hero__content" }, h("slot", { key: '445dcdcd40500d836eed29c92ffdb8cdbacf3582' }))))));
+        return (h(Host, { key: 'd2529d7d7dc9d516fbc8b847069dc4e44e651a3b' }, h("div", { key: '83c24afd61f2f21f95d15e2a04286f7384f81567', class: this.elementClass }, this.imageSrc && (h("div", { key: '2d6ee8861d6de4d9ce6213e4dd9c60edc4afe6f8', class: "spw-hero__image" }, this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (h("div", { key: '09db6ffa09ec908610cdf3ef0e1d825c36ac6831', class: "spw-hero__image-play", onClick: this.triggerModal, onKeyDown: this.handleKeyDown, tabIndex: 0, role: "button", "aria-label": "Lire la vid\u00E9o" }, h("spw-icon", { key: '5c5384133cb3af22d46cd7409aae404052c00dd9', icon: "fa-play" }))), h("img", { key: '3a1fe7a690359dadc7728ef071cf02d849b9bdca', src: this.imageSrc, alt: this.imageAlt }))), h("div", { key: '136e31e233fcc7b9fb5fb2e7402ce02747cbd3b4', class: "spw-hero__overlay", style: this.overlayStyle }), h("div", { key: 'e7bd223cc80232f94b7880921cdf7267cfdc8d24', class: "spw-ds-container spw-hero__container" }, h("div", { key: '81e7f10d32393c86da29d4e3c8b63ddee2f69517', class: "spw-hero__content" }, h("slot", { key: '1c7ae529e4d777aa8aca51d58b0a4dcd3371c05e' }))))));
     }
     static get style() { return spwHeroCss; }
 }, [1, "spw-hero", {
@@ -43,6 +58,8 @@ const SpwHero$1 = /*@__PURE__*/ proxyCustomElement(class SpwHero extends H {
         "imageAlt": [1, "image-alt"],
         "surface": [1],
         "hasPictureFull": [4, "has-picture-full"],
+        "hasVideo": [4, "has-video"],
+        "modalVideoId": [1, "modal-video-id"],
         "variant": [1],
         "alignment": [1],
         "overlayOpacity": [2, "overlay-opacity"]
@@ -51,13 +68,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["spw-hero"];
+    const components = ["spw-hero", "spw-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "spw-hero":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SpwHero$1);
             }
             break;
+        case "spw-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/dist/components/spw-hero.js.map

@@ -1 +1 @@
-{"file":"spw-hero.js","mappings":";;AAAA,MAAM,UAAU,GAAG,48LAA48L;;MCOl9LA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAY,EAAE;;AAEtB,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;;AAEpC,QAAA,IAAc,CAAA,cAAA,GAAa,KAAK;;AAEhC,QAAA,IAAO,CAAA,OAAA,GAAyC,MAAM;;AAEtD,QAAA,IAAS,CAAA,SAAA,GAAiC,MAAM;;AAEhD,QAAA,IAAc,CAAA,cAAA,GAAY,CAAC;AAiCpC;AA/BC,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,qBAAqB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC3C,YAAA,CAAC,CAA4B,0BAAA,CAAA,GAAG,IAAI,CAAC,cAAc;AACnD,YAAA,CAAC,aAAa,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SACtC;;AAGH,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,OAAO,EAAE,CAAG,EAAA,IAAI,CAAC,cAAe,GAAG,GAAG,CAAE,CAAA;SACzC;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,QAAQ,IAAI,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,EAAG,CAAA,EACzF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAQ,CAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwHero","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-hero/spw-hero.scss?tag=spw-hero&encapsulation=shadow","src/components/spw-hero/spw-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n  --spw-hero-content-max-width: 578px;\n  --spw-hero-ratio-picture: initial;\n}\n\n.spw-hero {\n  position: relative;\n  overflow: hidden;\n  &:not(.spw-hero--maxi) {\n    border-radius: 12px;\n  }\n  &--surface-dark {\n    color: white;\n  }\n  &--surface-light {\n    color: var(--spw-color-themes-grey-grey-900);\n  }\n  &--grey {\n    background: var(--spw-color-themes-grey-grey-100);\n  }\n  &--white {\n    background: white;\n  }\n  &--grey,\n  &--white {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    gap: 24px;\n    @include breakpoint(lg) {\n      padding: 64px;\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n  &--has-picture-full {\n    padding: 0;\n    gap: 0;\n  }\n  &.spw-hero--grey.spw-hero--left,\n  &.spw-hero--white.spw-hero--left {\n    flex-direction: column;\n    @include breakpoint(lg) {\n      flex-direction: row-reverse;\n    }\n  }\n  &__container {\n    display: flex;\n    position: relative;\n    margin: 0 auto;\n    z-index: 3;\n    .spw-hero--photo & {\n      padding: 48px 24px;\n      @include breakpoint(lg) {\n        padding: 64px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      padding: 24px;\n      @include breakpoint(lg) {\n        padding: 80px 60px;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      @include breakpoint(lg) {\n        padding-left: calc(48% + 60px);\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      @include breakpoint(lg) {\n        padding-right: calc(48% + 60px);\n      }\n    }\n    .spw-hero--maxi & {\n      padding: 80px 24px;\n      @include breakpoint(lg) {\n        padding: 148px 24px;\n      }\n    }\n    .spw-hero--left & {\n      justify-content: flex-start;\n    }\n    .spw-hero--center & {\n      justify-content: center;\n    }\n    .spw-hero--right & {\n      justify-content: flex-end;\n    }\n  }\n  &__overlay,\n  &__image {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n  &__overlay {\n    z-index: 2;\n    .spw-hero--surface-dark & {\n      background: var(--spw-color-themes-grey-grey-900);\n    }\n    .spw-hero--surface-light & {\n      background: white;\n    }\n  }\n  &__image {\n    z-index: 1;\n    object-fit: cover;\n    .spw-hero--white &,\n    .spw-hero--grey & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        max-width: 435px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        position: absolute;\n        max-width: 48%;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        right: 0;\n        left: auto;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n  &__content {\n    max-width: var(--spw-hero-content-max-width);\n    width: 100%;\n    .spw-hero--maxi & {\n      --spw-hero-content-max-width: 784px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .spw-hero--photo & {\n      padding: 32px;\n      background-color: var(--spw-ds-white);\n      border-radius: 8px;\n      box-shadow: var(--spw-effect-elevation-8);\n    }\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'spw-hero',\n  styleUrl: 'spw-hero.scss',\n  shadow: true,\n})\nexport class SpwHero {\n  /** Image du hero banner */\n  @Prop() imageSrc?: string;\n  /** Texte alternatif de l'image du hero banner */\n  @Prop() imageAlt?: string = '';\n  /** Permet de choisir la surface d'arrière-plan du hero */\n  @Prop() surface?: 'dark' | 'light' = 'light';\n  /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */\n  @Prop() hasPictureFull?: boolean = false;\n  /** Permet de choisir le variant du hero */\n  @Prop() variant?: 'grey' | 'white' | 'maxi' | 'photo' = 'grey';\n  /** Permet de choisir l'alignement du contenu */\n  @Prop() alignment?: 'left' | 'center' | 'right' = 'left';\n  /** Permet de spécifier l'opacité de l'overlay (0 à 100) */\n  @Prop() overlayOpacity?: number = 0;\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-hero': true,\n      [`spw-hero--surface-${this.surface}`]: true,\n      [`spw-hero--has-picture-full`]: this.hasPictureFull,\n      [`spw-hero--${this.variant}`]: true,\n      [`spw-hero--${this.alignment}`]: true,\n    };\n  }\n\n  private get overlayStyle(): { [key: string]: string } {\n    return {\n      opacity: `${this.overlayOpacity! / 100}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.imageSrc && <img src={this.imageSrc} alt={this.imageAlt} class=\"spw-hero__image\" />}\n          <div class=\"spw-hero__overlay\" style={this.overlayStyle}></div>\n          <div class=\"spw-ds-container spw-hero__container\">\n            <div class=\"spw-hero__content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"spw-hero.js","mappings":"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","names":["SpwHero","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-hero/spw-hero.scss?tag=spw-hero&encapsulation=shadow","src/components/spw-hero/spw-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n  --spw-hero-content-max-width: 578px;\n  --spw-hero-ratio-picture: initial;\n  --spw-hero-shadow: none;\n}\n\n.spw-hero {\n  position: relative;\n  overflow: hidden;\n  box-shadow: var(--spw-hero-shadow);\n  &:not(.spw-hero--maxi) {\n    border-radius: 12px;\n  }\n  &--surface-dark {\n    color: white;\n  }\n  &--surface-light {\n    color: var(--spw-color-themes-grey-grey-900);\n  }\n  &--grey {\n    background: var(--spw-color-themes-grey-grey-100);\n  }\n  &--white {\n    background: white;\n  }\n  &--grey,\n  &--white {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    gap: 24px;\n    @include breakpoint(lg) {\n      padding: 64px;\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n  &--has-picture-full {\n    padding: 0;\n    gap: 0;\n  }\n  &.spw-hero--grey.spw-hero--left,\n  &.spw-hero--white.spw-hero--left {\n    flex-direction: column;\n    @include breakpoint(lg) {\n      flex-direction: row-reverse;\n    }\n  }\n  &__container {\n    display: flex;\n    position: relative;\n    margin: 0 auto;\n    z-index: 3;\n    .spw-hero--photo & {\n      padding: 48px 24px;\n      @include breakpoint(lg) {\n        padding: 64px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      padding: 24px;\n      @include breakpoint(lg) {\n        padding: 80px 60px;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      @include breakpoint(lg) {\n        padding-left: calc(48% + 60px);\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      @include breakpoint(lg) {\n        padding-right: calc(48% + 60px);\n      }\n    }\n    .spw-hero--maxi & {\n      padding: 80px 24px;\n      @include breakpoint(lg) {\n        padding: 148px 24px;\n      }\n    }\n    .spw-hero--left & {\n      justify-content: flex-start;\n    }\n    .spw-hero--center & {\n      justify-content: center;\n    }\n    .spw-hero--right & {\n      justify-content: flex-end;\n    }\n  }\n  &__overlay,\n  &__image {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n  &__overlay {\n    z-index: 2;\n    pointer-events: none;\n    .spw-hero--surface-dark & {\n      background: var(--spw-color-themes-grey-grey-900);\n    }\n    .spw-hero--surface-light & {\n      background: white;\n    }\n  }\n  &__image-play {\n    z-index: 2;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: var(--spw-ds-primary);\n    color: white;\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 24px;\n    transition: all 0.3s ease;\n    cursor: pointer;\n    &:hover {\n      transform: translate(-50%, -50%) scale(1.1);\n    }\n  }\n  &__image {\n    z-index: 1;\n    overflow: hidden;\n\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .spw-hero--has-video & {\n      z-index: 4;\n    }\n    .spw-hero--white &,\n    .spw-hero--grey & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        max-width: 435px;\n      }\n    }\n    .spw-hero--has-picture-full & {\n      display: block;\n      position: relative;\n      aspect-ratio: var(--spw-hero-ratio-picture);\n      width: 100%;\n      border-radius: 6px;\n      @include breakpoint(lg) {\n        position: absolute;\n        max-width: 48%;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--right & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        right: 0;\n        left: auto;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n    .spw-hero--has-picture-full.spw-hero--left & {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n      @include breakpoint(lg) {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n  }\n  &__content {\n    width: 100%;\n    @include breakpoint(lg) {\n      max-width: var(--spw-hero-content-max-width);\n    }\n    .spw-hero--maxi & {\n      --spw-hero-content-max-width: 784px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .spw-hero--photo & {\n      padding: 32px;\n      background-color: var(--spw-ds-white);\n      border-radius: 8px;\n      box-shadow: var(--spw-effect-elevation-8);\n    }\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'spw-hero',\n  styleUrl: 'spw-hero.scss',\n  shadow: true,\n})\nexport class SpwHero {\n  /** Image du hero banner */\n  @Prop() imageSrc?: string;\n  /** Texte alternatif de l'image du hero banner */\n  @Prop() imageAlt?: string = '';\n  /** Permet de choisir la surface d'arrière-plan du hero */\n  @Prop() surface?: 'dark' | 'light' = 'light';\n  /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */\n  @Prop() hasPictureFull?: boolean = false;\n  /** Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) */\n  @Prop() hasVideo?: boolean = false;\n  /** Permet de définir un id de modal à ouvrir au clic sur le bouton play */\n  @Prop() modalVideoId?: string;\n  /** Permet de choisir le variant du hero */\n  @Prop() variant?: 'grey' | 'white' | 'maxi' | 'photo' = 'grey';\n  /** Permet de choisir l'alignement du contenu */\n  @Prop() alignment?: 'left' | 'center' | 'right' = 'left';\n  /** Permet de spécifier l'opacité de l'overlay (0 à 100) */\n  @Prop() overlayOpacity?: number = 0;\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-hero': true,\n      [`spw-hero--surface-${this.surface}`]: true,\n      [`spw-hero--has-picture-full`]: this.hasPictureFull,\n      [`spw-hero--has-video`]: this.hasVideo,\n      [`spw-hero--${this.variant}`]: true,\n      [`spw-hero--${this.alignment}`]: true,\n    };\n  }\n\n  private get overlayStyle(): { [key: string]: string } {\n    return {\n      opacity: `${this.overlayOpacity! / 100}`,\n    };\n  }\n\n  private triggerModal = () => {\n    const modal = document.getElementById(this.modalVideoId) as HTMLElement & { openModal: () => Promise<void> };\n    if (modal && modal.openModal) {\n      modal.openModal();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      this.triggerModal();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.imageSrc && (\n            <div class=\"spw-hero__image\">\n              {this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && (\n                <div class=\"spw-hero__image-play\" onClick={this.triggerModal} onKeyDown={this.handleKeyDown} tabIndex={0} role=\"button\" aria-label=\"Lire la vidéo\">\n                  <spw-icon icon=\"fa-play\"></spw-icon>\n                </div>\n              )}\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </div>\n          )}\n          <div class=\"spw-hero__overlay\" style={this.overlayStyle}></div>\n          <div class=\"spw-ds-container spw-hero__container\">\n            <div class=\"spw-hero__content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-iodda.js

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { d as defineCustomElement$7 } from './p-BowHA3gk.js';
 import { d as defineCustomElement$6 } from './p-BF73GiQU.js';
 import { d as defineCustomElement$5 } from './p-_q4w18VU.js';
-import { d as defineCustomElement$4 } from './p-8jCY8rtJ.js';
-import { d as defineCustomElement$3 } from './p-CMFyBNvH.js';
-import { d as defineCustomElement$2 } from './p-5qcE_Ljw.js';
+import { d as defineCustomElement$4 } from './p-fNRoK67L.js';
+import { d as defineCustomElement$3 } from './p-DaosfSzT.js';
+import { d as defineCustomElement$2 } from './p-Dku0Cksp.js';
 
 async function fetchData(page = 1, itemsPerPage, search = '', filters) {
     const offset = (page - 1) * itemsPerPage;
@@ -115,7 +115,7 @@ const SpwIodda$1 = /*@__PURE__*/ proxyCustomElement(class SpwIodda extends H {
     render() {
         const totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
         const resultsText = this.totalItems > 1 ? 'résultats trouvés' : 'résultat trouvé';
-        return (h(Host, { key: '8b93f0d1c5c4bf1342c5c682dbea11ce56dc46ed' }, h("div", { key: 'f4740474c17a39f506607ee35dad07ad47352855', class: "spw-search-input" }, h("spw-text-field", { key: 'eb72520ce9dd50d2bdef6144140c3b8c0cc56801', "is-search": "true", size: "large", type: "text", value: this.searchTerm, placeholder: "Rechercher une d\u00E9marche", onValueChanged: event => this.handleSearchInput(event) })), h("div", { key: '0cb2c12aad184da141a85c2d424f0b03d709d3ca', hidden: true, class: "spw-filter spw-tw-mb-6" }, Object.keys(this.filters).map(filterKey => (h("label", { class: "spw-tw-mr-4" }, h("input", { type: "checkbox", checked: this.filters[filterKey], onChange: (event) => this.handleFilterChange(filterKey, event.target.checked) }), h("span", { class: "spw-tw-ml-2" }, filterKey))))), this.totalItems === 0 && !this.isLoading ? (h("div", { class: "spw-no-results" }, h("h3", { class: "spw-no-results__title" }, "Aucun r\u00E9sultat ne correspond \u00E0 votre recherche."), h("ul", { class: "spw-no-results__list" }, h("li", null, "V\u00E9rifiez si votre orthographe est correcte"), h("li", null, "Supprimez des filtres"), h("li", null, "Essayez d\u2019autres termes de recherche")))) : null, this.totalItems > 0 && !this.isLoading ? (h("p", { class: "spw-results" }, this.totalItems, " ", resultsText)) : null, this.isLoading ? h("spw-loading", { class: "spw-tw-mb-10" }) : null, h("ul", { key: '18710131fdbeca1577c901894821453dbc45aee3', class: "spw-list" }, this.items.map(item => (h("li", { class: "spw-list-item", key: item.name }, h("a", { href: item.url, target: "_blank" }, h("h3", { class: "spw-list-item__title" }, item.title), h("p", { class: "spw-list-item__text" }, item.summary)))))), totalPages > 1 && (h("spw-pagination", { key: '5a6a34b5ab2f271e10c4ab16f96f1e2872f5f74b', class: "spw-tw-mt-12", currentPage: this.currentPage, "is-disabled": this.isLoading, totalItems: this.totalItems, itemsPerPage: this.itemsPerPage, onPageChanged: this.handlePageChanged.bind(this) }))));
+        return (h(Host, { key: 'c1353d0c8a29550c67b2f83dd0bddd752b0a0674' }, h("div", { key: 'ce92cfc99ca781dd2ca3405ed3fcd818b4d94871', class: "spw-search-input" }, h("spw-text-field", { key: 'dd7210af00ccecc065d981bf522aebd52a4679c1', "is-search": "true", size: "large", type: "text", value: this.searchTerm, placeholder: "Rechercher une d\u00E9marche", onValueChanged: event => this.handleSearchInput(event) })), h("div", { key: 'cdf23f410c86d0aeeaa19a79835db6fa30127353', hidden: true, class: "spw-filter spw-tw-mb-6" }, Object.keys(this.filters).map(filterKey => (h("label", { class: "spw-tw-mr-4" }, h("input", { type: "checkbox", checked: this.filters[filterKey], onChange: (event) => this.handleFilterChange(filterKey, event.target.checked) }), h("span", { class: "spw-tw-ml-2" }, filterKey))))), this.totalItems === 0 && !this.isLoading ? (h("div", { class: "spw-no-results" }, h("h3", { class: "spw-no-results__title" }, "Aucun r\u00E9sultat ne correspond \u00E0 votre recherche."), h("ul", { class: "spw-no-results__list" }, h("li", null, "V\u00E9rifiez si votre orthographe est correcte"), h("li", null, "Supprimez des filtres"), h("li", null, "Essayez d\u2019autres termes de recherche")))) : null, this.totalItems > 0 && !this.isLoading ? (h("p", { class: "spw-results" }, this.totalItems, " ", resultsText)) : null, this.isLoading ? h("spw-loading", { class: "spw-tw-mb-10" }) : null, h("ul", { key: '9381849e2c9cab463b381f94b4a1f783311c541e', class: "spw-list" }, this.items.map(item => (h("li", { class: "spw-list-item", key: item.name }, h("a", { href: item.url, target: "_blank" }, h("h3", { class: "spw-list-item__title" }, item.title), h("p", { class: "spw-list-item__text" }, item.summary)))))), totalPages > 1 && (h("spw-pagination", { key: 'd7c09b91b3056bc5fcea01630f28727fc0e544bd', class: "spw-tw-mt-12", currentPage: this.currentPage, "is-disabled": this.isLoading, totalItems: this.totalItems, itemsPerPage: this.itemsPerPage, onPageChanged: this.handlePageChanged.bind(this) }))));
     }
     static get style() { return spwIoddaCss; }
 }, [1, "spw-iodda", {

package/dist/components/spw-link.js

@@ -1,4 +1,4 @@
-import { S as SpwLink$1, d as defineCustomElement$1 } from './p-BsulPKjc.js';
+import { S as SpwLink$1, d as defineCustomElement$1 } from './p-GUYao_6w.js';
 
 const SpwLink = SpwLink$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/spw-list-description.js

@@ -17,7 +17,7 @@ const SpwListDescription$1 = /*@__PURE__*/ proxyCustomElement(class SpwListDescr
         };
     }
     render() {
-        return (h(Host, { key: '634518836c0811971bc09f5962e223dbd4bffae7' }, h("div", { key: 'a90b29ba3c0d604be9eb5f818626d7f9ff77757e', class: this.elementClass }, h("slot", { key: '22d52ddbdc1ce1bec163b8dcb8e8ff8684b89e8b' }))));
+        return (h(Host, { key: '520d9fe437d25953a394a7cae5ff8c7cbcb7c69e' }, h("div", { key: 'c8c21d648320ed07fda21f57f4e51c5c00596227', class: this.elementClass }, h("slot", { key: '825f74bd367dd654a84ec9fd40010199362b1825' }))));
     }
     static get style() { return spwListDescriptionCss; }
 }, [1, "spw-list-description", {

package/dist/components/spw-list-item.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { d as defineCustomElement$2 } from './p-_q4w18VU.js';
 
-const spwListItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-list-item{color:var(--spw-color-themes-grey-grey-900);position:relative;text-decoration:none;transition:all .3s ease-in-out}.spw-list-item--hoverable:hover{transform:translateX(5px)}.spw-list-item a{text-decoration:none}.spw-list-item--icon{padding-left:28px}.spw-list-item__category{color:var(--spw-ds-primary);display:inline-block;font-size:16px;font-weight:700;line-height:1.5;margin-bottom:6px;position:relative}.spw-list-item__category spw-icon{left:-28px;position:absolute;top:2px}.spw-list-item__category--hoverable{cursor:pointer}.spw-list-item__category--hoverable:hover{text-decoration:underline}";
+const spwListItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-list-item{color:var(--spw-color-themes-grey-grey-900);position:relative;text-decoration:none;transition:all .3s ease-in-out}:host(.--dark) .spw-list-item{color:var(--spw-ds-white)}.spw-list-item--hoverable:hover{transform:translateX(5px)}.spw-list-item a{text-decoration:none}.spw-list-item--icon{padding-left:28px}.spw-list-item__category{color:var(--spw-ds-primary);display:inline-block;font-size:16px;font-weight:700;line-height:1.5;margin-bottom:6px;position:relative}.spw-list-item__category spw-icon{left:-28px;position:absolute;top:2px}.spw-list-item__category--hoverable{cursor:pointer}.spw-list-item__category--hoverable:hover{text-decoration:underline}";
 
 const SpwListItem$1 = /*@__PURE__*/ proxyCustomElement(class SpwListItem extends H {
     constructor() {
@@ -18,6 +18,8 @@ const SpwListItem$1 = /*@__PURE__*/ proxyCustomElement(class SpwListItem extends
         this.lineClamp = '3';
         /** Permet de spécifier une icône pour la catégorie */
         this.categoryIcon = 'fa-file-signature';
+        /** Permet de choisir la surface d'arrière-plan de la liste */
+        this.surface = 'light';
     }
     componentWillLoad() {
         this.applyVariantToChildren();
@@ -28,10 +30,12 @@ const SpwListItem$1 = /*@__PURE__*/ proxyCustomElement(class SpwListItem extends
     applyVariantToChildren() {
         requestAnimationFrame(() => {
             const variantClass = `--${this.variant}`;
+            const surfaceClass = `--${this.surface}`;
             const iconClass = `--icon`;
             const titleElement = this.el.querySelector('spw-list-title');
             const descriptionElement = this.el.querySelector('spw-list-description');
             titleElement && titleElement.classList.add(variantClass);
+            titleElement && titleElement.classList.add(surfaceClass);
             titleElement && this.icon && titleElement.setAttribute('icon', this.icon);
             titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);
             descriptionElement && descriptionElement.classList.add(variantClass);
@@ -105,7 +109,7 @@ const SpwListItem$1 = /*@__PURE__*/ proxyCustomElement(class SpwListItem extends
                 href,
                 target,
             };
-        return (h(Host, { key: 'ed073d8a311e7762abe7c9a3e15145e62b809ea1' }, h("li", { key: 'be181668c35e5031470d42c649aa1ed9f30e39c0', class: this.elementClass }, this.category && (h("span", { key: '2733979fa2a147d7bdebd9477dd3300193db0735', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: 'c06e795789a3b70163e51dd5293d7e5cfddbf5b5', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '26ef5faaeea085bdff20e3ebfab7e5a3fb9666e4' }, attrs), h("slot", { key: 'd88cfb2c31de84f68f32655e60029030eee9f2df' })))));
+        return (h(Host, { key: 'cf44e83320eeb1d76cdb2c51113f3187c5cef26b' }, h("li", { key: '2b435c624101d6ec54875058d01bfd490904a653', class: this.elementClass }, this.category && (h("span", { key: '9aee595f1075dbb647644469f09cc9cbfdf9d284', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: 'a685ed3160b5ebb0818fdf950af96ad418fbd23d', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '3a68352ba83fd33cdeba3cd3004cb5bb7a2434cf' }, attrs), h("slot", { key: 'd1d59b9eca0167f30917a757a5154dcdb70ba795' })))));
     }
     get el() { return this; }
     static get style() { return spwListItemCss; }
@@ -117,7 +121,8 @@ const SpwListItem$1 = /*@__PURE__*/ proxyCustomElement(class SpwListItem extends
         "lineClamp": [1, "line-clamp"],
         "category": [1],
         "categoryLink": [1, "category-link"],
-        "categoryIcon": [1, "category-icon"]
+        "categoryIcon": [1, "category-icon"],
+        "surface": [1]
     }, [[0, "slotchange", "slotChanged"], [1, "mouseenter", "onMouseEnter"], [1, "mouseleave", "onMouseLeave"], [1, "touchstart", "onTouchStart"], [1, "touchend", "onTouchEnd"], [1, "mousedown", "onMouseDown"], [1, "mouseup", "onMouseUp"], [0, "blur", "onBlur"], [0, "focus", "onFocus"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/spw-list-item.js.map

@@ -1 +1 @@
-{"file":"spw-list-item.js","mappings":"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","names":["SpwListItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-list/spw-list-item/spw-list-item.scss?tag=spw-list-item&encapsulation=shadow","src/components/spw-list/spw-list-item/spw-list-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.spw-list-item {\n  position: relative;\n  color: var(--spw-color-themes-grey-grey-900);\n  transition: all 0.3s ease-in-out;\n  text-decoration: none;\n  &--hoverable:hover {\n    transform: translateX(5px);\n  }\n  a {\n    text-decoration: none;\n  }\n  &--icon {\n    padding-left: 28px;\n  }\n  &__category {\n    display: inline-block;\n    position: relative;\n    margin-bottom: 6px;\n    color: var(--spw-ds-primary);\n    font-weight: 700;\n    font-size: 16px;\n    line-height: 1.5;\n    spw-icon {\n      position: absolute;\n      top: 2px;\n      left: -28px;\n    }\n    &--hoverable {\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n}\n","import { Component, Host, Element, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-list-item',\n  styleUrl: 'spw-list-item.scss',\n  shadow: true,\n})\nexport class SpwListItem {\n  @Element() el: HTMLSpwListItemElement;\n\n  /** Type de variante d'élément de liste */\n  @Prop() variant?: 'shortcut' | 'default' = 'default';\n  /** Spécifie le lien si nécessaire */\n  @Prop() href?: string;\n  /** Attribut target, s'applique uniquement si href est rempli */\n  @Prop() target: string = '_self';\n  /** Spécifie une icône à côté du titre */\n  @Prop() icon?: string = 'fa-arrow-right';\n  /** Permet de limiter le nombre de lignes du titre et de la description */\n  @Prop() lineClamp: string | 'none' = '3';\n  /** Permet de spécifier une catégorie pour l'élément de liste */\n  @Prop() category?: string;\n  /** Permet de spécifier un lien pour la catégorie */\n  @Prop() categoryLink?: string;\n  /** Permet de spécifier une icône pour la catégorie */\n  @Prop() categoryIcon?: string = 'fa-file-signature';\n\n  componentWillLoad() {\n    this.applyVariantToChildren();\n  }\n\n  @Listen('slotchange')\n  slotChanged() {\n    this.applyVariantToChildren();\n  }\n\n  private applyVariantToChildren() {\n    requestAnimationFrame(() => {\n      const variantClass = `--${this.variant}`;\n      const iconClass = `--icon`;\n      const titleElement = this.el.querySelector('spw-list-title');\n      const descriptionElement = this.el.querySelector('spw-list-description');\n\n      titleElement && titleElement.classList.add(variantClass);\n      titleElement && this.icon && titleElement.setAttribute('icon', this.icon);\n      titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);\n      descriptionElement && descriptionElement.classList.add(variantClass);\n      descriptionElement && this.icon && descriptionElement.classList.add(iconClass);\n      descriptionElement && descriptionElement.setAttribute('line-clamp', this.lineClamp);\n    });\n  }\n\n  @Listen('mouseenter')\n  onMouseEnter() {\n    this.setHovered(true);\n  }\n\n  @Listen('mouseleave')\n  onMouseLeave() {\n    this.setHovered(false);\n    this.setActive(false);\n  }\n\n  @Listen('touchstart', { passive: true })\n  onTouchStart() {\n    this.setActive(true);\n  }\n\n  @Listen('touchend')\n  onTouchEnd() {\n    this.setActive(false);\n  }\n\n  @Listen('mousedown')\n  onMouseDown() {\n    this.setActive(true);\n  }\n\n  @Listen('mouseup')\n  onMouseUp() {\n    this.setActive(false);\n  }\n\n  @Listen('blur')\n  onBlur() {\n    this.setActive(false);\n  }\n\n  @Listen('focus')\n  onFocus() {\n    this.setActive(true);\n  }\n\n  private setHovered(isHovered: boolean) {\n    const titleElement = this.el.querySelector('spw-list-title');\n    if (titleElement && this.href) {\n      titleElement.classList.toggle('--hovered', isHovered);\n    }\n  }\n\n  private setActive(isActive: boolean) {\n    const titleElement = this.el.querySelector('spw-list-title');\n    if (titleElement && this.href) {\n      titleElement.classList.toggle('--active', isActive);\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-list-item': true,\n      'spw-list-item--hoverable': !!this.href,\n      'spw-list-item--icon': !!this.icon || !!this.categoryIcon,\n      [`spw-list-item--${this.variant}`]: true,\n    };\n  }\n\n  private get elementCatClass(): { [className: string]: boolean } {\n    return {\n      'spw-list-item__category': true,\n      'spw-list-item__category--icon': !!this.categoryIcon,\n      'spw-list-item__category--hoverable': !!this.categoryLink,\n    };\n  }\n\n  handleClick() {\n    if (this.categoryLink) {\n      window.location.href = this.categoryLink;\n    }\n  }\n\n  render() {\n    const { href, target } = this;\n    const TagType = this.href === undefined ? 'div' : 'a';\n    const attrs =\n      TagType === 'div'\n        ? {}\n        : {\n            href,\n            target,\n          };\n    return (\n      <Host>\n        <li class={this.elementClass}>\n          {this.category && (\n            <span class={this.elementCatClass} onClick={() => this.handleClick()}>\n              {this.categoryIcon && <spw-icon icon={this.categoryIcon}></spw-icon>} {this.category}\n            </span>\n          )}\n          <TagType {...attrs}>\n            <slot></slot>\n          </TagType>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"spw-list-item.js","mappings":"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","names":["SpwListItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-list/spw-list-item/spw-list-item.scss?tag=spw-list-item&encapsulation=shadow","src/components/spw-list/spw-list-item/spw-list-item.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.spw-list-item {\n  position: relative;\n  color: var(--spw-color-themes-grey-grey-900);\n  transition: all 0.3s ease-in-out;\n  text-decoration: none;\n  :host(.--dark) & {\n    color: var(--spw-ds-white);\n  }\n  &--hoverable:hover {\n    transform: translateX(5px);\n  }\n  a {\n    text-decoration: none;\n  }\n  &--icon {\n    padding-left: 28px;\n  }\n  &__category {\n    display: inline-block;\n    position: relative;\n    margin-bottom: 6px;\n    color: var(--spw-ds-primary);\n    font-weight: 700;\n    font-size: 16px;\n    line-height: 1.5;\n    spw-icon {\n      position: absolute;\n      top: 2px;\n      left: -28px;\n    }\n    &--hoverable {\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n}\n","import { Component, Host, Element, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-list-item',\n  styleUrl: 'spw-list-item.scss',\n  shadow: true,\n})\nexport class SpwListItem {\n  @Element() el: HTMLSpwListItemElement;\n\n  /** Type de variante d'élément de liste */\n  @Prop() variant?: 'shortcut' | 'default' = 'default';\n  /** Spécifie le lien si nécessaire */\n  @Prop() href?: string;\n  /** Attribut target, s'applique uniquement si href est rempli */\n  @Prop() target: string = '_self';\n  /** Spécifie une icône à côté du titre */\n  @Prop() icon?: string = 'fa-arrow-right';\n  /** Permet de limiter le nombre de lignes du titre et de la description */\n  @Prop() lineClamp: string | 'none' = '3';\n  /** Permet de spécifier une catégorie pour l'élément de liste */\n  @Prop() category?: string;\n  /** Permet de spécifier un lien pour la catégorie */\n  @Prop() categoryLink?: string;\n  /** Permet de spécifier une icône pour la catégorie */\n  @Prop() categoryIcon?: string = 'fa-file-signature';\n  /** Permet de choisir la surface d'arrière-plan de la liste */\n  @Prop() surface?: 'light' | 'dark' = 'light';\n\n  componentWillLoad() {\n    this.applyVariantToChildren();\n  }\n\n  @Listen('slotchange')\n  slotChanged() {\n    this.applyVariantToChildren();\n  }\n\n  private applyVariantToChildren() {\n    requestAnimationFrame(() => {\n      const variantClass = `--${this.variant}`;\n      const surfaceClass = `--${this.surface}`;\n      const iconClass = `--icon`;\n      const titleElement = this.el.querySelector('spw-list-title');\n      const descriptionElement = this.el.querySelector('spw-list-description');\n\n      titleElement && titleElement.classList.add(variantClass);\n      titleElement && titleElement.classList.add(surfaceClass);\n      titleElement && this.icon && titleElement.setAttribute('icon', this.icon);\n      titleElement && titleElement.setAttribute('line-clamp', this.lineClamp);\n      descriptionElement && descriptionElement.classList.add(variantClass);\n      descriptionElement && this.icon && descriptionElement.classList.add(iconClass);\n      descriptionElement && descriptionElement.setAttribute('line-clamp', this.lineClamp);\n    });\n  }\n\n  @Listen('mouseenter')\n  onMouseEnter() {\n    this.setHovered(true);\n  }\n\n  @Listen('mouseleave')\n  onMouseLeave() {\n    this.setHovered(false);\n    this.setActive(false);\n  }\n\n  @Listen('touchstart', { passive: true })\n  onTouchStart() {\n    this.setActive(true);\n  }\n\n  @Listen('touchend')\n  onTouchEnd() {\n    this.setActive(false);\n  }\n\n  @Listen('mousedown')\n  onMouseDown() {\n    this.setActive(true);\n  }\n\n  @Listen('mouseup')\n  onMouseUp() {\n    this.setActive(false);\n  }\n\n  @Listen('blur')\n  onBlur() {\n    this.setActive(false);\n  }\n\n  @Listen('focus')\n  onFocus() {\n    this.setActive(true);\n  }\n\n  private setHovered(isHovered: boolean) {\n    const titleElement = this.el.querySelector('spw-list-title');\n    if (titleElement && this.href) {\n      titleElement.classList.toggle('--hovered', isHovered);\n    }\n  }\n\n  private setActive(isActive: boolean) {\n    const titleElement = this.el.querySelector('spw-list-title');\n    if (titleElement && this.href) {\n      titleElement.classList.toggle('--active', isActive);\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-list-item': true,\n      'spw-list-item--hoverable': !!this.href,\n      'spw-list-item--icon': !!this.icon || !!this.categoryIcon,\n      [`spw-list-item--${this.variant}`]: true,\n    };\n  }\n\n  private get elementCatClass(): { [className: string]: boolean } {\n    return {\n      'spw-list-item__category': true,\n      'spw-list-item__category--icon': !!this.categoryIcon,\n      'spw-list-item__category--hoverable': !!this.categoryLink,\n    };\n  }\n\n  handleClick() {\n    if (this.categoryLink) {\n      window.location.href = this.categoryLink;\n    }\n  }\n\n  render() {\n    const { href, target } = this;\n    const TagType = this.href === undefined ? 'div' : 'a';\n    const attrs =\n      TagType === 'div'\n        ? {}\n        : {\n            href,\n            target,\n          };\n    return (\n      <Host>\n        <li class={this.elementClass}>\n          {this.category && (\n            <span class={this.elementCatClass} onClick={() => this.handleClick()}>\n              {this.categoryIcon && <spw-icon icon={this.categoryIcon}></spw-icon>} {this.category}\n            </span>\n          )}\n          <TagType {...attrs}>\n            <slot></slot>\n          </TagType>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-list-title.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { d as defineCustomElement$2 } from './p-_q4w18VU.js';
 
-const spwListTitleCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-ds-typography,[class*=spw-ds-typography-]{font-family:Nunito Sans}.spw-ds-typography-display-1{font-size:56px;font-weight:400;line-height:1.2}@media (min-width:1024px){.spw-ds-typography-display-1{font-size:68px;font-weight:400;line-height:1.1}}.spw-ds-typography-display-2{font-size:40px;font-weight:400;line-height:1.25}@media (min-width:1024px){.spw-ds-typography-display-2{font-size:56px;font-weight:400;line-height:1.2}}.spw-ds-typography-display-3{font-size:32px;font-weight:400;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-display-3{font-size:48px;font-weight:400;line-height:1.2}}.spw-ds-typography-heading-01{font-size:28px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-01{font-size:32px;font-weight:700;line-height:1.25}}.spw-ds-typography-heading-02{font-size:24px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-02{font-size:28px;font-weight:700;line-height:1.3}}.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}}.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}}.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.6}}.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.7}@media (min-width:1024px){.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.6}}.spw-ds-typography-lead-body{font-size:20px!important;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-lead-body{font-size:20px;font-weight:400;line-height:1.5}}.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.25}}.spw-ds-typography-tag{font-size:14px;font-weight:700;line-height:1.2}.spw-ds-typography-label{font-size:16px;font-weight:600;line-height:1.2}.spw-ds-typography-date{font-size:16px;font-weight:300;line-height:1}.spw-ds-typography-caption{font-size:14px;font-style:italic;font-weight:300;line-height:1}.spw-ds-typography-link{border-bottom:1px solid var(--spw-ds-primary);color:var(--spw-ds-primary);font-size:inherit;font-weight:700;line-height:1.2}.spw-ds-typography-link:hover{color:var(--spw-ds-variant)}.spw-ds-typography-link:active{color:var(--spw-ds-active)}.spw-ds-typography-link:active,.spw-ds-typography-link:hover{border-color:currentColor;border-width:2px}.spw-ds-typography-hint{font-size:14px;font-weight:400;line-height:1.5}.spw-ds-typography-code{font-family:monospace;font-size:14px;font-weight:400;line-height:1.2}.spw-ds-typography-overline{font-size:10px;font-weight:800;line-height:1;text-transform:uppercase}.spw-list-title{display:inline-flex;position:relative;transition:all .2s linear}.spw-list-title spw-icon{color:var(--spw-ds-primary);left:-28px;position:absolute;top:4px;transition:all .2s linear}:host(.--active) .spw-list-title spw-icon{color:var(--spw-ds-active)}.spw-list-title__content-text{border-bottom:1px solid transparent;display:inline;transition:all .2s linear}:host(.--hovered) .spw-list-title__content-text{border-color:var(--spw-ds-primary)}:host(.--active) .spw-list-title__content-text{border-color:var(--spw-ds-active)}:host(.--default) .spw-list-title{color:var(--spw-color-themes-grey-grey-900)}:host(.--shortcut) .spw-list-title{color:var(--spw-ds-primary)}:host(.--hovered) .spw-list-title{color:var(--spw-ds-primary)}:host(.--active) .spw-list-title{color:var(--spw-ds-active)}.spw-list-title--has-clamp .spw-list-title__content{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.spw-list-title--clamp-1 .spw-list-title__content{-webkit-line-clamp:1;line-clamp:1}.spw-list-title--clamp-2 .spw-list-title__content{-webkit-line-clamp:2;line-clamp:2}.spw-list-title--clamp-3 .spw-list-title__content{-webkit-line-clamp:3;line-clamp:3}.spw-list-title--clamp-4 .spw-list-title__content{-webkit-line-clamp:4;line-clamp:4}.spw-list-title--clamp-5 .spw-list-title__content{-webkit-line-clamp:5;line-clamp:5}.spw-list-title--clamp-6 .spw-list-title__content{-webkit-line-clamp:6;line-clamp:6}.spw-list-title--clamp-7 .spw-list-title__content{-webkit-line-clamp:7;line-clamp:7}.spw-list-title--clamp-8 .spw-list-title__content{-webkit-line-clamp:8;line-clamp:8}.spw-list-title--clamp-9 .spw-list-title__content{-webkit-line-clamp:9;line-clamp:9}.spw-list-title--clamp-10 .spw-list-title__content{-webkit-line-clamp:10;line-clamp:10}";
+const spwListTitleCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-ds-typography,[class*=spw-ds-typography-]{font-family:Nunito Sans}.spw-ds-typography-display-1{font-size:56px;font-weight:400;line-height:1.2}@media (min-width:1024px){.spw-ds-typography-display-1{font-size:68px;font-weight:400;line-height:1.1}}.spw-ds-typography-display-2{font-size:40px;font-weight:400;line-height:1.25}@media (min-width:1024px){.spw-ds-typography-display-2{font-size:56px;font-weight:400;line-height:1.2}}.spw-ds-typography-display-3{font-size:32px;font-weight:400;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-display-3{font-size:48px;font-weight:400;line-height:1.2}}.spw-ds-typography-heading-01{font-size:28px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-01{font-size:32px;font-weight:700;line-height:1.25}}.spw-ds-typography-heading-02{font-size:24px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-02{font-size:28px;font-weight:700;line-height:1.3}}.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}@media (min-width:1024px){.spw-ds-typography-heading-03{font-size:20px;font-weight:700;line-height:1.4}}.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-04,:host(.--default) .spw-list-title{font-size:18px;font-weight:700;line-height:1.5}}.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-heading-05,:host(.--shortcut) .spw-list-title{font-size:16px;font-weight:700;line-height:1.6}}.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.7}@media (min-width:1024px){.spw-ds-typography-heading-06{font-size:14px;font-weight:700;line-height:1.6}}.spw-ds-typography-lead-body{font-size:20px!important;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-lead-body{font-size:20px;font-weight:400;line-height:1.5}}.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-lead-body-compact{font-size:20px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-1{font-size:18px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-1{font-size:18px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-2{font-size:16px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-2{font-size:16px;font-weight:400;line-height:1.25}}.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.6}@media (min-width:1024px){.spw-ds-typography-body-3{font-size:14px;font-weight:400;line-height:1.5}}.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.5}@media (min-width:1024px){.spw-ds-typography-body-compact-3{font-size:14px;font-weight:400;line-height:1.25}}.spw-ds-typography-tag{font-size:14px;font-weight:700;line-height:1.2}.spw-ds-typography-label{font-size:16px;font-weight:600;line-height:1.2}.spw-ds-typography-date{font-size:16px;font-weight:300;line-height:1}.spw-ds-typography-caption{font-size:14px;font-style:italic;font-weight:300;line-height:1}.spw-ds-typography-link{border-bottom:1px solid var(--spw-ds-primary);color:var(--spw-ds-primary);font-size:inherit;font-weight:700;line-height:1.2}.spw-ds-typography-link:hover{color:var(--spw-ds-variant)}.spw-ds-typography-link:active{color:var(--spw-ds-active)}.spw-ds-typography-link:active,.spw-ds-typography-link:hover{border-color:currentColor;border-width:2px}.spw-ds-typography-hint{font-size:14px;font-weight:400;line-height:1.5}.spw-ds-typography-code{font-family:monospace;font-size:14px;font-weight:400;line-height:1.2}.spw-ds-typography-overline{font-size:10px;font-weight:800;line-height:1;text-transform:uppercase}.spw-list-title{display:inline-flex;position:relative;transition:all .2s linear}.spw-list-title spw-icon{color:var(--spw-ds-primary);left:-28px;position:absolute;top:4px;transition:all .2s linear}:host(.--active) .spw-list-title spw-icon{color:var(--spw-ds-active)}:host(.--dark) .spw-list-title spw-icon{color:var(--spw-ds-white)}.spw-list-title__content-text{border-bottom:1px solid transparent;display:inline;transition:all .2s linear}:host(.--hovered) .spw-list-title__content-text{border-color:var(--spw-ds-primary)}:host(.--active) .spw-list-title__content-text{border-color:var(--spw-ds-active)}:host(.--default) .spw-list-title{color:var(--spw-color-themes-grey-grey-900)}:host(.--shortcut) .spw-list-title{color:var(--spw-ds-primary)}:host(.--hovered) .spw-list-title{color:var(--spw-ds-primary)}:host(.--active) .spw-list-title{color:var(--spw-ds-active)}:host(.--dark) .spw-list-title{color:var(--spw-ds-white)}.spw-list-title--has-clamp .spw-list-title__content{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.spw-list-title--clamp-1 .spw-list-title__content{-webkit-line-clamp:1;line-clamp:1}.spw-list-title--clamp-2 .spw-list-title__content{-webkit-line-clamp:2;line-clamp:2}.spw-list-title--clamp-3 .spw-list-title__content{-webkit-line-clamp:3;line-clamp:3}.spw-list-title--clamp-4 .spw-list-title__content{-webkit-line-clamp:4;line-clamp:4}.spw-list-title--clamp-5 .spw-list-title__content{-webkit-line-clamp:5;line-clamp:5}.spw-list-title--clamp-6 .spw-list-title__content{-webkit-line-clamp:6;line-clamp:6}.spw-list-title--clamp-7 .spw-list-title__content{-webkit-line-clamp:7;line-clamp:7}.spw-list-title--clamp-8 .spw-list-title__content{-webkit-line-clamp:8;line-clamp:8}.spw-list-title--clamp-9 .spw-list-title__content{-webkit-line-clamp:9;line-clamp:9}.spw-list-title--clamp-10 .spw-list-title__content{-webkit-line-clamp:10;line-clamp:10}";
 
 const SpwListTitle$1 = /*@__PURE__*/ proxyCustomElement(class SpwListTitle extends H {
     constructor() {
@@ -19,7 +19,7 @@ const SpwListTitle$1 = /*@__PURE__*/ proxyCustomElement(class SpwListTitle exten
         };
     }
     render() {
-        return (h(Host, { key: '27a216b5f2528a19a2d6ea1005da441945f60b3c' }, h("div", { key: 'd3563c6655136e698231eb9b592c13d60eb9ea47', class: this.elementClass }, this.icon && h("spw-icon", { key: 'bbe74eb639a3646587cf2a35bb103901a5ede59f', icon: this.icon }), h("div", { key: 'e6f8ac9c569ca843a082caf65cecb97ae5830614', class: "spw-list-title__content" }, h("div", { key: '0b12989d788bedc8393248c612f20e9bdf67bf05', class: "spw-list-title__content-text" }, h("slot", { key: '2c53dc6eaa074cd48e5f2bffe11a0390b077c2a4' }))))));
+        return (h(Host, { key: 'c9c3901f829d7b5f2a3177ca556c018406d6ea73' }, h("div", { key: 'cf79b9d13b1924112e722313bf6047e8dd38a928', class: this.elementClass }, this.icon && h("spw-icon", { key: '8c7c3e1aebad500d2cc9f61397f9aaecce10813a', icon: this.icon }), h("div", { key: 'b4ebd2d41241bf1c3d12e0585967dd49b3b1e16a', class: "spw-list-title__content" }, h("div", { key: '8fa9a3410f155dd978758b25d8265fd2116b5dee', class: "spw-list-title__content-text" }, h("slot", { key: '23e919d7c182a801221cd3bc856e4443b4601795' }))))));
     }
     static get style() { return spwListTitleCss; }
 }, [1, "spw-list-title", {

package/dist/components/spw-list-title.js.map

@@ -1 +1 @@
-{"file":"spw-list-title.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,g9QAAg9Q;;MCO39QA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;AAMvB,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;QAC9C,OAAO;AACL,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,yBAAA,CAA2B,GAAG,YAAY;AAC3C,YAAA,CAAC,sBAAsB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;AACrC,YAAA,CAAC,yBAAyB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAClD;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwListTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-list/spw-list-title/spw-list-title.scss?tag=spw-list-title&encapsulation=shadow","src/components/spw-list/spw-list-title/spw-list-title.tsx"],"sourcesContent":["@import '../../../scss/utils/foundations/typography';\n\n:host {\n  display: block;\n}\n\n.spw-list-title {\n  position: relative;\n  transition: all 0.2s linear;\n  display: inline-flex;\n  spw-icon {\n    transition: all 0.2s linear;\n    position: absolute;\n    top: 4px;\n    left: -28px;\n    color: var(--spw-ds-primary);\n    :host(.--active) & {\n      color: var(--spw-ds-active);\n    }\n  }\n  &__content-text {\n    display: inline;\n    border-bottom: 1px solid transparent;\n    transition: all 0.2s linear;\n    :host(.--hovered) & {\n      border-color: var(--spw-ds-primary);\n    }\n    :host(.--active) & {\n      border-color: var(--spw-ds-active);\n    }\n  }\n  :host(.--default) & {\n    @extend .spw-ds-typography-heading-04;\n    color: var(--spw-color-themes-grey-grey-900);\n  }\n  :host(.--shortcut) & {\n    @extend .spw-ds-typography-heading-05;\n    color: var(--spw-ds-primary);\n  }\n  :host(.--hovered) & {\n    color: var(--spw-ds-primary);\n  }\n  :host(.--active) & {\n    color: var(--spw-ds-active);\n  }\n  &--has-clamp {\n    .spw-list-title__content {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      text-overflow: ellipsis;\n    }\n  }\n  @for $i from 1 through 10 {\n    &--clamp-#{$i} {\n      .spw-list-title__content {\n        -webkit-line-clamp: $i;\n        line-clamp: $i;\n      }\n    }\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-list-title',\n  styleUrl: 'spw-list-title.scss',\n  shadow: true,\n})\nexport class SpwListTitle {\n  /** Spécifie une icône à côté du titre */\n  @Prop() icon?: string;\n  /** Spécifie un nombre de ligne maximum à afficher */\n  @Prop() lineClamp?: string;\n\n  private get elementClass(): { [className: string]: boolean } {\n    const hasLineClamp = this.lineClamp !== 'none';\n    return {\n      'spw-list-title': true,\n      [`spw-list-title--has-clamp`]: hasLineClamp,\n      [`spw-list-title--icon`]: !!this.icon,\n      [`spw-list-title--clamp-${this.lineClamp}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.icon && <spw-icon icon={this.icon}></spw-icon>}\n          <div class=\"spw-list-title__content\">\n            <div class=\"spw-list-title__content-text\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"spw-list-title.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,2kRAA2kR;;MCOtlRA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;AAMvB,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;QAC9C,OAAO;AACL,YAAA,gBAAgB,EAAE,IAAI;YACtB,CAAC,CAAA,yBAAA,CAA2B,GAAG,YAAY;AAC3C,YAAA,CAAC,sBAAsB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;AACrC,YAAA,CAAC,yBAAyB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAClD;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAa,CAAA,EACpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwListTitle","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-list/spw-list-title/spw-list-title.scss?tag=spw-list-title&encapsulation=shadow","src/components/spw-list/spw-list-title/spw-list-title.tsx"],"sourcesContent":["@import '../../../scss/utils/foundations/typography';\n\n:host {\n  display: block;\n}\n\n.spw-list-title {\n  position: relative;\n  transition: all 0.2s linear;\n  display: inline-flex;\n  spw-icon {\n    transition: all 0.2s linear;\n    position: absolute;\n    top: 4px;\n    left: -28px;\n    color: var(--spw-ds-primary);\n    :host(.--active) & {\n      color: var(--spw-ds-active);\n    }\n    :host(.--dark) & {\n      color: var(--spw-ds-white);\n    }\n  }\n  &__content-text {\n    display: inline;\n    border-bottom: 1px solid transparent;\n    transition: all 0.2s linear;\n    :host(.--hovered) & {\n      border-color: var(--spw-ds-primary);\n    }\n    :host(.--active) & {\n      border-color: var(--spw-ds-active);\n    }\n  }\n  :host(.--default) & {\n    @extend .spw-ds-typography-heading-04;\n    color: var(--spw-color-themes-grey-grey-900);\n  }\n  :host(.--shortcut) & {\n    @extend .spw-ds-typography-heading-05;\n    color: var(--spw-ds-primary);\n  }\n  :host(.--hovered) & {\n    color: var(--spw-ds-primary);\n  }\n  :host(.--active) & {\n    color: var(--spw-ds-active);\n  }\n  :host(.--dark) & {\n    color: var(--spw-ds-white);\n  }\n  &--has-clamp {\n    .spw-list-title__content {\n      overflow: hidden;\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      text-overflow: ellipsis;\n    }\n  }\n  @for $i from 1 through 10 {\n    &--clamp-#{$i} {\n      .spw-list-title__content {\n        -webkit-line-clamp: $i;\n        line-clamp: $i;\n      }\n    }\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-list-title',\n  styleUrl: 'spw-list-title.scss',\n  shadow: true,\n})\nexport class SpwListTitle {\n  /** Spécifie une icône à côté du titre */\n  @Prop() icon?: string;\n  /** Spécifie un nombre de ligne maximum à afficher */\n  @Prop() lineClamp?: string;\n\n  private get elementClass(): { [className: string]: boolean } {\n    const hasLineClamp = this.lineClamp !== 'none';\n    return {\n      'spw-list-title': true,\n      [`spw-list-title--has-clamp`]: hasLineClamp,\n      [`spw-list-title--icon`]: !!this.icon,\n      [`spw-list-title--clamp-${this.lineClamp}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          {this.icon && <spw-icon icon={this.icon}></spw-icon>}\n          <div class=\"spw-list-title__content\">\n            <div class=\"spw-list-title__content-text\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-list.js

@@ -9,6 +9,24 @@ const SpwList$1 = /*@__PURE__*/ proxyCustomElement(class SpwList extends H {
         this.__attachShadow();
         /** Spécifie l'écart entre les éléments de liste */
         this.gap = 'medium';
+        /** Permet de choisir la surface d'arrière-plan de la liste */
+        this.surface = 'light';
+    }
+    componentWillLoad() {
+        this.applyVariantToChildren();
+    }
+    slotChanged() {
+        this.applyVariantToChildren();
+    }
+    applyVariantToChildren() {
+        requestAnimationFrame(() => {
+            const variantClass = `--${this.surface}`;
+            const contentElements = this.el.querySelectorAll('spw-list-item');
+            contentElements.forEach(contentElement => {
+                contentElement.classList.add(variantClass);
+                contentElement.setAttribute('surface', this.surface);
+            });
+        });
     }
     get elementClass() {
         return {
@@ -17,12 +35,14 @@ const SpwList$1 = /*@__PURE__*/ proxyCustomElement(class SpwList extends H {
         };
     }
     render() {
-        return (h(Host, { key: '7474a92f800b0e42ee4f7ae928602fab40678129' }, h("ul", { key: 'bb478eb83d2b3533c70f74a6c4054bd5c8985883', class: this.elementClass }, h("slot", { key: 'ec64155dd2191f5f751611729b814e4228c19ec3' }))));
+        return (h(Host, { key: 'b4148947174922198db9c5d900e0bd3e12dc3463' }, h("ul", { key: '100ab0ec463be6a6c94aa5853c6b4cadc95f8f55', class: this.elementClass }, h("slot", { key: 'b0a7ee73af4a21f35aa90b0eb77522b0d9679e27' }))));
     }
+    get el() { return this; }
     static get style() { return spwListCss; }
 }, [1, "spw-list", {
-        "gap": [1]
-    }]);
+        "gap": [1],
+        "surface": [1]
+    }, [[0, "slotchange", "slotChanged"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/spw-list.js.map

@@ -1 +1 @@
-{"file":"spw-list.js","mappings":";;AAAA,MAAM,UAAU,GAAG,wsFAAwsF;;MCO9sFA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAG,CAAA,GAAA,GAAkC,QAAQ;AAkBtD;AAhBC,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,GAAG,CAAE,CAAA,GAAG,IAAI;SAChC;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACV,CACA;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwList","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-list/spw-list.scss?tag=spw-list&encapsulation=shadow","src/components/spw-list/spw-list.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-list {\n  display: flex;\n  flex-direction: column;\n  &--small {\n    gap: 12px;\n  }\n  &--medium {\n    gap: 24px;\n  }\n  &--large {\n    gap: 32px;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-list',\n  styleUrl: 'spw-list.scss',\n  shadow: true,\n})\nexport class SpwList {\n  /** Spécifie l'écart entre les éléments de liste */\n  @Prop() gap?: 'small' | 'medium' | 'large' = 'medium';\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-list': true,\n      [`spw-list--${this.gap}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <ul class={this.elementClass}>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"spw-list.js","mappings":";;AAAA,MAAM,UAAU,GAAG,wsFAAwsF;;MCO9sFA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;;AAQU,QAAA,IAAG,CAAA,GAAA,GAAkC,QAAQ;;AAE7C,QAAA,IAAO,CAAA,OAAA,GAAsB,OAAO;AAuC7C;IArCC,iBAAiB,GAAA;QACf,IAAI,CAAC,sBAAsB,EAAE;;IAI/B,WAAW,GAAA;QACT,IAAI,CAAC,sBAAsB,EAAE;;IAGvB,sBAAsB,GAAA;QAC5B,qBAAqB,CAAC,MAAK;AACzB,YAAA,MAAM,YAAY,GAAG,CAAA,EAAA,EAAK,IAAI,CAAC,OAAO,EAAE;YACxC,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,CAAC;AAEjE,YAAA,eAAe,CAAC,OAAO,CAAC,cAAc,IAAG;AACvC,gBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;gBAC1C,cAAc,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC;AACtD,aAAC,CAAC;AACJ,SAAC,CAAC;;AAGJ,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,GAAG,CAAE,CAAA,GAAG,IAAI;SAChC;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACV,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwList","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-list/spw-list.scss?tag=spw-list&encapsulation=shadow","src/components/spw-list/spw-list.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-list {\n  display: flex;\n  flex-direction: column;\n  &--small {\n    gap: 12px;\n  }\n  &--medium {\n    gap: 24px;\n  }\n  &--large {\n    gap: 32px;\n  }\n}\n","import { Component, Prop, Element, Listen, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-list',\n  styleUrl: 'spw-list.scss',\n  shadow: true,\n})\nexport class SpwList {\n  @Element() el: HTMLSpwListElement;\n  /** Spécifie l'écart entre les éléments de liste */\n  @Prop() gap?: 'small' | 'medium' | 'large' = 'medium';\n  /** Permet de choisir la surface d'arrière-plan de la liste */\n  @Prop() surface?: 'light' | 'dark' = 'light';\n\n  componentWillLoad() {\n    this.applyVariantToChildren();\n  }\n\n  @Listen('slotchange')\n  slotChanged() {\n    this.applyVariantToChildren();\n  }\n\n  private applyVariantToChildren() {\n    requestAnimationFrame(() => {\n      const variantClass = `--${this.surface}`;\n      const contentElements = this.el.querySelectorAll('spw-list-item');\n\n      contentElements.forEach(contentElement => {\n        contentElement.classList.add(variantClass);\n        contentElement.setAttribute('surface', this.surface);\n      });\n    });\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-list': true,\n      [`spw-list--${this.gap}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <ul class={this.elementClass}>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-loading.js

@@ -1,4 +1,4 @@
-import { S as SpwLoading$1, d as defineCustomElement$1 } from './p-8jCY8rtJ.js';
+import { S as SpwLoading$1, d as defineCustomElement$1 } from './p-fNRoK67L.js';
 
 const SpwLoading = SpwLoading$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/spw-message.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { d as defineCustomElement$3 } from './p-_q4w18VU.js';
-import { d as defineCustomElement$2 } from './p-BsulPKjc.js';
+import { d as defineCustomElement$2 } from './p-GUYao_6w.js';
 
 const getIcon = variant => {
   const icons = {

package/dist/components/spw-modal.js

@@ -137,7 +137,7 @@ const KEYFRAMES = {
     ],
 };
 
-const spwModalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-modal{align-items:center;display:none;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:1060}.spw-modal--opened{display:flex}.spw-modal__overlay{background:#000;height:100%;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:0}.spw-modal__content-container{align-items:stretch;background-color:#fff;border-radius:var(--spw-spacings-border-radius-lg);box-shadow:var(--spw-effect-elevation-6);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;position:absolute;width:90%}.spw-modal__content-container--small{max-width:480px}.spw-modal__content-container--medium{max-width:600px}.spw-modal__content-container--large{max-width:768px}.spw-modal__content-container--fluid{max-width:100%}.spw-modal__content{border:1px solid var(--spw-color-themes-grey-grey-300);display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;width:100%}.spw-modal--sticky-buttons .spw-modal__content{overflow-y:visible}.spw-modal__icon-container{align-items:center;align-self:stretch;background-color:#fff;display:flex;justify-content:center;width:32px}.spw-modal__header{align-items:center;border-radius:1px 1px 0 0;box-sizing:border-box;color:var(--spw-colors-support-grey-grey-900);display:flex;justify-content:space-between;margin-bottom:12px;margin-top:6px;padding:24px 24px 0}.spw-modal__caption{word-wrap:break-word;overflow:hidden;white-space:pre-wrap}.spw-modal__header h2{color:var(--spw-colors-support-grey-grey-900);font-size:18px;margin:0}.spw-modal__header button{background:none;border:none;cursor:pointer;font-size:1.5em;padding:0}.spw-modal__close-button{cursor:pointer;font-size:21px;position:absolute;right:12px;top:12px}.spw-modal__close-button:hover{opacity:.7}.spw-modal__body{box-sizing:border-box;color:var(--spw-colors-support-grey-grey-700);flex:1;font-size:16px;margin-bottom:12px;padding:0 24px}.spw-modal--sticky-buttons .spw-modal__body{overflow-y:auto}.spw-modal__buttons ::slotted([slot=buttons]){padding:12px 24px 24px}.spw-modal__footer--buttons-present ::slotted(*){display:flex;gap:12px;justify-content:flex-end;padding:8px 24px 24px}.spw-modal__content-container--small .spw-modal__footer--buttons-present ::slotted(*){flex-direction:column;gap:8px}.spw-modal__content-container--medium .spw-modal__footer--buttons-present ::slotted(*){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spw-modal__border{align-items:center;display:flex;flex-grow:1;font-size:1.5em;justify-content:center;width:100%}";
+const spwModalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:contents;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-modal{align-items:center;display:none;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:1060}.spw-modal--opened{display:flex}.spw-modal__overlay{background:#000;height:100%;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:0}.spw-modal__content-container{align-items:stretch;background-color:#fff;border-radius:var(--spw-spacings-border-radius-lg);box-shadow:var(--spw-effect-elevation-6);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;position:absolute;width:90%}.spw-modal__content-container--small{max-width:480px}.spw-modal__content-container--medium{max-width:600px}.spw-modal__content-container--large{max-width:768px}.spw-modal__content-container--fluid{max-width:100%}.spw-modal__content{border:1px solid var(--spw-color-themes-grey-grey-300);display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;width:100%}.spw-modal--sticky-buttons .spw-modal__content{overflow-y:visible}.spw-modal__icon-container{align-items:center;align-self:stretch;background-color:#fff;display:flex;justify-content:center;width:32px}.spw-modal__header{align-items:center;border-radius:1px 1px 0 0;box-sizing:border-box;color:var(--spw-colors-support-grey-grey-900);display:flex;justify-content:space-between;margin-bottom:12px;margin-top:6px;padding:24px 24px 0}.spw-modal__caption{word-wrap:break-word;overflow:hidden;white-space:pre-wrap}.spw-modal__header h2{color:var(--spw-colors-support-grey-grey-900);font-size:18px;margin:0}.spw-modal__header button{background:none;border:none;cursor:pointer;font-size:1.5em;padding:0}.spw-modal__close-button{cursor:pointer;font-size:21px;position:absolute;right:12px;top:12px}.spw-modal__close-button:hover{opacity:.7}.spw-modal__body{box-sizing:border-box;color:var(--spw-colors-support-grey-grey-700);flex:1;font-size:16px;margin-bottom:12px;padding:0 24px}.spw-modal--sticky-buttons .spw-modal__body{overflow-y:auto}.spw-modal__buttons{padding-top:12px}.spw-modal__buttons ::slotted([slot=buttons]){padding:0 24px 24px}.spw-modal__footer--buttons-present ::slotted(*){display:flex;gap:12px;justify-content:flex-end;padding:8px 24px 24px}.spw-modal__content-container--small .spw-modal__footer--buttons-present ::slotted(*){flex-direction:column;gap:8px}.spw-modal__content-container--medium .spw-modal__footer--buttons-present ::slotted(*){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spw-modal__border{align-items:center;display:flex;flex-grow:1;font-size:1.5em;justify-content:center;width:100%}";
 
 const SpwModal$1 = /*@__PURE__*/ proxyCustomElement(class SpwModal extends H {
     constructor() {
@@ -257,6 +257,7 @@ const SpwModal$1 = /*@__PURE__*/ proxyCustomElement(class SpwModal extends H {
         }
     }
     close() {
+        this.stopAllVideos();
         try {
             const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
                 duration: 200,
@@ -271,6 +272,12 @@ const SpwModal$1 = /*@__PURE__*/ proxyCustomElement(class SpwModal extends H {
             this.spwModalClose.emit();
         }
     }
+    stopAllVideos() {
+        const iframes = this.hostElement.querySelectorAll('iframe');
+        iframes.forEach(iframe => {
+            iframe.src = iframe.src;
+        });
+    }
     doBeforeClose(trigger) {
         const triggers = [];
         triggers.push(trigger);
@@ -295,7 +302,7 @@ const SpwModal$1 = /*@__PURE__*/ proxyCustomElement(class SpwModal extends H {
         };
     }
     render() {
-        return (h(Host, { key: 'ef3f979574368eb716f783a10b0df51de505844d' }, h("div", { key: 'd3de3986ed767588fbbc33771f5a2ec96950c814', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: 'e838b0d47874973d88bd325cadafcbccecd62e71', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '959a56f373b62d3905ca072f842270d50f7974e9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '5a4e4d7e92007969e2bdfbccb8a30901448edaa4', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: 'ff3c6bd78a3aa647a5fc10b007219bfa0a406fbc', class: "spw-modal__content" }, h("div", { key: '78448d8952820d8d1b32c8633642daca6e6eaa61', class: "spw-modal__header" }, h("h2", { key: '64cd4b7a37899ff59b94cdfaeb24841c185ff68d', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '6ccf7739a69cc24dd7d05ee73851bdc9391e63d0', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '588bb35bb2dc1cdff8d85911851fa3acbd2e36c4', class: "spw-modal__body" }, h("slot", { key: 'b9e689f2f08aa6456eaeb4481ac09bf7841ded24', name: "content" })), h("div", { key: '7d66d94b7de6b109d9897d44329c897822f70179', class: "spw-modal__buttons" }, h("slot", { key: '052f64558204a71b45cf367026c5213939645ba4', name: "buttons" })))), h("div", { key: '65632a2bcb8d66ab99f45a20e159caaf44a3cec7', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '48c698e01ba5d0545c04246eaddbde29a9cae6b9' }, h("div", { key: 'a82e49fb97ee9d19dd1fc4fcde824e408cbdef09', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '35eb6c15f52d877cf0089904238651f39d66c964', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'cff9c1866bfba1349853f075868ae1cddb8f4a03', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '44c011464dbea7f7e41c33d36c703689f0953dff', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '2b8c969ed7a5d0ff31b1993ba3cf6582dcfd3a4a', class: "spw-modal__content" }, h("div", { key: '9a8857bfae65ab5faa7df24591090a073e7b8a7f', class: "spw-modal__header" }, h("h2", { key: 'adb8a929be3706f248767beac148efd1c5ab02ba', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '0a295da24d9deec49c7cb6dca7c9b02478aaedf8', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '81a2f2838737c49291eea6c571db70d2c5858141', class: "spw-modal__body" }, h("slot", { key: '2641d4d98bb5e4b3a2bd0b4fcff1587a7e071337', name: "content" })), h("div", { key: '640ae662d1b7e4a9d3fac0abe71a6e548d80a298', class: "spw-modal__buttons" }, h("slot", { key: '1cc48d97165b66e05dc2cce809ac9b66f9893a64', name: "buttons" })))), h("div", { key: 'c6bf055784ae5808d82b0fea5fac6e34ca9d9eca', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {