@designsystem-se/af 39.2.0 → 39.2.1-beta.1

package/dist/esm/digi-link.entry.js

@@ -1,23 +1,23 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
 
-const linkCss = ".sc-digi-link-h{--digi--link--gap:var(--digi--gutter--medium);--digi--link--color--default:var(--digi--color--text--interactive--primary);--digi--link--color--hover:var(--digi--color--text--interactive--primary);--digi--link--color--visited:var(--digi--color--text--interactive--visited);--digi--link--font-size:var(--digi--typography--link--font-size--desktop);--digi--link--font-family:var(--digi--global--typography--font-family--default);--digi--link--font-weight:var(--digi--typography--link-bold--font-weight--desktop);--digi--link--line-height:var(--digi--typography--link--line-height--desktop);--digi--link--text-decoration--default:none;--digi--link--text-decoration--hover:underline;--digi--link--text-decoration--icon--default:var(--digi--global--typography--text-decoration--default);--digi--link--text-decoration--icon--hover:underline;--digi--link--text-decoration-thickness:0.156em;--digi--link--text-underline-offset:3px;--COLOR:var(--digi--link--color--default);--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--default);position:relative}.sc-digi-link-h:focus-visible{outline:none}.digi-link--has-icon.sc-digi-link-h{--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--icon--default)}.digi-link--has-icon.sc-digi-link-h:focus,.digi-link--has-icon.sc-digi-link-h:hover{--digi--link--text-decoration--hover:var(--digi--link--text-decoration--icon--hover)}.sc-digi-link-h a.sc-digi-link:hover{--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--hover);text-underline-offset:var(--digi--link--text-underline-offset);text-decoration-thickness:var(--digi--link--text-decoration-thickness)}.sc-digi-link-h a.sc-digi-link:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-link-s>a{font-family:var(--digi--link--font-family);font-size:var(--digi--link--font-size);font-weight:var(--digi--link--font-weight);line-height:var(--digi--link--line-height);color:var(--COLOR);text-decoration:var(--LINK-TEXT-DECORATION);display:inline-flex;gap:var(--digi--link--gap);text-underline-offset:var(--digi--link--text-underline-offset);text-decoration-thickness:var(--digi--link--text-decoration-thickness)}.sc-digi-link-s>a:hover{cursor:pointer}.sc-digi-link-s>a:hover{--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--hover)}.sc-digi-link-s>a:visited{color:var(--digi--link--color--visited)}.sc-digi-link-s>a:visited svg{color:var(--digi--link--color--visited)}.digi-link--hide-visited.sc-digi-link-s>a:visited,.digi-link--hide-visited .sc-digi-link-s>a:visited{color:var(--digi--link--color--default)}.digi-link--hide-visited.sc-digi-link-s>a:visited,.digi-link--hide-visited.sc-digi-link-s>a:visited svg,.digi-link--hide-visited .sc-digi-link-s>a:visited svg{color:var(--digi--link--color--default)}.sc-digi-link-s>a [class*=digi-icon],.sc-digi-link-s>a [slot^=icon]{--digi--icon--color:var(--COLOR);--digi--icon--height:1em;--digi--icon--width:1em}";
-const DigiLinkStyle0 = linkCss;
+const linkCss = () => `.sc-digi-link-h{--digi--link--gap:var(--digi--gutter--medium);--digi--link--color--default:var(--digi--color--text--interactive--primary);--digi--link--color--hover:var(--digi--color--text--interactive--primary);--digi--link--color--visited:var(--digi--color--text--interactive--visited);--digi--link--font-size:var(--digi--typography--link--font-size--desktop);--digi--link--font-family:var(--digi--global--typography--font-family--default);--digi--link--font-weight:var(--digi--typography--link-bold--font-weight--desktop);--digi--link--line-height:var(--digi--typography--link--line-height--desktop);--digi--link--text-decoration--default:none;--digi--link--text-decoration--hover:underline;--digi--link--text-decoration--icon--default:var(--digi--global--typography--text-decoration--default);--digi--link--text-decoration--icon--hover:underline;--digi--link--text-decoration-thickness:0.156em;--digi--link--text-underline-offset:3px;--COLOR:var(--digi--link--color--default);--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--default);--digi--link--icon-height:1em;--digi--link--icon-width:1em;display:inline-flex;align-items:start;max-width:100%;vertical-align:top;position:relative}.sc-digi-link-h:focus-visible{outline:none}.digi-link--has-icon.sc-digi-link-h{--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--icon--default)}.digi-link--has-icon.sc-digi-link-h:focus,.digi-link--has-icon.sc-digi-link-h:hover{--digi--link--text-decoration--hover:var(--digi--link--text-decoration--icon--hover)}.sc-digi-link-h a.sc-digi-link{font-family:var(--digi--link--font-family);font-size:var(--digi--link--font-size);font-weight:var(--digi--link--font-weight);line-height:var(--digi--link--line-height);color:var(--COLOR);--digi--icon--color:currentColor;text-decoration:var(--LINK-TEXT-DECORATION);display:inline-flex;align-items:start;gap:var(--digi--link--gap);text-underline-offset:var(--digi--link--text-underline-offset);text-decoration-thickness:var(--digi--link--text-decoration-thickness)}.sc-digi-link-h a.sc-digi-link:hover{cursor:pointer;--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--hover)}.sc-digi-link-h a.sc-digi-link:hover{text-underline-offset:var(--digi--link--text-underline-offset);text-decoration-thickness:var(--digi--link--text-decoration-thickness)}.sc-digi-link-h a.sc-digi-link:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-link-h a.sc-digi-link:visited{color:var(--digi--link--color--visited)}.digi-link--hide-visited.sc-digi-link-h a.sc-digi-link:visited{color:var(--digi--link--color--default)}.sc-digi-link-h .digi-link__icon-wrapper.sc-digi-link{display:inline-flex;align-items:center;align-self:flex-start;flex-shrink:0;font-size:var(--digi--link--font-size);color:inherit;--digi--icon--color:currentColor}.sc-digi-link-h .digi-link__icon-wrapper[hidden].sc-digi-link{display:none !important}.sc-digi-link-s>[slot=icon],.sc-digi-link-s>[class*=digi-icon],.sc-digi-link-s>[class*=__icon],.sc-digi-link-s>:not([slot]):not(a){--digi--icon--color:currentColor;--digi--icon--height:var(--digi--link--icon-height);--digi--icon--width:var(--digi--link--icon-width);font-size:var(--digi--link--font-size);align-self:flex-start;flex-shrink:0}.sc-digi-link-s>a{font-family:var(--digi--link--font-family);font-size:var(--digi--link--font-size);font-weight:var(--digi--link--font-weight);line-height:var(--digi--link--line-height);color:var(--COLOR);--digi--icon--color:currentColor;text-decoration:var(--LINK-TEXT-DECORATION);display:inline-flex;align-items:start;gap:var(--digi--link--gap);text-underline-offset:var(--digi--link--text-underline-offset);text-decoration-thickness:var(--digi--link--text-decoration-thickness)}.sc-digi-link-s>a:hover{cursor:pointer;--LINK-TEXT-DECORATION:var(--digi--link--text-decoration--hover)}.sc-digi-link-s>a [class*=digi-icon],.sc-digi-link-s>a [slot^=icon]{--digi--icon--color:currentColor;--digi--icon--height:1em;--digi--icon--width:1em}.sc-digi-link-s>a:visited{color:var(--digi--link--color--visited)}.digi-link--hide-visited.sc-digi-link-s>a:visited,.digi-link--hide-visited .sc-digi-link-s>a:visited{color:var(--digi--link--color--default)}`;
 
 const Link = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.afOnClick = createEvent(this, "afOnClick", 7);
         this.afOnReady = createEvent(this, "afOnReady", 3);
-        this.hasIcon = undefined;
-        this.relation = undefined;
-        this.afHref = undefined;
-        this.afDescribedby = undefined;
-        this.afAriaLabel = undefined;
-        this.afTarget = undefined;
+        /**
+         * Kringgår länkens vanliga klick-beteende (e.preventDefault()).
+         * Bör endast användas om det vanliga beteendet är problematiskt pga dynamisk routing eller liknande.
+         * @en Override default link behavior. Should only be used if default link behaviour is a problem with e.g. routing
+         */
         this.afOverrideLink = false;
+        /**
+         * Sätt till true om du använder Angular, se exempelkod under 'Översikt'
+         * @en Set to true if using Angular
+         */
         this.afLinkContainer = false;
-        this.hideVisitedColor = undefined;
-        this.afDownload = undefined;
     }
     async afMGetLinkElement() {
         if (this.afLinkContainer) {
@@ -42,7 +42,6 @@ const Link = class {
         this.hasIcon = !!this.hostElement.querySelector('[slot="icon"]');
     }
     componentWillLoad() {
-        this.setHasIcon();
         this.setRel();
     }
     componentWillUpdate() {
@@ -50,6 +49,7 @@ const Link = class {
         this.setRel();
     }
     componentDidLoad() {
+        this.setHasIcon();
         this.afOnReady.emit();
     }
     get cssModifiers() {
@@ -59,13 +59,15 @@ const Link = class {
         };
     }
     render() {
-        return (h(Host, { key: 'd4955d115e6943c86d1af4edc7bc9ab806db74ac', class: Object.assign({ 'digi-link': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '29204641d98ec78ba4dcb786972b250907d318dc', href: this.afHref, onClick: (e) => this.clickLinkHandler(e), target: this.afTarget, rel: this.relation, ref: (el) => (this._link = el), "aria-describedby": this.afDescribedby, "aria-label": this.afAriaLabel, download: this.afDownload }, this.hasIcon && (h("div", { key: 'b983a1ebef256bb4eb416e6e25ef302c61a79956', class: "digi-link__icon-wrapper", "aria-hidden": "true" }, h("slot", { key: 'ec1f818a869cfeea0613acc7f582a02f27a37c46', name: "icon" }))), h("slot", { key: 'e95b687ffc6908b5d8f0b84d19c84f059865b4b5' }))), this.afLinkContainer && h("slot", { key: '01aa827b552600745df8ee55fb8141f8d0991ac1' })));
+        return (h(Host, { key: '311693f030053511fddae6407847b6ebb2aa3dfb', class: Object.assign({ 'digi-link': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '1589f6f6d89886d47270f775575fbda7dcc4438f', href: this.afHref, onClick: (e) => this.clickLinkHandler(e), target: this.afTarget, rel: this.relation, ref: (el) => (this._link = el), "aria-describedby": this.afDescribedby, "aria-label": this.afAriaLabel, download: this.afDownload }, h("div", { key: '31aca399d5c7614a3bb1828eb36d875acb9b102f', class: "digi-link__icon-wrapper", "aria-hidden": "true", hidden: !this.hasIcon }, h("slot", { key: '94a44c6e123edb55d118580915b7942d96e08298', name: "icon" })), h("slot", { key: '027ccaa4e0e903980a0b5aebfcb1452127c551c1' }))), this.afLinkContainer && h("slot", { key: 'ee56c0911f7fb1d701ae3ac950302ec1c80c6334' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "afTarget": ["setRel"]
+        "afTarget": [{
+                "setRel": 0
+            }]
     }; }
 };
-Link.style = DigiLinkStyle0;
+Link.style = linkCss();
 
 export { Link as digi_link };

package/dist/esm/digi-list.entry.js

@@ -1,15 +1,17 @@
-import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
-import { L as ListType } from './list-type.enum-fbb331ad.js';
-import { l as logger } from './logger.util-ede3c48a.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { L as ListType } from './list-type.enum-CsNHGpkJ.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
 
-const listCss = ".sc-digi-list-h{--digi--list--padding-inline-start:0.25rem}.sc-digi-list-h .digi-list--checked.sc-digi-list{list-style-position:inside;padding-inline-start:var(--digi--list--padding-inline-start)}.sc-digi-list-h .digi-list--checked.sc-digi-list li.sc-digi-list{list-style:none;display:flex;align-items:flex-start}.sc-digi-list-s .digi-list--checked .digi-list__icon{padding-right:var(--digi--padding--small);width:1rem;min-height:auto;flex-shrink:0;align-items:start;margin-top:0.4375rem}";
-const DigiListStyle0 = listCss;
+const listCss = () => `.sc-digi-list-h{--digi--list--padding-inline-start:0.25rem}.sc-digi-list-h .digi-list--checked.sc-digi-list{list-style-position:inside;padding-inline-start:var(--digi--list--padding-inline-start)}.sc-digi-list-h .digi-list--checked.sc-digi-list li.sc-digi-list{list-style:none;display:flex;align-items:flex-start}.sc-digi-list-h .digi-list__icon.sc-digi-list{padding-right:var(--digi--padding--small);width:1rem;min-height:auto;flex-shrink:0;align-items:start;margin-top:0.4375rem;--digi--icon--width:1rem;--digi--icon--height:auto}.sc-digi-list-h.digi-list--checked.sc-digi-list-s>li,.digi-list--checked .sc-digi-list-s>li,.digi-list--checked.sc-digi-list-s>li{list-style:none;display:flex;align-items:flex-start}.sc-digi-list-h.digi-list--checked.sc-digi-list-s>li .digi-list__icon,.digi-list--checked .sc-digi-list-s>li .digi-list__icon,.sc-digi-list-h.digi-list--checked.sc-digi-list-s>li digi-icon-check,.digi-list--checked .sc-digi-list-s>li digi-icon-check,.digi-list--checked.sc-digi-list-s>li .digi-list__icon,.digi-list--checked.sc-digi-list-s>li digi-icon-check{padding-right:var(--digi--padding--small);width:1rem;min-height:auto;flex-shrink:0;align-items:start;margin-top:0.4375rem;--digi--icon--width:1rem;--digi--icon--height:auto}`;
 
 const List = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.listItems = [];
-        this.hasSlottedItems = undefined;
+        /**
+         * Sätter typ. Kan vara 'bullet', 'numbered', eller 'checked'.
+         * @en Set list type. Can be 'bullet', 'numbered' eller 'checked'.
+         */
         this.afListType = ListType.BULLET;
     }
     componentWillLoad() {
@@ -19,12 +21,14 @@ const List = class {
         this.getListItems();
     }
     componentDidLoad() {
-        // Observe changes to children for dynamically added items
         this._observer = new MutationObserver(() => {
             this.getListItems();
+            this.applyCheckedListStyling();
+        });
+        this._observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true
         });
-        //observes changes to the list of child nodes
-        this._observer.observe(this.hostElement, { childList: true });
         this.applyCheckedListStyling();
     }
     componentDidUpdate() {
@@ -75,10 +79,13 @@ const List = class {
             'digi-list': true,
             [`digi-list--${this.afListType}`]: true
         };
-        return (h("digi-typography", { key: '08256bfe3bec18b9049aec8a2ef4620cbbabf5a4' }, h(Tag, { key: '249c820d2ee97816bca783ff3dfb08abd1e6256e', class: className }, h("slot", { key: 'fd313fa7cad0fbd9f2fea525b359517e99d92010' }))));
+        return (h(Host, { key: '507cf0cc7dca054f26a91fd4cddcbef21c0031ad', class: className }, h("digi-typography", { key: '94a5c3157f8dd3be30309ef06033acfe9b74de5e' }, h(Tag, { key: 'a273c6e26025d12719ebc3c06c5752c7ec54fe58', class: className }, h("slot", { key: '5c22b551ca221d6e76521624ea21fb81b52f51de', onSlotchange: () => {
+                this.getListItems();
+                this.applyCheckedListStyling();
+            } })))));
     }
     get hostElement() { return getElement(this); }
 };
-List.style = DigiListStyle0;
+List.style = listCss();
 
 export { List as digi_list };

package/dist/esm/digi-loader-skeleton.entry.js

@@ -1,13 +1,20 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-148a7577.js';
-import { L as LoaderSkeletonVariation } from './loader-skeleton-variation.enum-f9f867b4.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { L as LoaderSkeletonVariation } from './loader-skeleton-variation.enum-D_VIx0pC.js';
 
-const loaderSkeletonCss = ".sc-digi-loader-skeleton-h{--digi--loader-skeleton--background:var(--digi--color--misc--skeleton);--digi--loader-skeleton--margin-bottom:var(--digi--typography--paragraph--margin--small);--digi--loader-skeleton--header-height:2rem;--digi--loader-skeleton--line-height:var(--digi--typography--body--font-size--desktop);--digi--loader-skeleton--text-height:var(--digi--typography--body--font-size--desktop);--digi--loader-skeleton--circle-height:2rem;--digi--loader-skeleton--circle-width:2rem;--digi--loader-skeleton--circle-border-radius:50%;--digi--loader-skeleton--text-margin:var(--digi--margin--h4-h6-large);--digi--loader-skeleton--header-margin:var(--digi--typography--h3--margin--small);--digi--loader-skeleton--line-margin-bottom:var(--digi--typography--paragraph--margin--small);--digi--loader-skeleton--rounded-border-radius:var(--digi--border-radius--complementary-2)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item.sc-digi-loader-skeleton{--HEIGHT:1rem;--WIDTH:100%;--BACKGROUND-COLOR:var(--digi--loader-skeleton--background);--BORDER-RADIUS:var(--digi--border-radius--primary);--ANIMATION:var(--digi--loader-skeleton--animation, pulse 1.5s infinite);--MARGIN-BOTTOM:var(--digi--loader-skeleton--margin-bottom);background-color:var(--BACKGROUND-COLOR);width:var(--WIDTH);height:var(--HEIGHT);animation:var(--ANIMATION);border-radius:var(--BORDER-RADIUS);margin-bottom:var(--MARGIN-BOTTOM)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--header.sc-digi-loader-skeleton{--WIDTH:50%;--HEIGHT:var(--digi--loader-skeleton--header-height);--MARGIN-BOTTOM:var(--digi--loader-skeleton--header-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--line.sc-digi-loader-skeleton{--WIDTH:100%;--HEIGHT:var(--digi--loader-skeleton--line-height);--MARGIN-BOTTOM:var(--digi--loader--skeleton--line-margin-bottom)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--text.sc-digi-loader-skeleton{--HEIGHT:var(--digi--loader-skeleton--text-height);--MARGIN:var(--digi--loader-skeleton--text-margin);--MARGIN-BOTTOM:var(--digi--loader-skeleton--text-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--circle.sc-digi-loader-skeleton{--MARGIN-BOTTOM:var(--digi--loader-skeleton--text-margin);--WIDTH:var(--digi--loader-skeleton--circle-width);--HEIGHT:var(--digi--loader-skeleton--circle-height);--BORDER-RADIUS:var(--digi--loader-skeleton--circle-border-radius)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--rounded.sc-digi-loader-skeleton{--BORDER-RADIUS:var(--digi--loader-skeleton--rounded-border-radius);--HEIGHT:var(--digi--loader-skeleton--header-height);--WIDTH:25%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-header.sc-digi-loader-skeleton{--WIDTH:50%;--HEIGHT:var(--digi--loader-skeleton--header-height);--MARGIN-BOTTOM:var(--digi--loader-skeleton--header-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-text.sc-digi-loader-skeleton{--HEIGHT:var(--digi--loader-skeleton--text-height);--MARGIN:var(--digi--loader-skeleton--text-margin);--MARGIN-BOTTOM:var(--digi--loader-skeleton--text-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}@keyframes pulse{0%{opacity:0.2}50%{opacity:1}100%{opacity:0.4}}";
-const DigiLoaderSkeletonStyle0 = loaderSkeletonCss;
+const loaderSkeletonCss = () => `.sc-digi-loader-skeleton-h{--digi--loader-skeleton--background:var(--digi--color--misc--skeleton);--digi--loader-skeleton--margin-bottom:var(--digi--typography--paragraph--margin--small);--digi--loader-skeleton--header-height:2rem;--digi--loader-skeleton--line-height:var(--digi--typography--body--font-size--desktop);--digi--loader-skeleton--text-height:var(--digi--typography--body--font-size--desktop);--digi--loader-skeleton--circle-height:2rem;--digi--loader-skeleton--circle-width:2rem;--digi--loader-skeleton--circle-border-radius:50%;--digi--loader-skeleton--text-margin:var(--digi--margin--h4-h6-large);--digi--loader-skeleton--header-margin:var(--digi--typography--h3--margin--small);--digi--loader-skeleton--line-margin-bottom:var(--digi--typography--paragraph--margin--small);--digi--loader-skeleton--rounded-border-radius:var(--digi--border-radius--complementary-2)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item.sc-digi-loader-skeleton{--HEIGHT:1rem;--WIDTH:100%;--BACKGROUND-COLOR:var(--digi--loader-skeleton--background);--BORDER-RADIUS:var(--digi--border-radius--primary);--ANIMATION:var(--digi--loader-skeleton--animation, pulse 1.5s infinite);--MARGIN-BOTTOM:var(--digi--loader-skeleton--margin-bottom);background-color:var(--BACKGROUND-COLOR);width:var(--WIDTH);height:var(--HEIGHT);animation:var(--ANIMATION);border-radius:var(--BORDER-RADIUS);margin-bottom:var(--MARGIN-BOTTOM)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--header.sc-digi-loader-skeleton{--WIDTH:50%;--HEIGHT:var(--digi--loader-skeleton--header-height);--MARGIN-BOTTOM:var(--digi--loader-skeleton--header-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--line.sc-digi-loader-skeleton{--WIDTH:100%;--HEIGHT:var(--digi--loader-skeleton--line-height);--MARGIN-BOTTOM:var(--digi--loader--skeleton--line-margin-bottom)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--text.sc-digi-loader-skeleton{--HEIGHT:var(--digi--loader-skeleton--text-height);--MARGIN:var(--digi--loader-skeleton--text-margin);--MARGIN-BOTTOM:var(--digi--loader-skeleton--text-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--circle.sc-digi-loader-skeleton{--MARGIN-BOTTOM:var(--digi--loader-skeleton--text-margin);--WIDTH:var(--digi--loader-skeleton--circle-width);--HEIGHT:var(--digi--loader-skeleton--circle-height);--BORDER-RADIUS:var(--digi--loader-skeleton--circle-border-radius)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--rounded.sc-digi-loader-skeleton{--BORDER-RADIUS:var(--digi--loader-skeleton--rounded-border-radius);--HEIGHT:var(--digi--loader-skeleton--header-height);--WIDTH:25%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-header.sc-digi-loader-skeleton{--WIDTH:50%;--HEIGHT:var(--digi--loader-skeleton--header-height);--MARGIN-BOTTOM:var(--digi--loader-skeleton--header-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-text.sc-digi-loader-skeleton{--HEIGHT:var(--digi--loader-skeleton--text-height);--MARGIN:var(--digi--loader-skeleton--text-margin);--MARGIN-BOTTOM:var(--digi--loader-skeleton--text-margin)}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}.sc-digi-loader-skeleton-h .digi-loader-skeleton__item--section-text.sc-digi-loader-skeleton:last-child{--WIDTH:75%}@keyframes pulse{0%{opacity:0.2}50%{opacity:1}100%{opacity:0.4}}`;
 
 const LoaderSkeleton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Sätter antalet rader av skeleton loader
+         * @en sets the amount of lines of skeleton loader
+         */
         this.afCount = 4;
+        /**
+         * Sätter varianten
+         * @en Sets the variation.
+         */
         this.afVariation = LoaderSkeletonVariation.LINE;
         this.isLoading = true;
     }
@@ -36,6 +43,6 @@ const LoaderSkeleton = class {
     }
     get hostElement() { return getElement(this); }
 };
-LoaderSkeleton.style = DigiLoaderSkeletonStyle0;
+LoaderSkeleton.style = loaderSkeletonCss();
 
 export { LoaderSkeleton as digi_loader_skeleton };

package/dist/esm/digi-loader-spinner.entry.js

@@ -1,14 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-148a7577.js';
-import { L as LoaderSpinnerSize } from './loader-spinner-size.enum-0b246fa0.js';
+import { r as registerInstance, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { L as LoaderSpinnerSize } from './loader-spinner-size.enum-ArGkfrXt.js';
 
-const loaderSpinnerCss = ".sc-digi-loader-spinner-h{--digi--loader-spinner--background-color:var(--digi--color--marking--indication--secondary);--digi--loader-spinner--icon--size--small:1rem;--digi--loader-spinner--icon--size--medium:2rem;--digi--loader-spinner--icon--size--large:5rem;--digi-loader-spinner--font--size--small:var(--digi--typography--heading-4--font-size--desktop-xsmall);--digi-loader-spinner--font--size--medium:var(--digi--typography--heading-4--font-size--desktop);--digi-loader-spinner--font--size--large:var(--digi--typography--heading-4--font-size--desktop-large)}.sc-digi-loader-spinner-h .digi-loader-spinner.sc-digi-loader-spinner{display:flex;flex-direction:column;align-items:center;width:max-content;padding:var(--PADDING)}.sc-digi-loader-spinner-h .digi-loader-spinner--small.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--small);--FONT-SIZE:var(--digi-loader-spinner--font--size--small);--PADDING:0}.sc-digi-loader-spinner-h .digi-loader-spinner--medium.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--medium);--FONT-SIZE:var(--digi-loader-spinner--font--size--medium);--PADDING:var(--digi--gutter--large)}.sc-digi-loader-spinner-h .digi-loader-spinner--large.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--large);--FONT-SIZE:var(--digi-loader-spinner--font--size--large);--PADDING:var(--digi--gutter--large)}.sc-digi-loader-spinner-h .digi-loader-spinner__container.sc-digi-loader-spinner{height:max-content;width:max-content}.sc-digi-loader-spinner-h .digi-loader-spinner__spinner.sc-digi-loader-spinner{animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:var(--ICON-HEIGHT);--digi--icon--color:var(--digi--loader-spinner--background-color)}@media (prefers-reduced-motion){.sc-digi-loader-spinner-h .digi-loader-spinner__spinner.sc-digi-loader-spinner{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-loader-spinner-h .digi-loader-spinner__label.sc-digi-loader-spinner{margin-top:var(--digi--gutter--medium);color:var(--digi--color--text--primary)}";
-const DigiLoaderSpinnerStyle0 = loaderSpinnerCss;
+const loaderSpinnerCss = () => `.sc-digi-loader-spinner-h{--digi--loader-spinner--background-color:var(--digi--color--marking--indication--secondary);--digi--loader-spinner--icon--size--small:1rem;--digi--loader-spinner--icon--size--medium:2rem;--digi--loader-spinner--icon--size--large:5rem;--digi-loader-spinner--font--size--small:var(--digi--typography--heading-4--font-size--desktop-xsmall);--digi-loader-spinner--font--size--medium:var(--digi--typography--heading-4--font-size--desktop);--digi-loader-spinner--font--size--large:var(--digi--typography--heading-4--font-size--desktop-large)}.sc-digi-loader-spinner-h .digi-loader-spinner.sc-digi-loader-spinner{display:flex;flex-direction:column;align-items:center;width:max-content;padding:var(--PADDING)}.sc-digi-loader-spinner-h .digi-loader-spinner--small.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--small);--FONT-SIZE:var(--digi-loader-spinner--font--size--small);--PADDING:0}.sc-digi-loader-spinner-h .digi-loader-spinner--medium.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--medium);--FONT-SIZE:var(--digi-loader-spinner--font--size--medium);--PADDING:var(--digi--gutter--large)}.sc-digi-loader-spinner-h .digi-loader-spinner--large.sc-digi-loader-spinner{--ICON-HEIGHT:var(--digi--loader-spinner--icon--size--large);--FONT-SIZE:var(--digi-loader-spinner--font--size--large);--PADDING:var(--digi--gutter--large)}.sc-digi-loader-spinner-h .digi-loader-spinner__container.sc-digi-loader-spinner{height:max-content;width:max-content}.sc-digi-loader-spinner-h .digi-loader-spinner__spinner.sc-digi-loader-spinner{animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:var(--ICON-HEIGHT);--digi--icon--color:var(--digi--loader-spinner--background-color)}@media (prefers-reduced-motion){.sc-digi-loader-spinner-h .digi-loader-spinner__spinner.sc-digi-loader-spinner{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-loader-spinner-h .digi-loader-spinner__label.sc-digi-loader-spinner{margin-top:var(--digi--gutter--medium);color:var(--digi--color--text--primary)}`;
 
 const LoaderSpinner = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Sätter spinnerns storlek. 'medium' är förvalt.
+         * @en Set spinner icon size. Defaults to medium size.
+         */
         this.afSize = LoaderSpinnerSize.MEDIUM;
-        this.afText = undefined;
     }
     get cssModifiers() {
         return {
@@ -22,6 +24,6 @@ const LoaderSpinner = class {
     }
     get hostElement() { return getElement(this); }
 };
-LoaderSpinner.style = DigiLoaderSpinnerStyle0;
+LoaderSpinner.style = loaderSpinnerCss();
 
 export { LoaderSpinner as digi_loader_spinner };

package/dist/esm/digi-logo.entry.js

@@ -1,20 +1,27 @@
-import { r as registerInstance, h } from './index-148a7577.js';
-import { L as LogoColor } from './logo-color.enum-8593dca6.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { r as registerInstance, h } from './index-BnKuq1L7.js';
+import { L as LogoColor } from './logo-color.enum-Chk3GCYK.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
 
-const logoCss = ".sc-digi-logo-h{--digi--logo--img--min-width:16rem;--digi--logo--img--max-width:18.25rem;--digi--logo--img--max-width--large:23rem;--digi--logo--img--max-width--system:2.75rem;--digi--logo--padding:1.375rem;--digi--logo--padding--wide:var(--digi--gutter--larger);--digi--logo--padding--large:var(--digi--gutter--medium);--digi--logo--padding--large--wide:var(--digi--gutter--larger);--digi--logo--primary--symbol:var(--digi--color--logotype--primary--symbol);--digi--logo--secondary--symbol:var(--digi--color--logotype--secondary--symbol);--digi--logo--primary--text:var(--digi--color--logotype--primary--text);--digi--logo--secondary--text:var(--digi--color--logotype--secondary--text)}.sc-digi-logo-h .digi-logo.sc-digi-logo{display:flex;align-items:center;padding-top:var(--digi--logo--padding);padding-right:var(--digi--logo--padding);padding-bottom:var(--digi--logo--padding);padding-left:0}.sc-digi-logo-h .digi-logo.sc-digi-logo .main-symbol.sc-digi-logo{fill:var(--COLOR--SYMBOL)}.sc-digi-logo-h .digi-logo__img.sc-digi-logo{display:flex}.sc-digi-logo-h .digi-logo.sc-digi-logo svg.sc-digi-logo{fill:var(--COLOR--TEXT);width:100%;height:auto;max-width:var(--digi--logo--img--max-width)}.sc-digi-logo-h .digi-logo--primary.sc-digi-logo{--COLOR--SYMBOL:var(--digi--logo--primary--symbol);--COLOR--TEXT:var(--digi--logo--primary--text)}.sc-digi-logo-h .digi-logo--secondary.sc-digi-logo{--COLOR--SYMBOL:var(--digi--logo--secondary--symbol);--COLOR--TEXT:var(--digi--logo--secondary--text)}.sc-digi-logo-h .digi-logo--only-symbol.sc-digi-logo .digi-logo__img.sc-digi-logo{flex-shrink:0}.sc-digi-logo-h .digi-logo--full-logo.sc-digi-logo svg.sc-digi-logo{min-width:var(--digi--logo--img--min-width)}@media (min-width: 61.9375rem){.sc-digi-logo-h .digi-logo.sc-digi-logo svg.sc-digi-logo{--digi--logo--img--max-width:var(--digi--logo--img--max-width--large)}}";
-const DigiLogoStyle0 = logoCss;
+const logoCss = () => `.sc-digi-logo-h{--digi--logo--img--min-width:16rem;--digi--logo--img--max-width:18.25rem;--digi--logo--img--max-width--large:23rem;--digi--logo--img--max-width--system:2.75rem;--digi--logo--padding:1.375rem;--digi--logo--padding--wide:var(--digi--gutter--larger);--digi--logo--padding--large:var(--digi--gutter--medium);--digi--logo--padding--large--wide:var(--digi--gutter--larger);--digi--logo--primary--symbol:var(--digi--color--logotype--primary--symbol);--digi--logo--secondary--symbol:var(--digi--color--logotype--secondary--symbol);--digi--logo--primary--text:var(--digi--color--logotype--primary--text);--digi--logo--secondary--text:var(--digi--color--logotype--secondary--text)}.sc-digi-logo-h .digi-logo.sc-digi-logo{display:flex;align-items:center;padding-top:var(--digi--logo--padding);padding-right:var(--digi--logo--padding);padding-bottom:var(--digi--logo--padding);padding-left:0}.sc-digi-logo-h .digi-logo.sc-digi-logo .main-symbol.sc-digi-logo{fill:var(--COLOR--SYMBOL)}.sc-digi-logo-h .digi-logo__img.sc-digi-logo{display:flex}.sc-digi-logo-h .digi-logo.sc-digi-logo svg.sc-digi-logo{fill:var(--COLOR--TEXT);width:100%;height:auto;max-width:var(--digi--logo--img--max-width)}.sc-digi-logo-h .digi-logo--primary.sc-digi-logo{--COLOR--SYMBOL:var(--digi--logo--primary--symbol);--COLOR--TEXT:var(--digi--logo--primary--text)}.sc-digi-logo-h .digi-logo--secondary.sc-digi-logo{--COLOR--SYMBOL:var(--digi--logo--secondary--symbol);--COLOR--TEXT:var(--digi--logo--secondary--text)}.sc-digi-logo-h .digi-logo--only-symbol.sc-digi-logo .digi-logo__img.sc-digi-logo{flex-shrink:0}.sc-digi-logo-h .digi-logo--full-logo.sc-digi-logo svg.sc-digi-logo{min-width:var(--digi--logo--img--min-width)}@media (min-width: 61.9375rem){.sc-digi-logo-h .digi-logo.sc-digi-logo svg.sc-digi-logo{--digi--logo--img--max-width:var(--digi--logo--img--max-width--large)}}`;
 
 const Logo = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.isMobile = undefined;
-        this.relation = undefined;
-        this.afOnlySymbol = undefined;
+        /**
+         * Sätter variation. kan vara 'primary' eller 'secondary'.
+         * @en Sets the variation of the logo.
+         */
         this.afColor = LogoColor.PRIMARY;
+        /**
+         * Lägger till ett titleelement i svg:n. Standardtext är 'Arbetsförmedlingen'.
+         * @en Adds a title element inside the svg. Defaults to 'Arbetsförmedlingen'.
+         */
         this.afTitle = 'Arbetsförmedlingen';
-        this.afDesc = undefined;
-        this.afSvgAriaHidden = undefined;
+        /**
+         * Sätter attributet 'id' på title-elementet inuti svg-elementet.
+         * Om inget väljs så skapas ett slumpmässigt id.
+         * @en Id attribute on the title element inside of the svg. Defaults to random string.
+         */
         this.afTitleId = randomIdGenerator('digi-logo__title');
     }
     /**
@@ -40,6 +47,6 @@ const Logo = class {
         return (h("div", { key: 'd757be93fe7cdbc847a2d41adb46856bfda72a36', class: Object.assign({}, this.cssModifiers) }, h("div", { key: '42f9d1908e9faa8daa1f9e74cbb9679979506b68', class: "digi-logo__img" }, this.isOnlySymbol && (h("svg", { key: 'd7d72a1458885922e7a678873bc52d8268816e81', height: "44px", width: "44px", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": this.afTitle ? this.afTitleId : null, "aria-hidden": this.afSvgAriaHidden && 'true', role: "img" }, this.afTitle && (h("title", { key: '7950bb28e1b890c6011e002b58a8b15d937b9763', id: this.afTitleId }, this.afTitle)), this.afDesc && h("desc", { key: 'ee8dc7276730c6870de3458d67d43699b3f9979a' }, this.afDesc), h("path", { key: '454d6e78974763b3d3a252013781b15b7f77d654', class: "main-symbol", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z" }))), !this.isOnlySymbol && (h("svg", { key: '3b8a8b5cd478165ed02c2cba3ca806e95b263961', width: "368", height: "44", viewBox: "0 0 368 44", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden && 'true', role: "img" }, this.afTitle && (h("title", { key: '93b36330a76c648535c330f237f3fb09adae4809', id: this.afTitleId }, this.afTitle)), this.afDesc && h("desc", { key: '11cf3461188741d22d9ca92f270d4cfe80b77bbb' }, this.afDesc), h("path", { key: 'adc73c7cfedbb4f7fb0b08499bcfc07756af9566', class: "main-symbol", d: "M15.0078 0C31.0196 0.000130168 44 12.9058 44 28.8262C44 34.3952 42.4074 39.5924 39.6562 44L33.8018 40.1592C35.8218 36.8549 36.9853 32.9757 36.9854 28.8262C36.9854 16.7577 27.1459 6.97474 15.0078 6.97461V0ZM15.0078 13.9043C23.2961 13.9044 30.0156 20.5859 30.0156 28.8262C30.0154 37.0667 23.296 43.7469 15.0078 43.7471C6.71954 43.7471 0.000236897 37.0668 0 28.8262C0 20.5858 6.7194 13.9043 15.0078 13.9043ZM15.0078 20.8545C10.5797 20.8545 6.99023 24.424 6.99023 28.8262C6.99047 33.2286 10.5799 36.7969 15.0078 36.7969C19.4356 36.7967 23.0242 33.2285 23.0244 28.8262C23.0244 24.4241 19.4358 20.8546 15.0078 20.8545Z" }), h("path", { key: '5238bbee8f7e595840b64b923b761b018e304f5a', class: "logo-text", d: "M69.8467 40.2754L71.2441 37.2012L69.2539 32.8271H70.9902L72.0908 35.2949L73.1924 32.8271H74.8857L72.8955 37.1572L74.293 40.2754L77.6387 32.8271H79.459L74.3779 44H74.3359L72.0908 39.0635L69.8467 44L64.7656 32.8271H66.502L69.8467 40.2754ZM145.729 40.3623C145.73 41.4882 146.577 42.4414 147.89 42.4414C149.16 42.4412 150.049 41.4881 150.049 40.3623V32.8271H151.658V40.3623C151.658 42.441 150.218 44 147.932 44C145.56 44 144.12 42.3977 144.12 40.3623V32.8271H145.729V40.3623ZM240.329 32.5674C243.505 32.5674 246.046 35.0786 246.046 38.2832C246.046 41.4446 243.505 43.9999 240.329 44C237.153 44 234.612 41.4446 234.612 38.2832C234.612 35.1219 237.153 32.5674 240.329 32.5674ZM340.01 40.2754L343.355 32.8271H345.133L340.052 44H340.01L334.929 32.8271H336.664L340.01 40.2754ZM288.645 40.0156V32.7832L290.254 32.8271V43.957H290.212L283.437 36.4648V43.7402H281.827V32.5674H281.87L288.645 40.0156ZM87.5469 34.4727H83.3555V37.5469H87.4629V39.1064H83.3555V42.2676H87.5469V43.8271H81.7461V32.9131H87.5469V34.4727ZM199.72 34.4727H195.527V37.5469H199.635V39.1064H195.527V42.2676H199.72V43.8271H193.919V32.9131H199.72V34.4727ZM278.101 34.4727H273.909V37.5469H278.017V39.1064H273.909V42.2676H278.101V43.8271H272.3V32.9131H278.101V34.4727ZM323.156 34.4727H318.964V37.5469H323.071V39.1064H318.964V42.2676H323.156V43.8271H317.355V32.9131H323.156V34.4727ZM368 34.4727H363.808V37.5469H367.915V39.1064H363.808V42.2676H368V43.8271H362.198V32.9131H368V34.4727ZM62.6484 34.4287H59.5996C58.7104 34.4287 57.9903 34.992 57.9902 35.9014C57.9902 36.8108 58.7104 37.374 59.5996 37.374H59.9805C62.2248 37.374 63.2412 38.7602 63.2412 40.5791C63.2411 42.3545 62.0552 43.7832 59.9805 43.7832H56.8047V42.2246H60.0225C60.9116 42.2246 61.6736 41.4884 61.6738 40.5791C61.6738 39.6697 60.9117 38.9326 60.0225 38.9326H59.6416C57.4397 38.9326 56.4238 37.6769 56.4238 35.9014C56.4239 34.1259 57.5668 32.8702 59.6416 32.8701H62.6484V34.4287ZM113.505 34.4287H110.456C109.567 34.4287 108.847 34.992 108.847 35.9014C108.847 36.8108 109.567 37.374 110.456 37.374H110.837C113.081 37.374 114.098 38.7602 114.098 40.5791C114.097 42.3545 112.912 43.7832 110.837 43.7832H107.661V42.2246H110.837C111.726 42.2246 112.488 41.4884 112.488 40.5791C112.488 39.6697 111.726 38.9326 110.837 38.9326H110.456C108.254 38.9326 107.237 37.677 107.237 35.9014C107.237 34.1259 108.381 32.8701 110.456 32.8701H113.505V34.4287ZM158.518 32.8701C160.296 32.8701 161.693 34.1697 161.693 35.9453C161.693 36.9411 161.27 37.7203 160.593 38.2832C161.27 38.7596 161.863 39.626 161.863 40.6221C161.863 42.5709 160.465 43.7832 158.518 43.7832H155.173V32.8701H158.518ZM166.775 42.2676H170.841V43.7832H165.166V32.8701H166.775V42.2676ZM185.407 34.3857H183.798C181.342 34.3858 179.732 35.9453 179.732 38.3271C179.733 40.6655 181.384 42.2245 183.798 42.2246H185.407V43.7832H183.798C180.495 43.7398 178.081 41.4879 178.081 38.2832C178.081 35.0787 180.495 32.8272 183.798 32.8271H185.407V34.3857ZM221.443 32.8271C223.264 32.8273 224.703 34.1698 224.703 35.9453C224.703 37.764 223.264 39.1064 221.485 39.1064H219.707V43.7402L218.098 43.7832V32.8701L221.443 32.8271ZM228.896 42.2676H232.961V43.7832H227.287V32.8701H228.896V42.2676ZM313.374 34.4287H310.326C309.437 34.4287 308.716 34.992 308.716 35.9014C308.716 36.8108 309.437 37.374 310.326 37.374H310.707C312.951 37.3741 313.968 38.7603 313.968 40.5791C313.968 42.3545 312.782 43.7831 310.707 43.7832H307.531L307.488 42.2246H310.707C311.596 42.2245 312.358 41.4883 312.358 40.5791C312.358 39.6697 311.596 38.9327 310.707 38.9326H310.326C308.124 38.9326 307.107 37.677 307.107 35.9014C307.108 34.1259 308.251 32.8701 310.326 32.8701H313.374V34.4287ZM330.312 32.8271C332.091 32.8271 333.531 34.1697 333.531 35.9453C333.531 37.7205 332.134 38.9327 330.355 39.0195L334.081 43.7832H332.134V43.7402L328.407 38.9326V43.7402H326.798V32.8271H330.312ZM359.234 34.3857H357.625C355.169 34.3857 353.561 35.9453 353.561 38.3271C353.561 40.6655 355.212 42.2246 357.625 42.2246H359.234V43.7832H357.625C354.322 43.7399 351.908 41.4879 351.908 38.2832C351.908 35.0786 354.323 32.8271 357.625 32.8271H359.234V34.3857ZM93.8564 32.8271C97.1593 32.8271 99.5731 35.0786 99.5732 38.2832C99.5732 41.4879 97.1594 43.7402 93.8564 43.7402H91.1465V32.8271H93.8564ZM104.104 43.7402H102.495V32.8271H104.104V43.7402ZM118.629 37.5039H123.837V32.8271H125.446V43.7402H123.837V39.0635H118.629V43.7402H117.02V32.8271H118.629V37.5039ZM138.107 32.8271C139.928 32.8271 141.368 34.1697 141.368 35.9453C141.368 37.764 139.928 39.1064 138.149 39.1064H136.371V43.7402H134.763V32.8271H138.107ZM175.244 43.7402H173.635V32.8271H175.244V43.7402ZM208.824 37.1143L214.159 32.6104V43.7402H212.551V35.9453L208.782 39.1494L205.013 35.9453V43.7402H203.446V32.5674H203.488L208.824 37.1143ZM251.127 36.7676L253.414 32.8271H255.192L251.932 38.457V43.7402H250.322V38.457L247.062 32.8271H248.841L251.127 36.7676ZM262.899 37.1143L268.276 32.6104V43.7402H266.668V35.9453L262.899 39.1494L259.13 35.9453V43.7402H257.521V32.5674H257.563L262.899 37.1143ZM299.993 34.3857H297.241V43.7402H295.632V34.3857H292.837V32.8271H299.993V34.3857ZM348.987 43.7402H347.378V32.8271H348.987V43.7402ZM240.328 34.126C237.999 34.1262 236.222 35.9449 236.222 38.2832C236.222 40.6649 237.999 42.4412 240.328 42.4414C242.658 42.4414 244.437 40.6651 244.437 38.2832C244.436 35.9014 242.657 34.126 240.328 34.126ZM156.739 42.2246H158.518C159.407 42.2246 160.254 41.5315 160.254 40.6221C160.254 39.7126 159.449 39.0195 158.518 39.0195H156.739V42.2246ZM92.7979 42.1807H94.123C96.4143 42.1238 97.9639 40.5487 97.9639 38.2832C97.9637 35.9449 96.3128 34.3429 93.8994 34.3428H92.7979V42.1807ZM136.414 37.5469H138.192C139.081 37.5468 139.802 36.8978 139.802 35.9453C139.802 35.0359 139.082 34.3429 138.192 34.3428H136.414V37.5469ZM219.707 37.5469H221.485C222.417 37.5469 223.095 36.8978 223.095 35.9453C223.095 35.0359 222.375 34.3428 221.485 34.3428H219.707V37.5469ZM328.406 37.5469H330.312C331.244 37.5468 331.922 36.8978 331.922 35.9453C331.922 35.0359 331.202 34.3859 330.312 34.3857H328.406V37.5469ZM156.739 37.4609H158.518C159.449 37.4609 160.085 36.8541 160.085 35.9014C160.085 34.992 159.449 34.3857 158.518 34.3857H156.739V37.4609ZM183.163 4.15723C188.202 4.15734 192.31 8.1851 192.31 13.252C192.31 18.3188 188.244 22.3466 183.163 22.3467C178.082 22.3467 174.017 18.3189 174.017 13.252C174.017 8.18503 178.082 4.15723 183.163 4.15723ZM310.58 15.1572V4.54688H313.629V22.3467H313.586L302.746 11.3467V22H299.697V4.20117H299.739L310.58 15.1572ZM364.993 15.1572V4.54688H368V22.3467H367.958L357.117 11.3467V22H354.068V4.20117H354.11L364.993 15.1572ZM72.4297 22H69.127L67.2637 17.7559H61.166L59.2178 22H56L64.1729 4.02734H64.2578L72.4297 22ZM82.8467 4.54688C85.7684 4.54688 88.0975 6.71247 88.0977 9.65723C88.0977 12.6021 85.9805 14.2476 83.3975 14.5508L89.2412 22H85.3877L79.7979 14.6377V22H76.749V4.54688H82.8467ZM100.293 4.54688C103.215 4.54688 105.459 6.71247 105.459 9.65723C105.459 11.1729 104.909 12.3862 103.851 13.209C105.036 13.9453 105.798 15.3741 105.798 16.8896C105.798 19.7912 103.511 22 100.293 22H94.7031V4.54688H100.293ZM138.488 7.44922H134.127V22H131.078V7.44922H126.717V4.54688H138.488V7.44922ZM152.886 7.49219H147.974C146.746 7.49232 145.772 8.27219 145.772 9.57129C145.773 10.8268 146.746 11.4765 147.974 11.4766L148.736 11.5195C151.954 11.5196 153.86 13.2953 153.86 16.7598C153.86 20.0077 151.489 21.9999 148.609 22H143.231V19.0547H148.609C149.837 19.0545 150.812 18.0156 150.812 16.7598C150.811 15.504 149.837 14.5079 148.609 14.5078L147.847 14.4648C144.756 14.4648 142.723 12.819 142.723 9.57129C142.723 6.28007 145.094 4.59094 147.974 4.59082H152.886V7.49219ZM203.7 4.54688C206.622 4.54688 208.951 6.71247 208.951 9.65723C208.951 12.602 206.834 14.2476 204.251 14.5508L210.095 22H206.241L200.651 14.6377V22H197.603V4.54688H203.7ZM224.365 11.8232L233.088 4.15723H233.215V22H230.166V10.6533L224.407 15.8066L218.605 10.6104V22H215.557V4.15723H215.6L224.365 11.8232ZM260.824 4.54688C266.075 4.54692 269.929 8.1416 269.929 13.2949C269.929 18.4051 266.075 22 260.824 22H256.293V4.54688H260.824ZM292.964 22H289.915V4.50391H292.964V22ZM331.244 7.44922H328.322C324.723 7.44931 322.31 9.78746 322.31 13.252C322.31 16.7165 324.723 19.0546 328.322 19.0547H329.508V14.7246H326.925V11.8232H332.515V22H328.322C323.029 21.9999 319.218 18.3618 319.218 13.2949C319.218 8.18494 323.072 4.54697 328.322 4.54688H331.244V7.44922ZM168.893 7.40527L162.371 7.44922V11.7793H168.723V14.6807H162.371V21.957H159.449V4.50391H168.893V7.40527ZM278.144 19.0547H284.537V21.957H275.095V4.50391H278.144V19.0547ZM121.593 7.3623H115.156V11.7793H121.381V14.6807H115.156V19.0117H121.593V21.9131H112.149V4.46094H121.593V7.3623ZM249.434 7.3623H242.997V11.7793H249.222V14.6807H242.997V19.0117H249.434V21.9131H239.99V4.46094H249.434V7.3623ZM348.056 7.3623H341.619V11.7793H347.844V14.6807H341.619V19.0117H348.056V21.9131H338.612V4.46094H348.056V7.3623ZM183.163 7.10254C179.733 7.10254 177.107 9.78739 177.107 13.252C177.107 16.7598 179.733 19.4014 183.163 19.4014C186.551 19.4446 189.218 16.7598 189.218 13.252C189.218 9.74416 186.593 7.10265 183.163 7.10254ZM97.71 19.0547H100.293C101.521 19.0547 102.622 18.1889 102.622 16.8896C102.622 15.6338 101.521 14.6377 100.293 14.6377H97.71V19.0547ZM259.3 19.0547H260.824C264.424 19.0546 266.837 16.7161 266.837 13.2949C266.837 9.83058 264.423 7.49223 260.824 7.49219H259.3V19.0547ZM62.3096 14.9844H66.0781L64.2148 10.2637L62.3096 14.9844ZM79.7979 11.9531H82.7627C83.9904 11.9529 85.0486 10.9567 85.0488 9.70117C85.0488 8.44527 84.0747 7.44922 82.8467 7.44922H79.7979V11.9531ZM200.651 11.9531H203.615C204.843 11.9531 205.902 10.9569 205.902 9.70117C205.902 8.44527 204.928 7.44922 203.7 7.44922H200.651V11.9531ZM97.71 11.7363H100.293C101.521 11.7363 102.41 10.9134 102.41 9.61426C102.41 8.35835 101.521 7.44922 100.293 7.44922H97.71V11.7363ZM177.997 0.0429688C178.929 0.0431503 179.775 0.823389 179.775 1.81934C179.775 2.81507 178.928 3.59455 177.997 3.59473C177.066 3.59473 176.218 2.81519 176.218 1.81934C176.218 0.823273 177.065 0.0429688 177.997 0.0429688ZM188.371 0C189.303 0 190.149 0.779423 190.149 1.77539C190.149 2.77145 189.303 3.55078 188.371 3.55078C187.44 3.55065 186.593 2.81467 186.593 1.77539C186.593 0.77951 187.44 0.000136235 188.371 0Z" }))))));
     }
 };
-Logo.style = DigiLogoStyle0;
+Logo.style = logoCss();
 
 export { Logo as digi_logo };

package/dist/esm/digi-media-figure.entry.js

@@ -1,13 +1,15 @@
-import { r as registerInstance, h } from './index-148a7577.js';
-import { M as MediaFigureAlignment } from './media-figure-alignment.enum-a1d36567.js';
+import { r as registerInstance, h } from './index-BnKuq1L7.js';
+import { M as MediaFigureAlignment } from './media-figure-alignment.enum-evtVuhQt.js';
 
-const mediaFigureCss = ".sc-digi-media-figure-h .digi-media-figure__figcaption.sc-digi-media-figure{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--mobile);color:var(--digi--color--text--neutral);margin-top:var(--digi--gutter--smaller)}.digi-media-figure--align-start.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:start}.digi-media-figure--align-center.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:center}.digi-media-figure--align-end.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:end}";
-const DigiMediaFigureStyle0 = mediaFigureCss;
+const mediaFigureCss = () => `.sc-digi-media-figure-h .digi-media-figure__figcaption.sc-digi-media-figure{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--mobile);color:var(--digi--color--text--neutral);margin-top:var(--digi--gutter--smaller)}.digi-media-figure--align-start.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:start}.digi-media-figure--align-center.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:center}.digi-media-figure--align-end.sc-digi-media-figure .digi-media-figure__figcaption.sc-digi-media-figure{text-align:end}`;
 
 const MediaFigure = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.afFigcaption = undefined;
+        /**
+         * Justering av bild och text. Kan vara 'start', 'center' eller 'end'
+         * @en Alignment of image and caption. Value can be 'start', 'center' or 'end'.
+         */
         this.afAlignment = MediaFigureAlignment.START;
     }
     get cssModifiers() {
@@ -21,6 +23,6 @@ const MediaFigure = class {
         return (h("figure", { key: 'ae9ca859ac4aaaf56d3de4829e6e8983690ec1f4', class: Object.assign({ 'digi-media-figure': true }, this.cssModifiers) }, h("div", { key: '1ad8fd0aaeed4de953131552b4bc58a87a8cb056', class: "digi-media-figure__image" }, h("slot", { key: '10c2bb4b06a032e850e72be9319d0a21e2852481' })), this.afFigcaption && (h("figcaption", { key: 'fc0b3b8e69eef5405d14c0cd71f1a1d9418360c6', class: "digi-media-figure__figcaption" }, this.afFigcaption))));
     }
 };
-MediaFigure.style = DigiMediaFigureStyle0;
+MediaFigure.style = mediaFigureCss();
 
 export { MediaFigure as digi_media_figure };

package/dist/esm/digi-media-image_2.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-BnKuq1L7.js';
 
-const mediaImageCss = ".digi-media-image.sc-digi-media-image{position:relative;display:inline-flex;max-width:100%;height:0px}.digi-media-image.digi-media-image--aspect-ratio.sc-digi-media-image{width:var(--digi--media-image--width);height:unset}.digi-media-image.digi-media-image--loaded.sc-digi-media-image{height:unset}.digi-media-image.digi-media-image--fullwidth.sc-digi-media-image{width:100%}.digi-media-image.digi-media-image--unlazy.sc-digi-media-image:not(.digi-media-image--aspect-ratio){height:unset}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__observer.sc-digi-media-image{position:absolute;top:0;left:0;height:100%}.digi-media-image__padded-box.sc-digi-media-image{display:inline-block;padding-top:var(--digi--media-image--padded-box, 0);height:0}.digi-media-image__image.sc-digi-media-image{max-width:100%;height:auto;opacity:0.06;filter:saturate(0);transition:opacity 0.2s, filter 0.4s}.digi-media-image--loaded.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{opacity:1;filter:saturate(1)}.digi-media-image--unlazy.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{transition:none;opacity:1;filter:none}.digi-media-image--fullwidth.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{width:100%}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{position:absolute;top:0;left:0;width:100%;height:100%}";
-const DigiMediaImageStyle0 = mediaImageCss;
+const mediaImageCss = () => `.digi-media-image.sc-digi-media-image{position:relative;display:inline-flex;max-width:100%;height:0px}.digi-media-image.digi-media-image--aspect-ratio.sc-digi-media-image{width:var(--digi--media-image--width);height:unset}.digi-media-image.digi-media-image--loaded.sc-digi-media-image{height:unset}.digi-media-image.digi-media-image--fullwidth.sc-digi-media-image{width:100%}.digi-media-image.digi-media-image--unlazy.sc-digi-media-image:not(.digi-media-image--aspect-ratio){height:unset}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__observer.sc-digi-media-image{position:absolute;top:0;left:0;height:100%}.digi-media-image__padded-box.sc-digi-media-image{display:inline-block;padding-top:var(--digi--media-image--padded-box, 0);height:0}.digi-media-image__image.sc-digi-media-image{max-width:100%;height:auto;opacity:0.06;filter:saturate(0);transition:opacity 0.2s, filter 0.4s}.digi-media-image--loaded.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{opacity:1;filter:saturate(1)}.digi-media-image--unlazy.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{transition:none;opacity:1;filter:none}.digi-media-image--fullwidth.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{width:100%}.digi-media-image--aspect-ratio.sc-digi-media-image .digi-media-image__image.sc-digi-media-image{position:absolute;top:0;left:0;width:100%;height:100%}`;
 
 const MediaImage = class {
     constructor(hostRef) {
@@ -11,21 +10,25 @@ const MediaImage = class {
         this.hasSetSrc = false;
         this.hasAspectRatio = false;
         this.paddedBoxPadding = '0%';
+        // Need to be a state to trigger rerender of css-classes
         this.isLoaded = false;
+        // Default src to 1*1px placeholder image.
+        // TODO: DO NOT USE BASE64, UNSAFE!
         this.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
-        this.srcset = undefined;
+        /**
+         * Skicka options till komponentens interna Intersection Observer. T.ex. för att kontrollera när bilden lazy loadas.
+         * @en Accepts an Intersection Observer options object. Controls when the image should lazy-load.
+         *
+      
+         */
         this.afObserverOptions = {
             rootMargin: '200px',
             threshold: 0
         };
-        this.afSrc = undefined;
-        this.afSrcset = undefined;
-        this.afAlt = undefined;
-        this.afTitle = undefined;
-        this.afAriaLabel = undefined;
-        this.afWidth = undefined;
-        this.afHeight = undefined;
-        this.afFullwidth = undefined;
+        /**
+         * Tar bort lazy loading av bilden.
+         * @en Removes lazy laoding of the image.
+         */
         this.afUnlazy = false;
     }
     srcChangeHandler() {
@@ -88,10 +91,12 @@ const MediaImage = class {
             } }, h("digi-util-intersection-observer", { key: '246059ec0642b7b38cb036937c5f77c2bbee3477', class: "digi-media-image__observer", onAfOnIntersect: () => this.intersectHandler(), afOnce: true, afOptions: this.afObserverOptions }), this.hasAspectRatio && (h("div", { key: 'a4e16aa68f1dc0ba8d2d092407265a821c6c0631', class: "digi-media-image__padded-box", style: this.cssInlineStyles })), h("img", { key: '5134934f7749c24cb282641400b138368f2cb076', class: "digi-media-image__image", onLoad: (e) => this.loadHandler(e), src: this.src, alt: this.afAlt, "aria-label": this.afAriaLabel, height: this.afHeight, srcset: this.srcset, title: this.afTitle, width: this.afWidth, loading: this.afUnlazy ? 'eager' : 'lazy' }))));
     }
     static get watchers() { return {
-        "afSrc": ["srcChangeHandler"]
+        "afSrc": [{
+                "srcChangeHandler": 0
+            }]
     }; }
 };
-MediaImage.style = DigiMediaImageStyle0;
+MediaImage.style = mediaImageCss();
 
 const UtilIntersectionObserver = class {
     constructor(hostRef) {
@@ -102,7 +107,15 @@ const UtilIntersectionObserver = class {
         this._observer = null;
         this._hasIntersected = false;
         this._isObserving = false;
+        /**
+         * Stäng av observern efter första intersection
+         * @en Disconnect the observer after first intersection.
+         */
         this.afOnce = false;
+        /**
+         * Skicka options till komponentens interna Intersection Observer. T.ex. för att kontrollera när bilden lazy loadas.
+         * @en Accepts an Intersection Observer options object. Controls when the image should lazy-load.
+         */
         this.afOptions = {
             rootMargin: '0px',
             threshold: 0
@@ -151,11 +164,13 @@ const UtilIntersectionObserver = class {
         this._hasIntersected = false;
     }
     render() {
-        return h("slot", { key: '260dfb333c243a5ad9b76d95dee73d4a2c6f9b22' });
+        return h("slot", { key: '0a8bad37aec6fceb8af7c855b276b64d01976ef8' });
     }
     get $el() { return getElement(this); }
     static get watchers() { return {
-        "afOptions": ["afOptionsWatcher"]
+        "afOptions": [{
+                "afOptionsWatcher": 0
+            }]
     }; }
 };
 

package/dist/esm/digi-navigation-breadcrumbs.entry.js

@@ -1,56 +1,95 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
-import { l as logger } from './logger.util-ede3c48a.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { _ as _t } from './text-8f88c0f6.js';
+import { r as registerInstance, c as createEvent, h, d as getElement } from './index-BnKuq1L7.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { _ as _t } from './text-DsO1BTml.js';
 
-const navigationBreadcrumbsCss = ".sc-digi-navigation-breadcrumbs-h{--digi--navigation-breadcrumbs--items--display:flex;--digi--navigation-breadcrumbs--items--flex-wrap:wrap;--digi--navigation-breadcrumbs--items--padding:0;--digi--navigation-breadcrumbs--items--margin:0;--digi--navigation-breadcrumbs--item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-breadcrumbs--item--font-size:var(--digi--typography--breadcrumbs--font-size--desktop);--digi--navigation-breadcrumbs--item--text-decoration:var(--digi--typography--breadcrumbs--text-decoration--desktop);--digi--navigation-breadcrumbs--item--color:var(--digi--color--text--primary);--digi--navigation-breadcrumbs--divider--padding:var(--digi--gutter--icon);--digi--navigation-breadcrumbs--link--visited--color:var(--digi--color--text--interactive--primary);--digi--navigation-breadcrumbs--link--hover--focus--color:var(--digi--color--text--interactive--primary);--digi--navigation-breadcrumbs--link--hover--text-decoration:underline;--digi--navigation-breadcrumbs--link--hover--text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover);--digi--navigation-breadcrumbs--link--color:var(--digi--color--text--interactive--primary)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__items.sc-digi-navigation-breadcrumbs{list-style:none;display:var(--digi--navigation-breadcrumbs--items--display);flex-wrap:var(--digi--navigation-breadcrumbs--items--flex-wrap);margin:var(--digi--navigation-breadcrumbs--items--margin);padding:var(--digi--navigation-breadcrumbs--items--padding)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__item.sc-digi-navigation-breadcrumbs{font-family:var(--digi--navigation-breadcrumbs--item--font-family);font-size:var(--digi--navigation-breadcrumbs--item--font-size);color:var(--digi--navigation-breadcrumbs--item--color);width:unset;margin-bottom:unset}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__item.sc-digi-navigation-breadcrumbs:not([aria-current=page])::after{content:\"/\";padding-inline:var(--digi--navigation-breadcrumbs--divider--padding)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs{color:var(--digi--navigation-breadcrumbs--link--color);font-size:var(--digi--navigation-breadcrumbs--item--font-size)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:visited{color:var(--digi--navigation-breadcrumbs--link--color)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:hover{text-decoration:var(--digi--navigation-breadcrumbs--link--hover--text-decoration);text-decoration-thickness:var(--digi--navigation-breadcrumbs--link--hover--text-decoration-thickness)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}";
-const DigiNavigationBreadcrumbsStyle0 = navigationBreadcrumbsCss;
+const navigationBreadcrumbsCss = () => `.sc-digi-navigation-breadcrumbs-h{--digi--navigation-breadcrumbs--items--display:flex;--digi--navigation-breadcrumbs--items--flex-wrap:wrap;--digi--navigation-breadcrumbs--items--padding:0;--digi--navigation-breadcrumbs--items--margin:0;--digi--navigation-breadcrumbs--item--font-family:var(--digi--global--typography--font-family--default);--digi--navigation-breadcrumbs--item--font-size:var(--digi--typography--breadcrumbs--font-size--desktop);--digi--navigation-breadcrumbs--item--text-decoration:var(--digi--typography--breadcrumbs--text-decoration--desktop);--digi--navigation-breadcrumbs--item--color:var(--digi--color--text--primary);--digi--navigation-breadcrumbs--divider--padding:var(--digi--gutter--icon);--digi--navigation-breadcrumbs--link--visited--color:var(--digi--color--text--interactive--primary);--digi--navigation-breadcrumbs--link--hover--focus--color:var(--digi--color--text--interactive--primary);--digi--navigation-breadcrumbs--link--hover--text-decoration:underline;--digi--navigation-breadcrumbs--link--hover--text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover);--digi--navigation-breadcrumbs--link--color:var(--digi--color--text--interactive--primary)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__items.sc-digi-navigation-breadcrumbs{list-style:none;display:var(--digi--navigation-breadcrumbs--items--display);flex-wrap:var(--digi--navigation-breadcrumbs--items--flex-wrap);margin:var(--digi--navigation-breadcrumbs--items--margin);padding:var(--digi--navigation-breadcrumbs--items--padding)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__item.sc-digi-navigation-breadcrumbs{font-family:var(--digi--navigation-breadcrumbs--item--font-family);font-size:var(--digi--navigation-breadcrumbs--item--font-size);color:var(--digi--navigation-breadcrumbs--item--color);width:unset;margin-bottom:unset}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__item.sc-digi-navigation-breadcrumbs:not([aria-current=page])::after{content:"/";padding-inline:var(--digi--navigation-breadcrumbs--divider--padding)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs{color:var(--digi--navigation-breadcrumbs--link--color);font-size:var(--digi--navigation-breadcrumbs--item--font-size)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:visited{color:var(--digi--navigation-breadcrumbs--link--color)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:hover{text-decoration:var(--digi--navigation-breadcrumbs--link--hover--text-decoration);text-decoration-thickness:var(--digi--navigation-breadcrumbs--link--hover--text-decoration-thickness)}.sc-digi-navigation-breadcrumbs-h .digi-navigation-breadcrumbs__link.sc-digi-navigation-breadcrumbs:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}`;
 
 const NavigationBreadcrumbs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.afOnClick = createEvent(this, "afOnClick", 7);
         this.linkItems = [];
-        this.currentPage = undefined;
+        /**
+         * Sätter attributet 'aria-label' på navelementet.
+         * @en Set `aria-label` attribute on the nav element.
+         */
         this.afAriaLabel = _t.breadcrumbs;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-navigation-breadcrumbs');
-        this.afCurrentPage = undefined;
     }
     onAfCurrentPage(afCurrentPage) {
         this.currentPage = afCurrentPage;
     }
     componentDidLoad() {
+        this.linksObserver = new MutationObserver(() => this.getBreadcrumbs());
+        this.observeSlottedLinks();
         this.getBreadcrumbs();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.linksObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    getSlottedLinks() {
+        return Array.from(this.hostElement.querySelectorAll('a')).filter((el) => !el.classList.contains('digi-navigation-breadcrumbs__link'));
+    }
+    observeSlottedLinks() {
+        if (!this.linksObserver) {
+            return;
+        }
+        this.linksObserver.disconnect();
+        this.linksObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true
+        });
+        for (const link of this.getSlottedLinks()) {
+            this.linksObserver.observe(link, {
+                attributes: true,
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+        }
+    }
     getBreadcrumbs() {
-        const elements = this._observer.children;
-        if (!elements || (elements === null || elements === void 0 ? void 0 : elements.length) <= 0) {
+        const links = this.getSlottedLinks();
+        this.observeSlottedLinks();
+        if (links.length <= 0) {
+            if (this.linkItems.length === 0) {
+                return;
+            }
             logger.warn(`The slot contains no link elements.`, this.hostElement);
+            this.linkItems = [];
             return;
         }
-        this.linkItems = [...elements]
-            .filter((element) => element.tagName.toLowerCase() === 'a')
-            .map((element) => {
-            return {
-                text: element.textContent,
-                href: element.getAttribute('href') || ''
-            };
-        });
+        const nextItems = links.map((element) => ({
+            text: element.textContent,
+            href: element.getAttribute('href') || ''
+        }));
+        if (JSON.stringify(nextItems) === JSON.stringify(this.linkItems)) {
+            return;
+        }
+        this.linkItems = nextItems;
     }
     clickHandler(e) {
         this.afOnClick.emit(e);
     }
     render() {
         var _a;
-        return (h("nav", { key: '97df25fdac63ef4ef47a0ad6a372ba6304064ea3', class: "digi-navigation-breadcrumbs", "aria-label": this.afAriaLabel }, h("ol", { key: '0ac59561e3a2e9757de1741078fffe9084b58a68', class: "digi-navigation-breadcrumbs__items" }, this.linkItems.map((item) => {
+        return (h("nav", { key: 'f4fc833ecc73a8b340f3bb8d05429b143d3e0e24', class: "digi-navigation-breadcrumbs", "aria-label": this.afAriaLabel }, h("ol", { key: '90ff1ee7d1193c5176acc24ee7fdb4840119d2cf', class: "digi-navigation-breadcrumbs__items" }, this.linkItems.map((item) => {
             return (h("li", { class: "digi-navigation-breadcrumbs__item" }, h("a", { class: "digi-navigation-breadcrumbs__link", onClick: (e) => this.clickHandler(e), href: item.href }, item.text)));
-        }), h("li", { key: '5fee0e04d9efaa0115721f4e2d935fd63674696a', class: "digi-navigation-breadcrumbs__item", "aria-current": "page" }, (_a = this.currentPage) !== null && _a !== void 0 ? _a : this.afCurrentPage), h("digi-util-mutation-observer", { key: 'a4e824e91d7bcc837593cd4b00ce16845beb7222', onAfOnChange: () => this.getBreadcrumbs(), ref: (el) => (this._observer = el), hidden: true }, h("slot", { key: '0dca8b5298d0021da9b07a0d4934e787267adb59' })))));
+        }), h("li", { key: '5ad81938e359174d379936b1df1a1674ea1e3f83', class: "digi-navigation-breadcrumbs__item", "aria-current": "page" }, (_a = this.currentPage) !== null && _a !== void 0 ? _a : this.afCurrentPage)), h("div", { key: '94e000ec7eb82024173f100cffa2234ac8ece22b', hidden: true }, h("slot", { key: 'e34cce016457ed748cc962bc6407feeee6078f4a', onSlotchange: () => this.getBreadcrumbs() }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "afCurrentPage": ["onAfCurrentPage"]
+        "afCurrentPage": [{
+                "onAfCurrentPage": 0
+            }]
     }; }
 };
-NavigationBreadcrumbs.style = DigiNavigationBreadcrumbsStyle0;
+NavigationBreadcrumbs.style = navigationBreadcrumbsCss();
 
 export { NavigationBreadcrumbs as digi_navigation_breadcrumbs };