@ukic/web-components 3.15.0 → 3.16.0

package/dist/collection/components/ic-select/ic-select_(multi).stories.js

@@ -25,7 +25,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-default"
         label="What are your favourite types of coffee?"
@@ -66,7 +66,7 @@ export const Default = {
 };
 
 export const AsyncDefault = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         label="What are your favourite types of coffee?"
         id="select-async"
@@ -96,7 +96,7 @@ export const AsyncDefault = {
 };
 
 export const DefaultValue = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-default-value"
         label="What are your favourite types of coffee?"
@@ -123,7 +123,7 @@ export const DefaultValue = {
 };
 
 export const WithClearButton = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-clear"
         label="What are your favourite types of coffee?"
@@ -150,7 +150,7 @@ export const WithClearButton = {
 };
 
 export const WithDescriptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-descriptions"
         label="What are your favourite types of coffee?"
@@ -206,7 +206,7 @@ export const WithDescriptions = {
 };
 
 export const HelperText = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         label="What are your favourite types of coffee?"
         multiple
@@ -241,7 +241,7 @@ export const HelperText = {
 };
 
 export const CustomPlaceholder = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-placeholder"
         label="What are your favourite types of coffee?"
@@ -268,7 +268,7 @@ export const CustomPlaceholder = {
 };
 
 export const CustomComponents = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-custom-components"
         label="What are your favourite types of coffee?"
@@ -311,7 +311,7 @@ export const CustomComponents = {
 };
 
 export const Sizes = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: flex; flex-direction: column; gap: 16px;">
       <ic-select
         id="select-size-small"
@@ -381,7 +381,7 @@ export const Sizes = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-disabled"
         label="What are your favourite types of coffee?"
@@ -408,7 +408,7 @@ export const Disabled = {
 };
 
 export const DisabledOptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-disabled-options"
         label="What are your favourite types of coffee?"
@@ -434,7 +434,7 @@ export const DisabledOptions = {
 };
 
 export const FullWidth = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-full-width"
         label="What are your favourite types of coffee?"
@@ -461,7 +461,7 @@ export const FullWidth = {
 };
 
 export const HiddenLabel = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-hidden-label"
         label="What are your favourite types of coffee?"
@@ -488,7 +488,7 @@ export const HiddenLabel = {
 };
 
 export const Required = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-required"
         label="What are your favourite types of coffee?"
@@ -543,7 +543,7 @@ export const ReadOnly = {
 };
 
 export const Groups = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-groups"
         label="What are your favourite types of coffee?"
@@ -576,7 +576,7 @@ export const Groups = {
 };
 
 export const Recommended = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-recommended"
         label="What are your favourite types of coffee?"
@@ -602,7 +602,7 @@ export const Recommended = {
 };
 
 export const Validation = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-success"
         label="What are your favourite types of coffee?"
@@ -674,7 +674,7 @@ export const Validation = {
 };
 
 export const ScrollBehaviour = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-scroll"
         label="What are your favourite types of coffee?"
@@ -705,7 +705,7 @@ export const ScrollBehaviour = {
 };
 
 export const LoadingWithError = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-loading"
         label="What are your favourite types of coffee?"
@@ -736,7 +736,7 @@ export const LoadingWithError = {
 };
 
 export const InForm = {
-  render: (args) => html`
+  render: () => html`
     <form>
       <ic-select
         id="select-form"

package/dist/collection/components/ic-select/ic-select_(searchable).stories.js

@@ -27,7 +27,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-default"
         label="What is your favourite coffee?"
@@ -65,7 +65,7 @@ export const Default = {
 };
 
 export const AsyncDefault = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-async"
         label="What is your favourite coffee?"
@@ -95,7 +95,7 @@ export const AsyncDefault = {
 };
 
 export const DefaultValue = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-default-value"
         label="What is your favourite coffee?"
@@ -122,7 +122,7 @@ export const DefaultValue = {
 };
 
 export const FilterByStartOfOptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-filter-start"
         label="What is your favourite coffee?"
@@ -149,7 +149,7 @@ export const FilterByStartOfOptions = {
 };
 
 export const WithDescriptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-descriptions"
         label="What is your favourite coffee?"
@@ -205,7 +205,7 @@ export const WithDescriptions = {
 };
 
 export const WithDescriptionsIncludedInSearch = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-descriptions-included"
         label="What is your favourite coffee?"
@@ -262,7 +262,7 @@ export const WithDescriptionsIncludedInSearch = {
 };
 
 export const HelperText = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         label="What is your favourite coffee?"
         searchable
@@ -297,7 +297,7 @@ export const HelperText = {
 };
 
 export const Sizes = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: flex; flex-direction: column; gap: 16px;">
       <ic-select
         id="select-size-small"
@@ -367,7 +367,7 @@ export const Sizes = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-disabled"
         label="What is your favourite coffee?"
@@ -394,7 +394,7 @@ export const Disabled = {
 };
 
 export const DisabledOptions = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-disabled-options"
         label="What is your favourite coffee?"
@@ -420,7 +420,7 @@ export const DisabledOptions = {
 };
 
 export const HiddenLabel = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-hidden-label"
         label="What is your favourite coffee?"
@@ -447,7 +447,7 @@ export const HiddenLabel = {
 };
 
 export const Required = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-required"
         label="What is your favourite coffee?"
@@ -474,7 +474,7 @@ export const Required = {
 };
 
 export const Groups = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-groups"
         label="What is your favourite coffee?"
@@ -507,7 +507,7 @@ export const Groups = {
 };
 
 export const GroupsGroupTitlesIncludedInSearch = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-groups-included"
         label="What is your favourite coffee?"
@@ -541,7 +541,7 @@ export const GroupsGroupTitlesIncludedInSearch = {
 };
 
 export const Recommended = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-recommended"
         label="What is your favourite coffee?"
@@ -567,7 +567,7 @@ export const Recommended = {
 };
 
 export const Validation = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-success"
         label="What is your favourite coffee?"
@@ -642,7 +642,7 @@ export const Validation = {
 };
 
 export const ScrollBehaviour = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-scroll"
         label="What is your favourite coffee?"
@@ -672,7 +672,7 @@ export const ScrollBehaviour = {
 };
 
 export const ExternalFiltering = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         label="What is your favourite coffee?"
         searchable
@@ -742,7 +742,7 @@ export const ExternalFiltering = {
 };
 
 export const InForm = {
-  render: (args) => html`
+  render: () => html`
     <form>
       <ic-select
         id="select-form"
@@ -775,7 +775,7 @@ export const InForm = {
 };
 
 export const UpdateInputValueFromExternalRequest = {
-  render: (args) =>
+  render: () =>
     html`<ic-section-container>
         <ic-select
           id="select-external-request"
@@ -811,7 +811,7 @@ export const UpdateInputValueFromExternalRequest = {
 };
 
 export const EmittingIcOptionSelectOnEnter = {
-  render: (args) =>
+  render: () =>
     html`<ic-select
         id="select-icoptionselect"
         label="What is your favourite coffee?"

package/dist/collection/components/ic-tab-context/ic-tabs.stories.js

@@ -203,7 +203,7 @@ export const NestedTabs = {
 };
 
 export const IcTabSelectEvent = {
-  render: (args) =>
+  render: () =>
     html`<ic-tab-context>
         <ic-tab-group label="Example tab group">
           <ic-tab>One</ic-tab>

package/dist/collection/components/ic-text-field/ic-text-field.stories.js

@@ -41,7 +41,7 @@ const defaultArgs = {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field label="What is your favourite coffee?"> </ic-text-field>
       <ic-text-field rows="6" label="What is your favourite coffee?">
       </ic-text-field>`,
@@ -50,7 +50,7 @@ export const Default = {
 };
 
 export const Autofocus = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field autofocus label="What is your favourite coffee?">
     </ic-text-field>`,
 
@@ -58,7 +58,7 @@ export const Autofocus = {
 };
 
 export const PlaceholderAndRequired = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         label="What is your favourite coffee?"
         required
@@ -77,7 +77,7 @@ export const PlaceholderAndRequired = {
 };
 
 export const HelperText = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         label="What is your favourite coffee?"
         required
@@ -109,7 +109,7 @@ export const HelperText = {
 };
 
 export const WithIcon = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         label="What is your favourite coffee?"
         required
@@ -156,7 +156,7 @@ export const WithIcon = {
 };
 
 export const WithValue = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         value="Arabica"
         label="What is your favourite coffee?"
@@ -205,7 +205,7 @@ export const WithValue = {
 };
 
 export const CustomWidth = {
-  render: (args) =>
+  render: () =>
     html`<style>
         ic-text-field {
           --input-width: 400px;
@@ -264,7 +264,7 @@ export const CustomWidth = {
 };
 
 export const FullWidth = {
-  render: (args) =>
+  render: () =>
     html`<div style="display: flex">
         <ic-text-field
           full-width="true"
@@ -322,7 +322,7 @@ export const FullWidth = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         value="Arabica"
         label="What is your favourite coffee?"
@@ -416,7 +416,7 @@ export const Disabled = {
 };
 
 export const ReadOnly = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         value="Arabica"
         max-characters="25"
@@ -486,7 +486,7 @@ export const ReadOnly = {
 };
 
 export const Validation = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         validation-status="success"
         validation-text="Good choice!"
@@ -802,7 +802,7 @@ export const Validation = {
 };
 
 export const AriaLiveBehaviour = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         id="field-1"
         label="What is your favourite coffee?"
@@ -886,7 +886,7 @@ export const AriaLiveBehaviour = {
 };
 
 export const TextAreaWithResize = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
       rows="6"
       value="Arabica"
@@ -915,7 +915,7 @@ export const TextAreaWithResize = {
 };
 
 export const Form = {
-  render: (args) => html`
+  render: () => html`
     <form>
       <ic-text-field label="What is your favourite coffee?"></ic-text-field>
       <br />
@@ -937,7 +937,7 @@ export const Form = {
 };
 
 export const MinAndMax = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         inputmode="numeric"
         label="How many coffees do you want?"
@@ -963,7 +963,7 @@ export const MinAndMax = {
 };
 
 export const LoggingIcChange = {
-  render: (args) =>
+  render: () =>
     html`<script>
         function handleIcChange(ev) {
           console.log(ev.detail.value, "icChange");
@@ -978,7 +978,7 @@ export const LoggingIcChange = {
 };
 
 export const LoggingIcKeydown = {
-  render: (args) =>
+  render: () =>
     html`<script>
         function handleIcChange(ev) {
           console.log(ev.detail.value, "icChange");
@@ -1000,7 +1000,7 @@ export const LoggingIcKeydown = {
 };
 
 export const MaximumAndMinimumCharacters = {
-  render: (args) =>
+  render: () =>
     html`<ic-text-field
         max-characters="2"
         label="What is your favourite coffee?"
@@ -1034,7 +1034,7 @@ export const MaximumAndMinimumCharacters = {
 };
 
 export const Internationalisation = {
-  render: (args) =>
+  render: () =>
     html`<span lang="fr">
       <ic-text-field
         label="Boisson préférée"

package/dist/collection/components/ic-toast/ic-toast.css

@@ -482,6 +482,7 @@ video {
   display: flex;
   align-items: center;
   position: relative;
+  border: var(--ic-space-1px) solid var(--ic-color-border-neutral-grey);
   border-radius: var(--ic-border-radius);
 }
 
@@ -491,11 +492,35 @@ video {
   align-items: center;
 }
 
+.container-neutral {
+  border-color: var(--ic-toast-status-neutral);
+}
+
+.container-info {
+  border-color: var(--ic-toast-status-info);
+}
+
+.container-warning {
+  border-color: var(--ic-toast-status-warning);
+}
+
+.container-error {
+  border-color: var(--ic-toast-status-error);
+}
+
+.container-success {
+  border-color: var(--ic-toast-status-success);
+}
+
+.container-ai {
+  border-color: var(--ic-toast-status-ai);
+}
+
 .divider {
   height: 100%;
   width: var(--ic-space-xs);
   position: absolute;
-  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);
+  border-radius: 0;
 }
 
 .divider-neutral {

package/dist/collection/components/ic-toast/ic-toast.js

@@ -14,6 +14,10 @@ export class Toast {
         this.interactiveElements = [];
         this.timerProgress = 100;
         this.visible = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         /**
          * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)
          * (NOTE: Has a minimum value of `5000ms`)
@@ -201,17 +205,21 @@ export class Toast {
             : document.activeElement === targetEl;
     }
     render() {
-        const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
-        return (h(Host, { key: '55d26c71146d769a0b652ddb3d9b5eb02229a209', class: {
+        const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, theme, } = this;
+        return (h(Host, { key: '9934a16e3f339bec971138aec7d46092216d5554', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-toast-hidden"]: !visible,
                 [`ic-toast-variant-${variant}`]: variant !== undefined,
-            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: 'a5129ddaeadff62ac431dbfb8e985223fddd429e', class: "container" }, variant && visible && (h("div", { key: '401b3a7a01b672455ec261ad4bf3898b803bc406', class: "toast-icon-container" }, h("div", { key: '3eeae38b6e8ae5b190cb3ced2205b5a4395c017b', class: {
+            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '97a03d41017adf58f826e42291906b3225ab091c', class: {
+                ["container"]: true,
+                [`container-${variant}`]: variant !== undefined,
+            } }, variant && visible && (h("div", { key: '289b4544bee27fd02b20deae22b5bbb822844c9e', class: "toast-icon-container" }, h("div", { key: '03dae21944b95c1d96e2a6b2480b0c20e12ccbd7', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: 'dc83b42b58d37a5c5cdd338f6d17ea8138eb8b1b', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '6191a3f5c39adfa8c5ab4ca5c9e35fd214e00fa2', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: '80eac70ac19f219cc1ae6c3c0d3aac1bf9748768', class: "toast-text" }, h("ic-typography", { key: '02bb286b55ae5b5fe3024560f97f42857a964223', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: 'b730941336f3dc5fdb50d8a153167f2d7509b6a7', variant: "body", class: "toast-message" }, visible && h("p", { key: '5be56cff443e472fe6ed6649936075d4eadc5d17' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '0131809b3d15fb6deb0f754f435847fc6d2a641d', class: "toast-action-container" }, h("slot", { key: '976eb515b8bcb269ec810b4dd5f5519edce3f215', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: '1e08fbbfa2ba920c1b90f2eaf35aa801830d47b0', class: "toast-text" }, h("ic-typography", { key: 'ebc61cb12c3bdd05511ae567d09f5504ad010c47', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '48ffe5377a09237ac490c8d4a62e962979ce6dc0', variant: "body", class: "toast-message" }, visible && h("p", { key: '7fbffa0f6e6d30389a9d0e5a3b5e1c279911ed9a' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '83ba75d3d7aa54caf13cc7723defee623103dffc', class: "toast-action-container" }, h("slot", { key: '18367dd5f8acdc33129ead64728abc71a82f7e57', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
     }
     static get is() { return "ic-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -227,6 +235,32 @@ export class Toast {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "autoDismissTimeout": {
                 "type": "number",
                 "mutable": true,