@ebrains/components 3.0.0 → 3.1.0

package/dist/collection/components/eds-input-elements/eds-input-search/eds-input-search.js

@@ -66,7 +66,7 @@ export class EdsInputSearch {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '849afaf3483b07fd2579d1138fbc1c1eee3930be', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '1b9a30ee46d4575116b585efe8a2d0c6d6b83b39', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '174fc93f10851aec47cb440895105c34600de601', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+        return (h("div", { key: '52676b3559e14b5153f7d8f0fa6cd12e49354d87', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '754e8753607c01dab63d156d306f3325547049aa', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'b49d523195711316c0817de67776d379a6c7248b', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }

package/dist/collection/components/eds-input-elements/eds-input-search/eds-input-search.stories.js

@@ -0,0 +1,30 @@
+export default {
+    title: 'Components/Inputs/Search',
+    component: 'eds-input-search',
+    argTypes: {
+        label: { control: 'text', description: 'Accessible label for the search field.' },
+        placeholder: { control: 'text', description: 'Placeholder text.' },
+        value: { control: 'text', description: 'Current value of the search field.' },
+        disabled: { control: 'boolean', description: 'If true, the input is disabled.' },
+        required: { control: 'boolean', description: 'If true, the input is required.' }
+    },
+    args: {
+        label: 'Search',
+        placeholder: 'Search…',
+        disabled: false,
+        required: false
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-input-search
+      name="search-box"
+      input-id="search-main"
+      ${args.label ? `label="${args.label}"` : ''}
+      ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
+      ${args.value ? `value="${args.value}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}
+      ${args.required ? 'required="true"' : ''}
+    ></eds-input-search>
+  `
+};

package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -26,12 +26,12 @@ export class EdsInputSelect {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: 'c2f809a88f8b9eab6a36b86bb49daaa39ac1a832', class: "relative" }, h("select", { key: '0847d6526bd118db744627279d96a979dafd19d1', id: selectId, name: this.name, class: {
+        return (h("div", { key: '8365ffbc8f6f6386edfc1626d16c9152fd3cce9f', class: "relative" }, h("select", { key: '52e712898a3251cea5447a379886449175e7c8b8', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '1d66602cc92028fddfd047bb2fc79c8f3602ba8e', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '40f750ff55b0ac5707c4010868835c6d82537d17', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: 'ef8c068e287819be7228940bfbe0b8b923e22087', class: "w-20 h-20", name: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'd52c376ffb683abc0dec72177dba445273d148f7', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'fecbcb47793f8a57de44711b33d3650be5297aa7', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '4fda1345a62eeb212093057382d877f31bb6112d', class: "w-20 h-20", name: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {

package/dist/collection/components/eds-input-field/eds-input-field.js

@@ -114,9 +114,12 @@ export class EdsInputField {
         return [];
     }
     render() {
-        const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error, icon: this.icon, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
-        return (h("div", { key: '1568054341b82bcaa01ffe4a48092d5f25a639ed' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4" }, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (h("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
-            var _a, _b, _c;
+        const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error,
+            // Icons are only supported on text inputs for now — ignore the prop for
+            // every other type so e.g. number/select/checkbox never render one.
+            icon: this.type === 'text' ? this.icon : undefined, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
+        return (h("div", { key: '2072cce16b572431b41363beff779d8631de7abc' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4" }, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { inputId: `${this.inputId || this.name}-${option.value}`, inputTabIndex: 0, value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: `${this.inputId || this.name}-${option.value}`, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { inputTabIndex: 0, value: this.value, checked: this.value === 'on' || this.checked })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (h("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'range' ? ((() => {
+            var _a, _b, _c, _d, _e, _f;
             const rangeProps = {
                 name: inputOpts.name,
                 inputId: inputOpts.id || inputOpts.name,
@@ -127,8 +130,11 @@ export class EdsInputField {
             };
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
-            return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: '5df838f8bf73bc9e0dfa0792f76ad1b958f3d1fc', class: "mt-6" }, h("eds-input-footer", { key: 'daf5d0fd8d9cca3241e760b740a47e2663c3e665', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+            // Prefer the explicit min/max/step props (consistent with
+            // type="number"); fall back to options[0..2].value for
+            // backward compatibility with existing range fields.
+            return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = this.min) !== null && _a !== void 0 ? _a : (_b = opt[0]) === null || _b === void 0 ? void 0 : _b.value, max: (_c = this.max) !== null && _c !== void 0 ? _c : (_d = opt[1]) === null || _d === void 0 ? void 0 : _d.value, step: (_e = this.step) !== null && _e !== void 0 ? _e : (_f = opt[2]) === null || _f === void 0 ? void 0 : _f.value, value: numberValue })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: 'f3ab7ef07c5c35f6d5e5d7a3ec35f98fe133ab5b', class: "mt-6" }, h("eds-input-footer", { key: 'a72af69114cd3916e9ffa6ca8a65dced572dadf7', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
     }
     static get is() { return "eds-input-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-input-field/eds-input-field.stories.js

@@ -1,52 +1,68 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the template treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Input Field',
     component: 'eds-input-field',
     argTypes: {
-        name: { control: 'text', description: 'Name attribute of the input field' },
-        inputId: { control: 'text', description: 'ID attribute of the input field' },
-        placeholder: { control: 'text', description: 'Placeholder text for the input field' },
-        disabled: { control: 'boolean', description: 'Whether the input field is disabled' },
+        // ── Core ──
         type: {
             control: 'select',
-            options: ['text', 'checkbox', 'radio', 'select', 'password', 'file', 'number', 'range'],
-            description: 'Type of the input field'
+            options: ['text', 'checkbox', 'radio', 'select', 'password', 'file', 'dropzone', 'number', 'range'],
+            description: 'Type of the input field',
+            table: { category: 'Core' }
         },
-        required: { control: 'boolean', description: 'Whether the input field is required' },
-        label: { control: 'text', description: 'Label for the input field' },
-        hint: { control: 'text', description: 'Hint text to provide additional guidance' },
-        icon: { control: 'text', description: 'Icon name to display in the input field' },
-        link: {
-            control: 'object',
-            description: 'An object containing the link URL and label'
-        },
-        min: {
-            control: 'number',
-            description: 'Minimum value for number or range inputs'
-        },
-        max: {
-            control: 'number',
-            description: 'Maximum value for number or range inputs'
-        },
-        step: {
-            control: 'number',
-            description: 'Step value for number or range inputs'
-        },
-        message: { control: 'text', description: 'Message displayed below the input field' },
-        error: { control: 'boolean', description: 'Whether the input field is in an error state' },
+        name: { control: 'text', description: 'Name attribute of the input field', table: { category: 'Core' } },
+        label: { control: 'text', description: 'Label for the input field', table: { category: 'Core' } },
+        placeholder: { control: 'text', description: 'Placeholder text', table: { category: 'Core' } },
+        // ── State & validation ──
+        required: { control: 'boolean', description: 'Whether the input is required', table: { category: 'State & validation' } },
+        disabled: { control: 'boolean', description: 'Whether the input is disabled', table: { category: 'State & validation' } },
+        error: { control: 'boolean', description: 'Render the input in an error state', table: { category: 'State & validation' } },
+        errorMessage: { control: 'text', description: 'Error message shown when invalid', table: { category: 'State & validation' } },
         checked: {
             control: 'boolean',
-            description: 'Whether the input field is checked (for checkbox/radio)'
+            description: 'Checked state (checkbox/radio only)',
+            table: { category: 'State & validation' },
+            if: { arg: 'type', eq: 'checkbox' }
         },
-        errorMessage: {
-            control: 'text',
-            description: 'Error message displayed when the input is invalid'
+        // ── Helper text & decoration ──
+        hint: { control: 'text', description: 'Hint text next to the label', table: { category: 'Helper & decoration' } },
+        message: { control: 'text', description: 'Message displayed below the input', table: { category: 'Helper & decoration' } },
+        icon: {
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Icon name to display inside the input (from the EDS icon set)',
+            table: { category: 'Helper & decoration' }
         },
-        value: { control: 'text', description: 'Value of the input field' },
-        maxLength: { control: 'number', description: 'Maximum length for the input value' },
+        link: { control: 'object', description: 'Help/docs link `{ url, label }`', table: { category: 'Helper & decoration' } },
+        maxLength: { control: 'number', description: 'Maximum length for text input', table: { category: 'Helper & decoration' } },
+        // ── Number & range (min/max/step apply to type="number" and type="range") ──
+        min: { control: 'number', description: 'Minimum value (number & range)', table: { category: 'Number & range' } },
+        max: { control: 'number', description: 'Maximum value (number & range)', table: { category: 'Number & range' } },
+        step: { control: 'number', description: 'Step value (number & range)', table: { category: 'Number & range' } },
+        // ── Choices ──
         options: {
             control: 'object',
-            description: 'Options for select, checkbox, or radio input types'
+            description: 'Choices for select/checkbox/radio. For type="range", min/max/step props are preferred; options[0..2].value is a legacy fallback.',
+            table: { category: 'Choices' }
         }
+    },
+    // Default args so the Controls panel opens populated. The single-attribute
+    // variations (error, message, hint, value, maxLength, icon, link, disabled,
+    // password, custom icon, single checkbox/radio) are all reachable by toggling
+    // these controls — that's why they no longer need their own stories.
+    args: {
+        name: 'username',
+        placeholder: 'Enter your username',
+        type: 'text',
+        required: true,
+        label: 'Username',
+        hint: 'Choose a unique handle',
+        message: 'Your username should be unique.',
+        icon: 'user',
+        link: { url: 'https://docs.ebrains.eu', label: 'Help' }
     }
 };
 const Template = (args) => {
@@ -62,7 +78,6 @@ const Template = (args) => {
       ${args.required ? `required="${args.required}"` : ''}
       ${args.label ? `label="${args.label}"` : ''}
       ${args.hint ? `hint="${args.hint}"` : ''}
-      ${args.link ? `link="${args.link}"` : ''}
       ${args.icon ? `icon="${args.icon}"` : ''}
       ${args.min !== undefined ? `min="${args.min}"` : ''}
       ${args.max !== undefined ? `max="${args.max}"` : ''}
@@ -78,36 +93,11 @@ const Template = (args) => {
     ></eds-input-field>
   `;
 };
-export const BasicTextInput = Template.bind({});
-BasicTextInput.args = {
-    name: 'username',
-    inputId: 'username-input',
-    placeholder: 'Enter your username',
-    type: 'text',
-    required: true,
-    label: 'Username'
-};
-export const PasswordInputWithHint = Template.bind({});
-PasswordInputWithHint.args = {
-    name: 'password',
-    inputId: 'password-input',
-    placeholder: 'Enter your password',
-    type: 'password',
-    required: true,
-    label: 'Password',
-    hint: 'Must be at least 8 characters'
-};
-export const TextInputWithError = Template.bind({});
-TextInputWithError.args = {
-    name: 'email',
-    inputId: 'email-input',
-    placeholder: 'Enter your email',
-    type: 'text',
-    required: true,
-    label: 'Email Address',
-    error: true,
-    errorMessage: 'Invalid email address'
-};
+// Control-driven text field. Everything the removed single-attribute stories
+// showed — error/errorMessage, message, hint, value, maxLength, icon, link,
+// disabled, password, custom icon — is reachable straight from the Controls
+// panel on this story.
+export const Default = Template.bind({});
 export const CheckboxGroup = Template.bind({});
 CheckboxGroup.args = {
     name: 'preferences',
@@ -149,76 +139,38 @@ FileUpload.args = {
     label: 'Upload Resume',
     hint: 'PDF or Word Document'
 };
-export const InputWithIconAndLink = Template.bind({});
-InputWithIconAndLink.args = {
-    name: 'website',
-    placeholder: 'Enter your website URL',
-    type: 'text',
-    label: 'Website',
-    icon: 'success',
-    link: { url: 'https://help.example.com', label: 'Help' }
-};
-export const NumberInputWithMaxLength = Template.bind({});
-NumberInputWithMaxLength.args = {
+// The dropzone is just another field `type` — same label/hint/error wrapper as
+// every other input, with the drag-and-drop control swapped in.
+export const Dropzone = Template.bind({});
+Dropzone.args = {
+    name: 'attachments',
+    type: 'dropzone',
+    label: 'Attachments',
+    hint: 'Drag and drop files, or click to browse'
+};
+// Number input — kept separate because the min/max/step props apply ONLY to
+// type="number" (they are ignored for every other type).
+export const NumberInput = Template.bind({});
+NumberInput.args = {
     name: 'age',
     placeholder: 'Enter your age',
     type: 'number',
     label: 'Age',
     min: 5,
-    max: 10,
+    max: 100,
     step: 1,
     required: true
 };
-export const DisabledInput = Template.bind({});
-DisabledInput.args = {
-    name: 'disabledInput',
-    placeholder: 'This field is disabled',
-    type: 'text',
-    label: 'Disabled Field',
-    disabled: true
-};
-export const InputWithMessage = Template.bind({});
-InputWithMessage.args = {
-    name: 'username',
-    placeholder: 'Enter your username',
-    type: 'text',
-    label: 'Username',
-    message: 'Your username should be unique.'
-};
-export const InputWithMaxLength = Template.bind({});
-InputWithMaxLength.args = {
-    name: 'shortBio',
-    placeholder: 'Enter a short bio',
-    type: 'text',
-    label: 'Short Bio',
-    maxLength: 100
-};
-export const InputWithValue = Template.bind({});
-InputWithValue.args = {
-    name: 'city',
-    placeholder: 'Enter your city',
-    type: 'text',
-    label: 'City',
-    value: 'San Francisco'
-};
-export const CheckboxSingle = Template.bind({});
-CheckboxSingle.args = {
-    name: 'agreeTerms',
-    type: 'checkbox',
-    label: 'I agree to the terms and conditions',
-    required: true
-};
-export const RadioButtonSingle = Template.bind({});
-RadioButtonSingle.args = {
-    name: 'subscribe',
-    type: 'radio',
-    label: 'Subscribe to newsletter'
-};
-export const InputWithCustomIcon = Template.bind({});
-InputWithCustomIcon.args = {
-    name: 'search',
-    placeholder: 'Search...',
-    type: 'text',
-    label: 'Search',
-    icon: 'search'
+// Range slider — uses the same min/max/step props as type="number".
+// (Legacy fields may still pass these via options[0..2].value, which the
+// component honors as a fallback.)
+export const RangeSlider = Template.bind({});
+RangeSlider.args = {
+    name: 'volume',
+    type: 'range',
+    label: 'Volume',
+    value: '40',
+    min: 0,
+    max: 100,
+    step: 5
 };

package/dist/collection/components/eds-input-file/eds-input-file.js

@@ -60,7 +60,7 @@ export class EdsInputFile {
     }
     render() {
         const effectiveLabel = this.buttonLabel || (this.multiple ? 'Choose Files' : 'Choose File');
-        return (h("div", { key: 'c4c8f06b7d911cc7b9aa44a54bc1ec1144fc7901', class: "eds-input-file-container" }, h("input", { key: 'bf4d4f3b3a49a2b386780fd6d65056e2bfee327d', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("button", { key: 'cb4447bab24a31ba0ab7ab852041a9117a4c8d16', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: 'b5a98574c8b044b63bf4d6b5384f691d78179b25', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '9dcd73b3ea6b947052417dedbdedfbe9c1683d11', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '17442a8caa70a37f77839b4a313a36aa8324d54a', points: "17 8 12 3 7 8" }), h("line", { key: 'de51aa410bd793d708280bc398766859afa59ff5', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '179a1541b71508f3bf78760079d04b2d98a8c7ec', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-file-chip-name" }, item.file.name), h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+        return (h("div", { key: 'e02d98fbc01dbe7a89eeb3010f966ed4a373ede6', class: "eds-input-file-container" }, h("input", { key: '2013826fda9453aade4528c9f051aac98780662f', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("button", { key: 'f5e5cf91376ccb69b39ef3c9b11095aca8bfb728', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: '563066375b42d0a8c14f14ac9fdfb587539f4e76', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'ebe5549fffa0c2453ab98891da75a464c09e9fa2', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '69036b82e15103e481770d0ef2c500b0dcad0399', points: "17 8 12 3 7 8" }), h("line", { key: 'e0531be95796ec6dc7f9fe359e4736a15a0e3640', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '62590fb46cee89d2524f1ede71c7af341c3e426a', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-file-chip-name" }, item.file.name), h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
     }
     static get is() { return "eds-input-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-link/eds-link.js

@@ -290,7 +290,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: 'b604585e484db17a87cba4fb492ef17014c0c88a', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: 'c3d5d62b4740ecb9f4fa6330147bb1f23afe22e0', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: 'c4340d032516895b8ad9a01170998605875a5774', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
+        return (h("a", { key: 'd167c16280b7f0b4c1fcf14f0f0d3468111e715b', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: '000476a609888f5f848722015ce5e6137f26e371', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: '15232cde31d23c5a466189c69fbdb9db48f08274', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-link/eds-link.stories.js

@@ -1,3 +1,7 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the render treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Link',
     component: 'eds-link',
@@ -12,8 +16,9 @@ export default {
             description: 'The intent style of the link'
         },
         icon: {
-            control: 'text',
-            description: 'The icon to be displayed next to the label'
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'The icon to be displayed next to the label (from the EDS icon set)'
         },
         iconSmall: {
             control: 'boolean',
@@ -24,6 +29,10 @@ export default {
             options: ['small', 'large'],
             description: 'The size of the link'
         },
+        pill: {
+            control: 'boolean',
+            description: 'If true, renders the link with a pill (fully rounded) shape'
+        },
         external: {
             control: 'boolean',
             description: 'If true, marks the link as external'
@@ -40,10 +49,6 @@ export default {
             control: 'text',
             description: 'The URL for the link'
         },
-        ariaLabel: {
-            control: 'text',
-            description: 'ARIA label for accessibility'
-        },
         download: {
             control: 'boolean',
             description: 'If true, adds the download attribute to the link'
@@ -55,11 +60,11 @@ export default {
         size: 'large',
         icon: 'arrow-right',
         iconSmall: false,
+        pill: true,
         external: false,
         current: false,
         disabled: false,
         url: 'https://example.com',
-        ariaLabel: 'Link to example',
         download: false
     }
 };
@@ -72,11 +77,11 @@ export const Default = {
       size="${args.size}"
       icon="${args.icon}"
       icon-small="${args.iconSmall}"
+      pill="${args.pill}"
       external="${args.external}"
       current="${args.current}"
       disabled="${args.disabled}"
       url="${args.url}"
-      aria-label="${args.ariaLabel}"
       download="${args.download}">
     </eds-link>
   </div>`,

package/dist/collection/components/eds-logo/eds-logo.js

@@ -52,7 +52,7 @@ export class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '06321ecfcf456f1870cd080043203258306a2451', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0e9da2f98700553f4898d0f60935f1c5cbd97cbc', innerHTML: logoContent })));
+        return (h("a", { key: '3f8257c9481079f011278b114e13effe9057d823', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '4dac45a1a0c38c6e1613995aad2005b41acac775', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-modal/eds-modal.stories.js

@@ -26,9 +26,9 @@ export default {
     },
     args: {
         title: 'Default Modal Title',
-        position: 'middle',
+        position: 'top',
         truncate: 1,
-        inverseHeader: false
+        inverseHeader: true
     }
 };
 const Template = ({ title, position, truncate, inverseHeader }) => {
@@ -44,15 +44,15 @@ const Template = ({ title, position, truncate, inverseHeader }) => {
     </eds-modal>
 
     <!-- Button to control modal -->
-    <eds-button intent="primary" label="Open Modal" @click="${openModal}"></eds-button>
+    <eds-button intent="brand" size="large" label="Open Modal" pill="true" @click="${openModal}"></eds-button>
   `;
 };
 export const Default = Template.bind({});
 Default.args = {
     title: 'Default Modal Title',
-    position: 'middle',
+    position: 'top',
     truncate: 1,
-    inverseHeader: false
+    inverseHeader: true
 };
 const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
     const openModal = () => {
@@ -74,7 +74,7 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 
     <!-- Button to control modal -->
     <eds-button
-      intent="primary"
+      intent="brand" size="large" pill="true"
       label="Open Modal with Form"
       @click="${openModal}"
       style="margin-right: 10px;"
@@ -84,6 +84,7 @@ const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
 export const ModalWithForm = TemplateWithForm.bind({});
 ModalWithForm.args = {
     title: 'Extended Form Modal',
-    position: 'middle',
-    truncate: 1
+    position: 'top',
+    truncate: 1,
+    inverseHeader: true
 };

package/dist/collection/components/eds-nps/eds-nps.css

@@ -1,3 +1,35 @@
+/* Keep the pills compact (next to each other) and shrink the scale block to
+   their width, so the 0/10 labels (justify-between below) line up with the
+   first/last pill instead of the full container edge. */
+/* Breathing room above/below the 0…10 endpoint labels. */
+.eds-nps__labels {
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+
+.eds-nps__scale {
+  display: block;       /* own line, stacked under the question */
+  width: fit-content;   /* but shrink to the pills' width so labels align */
+  max-width: 100%;
+  padding-top: 0.5rem;  /* space between the question and the pills */
+}
+/* A bit more breathing room between the pills. */
+#nps-buttons {
+  gap: 0.6rem;
+}
+
+/* Non-color cue for the single selected value (not just light-green vs neon):
+   a brand-green-dark ring + slight scale make the pick unmistakable. Keeps
+   eds-button untouched. */
+.eds-nps__btn {
+  border-radius: 9999px;
+  transition: transform 0.15s ease-in-out;
+}
+.eds-nps__btn.is-selected {
+  /* Subtle scale only (no ring/border cue), like eds-rating. */
+  transform: scale(1.12);
+}
+
 .flex {
   display: flex;
 }

package/dist/collection/components/eds-nps/eds-nps.js

@@ -75,14 +75,14 @@ export class EdsNps {
     }
     render() {
         const count = this.max - this.min + 1;
-        return (h("div", { key: '932d0a62e52376c1ddaf71e8d21bf5437c2d0b9f', class: "eds-nps" }, h("eds-input-label", { key: '60f5b6849dcc53f2a0d46fa5e44499076bd46174', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '14d032aa6dc6b2cc67189f6e11a0fc59ca420cbb', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
+        return (h("div", { key: '412ddeabf0cc97829202063af25f17e3309b0754', class: "eds-nps" }, h("eds-input-label", { key: '100a47e710fa75d6a5761a87ca68e8bc8910e248', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '9a7a63112e17f4c725005e1ae8e42c98107db7c4', class: "eds-nps__scale" }, h("div", { key: '501029dad573cd31d956ae3cae67f2db9f2649f1', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.internalValue;
             const tabIndex = isSelected || (this.internalValue == null && i === 0) ? 0 : -1;
-            return (h("div", { class: "flex", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'neutral', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
+            return (h("div", { class: "flex", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-nps__btn is-selected' : 'eds-nps__btn', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
                     this.internalValue = val;
                 } })));
-        })), h("div", { key: 'f1fd58c7c1003f144b816c9a1d169a2edec4a768', class: "flex justify-between mt-8" }, h("span", { key: '476a3c3b3ef1c43744b8a69e577e597fff887beb', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '275ec0c204781365c2e57283c1096fadb853dbe5', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), h("div", { key: 'aa15457591f1edf6e59eed384bcfbb25d49c9fd5', class: "flex justify-between eds-nps__labels" }, h("span", { key: 'a468b290491e368e3084f17ce40c6aa39e00ad3a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '146b9eea4bbc360f7765e69e319738c77beae69d', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
     }
     static get is() { return "eds-nps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-pagination/eds-pagination.js

@@ -248,7 +248,7 @@ export class EdsPagination {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '6d7dea7a6d544bf79e944dfeb80cffb2f5a0b0cb' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '77da5262419978bf0806155727f64c2c957e3bb1', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '537551dfe8de1af55d3350cef4fa62f503aba3c1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "secondary", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (h("div", { key: '5c11fd306f0ebf47a452e44d633e18b2e3860d78' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'fe8b7f7b6c7785152f1edd90a750f4a9a7e2768b', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '5e2c67535dbf765dc662770164404f0de69315a1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }
@@ -257,7 +257,7 @@ export class EdsPagination {
                 : this.isFirstPage()
                     ? '#'
                     : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12" }))), this.mode === 'default' &&
-            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "secondary", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
+            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'brand' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "ghost", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isLastPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) + 1);
                 }