@ukic/web-components 3.14.0 → 3.16.0

package/dist/collection/components/ic-search-bar/ic-search-bar.stories.js

@@ -27,7 +27,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar label="What is your favourite coffee?">
     </ic-search-bar>`,
 
@@ -35,7 +35,7 @@ export const Default = {
 };
 
 export const Basic = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
       <script>
         document.querySelector("ic-search-bar").options = [
@@ -54,7 +54,7 @@ export const Basic = {
 };
 
 export const WithCustomLabelAndValueFields = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         label-field="urn"
@@ -77,7 +77,7 @@ export const WithCustomLabelAndValueFields = {
 };
 
 export const WithOptions = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         value="Flat White"
@@ -103,7 +103,7 @@ export const WithOptions = {
 };
 
 export const WithOptionsNoFiltering = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         disable-auto-filtering
@@ -125,7 +125,7 @@ export const WithOptionsNoFiltering = {
 };
 
 export const InAForm = {
-  render: (args) =>
+  render: () =>
     html` <form>
       <ic-search-bar
         name="search-01"
@@ -137,7 +137,7 @@ export const InAForm = {
 };
 
 export const HelperText = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         helper-text="Some helper text"
@@ -168,7 +168,7 @@ export const HelperText = {
 };
 
 export const Small = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
       label="What is your favourite coffee?"
       size="small"
@@ -178,7 +178,7 @@ export const Small = {
 };
 
 export const HiddenLabel = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
       label="What is your favourite coffee?"
       hide-label
@@ -188,7 +188,7 @@ export const HiddenLabel = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
       label="What is your favourite coffee?"
       disabled
@@ -198,7 +198,7 @@ export const Disabled = {
 };
 
 export const FullWidth = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         full-width
@@ -224,7 +224,7 @@ export const FullWidth = {
 };
 
 export const ExternalFiltering = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="Search for coffee"
         placeholder="Type to search"
@@ -288,7 +288,7 @@ export const ExternalFiltering = {
 };
 
 export const ExternalFilteringWithLoading = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="Search for coffee"
         placeholder="Type to search"
@@ -356,7 +356,7 @@ export const ExternalFilteringWithLoading = {
 };
 
 export const ExternalFilteringWithCustomLoadingMessages = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="Search for coffee"
         placeholder="Type to search"
@@ -426,7 +426,7 @@ export const ExternalFilteringWithCustomLoadingMessages = {
 };
 
 export const QuerySearchMode = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         search-mode="query"
@@ -447,7 +447,7 @@ export const QuerySearchMode = {
 };
 
 export const EmptyOptionListText = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         empty-option-list-text="There's nothing here"
@@ -468,7 +468,7 @@ export const EmptyOptionListText = {
 };
 
 export const CharactersUntilSuggestion = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         characters-until-suggestion="5"
@@ -489,7 +489,7 @@ export const CharactersUntilSuggestion = {
 };
 
 export const HintText = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar
         label="What is your favourite coffee?"
         assistive-hint-text="You can use up and down arrows to navigate the options when they are available, and press enter to select an option."
@@ -511,7 +511,7 @@ export const HintText = {
 };
 
 export const LongOptionLabels = {
-  render: (args) =>
+  render: () =>
     html` <ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
       <script>
         document.querySelector("ic-search-bar").options = [

package/dist/collection/components/ic-section-container/ic-section-container.js

@@ -12,12 +12,12 @@ export class SectionContainer {
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '343b4d46f49af4458ad961d31de6118927b5e3ec', class: {
+        return (h(Host, { key: '67c1b4b2afe62fc53812421ee49c01bf689e05b4', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '96932a21be0e230d9d15e05f09b8da67f772dd2b' })));
+            } }, h("slot", { key: 'cb21cb372b6131cfb990ac0a016f6c64641749f9' })));
     }
     static get is() { return "ic-section-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -466,7 +466,7 @@ video {
   --border-color-warning: var(--ic-select-field-border-warning);
   --border-color-warning-hover: var(--ic-select-field-border-warning-hover);
   --border-color-warning-pressed: var(--ic-select-field-border-warning-pressed);
-  --ic-input-label-text-color: var(--ic-select-field-labe);
+  --ic-input-label-text-color: var(--ic-select-field-label);
   --ic-input-label-helper-text-color: var(
     --ic-select-input-field-label-subtitle
   );

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

@@ -794,18 +794,18 @@ export class Select {
             (searchable
                 ? !!searchableSelectInputValue
                 : !!currValue && !loading && showClearButton);
-        return (h(Host, { key: 'f4a2c999048b3813c72f19cb9d12b179a1aa2829', class: {
+        return (h(Host, { key: 'beb04e2fdc2db5765b24622f4d31bfdf36c61ba6', class: {
                 "ic-select-disabled": disabled,
                 "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
                 "ic-select-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, h("ic-input-container", { key: '26ca71ed868b6154ae6d85b12176cbd2c245a2a1', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: 'fbc267c35b7408673080578c7223713bbbc63487', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '6614423a784d3c8afb82685721ac76044a541b2c', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '22f3497287a6dffa909d12ab7cf56dcc350580ff', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'e85323a8778251dca9d78ccc76906c7523a8f02a', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '9bd3a6662c29157c323beee7355ec0983a0a83e9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: 'ba0fc93028a2ff25112730a950381a25bee23b54', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'c7d54f4d61bcb41cfbb3c4af1600a783e696121f', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
             !disabled &&
-            (!readonly || !!value) && (h("span", { key: '2103e465e79ce43a400ab208cd3fa41f8d9a4897', slot: "left-icon", class: {
+            (!readonly || !!value) && (h("span", { key: '891b11b3008d52ac3db2197c372b21a12a9f431e', slot: "left-icon", class: {
                 readonly,
                 "has-value": !!value,
-            } }, h("slot", { key: '626f074a90189f115c112e179ffd5c1e28ac17c6', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
+            } }, h("slot", { key: '9fc291a9f0b756bf31331260ea3c313cdecf8fa2', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
                 "value-text": true,
                 "select-input": true,
                 "with-clear-button": !!searchableSelectInputValue,
@@ -826,7 +826,7 @@ export class Select {
             } }, valueLabelString || placeholder), h("div", { class: "select-input-end" }, isClearable && h("div", { class: "divider" }), h("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: 'e309813f2a75cf0eb862f6c1b06cf34a81ded8f1', class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: 'b56cf5adc26838ad0f873aa16df8da7fd7b83d22', class: {
                 "no-results": loading ||
                     hasTimedOut ||
                     (searchable &&
@@ -835,7 +835,7 @@ export class Select {
                         ((_d = (_c = this.uniqueOptions) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.label) === emptyOptionListText),
             }, ref: (el) => (this.menu = el), inputEl: searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple, multiSelect: multiple ? true : false, searchableSelect: searchable ? true : false })), multiple && (h("div", { key: '4d029c5c9543fe25438a856df7a6dcde941ed648', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: 'f709f7940485a6fa673a1fe7cb14a636e53fa151', class: {
+                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple, multiSelect: multiple ? true : false, searchableSelect: searchable ? true : false })), multiple && (h("div", { key: 'c4e7606e119c8658e590716ff02dcaf45f30ae89', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: 'b74ff136f8b758c400d9c0262a227f2286b301d5', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }

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-select/ic-select_(single).stories.js

@@ -821,9 +821,18 @@ export const EmittingIcOptionSelectOnEnter = {
   name: "Emitting icOptionSelect on enter",
 };
 
-export const CustomPropsOnLiElements = {
+export const Internationalisation = {
   render: () =>
-    html`<ic-select
+    html` <p>
+        The first select is wrapped in a <code>&lt;span lang="fr"&gt;</code> to
+        change the language. All options will read in french, which can be
+        tested using a screen reader.
+      </p>
+      <span lang="fr">
+        <ic-select id="select-lang" label="Boisson Préférée"></ic-select>
+      </span>
+      <hr />
+      <ic-select
         id="select-custom-li-props"
         label="What is your favourite coffee?"
       ></ic-select>
@@ -834,8 +843,15 @@ export const CustomPropsOnLiElements = {
         reader.
       </p>
       <script>
-        var select = document.querySelector("#select-custom-li-props");
-        select.options = [
+        var select1 = document.querySelector("#select-lang");
+        select1.options = [
+          { label: "Chocolat Chaud", value: "choc" },
+          { label: "Jus", value: "jus" },
+          { label: "Limonade", value: "lim" },
+        ];
+        var select2 = document.querySelector("#select-custom-li-props");
+        select2.options = [
+          { label: "Flat White", value: "Fla", htmlProps: { lang: "en-GB" } },
           { label: "Cappuccino", value: "Cap", htmlProps: { lang: "it" } },
           { label: "Latte", value: "Lat", htmlProps: { lang: "it" } },
           { label: "Americano", value: "Ame", htmlProps: { lang: "it" } },
@@ -845,7 +861,7 @@ export const CustomPropsOnLiElements = {
         });
       </script>`,
 
-  name: "Custom props on <li>s",
+  name: "Internationalisation (+ options with htmlProps)",
 };
 
 const inlineRadioSelector = "inline-radio";