@ebrains/components 2.0.0 → 2.1.0

package/dist/collection/components/eds-icons/eds-icon-loader/eds-icon-loader.js

@@ -8,7 +8,7 @@ export class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return h("span", { key: '85bcc5308536901f4892e1bba6238be45f7036bf', class: this.class, innerHTML: loader });
+        return h("span", { key: '9383784da3e52d22395288f8eba5b6f4ee826aa5', class: this.class, innerHTML: loader });
     }
     static get is() { return "eds-icon-loader"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-menu/eds-icon-menu.js

@@ -8,7 +8,7 @@ export class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c510b51f8d67e1a94a56cd6482cc1af5d4b6b117', class: this.class, innerHTML: menu });
+        return h("span", { key: '15fa7c4b7d2dea5740d0926bb1ff6490b23667f8', class: this.class, innerHTML: menu });
     }
     static get is() { return "eds-icon-menu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-minus/eds-icon-minus.js

@@ -8,7 +8,7 @@ export class EdsIconMinus {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b6b9e5dd993f9a6b475674cf7d952d68841a1f0c', class: this.class, innerHTML: minus });
+        return h("span", { key: '0e8b57b9ae1a2e53ef6f50948c49b9a9218f66cc', class: this.class, innerHTML: minus });
     }
     static get is() { return "eds-icon-minus"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-more/eds-icon-more.js

@@ -8,7 +8,7 @@ export class EdsIconMore {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'aac0251ad6695296eb383d05e4d3fdb953ac2b82', class: this.class, innerHTML: more });
+        return h("span", { key: '5f14cbe4b3ca88f7301c1561c092278b31d04326', class: this.class, innerHTML: more });
     }
     static get is() { return "eds-icon-more"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-paper/eds-icon-paper.js

@@ -8,7 +8,7 @@ export class EdsIconPaper {
         this.class = '';
     }
     render() {
-        return h("span", { key: '27d2b36f47c4a58e90a4148fbb8568f81eaeb07c', class: this.class, innerHTML: paper });
+        return h("span", { key: 'b19c12426db0068934252c6197ba04789d42f5e2', class: this.class, innerHTML: paper });
     }
     static get is() { return "eds-icon-paper"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-plus/eds-icon-plus.js

@@ -8,7 +8,7 @@ export class EdsIconPlus {
         this.class = '';
     }
     render() {
-        return h("span", { key: '9c4eca2f6cd5919b07694d8ae209d568da9ee8c2', class: this.class, innerHTML: plus });
+        return h("span", { key: '520b8d5a7d45f101ef526432b45e4407446685cd', class: this.class, innerHTML: plus });
     }
     static get is() { return "eds-icon-plus"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-portal/eds-icon-portal.js

@@ -8,7 +8,7 @@ export class EdsIconPortal {
         this.class = '';
     }
     render() {
-        return h("span", { key: '7ab9673d6effd4caa728276e2d6927e3a08e2e9a', class: this.class, innerHTML: portal });
+        return h("span", { key: 'f9b20e12497e199b7f596f4f457167080e81ccd1', class: this.class, innerHTML: portal });
     }
     static get is() { return "eds-icon-portal"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-private/eds-icon-private.js

@@ -8,7 +8,7 @@ export class EdsIconPrivate {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'abd96f1775b99dc252a2b4783c133bc7ab0e07cc', class: this.class, innerHTML: privat });
+        return h("span", { key: 'a342e11087242f9b37365bcbfec2036bd2009c85', class: this.class, innerHTML: privat });
     }
     static get is() { return "eds-icon-private"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-public/eds-icon-public.js

@@ -8,7 +8,7 @@ export class EdsIconPublic {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c681e9c3a2e797225a6b4d7c21260cfbcd7b1a07', class: this.class, innerHTML: pub });
+        return h("span", { key: 'e53f2ac899326e460b27b91772da9d2bee873fb3', class: this.class, innerHTML: pub });
     }
     static get is() { return "eds-icon-public"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-search/eds-icon-search.js

@@ -8,7 +8,7 @@ export class EdsIconSearch {
         this.class = '';
     }
     render() {
-        return h("span", { key: '95fd209db33a21655b248b74933baf775aa6008f', class: this.class, innerHTML: search });
+        return h("span", { key: '6da0ae2a33a1680caecbaa6bbe1313329d32ef7e', class: this.class, innerHTML: search });
     }
     static get is() { return "eds-icon-search"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-star/eds-icon-star.js

@@ -8,7 +8,7 @@ export class EdsIconStar {
         this.class = '';
     }
     render() {
-        return h("span", { key: '4d66d4107547dc9669a155587e5e9f214525c103', class: this.class, innerHTML: star });
+        return h("span", { key: '4c4243f9e6c5c02a2d70eda34b28efe1ba7c696b', class: this.class, innerHTML: star });
     }
     static get is() { return "eds-icon-star"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-start/eds-icon-start.js

@@ -8,7 +8,7 @@ export class EdsIconStart {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd8af71df9336e0a1d8763c5f5eea4f19da127785', class: this.class, innerHTML: start });
+        return h("span", { key: 'a788a6ded2b42ad1138be4f74464d4dc08dc485f', class: this.class, innerHTML: start });
     }
     static get is() { return "eds-icon-start"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-success/eds-icon-success.js

@@ -8,7 +8,7 @@ export class EdsIconSuccess {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f427b541cef236f90f132b436d3cd617e5a9381c', class: this.class, innerHTML: success });
+        return h("span", { key: '68917ac759cd684a6f3f3f67cb174d7291841070', class: this.class, innerHTML: success });
     }
     static get is() { return "eds-icon-success"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-thumbs-down/eds-icon-thumbs-down.js

@@ -8,7 +8,7 @@ export class EdsIconThumbsDown {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b071c30d25352e18241561760669e099a2f22481', class: this.class, innerHTML: thumbsDown });
+        return h("span", { key: 'fb0abd584eb41fcdf76479aa2953da2ed6a9f8ed', class: this.class, innerHTML: thumbsDown });
     }
     static get is() { return "eds-icon-thumbs-down"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-thumbs-up/eds-icon-thumbs-up.js

@@ -8,7 +8,7 @@ export class EdsIconThumbsUp {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ccb23aecc8c918e8428b06f9599969868f97d0e4', class: this.class, innerHTML: thumbsUp });
+        return h("span", { key: '53bc35a16795640e1fc5ac9a5ddd66015b98adb3', class: this.class, innerHTML: thumbsUp });
     }
     static get is() { return "eds-icon-thumbs-up"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-tutorial/eds-icon-tutorial.js

@@ -8,7 +8,7 @@ export class EdsIconTutorial {
         this.class = '';
     }
     render() {
-        return h("span", { key: '6c73e2842e44f4e921399d2d303818b9c5c4b1a3', class: this.class, innerHTML: tutorial });
+        return h("span", { key: 'bbe35e4b8e341eb54820a661c6a6200e83fd0f3f', class: this.class, innerHTML: tutorial });
     }
     static get is() { return "eds-icon-tutorial"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-unknown/eds-icon-unknown.js

@@ -8,7 +8,7 @@ export class EdsIconUnknown {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'a56cf8519a7969a8a51178a3424e36d4ae7dddbf', class: this.class, innerHTML: unknown });
+        return h("span", { key: 'c102d3ac082dab21cb23a322ded78d607ece10f5', class: this.class, innerHTML: unknown });
     }
     static get is() { return "eds-icon-unknown"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-updown/eds-icon-updown.js

@@ -8,7 +8,7 @@ export class EdsIconUpdown {
         this.class = '';
     }
     render() {
-        return h("span", { key: '3efe71bda81efa13e277ebfae2d6d6f588964ee5', class: this.class, innerHTML: upDonw });
+        return h("span", { key: 'b2bf11e364727f13859be3c2ed00931ec3379d9d', class: this.class, innerHTML: upDonw });
     }
     static get is() { return "eds-icon-updown"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-user/eds-icon-user.js

@@ -8,7 +8,7 @@ export class EdsIconUser {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd2ab70229b5200b541a91d32ee0b7ea582a5f79d', class: this.class, innerHTML: user });
+        return h("span", { key: '24acd317006255e7a5b29bd70b667c8ca9271f6c', class: this.class, innerHTML: user });
     }
     static get is() { return "eds-icon-user"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-view/eds-icon-view.js

@@ -0,0 +1,36 @@
+import { view } from "../../../../../../../../packages/svgs/src/index";
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsIconView {
+    constructor() {
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '652ea6ae2a82611114e71ed2d2422ad579f7ab54', class: this.class, innerHTML: view });
+    }
+    static get is() { return "eds-icon-view"; }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional CSS classes to be applied to the icon for styling."
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js

@@ -8,7 +8,7 @@ export class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c2ee643b5da517a53bd97ec6263161927ad229a7', class: this.class, innerHTML: bluesky });
+        return h("span", { key: 'db8fea43b7888da43821083ecc706a16c949932e', class: this.class, innerHTML: bluesky });
     }
     static get is() { return "eds-icon-bluesky"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js

@@ -8,7 +8,7 @@ export class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b8c843449dec1ab159280e66e009311735ec8895', class: this.class, innerHTML: facebook });
+        return h("span", { key: '6a6cbdd8f9e6b982af701b97681a98944c5c1797', class: this.class, innerHTML: facebook });
     }
     static get is() { return "eds-icon-facebook"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js

@@ -8,7 +8,7 @@ export class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e9f71cb0a1a20d87a617df568bdc37d248a1cdc8', class: this.class, innerHTML: linkedin });
+        return h("span", { key: '1981b2c066cfa5f0fb4326017df4bfbdfff09873', class: this.class, innerHTML: linkedin });
     }
     static get is() { return "eds-icon-linkedin"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-mastodon/eds-icon-mastodon.js

@@ -8,7 +8,7 @@ export class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f5c6dcd896a1daa487ef1b05f3854157d9015b67', class: this.class, innerHTML: mastodon });
+        return h("span", { key: '8bba88cba6d29b204b4a4ceae3c41129bb6edcaa', class: this.class, innerHTML: mastodon });
     }
     static get is() { return "eds-icon-mastodon"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js

@@ -8,7 +8,7 @@ export class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'db8fea43b7888da43821083ecc706a16c949932e', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'de551285a98e6e5340769e9d1422acb2e7bc826f', class: this.class, innerHTML: twitter });
     }
     static get is() { return "eds-icon-twitter"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js

@@ -8,7 +8,7 @@ export class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dd1f0043450c0970da5487a4c7c69859d3d97e2f', class: this.class, innerHTML: youtube });
+        return h("span", { key: '6f1d0b5e073ef4d754aecb600a8578fc59950496', class: this.class, innerHTML: youtube });
     }
     static get is() { return "eds-icon-youtube"; }
     static get properties() {

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

@@ -57,10 +57,10 @@ export class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'd40662545cefe458d307c9877c4a8804c4fb7406', class: {
+        return (h("div", { key: '605bff5657ca79678517527a9462b31608e5af7a', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '94c28d57611eec83eb7ed03620de4b2449dd665c' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'd7b6e56937a19f558abb29bb1da2f04b945970c9', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: '0d0def26688c1ec7214211d02875160965e2ce48' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'c9c307a5fdf25d9792db2a76f4d08fcd27b50401', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded

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

@@ -50,7 +50,7 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: 'f48593b92f28da7f3ea3282ebd0db0f6767ee7b6', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
+        return (h("div", { key: 'a26224d6345099df6bc5110d42b701980603f7f7', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -61,7 +61,7 @@ export class EdsInput {
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: '0391698008d36d0726ca52f9f5e3ad21136a9edb', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'dd4d8a5e02dd2557deef5441cbe29afdbea8a959', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: 'beb48d08d18b5ca5b054b1b579e2f9527af222e9', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: '06948fe33c35c5830edd50a37411281865ef6d12', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     static get is() { return "eds-input"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '08cb0dc972b0aee37260b5e606a4b162afa9100b' }, this.error && this.errorMessage && (h("div", { key: '5346af03e591f3ca2338979dc74a0b65fe2f93ba', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '072103ec3061a16992672ee92d20249dc1704e0e', icon: "warning" }), h("p", { key: '19f62274acb91ca32e5f9ee7247b27d5a63a95b7', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'e6c97c6dca2c5a7a1e62f56f2d74560861399553', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '528475a848b5fada0acc47dc4aa2e03b0b6e1872', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: '58bce34f2ec417696ba03d6c8c0c77fa1d900f9a' }, this.error && this.errorMessage && (h("div", { key: 'be14dc0f6e9494c1ee436fd8f822112eab6d2ce2', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'aaa2010441b0bfe9445e4b6401115b29606ac507', icon: "warning" }), h("p", { key: '277ac1de538e873c7da9b592e60dfd276738025d', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '4f07c6efe398bb002322a35279e68b237eac860e', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '50d042530985eeafd7334b0bb38fd2c14aed0e3f', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
     static get is() { return "eds-input-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class EdsInputLabel {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: 'a5ecc454f7d0398d8bf265fb36ac903af4b15c4a', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'f6b710dcfe91623d048a95853097f963510ebb13' }, h("span", { key: 'e903f319f01b3592ca2ea8bbd5dbf83765942603', "aria-hidden": "true" }, "*"), h("span", { key: '4548229f02d0753855a0b58944e89ff4fe40665a', class: "sr-only" }, "required")))));
+        return (h("label", { key: '622cd7e26774448ca86c1168d0a287d7b61d3e29', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'c3162e765af70dd972e3cd0ca360cd3f52003f76' }, h("span", { key: '5bca5243c95399fefff4fa21b6c1477a287a3cb4', "aria-hidden": "true" }, "*"), h("span", { key: 'bc1c229ac387161e4aa314498dbbc77fbab62955', class: "sr-only" }, "required")))));
     }
     static get is() { return "eds-input-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'd17d2e14f9c851c2c4b003ac36bae62240bc16d0', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'dccfa98f53c6283a09de624f32cc34aea2fafbfa', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '6064aa1f5bfbfc0e925dfec32ee727c5e530226a', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '51c9adb300d50eecb48de1547c0a0475692aa97b', class: "relative flex flex-col items-start" }, h("input", { key: '65ac18497d2a4307d7f5161951b87bb38cdad892', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '9b717fce31d2340f3b4bc4b5583e6b1e7764314f', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     static get is() { return "eds-input-range"; }
     static get properties() {

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: '1084e1dad411bccc4b89fb61be91fbdaefedbe16', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'eaca5c71cf018cd95ba6debddcbbfa1457a32584', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'e0e888a6518abfb5f5b2a50fb89e2cec4c7ca78c', 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: '40f0faa26610671e0a89055e5a51fb17ab17c470', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '910f6681ae719608c6f2787de4b3871742dd290a', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '77534918bd9f2bcd4014e5b201a4f7eb2c0753b4', 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-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: '8b02195c9cb94edae54d0eaeffc1d5985638e705', class: "relative" }, h("select", { key: 'ab86f95d44a22492309e39ea4ed299c7da5460f7', id: selectId, name: this.name, class: {
+        return (h("div", { key: 'f154a5f34a0d09cf6a02e24f13ed9af46532c76c', class: "relative" }, h("select", { key: '0982936337bcbec3e2b81f7edc1436506841c782', 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: '285f9e5be9f469b21fa13c869e998fdaea4e33ad', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '0fced74f55c6da75e7f1aa3251fa59e8147e666f', 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: '70e964580e89d001eb3537038f4e6a28ecba5840', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '7656fa514dec6b8b05bbb8d02636bf5e2ee8d213', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '8464aa5ef3eab675f493b582736c25a7edd88224', 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: '092271b13e4d496a85c55fbb5f1756805cd5d3de', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {

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

@@ -96,7 +96,7 @@ export class EdsInputField {
     }
     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: 'bf31e95b0fad54062686ae178af0d6b552d04654' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, 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, h("div", { class: "flex justify-between" }, 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("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: '615165ebb5980d2da414ad4028e053b46358eb4e' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, 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, h("div", { class: "flex justify-between" }, 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("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -109,10 +109,11 @@ export class EdsInputField {
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
             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: 'b47668a883a11da148a38a063ecf573e79a6d714', class: "mt-6" }, h("eds-input-footer", { key: '2c25baf0474a573f143b17bcaa19826fdc94dd7f', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: '4ca8edfb4538caab53e89f16008683aea28adfbc', class: "mt-6" }, h("eds-input-footer", { key: '68053a16f607a277a5c806f3c830b24acf3b1f50', 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"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-input-field.css"]

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

@@ -180,12 +180,34 @@ export class EdsLink {
             action: 'click'
         });
     }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        // Handle Enter and Space keys for activation
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleClick(event);
+            // For actual navigation, trigger the native link behavior
+            if (this.url && !this.disabled) {
+                if (this.external) {
+                    window.open(this.url, '_blank', 'noopener,noreferrer');
+                }
+                else {
+                    window.location.href = this.url;
+                }
+            }
+        }
+    }
     getLinkSize() {
+        if (this.intent === 'underline') {
+            return 'underline';
+        }
         return this.size;
     }
     renderLeftIcon() {
         if (this.icon && this.iconPos === 'left') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -194,7 +216,7 @@ export class EdsLink {
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -202,8 +224,6 @@ export class EdsLink {
         return null;
     }
     render() {
-        // If the link is disabled, use a <span>; otherwise, use an <a> element.
-        const ComponentType = this.disabled ? 'span' : 'a';
         const classes = linkStyles({
             intent: this.intent,
             size: this.getLinkSize(),
@@ -211,12 +231,12 @@ export class EdsLink {
             isActive: this.current,
             hasIcon: !!this.icon
         });
-        // If no visible label is provided, ensure ariaLabel is set.
-        const computedAriaLabel = this.ariaLabel || this.label || 'link';
+        const isInteractive = !this.disabled;
+        const isIconOnly = !this.label || (this.hideLabelOnSmallScreen && this.icon);
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '19e7d05290f3dda2cc4e821c5625f7dd82198dcd', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '36ce6891c07cf6e37acef3e6fecd3e96bcaa0312', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '2455011e19a98939aec59768f09ae310ad03692b', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h("a", { key: '929b7318ec6475113125e40d789476df76e59e38', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : 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: '4b965dcb07ebca43577b0dcd9f2d11495caa761a', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'a4327fe130fb8c3962096eff3415ad62e19230f4', class: labelClasses }, 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

@@ -65,6 +65,7 @@ export default {
 };
 export const Default = {
     render: (args) => `
+   <div class="text-center">
     <eds-link
       label="${args.label}"
       intent="${args.intent}"
@@ -77,7 +78,8 @@ export const Default = {
       url="${args.url}"
       aria-label="${args.ariaLabel}"
       download="${args.download}">
-    </eds-link>`,
+    </eds-link>
+  </div>`,
     args: {
         label: 'Click Me',
         intent: 'primary',

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

@@ -76,7 +76,7 @@ export class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '717ea23a3d9156fd59abb808c3175194b6973d6b', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '794768d57ee14767a0475d949c24fafaa28bc924', innerHTML: logoContent })));
+        return (h("a", { key: 'fff2a45eb8b41f59026ff7033824484339e3c0a9', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: 'bc13988a739af1c94d5eadbabf558cbbb10927b8', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,9 +121,9 @@ export class EdsModal {
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: 'b2b2c3a433049b28ec58dd7ebd0c074597c9e5d4', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '839115c4261e68289410b1a3e30eb28597cdae9e', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: '14c35228e2aaf72d59f1766fd8e69fcd06ea5270', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '34b5dad3a31cd9a66135ce9d93d48215712529b9', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'ffb82ca6bf618a842e5c6c5783caccac0b538f3d', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8bd4b17956d04772ba690fce563aa929195cd3d0', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: 'dcbdb579245e406d2fc4e4a44fb1828625e1e7aa', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '533c582543fa09ff1d7a7a8a1d1b608eb02d5c72', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '8d95e7649c535da3ddb4de5646579f12341a9e10', class: "pt-8 px-20 py-20" }, h("slot", { key: '7b9678ff3cedbef291ea8dea53ef30a96237a60c' })))));
+            onClick: () => this.close() })), h("div", { key: '5268780d170f080404d2c3ab0bb3f355b50895cb', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '20c094f3fb3cd31280118d687dec311a8aa59f57', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: 'de7ff288945cd6e0a8c97d9c40cf02cc5ba4ea41', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: 'a46dc51081ad99856cfa81ccdf2ab060f644c7cb', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '45557580b90ae4f5d176eaa4805ce527d6e59eec', class: "pt-8 px-20 py-20" }, h("slot", { key: 'b67c888a32c615c5073768ec3cd4e342a34a84c6' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,36 @@
+// eds-nps.stories.ts
+export default {
+    title: 'Components/NPS',
+    component: 'eds-nps',
+    argTypes: {
+        question: {
+            control: 'text',
+            description: 'The question prompt for the NPS scale.'
+        },
+        leftLabel: {
+            control: 'text',
+            description: 'Label displayed under the minimum value.'
+        },
+        rightLabel: {
+            control: 'text',
+            description: 'Label displayed under the maximum value.'
+        }
+    },
+    args: {
+        question: 'How likely are you to recommend us to a friend or colleague?',
+        leftLabel: '0 - Not at all likely',
+        rightLabel: '10 - Extremely likely'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-nps
+      question="${args.question}"
+      left-label="${args.leftLabel}"
+      right-label="${args.rightLabel}"
+    ></eds-nps>
+  `,
+    args: {
+    // you can override defaults here if you like
+    }
+};