wcs-core 7.0.0 → 7.2.0

package/dist/collection/components/alert-drawer/alert-drawer.js

@@ -0,0 +1,237 @@
+import { h, Host } from "@stencil/core";
+import { parseCssTimeValueToMilliseconds } from "../../utils/helpers";
+/**
+ * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.
+ *
+ * ## Usage
+ *
+ * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.
+ * You need to set `position` property to define where the alert drawer will be displayed on the screen.
+ *
+ * About alerts order:
+ * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`
+ *
+ * ## Accessibility guidelines 💡
+ *
+ * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers
+ *
+ * ## Configuration (on the web component)
+ *
+ * Per default, the `wcs-alert-drawer` is configured with:
+ * - `position: 'top-right'`
+ * - `showProgressBar: false`
+ * - `timeout: 5000`
+ *
+ * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by
+ * overriding it through the argument.
+ * You can also set them in the `wcs-alert-drawer` component directly as attributes
+ *
+ * ```html
+ * <wcs-alert-drawer position="top-right" show-progress-bar timeout="10000">
+ * ```
+ * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.
+ *
+ * @slot - the alert drawer content, where alerts you put as children will be displayed
+ *
+ * @cssprop --wcs-alert-drawer-gap - Gap between alerts
+ * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer
+ * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer
+ * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation
+ * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
+ */
+export class AlertDrawer {
+    constructor() {
+        /*
+         https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button
+         https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef
+         */
+        this.alertEventListeners = new WeakMap();
+        this.timeoutId = undefined;
+        this.userPrefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        /**
+         * Handles the dismissal of an alert
+         * @param alert The alert element
+         */
+        this.close = (alert) => {
+            if (!this.userPrefersReducedMotion) {
+                this.timeoutId = setTimeout(() => {
+                    alert.remove();
+                    // Cleanup the event listener reference
+                    this.alertEventListeners.delete(alert);
+                }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue("--wcs-alert-drawer-hide-alert-animation-duration")) || 300);
+            }
+            else {
+                // If the user has reduced motion preference, remove the alert immediately
+                alert.remove();
+                // Cleanup the event listener reference
+                this.alertEventListeners.delete(alert);
+            }
+        };
+        this.position = 'bottom-right';
+        this.timeout = 5000;
+        this.showProgressBar = false;
+    }
+    /**
+     * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API
+     * @example
+     * Plain javascript (example inside a script tag):
+     * ```javascript
+     *  document.querySelector('wcs-alert-drawer').show({
+     *      title: 'Alert title',
+     *      subtitle: 'Alert subtitle',
+     *      intent: 'info',
+     *      showProgressBar: true,
+     *      timeout: 5000
+     *  });
+     * @param alert The alert to show
+     */
+    async show(alert) {
+        this.alertsContainer.appendChild(this.renderToast(alert));
+    }
+    renderToast(alert) {
+        var _a, _b;
+        const alertElement = document.createElement('wcs-alert');
+        alertElement.setAttribute('intent', alert.intent);
+        // Uses the alert config if defined, otherwise falls back to the drawer default
+        // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true
+        if (((_a = alert.showProgressBar) !== null && _a !== void 0 ? _a : this.showProgressBar)) {
+            alertElement.setAttribute('show-progress-bar', '');
+        }
+        // Uses the alert config if defined, otherwise falls back to the drawer default
+        alertElement.setAttribute('timeout', String((_b = alert.timeout) !== null && _b !== void 0 ? _b : this.timeout));
+        const listener = () => this.close(alertElement);
+        this.alertEventListeners.set(alertElement, listener);
+        alertElement.addEventListener("wcsAlertDismiss", listener);
+        const title = document.createElement('span');
+        title.setAttribute('slot', 'title');
+        title.textContent = alert.title;
+        alertElement.appendChild(title);
+        const subtitle = document.createElement('span');
+        subtitle.setAttribute('slot', 'subtitle');
+        subtitle.textContent = alert.subtitle;
+        alertElement.appendChild(subtitle);
+        return alertElement;
+    }
+    render() {
+        // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility
+        return (h(Host, { key: '18a68f9f7727b29da85e0852dc87de30d79581ed', role: "region", "aria-label": "Informations", "aria-live": "polite", "aria-atomic": "true" }, h("div", { key: 'ee0d30077439b991e5ff6eb02b24873f015dce5e', ref: (el) => this.alertsContainer = el, id: "alerts-container" })));
+    }
+    disconnectedCallback() {
+        this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable
+        clearTimeout(this.timeoutId);
+    }
+    static get is() { return "wcs-alert-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alert-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alert-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WcsAlertDrawerPosition",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "WcsAlertDrawerPosition": {
+                            "location": "import",
+                            "path": "./alert-drawer-interface",
+                            "id": "src/components/alert-drawer/alert-drawer-interface.ts::WcsAlertDrawerPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the alert drawer on the screen"
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'bottom-right'"
+            },
+            "timeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timeout for the alert to be dismissed automatically"
+                },
+                "attribute": "timeout",
+                "reflect": false,
+                "defaultValue": "5000"
+            },
+            "showProgressBar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the progress bar or not"
+                },
+                "attribute": "show-progress-bar",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(alert: WcsAlertConfig) => Promise<void>",
+                    "parameters": [{
+                            "name": "alert",
+                            "type": "{ title: string; subtitle: string; intent: WcsAlertIntent; showProgressBar?: boolean; timeout?: number; }",
+                            "docs": "The alert to show"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "WcsAlertConfig": {
+                            "location": "import",
+                            "path": "../alert/alert-interface",
+                            "id": "src/components/alert/alert-interface.ts::WcsAlertConfig"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API",
+                    "tags": [{
+                            "name": "example",
+                            "text": "Plain javascript (example inside a script tag):\n```javascript\n document.querySelector('wcs-alert-drawer').show({\n     title: 'Alert title',\n     subtitle: 'Alert subtitle',\n     intent: 'info',\n     showProgressBar: true,\n     timeout: 5000\n });"
+                        }, {
+                            "name": "param",
+                            "text": "alert The alert to show"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=alert-drawer.js.map

package/dist/collection/components/alert-drawer/alert-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-drawer.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { parseCssTimeValueToMilliseconds } from '../../utils/helpers';\nimport { WcsAlertDrawerPosition } from \"./alert-drawer-interface\";\nimport { WcsAlertConfig } from \"../alert/alert-interface\";\n\n/**\n * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.\n * \n * ## Usage\n * \n * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.\n * You need to set `position` property to define where the alert drawer will be displayed on the screen.\n * \n * About alerts order:\n * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`\n * \n * ## Accessibility guidelines 💡\n * \n * - The component has `aria-live=\"polite\"` and `aria-atomic=\"true\"` attributes to announce the new alerts to screen readers\n * \n * ## Configuration (on the web component)\n *\n * Per default, the `wcs-alert-drawer` is configured with:\n * - `position: 'top-right'`\n * - `showProgressBar: false`\n * - `timeout: 5000`\n *\n * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by \n * overriding it through the argument.\n * You can also set them in the `wcs-alert-drawer` component directly as attributes\n * \n * ```html\n * <wcs-alert-drawer position=\"top-right\" show-progress-bar timeout=\"10000\">\n * ```\n * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.\n * \n * @slot - the alert drawer content, where alerts you put as children will be displayed\n * \n * @cssprop --wcs-alert-drawer-gap - Gap between alerts\n * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer\n * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer\n * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation\n * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts\n */\n@Component({\n    tag: 'wcs-alert-drawer',\n    styleUrl: 'alert-drawer.scss',\n    shadow: true,\n})\nexport class AlertDrawer {\n    @Element()\n    private el!: HTMLWcsAlertDrawerElement;\n\n    /**\n     * Position of the alert drawer on the screen\n     */\n    @Prop({ reflect: true }) position: WcsAlertDrawerPosition = 'bottom-right';\n\n    /**\n     * Timeout for the alert to be dismissed automatically\n     */\n    @Prop() timeout: number = 5000;\n    /**\n     * Whether to show the progress bar or not\n     */\n    @Prop() showProgressBar: boolean = false;\n\n    /*\n     https://www.reddit.com/r/Frontend/comments/1ato11w/comment/kqz4gt8/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button\n     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\n     */\n    private alertEventListeners = new WeakMap<HTMLElement, (evt: AnimationEvent) => void>();\n    private timeoutId = undefined;\n\n    private userPrefersReducedMotion: boolean = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    private alertsContainer: HTMLDivElement;\n\n    /**\n     * Handles the dismissal of an alert\n     * @param alert The alert element\n     */\n    private close = (alert: HTMLWcsAlertElement): void => {\n        if (!this.userPrefersReducedMotion) {\n            this.timeoutId = setTimeout(() => {\n                alert.remove();\n                // Cleanup the event listener reference\n                this.alertEventListeners.delete(alert);\n            }, parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue(\"--wcs-alert-drawer-hide-alert-animation-duration\")) || 300);\n        } else {\n            // If the user has reduced motion preference, remove the alert immediately\n            alert.remove();\n            // Cleanup the event listener reference\n            this.alertEventListeners.delete(alert);\n        }\n    };\n\n    /**\n     * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API\n     * @example\n     * Plain javascript (example inside a script tag):\n     * ```javascript\n     *  document.querySelector('wcs-alert-drawer').show({\n     *      title: 'Alert title',\n     *      subtitle: 'Alert subtitle',\n     *      intent: 'info',\n     *      showProgressBar: true,\n     *      timeout: 5000\n     *  });\n     * @param alert The alert to show\n     */\n    @Method()\n    async show(alert: WcsAlertConfig): Promise<void> {\n        this.alertsContainer.appendChild(this.renderToast(alert));\n    }\n\n    private renderToast(alert: WcsAlertConfig): HTMLWcsAlertElement {\n        const alertElement = document.createElement('wcs-alert') as HTMLWcsAlertElement;\n        alertElement.setAttribute('intent', alert.intent);\n\n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        // as the showProgressBar is a boolean attribute, we need to set it to an empty string only if true\n        if ((alert.showProgressBar ?? this.showProgressBar)) {\n            alertElement.setAttribute('show-progress-bar', '');\n        }\n        \n        // Uses the alert config if defined, otherwise falls back to the drawer default\n        alertElement.setAttribute('timeout', String(alert.timeout ?? this.timeout));\n\n        const listener = () => this.close(alertElement);\n        this.alertEventListeners.set(alertElement, listener);\n        alertElement.addEventListener(\"wcsAlertDismiss\", listener);\n        \n        const title = document.createElement('span') as HTMLSpanElement;\n        title.setAttribute('slot', 'title');\n        title.textContent = alert.title;\n        alertElement.appendChild(title);\n\n        const subtitle = document.createElement('span') as HTMLSpanElement;\n        subtitle.setAttribute('slot', 'subtitle');\n        subtitle.textContent = alert.subtitle;\n        alertElement.appendChild(subtitle);\n\n        return alertElement;\n    }\n\n    render() {\n        // https://www.clever-cloud.com/doc/clever-components/?path=/docs/%F0%9F%9B%A0-toast-cc-toaster--docs#about-accessibility\n        return (\n            <Host role=\"region\" aria-label=\"Informations\" aria-live=\"polite\" aria-atomic=\"true\">\n                <div ref={(el) => this.alertsContainer = el} id=\"alerts-container\">\n                </div>\n            </Host>\n        );\n    }\n\n    disconnectedCallback() {\n        this.alertEventListeners = new WeakMap(); // Clear the event listeners, weakmap is not iterable\n        clearTimeout(this.timeoutId);\n    }\n}\n"]}

package/dist/collection/components/app/app.js

@@ -2,9 +2,9 @@ import { h } from "@stencil/core";
 export class App {
     render() {
         return [
-            h("slot", { key: '5655ce9854ae1038dac8b4402eb8ac5d9da440bf', name: "header" }),
-            h("slot", { key: '613126c7ae2b38cf7704dcef94e67c638027bcee', name: "sidebar" }),
-            h("slot", { key: 'e845a127c56be76787b6902a4ad11aebc1d3fc87', name: "content" })
+            h("slot", { key: '615427e4b1e7219b1b78fbca36f8385f64119314', name: "header" }),
+            h("slot", { key: 'da5fbe3b8d0eb3963d9e42a9e3396f9bf3d49c0d', name: "sidebar" }),
+            h("slot", { key: '3227284afd347f4af0c47ad0f9b46712502df225', name: "content" })
         ];
     }
     static get is() { return "wcs-app"; }

package/dist/collection/components/badge/badge.css

@@ -12,14 +12,18 @@
   --wcs-badge-background-color-lighter: var(--wcs-semantic-color-background-surface-accent-lighter);
   --wcs-badge-color: var(--wcs-semantic-color-foreground-primary);
   --wcs-badge-color-lighter: var(--wcs-semantic-color-foreground-inverse);
-  --wcs-badge-gap: var(--wcs-semantic-spacing-base);
   --wcs-badge-padding-horizontal-l: var(--wcs-semantic-spacing-base);
   --wcs-badge-padding-horizontal-m: var(--wcs-semantic-spacing-base);
   --wcs-badge-padding-horizontal-s: calc(0.75 * var(--wcs-semantic-spacing-base));
+  --wcs-badge-height: var(--wcs-badge-height-m);
+  --wcs-badge-gap: calc(var(--wcs-semantic-spacing-base) / 2);
+  --wcs-badge-font-size: var(--wcs-badge-font-size-m);
+  --wcs-badge-padding-horizontal: var(--wcs-badge-padding-horizontal-m);
   display: inline-flex;
   gap: var(--wcs-badge-gap);
   padding: 0 var(--wcs-badge-padding-horizontal);
   height: var(--wcs-badge-height);
+  inline-size: fit-content;
   font-size: var(--wcs-badge-font-size);
   box-sizing: border-box;
   font-weight: var(--wcs-badge-font-weight);

package/dist/collection/components/badge/badge.js

@@ -30,7 +30,7 @@ export class Badge {
         this.size = 'm';
     }
     render() {
-        return (h("slot", { key: '03ddc8c170819c33674104a70697291ef5e56a9d' }));
+        return (h("slot", { key: '6d9646b28344f4d1f05a3efaf798a6273252a8bf' }));
     }
     static get is() { return "wcs-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -131,7 +131,7 @@ export class Breadcrumb {
     }
     render() {
         const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;
-        return (h(Host, { key: '944e877808887ad3933072e35d0760df00e5ab68' }, h("nav", Object.assign({ key: '210476d38cf668330fa9ce0f6ab009499d6afe8d', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '882146b18d16c9fe5033a6677a6a3281696af183', role: "list" }, h("slot", { key: '14491fd9df9d3901ae3c5f4473ddf2ebfe36a1fb', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'b077183b3a4abec4f40cd87974dac248b743fa13', name: "non-collapsed" }), h("slot", { key: 'fb3cb5779492c275cb47619766df150da71f4daa', name: "items-before-expand-btn" }), h("slot", { key: '86889f6be0e843b55cc8868df6abd9d7af4cf7d9', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: 'b5c680f8c61d7491ab5f180d566b2718d1fd684a', name: "items-after-expand-btn" })))));
+        return (h(Host, { key: 'f1c0ed14b8806df5c1ba717f6354d2e4c201dcd1' }, h("nav", Object.assign({ key: 'ae39ce6d5af6868105c1cb349d70d04da9931274', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '82f4a76da057076e5d7299df7972bb918220b6ac', role: "list" }, h("slot", { key: 'e3180e059e1467c9821e5d10b0694f39194ce4f4', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'e865695a1082a503321d519193f47c54f2d86ba5', name: "non-collapsed" }), h("slot", { key: '53a846e67fe320236a8f0b80216c72fa676304bb', name: "items-before-expand-btn" }), h("slot", { key: 'a6f9243e94d5f4e05e6e3ca89a574ac37128689a', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: '0ca62fc184565b82a12d1314bdfb51161934775b', name: "items-after-expand-btn" })))));
     }
     static get is() { return "wcs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BreadcrumbItem {
         this.last = false;
     }
     render() {
-        return (h(Host, { key: '6effffe4ccde341f04d1d84563fedfe1132266b1', role: "listitem" }, h("slot", { key: '812a6c9525e402c42242727e6ab5d82a790262d2' }), !this.last && (h("span", { key: 'c63d5dd46647a36bc57f1bc84379119b95bfde79', class: "item-icon", "aria-hidden": "true" }, ICONS_FONT_CHEVRON_UNICODE))));
+        return (h(Host, { key: '56e9780cd4ef4603b3a7364384222ffbc69bd4a5', role: "listitem" }, h("slot", { key: 'd3b484440c71efc646b2de9cb5f6ff8154887207' }), !this.last && (h("span", { key: '47eb0cbd394d31e46b0d919ab77d2f61d1d0aeef', class: "item-icon", "aria-hidden": "true" }, ICONS_FONT_CHEVRON_UNICODE))));
     }
     static get is() { return "wcs-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH,MAAM,OAAO,cAAc;;oBAQR,KAAK;;IAEpB,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACjB,8DAAQ;YACP,CAAC,IAAI,CAAC,IAAI,IAAI,CACX,6DAAM,KAAK,EAAC,WAAW,iBAAa,MAAM,IACrC,0BAA0B,CACxB,CACV,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;GAqBG;AAMH,MAAM,OAAO,cAAc;;oBAQC,KAAK;;IAE7B,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACjB,8DAAQ;YACP,CAAC,IAAI,CAAC,IAAI,IAAI,CACX,6DAAM,KAAK,EAAC,WAAW,iBAAa,MAAM,IACrC,0BAA0B,CACxB,CACV,CACE,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core';\n\nimport { ICONS_FONT_CHEVRON_UNICODE } from '../breadcrumb/breadcrumb-constants';\n\n/**\n * The breadcrumb item represents a link inside a breadcrumb.\n * \n * @slot <no-name> Main container slot\n * \n * @cssprop --wcs-breadcrumb-item-max-height - Maximum height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-line-height - Line height of the breadcrumb item\n * @cssprop --wcs-breadcrumb-item-font-size - Font size of the breadcrumb item\n * \n * @cssprop --wcs-breadcrumb-item-icon-color - Color of the breadcrumb item icon\n * @cssprop --wcs-breadcrumb-item-icon-font-size - Font size of the breadcrumb item icon\n * \n * @cssprop --wcs-breadcrumb-item-gap - Gap between text and chevron icon\n * @cssprop --wcs-breadcrumb-item-link-color - Color of the breadcrumb item link\n * @cssprop --wcs-breadcrumb-item-link-color-hover - Color of the breadcrumb item link when hovered\n * @cssprop --wcs-breadcrumb-item-link-font-weight - Font weight of the breadcrumb item link\n * \n * @cssprop --wcs-breadcrumb-item-border-width-focus - Border width of the breadcrumb item when focused\n * @cssprop --wcs-breadcrumb-item-border-color-focus - Border color of the breadcrumb item when focused\n * \n * @cssprop --wcs-breadcrumb-item-active-color - Color of the breadcrumb item when the link is active\n */\n@Component({\n    tag: 'wcs-breadcrumb-item',\n    styleUrl: 'breadcrumb-item.scss',\n    shadow: true,\n})\nexport class BreadcrumbItem implements ComponentInterface {\n    /**\n     * Automatically set by the parent breadcrumb.\n     * True if it is the last breadcrumb item.\n     * (You shouldn't set this prop by yourself) \n     * @internal\n     * @ignore\n     */\n    @Prop() last: boolean = false;\n\n    render() {\n        return (\n            <Host role=\"listitem\">\n                <slot />\n                {!this.last && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -1,6 +1,2 @@
-export const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
-export function isWcsButtonSize(size) {
-    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
-    return WcsButtonSizeValues.includes(size);
-}
+export {};
 //# sourceMappingURL=button-interface.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-interface.js","sourceRoot":"","sources":["../../../src/components/button/button-interface.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAI9J,MAAM,UAAU,eAAe,CAAC,IAAY;IACxC,2EAA2E;IAC3E,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C,CAAC","sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['s', '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 WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n"]}
+{"version":3,"file":"button-interface.js","sourceRoot":"","sources":["../../../src/components/button/button-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport type WcsButtonSize = Extract<WcsSize, 's' | 'm' | 'l'>;\n"]}

package/dist/collection/components/button/button.css

@@ -247,13 +247,13 @@
   margin: calc(-1 * var(--wcs-button-padding-size-l));
 }
 
-:host([size=m]) {
+:host, :host([size=m]) {
   --wcs-button-padding: 0 var(--wcs-button-padding-size-m);
   --wcs-button-height: var(--wcs-button-height-m);
   --wcs-button-min-width: var(--wcs-button-height-m);
   --wcs-button-font-size: var(--wcs-button-font-size-m);
 }
-:host([size=m]):host([shape=round]) ::slotted(wcs-mat-icon), :host([size=m]):host([shape=square]) ::slotted(wcs-mat-icon) {
+:host:host([shape=round]) ::slotted(wcs-mat-icon), :host:host([shape=square]) ::slotted(wcs-mat-icon), :host([size=m]):host([shape=round]) ::slotted(wcs-mat-icon), :host([size=m]):host([shape=square]) ::slotted(wcs-mat-icon) {
   margin: calc(-1 * var(--wcs-button-padding-size-m));
 }
 

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { MDCRipple } from "@material/ripple";
-import { isWcsButtonSize, WcsButtonSizeValues } from "./button-interface";
 import { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
 const BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];
 /**
@@ -92,10 +91,6 @@ export class Button {
         }
     }
     componentWillLoad() {
-        if (!isWcsButtonSize(this.size)) {
-            console.warn(`Invalid size value for wcs-button : "${this.size}". Must be one of "${WcsButtonSizeValues.join(', ')}"`);
-            this.size = "m"; // Default fallback value
-        }
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, BUTTON_INHERITED_ATTRS));
     }
     componentDidLoad() {
@@ -126,7 +121,7 @@ export class Button {
         const attrs = this.href !== undefined
             ? { href: this.href, role: 'button', target: this.target }
             : { type: this.type };
-        return (h(TagType, Object.assign({ key: '18b25d0989c1a0c118a40c5df3e6c6c500c258fa' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '346aea28ddb12d386a0001796dbced070079c1d7' }), h("slot", { key: 'e94cd7c713a5abcda793f98f99d368c5ba22d958' })));
+        return (h(TagType, Object.assign({ key: '0405add37ee45734819cae0f9e91507e979d1c9a' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '03debd8eb23a9db035b92c1e9f51e9fe44a6996b' }), h("slot", { key: 'c36416630b0987bd6ef750bfc7ef211c084dd942' })));
     }
     static get is() { return "wcs-button"; }
     static get encapsulation() { return "shadow"; }
@@ -324,7 +319,7 @@ export class Button {
                     "text": "Flag to display spinner until the end of action"
                 },
                 "attribute": "loading",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsButtonSize(this.size)) {\n            console.warn(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({ reflect: true, mutable: true }) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"card-interface.js","sourceRoot":"","sources":["../../../src/components/card/card-interface.ts"],"names":[],"mappings":"","sourcesContent":["export type CardMode = 'flat' | 'raised';\n"]}
+{"version":3,"file":"card-interface.js","sourceRoot":"","sources":["../../../src/components/card/card-interface.ts"],"names":[],"mappings":"","sourcesContent":["export type CardMode = 'flat' | 'raised';\nexport type CardOrientation = 'horizontal' | 'vertical';\n"]}

package/dist/collection/components/card/card.css

@@ -4,6 +4,7 @@
   --wcs-card-border-width: var(--wcs-semantic-border-width-default);
   --wcs-card-background-color: var(--wcs-semantic-color-background-surface-primary);
   --wcs-card-text-color: var(--wcs-semantic-color-text-primary);
+  --wcs-card-horizontal-min-height: 160px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -22,4 +23,13 @@
 
 :host([mode=flat]) {
   border: solid var(--wcs-card-border-width) var(--wcs-card-border-color);
+}
+
+:host([orientation=horizontal]) {
+  flex-direction: row;
+  min-height: var(--wcs-card-horizontal-height);
+}
+
+:host([orientation=vertical]) {
+  flex-direction: column;
 }

package/dist/collection/components/card/card.js

@@ -3,18 +3,48 @@ import { h } from "@stencil/core";
  * The card component is a container that display content such as text, images, buttons, and lists.
  * A card can be a single component, but is often made up of a header, title, subtitle, and content.
  *
+ * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
+ * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
+ *
+ * @slot - Default slot for the card content
+ *
  * @cssprop --wcs-card-border-color - Border color of the card
  * @cssprop --wcs-card-border-radius - Border radius of the card
  * @cssprop --wcs-card-border-width - Border width of the card
  * @cssprop --wcs-card-background-color - Background color of the card
  * @cssprop --wcs-card-text-color - Text color of the card
+ * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal
  */
 export class Card {
     constructor() {
         this.mode = 'flat';
+        this.orientation = null;
+    }
+    orientationChanged() {
+        this.updateWcsCardImageOrientation();
+    }
+    onSlotChange() {
+        if (this.orientation) {
+            this.updateWcsCardBodyOrientation();
+            this.updateWcsCardImageOrientation();
+        }
+    }
+    updateWcsCardImageOrientation() {
+        var _a;
+        (_a = this.findWcsCardMedia()) === null || _a === void 0 ? void 0 : _a.setOrientation(this.orientation);
+    }
+    updateWcsCardBodyOrientation() {
+        var _a;
+        (_a = this.findWcsCardBody()) === null || _a === void 0 ? void 0 : _a.setOrientation(this.orientation);
+    }
+    findWcsCardMedia() {
+        return this.el.querySelector('wcs-card-media');
+    }
+    findWcsCardBody() {
+        return this.el.querySelector('wcs-card-body');
     }
     render() {
-        return (h("slot", { key: 'da921d2df1dcee64b8e8edd17805e37a15544f05' }));
+        return (h("slot", { key: '20a57cf8fc64155e65a98bdb69618ec013ea5a7f', onSlotchange: () => this.onSlotChange() }));
     }
     static get is() { return "wcs-card"; }
     static get encapsulation() { return "shadow"; }
@@ -53,8 +83,39 @@ export class Card {
                 "attribute": "mode",
                 "reflect": true,
                 "defaultValue": "'flat'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CardOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "CardOrientation": {
+                            "location": "import",
+                            "path": "./card-interface",
+                            "id": "src/components/card/card-interface.ts::CardOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of the card, can be horizontal or vertical"
+                },
+                "attribute": "orientation",
+                "reflect": true,
+                "defaultValue": "null"
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "orientationChanged"
+            }];
+    }
 }
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGvE;;;;;;;;;GASG;AAMH,MAAM,OAAO,IAAI;;oBAEI,MAAM;;IAGvB,MAAM;QACF,OAAO,CACH,8DAAO,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop } from '@stencil/core';\nimport { CardMode } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.  \n *\n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n\n\n    render() {\n        return (\n            <slot/>\n        );\n    }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGvF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,IAAI;;oBAGI,MAAM;2BAKQ,IAAI;;IAGnC,kBAAkB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACzC,CAAC;IAEO,YAAY;QAChB,IAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAClB,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACzC,CAAC;IACL,CAAC;IAEO,6BAA6B;;QACjC,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9D,CAAC;IAEO,4BAA4B;;QAChC,MAAA,IAAI,CAAC,eAAe,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7D,CAAC;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACnD,CAAC;IAEO,eAAe;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,CACnD,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"]}

package/dist/collection/components/card-body/card-body.css

@@ -1,5 +1,16 @@
 :host {
-  --wcs-card-body-padding: var(--wcs-semantic-spacing-large);
+  --wcs-card-body-padding: var(--wcs-semantic-spacing-base-300);
+  --wcs-card-body-gap: var(--wcs-semantic-spacing-base);
   flex: 1 1 auto;
   padding: var(--wcs-card-body-padding);
+}
+
+:host(.horizontal), :host(.vertical) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wcs-card-body-gap);
+}
+
+::slotted(p) {
+  margin: 0;
 }