wcs-core 7.5.1 → 7.7.0

package/dist/collection/components/label/label.css

@@ -6,16 +6,20 @@
   font-weight: var(--wcs-label-font-weight);
 }
 
-:host([required]) > label::after {
+label {
+  display: inline-block;
+  color: var(--wcs-label-color);
   font-weight: var(--wcs-label-font-weight);
-  color: var(--wcs-label-required-marker-color);
-  content: " *";
 }
-
-label {
+label ::slotted(wcs-mat-icon) {
   display: inline-flex;
-  align-items: center;
-  gap: var(--wcs-label-gap);
-  color: var(--wcs-label-color);
+  vertical-align: text-top;
+  margin-left: var(--wcs-label-gap);
+}
+
+.required-marker {
+  margin-left: 4px;
+  vertical-align: text-top;
+  color: var(--wcs-label-required-marker-color);
   font-weight: var(--wcs-label-font-weight);
 }

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

@@ -38,5 +38,67 @@ test.describe('Label component', () => {
         const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();
         expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);
     });
+    test('Should place required marker right after last word when label wraps', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field style="width: 180px">
+                <wcs-label>
+                    This label is long enough to wrap on multiple lines and end with
+                    <span id="last-word">word</span>
+                </wcs-label>
+                <wcs-input required></wcs-input>
+            </wcs-form-field>
+        `);
+        const lastWord = page.locator('#last-word');
+        const requiredMarker = page.locator('.required-marker');
+        // Then
+        await expect(requiredMarker).toBeVisible();
+        const lastWordBox = await lastWord.boundingBox();
+        const requiredMarkerBox = await requiredMarker.boundingBox();
+        const horizontalGap = requiredMarkerBox.x - (lastWordBox.x + lastWordBox.width);
+        expect(horizontalGap).toBeGreaterThanOrEqual(0);
+        expect(horizontalGap).toBeLessThanOrEqual(8 + 2); // assuming a gap of Xpx plus some tolerance
+        expect(Math.abs((lastWordBox.y + lastWordBox.height) - (requiredMarkerBox.y + requiredMarkerBox.height))).toBeLessThanOrEqual(2);
+    });
+    test('Should keep same height with and without required marker', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field id="form-field-with-required">
+                <wcs-label>Enter your name</wcs-label>
+                <wcs-input required placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+
+            <wcs-form-field id="form-field-without-required">
+                <wcs-label>Enter your name</wcs-label>
+                <wcs-input placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+        `);
+        const formFieldWithRequired = page.locator('#form-field-with-required');
+        const formFieldWithoutRequired = page.locator('#form-field-without-required');
+        // Then
+        const formFieldBoundingBoxWithRequired = await formFieldWithRequired.boundingBox();
+        const formFieldBoundingBoxWithoutRequired = await formFieldWithoutRequired.boundingBox();
+        expect(formFieldBoundingBoxWithRequired.height).toEqual(formFieldBoundingBoxWithoutRequired.height);
+    });
+    test('Should well update of the required marker when property required is toggled', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field>
+                <wcs-label id="label">
+                    This label is long enough to wrap on multiple lines and end with
+                    <span id="last-word">word</span>
+                </wcs-label>
+                <wcs-input required></wcs-input>
+            </wcs-form-field>
+        `);
+        const wcsInput = page.locator('wcs-input');
+        const requiredMarker = page.locator('.required-marker');
+        // Then
+        await expect(requiredMarker).toBeVisible();
+        // When
+        await wcsInput.evaluate((el) => el.required = false);
+        // Then
+        await expect(requiredMarker).toBeHidden();
+    });
 });
 //# sourceMappingURL=label.e2e.playwright.js.map

package/dist/collection/components/label/label.e2e.playwright.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/label/label.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAClC,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACrE,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QAElD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO;QACP,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,WAAW,EAAE,CAAC;QACtC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACtC,+GAA+G;QAC/G,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+CAA+C,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACxF,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;;;;;;;SAazB,CAAC,CAAC;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;QAChE,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QAEtE,OAAO;QACP,MAAM,4BAA4B,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAC3E,MAAM,+BAA+B,GAAG,MAAM,oBAAoB,CAAC,WAAW,EAAE,CAAC;QACjF,MAAM,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,+BAA+B,CAAC,MAAM,CAAC,CAAC;IAChG,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Label component', () => {\n    test('Should wrap text correctly', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-label>Label loooooooooooooooooooooooooooooooooong text</wcs-label>\n        `);\n        page.setViewportSize({ width: 300, height: 300 });\n\n        const label = page.locator('label');\n\n        // Then\n        const box = await label.boundingBox();\n        expect(box.height).toBeGreaterThan(0);\n        // Assuming that the line height is around 20px, if the text is wrapped, the height should be greater than 20px\n        expect(box.height).toBeGreaterThan(20);\n    });\n\n    test('Should keep same height with and without icon', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field id=\"form-field-with-icon\">\n                <wcs-label>\n                    Enter your name\n                    <wcs-mat-icon id=\"icon-help\" icon=\"help\" family=\"filled\" size=\"s\"></wcs-mat-icon>\n                </wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n\n            <wcs-form-field id=\"form-field-without-icon\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n        `);\n        const formFieldWithIcon = page.locator('#form-field-with-icon');\n        const formFieldWithoutIcon = page.locator('#form-field-without-icon');\n\n        // Then\n        const formFieldBoundingBoxWithIcon = await formFieldWithIcon.boundingBox();\n        const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();\n        expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);\n    });\n});"]}
+{"version":3,"file":"label.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/label/label.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Label component', () => {\n    test('Should wrap text correctly', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-label>Label loooooooooooooooooooooooooooooooooong text</wcs-label>\n        `);\n        page.setViewportSize({ width: 300, height: 300 });\n\n        const label = page.locator('label');\n\n        // Then\n        const box = await label.boundingBox();\n        expect(box.height).toBeGreaterThan(0);\n        // Assuming that the line height is around 20px, if the text is wrapped, the height should be greater than 20px\n        expect(box.height).toBeGreaterThan(20);\n    });\n\n    test('Should keep same height with and without icon', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field id=\"form-field-with-icon\">\n                <wcs-label>\n                    Enter your name\n                    <wcs-mat-icon id=\"icon-help\" icon=\"help\" family=\"filled\" size=\"s\"></wcs-mat-icon>\n                </wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n\n            <wcs-form-field id=\"form-field-without-icon\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n        `);\n        const formFieldWithIcon = page.locator('#form-field-with-icon');\n        const formFieldWithoutIcon = page.locator('#form-field-without-icon');\n\n        // Then\n        const formFieldBoundingBoxWithIcon = await formFieldWithIcon.boundingBox();\n        const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();\n        expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);\n    });\n\n    test('Should place required marker right after last word when label wraps', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field style=\"width: 180px\">\n                <wcs-label>\n                    This label is long enough to wrap on multiple lines and end with\n                    <span id=\"last-word\">word</span>\n                </wcs-label>\n                <wcs-input required></wcs-input>\n            </wcs-form-field>\n        `);\n\n        const lastWord = page.locator('#last-word');\n        const requiredMarker = page.locator('.required-marker');\n\n        // Then\n        await expect(requiredMarker).toBeVisible();\n\n        const lastWordBox = await lastWord.boundingBox();\n        const requiredMarkerBox = await requiredMarker.boundingBox();\n\n        const horizontalGap = requiredMarkerBox.x - (lastWordBox.x + lastWordBox.width);\n        expect(horizontalGap).toBeGreaterThanOrEqual(0);\n        expect(horizontalGap).toBeLessThanOrEqual(8 + 2); // assuming a gap of Xpx plus some tolerance\n\n        expect(Math.abs((lastWordBox.y + lastWordBox.height) - (requiredMarkerBox.y + requiredMarkerBox.height))).toBeLessThanOrEqual(2);\n    });\n\n    test('Should keep same height with and without required marker', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field id=\"form-field-with-required\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input required placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n\n            <wcs-form-field id=\"form-field-without-required\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n        `);\n        const formFieldWithRequired = page.locator('#form-field-with-required');\n        const formFieldWithoutRequired = page.locator('#form-field-without-required');\n\n        // Then\n        const formFieldBoundingBoxWithRequired = await formFieldWithRequired.boundingBox();\n        const formFieldBoundingBoxWithoutRequired = await formFieldWithoutRequired.boundingBox();\n        expect(formFieldBoundingBoxWithRequired.height).toEqual(formFieldBoundingBoxWithoutRequired.height);\n    });\n\n    test('Should well update of the required marker when property required is toggled', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field>\n                <wcs-label id=\"label\">\n                    This label is long enough to wrap on multiple lines and end with\n                    <span id=\"last-word\">word</span>\n                </wcs-label>\n                <wcs-input required></wcs-input>\n            </wcs-form-field>\n        `);\n\n        const wcsInput = page.locator('wcs-input');\n        const requiredMarker = page.locator('.required-marker');\n\n        // Then\n        await expect(requiredMarker).toBeVisible();\n\n        // When\n        await wcsInput.evaluate((el: any) => el.required = false);\n\n        // Then\n        await expect(requiredMarker).toBeHidden();\n    });\n});\n"]}

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

@@ -28,7 +28,7 @@ export class Label {
         setOrRemoveAttribute(this.nativeLabel, attr, value);
     }
     render() {
-        return (h(Host, { key: '62f8ca37637cc792483f24476dbbd63ff3c077e5', slot: "label" }, h("label", Object.assign({ key: '3cef9a517d57652b75af3157d2c96a34693b258f', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: 'a614b379b45ac3d4cc1d58c45d39b64c0312c1d7' }))));
+        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/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;wBAMV,KAAK;;IAElD,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YACd,4EAAO,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,IAAM,IAAI,CAAC,mBAAmB;gBACnE,8DAAQ,CACJ,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;wBAMV,KAAK;;IAElD,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YACd,4EAAO,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,IAAM,IAAI,CAAC,mBAAmB;gBACnE,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,4EAAkB,MAAM,EAAC,KAAK,EAAC,iBAAiB,QAAS,CACvE,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                    {this.required && <span aria-hidden=\"true\" class=\"required-marker\">*</span>}\n                </label>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -35,7 +35,7 @@ export class ListItem {
         this.activated = false;
     }
     render() {
-        return (h(Host, { key: '12f53246cdb5922136d782f186573f3558bebbed' }, h("slot", { key: 'e03247aafa44501292b6c86d58455dc91240151c', name: "icon" }), h("div", { key: '24b4b6b485457e2c37001360f55ce1f4e843366e', class: "content" }, h("div", { key: '736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e', class: "header" }, h("div", { key: '13da0ca922bf545f5610326f5abfc135b66389c5' }, h("slot", { key: '1eb08b7d5aa3bef934f39527204f2633f51325df', name: "title" }), h("slot", { key: '3d506707345797e7e40246b18dc0aac557726d3c', name: "properties" })), h("slot", { key: '1a2afea410fe835bc8570e10e5f72a044d7a0218', name: "actions" })), h("slot", { key: 'b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec', 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: 'c9403bd863f3fbd182426df25c089d61ac3e5986', slot: "properties" }, h("slot", { key: '23baae7bd7dc743b23fc5598c8a60b6edf37f9c4', 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: '8f87008b8f9a847e0ef6ca55d87b2eec24eb1763', slot: "property" }, h("slot", { key: '5ad7e2f0f44d93c9ba599f23a850648f88dbefb9' })));
+        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: '57b0feb64492a614f69e255808dd5ae511e6b1f2' }, h("i", Object.assign({ key: '57475c2aaf39a6f719fc65a5c58f14df97c49db0', "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: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', 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: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), h("div", { key: '7c332e9d1c1b19b65fabb6f52bc14ab0ed9f4803', class: "wcs-modal-actions" }, h("slot", { key: '4c44f2337893ba9e8c852a1b8b16beab9da87e4e', 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: 'dedd08d93118cc5323b6d2062577275504972b12', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: 'bd211e20d0ab314767729ab54611c3d28fb8cca7', class: "select-wrapper" }, h("slot", { key: 'b0e58a954d0212c19a05395065ad5ed76efa9f39' }), h("div", { key: '5f70166ee1756180982a43151b9762e1cfec51d4', class: "arrow-container" }, h(SelectArrow, { key: 'ed256e18a87ab7cf17af6b5226ee6f10779d5bb1', 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"; }