@designsystem-se/af 39.4.0 → 39.5.0

package/dist/collection/components/_media/media-svg/prepare-svg-markup.js

@@ -0,0 +1,431 @@
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const BLOCKED_ELEMENTS = new Set([
+    'script',
+    'foreignobject',
+    'iframe',
+    'object',
+    'embed'
+]);
+const UNSAFE_URL = /^\s*(javascript|vbscript|data)\s*:/i;
+const UNSAFE_STYLE = /javascript\s*:|expression\s*\(|@import|-moz-binding|behavior\s*:/i;
+const FRAGMENT_REFERENCE = /^\s*(#|url\(\s*['"]?#)/i;
+const SAFE_LINK = /^(https?:|mailto:|tel:)/i;
+export function prepareSvgMarkup(raw, options) {
+    const parsed = new DOMParser().parseFromString(raw, 'image/svg+xml');
+    const svg = parsed.documentElement;
+    if (svg.localName !== 'svg' || svg.namespaceURI !== SVG_NAMESPACE) {
+        return null;
+    }
+    sanitizeSvg(svg);
+    // Id:n måste prefixas först, så att #id i <style> redan är unika när selektorerna begränsas.
+    prefixSvgIds(svg, options.idPrefix);
+    scopeSvgStyles(svg, options.idPrefix);
+    applyDimensions(svg, options);
+    applyAccessibility(svg, options);
+    return new XMLSerializer().serializeToString(svg);
+}
+function sanitizeSvg(svg) {
+    var _a;
+    sanitizeElement(svg);
+    for (const el of Array.from(svg.querySelectorAll('*'))) {
+        if (svg.contains(el)) {
+            sanitizeElement(el);
+        }
+    }
+    for (const styleEl of Array.from(svg.querySelectorAll('style'))) {
+        if (UNSAFE_STYLE.test((_a = styleEl.textContent) !== null && _a !== void 0 ? _a : '')) {
+            styleEl.remove();
+        }
+    }
+}
+function sanitizeElement(el) {
+    const tag = el.localName.toLowerCase();
+    if (tag !== 'svg' && BLOCKED_ELEMENTS.has(tag)) {
+        el.remove();
+        return;
+    }
+    if ((tag === 'animate' || tag === 'set') && sanitizeAnimation(el, tag)) {
+        return;
+    }
+    for (const attr of Array.from(el.attributes)) {
+        const name = attr.localName.toLowerCase();
+        if (name.startsWith('on')) {
+            removeAttribute(el, attr);
+            continue;
+        }
+        if ((name === 'href' || name === 'src') && !isAllowedUrl(tag, attr.value)) {
+            removeAttribute(el, attr);
+            continue;
+        }
+        if (name === 'style' && UNSAFE_STYLE.test(attr.value)) {
+            removeAttribute(el, attr);
+        }
+    }
+}
+function isAllowedUrl(tag, value) {
+    const trimmed = value.trim();
+    if (!trimmed || UNSAFE_URL.test(trimmed)) {
+        return !trimmed;
+    }
+    if (tag === 'use' || tag === 'image') {
+        return FRAGMENT_REFERENCE.test(trimmed);
+    }
+    return FRAGMENT_REFERENCE.test(trimmed) || SAFE_LINK.test(trimmed);
+}
+const ANIMATION_VALUE_ATTRIBUTES = ['to', 'from', 'by', 'values'];
+const SCOPE_ATTRIBUTE = 'data-digi-svg-scope';
+/**
+ * Saniterar SMIL-animationer för att förhindra XSS-attacker.
+ * (SMIL = Synchronized Multimedia Integration Language)
+ *
+ * SMIL kan manipulera 'href/src' via attribut som to/from/values.
+ * Om animationen försöker injicera en osäker URL (t.ex. javascript:)
+ * tas hela elementet bort.
+ *
+ * @returns true om elementet raderades, annars false.
+ */ function sanitizeAnimation(el, tag) {
+    var _a;
+    const attributeName = (_a = el.getAttribute('attributeName')) !== null && _a !== void 0 ? _a : '';
+    if (attributeName.toLowerCase().startsWith('on')) {
+        el.remove();
+        return true;
+    }
+    const urlAttribute = isUrlAttributeName(attributeName);
+    // href/src: hela elementet tas bort. Annars räcker det att ta bort javascript:-värdet.
+    for (const name of ANIMATION_VALUE_ATTRIBUTES) {
+        const value = el.getAttribute(name);
+        if (value == null)
+            continue;
+        if (urlAttribute) {
+            const parts = name === 'values' ? value.split(';') : [value];
+            if (parts.some((part) => !isAllowedUrl(tag, part))) {
+                el.remove();
+                return true;
+            }
+            continue;
+        }
+        if (animationValueIsUnsafe(value)) {
+            el.removeAttribute(name);
+        }
+    }
+    return false;
+}
+function isUrlAttributeName(name) {
+    const normalized = name.trim().toLowerCase();
+    return (normalized === 'href' ||
+        normalized === 'src' ||
+        normalized.endsWith(':href') ||
+        normalized.endsWith(':src'));
+}
+function animationValueIsUnsafe(value) {
+    return value.split(';').some((part) => UNSAFE_URL.test(part));
+}
+/**
+ * <style> i en inlinad SVG gäller hela dokumentet. Selektorer begränsas
+ * till den här instansen via data-digi-svg-scope på rot-svg:n.
+ */
+function scopeSvgStyles(svg, scopeId) {
+    var _a;
+    if (!scopeId)
+        return;
+    const styleElements = Array.from(svg.querySelectorAll('style'));
+    if (styleElements.length === 0)
+        return;
+    svg.setAttribute(SCOPE_ATTRIBUTE, scopeId);
+    const scope = `[${SCOPE_ATTRIBUTE}="${scopeId.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`;
+    for (const styleEl of styleElements) {
+        styleEl.textContent = prefixCssSelectors((_a = styleEl.textContent) !== null && _a !== void 0 ? _a : '', scope);
+    }
+}
+/**
+ * Går igenom CSS och prefixar selektorlistor. @keyframes lämnas orörda
+ * (from, to och procent). Övriga @-regler, till exempel @media, prefixas bara inuti.
+ */
+function prefixCssSelectors(css, scope) {
+    let result = '';
+    let cursor = 0;
+    let depth = 0;
+    const keyframeDepths = new Set();
+    while (cursor < css.length) {
+        const found = findNextBrace(css, cursor);
+        if (!found) {
+            result += css.slice(cursor);
+            break;
+        }
+        const prelude = css.slice(cursor, found.index);
+        if (found.char === '}') {
+            if (keyframeDepths.has(depth))
+                keyframeDepths.delete(depth);
+            result += prelude + '}';
+            depth = Math.max(0, depth - 1);
+            cursor = found.index + 1;
+            continue;
+        }
+        const stripped = prelude.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+        const entering = depth + 1;
+        // Inuti @keyframes, och på själva @-regeln, ska preludiet inte prefixas.
+        if (isKeyframesPrelude(stripped)) {
+            keyframeDepths.add(entering);
+            result += prelude + '{';
+        }
+        else if (keyframeDepths.has(depth) ||
+            stripped.startsWith('@') ||
+            !stripped) {
+            result += prelude + '{';
+        }
+        else {
+            result += scopeSelectorList(prelude, scope) + '{';
+        }
+        depth = entering;
+        cursor = found.index + 1;
+    }
+    return result;
+}
+function isKeyframesPrelude(prelude) {
+    return /^@(-[\w]+-)?keyframes\b/i.test(prelude);
+}
+function scopeSelectorList(list, scope) {
+    var _a, _b, _c, _d;
+    const leading = (_b = (_a = list.match(/^\s*/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
+    const trailing = (_d = (_c = list.match(/\s*$/)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : '';
+    const scoped = splitSelectors(list)
+        .map((selector) => scopeSelector(selector, scope))
+        .filter(Boolean)
+        .join(', ');
+    return `${leading}${scoped}${trailing}`;
+}
+/**
+ * Två varianter så att regeln träffar både barn och rot-svg:n.
+ * `.box` blir `[scope] .box, [scope].box`. `svg` blir `[scope] svg, svg[scope]`.
+ */
+function scopeSelector(selector, scope) {
+    const trimmed = selector.trim();
+    if (!trimmed)
+        return '';
+    return `${scope} ${trimmed}, ${mergeScope(trimmed, scope)}`;
+}
+function mergeScope(selector, scope) {
+    const typeMatch = selector.match(/^(?:\*|[A-Za-z_][\w-]*)/);
+    if (typeMatch) {
+        return `${typeMatch[0]}${scope}${selector.slice(typeMatch[0].length)}`;
+    }
+    return `${scope}${selector}`;
+}
+// Komma inuti :is(), strängar och kommentarer är inte avgränsare mellan selektorer.
+function splitSelectors(list) {
+    var _a;
+    const parts = [];
+    let current = '';
+    let paren = 0;
+    let quote = null;
+    for (let index = 0; index < list.length; index++) {
+        const char = list[index];
+        if (quote) {
+            current += char;
+            if (char === '\\') {
+                current += (_a = list[index + 1]) !== null && _a !== void 0 ? _a : '';
+                index++;
+            }
+            else if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            current += char;
+            continue;
+        }
+        if (char === '/' && list[index + 1] === '*') {
+            const end = list.indexOf('*/', index + 2);
+            const commentEnd = end === -1 ? list.length : end + 2;
+            current += list.slice(index, commentEnd);
+            index = commentEnd - 1;
+            continue;
+        }
+        if (char === '(')
+            paren++;
+        if (char === ')')
+            paren = Math.max(0, paren - 1);
+        if (char === ',' && paren === 0) {
+            parts.push(current);
+            current = '';
+            continue;
+        }
+        current += char;
+    }
+    parts.push(current);
+    return parts;
+}
+// Hoppar över { och } inuti strängar och kommentarer.
+function findNextBrace(css, from) {
+    let quote = null;
+    for (let index = from; index < css.length; index++) {
+        const char = css[index];
+        if (quote) {
+            if (char === '\\') {
+                index++;
+                continue;
+            }
+            if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === '/' && css[index + 1] === '*') {
+            const end = css.indexOf('*/', index + 2);
+            index = end === -1 ? css.length : end + 1;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === '{' || char === '}') {
+            return { index, char: char };
+        }
+    }
+    return null;
+}
+function removeAttribute(el, attr) {
+    if (attr.namespaceURI) {
+        el.removeAttributeNS(attr.namespaceURI, attr.localName);
+        return;
+    }
+    el.removeAttribute(attr.localName);
+}
+function prefixSvgIds(svg, idPrefix) {
+    var _a;
+    if (!idPrefix)
+        return;
+    const elements = Array.from(svg.querySelectorAll('[id]'));
+    const ids = elements
+        .map((el) => el.getAttribute('id'))
+        .filter((id) => !!id);
+    if (ids.length === 0)
+        return;
+    const idSet = new Set(ids);
+    const rewrite = (value) => rewriteReferences(value, ids, idPrefix);
+    for (const el of [svg, ...Array.from(svg.querySelectorAll('*'))]) {
+        for (const attr of Array.from(el.attributes)) {
+            const rewritten = rewriteIdAttribute(attr.localName, attr.value, idSet, idPrefix, rewrite);
+            if (rewritten !== attr.value) {
+                setAttribute(el, attr, rewritten);
+            }
+        }
+    }
+    for (const styleEl of Array.from(svg.querySelectorAll('style'))) {
+        styleEl.textContent = rewrite((_a = styleEl.textContent) !== null && _a !== void 0 ? _a : '');
+    }
+    for (const el of elements) {
+        const id = el.getAttribute('id');
+        if (id && idSet.has(id)) {
+            el.setAttribute('id', `${idPrefix}${id}`);
+        }
+    }
+}
+function rewriteIdAttribute(name, value, idSet, idPrefix, rewrite) {
+    if (name === 'aria-labelledby' ||
+        name === 'aria-describedby' ||
+        name === 'aria-activedescendant') {
+        return value
+            .split(/\s+/)
+            .map((token) => (idSet.has(token) ? `${idPrefix}${token}` : token))
+            .join(' ');
+    }
+    return rewrite(value);
+}
+function rewriteReferences(value, ids, idPrefix) {
+    const sorted = [...ids].sort((a, b) => b.length - a.length);
+    let result = '';
+    let index = 0;
+    while (index < value.length) {
+        const hash = value.indexOf('#', index);
+        if (hash === -1) {
+            result += value.slice(index);
+            break;
+        }
+        result += value.slice(index, hash);
+        const rest = value.slice(hash + 1);
+        const match = sorted.find((id) => rest.startsWith(id) && !isIdChar(rest.charAt(id.length)));
+        if (match) {
+            result += `#${idPrefix}${match}`;
+            index = hash + 1 + match.length;
+        }
+        else {
+            result += '#';
+            index = hash + 1;
+        }
+    }
+    return result;
+}
+function isIdChar(char) {
+    return char !== '' && /[\w.-]/.test(char);
+}
+function setAttribute(el, attr, value) {
+    if (attr.namespaceURI) {
+        el.setAttributeNS(attr.namespaceURI, attr.localName, value);
+        return;
+    }
+    el.setAttribute(attr.localName, value);
+}
+function applyDimensions(svg, options) {
+    if (!options.responsive)
+        return;
+    svg.setAttribute('width', '100%');
+    svg.removeAttribute('height');
+    setStyleProperties(svg, {
+        width: '100%',
+        height: 'auto'
+    });
+}
+// Ersätter width och height i ett befintligt style-attribut. Övriga deklarationer behålls.
+function setStyleProperties(svg, updates) {
+    var _a;
+    const names = new Set(Object.keys(updates));
+    const kept = ((_a = svg.getAttribute('style')) !== null && _a !== void 0 ? _a : '')
+        .split(';')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .filter((part) => {
+        var _a;
+        const name = (_a = part.split(':')[0]) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
+        return !!name && !names.has(name);
+    });
+    const next = [
+        ...kept,
+        ...Object.entries(updates).map(([name, value]) => `${name}: ${value}`)
+    ];
+    svg.setAttribute('style', `${next.join('; ')};`);
+}
+function applyAccessibility(svg, options) {
+    const label = options.label.trim();
+    const title = svg.querySelector(':scope > title');
+    if (!label) {
+        svg.setAttribute('aria-hidden', 'true');
+        svg.removeAttribute('aria-label');
+        svg.removeAttribute('aria-labelledby');
+        svg.removeAttribute('role');
+        title === null || title === void 0 ? void 0 : title.remove();
+        return;
+    }
+    svg.removeAttribute('aria-hidden');
+    svg.removeAttribute('aria-label');
+    svg.setAttribute('role', 'img');
+    const titleId = uniqueId(svg, `${options.idPrefix}accessible-name`);
+    svg.setAttribute('aria-labelledby', titleId);
+    let titleElement = title;
+    if (!titleElement) {
+        titleElement = svg.ownerDocument.createElementNS(SVG_NAMESPACE, 'title');
+        svg.insertBefore(titleElement, svg.firstChild);
+    }
+    titleElement.setAttribute('id', titleId);
+    titleElement.textContent = label;
+}
+function uniqueId(svg, base) {
+    let candidate = base;
+    let suffix = 2;
+    while (svg.querySelector(`[id="${candidate}"]`)) {
+        candidate = `${base}-${suffix++}`;
+    }
+    return candidate;
+}

package/dist/collection/components/_navigation/navigation-breadcrumbs/navigation-breadcrumbs.js

@@ -78,9 +78,9 @@ export class NavigationBreadcrumbs {
     }
     render() {
         var _a;
-        return (h("nav", { key: '4cc373291c497be0f03430c59ec63d449e68ec2b', class: "digi-navigation-breadcrumbs", "aria-label": this.afAriaLabel }, h("ol", { key: '740d5e76b534e8d4cb125d6ba5233bf167e37b05', class: "digi-navigation-breadcrumbs__items" }, this.linkItems.map((item) => {
+        return (h("nav", { key: '0589c13944dd60b43caa6dc4994c5ee103bf187e', class: "digi-navigation-breadcrumbs", "aria-label": this.afAriaLabel }, h("ol", { key: '32eadf6be2977a056ecd78d51145e24531aa168d', 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: 'a21a4893ac63ec95fad43de1a5fdeba03c739657', class: "digi-navigation-breadcrumbs__item", "aria-current": "page" }, (_a = this.currentPage) !== null && _a !== void 0 ? _a : this.afCurrentPage)), h("div", { key: '2557ec40018589cd0826beb384e5145aebd89ee8', hidden: true }, h("slot", { key: 'a9104f7d63d618d3eb631e6e30b96b7cc6005c8e', onSlotchange: () => this.getBreadcrumbs() }))));
+        }), h("li", { key: '559fe531f5b76b4ec9e9a2e0746ef8a7d7cc745d', class: "digi-navigation-breadcrumbs__item", "aria-current": "page" }, (_a = this.currentPage) !== null && _a !== void 0 ? _a : this.afCurrentPage)), h("div", { key: '8346bdaa6613fe84edcf886f14d59c40d04eae17', hidden: true }, h("slot", { key: '2ea061a4e1f974cc56398472c48e752cb03ff6b6', onSlotchange: () => this.getBreadcrumbs() }))));
     }
     static get is() { return "digi-navigation-breadcrumbs"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.js

@@ -197,13 +197,13 @@ export class ContextMenu {
     }
     render() {
         const menuItems = this.afMenuItems;
-        return (h(Host, { key: '77c21241e826759c6b8669633fb9a67f6a8b08ae' }, h("div", { key: '5ece29794373b3f30d9e1e680a1235f430534409', id: `${this.afId}-identifier`, class: {
+        return (h(Host, { key: 'e9520424be221cf4f965f77fb2eab77e8ba57a63' }, h("div", { key: 'ec53034647e599a8febbc73948b90f4d38c0eb08', id: `${this.afId}-identifier`, class: {
                 'digi-navigation-context-menu': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, h("digi-button", { key: '464080e6c6e8728fbf0caf611a8e443407be3ff3', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: 'f6038f56848632e0bd6c55d33435565ac09025d9', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '7a390846a9d7fb99f60ef0b88a79bc6f179e7628', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'e50ee0a1e56215156704657b339442efa90244c3', class: {
+            } }, h("digi-button", { key: '285b4bad0722cc2f87a0e8c3cba6af835b445a55', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: '262a20bb2207a2f05e60eae1fb7e733f40693732', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '8a1f66edeb3eeb94002af24de11f68421382e66e', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'b20bae2f6b47671fe26e5932c577d373872bf9b0', class: {
                 'digi-navigation-context-menu__list': true,
                 'digi-navigation-context-menu__list--active': this.visible
-            } }, h("div", { key: '9a68118ca83c390a8227b3b8075bb762f36c396d', onKeyDown: (e) => {
+            } }, h("div", { key: 'd78f71410c4ce65f0da51f9412308e2d70e5360d', onKeyDown: (e) => {
                 this.handleKey(e);
             }, id: `${this.afId}-dropdown`, style: {
                 visibility: this.visible ? 'visible' : 'hidden'

package/dist/collection/components/_navigation/navigation-pagination/navigation-pagination.js

@@ -139,15 +139,15 @@ export class NavigationPagination {
         }
     }
     render() {
-        return (h("div", { key: '1cab060333e40381a3dc71f81a3a0be78ab3c304', class: "digi-navigation-pagination" }, h("digi-util-resize-observer", { key: '6bee5b7a85788f6d5b978093f51fa7ba2ff3937e', onAfOnChange: (e) => {
+        return (h("div", { key: '17ad91ffa5050bcc2ddd71f278e122600448c64a', class: "digi-navigation-pagination" }, h("digi-util-resize-observer", { key: 'd3f46ae350c06921a476e8a1cf6dcdb6b3bba007', onAfOnChange: (e) => {
                 this.handleResizeObserver(e);
-            } }), h("span", { key: 'ee772bd7e406f9f681505183fb58c7aa2e138ebb', id: `${this.afId}-aria-label`, "aria-hidden": "true", class: "digi-navigation-pagination__aria-label" }, "Paginering"), h("nav", { key: 'f31b498c185ca014bd0e051add64b25959f93031', "aria-labelledby": this.labelledby(), class: `digi-navigation-pagination__pagination ${this.twoRows ? 'digi-navigation-pagination--two-rows' : ''}` }, h("digi-button", { key: '4053898f8e61e2004d347216b09f76425f47224e', onClick: () => this.prevPage(), class: {
+            } }), h("span", { key: '5ca5218da880162f6bcc613cb77ec35e937063cb', id: `${this.afId}-aria-label`, "aria-hidden": "true", class: "digi-navigation-pagination__aria-label" }, "Paginering"), h("nav", { key: '48edb2887f528294da991f5ea81a3e71ee4582a5', "aria-labelledby": this.labelledby(), class: `digi-navigation-pagination__pagination ${this.twoRows ? 'digi-navigation-pagination--two-rows' : ''}` }, h("digi-button", { key: 'a8d82eac67a713694c544e59be52f92637c5e4bd', onClick: () => this.prevPage(), class: {
                 'digi-navigation-pagination__button digi-navigation-pagination__button--previous': true,
                 'digi-navigation-pagination__button--hidden': this.currentPage === 1
-            }, afVariation: "secondary", afAriaLabel: "F\u00F6reg\u00E5ende" }, h("digi-icon-chevron-left", { key: '0a5ac7013bcd809af61536e972ec7b45f2c4819d', slot: "icon" }), h("span", { key: '3aa1e1666ace58be282039a1ee3bc1acfdacc368' }, "F\u00F6reg\u00E5ende")), h("digi-button", { key: 'fa6843592f50578804526bd3b0149e16b0f436fc', onClick: () => this.nextPage(), class: {
+            }, afVariation: "secondary", afAriaLabel: "F\u00F6reg\u00E5ende" }, h("digi-icon-chevron-left", { key: '570a8ff8893a0c425249c0a2322bfb6b1395692e', slot: "icon" }), h("span", { key: '01c5ccd5b1e46109dab6a0bf83580ed252c2a1b9' }, "F\u00F6reg\u00E5ende")), h("digi-button", { key: '9498510f851650723decf42b981d85a98da392b5', onClick: () => this.nextPage(), class: {
                 'digi-navigation-pagination__button digi-navigation-pagination__button--next': true,
                 'digi-navigation-pagination__button--hidden': this.currentPage === this.afTotalPages
-            }, afVariation: "secondary", afAriaLabel: "N\u00E4sta" }, h("digi-icon-chevron-right", { key: '2a18d211374ffde1b0ce86b36b7383b5e9e4b598', slot: "icon-secondary" }), h("span", { key: '1f9454a474d016d2488ac748ae2d66c665dd2bdf' }, "N\u00E4sta")), h("div", { key: 'c0ef57b7f2718f0ee409ccc4d9bfa60201eac204', class: "digi-navigation-pagination__pages" }, h("ol", { key: '1d6afc95695d3f3824888ebf8cd5ab50cb4b3d6a', class: "digi-navigation-pagination__page-list" }, this.currentInterval.map((pageValue) => {
+            }, afVariation: "secondary", afAriaLabel: "N\u00E4sta" }, h("digi-icon-chevron-right", { key: 'bef51db63840aecddcdffdcc26b366299f0730cf', slot: "icon-secondary" }), h("span", { key: 'c62cd2036c7c45e3466640ca7282ab2a5a021955' }, "N\u00E4sta")), h("div", { key: 'f26e34b76219616ff8049335b076027821591bd0', class: "digi-navigation-pagination__pages" }, h("ol", { key: '7177ed94dbcdfde4483c311e922f29242e197ad5', class: "digi-navigation-pagination__page-list" }, this.currentInterval.map((pageValue) => {
             const page = isNaN(pageValue)
                 ? parseInt(pageValue.replace('…', ''))
                 : pageValue;
@@ -158,10 +158,10 @@ export class NavigationPagination {
                 }, afVariation: this.currentPage === page
                     ? ButtonVariation.PRIMARY
                     : ButtonVariation.SECONDARY }, h("span", { class: `digi-navigation-pagination__page-text` }, page))));
-        })))), this.afTotalResults > 0 && (h("div", { key: '3aca27703c5ccddb9048fdb44ffd4cb4953c9658', class: {
+        })))), this.afTotalResults > 0 && (h("div", { key: '03ce1c49474cd83414a29a389cb5895aafa31bc1', class: {
                 'digi-navigation-pagination__result': true,
                 'digi-navigation-pagination__result--pages': this.afTotalPages > 1
-            }, "aria-hidden": this.afTotalPages > 1 ? 'true' : 'false', id: `${this.afId}-result` }, h("digi-typography", { key: '58fa4407549cfa19b0a7a3aed9ef69c458f0844b' }, h("span", { key: 'c838a20803e46b3f8d54afa3b0bed966363af888', id: `${this.afId}-result-show` }, "Visar "), h("strong", { key: '21ca52ad180e0156e968cd5d3f5a65752fe23b63', id: `${this.afId}-result-current` }, this.afCurrentResultStart, "-", this.afCurrentResultEnd), h("span", { key: 'b4c96f362869148c6221063cfeb582835c77a02f', id: `${this.afId}-result-of` }, " av "), h("strong", { key: '8f198bc6a56e42d3219fe92536ca5debfbe3b9fe', id: `${this.afId}-result-total` }, this.afTotalResults), this.afResultName && (h("span", { key: 'ecb85168b555ae97a102fe1e0638a0a2585b863f', id: `${this.afId}-result-name` }, ` ${this.afResultName}`)))))));
+            }, "aria-hidden": this.afTotalPages > 1 ? 'true' : 'false', id: `${this.afId}-result` }, h("digi-typography", { key: '45b5ef78769c086d803966633d091b515fde8d0c' }, h("span", { key: '337aefec385a9ffe2b0a577eaaed16c0d61bc0fb', id: `${this.afId}-result-show` }, "Visar "), h("strong", { key: '136cf9ad8ee6197dbee80274c96b9ea9ed1d1af0', id: `${this.afId}-result-current` }, this.afCurrentResultStart, "-", this.afCurrentResultEnd), h("span", { key: 'cae8a95f41f7d1fcb18bd0cd27ad5a2a52b6b815', id: `${this.afId}-result-of` }, " av "), h("strong", { key: '55ecccbb2286aefd4cc97a1b3606dd68e736c9d9', id: `${this.afId}-result-total` }, this.afTotalResults), this.afResultName && (h("span", { key: 'b48aa49b8691f50b7a80348613b3129428b721cc', id: `${this.afId}-result-name` }, ` ${this.afResultName}`)))))));
     }
     static get is() { return "digi-navigation-pagination"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-sidebar/navigation-sidebar.js

@@ -301,7 +301,7 @@ export class NavigationSidebar {
         };
     }
     render() {
-        return (h(Host, { key: 'e127882e0ffafff4cdc015634f92015ce52d17d1' }, h("digi-util-breakpoint-observer", { key: '1d92ef0a49a23c49ea6715c1b6eb479bc7d63f7a' }, h("digi-util-keydown-handler", { key: '027e56d55c04489ce62076f80f70858f26a80c1d', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: 'b50632c2a49bfb4b10c72691c3246b7ac6d96930', class: "digi-navigation-sidebar", "aria-hidden": !this.afActive ? 'true' : 'false' }, h("div", { key: '3d59c6003faae461d654b31bcc546f49af493600', "aria-hidden": "true", class: Object.assign({ 'digi-navigation-sidebar__backdrop': true }, this.cssModifiersBackdrop), onClick: (e) => this.backdropClickHandler(e) }), h("div", { key: 'b69f64dd8c33adea626bb511e6d024063ac0e8cc', class: Object.assign({ 'digi-navigation-sidebar__wrapper': true }, this.cssModifiers) }, h("div", { key: '2e2829d2c9be900c4c13d5e0b6f3eb7d7684aa5f', class: "digi-navigation-sidebar__inner", ref: (el) => {
+        return (h(Host, { key: '127eb88c07235012491979da510356b7391021d6' }, h("digi-util-breakpoint-observer", { key: 'ac20e08c371a0ac01595d5d9eaf5795eef036c33' }, h("digi-util-keydown-handler", { key: '7c755b6591d4fff405e3a5a31fe58af1f9d2222b', onAfOnEsc: (e) => this.escHandler(e), onAfOnTab: (e) => this.tabHandler(e), onAfOnShiftTab: (e) => this.shiftHandler(e) }, h("div", { key: '5ecf579734d24800389d6348b30b39649ed67eeb', class: "digi-navigation-sidebar", "aria-hidden": !this.afActive ? 'true' : 'false' }, h("div", { key: '5347a04a61125fb38281bfc746fc3bc684a87ad7', "aria-hidden": "true", class: Object.assign({ 'digi-navigation-sidebar__backdrop': true }, this.cssModifiersBackdrop), onClick: (e) => this.backdropClickHandler(e) }), h("div", { key: 'e23d42666fc39f6856ccb1e0b806915f61b9d750', class: Object.assign({ 'digi-navigation-sidebar__wrapper': true }, this.cssModifiers) }, h("div", { key: '9bb80c88a5e5c2495738c88bc00d1493a1bb86ca', class: "digi-navigation-sidebar__inner", ref: (el) => {
                 this._wrapper = el;
             } }, this.showHeader ? (h("div", { class: {
                 'digi-navigation-sidebar__header': true,
@@ -310,7 +310,7 @@ export class NavigationSidebar {
                 'digi-navigation-sidebar__header--close-button--end': this.afCloseButtonPosition ===
                     NavigationSidebarCloseButtonPosition.END,
                 'digi-navigation-sidebar__header--reversed': !!this.afHeading
-            } }, this.afHeading && (h(this.afHeadingLevel, { ref: (el) => (this._heading = el), class: "digi-navigation-sidebar__heading", tabindex: "-1" }, this.afHeading)), h("digi-button", { onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-navigation-sidebar__close-button" }, this.afCloseButtonText, h("digi-icon-x", { slot: "icon-secondary" })))) : (h("div", null)), h("div", { key: 'a1520ea4cf5ee4515eaeb25f18ef39c9a277f4b3', class: "digi-navigation-sidebar__content" }, h("div", { key: '8d5d6af515f336634cbfc3bf1ac5769748dc4795', class: "digi-navigation-sidebar__nav-wrapper" }, h("slot", { key: 'f383532dfc54537a6f1a989bca8ab921d5857fb1' })), this._hasFooter && (h("div", { key: '91a2a9ee09a3a1fe29bfe97842df3c72985f21f7', class: "digi-navigation-sidebar__footer" }, h("slot", { key: 'de2655dcd7afa9cebee5116423e4dc15c380b443', name: "footer" })))))))))));
+            } }, this.afHeading && (h(this.afHeadingLevel, { ref: (el) => (this._heading = el), class: "digi-navigation-sidebar__heading", tabindex: "-1" }, this.afHeading)), h("digi-button", { onClick: (e) => this.closeHandler(e), "af-variation": "function", "af-aria-label": this.afCloseButtonAriaLabel, class: "digi-navigation-sidebar__close-button" }, this.afCloseButtonText, h("digi-icon-x", { slot: "icon-secondary" })))) : (h("div", null)), h("div", { key: '0b6c70d1d0c000e2d5046ea96c16db345aab4517', class: "digi-navigation-sidebar__content" }, h("div", { key: '3050244abf28d879376ff2a036ca4acac70e2768', class: "digi-navigation-sidebar__nav-wrapper" }, h("slot", { key: 'b9f1f93f360909548dc0a1336e25d85dabd725d1' })), this._hasFooter && (h("div", { key: '7cadee43bb9c7ace4e81a6b7a01f30baa4ad9d8f', class: "digi-navigation-sidebar__footer" }, h("slot", { key: '45fdd8a67b1cc31ee4f38d381b5a98c6c4e5a65e', name: "footer" })))))))))));
     }
     static get is() { return "digi-navigation-sidebar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-sidebar-button/navigation-sidebar-button.js

@@ -17,7 +17,7 @@ export class NavigationSidebarButton {
         this.afOnToggle.emit(this.isActive);
     }
     render() {
-        return (h("digi-button", { key: 'e35554a7cc4e2c5c211a0e6effc6fa4efea36ca9', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: 'fc800340bd2e6db4c7d787a0dc6ee3ce7b40fab2', slot: "icon" })));
+        return (h("digi-button", { key: '2cc66bfcdb07ccbacb32d1db9eca56173aac9227', id: this.afId, class: "digi-navigation-sidebar-button", "af-variation": "function", "af-aria-label": this.afAriaLabel, onClick: () => this.toggleHandler() }, this.afText, h("digi-icon-bars", { key: '2083181a92121cc73ca324458e2e1b64a4436f0b', slot: "icon" })));
     }
     static get is() { return "digi-navigation-sidebar-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-tablist/navigation-tablist.js

@@ -132,7 +132,7 @@ export class NavigationTablist {
         this.windowTab = tabIdx;
     }
     setupTabs(tabs) {
-        // Angular/React can connect the element before afTabs is set.
+        // See reason to check in comment in componentWillLoad
         if (tabs == null || tabs === '') {
             return;
         }
@@ -258,14 +258,14 @@ export class NavigationTablist {
             cancelAnimationFrame(this._requestAnimationFrame);
     }
     render() {
-        return (h(Host, { key: '4f35606eb39b49a255d7b8b8b52b1d12897b9f69' }, h("div", { key: 'e73e3ecf48b0d0ca6dfe54246a6ea657853c7b1d', class: {
+        return (h(Host, { key: '5cf0305a925ef6deb5e3efec49dfbb8604ccf712' }, h("div", { key: '87dbb27a1fe9aa2d869c69d98c8c43d86163ad84', class: {
                 'digi-tablist': true,
                 'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
                 'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
-            } }, h("div", { key: 'd32d4b5a6a08b5e4b0175d14483398b7aec35b12', class: "control-wrapper", style: {
+            } }, h("div", { key: '41e4f6fae9058c850155e3470cd4d67c923294ed', class: "control-wrapper", style: {
                 left: '0',
                 visibility: this.showPrev ? 'visible' : 'hidden'
-            } }, h("button", { key: 'dbe7ab441210884aa01cbe7a696a3af234c81f65', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '49ce2219afc75ed61647a7d7bd4395cc3d49b8dc' }))), h("div", { key: '9cab00af430fcaa20577df6caee34407f6950458', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
+            } }, h("button", { key: '02cfa88563640d70f58cd946dadc5cda5f38f44a', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '837319da7a71fed7219a8e437b83c5cce77c8070' }))), h("div", { key: 'e99e0b674795fb510e6a13da74bff20f5f30497c', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
             const focusable = tab.id === this.tabs[this.selectedTab].id;
             const isActive = tab.id === this.tabs[this.activeTab].id;
             const Icon = `digi-icon-${tab.icon}`;
@@ -274,10 +274,10 @@ export class NavigationTablist {
                     'digi-tab': true,
                     'is-active': isActive
                 }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, h("div", { class: "content-wrapper" }, h("span", { class: "tablist-content" }, tab.icon && h(Icon, { "aria-hidden": "true" }), h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), h("div", { class: "indicator" }))));
-        })), h("div", { key: '70100dbdeff7667aa62af7b16772daef7754cdcc', class: "control-wrapper", style: {
+        })), h("div", { key: '071d493c7335e9449e970c66af6efbc553bcdd15', class: "control-wrapper", style: {
                 right: '0',
                 visibility: this.showNext ? 'visible' : 'hidden'
-            } }, h("button", { key: '5826f10512b6b3ca5cc31f84eb8bebbebc914491', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '7470458d3198212021eae7a82768f98c9421b615' })))), h("div", { key: '14c4e4b6be5adb75d50afc019ddd0c9f2a9d932c', role: "presentation" }, h("slot", { key: '82a07341c0d6188d1700ee60cefcf2bea58de1eb', onSlotchange: () => this.syncPanels() }))));
+            } }, h("button", { key: '57e92857c9ac1047868e5b8f3043f1a15cab63dd', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '0838dcde2bb291bf89a8dce82507d64abd13bca8' })))), h("div", { key: '7232888c654cac0a1e588c01d5786567ac01da02' }, h("slot", { key: '44092501780bed82b9323c7d1f50004fd6b54a7f', onSlotchange: () => this.syncPanels() }))));
     }
     static get is() { return "digi-tablist"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-tablist-panel/tablist-panel.js

@@ -8,11 +8,11 @@ export class NavigationTabPanel {
         this.isVisible = false;
     }
     render() {
-        return (h(Host, { key: 'ba6db44981b8dfc86768137b3d43fe778d685bae' }, h("div", { key: 'bead967719b8f1a1afed192716c3fa128dfaeff3', id: `tabpanel-${this.tab}`, role: "tabpanel", "aria-labelledby": `tab-${this.tab}`, style: {
+        return (h(Host, { key: '6bb5af53e414660327e90c1f4300ff63e5fdea0d' }, h("div", { key: '79be2944feff402b90e1e86e0b6420ba1f00f636', id: `tabpanel-${this.tab}`, role: "tabpanel", "aria-labelledby": `tab-${this.tab}`, style: {
                 display: this.isVisible ? 'initial' : 'none',
                 overflowX: 'hidden',
                 overflowY: 'auto'
-            } }, h("slot", { key: 'e0f80ad9705418315f2b29aebbfafc24cc0d41e4' }))));
+            } }, h("slot", { key: 'f50c96cedc80eda4c6002d83ad0c35d0d351c17e' }))));
     }
     static get is() { return "digi-tablist-panel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_navigation/navigation-vertical-menu/navigation-vertical-menu.js

@@ -194,7 +194,7 @@ export class NavigationVerticalMenu {
         };
     }
     render() {
-        return (h("nav", { key: '537c34a0b01f2592af6d2d24b4a8de562bfbf830', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: '5b97cdf3a286b37c697bc8abec0db37394611541', onSlotchange: () => this.syncNav() })));
+        return (h("nav", { key: 'd1c0b8851b9d9c0ce081ddd57d86ea43f53b79b7', class: Object.assign({ 'digi-navigation-vertical-menu': true }, this.cssModifiers), id: this.afId, "aria-label": this.afAriaLabel }, h("slot", { key: 'c5294976f2a27e3839411247823cf62fecab6cf0', onSlotchange: () => this.syncNav() })));
     }
     static get is() { return "digi-navigation-vertical-menu"; }
     static get encapsulation() { return "scoped"; }