wcs-core 7.6.0 → 7.7.0

package/dist/collection/components/icon/icon.js

@@ -23,7 +23,7 @@ export class Icon {
                 [`icons-size-${this.size}`]: true
             }
         };
-        return (h("i", Object.assign({ key: '21e345e63fdb54bd03dac7b4574cdc6bddedfaa9' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
+        return (h("i", Object.assign({ key: 'd12fcb5beb00093de33123442fb94c33dbab957a' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
     }
     static get is() { return "wcs-icon"; }
     static get properties() {

package/dist/collection/components/input/input.js

@@ -167,7 +167,7 @@ export class Input {
     }
     render() {
         const value = this.getValueAsString();
-        return (h(Host, { key: 'd3123d1eb17f9fe38d6081ec94b15e027f706506', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ key: 'b799b4443242f73609e337b33fc5794775aa7e1c', class: "native-input", ref: input => this.nativeInput = input, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), this.type === "password" ? (h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
+        return (h(Host, { key: '27fd1df5da31b16cd286e8d3ec53f67408c99a6b', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ key: '9731bd23ee6bdfe5f61f449a2f050d6bf3332b83', class: "native-input", ref: input => this.nativeInput = input, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), this.type === "password" ? (h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
     }
     static get is() { return "wcs-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -28,7 +28,7 @@ export class Label {
         setOrRemoveAttribute(this.nativeLabel, attr, value);
     }
     render() {
-        return (h(Host, { key: 'bd18c1a58190a8a8ada92b47f3b77e58c89c3169', slot: "label" }, h("label", Object.assign({ key: '7fc3b63d96cf88eb8b31abd2b0055feebe02f696', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: 'b997f691e437b758f3ebe0f0899605430b10388a' }), this.required && h("span", { key: '529194ed383d724c570a9bca56ee23dc9b9f0fce', "aria-hidden": "true", class: "required-marker" }, "*"))));
+        return (h(Host, { key: 'd5fff8ed9237d97dee4683e4994084bec2f72503', slot: "label" }, h("label", Object.assign({ key: '418f9021685cb0f942f6e44557ad237be1a3019e', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: '9cde60902ca12c8b0301f247c22bbd8581f988a3' }), this.required && h("span", { key: 'b12767c7901b18e24fcf422ba0ed1ef43df21641', "aria-hidden": "true", class: "required-marker" }, "*"))));
     }
     static get is() { return "wcs-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class ListItem {
         this.activated = false;
     }
     render() {
-        return (h(Host, { key: '1137c9770d8b50d24e8bb3187e586aca7a1ee3b9' }, h("slot", { key: '0c44655427e84534f1d6932ac3458d828cd31159', name: "icon" }), h("div", { key: '369bbe90f5d5c7a332732c3ba819b5959d09a25b', class: "content" }, h("div", { key: 'cd9c45f16a2455d1fe227d7d1e7e077d0327617d', class: "header" }, h("div", { key: 'c51172bf63657b2dde77836600ba3940ddde092b' }, h("slot", { key: '32452ee6fe06aa7d1652c5246c42afa3a2a66fbf', name: "title" }), h("slot", { key: '0bc5cf05d0fae6688ebb842bdeff3d88aa8682d8', name: "properties" })), h("slot", { key: '57ad3703881078ebd491166d874bd9593f6a405f', name: "actions" })), h("slot", { key: '70f35aa3d2034a8fb04c934d2659997a8b4c268b', name: "description" }))));
+        return (h(Host, { key: 'f835a0a24bfdfeadeb60a29b73f589caf66abd19' }, h("slot", { key: 'dc932c86fef704e6c799b69b9a93b97b9e6c0cc3', name: "icon" }), h("div", { key: '93c6cfef8e8488e63f9306bb786eaf262b7a8587', class: "content" }, h("div", { key: '6181d61f98684a6df0c4d262264a001c32555e81', class: "header" }, h("div", { key: 'ce07788c1aaf9718cf318629f0b9ab06d919a33d' }, h("slot", { key: '6eda723480b519381d0f9ad4eebfca78b5f1a1a6', name: "title" }), h("slot", { key: '3d484c4b521d2bf1315e85be71911d27f13be239', name: "properties" })), h("slot", { key: 'f20cdf8cc69b3a7c773e0f0d7013dd1affc5b962', name: "actions" })), h("slot", { key: 'f17ffd62de7ed2c2ded7c75608ce574cdd839ff3', name: "description" }))));
     }
     static get is() { return "wcs-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-item-properties/list-item-properties.js

@@ -11,7 +11,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ListItemProperties {
     render() {
-        return (h(Host, { key: '168f5a846e64177a50b350cb90bee3b15a7eb871', slot: "properties" }, h("slot", { key: 'f5f3a8caa0da9384d409340f51f41c11971a0904', name: "property" })));
+        return (h(Host, { key: 'ca54e312f895a733d37d8ecb5fad5323dc0aa1a7', slot: "properties" }, h("slot", { key: '6cbe494d80b81d9a7b48ea0f9c732fa09b77c83c', name: "property" })));
     }
     static get is() { return "wcs-list-item-properties"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-item-property/list-item-property.js

@@ -10,7 +10,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ListItemProperty {
     render() {
-        return (h(Host, { key: '036366a768b3e90eb028cbdf18d006a595282420', slot: "property" }, h("slot", { key: 'f5ad277671ba35e014635562b97a279813e5bb0c' })));
+        return (h(Host, { key: 'b992043f1f4f7642184a693e24b5f225b93f09db', slot: "property" }, h("slot", { key: 'ceae8528fabf14dba44e2c58adca814868859cd8' })));
     }
     static get is() { return "wcs-list-item-property"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mat-icon/mat-icon.css

@@ -2,21 +2,25 @@
  * class used
  */
 :host {
+  --wcs-mat-icon-font-size-s: 18px;
+  --wcs-mat-icon-font-size-m: 24px;
+  --wcs-mat-icon-font-size-l: 36px;
+  --wcs-mat-icon-font-size-xl: 48px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 :host .size-s {
-  font-size: 18px !important;
+  font-size: var(--wcs-mat-icon-font-size-s) !important;
 }
 :host .size-m {
-  font-size: 24px !important;
+  font-size: var(--wcs-mat-icon-font-size-m) !important;
 }
 :host .size-l {
-  font-size: 36px !important;
+  font-size: var(--wcs-mat-icon-font-size-l) !important;
 }
 :host .size-xl {
-  font-size: 48px !important;
+  font-size: var(--wcs-mat-icon-font-size-xl) !important;
 }
 :host .material-icons {
   font-family: "Material Icons";

package/dist/collection/components/mat-icon/mat-icon.js

@@ -10,6 +10,11 @@ const ICON_FAMILY_CLASS_NAME = {
 const MAT_ICON_INHERITED_ATTRS = ['title'];
 /**
  * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
+ *
+ * @cssprop --wcs-mat-icon-font-size-s - font size for a size s icon
+ * @cssprop --wcs-mat-icon-font-size-m - font size for a size m icon
+ * @cssprop --wcs-mat-icon-font-size-l - font size for a size l icon
+ * @cssprop --wcs-mat-icon-font-size-xl - font size for a size xl icon
  */
 export class MatIcon {
     constructor() {
@@ -25,7 +30,7 @@ export class MatIcon {
         setOrRemoveAttribute(this.nativeIcon, attr, value);
     }
     render() {
-        return (h(Host, { key: 'dec260ca9c57892e17402365e179a17a0e085b18' }, h("i", Object.assign({ key: 'f9e8fb980b2a99bff272b08c629347f6c1b28d49', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
+        return (h(Host, { key: '5b8dfa39a9c80b2526a936a7fde2cfa500b78707' }, h("i", Object.assign({ key: 'e70d3e0e6e4e83316fa64fd5bb5f522b65a51144', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
     }
     static get is() { return "wcs-mat-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mat-icon/mat-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"mat-icon.js","sourceRoot":"","sources":["../../../src/components/mat-icon/mat-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGrG,MAAM,sBAAsB,GAAuC;IAC/D,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE,yBAAyB;IACnC,OAAO,EAAE,yBAAyB;IAClC,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,sBAAsB;CAChC,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,OAAO,CAAC,CAAC;AAE3C;;GAEG;AAMH,MAAM,OAAO,OAAO;;QAGR,wBAAmB,GAAyB,EAAE,CAAC;;oBAStB,GAAG;sBAIC,QAAQ;;IAE7C,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,uFAAe,MAAM,EAClB,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,EACjE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,IAC/B,IAAI,CAAC,mBAAmB,GAC1B,IAAI,CAAC,IAAI,CACV,CACD,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\nconst MAT_ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.\n */\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\"\n                   class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}\n                   ref={(el) => (this.nativeIcon = el)}\n                   {...this.inheritedAttributes}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"mat-icon.js","sourceRoot":"","sources":["../../../src/components/mat-icon/mat-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGrG,MAAM,sBAAsB,GAAuC;IAC/D,MAAM,EAAE,gBAAgB;IACxB,QAAQ,EAAE,yBAAyB;IACnC,OAAO,EAAE,yBAAyB;IAClC,OAAO,EAAE,sBAAsB;IAC/B,KAAK,EAAE,sBAAsB;CAChC,CAAA;AAED,MAAM,wBAAwB,GAAG,CAAC,OAAO,CAAC,CAAC;AAE3C;;;;;;;GAOG;AAMH,MAAM,OAAO,OAAO;;QAGR,wBAAmB,GAAyB,EAAE,CAAC;;oBAStB,GAAG;sBAIC,QAAQ;;IAE7C,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,wBAAwB,CAAC,CAC1D,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACvD,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,uFAAe,MAAM,EAClB,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,EACjE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,IAC/B,IAAI,CAAC,mBAAmB,GAC1B,IAAI,CAAC,IAAI,CACV,CACD,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst ICON_FAMILY_CLASS_NAME: Record<MaterialIconFamily, string> = {\n    filled: 'material-icons',\n    outlined: 'material-icons-outlined',\n    twotone: 'material-icons-two-tone',\n    rounded: 'material-icons-round',\n    sharp: 'material-icons-sharp'\n}\n\nconst MAT_ICON_INHERITED_ATTRS = ['title'];\n\n/**\n * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.\n * \n * @cssprop --wcs-mat-icon-font-size-s - font size for a size s icon\n * @cssprop --wcs-mat-icon-font-size-m - font size for a size m icon\n * @cssprop --wcs-mat-icon-font-size-l - font size for a size l icon\n * @cssprop --wcs-mat-icon-font-size-xl - font size for a size xl icon\n */\n@Component({\n    tag: 'wcs-mat-icon',\n    styleUrl: 'mat-icon.scss',\n    shadow: true\n})\nexport class MatIcon implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeIcon!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Use the icon name from Material Icons\n     */\n    @Prop() icon: string;\n    /**\n     * Size of the icon\n     */\n    @Prop() size: MaterialIconSize = 'm';\n    /**\n     * Family of the icon\n     */\n    @Prop() family: MaterialIconFamily = 'filled';\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MAT_ICON_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeIcon, attr, value);\n    }\n\n    render() {\n        return (\n            <Host>\n                <i aria-hidden=\"true\"\n                   class={ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size}\n                   ref={(el) => (this.nativeIcon = el)}\n                   {...this.inheritedAttributes}>\n                    {this.icon}\n                </i>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/message/message-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=message-interface.js.map

package/dist/collection/components/message/message-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-interface.js","sourceRoot":"","sources":["../../../src/components/message/message-interface.ts"],"names":[],"mappings":"","sourcesContent":["export type WcsMessageBackground = 'lighter' | 'lightest';\n"]}

package/dist/collection/components/message/message.css

@@ -0,0 +1,101 @@
+:host {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  --wcs-message-border-width: var(--wcs-semantic-border-width-default);
+  --wcs-message-border-radius: var(--wcs-semantic-border-radius-base);
+  --wcs-message-padding: var(--wcs-semantic-spacing-base-150);
+  --wcs-message-gap: var(--wcs-semantic-spacing-base-150);
+  --wcs-message-title-color: var(--wcs-semantic-color-text-primary);
+  --wcs-message-subtitle-color: var(--wcs-semantic-color-text-secondary);
+  --wcs-message-border-color-success: var(--wcs-semantic-color-border-success);
+  --wcs-message-icon-color-success: var(--wcs-semantic-color-background-surface-success-default);
+  --wcs-message-background-color-lightest-success: var(--wcs-semantic-color-background-surface-success-lightest);
+  --wcs-message-background-color-lighter-success: var(--wcs-semantic-color-background-surface-success-lighter);
+  --wcs-message-border-color-information: var(--wcs-semantic-color-border-information);
+  --wcs-message-icon-color-information: var(--wcs-semantic-color-background-surface-information-default);
+  --wcs-message-background-color-lightest-information: var(--wcs-semantic-color-background-surface-information-lightest);
+  --wcs-message-background-color-lighter-information: var(--wcs-semantic-color-background-surface-information-lighter);
+  --wcs-message-border-color-warning: var(--wcs-semantic-color-border-warning);
+  --wcs-message-icon-color-warning: var(--wcs-semantic-color-background-surface-warning-default);
+  --wcs-message-background-color-lightest-warning: var(--wcs-semantic-color-background-surface-warning-lightest);
+  --wcs-message-background-color-lighter-warning: var(--wcs-semantic-color-background-surface-warning-lighter);
+  --wcs-message-border-color-error: var(--wcs-semantic-color-border-critical);
+  --wcs-message-icon-color-error: var(--wcs-semantic-color-background-surface-critical-default);
+  --wcs-message-background-color-lightest-error: var(--wcs-semantic-color-background-surface-critical-lightest);
+  --wcs-message-background-color-lighter-error: var(--wcs-semantic-color-background-surface-critical-lighter);
+  font-size: var(--wcs-message-font-size);
+  padding: var(--wcs-message-padding);
+  gap: var(--wcs-message-gap);
+  border-radius: var(--wcs-message-border-radius);
+}
+:host .content {
+  display: flex;
+  flex-direction: column;
+}
+:host .icon-content-container {
+  display: flex;
+  align-items: center;
+}
+:host .icon-content-container {
+  gap: var(--wcs-message-gap);
+}
+:host ::slotted([slot=title]) {
+  color: var(--wcs-message-title-color);
+  font-size: var(--wcs-message-title-font-size);
+  font-weight: var(--wcs-message-title-font-weight);
+}
+:host ::slotted([slot=subtitle]) {
+  font-weight: var(--wcs-message-subtitle-font-weight);
+  color: var(--wcs-message-subtitle-color);
+  font-size: var(--wcs-message-subtitle-font-size);
+}
+:host .announcement-icon {
+  color: var(--wcs-internal-message-icon-color);
+}
+
+.close-button wcs-mat-icon {
+  color: var(--wcs-message-dismiss-button-color);
+}
+
+:host([background=lightest]) {
+  background-color: var(--wcs-internal-message-background-color-lightest);
+}
+
+:host([background=lighter]) {
+  background-color: var(--wcs-internal-message-background-color-lighter);
+}
+
+:host([show-border]) {
+  border: var(--wcs-message-border-width) solid var(--wcs-internal-message-border-color);
+}
+
+:host([intent=success]) {
+  --wcs-internal-message-border-color: var(--wcs-message-border-color-success);
+  --wcs-internal-message-icon-color: var(--wcs-message-icon-color-success);
+  --wcs-internal-message-background-color-lightest: var(--wcs-message-background-color-lightest-success);
+  --wcs-internal-message-background-color-lighter: var(--wcs-message-background-color-lighter-success);
+}
+
+:host([intent=information]) {
+  --wcs-internal-message-border-color: var(--wcs-message-border-color-information);
+  --wcs-internal-message-icon-color: var(--wcs-message-icon-color-information);
+  --wcs-internal-message-background-color-lightest: var(--wcs-message-background-color-lightest-information);
+  --wcs-internal-message-background-color-lighter: var(--wcs-message-background-color-lighter-information);
+}
+
+:host([intent=warning]) {
+  --wcs-internal-message-border-color: var(--wcs-message-border-color-warning);
+  --wcs-internal-message-icon-color: var(--wcs-message-icon-color-warning);
+  --wcs-internal-message-background-color-lightest: var(--wcs-message-background-color-lightest-warning);
+  --wcs-internal-message-background-color-lighter: var(--wcs-message-background-color-lighter-warning);
+}
+
+:host([intent=error]) {
+  --wcs-internal-message-border-color: var(--wcs-message-border-color-error);
+  --wcs-internal-message-icon-color: var(--wcs-message-icon-color-error);
+  --wcs-internal-message-background-color-lightest: var(--wcs-message-background-color-lightest-error);
+  --wcs-internal-message-background-color-lighter: var(--wcs-message-background-color-lighter-error);
+}

package/dist/collection/components/message/message.js

@@ -0,0 +1,206 @@
+import { h, Host } from "@stencil/core";
+import { AlertCloseButton } from "../alert/alert-close-button";
+/**
+ * Messages are used to communicate contextual information to users.
+ * They can display information, success, warning, or error states.
+ *
+ * Unlike alerts, messages are static feedback elements and are not automatically dismissed.
+ *
+ * @cssprop --wcs-message-title-color - Text color of the title
+ * @cssprop --wcs-message-subtitle-color - Text color of the subtitle
+ *
+ * @cssprop --wcs-message-title-font-weight - Font weight of the title
+ * @cssprop --wcs-message-subtitle-font-weight - Font weight of the subtitle
+ *
+ * @cssprop --wcs-message-title-font-size - Font size of the title
+ * @cssprop --wcs-message-subtitle-font-size - Font size of the subtitle
+ *
+ * @cssprop --wcs-message-dismiss-button-color - Color of the dismiss button
+ *
+ * @cssprop --wcs-message-border-radius - Border radius of the message
+ * @cssprop --wcs-message-border-width - Border width of the message
+ *
+ * @cssprop --wcs-message-padding - Padding of the message
+ * @cssprop --wcs-message-gap - Gap between icon and content
+ *
+ * @cssprop --wcs-message-border-color-success - Border color of success messages
+ * @cssprop --wcs-message-icon-color-success - Icon color of success messages
+ * @cssprop --wcs-message-background-color-lightest-success - Lightest background color of success messages
+ * @cssprop --wcs-message-background-color-lighter-success - Lighter background color of success messages
+ *
+ * @cssprop --wcs-message-border-color-information - Border color of information messages
+ * @cssprop --wcs-message-icon-color-information - Icon color of information messages
+ * @cssprop --wcs-message-background-color-lightest-information - Lightest background color of information messages
+ * @cssprop --wcs-message-background-color-lighter-information - Lighter background color of information messages
+ *
+ * @cssprop --wcs-message-border-color-warning - Border color of warning messages
+ * @cssprop --wcs-message-icon-color-warning - Icon color of warning messages
+ * @cssprop --wcs-message-background-color-lightest-warning - Lightest background color of warning messages
+ * @cssprop --wcs-message-background-color-lighter-warning - Lighter background color of warning messages
+ *
+ * @cssprop --wcs-message-border-color-error - Border color of error messages
+ * @cssprop --wcs-message-icon-color-error - Icon color of error messages
+ * @cssprop --wcs-message-background-color-lightest-error - Lightest background color of error messages
+ * @cssprop --wcs-message-background-color-lighter-error - Lighter background color of error messages
+ *
+ * @slot title - Title content of the message
+ * @slot subtitle - Subtitle content of the message
+ */
+export class Message {
+    constructor() {
+        this.intent = 'information';
+        this.background = 'lightest';
+        this.showCloseButton = false;
+        this.showBorder = false;
+    }
+    close() {
+        this.wcsMessageDismiss.emit();
+    }
+    getMaterialIcon() {
+        switch (this.intent) {
+            case 'success':
+                return 'check_circle';
+            case 'information':
+                return 'info';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+        }
+    }
+    getAriaLabel() {
+        switch (this.intent) {
+            case 'success':
+                return 'Succès';
+            case 'information':
+                return 'Information';
+            case 'error':
+                return 'Erreur';
+            case 'warning':
+                return 'Attention';
+        }
+    }
+    render() {
+        const isDisruptive = this.intent === 'error' || this.intent === 'warning';
+        return (h(Host, { key: 'd359d9528623f969c3a48f460fee90daeaacfd99', role: isDisruptive ? 'alert' : 'status' }, h("div", { key: '0179e27f5ffad182edb12437ec6696b963864313', class: "icon-content-container" }, h("wcs-mat-icon", { key: '80d7a113c0697aae3f5b423fd440be53c6ceb0b0', class: "announcement-icon", icon: this.getMaterialIcon(), "aria-label": this.getAriaLabel(), role: "img", "aria-hidden": false }), h("div", { key: '583702def518ecaf03f12401bd34acc8b19c41bb', class: "content" }, h("slot", { key: '59d2f8bebc547337319695e3cdb46fa220fae948', name: "title" }), h("slot", { key: '9106dd799a198278d2e7acbabda36235ed8eb713', name: "subtitle" }))), this.showCloseButton && (h(AlertCloseButton, { key: 'fe51ac73fedfe37935681467ef9f1e73892976a1', onClick: () => this.close() }))));
+    }
+    static get is() { return "wcs-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WcsAlertIntent",
+                    "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+                    "references": {
+                        "WcsAlertIntent": {
+                            "location": "import",
+                            "path": "../alert/alert-interface",
+                            "id": "src/components/alert/alert-interface.ts::WcsAlertIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the semantic intent of the message.\n- Non-disruptive messages (`information`, `success`) use `role=\"status\"`\n- Disruptive messages (`warning`, `error`) use `role=\"alert\"`"
+                },
+                "attribute": "intent",
+                "reflect": true,
+                "defaultValue": "'information'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WcsMessageBackground",
+                    "resolved": "\"lighter\" | \"lightest\"",
+                    "references": {
+                        "WcsMessageBackground": {
+                            "location": "import",
+                            "path": "./message-interface",
+                            "id": "src/components/message/message-interface.ts::WcsMessageBackground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the background appearance of the message."
+                },
+                "attribute": "background",
+                "reflect": true,
+                "defaultValue": "'lightest'"
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the component should display a close button."
+                },
+                "attribute": "show-close-button",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "showBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the message should have a border. The border color is determined by the intent of the message."
+                },
+                "attribute": "show-border",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wcsMessageDismiss",
+                "name": "wcsMessageDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the message is dismissed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=message.js.map

package/dist/collection/components/message/message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/message/message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAG5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAMH,MAAM,OAAO,OAAO;;sBAOS,aAAa;0BAMH,UAAU;+BAMlB,KAAK;0BAMV,KAAK;;IAOnB,KAAK;QACT,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAClC,CAAC;IAEO,eAAe;QACnB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;YAClB,KAAK,SAAS;gBACV,OAAO,cAAc,CAAC;YAC1B,KAAK,aAAa;gBACd,OAAO,MAAM,CAAC;YAClB,KAAK,OAAO;gBACR,OAAO,OAAO,CAAC;YACnB,KAAK,SAAS;gBACV,OAAO,SAAS,CAAC;QACzB,CAAC;IACL,CAAC;IAEO,YAAY;QAChB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;YAClB,KAAK,SAAS;gBACV,OAAO,QAAQ,CAAC;YACpB,KAAK,aAAa;gBACd,OAAO,aAAa,CAAC;YACzB,KAAK,OAAO;gBACR,OAAO,QAAQ,CAAC;YACpB,KAAK,SAAS;gBACV,OAAO,WAAW,CAAC;QAC3B,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;QAE1E,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;YACzC,4DAAK,KAAK,EAAC,wBAAwB;gBAC/B,qEACI,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,gBAChB,IAAI,CAAC,YAAY,EAAE,EAC/B,IAAI,EAAC,KAAK,iBACG,KAAK,GAAG;gBACzB,4DAAK,KAAK,EAAC,SAAS;oBAChB,6DAAM,IAAI,EAAC,OAAO,GAAQ;oBAC1B,6DAAM,IAAI,EAAC,UAAU,GAAQ,CAC3B,CACJ;YACL,IAAI,CAAC,eAAe,IAAI,CACrB,EAAC,gBAAgB,qDAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CACnD,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Prop} from '@stencil/core';\nimport {WcsAlertIntent} from '../alert/alert-interface';\nimport {WcsMessageBackground} from \"./message-interface\";\nimport {AlertCloseButton} from \"../alert/alert-close-button\";\n\n/**\n * Messages are used to communicate contextual information to users.\n * They can display information, success, warning, or error states.\n *\n * Unlike alerts, messages are static feedback elements and are not automatically dismissed.\n *\n * @cssprop --wcs-message-title-color - Text color of the title\n * @cssprop --wcs-message-subtitle-color - Text color of the subtitle\n *\n * @cssprop --wcs-message-title-font-weight - Font weight of the title\n * @cssprop --wcs-message-subtitle-font-weight - Font weight of the subtitle\n *\n * @cssprop --wcs-message-title-font-size - Font size of the title\n * @cssprop --wcs-message-subtitle-font-size - Font size of the subtitle\n *\n * @cssprop --wcs-message-dismiss-button-color - Color of the dismiss button\n *\n * @cssprop --wcs-message-border-radius - Border radius of the message\n * @cssprop --wcs-message-border-width - Border width of the message\n * \n * @cssprop --wcs-message-padding - Padding of the message\n * @cssprop --wcs-message-gap - Gap between icon and content\n *\n * @cssprop --wcs-message-border-color-success - Border color of success messages\n * @cssprop --wcs-message-icon-color-success - Icon color of success messages\n * @cssprop --wcs-message-background-color-lightest-success - Lightest background color of success messages\n * @cssprop --wcs-message-background-color-lighter-success - Lighter background color of success messages\n *\n * @cssprop --wcs-message-border-color-information - Border color of information messages\n * @cssprop --wcs-message-icon-color-information - Icon color of information messages\n * @cssprop --wcs-message-background-color-lightest-information - Lightest background color of information messages\n * @cssprop --wcs-message-background-color-lighter-information - Lighter background color of information messages\n *\n * @cssprop --wcs-message-border-color-warning - Border color of warning messages\n * @cssprop --wcs-message-icon-color-warning - Icon color of warning messages\n * @cssprop --wcs-message-background-color-lightest-warning - Lightest background color of warning messages\n * @cssprop --wcs-message-background-color-lighter-warning - Lighter background color of warning messages\n *\n * @cssprop --wcs-message-border-color-error - Border color of error messages\n * @cssprop --wcs-message-icon-color-error - Icon color of error messages\n * @cssprop --wcs-message-background-color-lightest-error - Lightest background color of error messages\n * @cssprop --wcs-message-background-color-lighter-error - Lighter background color of error messages\n *\n * @slot title - Title content of the message\n * @slot subtitle - Subtitle content of the message\n */\n@Component({\n    tag: 'wcs-message',\n    styleUrl: 'message.scss',\n    shadow: true,\n})\nexport class Message {\n    /**\n     * Defines the semantic intent of the message.\n     * - Non-disruptive messages (`information`, `success`) use `role=\"status\"`\n     * - Disruptive messages (`warning`, `error`) use `role=\"alert\"`\n     */\n    @Prop({reflect: true})\n    intent: WcsAlertIntent = 'information';\n\n    /**\n     * Defines the background appearance of the message.\n     */\n    @Prop({reflect: true})\n    background: WcsMessageBackground = 'lightest';\n\n    /**\n     * Specifies whether the component should display a close button.\n     */\n    @Prop({reflect: true})\n    showCloseButton: boolean = false;\n\n    /**\n     * Defines whether the message should have a border. The border color is determined by the intent of the message.\n     */\n    @Prop({reflect: true})\n    showBorder: boolean = false;\n\n    /**\n     * Event emitted when the message is dismissed.\n     */\n    @Event() wcsMessageDismiss: EventEmitter<void>;\n\n    private close() {\n        this.wcsMessageDismiss.emit();\n    }\n\n    private getMaterialIcon() {\n        switch (this.intent) {\n            case 'success':\n                return 'check_circle';\n            case 'information':\n                return 'info';\n            case 'error':\n                return 'error';\n            case 'warning':\n                return 'warning';\n        }\n    }\n\n    private getAriaLabel() {\n        switch (this.intent) {\n            case 'success':\n                return 'Succès';\n            case 'information':\n                return 'Information';\n            case 'error':\n                return 'Erreur';\n            case 'warning':\n                return 'Attention';\n        }\n    }\n\n    render() {\n        const isDisruptive = this.intent === 'error' || this.intent === 'warning';\n\n        return (\n            <Host role={isDisruptive ? 'alert' : 'status'}>\n                <div class=\"icon-content-container\">\n                    <wcs-mat-icon\n                        class=\"announcement-icon\"\n                        icon={this.getMaterialIcon()}\n                        aria-label={this.getAriaLabel()}\n                        role=\"img\"\n                        aria-hidden={false}/>\n                    <div class=\"content\">\n                        <slot name=\"title\"></slot>\n                        <slot name=\"subtitle\"></slot>\n                    </div>\n                </div>\n                {this.showCloseButton && (\n                    <AlertCloseButton onClick={() => this.close()}/>\n                )}\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/modal/modal.js

@@ -169,7 +169,7 @@ export class Modal {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (h(Host, { key: '2d08c87dcf9936d24dae178ee6a9cf84fb181faf' }, h("div", Object.assign({ key: '51c1cbdb0bfc0fbba675508fb7e9fafdc6adc8e4', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'b62c495d23a0040eb160a93ccf858f7f0f60f83f', class: "wcs-modal-header" }, h("h1", { key: '8ea9cf9b9623305b79ed8f7cab3c2bf7e8ff242d', id: modalTitleId }, h("slot", { key: '972069f3d03047d4c56d8ea3c129f4296de4eb16', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '49bf558d8092030497d29b399efb84c78f1c8748', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '1f2354939c40f22c2661a8a7383dfb9416b9c9da', icon: "close" })))), h("div", { key: '8f3fca88fa36f779c3d67f8694bee5a6386346e8', class: "wcs-modal-content" }, h("slot", { key: '4a65490518cbb450e825a9149e8516a3102f8ae3', onSlotchange: () => this.handleSlotContentChange() })), h("div", { key: 'be4cb11ff95787c58c6ac690a46522fcc04a6249', class: "wcs-modal-actions" }, h("slot", { key: '13a989d259e04ecdb1f89fcaafb7ab13898aee71', name: "actions" })))));
+        return (h(Host, { key: '82fa31417a4672941af1cb9476f14028789af146' }, h("div", Object.assign({ key: 'd0edfbd6a6b8e303d609d56b8ac04e5edc35e5de', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'e193310c0c0326e281f448e6589271ac2132978b', class: "wcs-modal-header" }, h("h1", { key: 'ced3b0bf47061c67859ac9ea8631c477ea37c96a', id: modalTitleId }, h("slot", { key: 'db8dde0c036faf95b95bdc889a228331034dee92', name: "header" })), this.showCloseButton && (h("wcs-button", { key: 'f7fb1facae2fe831da0732fa7c98f74df9e73992', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '58829be0acc52558161c5d2f9403a0d09aae2c69', icon: "close" })))), h("div", { key: '1be05650825bd0cfd7e5b545c4005b2e23ac0b0f', class: "wcs-modal-content" }, h("slot", { key: '07a0141a45d821ed65a7dcf92fc0eada32e483e5', onSlotchange: () => this.handleSlotContentChange() })), h("div", { key: '379cadd0f6052bde7882e60ae431b3f78e7ba167', class: "wcs-modal-actions" }, h("slot", { key: '169c9358b6315528a72793100b303693b502a089', name: "actions" })))));
     }
     static get is() { return "wcs-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/native-select/native-select.js

@@ -190,7 +190,7 @@ export class NativeSelect {
         this._updateStyles();
     }
     render() {
-        return (h(Host, { key: '12431927c41eb386de134e92e5583fc0ff582b44', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: 'b935ff599bc9829b0c771bf5aa13ae3605cddd98', class: "select-wrapper" }, h("slot", { key: 'c02ba432172f6b608f808a6365487b4ec7528a68' }), h("div", { key: '53841e3831eeb19165511caabe0f49e6b0a693d4', class: "arrow-container" }, h(SelectArrow, { key: '6b474db9957a98e8dada3ce4cda752a7299c5bf9', up: this.expanded })))));
+        return (h(Host, { key: 'b257839918786d9683521e918955fd38a44d6e8e', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: '362c54c60f057abc64ac87f935a269560bba44db', class: "select-wrapper" }, h("slot", { key: 'd0a5050366e6e572eaec674cf7d45f13fb1abe39' }), h("div", { key: '1f8768717e205c2c147fed191c8563753a0d6258', class: "arrow-container" }, h(SelectArrow, { key: '6bf367c0ba5fbc5ce57c4a1aaa919a2b62d8c690', up: this.expanded })))));
     }
     static get is() { return "wcs-native-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav/nav.js

@@ -21,7 +21,7 @@ export class Nav {
         setOrRemoveAttribute(this.nativeNav, attr, value);
     }
     render() {
-        return (h("nav", Object.assign({ key: '73683911e6d8f624fb152a40e723d1b0920a6265', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: 'e381eab2ef05be7bf28c3eff3e02034d7605015d', role: "list" }, h("slot", { key: '714a44e78e9d8495e1da0fd3f002e9cf769cdf95' }), h("slot", { key: '570a520fd2f16386c14a250e5786bd97ed3ba293', name: "bottom" }))));
+        return (h("nav", Object.assign({ key: '8b3a10c56fd18186c5b2c008eaf89622dd4c5fb3', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: 'b9da00e54fb3036e9895f5d5c7e643086c829b41', role: "list" }, h("slot", { key: '5e19bf73400b92757e9a33257649213ae7c4b0f9' }), h("slot", { key: '6870ba04c2a975acbbc2782c96aa27a8a20d013d', name: "bottom" }))));
     }
     static get is() { return "wcs-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-item/nav-item.js

@@ -45,7 +45,7 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: '3d329f63e895cf09a57e1a0d8304cf833b0ba434', role: "listitem" }, h("slot", { key: 'bc4dadc9a3b665412880da1671aa518d7ecf290f' })));
+        return (h(Host, { key: '3e5ca93ea18059c67d5570ee407192c70b9a5af1', role: "listitem" }, h("slot", { key: '4ce442473084b0e18fe3cc19248c349f026715f1' })));
     }
     static get is() { return "wcs-nav-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/progress-bar/progress-bar.js

@@ -54,8 +54,8 @@ export class ProgressBar {
         const style = {
             width: this.value + '%'
         };
-        return (h("div", Object.assign({ key: 'f13a43d675ed082f811784a998e8bcd54e45a782', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("div", { key: '861383fa1ae516512a730cad52d1b9dc2ee55809', class: "progress-bar", style: style }, this.showLabel &&
-            h("span", { key: '0f0a9f0ce03562199f6a743f8dc653e276719b37', class: "progress-label" }, this.value, h("sup", { key: '8fa2735668eea7f46562e52748122e2e4fad9908' }, "%")))));
+        return (h("div", Object.assign({ key: 'cd24dba649fb46f84967e857ef6e29a0eb521794', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("div", { key: 'd0e92be2503030a665daf0ee4be4022845a63355', class: "progress-bar", style: style }, this.showLabel &&
+            h("span", { key: '06b7517e88d8ebafd6a28fc4dfabe38b93d3f0c3', class: "progress-label" }, this.value, h("sup", { key: '0e53ebfa29c4ee42831e9432bede449a9f71b313' }, "%")))));
     }
     rootClasses() {
         let classes = 'progress';

package/dist/collection/components/progress-radial/progress-radial.js

@@ -45,8 +45,8 @@ export class ProgressRadial {
     }
     render() {
         const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };
-        return (h("div", Object.assign({ key: 'cd493dcab22c92a8683a89e394f51abfbabd0781', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("svg", { key: 'e2c4ff80a735815ebbaf051f94108ca5e9a246fa', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: '375db58b06b0f2c75dbd390e547ccc81258fdf43', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: '6cf1fe11b1ec49d8f7cc7b1d53819bad47b24e3d', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: '657a8ba78283a98c568eb436d9bfafdebf354934', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
-            h("div", { key: '7ac452d83ad4bf88fc1e3d2bf63506e30185d115', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'e8827e91faeb2b1a36737ba35250ca0e9d64b830' }, h("span", { key: 'de2c9502060d10e020acbdc939efdcae4abc74d8', "data-role": "labelvalue" }, this.value), h("sup", { key: '9c872051b94e6ca06eae6a967c75173a0d03ee9a' }, "%")))));
+        return (h("div", Object.assign({ key: '41c91ae3fadd538ad2b7c201f8def9c32fba54fa', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("svg", { key: 'b3487735133ac25fd54d315aae3c59d55a35be5c', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: 'a10400986a13c10f05ecf809f596d9064bfca7e4', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: '5ea4655662fe08b668fb5508243bd1fb955c4484', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: 'e84165f37b549e4f30ad9242fa65e871f615f550', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+            h("div", { key: '2f982e974db32f833d5227e79641cc400a845b70', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'ec3f7ab4833a1b5f9f061dd17374e89f9040f00f' }, h("span", { key: '8707ff80a7160a681c3fb056adba8c65a6c5bd22', "data-role": "labelvalue" }, this.value), h("sup", { key: '5119ede23174dba5a0b13187b5abb37a6c1d785b' }, "%")))));
     }
     getSvgStyle() {
         return {

package/dist/collection/components/radio/radio.js

@@ -137,7 +137,7 @@ export class Radio {
         this.emitRadioChangeEvent();
     }
     render() {
-        return (h(Host, { key: '0720e7983a66998bef080116aec041f3309d70dd', slot: "option", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '', onClick: this.handleClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("span", { key: 'bb2fb56fa6c5354a54b4debba078b0c129534e74', class: "label" }, this.label)));
+        return (h(Host, { key: '19c87ecc30754b5534fe6fd0c10540d1701d9742', slot: "option", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '', onClick: this.handleClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("span", { key: '4dcb066b114426a822fb46f225d96c499b24e628', class: "label" }, this.label)));
     }
     static get is() { return "wcs-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -104,7 +104,7 @@ export class RadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '9e945b3bd3935232dbfd859e6a53f49523d6f49b', role: "radiogroup" }, h("slot", { key: '7c6a9ae33e2dbc25c1c696ee2d9957cc882d5eba', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
+        return (h(Host, { key: '74aa25f0bb0ecfa19d7776f0e3f1d9730f5af2b0', role: "radiogroup" }, h("slot", { key: '01c9174382239a8c6a3b453d841d269ef38055d9', name: "option", onSlotchange: this.onSlotChange.bind(this) })));
     }
     static get is() { return "wcs-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-interface.js","sourceRoot":"","sources":["../../../src/components/select/select-interface.ts"],"names":[],"mappings":"AAgBA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsB,CAAC,QAAQ,EAAE,MAAM,EAAW,EAAE;IACrF,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAIxJ,MAAM,UAAU,eAAe,CAAC,IAAY;IACxC,0EAA0E;IAC1E,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface SelectChangeEventDetail {\n    value: any | any[] | undefined | null;\n    /**\n     * Could be undefined if the wcs-select is in server mode, as the selected options are not rendered in the DOM\n     */\n    selectedOptions: HTMLWcsSelectOptionElement[] | undefined;\n}\n\nexport interface SelectFilterChangeEventDetail {\n    value: string | number | undefined | null;\n}\n\nexport type WcsSelectFilterFn = (optionEl: HTMLWcsSelectOptionElement, filter: string) => boolean;\n\n/**\n * Default filtering function. Compares the string start of wcs-select-option element's text content\n * with your filter input.\n * @param optionEl - wcs-select-option element\n * @param filter - input filter field value\n * @constructor\n */\nexport const WcsDefaultSelectFilterFn: WcsSelectFilterFn = (optionEl, filter): boolean => {\n    return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());\n}\n\nexport const WcsSelectSizeValue = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsSelectSize = Extract<WcsSize, typeof WcsSelectSizeValue[number]>;\n\nexport function isWcsSelectSize(size: string): size is WcsSelectSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsSelectSizeValue.includes(size);\n}\n"]}
+{"version":3,"file":"select-interface.js","sourceRoot":"","sources":["../../../src/components/select/select-interface.ts"],"names":[],"mappings":"AAiBA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAsB,CAAC,QAAQ,EAAE,MAAM,EAAW,EAAE;IACrF,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;AAC/E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAIxJ,MAAM,UAAU,eAAe,CAAC,IAAY;IACxC,0EAA0E;IAC1E,OAAO,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface SelectChangeEventDetail {\n    value: any | any[] | undefined | null;\n    /**\n     * Could be undefined if the wcs-select is in server mode, as the selected options are not rendered in the DOM\n     */\n    selectedOptions: HTMLWcsSelectOptionElement[] | undefined;\n}\n\nexport interface SelectFilterChangeEventDetail {\n    value: string | number | undefined | null;\n    trigger: 'input' | 'selection';\n}\n\nexport type WcsSelectFilterFn = (optionEl: HTMLWcsSelectOptionElement, filter: string) => boolean;\n\n/**\n * Default filtering function. Compares the string start of wcs-select-option element's text content\n * with your filter input.\n * @param optionEl - wcs-select-option element\n * @param filter - input filter field value\n * @constructor\n */\nexport const WcsDefaultSelectFilterFn: WcsSelectFilterFn = (optionEl, filter): boolean => {\n    return optionEl.textContent.toLowerCase().startsWith(filter.toLowerCase());\n}\n\nexport const WcsSelectSizeValue = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsSelectSize = Extract<WcsSize, typeof WcsSelectSizeValue[number]>;\n\nexport function isWcsSelectSize(size: string): size is WcsSelectSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsSelectSizeValue.includes(size);\n}\n"]}