@designsystem-se/af 39.2.1 → 39.2.2

package/dist/esm/{digi-button_5.entry.js → digi-badge-notification_8.entry.js}

@@ -1,11 +1,72 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { r as registerInstance, h, a as Host, c as createEvent, d as getElement } from './index-BnKuq1L7.js';
+import { B as BadgeNotificationShape, C as CalendarWeekViewHeadingLevel } from './calendar-week-view-heading-level.enum-BBOpiDGx.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
 import { B as ButtonSize, a as ButtonVariation } from './button-variation.enum-BMQm4N5I.js';
 import { B as ButtonType } from './button-type.enum-DShzaNrQ.js';
 import { _ as _t } from './text-DsO1BTml.js';
 import { t as toInteger, g as getUTCISOWeek, a as getUTCWeek, b as getUTCISOWeekYear, c as getUTCWeekYear, l as locale$1, d as getTimezoneOffsetInMilliseconds, s as subMilliseconds, e as longFormatters, i as isProtectedWeekYearToken, f as throwProtectedError, h as isProtectedDayOfYearToken, j as buildFormatLongFn, k as buildLocalizeFn, m as buildMatchFn, n as buildMatchPatternFn } from './index-B1Je6g2n.js';
-import { C as CalendarWeekViewHeadingLevel } from './calendar-week-view-heading-level.enum-DH_-wpLB.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
 import { r as requiredArgs, t as toDate, i as isValid } from './index-BixPaBHw.js';
+import { O as OverflowMode, D as Direction } from './navigation-tablist.types-Ua3MxeBh.js';
+
+const badgeNotificationCss = () => `.sc-digi-badge-notification-h{--digi--badge-notification--color--text:var(--digi--color--text--secondary);--digi--badge-notification--color--border:var(--digi--color--border--notification);--digi--badge-notification--background-color:var(--digi--color--background--notification);--digi--badge-notification--font-weight:var(--digi--global--typography--font-weight--semibold)}.sc-digi-badge-notification-h .digi-badge-notification.sc-digi-badge-notification{font-size:0.75rem;font-weight:var(--digi--badge-notification--font-weight);border-width:var(--digi--border-width--secondary);border-style:solid;color:var(--digi--badge-notification--color--text);background-color:var(--digi--badge-notification--background-color);border-color:var(--BORDER-COLOR)}.sc-digi-badge-notification-h .digi-badge-notification--circle.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:50%;height:1.25rem;width:1.25rem}.sc-digi-badge-notification-h .digi-badge-notification--oval.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:0.75rem;height:1.125rem;width:1.5625rem;padding-left:0.25rem;padding-right:0.25rem}.sc-digi-badge-notification-h .digi-badge-notification--pill.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:inline-block;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.75rem;height:1.125rem}`;
+
+const BadgeNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afShape = BadgeNotificationShape.PILL;
+        /**
+         * Värdet som ska skrivas ut i notifieringen.
+         * @en The value to be displayed in the badge.
+         */
+        this.afValue = '';
+    }
+    afValueChangeHandler() {
+        this.checkProps();
+    }
+    get cssModifiers() {
+        return {
+            'digi-badge-notification--circle': this.afShape === BadgeNotificationShape.CIRCLE,
+            'digi-badge-notification--oval': this.afShape === BadgeNotificationShape.OVAL,
+            'digi-badge-notification--pill': this.afShape === BadgeNotificationShape.PILL
+        };
+    }
+    componentWillLoad() {
+        this.checkProps();
+    }
+    checkProps() {
+        let valueAsNumber;
+        if (this.afValue !== null &&
+            this.afValue !== undefined &&
+            this.afValue !== '') {
+            valueAsNumber = Number(this.afValue);
+        }
+        if (!isNaN(valueAsNumber)) {
+            if (valueAsNumber >= 100) {
+                this.afValue = '+99';
+                this.afShape = BadgeNotificationShape.PILL;
+            }
+            else if (valueAsNumber < 100 && valueAsNumber >= 10) {
+                this.afShape = BadgeNotificationShape.OVAL;
+            }
+            else {
+                this.afShape = BadgeNotificationShape.CIRCLE;
+            }
+        }
+        else {
+            this.afShape = BadgeNotificationShape.PILL;
+        }
+    }
+    render() {
+        return (h(Host, { key: '2a3f82fe0bf3d3b43ee858a0184fb7d0045656f7' }, h("div", { key: 'f652cc5b76bdc72b4778fd16a1a9d270fe2400ea', class: Object.assign({ 'digi-badge-notification': true }, this.cssModifiers), "aria-label": this.afAriaLabel }, h("div", { key: 'ece907bc0004e24eafd221ead41300f7acd803ea', class: `${this.afShape}` }, h("span", { key: 'c83210ebbbcad768073095e52b601adc80a0645d' }, this.afValue)))));
+    }
+    static get watchers() { return {
+        "afValue": [{
+                "afValueChangeHandler": 0
+            }]
+    }; }
+};
+BadgeNotification.style = badgeNotificationCss();
 
 const buttonCss = () => `@charset "UTF-8";.sc-digi-button-h{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--background--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--focus:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--primary--active:var(--digi--color--background--interactive--hover--primary);--digi--button--color--background--secondary--default:var(--digi--color--background--interactive--default--secondary);--digi--button--color--background--secondary--hover:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--focus:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--secondary--active:var(--digi--color--background--interactive--hover--secondary);--digi--button--color--background--function--default:transparent;--digi--button--color--background--function--hover:transparent;--digi--button--color--background--function--focus:transparent;--digi--button--color--background--function--active:transparent;--digi--button--color--text--primary--default:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--hover:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--focus:var(--digi--color--text--interactive--secondary);--digi--button--color--text--primary--active:var(--digi--color--text--interactive--secondary);--digi--button--color--text--secondary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--hover:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--focus:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--secondary--active:var(--digi--color--text--interactive--brand-primary);--digi--button--color--text--function--default:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--hover:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--focus:var(--digi--color--text--interactive--primary);--digi--button--color--text--function--active:var(--digi--color--text--interactive--primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--hover:var(--digi--color--background--interactive--hover--primary);--digi--button--color--border--primary--focus:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--primary--active:var(--digi--color--background--interactive--default--primary);--digi--button--color--border--secondary--default:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--hover:var(--digi--color--border--interactive--hover--secondary);--digi--button--color--border--secondary--focus:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--secondary--active:var(--digi--color--border--interactive--default--primary);--digi--button--color--border--function--default:initial;--digi--button--color--border--function--hover:initial;--digi--button--color--border--function--focus:initial;--digi--button--color--border--function--active:initial;--digi--button--color--icon--primary--default:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--hover:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--focus:var(--digi--color--icon--secondary);--digi--button--color--icon--primary--active:var(--digi--color--icon--secondary);--digi--button--color--icon--secondary--default:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--hover:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--focus:var(--digi--color--icon--brand-primary);--digi--button--color--icon--secondary--active:var(--digi--color--icon--brand-primary);--digi--button--color--icon--function--default:var(--digi--color--icon--cta);--digi--button--color--icon--function--hover:var(--digi--color--icon--cta);--digi--button--color--icon--function--focus:var(--digi--color--icon--cta);--digi--button--color--icon--function--active:var(--digi--color--icon--cta);--digi--button--border-width--primary--default:var(--digi--border-width--primary);--digi--button--border-width--primary--hover:var(--digi--border-width--primary);--digi--button--border-width--secondary--default:var(--digi--border-width--primary);--digi--button--border-width--secondary--hover:var(--digi--border-width--primary);--digi--button--border-width--function--default:initial;--digi--button--border-width--function--hover:initial;--digi--button--border-style--primary--default:var(--digi--border-style--primary);--digi--button--border-style--primary--hover:var(--digi--border-style--primary);--digi--button--border-style--primary--focus:var(--digi--border-style--primary);--digi--button--border-style--primary--active:var(--digi--border-style--primary);--digi--button--border-style--secondary--default:var(--digi--border-style--primary);--digi--button--border-style--secondary--hover:var(--digi--border-style--primary);--digi--button--border-style--secondary--focus:var(--digi--border-style--primary);--digi--button--border-style--secondary--active:var(--digi--border-style--primary);--digi--button--border-style--function--default:var(--digi--border-style--secondary);--digi--button--border-style--function--hover:var(--digi--border-style--secondary);--digi--button--border-style--function--focus:var(--digi--border-style--secondary);--digi--button--border-style--function--active:var(--digi--border-style--secondary);--digi--button--border-radius--primary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--primary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--default:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--hover:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--focus:var(--digi--border-radius--secondary);--digi--button--border-radius--secondary--active:var(--digi--border-radius--secondary);--digi--button--border-radius--function--default:initial;--digi--button--border-radius--function--hover:initial;--digi--button--border-radius--function--focus:initial;--digi--button--border-radius--function--active:initial;--digi--button--padding--small:var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);--digi--button--padding--medium:var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);--digi--button--padding--large:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);--digi--button--font-size--small:var(--digi--global--typography--font-size--interaction-small);--digi--button--font-size--medium:var(--digi--global--typography--font-size--interaction-medium);--digi--button--font-family:var(--digi--global--typography--font-family--default);--digi--button--font-weight--default:var(--digi--typography--button--font-weight--desktop);--digi--button--font-weight--function:var(--digi--typography--label--font-weight--desktop);--digi--button--width:initial;--digi--button--display:initial;--digi--button--justify-content--default:initial;--digi--button--justify-content--full-width:center;--digi--button--align-items:center;--digi--button--text-align--default:initial;--digi--button--text-align--full-width:center;--digi--button--outline--default:initial;--digi--button--outline--focus:initial;--digi--button--box-shadow:none;--digi--button--cursor:pointer;--digi--button--icon--spacing:var(--digi--gutter--large);--digi--button--min-height--small:unset}.sc-digi-button-h .digi-button--variation-primary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--primary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--primary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--primary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--primary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--primary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--primary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--primary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--primary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--primary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--primary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--primary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--primary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--primary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--primary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--primary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--primary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--primary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--primary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--primary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--primary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--primary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--primary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--primary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--primary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--primary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--primary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--primary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--primary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-secondary.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--secondary--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--secondary--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--secondary--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--secondary--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--secondary--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--secondary--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--secondary--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--secondary--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--secondary--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--secondary--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--secondary--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--secondary--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--secondary--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--secondary--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--secondary--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--secondary--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--secondary--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--secondary--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--secondary--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--secondary--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--secondary--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--secondary--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--secondary--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--secondary--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--secondary--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--secondary--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--secondary--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--secondary--active);--FONT-WEIGHT:var(--digi--button--font-weight--default)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button{--COLOR--BACKGROUND--DEFAULT:var(--digi--button--color--background--function--default);--COLOR--BACKGROUND--HOVER:var(--digi--button--color--background--function--hover);--COLOR--BACKGROUND--FOCUS:var(--digi--button--color--background--function--focus);--COLOR--BACKGROUND--ACTIVE:var(--digi--button--color--background--function--active);--COLOR--TEXT--DEFAULT:var(--digi--button--color--text--function--default);--COLOR--TEXT--HOVER:var(--digi--button--color--text--function--hover);--COLOR--TEXT--FOCUS:var(--digi--button--color--text--function--focus);--COLOR--TEXT--ACTIVE:var(--digi--button--color--text--function--active);--COLOR--ICON--DEFAULT:var(--digi--button--color--icon--function--default);--COLOR--ICON--HOVER:var(--digi--button--color--icon--function--hover);--COLOR--ICON--FOCUS:var(--digi--button--color--icon--function--focus);--COLOR--ICON--ACTIVE:var(--digi--button--color--icon--function--active);--COLOR--BORDER--DEFAULT:var(--digi--button--color--border--function--default);--COLOR--BORDER--HOVER:var(--digi--button--color--border--function--hover);--COLOR--BORDER--FOCUS:var(--digi--button--color--border--function--focus);--COLOR--BORDER--ACTIVE:var(--digi--button--color--border--function--active);--BORDER-RADIUS--DEFAULT:var(--digi--button--border-radius--function--default);--BORDER-RADIUS--HOVER:var(--digi--button--border-radius--function--hover);--BORDER-RADIUS--FOCUS:var(--digi--button--border-radius--function--focus);--BORDER-RADIUS--ACTIVE:var(--digi--button--border-radius--function--active);--BORDER-WIDTH--DEFAULT:var(--digi--button--border-width--function--default);--BORDER-WIDTH--HOVER:var(--digi--button--border-width--function--hover);--BORDER-WIDTH--FOCUS:var(--digi--button--border-width--function--focus);--BORDER-WIDTH--ACTIVE:var(--digi--button--border-width--function--active);--BORDER-STYLE--DEFAULT:var(--digi--button--border-style--function--default);--BORDER-STYLE--HOVER:var(--digi--button--border-style--function--hover);--BORDER-STYLE--FOCUS:var(--digi--button--border-style--function--focus);--BORDER-STYLE--ACTIVE:var(--digi--button--border-style--function--active);--FONT-WEIGHT:var(--digi--button--font-weight--function)}.sc-digi-button-h .digi-button--variation-function.sc-digi-button:hover,.sc-digi-button-h .digi-button--variation-function.sc-digi-button:focus{text-decoration:underline}.sc-digi-button-h .digi-button--size-small.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--small);--PADDING:var(--digi--button--padding--small);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-medium.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--medium);--PADDING:var(--digi--button--padding--medium);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button--size-large.sc-digi-button{--FONT-SIZE:var(--digi--button--font-size--large);--PADDING:var(--digi--button--padding--large);--MIN-HEIGHT:var(--digi--button--min-height--small)}.sc-digi-button-h .digi-button.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button .sc-digi-button-s>[slot^=icon]{--digi--icon--height:1em;--digi--icon--width:1em;--digi--icon--color:var(--COLOR--ICON--DEFAULT);min-height:0}.sc-digi-button-h .digi-button.sc-digi-button{font-family:var(--digi--button--font-family);background:var(--COLOR--BACKGROUND--DEFAULT);color:var(--COLOR--TEXT--DEFAULT);padding:var(--PADDING);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);border-color:var(--COLOR--BORDER--DEFAULT);font-weight:var(--FONT-WEIGHT);font-size:var(--FONT-SIZE);outline:var(--digi--button--outline--default);box-shadow:var(--digi--button--box-shadow);text-align:var(--digi--button--text-align--default);width:var(--digi--button--width);display:var(--digi--button--display);justify-content:var(--digi--button--justify-content--default);cursor:var(--digi--button--cursor);min-height:var(--MIN-HEIGHT);align-items:var(--digi--button--align-items);white-space:nowrap}@media (any-hover: hover){.sc-digi-button-h .digi-button.sc-digi-button:hover{background:var(--COLOR--BACKGROUND--HOVER);border-radius:var(--BORDER-RADIUS--HOVER);border-width:var(--BORDER-WIDTH--HOVER);border-style:var(--BORDER-STYLE--HOVER);border-color:var(--COLOR--BORDER--HOVER);color:var(--COLOR--TEXT--HOVER)}.sc-digi-button-h .digi-button:hover.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:hover .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--HOVER)}}.sc-digi-button-h .digi-button.sc-digi-button:focus-visible{background:var(--COLOR--BACKGROUND--FOCUS);color:var(--COLOR--TEXT--FOCUS);border-style:var(--BORDER-STYLE--FOCUS);border-color:var(--COLOR--BORDER--FOCUS);outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-button-h .digi-button:focus-visible.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:focus-visible .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--FOCUS)}.sc-digi-button-h .digi-button.sc-digi-button:active{background:var(--COLOR--BACKGROUND--ACTIVE);color:var(--COLOR--TEXT--ACTIVE)}.sc-digi-button-h .digi-button:active.sc-digi-button-s>[slot^=icon],.sc-digi-button-h .digi-button:active .sc-digi-button-s>[slot^=icon]{--digi--icon--color:var(--COLOR--ICON--ACTIVE)}.sc-digi-button-h .digi-button--icon.sc-digi-button,.sc-digi-button-h .digi-button--icon-secondary.sc-digi-button{--digi--button--display:flex;align-items:center;justify-content:var(--digi--button--justify-content--default);gap:var(--digi--button--icon--spacing)}.sc-digi-button-h .digi-button--full-width.sc-digi-button{--digi--button--width:100%;--digi--button--text-align--default:var(--digi--button--text-align--full-width);--digi--button--justify-content--default:var(--digi--button--justify-content--full-width)}`;
 
@@ -2285,7 +2346,30 @@ const CalendarWeekView = class {
         this.weekDays = [...newDates];
     }
     afDatesUpdate() {
-        const dateList = [...JSON.parse(this.afDates)];
+        // Angular/React can connect the element before afDates is set.
+        if (this.afDates == null || this.afDates === '') {
+            return;
+        }
+        const hadDates = this.dates.length > 0;
+        let dateList;
+        try {
+            if (Array.isArray(this.afDates)) {
+                dateList = [...this.afDates];
+            }
+            else if (typeof this.afDates === 'string') {
+                dateList = JSON.parse(this.afDates);
+            }
+            else {
+                return;
+            }
+        }
+        catch (_a) {
+            logger.warn(`Invalid JSON in "af-dates" attribute`, this.hostElement);
+            return;
+        }
+        if (!Array.isArray(dateList)) {
+            return;
+        }
         this.dates = [
             ...dateList.sort((a, b) => {
                 const c = new Date(a);
@@ -2293,6 +2377,9 @@ const CalendarWeekView = class {
                 return this.getTime(c) - this.getTime(d);
             })
         ];
+        if (!hadDates && this.dates.length > 0) {
+            this.initDates();
+        }
     }
     /**
      * Kan användas för att manuellt sätta om det aktiva datumet. Formatet måste vara 'yyyy-MM-dd'.
@@ -2316,6 +2403,9 @@ const CalendarWeekView = class {
         this.afOnWeekChange.emit('next');
     }
     initDates() {
+        if (this.dates.length === 0) {
+            return;
+        }
         this.minDate = new Date(this.dates[0]);
         this.maxDate = new Date(this.dates[this.dates.length - 1]);
         this.selectedDate = format(new Date(this.dates[0]), 'yyyy-MM-dd', {
@@ -2327,9 +2417,23 @@ const CalendarWeekView = class {
     }
     componentWillLoad() {
         this.afDatesUpdate();
-        this.initDates();
+        // Angular attaches the host first and binds `[afDates]` on the next frame
+        // (Stencil 4.36+). @Watch skips that first assignment, so if dates are not
+        // here yet, wait one frame. React/vanilla that already set the prop skip
+        // the delay.
+        if (this.dates.length === 0) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.afDatesUpdate();
+                    resolve();
+                });
+            });
+        }
     }
     componentDidLoad() {
+        if (this.dates.length === 0) {
+            this.afDatesUpdate();
+        }
         this.afOnReady.emit();
     }
     get prevWeekText() {
@@ -2353,7 +2457,7 @@ const CalendarWeekView = class {
                 format(new Date(lastDate), 'MMMM yyyy', { locale: locale });
     }
     render() {
-        return (h("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, h("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, h("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, h(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
+        return (h("div", { key: '44d49828a7f43a1f3943aaf0af4139f402844bf0', class: "digi-calendar-week-view" }, h("nav", { key: '44ba98a7c433077c2c11c55b150a5cc2f1d38ac2', class: "digi-calendar-week-view__timepicker" }, h("div", { key: '160ce73dc293abd69193c2b1750c9fd7400b8804', class: "digi-calendar-week-view__dates" }, h("div", { key: '2d60245978d9c7615f3ff5ec7b9d8d628e16f843', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: '23a1c94d0575061951f67f46782144de52e5e662' }, h(this.afHeadingLevel, { key: 'a183705a035f4d3d57ced74920221f40bbe6019f', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: '147910745991716f3557491c6e6aa702f479e8c7', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: '0d91367cd6066a2b35349edd0ff93e20b5326f04', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: 'fdff670cf241e05920e19e0ce6e601b62ae9a3f0', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
             const date = format(new Date(dateItem), 'd', {
                 locale: locale
             });
@@ -2373,16 +2477,17 @@ const CalendarWeekView = class {
                 } }, day), h("span", { class: "digi-calendar-week-view__date-button-date" }, date), h("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), h("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
+        })))), h("digi-button", { key: 'dbae5227d0316a5a67febc7de83b1c4c5cfc1044', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '65d0f656a0d35911d39f9b8e9ade224be54d4371', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '68d9b3d6c929d0185f412add980a542b3c86fbb2', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, h("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: 'a9e688f815a5053aa709cfeb9359131f73df21c0', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: '7d1073f6cd1982fda2ce7dcb60532c94bd1d0634', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'db7ce0ca80485df1e4ae67200f2cd90cc80938d5' }, h("slot", { key: 'f08f447ae89612dfcea56c638024220bc29e7914' })))));
     }
+    get hostElement() { return getElement(this); }
     static get watchers() { return {
         "selectedDate": [{
                 "selectedDateChangeHandler": 0
@@ -2441,6 +2546,327 @@ const IconChevronRight = class {
 };
 IconChevronRight.style = iconChevronRightCss();
 
+const navigationTablistCss = () => `.sc-digi-tablist-h{--tab-active-border-color:var(--digi--color--marking--navigation--selected);--tab-text-color:var(--digi--color--text--primary);--tab-icon-primary--color:var(--digi--color--icon--primary);--tab-icon-primary--color-hover:var(--digi--color--icon--primary);--tab-icon-primary--color-active:var(--digi--color--icon--primary)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist{font-family:var(--digi--global--typography--font-family--default);color:var(--digi--color--text--primary);position:relative;display:flex;gap:1rem;background-color:var(--digi--color--background--primary);margin-bottom:2.875rem;border-bottom:1px solid var(--digi--color--divider--secondary)}.sc-digi-tablist-h .digi-tablist--overflow-scroll.sc-digi-tablist .control-wrapper.sc-digi-tablist{display:none !important}.sc-digi-tablist-h .digi-tablist--overflow-scroll.sc-digi-tablist [role=tablist].sc-digi-tablist{overflow-x:auto}.sc-digi-tablist-h .digi-tablist--overflow-controls.sc-digi-tablist [role=tablist].sc-digi-tablist{overflow-x:hidden}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist button.sc-digi-tablist{background:none;border:none;padding:0;font-family:inherit}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist [role=tablist].sc-digi-tablist{display:flex;font-weight:bold;flex-grow:1;width:100%}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;height:100%}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist{display:flex;align-items:center;justify-content:center;background-color:var(--digi--color--background--interactive--default--tertiary);border-radius:6px;min-height:auto;padding:0.75rem;aspect-ratio:1;cursor:pointer}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist digi-icon-chevron-right.sc-digi-tablist,.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .control-wrapper.sc-digi-tablist .tab-control-button.sc-digi-tablist digi-icon-chevron-left.sc-digi-tablist{--digi--icon--color:var(--digi--color--icon--cta)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist{cursor:pointer;white-space:nowrap}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .content-wrapper.sc-digi-tablist{position:relative;height:2.75rem;display:flex;flex-direction:column;transition:background-color 0.1s linear}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .tablist-content.sc-digi-tablist{flex:1;display:flex;padding-right:0.75rem;padding-left:0.75rem}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist [class*=digi-icon-].sc-digi-tablist:not(svg){--digi--icon--width:1rem;--digi--icon--color:var(--tab-icon-primary--color);padding-right:var(--digi--gutter--smaller)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist digi-badge-notification.sc-digi-tablist{margin-left:-0.125rem}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .title.sc-digi-tablist{font-size:1rem;flex-direction:column;display:flex;align-items:center;justify-content:center;font-weight:normal;color:var(--tab-text-color)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .title.sc-digi-tablist::after{content:attr(data-text);content:attr(data-text)/"";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:bold}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist .indicator.sc-digi-tablist{height:0.25rem;width:100%;visibility:hidden;background-color:var(--tab-active-border-color)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:focus{outline:none;box-shadow:none}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:focus-visible{z-index:10;outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:hover:not(.is-active) .title.sc-digi-tablist{color:var(--digi--color--text--interactive--primary);text-decoration:underline}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.sc-digi-tablist:hover:not(.is-active) [class*=digi-icon-].sc-digi-tablist:not(svg){--tab-icon-primary--color:var(--tab-icon-primary--color-hover)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist .title.sc-digi-tablist{font-weight:bold}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist svg.sc-digi-tablist{transform:translateX(-0.125rem)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist [class*=digi-icon-].sc-digi-tablist:not(svg){--tab-icon-primary--color:var(--tab-icon-primary--color-active)}.sc-digi-tablist-h .digi-tablist.sc-digi-tablist .digi-tab.is-active.sc-digi-tablist .indicator.sc-digi-tablist{visibility:visible}`;
+
+const NavigationTablist = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afTabChange = createEvent(this, "afTabChange", 7);
+        this.afTabFocusChange = createEvent(this, "afTabFocusChange", 7);
+        this.tabRefs = {};
+        this.activeTab = 0;
+        this.selectedTab = 0;
+        this.windowTab = 0;
+        this.tabs = [];
+        this.listOverflows = false;
+        this.showPrev = false;
+        this.showNext = false;
+        /**
+         * Bestämmer beteende då flikar överflödar
+         * * @en Set overflow behaviour
+         */
+        this.afOverflowMode = OverflowMode.Controls;
+        this.handleResize = () => {
+            if (!this.tablistRef)
+                return;
+            // Ensure we measure after any layout/paint from the resize
+            if (this._requestAnimationFrame)
+                cancelAnimationFrame(this._requestAnimationFrame);
+            this._requestAnimationFrame = requestAnimationFrame(() => {
+                var _a, _b;
+                const el = this.tablistRef;
+                const containerWidth = el.clientWidth;
+                const contentWidth = el.scrollWidth;
+                // Tolerance ≈ 1 physical pixel to absorb zoom/subpixel jitter
+                const tolerance = 1 / ((window === null || window === void 0 ? void 0 : window.devicePixelRatio) || 1);
+                // Guard against div-by-zero
+                const tabsCount = Math.max((_b = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, 1);
+                const avgTabWidth = contentWidth / tabsCount;
+                // How many whole tabs fit? Nudge by tolerance to avoid off-by-one at zoom edges
+                const tabsPerWindow = Math.floor((containerWidth + tolerance) / avgTabWidth);
+                this.tabsPerWindow = Math.max(1, Math.min(tabsPerWindow, tabsCount));
+                // Ensure windowTab stays within valid bounds after resize
+                const maxValidWindowTab = Math.max(0, tabsCount - this.tabsPerWindow);
+                if (this.windowTab > maxValidWindowTab) {
+                    this.windowTab = maxValidWindowTab;
+                }
+                // Overflow check with tolerance
+                this.listOverflows = contentWidth - containerWidth > tolerance;
+                // (Optional) if you have left/right “handles”, compute visibility too:
+                this.showPrev = el.scrollLeft > tolerance;
+                this.showNext =
+                    el.scrollLeft + el.clientWidth < el.scrollWidth - tolerance;
+            });
+        };
+    }
+    handleKey(e) {
+        if (this.focusCaptured()) {
+            let captureKey = true;
+            switch (e.key) {
+                case ' ':
+                case 'Enter':
+                    return this.setActiveTabAndFocus(this.selectedTab);
+                case 'ArrowLeft':
+                    if (e.shiftKey) {
+                        this.handleTabControl(Direction.Previous);
+                    }
+                    else {
+                        this.focusTab(this.selectedTab - 1);
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (e.shiftKey) {
+                        this.handleTabControl(Direction.Next);
+                    }
+                    else {
+                        this.focusTab(this.selectedTab + 1);
+                    }
+                    break;
+                case 'Home':
+                    if (e.shiftKey) {
+                        return this.focusTab(0);
+                    }
+                    else {
+                        return this.moveWindow(0);
+                    }
+                case 'End':
+                    if (e.shiftKey) {
+                        return this.focusTab(this.tabs.length - 1);
+                    }
+                    else {
+                        return this.moveWindow(this.tabs.length - 1);
+                    }
+                default:
+                    captureKey = false;
+            }
+            if (captureKey) {
+                e.preventDefault();
+            }
+        }
+    }
+    syncPanels() {
+        var _a;
+        const activeId = (_a = this.tabs[this.activeTab]) === null || _a === void 0 ? void 0 : _a.id;
+        for (const panel of this.getSlottedPanels()) {
+            panel.isVisible = panel.tab === activeId;
+        }
+    }
+    handleTabPropChange(tabId) {
+        this.setActiveTabById(tabId);
+    }
+    syncControls() {
+        const tabGroup = Math.floor(this.windowTab / this.tabsPerWindow);
+        const numberOfGroups = Math.ceil(this.tabs.length / this.tabsPerWindow);
+        this.showPrev = tabGroup > 0;
+        this.showNext = tabGroup < numberOfGroups - 1;
+    }
+    syncWindow(tabIdx) {
+        const tab = this.tabs[tabIdx];
+        const tabRef = this.tabRefs[tab.id];
+        const listBox = this.tablistRef.getBoundingClientRect();
+        const tabBox = tabRef.getBoundingClientRect();
+        const centeredOffset = tabRef.offsetLeft - listBox.width / 2 + tabBox.width / 2;
+        const maxLeft = this.tablistRef.scrollWidth - listBox.width;
+        const left = Math.max(Math.min(centeredOffset, maxLeft), 0);
+        this.tablistRef.scrollTo({
+            left,
+            behavior: 'smooth'
+        });
+    }
+    syncFocus(tabIdx) {
+        const tabRef = this.tabRefs[this.tabs[tabIdx].id];
+        tabRef.focus({ preventScroll: true });
+        this.windowTab = tabIdx;
+    }
+    setupTabs(tabs) {
+        // Angular/React can connect the element before afTabs is set.
+        if (tabs == null || tabs === '') {
+            return;
+        }
+        const hadTabs = this.tabs.length > 0;
+        if (typeof tabs === 'string') {
+            this.tabs = JSON.parse(tabs);
+        }
+        else if (Array.isArray(tabs)) {
+            this.tabs = tabs;
+        }
+        else {
+            throw new Error('Invalid format or no tabs supplied');
+        }
+        if (!hadTabs) {
+            this.setupInitialTab();
+        }
+        this.syncPanels();
+    }
+    getSlottedPanels() {
+        return Array.from(this.hostElement.querySelectorAll('digi-tablist-panel')).filter((panel) => panel.closest('digi-tablist') === this.hostElement);
+    }
+    setActiveTabById(id) {
+        const tabIdx = this.tabs.findIndex((tab) => tab.id === id);
+        if (tabIdx > -1) {
+            this.activeTab = tabIdx;
+        }
+    }
+    setupInitialTab() {
+        if (this.afActiveTab != null) {
+            return this.setActiveTabById(this.afActiveTab);
+        }
+        else if (this.afInitialTab != null) {
+            return this.setActiveTabById(this.afInitialTab);
+        }
+    }
+    setupResizeHandler() {
+        this.resizeObserver = new ResizeObserver(() => this.handleResize());
+        this.resizeObserver.observe(this.tablistRef);
+    }
+    handleTabChange(tab) {
+        const idx = this.tabs.findIndex(({ id }) => id === tab.id);
+        this.setActiveTabAndFocus(idx);
+        this.afTabChange.emit(tab);
+    }
+    handleTabControl(direction) {
+        // Calculate the current window group
+        const currentGroup = Math.floor(this.windowTab / this.tabsPerWindow);
+        const totalGroups = Math.ceil(this.tabs.length / this.tabsPerWindow);
+        let newGroup;
+        if (direction === Direction.Next) {
+            newGroup = Math.min(currentGroup + 1, totalGroups - 1);
+        }
+        else {
+            newGroup = Math.max(currentGroup - 1, 0);
+        }
+        // Move to the first tab of the target group
+        const newWindowTab = newGroup * this.tabsPerWindow;
+        this.moveWindow(newWindowTab);
+    }
+    setActiveTabAndFocus(tabIdx) {
+        this.activeTab = tabIdx;
+        this.focusTab(tabIdx);
+    }
+    focusTab(tabIdx) {
+        this.selectedTab = this.nextTabIdx(tabIdx);
+        const currentTab = this.tabs[this.selectedTab];
+        this.afTabFocusChange.emit(currentTab);
+    }
+    moveWindow(tabIdx) {
+        tabIdx = Math.max(0, Math.min(tabIdx, this.tabs.length - 1));
+        this.windowTab = tabIdx;
+    }
+    nextTabIdx(tabIdx) {
+        if (tabIdx >= this.tabs.length) {
+            return 0;
+        }
+        else if (tabIdx < 0) {
+            return this.tabs.length - 1;
+        }
+        return tabIdx;
+    }
+    focusCaptured() {
+        return this.tabs.some((tab) => this.tabRefs[tab.id] === document.activeElement);
+    }
+    componentWillLoad() {
+        this.setupTabs(this.afTabs);
+        this.setupInitialTab();
+        // Angular attaches the host first and binds `[afTabs]` on the next frame
+        // (Stencil 4.36+). @Watch skips that first assignment, so if tabs are not
+        // here yet, wait one frame. React/vanilla that already set the prop skip
+        // the delay.
+        if (this.tabs.length === 0) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.setupTabs(this.afTabs);
+                    this.setupInitialTab();
+                    resolve();
+                });
+            });
+        }
+    }
+    componentDidLoad() {
+        var _a, _b, _c;
+        this.setupTabs(this.afTabs);
+        // Also listen to window resize for viewport zoom changes
+        if (window) {
+            window.addEventListener('resize', this.handleResize, { passive: true });
+        }
+        // Recalculate once fonts finish loading (text width changes with webfonts)
+        (_c = (_b = (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) === null || _b === void 0 ? void 0 : _b.then) === null || _c === void 0 ? void 0 : _c.call(_b, () => this.handleResize());
+        this.setupResizeHandler();
+        this.handleResize();
+        this.syncPanels();
+        this.syncControls();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (window) {
+            window.removeEventListener('resize', this.handleResize);
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this._requestAnimationFrame)
+            cancelAnimationFrame(this._requestAnimationFrame);
+    }
+    render() {
+        return (h(Host, { key: 'b2d71ff4b3f2c2fa22feffbc298360c1b3202b1d' }, h("div", { key: 'df48ffc9fdabfca380675c7232af5fef80c445b9', class: {
+                'digi-tablist': true,
+                'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
+                'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
+            } }, h("div", { key: '797f70a00aa1e3dd8a3b54d43808b9515259723c', class: "control-wrapper", style: {
+                left: '0',
+                visibility: this.showPrev ? 'visible' : 'hidden'
+            } }, h("button", { key: '415237740bc65dd5cfdb0e57eb44307c9d838670', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '59f2d43ba38c7d4ebdd85a575b2e89c0fec62381' }))), h("div", { key: '01602338cbd7a63f48cdcf541629e76bac46dd4c', 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}`;
+            const badgeValue = tab.badgeValue;
+            return (h("button", { ref: (ref) => (this.tabRefs[tab.id] = ref), class: {
+                    '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: 'db28ea61c349d7aaf057e84b607c4f851b3f6712', class: "control-wrapper", style: {
+                right: '0',
+                visibility: this.showNext ? 'visible' : 'hidden'
+            } }, h("button", { key: '83513f2d64cc0578155d305f21dfb1ca4a412cc6', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '9263e864c21ea5358f301214fbadda6ed7d3c74a' })))), h("div", { key: '205efbbb3aab40f51f9f85f8d74a4026970c7144', role: "presentation" }, h("slot", { key: 'e753d718f852072745f5c2a49f6189fb62f3645b', onSlotchange: () => this.syncPanels() }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "activeTab": [{
+                "syncPanels": 0
+            }],
+        "afActiveTab": [{
+                "handleTabPropChange": 0
+            }],
+        "windowTab": [{
+                "syncControls": 0
+            }, {
+                "syncWindow": 0
+            }],
+        "listOverflows": [{
+                "syncControls": 0
+            }],
+        "selectedTab": [{
+                "syncFocus": 0
+            }],
+        "afTabs": [{
+                "setupTabs": 0
+            }]
+    }; }
+};
+NavigationTablist.style = navigationTablistCss();
+
+const NavigationTabPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isVisible = false;
+    }
+    render() {
+        return (h(Host, { key: '253b1c6e0b466c8e806aeec2a6e99f86172b3324' }, h("div", { key: '9639af8c2a404a738c2c07c437f0537f81f5a72f', id: `tabpanel-${this.tab}`, role: "tabpanel", "aria-labelledby": `tab-${this.tab}`, style: {
+                display: this.isVisible ? 'initial' : 'none',
+                overflowX: 'hidden',
+                overflowY: 'auto'
+            } }, h("slot", { key: '3383cb70665259583d172e82f9c2dd38a81cec3c' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+
 const typographyCss = () => `digi-typography{--digi--typography--h1--margin--small:var(--digi--margin--h1-small);--digi--typography--h1--margin--medium:var(--digi--margin--h1-medium);--digi--typography--h1--margin--large:var(--digi--margin--h1-large);--digi--typography--h2--margin--small:var(--digi--margin--h2-small);--digi--typography--h2--margin--large:var(--digi--margin--h2-large);--digi--typography--h3--margin--small:var(--digi--margin--h3-small);--digi--typography--h3--margin--large:var(--digi--margin--h3-large);--digi--typography--h4--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h4--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--h5--margin--small:var(--digi--margin--h4-h6-small);--digi--typography--h6--margin--large:var(--digi--margin--h4-h6-large);--digi--typography--paragraph--margin--small:var(--digi--margin--text-small);--digi--typography--paragraph--margin--large:var(--digi--margin--text-large);--digi--typography--paragraph--margin-top:initial;--digi--typography--color--text:var(--digi--color--text--primary);--digi--typography--text-decoration-thickness--hover:0.156em;--digi--typography--text-decoration-thickness--default:0.05em;--digi--typography--text-underline-offset:3px;font-family:var(--digi--global--typography--font-family--default);color:var(--digi--typography--color--text);font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);--FONT-SIZE--BODY:var(--digi--typography--body--font-size--mobile);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--mobile);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--mobile);--TEXT-DECORATION--BODY:var(     --digi--typography--body--text-decoration--mobile   );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--mobile);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--mobile);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--mobile);--TEXT-DECORATION--LINK:var(     --digi--typography--link--text-decoration--mobile   );--FONT-SIZE--HEADING-1:var(--digi--typography--heading-1--font-size--mobile);--LINE-HEIGHT--HEADING-1:var(     --digi--typography--heading-1--line-height--mobile   );--FONT-WEIGHT--HEADING-1:var(     --digi--typography--heading-1--font-weight--mobile   );--TEXT-DECORATION--HEADING-1:var(     --digi--typography--heading-1--text-decoration--mobile   );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--small);--FONT-SIZE--HEADING-2:var(--digi--typography--heading-2--font-size--mobile);--LINE-HEIGHT--HEADING-2:var(     --digi--typography--heading-2--line-height--mobile   );--FONT-WEIGHT--HEADING-2:var(     --digi--typography--heading-2--font-weight--mobile   );--TEXT-DECORATION--HEADING-2:var(     --digi--typography--heading-2--text-decoration--mobile   );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(--digi--typography--heading-3--font-size--mobile);--LINE-HEIGHT--HEADING-3:var(     --digi--typography--heading-3--line-height--mobile   );--FONT-WEIGHT--HEADING-3:var(     --digi--typography--heading-3--font-weight--mobile   );--TEXT-DECORATION--HEADING-3:var(     --digi--typography--heading-3--text-decoration--mobile   );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-4:var(     --digi--typography--heading-4--line-height--mobile   );--FONT-WEIGHT--HEADING-4:var(     --digi--typography--heading-4--font-weight--mobile   );--TEXT-DECORATION--HEADING-4:var(     --digi--typography--heading-4--text-decoration--mobile   );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-5:var(     --digi--typography--heading-4--line-height--mobile   );--FONT-WEIGHT--HEADING-5:var(     --digi--typography--heading-4--font-weight--mobile   );--TEXT-DECORATION--HEADING-5:var(     --digi--typography--heading-4--text-decoration--mobile   );--MARGIN--HEADING-5:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-6:var(--digi--typography--heading-4--font-size--mobile);--LINE-HEIGHT--HEADING-6:var(     --digi--typography--heading-4--line-height--mobile   );--FONT-WEIGHT--HEADING-6:var(     --digi--typography--heading-4--font-weight--mobile   );--TEXT-DECORATION--HEADING-6:var(     --digi--typography--heading-4--text-decoration--mobile   );--MARGIN--HEADING-6:var(--digi--typography--h4--margin--small)}@media (min-width: 61.9375rem){digi-typography{--FONT-SIZE--BODY:var(--digi--typography--body--font-size--desktop);--LINE-HEIGHT--BODY:var(--digi--typography--body--line-height--desktop);--FONT-WEIGHT--BODY:var(--digi--typography--body--font-weight--desktop);--TEXT-DECORATION--BODY:var(       --digi--typography--body--text-decoration--desktop     );--MARGIN--BODY:var(--digi--typography--paragraph--margin--small);--FONT-SIZE--LINK:var(--digi--typography--link--font-size--desktop);--LINE-HEIGHT--LINK:var(--digi--typography--link--line-height--desktop);--FONT-WEIGHT--LINK:var(--digi--typography--link--font-weight--desktop);--TEXT-DECORATION--LINK:var(       --digi--typography--link--text-decoration--desktop     );--FONT-SIZE--HEADING-1:var(       --digi--typography--heading-1--font-size--desktop     );--LINE-HEIGHT--HEADING-1:var(       --digi--typography--heading-1--line-height--desktop     );--FONT-WEIGHT--HEADING-1:var(       --digi--typography--heading-1--font-weight--desktop     );--TEXT-DECORATION--HEADING-1:var(       --digi--typography--heading-1--text-decoration--desktop     );--MARGIN--HEADING-1:var(--digi--typography--h1--margin--medium);--FONT-SIZE--HEADING-2:var(       --digi--typography--heading-2--font-size--desktop     );--LINE-HEIGHT--HEADING-2:var(       --digi--typography--heading-2--line-height--desktop     );--FONT-WEIGHT--HEADING-2:var(       --digi--typography--heading-2--font-weight--desktop     );--TEXT-DECORATION--HEADING-2:var(       --digi--typography--heading-2--text-decoration--desktop     );--MARGIN--HEADING-2:var(--digi--typography--h2--margin--small);--FONT-SIZE--HEADING-3:var(       --digi--typography--heading-3--font-size--desktop     );--LINE-HEIGHT--HEADING-3:var(       --digi--typography--heading-3--line-height--desktop     );--FONT-WEIGHT--HEADING-3:var(       --digi--typography--heading-3--font-weight--desktop     );--TEXT-DECORATION--HEADING-3:var(       --digi--typography--heading-3--text-decoration--desktop     );--MARGIN--HEADING-3:var(--digi--typography--h3--margin--small);--FONT-SIZE--HEADING-4:var(       --digi--typography--heading-4--font-size--desktop     );--LINE-HEIGHT--HEADING-4:var(       --digi--typography--heading-4--line-height--desktop     );--FONT-WEIGHT--HEADING-4:var(       --digi--typography--heading-4--font-weight--desktop     );--TEXT-DECORATION--HEADING-4:var(       --digi--typography--heading-4--text-decoration--desktop     );--MARGIN--HEADING-4:var(--digi--typography--h4--margin--small);--FONT-SIZE--HEADING-5:var(       --digi--typography--heading-4--font-size--desktop     );--LINE-HEIGHT--HEADING-5:var(       --digi--typography--heading-4--line-height--desktop     );--FONT-WEIGHT--HEADING-5:var(       --digi--typography--heading-4--font-weight--desktop     );--TEXT-DECORATION--HEADING-5:var(       --digi--typography--heading-4--text-decoration--desktop     );--MARGIN--HEADING-5:var(--digi--typography--h5--margin--small);--FONT-SIZE--HEADING-6:var(       --digi--typography--heading-4--font-size--desktop     );--LINE-HEIGHT--HEADING-6:var(       --digi--typography--heading-4--line-height--desktop     );--FONT-WEIGHT--HEADING-6:var(       --digi--typography--heading-4--font-weight--desktop     );--TEXT-DECORATION--HEADING-6:var(       --digi--typography--heading-4--text-decoration--desktop     );--MARGIN--HEADING-6:var(--digi--typography--h6--margin--small)}}digi-typography h1,digi-typography h2,digi-typography h3,digi-typography h4,digi-typography h5,digi-typography h6{margin-top:0;}digi-typography h1,digi-typography .digi-h1{font-size:var(--FONT-SIZE--HEADING-1);line-height:var(--LINE-HEIGHT--HEADING-1);font-weight:var(--FONT-WEIGHT--HEADING-1);text-decoration:var(--TEXT-DECORATION--HEADING-1);margin-bottom:var(--MARGIN--HEADING-1)}digi-typography h2,digi-typography .digi-h2{font-size:var(--FONT-SIZE--HEADING-2);line-height:var(--LINE-HEIGHT--HEADING-2);font-weight:var(--FONT-WEIGHT--HEADING-2);text-decoration:var(--TEXT-DECORATION--HEADING-2);margin-bottom:var(--MARGIN--HEADING-2)}digi-typography h3,digi-typography .digi-h3{font-size:var(--FONT-SIZE--HEADING-3);line-height:var(--LINE-HEIGHT--HEADING-3);font-weight:var(--FONT-WEIGHT--HEADING-3);text-decoration:var(--TEXT-DECORATION--HEADING-3);margin-bottom:var(--MARGIN--HEADING-3)}digi-typography h4,digi-typography .digi-h4{font-size:var(--FONT-SIZE--HEADING-4);line-height:var(--LINE-HEIGHT--HEADING-4);font-weight:var(--FONT-WEIGHT--HEADING-4);text-decoration:var(--TEXT-DECORATION--HEADING-4);margin-bottom:var(--MARGIN--HEADING-4)}digi-typography h5,digi-typography .digi-h5{font-size:var(--FONT-SIZE--HEADING-5);line-height:var(--LINE-HEIGHT--HEADING-5);font-weight:var(--FONT-WEIGHT--HEADING-5);text-decoration:var(--TEXT-DECORATION--HEADING-5);margin-bottom:var(--MARGIN--HEADING-5)}digi-typography h6,digi-typography .digi-h6{font-size:var(--FONT-SIZE--HEADING-6);line-height:var(--LINE-HEIGHT--HEADING-6);font-weight:var(--FONT-WEIGHT--HEADING-6);text-decoration:var(--TEXT-DECORATION--HEADING-6);margin-bottom:var(--MARGIN--HEADING-6)}digi-typography p,digi-typography blockquote{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);margin-top:initial;margin-bottom:var(--MARGIN--BODY);max-width:var(--digi--paragraph-width--medium)}digi-typography p:last-child,digi-typography blockquote:last-child{margin-bottom:0}digi-typography blockquote{margin-inline:0}digi-typography digi-typography-preamble{display:block;margin-bottom:var(--MARGIN--BODY)}digi-typography digi-typography-preamble:last-child{margin-bottom:0}digi-typography ul,digi-typography ol,digi-typography dl{font-size:var(--FONT-SIZE--BODY);line-height:var(--LINE-HEIGHT--BODY);font-weight:var(--FONT-WEIGHT--BODY);text-decoration:var(--TEXT-DECORATION--BODY);max-width:var(--digi--paragraph-width--medium);margin-bottom:var(--MARGIN--BODY)}digi-typography ul,digi-typography ol{margin:0 0 var(--MARGIN--BODY) 0;padding-inline-start:1.5rem}digi-typography ul li,digi-typography ol li{margin-top:initial;margin-bottom:0.5rem;box-sizing:border-box;width:100%;padding-left:0}digi-typography ul li:last-child,digi-typography ol li:last-child{margin-bottom:0}digi-typography a{font-size:1em;line-height:var(--LINE-HEIGHT--LINK);font-weight:inherit;text-decoration:var(--TEXT-DECORATION--LINK);color:var(--digi--color--text--interactive--primary);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--default);text-underline-offset:var(--digi--typography--text-underline-offset)}digi-typography a:hover{text-decoration:var(--TEXT-DECORATION--LINK);text-decoration-thickness:var(--digi--typography--text-decoration-thickness--hover)}digi-typography a:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}digi-typography a:visited{color:var(--digi--color--text--interactive--visited)}digi-typography .digi-typography--hide-visited a:visited{color:var(--digi--color--text--interactive--primary)}digi-typography strong{font-weight:var(--digi--typography--label--font-weight--desktop)}`;
 
 const Typography = class {
@@ -2458,4 +2884,4 @@ const Typography = class {
 };
 Typography.style = typographyCss();
 
-export { Button as digi_button, CalendarWeekView as digi_calendar_week_view, IconChevronLeft as digi_icon_chevron_left, IconChevronRight as digi_icon_chevron_right, Typography as digi_typography };
+export { BadgeNotification as digi_badge_notification, Button as digi_button, CalendarWeekView as digi_calendar_week_view, IconChevronLeft as digi_icon_chevron_left, IconChevronRight as digi_icon_chevron_right, NavigationTablist as digi_tablist, NavigationTabPanel as digi_tablist_panel, Typography as digi_typography };