@ebrains/components 3.0.0 → 3.2.0

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

@@ -5881,6 +5881,17 @@ video {
 .input::placeholder {
   color: var(--grey-500);
 }
+/* A <select> has no ::placeholder — when no option is chosen yet it shows the
+   placeholder <option> in the normal dark text colour, which looks heavier than
+   text-input placeholders. is-placeholder (set by eds-input-select while empty)
+   matches them by rendering the closed select in grey-500; real options in the
+   open dropdown stay dark for readability. */
+.input.is-placeholder {
+  color: var(--grey-500);
+}
+.input.is-placeholder option {
+  color: var(--brand-black);
+}
 .input {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -6372,6 +6383,9 @@ input[type="range"]::-webkit-slider-thumb {
 .mt-8 {
   margin-top: 0.5rem;
 }
+.mb-8 {
+  margin-bottom: 0.5rem;
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -7768,3 +7782,208 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 
+/* ============================================================
+   Field input styling — the new "brand form" look, applied to
+   every field type rendered through eds-input-field (the wrapper).
+   Element+class selectors (input.input / textarea.input / select.input)
+   beat the global utility-based `.input` reliably. Focus colour reads
+   --eds-field-accent (set by eds-form's brand body) and falls back to
+   the brand-green-dark default, so this looks consistent everywhere.
+   ============================================================ */
+
+/* Text-like inputs + select box.
+   NB: radio/checkbox/range also carry the `.input` class, so they're excluded
+   here (otherwise the box sizing would balloon them) — they're styled below. */
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']),
+textarea.input,
+select.input {
+  min-height: 50px;
+  padding: 0 16px;
+  border: 1px solid var(--line-color, #e2e2e2);
+  border-radius: 10px;
+  background: var(--white, #ffffff);
+  color: var(--brand-black, #07140d);
+  box-shadow: none;
+  transition: border-color 0.14s ease, box-shadow 0.14s ease;
+}
+
+/* Leading-icon inputs: restore the left padding that clears the icon (the icon
+   sits absolutely at left:12px). The `.input-icon` + full :not() chain out-
+   specifies the `padding: 0 16px` rule above, which would otherwise let the
+   placeholder / text sit under the icon. */
+input.input.input-icon:not([type='radio']):not([type='checkbox']):not([type='range']) {
+  padding-left: 42px;
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range'])::placeholder,
+textarea.input::placeholder {
+  color: #a9aba9;
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):hover,
+textarea.input:hover,
+select.input:hover {
+  border-color: #c9ccca;
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):focus,
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):focus-visible,
+textarea.input:focus,
+textarea.input:focus-visible,
+select.input:focus,
+select.input:focus-visible {
+  outline: none;
+  border-color: var(--eds-field-accent, #00c87b);
+  box-shadow: 0 0 0 3px var(--eds-field-focus-ring, rgba(0, 200, 123, 0.16));
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):disabled,
+textarea.input:disabled,
+select.input:disabled {
+  background: #f7f7f7;
+  color: #a9aba9;
+  cursor: not-allowed;
+}
+
+/* Textarea — taller, top-aligned, resizable */
+textarea.input,
+textarea.input-textarea {
+  min-height: 108px;
+  padding: 14px 16px;
+  line-height: 1.55;
+  resize: vertical;
+  align-items: flex-start;
+}
+
+/* Select — keep room for the chevron the select renders on the right */
+select.input,
+select.input-select {
+  padding-right: 44px;
+  cursor: pointer;
+}
+
+/* Range — not a boxed input; a clean track (green fill is painted inline
+   by eds-input-range up to the current value) */
+input[type='range'].input {
+  min-height: 0;
+  height: 6px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  box-shadow: none;
+}
+input[type='range'].input:focus,
+input[type='range'].input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* Range thumb — brand-black knob with a green ring (matches the mockup). */
+input[type='range'].input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--brand-black, #07140d);
+  border: 3px solid var(--eds-field-accent, #00c87b);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+input[type='range'].input::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--brand-black, #07140d);
+  border: 3px solid var(--eds-field-accent, #00c87b);
+  cursor: pointer;
+}
+
+/* Range layout: value readout (top-right) + min/mid/max scale (below). */
+.eds-range {
+  display: flex;
+  flex-direction: column;
+  padding-top: 6px;
+}
+.eds-range-top {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+}
+.eds-range-val {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--eds-field-accent, #00c87b);
+  font-variant-numeric: tabular-nums;
+}
+.eds-range-scale {
+  display: flex;
+  justify-content: space-between;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 10px;
+  color: #7a7b7a;
+  margin-top: 10px;
+}
+
+/* Radio & checkbox — brand-green when selected (white mark stays) */
+input.input-radio:checked,
+input.input-checkbox:checked {
+  background-color: var(--eds-field-accent, #00c87b);
+  border-color: var(--eds-field-accent, #00c87b);
+}
+
+/* Radio / checkbox options as selectable cards (matches the brand mockup).
+   :has(input:checked) works because eds-input is light-DOM, so there's no
+   shadow boundary between the card and the control. */
+.eds-option-list {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.eds-option-card {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 13px 15px;
+  border: 1px solid var(--line-color, #e2e2e2);
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14.5px;
+  transition: border-color 0.14s ease, background-color 0.14s ease,
+    box-shadow 0.14s ease;
+}
+
+.eds-option-card:hover {
+  border-color: #c9ccca;
+  background: #fcfefd;
+}
+
+.eds-option-card:has(input:checked) {
+  border-color: var(--eds-field-accent, #00c87b);
+  background: rgba(0, 255, 157, 0.05);
+  box-shadow: 0 0 0 2px var(--eds-field-card-ring, rgba(0, 255, 157, 0.12));
+}
+
+.eds-option-card.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.eds-option-text {
+  flex: 0 1 auto;
+}
+
+.eds-option-help {
+  margin-left: auto;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: #8a8c8a;
+}
+

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

@@ -114,9 +114,17 @@ 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: '2f4fc787a53ec8b3afcd8a6c372075e9c077e220' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "eds-option-list" }, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-12" }, 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) => (
+        // Each option is a selectable card. The native control lives in
+        // eds-input (light DOM), so the card highlights via :has(input:checked)
+        // — no JS state needed. The label wraps the control, so clicking
+        // anywhere on the card toggles it.
+        h("label", { class: `eds-option-card ${this.disabled ? 'is-disabled' : ''}`, 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("span", { class: "eds-option-text" }, option.label), option.description && h("span", { class: "eds-option-help" }, option.description)))))) : (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-8" }, 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 +135,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: '33bfae3f5ef4a8a1a0c529fade0d1a8616eff100', class: "mt-8" }, h("eds-input-footer", { key: 'c4b6b192d052c486965b9b89fc6756324138975c', 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,96 @@
+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'
+        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' }
         },
-        min: {
-            control: 'number',
-            description: 'Minimum value for number or range inputs'
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+            table: { category: 'State & validation' }
         },
-        max: {
-            control: 'number',
-            description: 'Maximum value for number or range inputs'
+        error: {
+            control: 'boolean',
+            description: 'Render the input in an error state',
+            table: { category: 'State & validation' }
         },
-        step: {
-            control: 'number',
-            description: 'Step value for number or range inputs'
+        errorMessage: {
+            control: 'text',
+            description: 'Error message shown when invalid',
+            table: { category: 'State & validation' }
         },
-        message: { control: 'text', description: 'Message displayed below the input field' },
-        error: { control: 'boolean', description: 'Whether the input field is in an error state' },
         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: {
+        // ── Helper text & decoration ──
+        hint: { control: 'text', description: 'Hint text next to the label', table: { category: 'Helper & decoration' } },
+        message: {
             control: 'text',
-            description: 'Error message displayed when the input is invalid'
+            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' }
+        },
+        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' }
         },
-        value: { control: 'text', description: 'Value of the input field' },
-        maxLength: { control: 'number', description: 'Maximum length for the input value' },
+        // ── 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 +106,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 +121,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 +167,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

@@ -7,8 +7,9 @@ export class EdsInputFile {
         };
         this.handleFileSelect = (event) => {
             const input = event.target;
-            if (!input.files)
+            if (!input.files) {
                 return;
+            }
             const newFiles = Array.from(input.files).map((file) => ({
                 file,
                 id: `${file.name}-${Date.now()}-${Math.random()}`
@@ -40,8 +41,9 @@ export class EdsInputFile {
         this.edsfile.emit({ files });
     }
     formatFileSize(bytes) {
-        if (bytes === 0)
+        if (bytes === 0) {
             return '0 B';
+        }
         const k = 1024;
         const sizes = ['B', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
@@ -60,7 +62,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: '810e30b054b1a6a43c9cc79e318ae487679de1d7', class: "eds-input-file-container" }, h("input", { key: '21a2162df7e6cc430b230407891bd1568bb4fe18', 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: 'd297cf5c5e63c002558e878a140b931a68a25f54', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: 'eb08b7516dce89647e28ca0c0ec1f70ade64b2cd', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'b0eefaf19325e60d5f974039644f8ab962bbfe92', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: 'd0bfb65f3c6e3e9d019d23e94ceeb08ba3f6976e', points: "17 8 12 3 7 8" }), h("line", { key: '3e7b0172924b54c26b9100ea264e85be73beabe9', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '633d574a840479eb58ec596078960c88fbf4ce94', 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

@@ -55,12 +55,8 @@ const linkStyles = cva([
                 'rounded-full',
                 'aria-disabled:bg-dark aria-disabled:text-lightest'
             ],
-            cta: [
-                'cta-link !px-0 !py-0 !min-h-0 !h-auto'
-            ],
-            'cta-brand': [
-                'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
-            ]
+            cta: ['cta-link !px-0 !py-0 !min-h-0 !h-auto'],
+            'cta-brand': ['cta-link-brand !px-0 !py-0 !min-h-0 !h-auto']
         },
         iconSmall: {
             true: '',
@@ -290,7 +286,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: 'a447ffc8ba377ceb4fe0dc199ad7225e222d4cf3', 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: '72d84592cfd7e48e983e281d8e8f1d8a2b739e26', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (h("span", { key: 'a101036d3206e7f610c04dfc9d0a4dcd5c1a2b4f', 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"; }
@@ -327,7 +323,7 @@ export class EdsLink {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline' | 'underlineInverse' | 'brand' | 'brandInverse' | 'cta' | 'cta-brand'",
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'secondaryInverse'\n    | 'ghost'\n    | 'strong'\n    | 'weak'\n    | 'inverse'\n    | 'underline'\n    | 'underlineInverse'\n    | 'brand'\n    | 'brandInverse'\n    | 'cta'\n    | 'cta-brand'",
                     "resolved": "\"brand\" | \"brandInverse\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"secondaryInverse\" | \"strong\" | \"underline\" | \"underlineInverse\" | \"weak\"",
                     "references": {}
                 },