@nldd/design-system 0.8.37

package/dist/components/navigation/tab-bar/tab-bar.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Nederlandse Digitale Dienst Tab Bar Component (Lit + TypeScript)
+ *
+ * A horizontal navigation bar with mutually exclusive tabs.
+ * Exports both NLDDTabBar and NLDDTabBarItem.
+ *
+ * @element nldd-tab-bar
+ * @attr {boolean} compact           - Shows items in compact view: icon stacked above text
+ * @attr {boolean} navigation        - Renders a nav landmark instead of tablist; use for href-based items that navigate between routes
+ * @attr {boolean} responsive        - Automatically switches to compact below 480px container width
+ * @attr {string}  accessible-label  - Accessible name for the navigation region; defaults to 'Tabs'
+ *
+ * @slot - nldd-tab-bar-item elements
+ *
+ * @fires tabchange - When a tab is selected; detail: { item: NLDDTabBarItem }
+ *
+ * ---
+ *
+ * @element nldd-tab-bar-item
+ * @attr {boolean} selected  - Selected state (managed by nldd-tab-bar)
+ * @attr {string}  text      - Tab text; also used as accessible name for icon-only items
+ * @attr {string}  href      - Optional link URL; renders an anchor instead of a button
+ *
+ * @slot icon - Icon content
+ *
+ * @fires select - When the item is activated; detail: { item: NLDDTabBarItem }
+ */
+import { LitElement } from 'lit';
+export declare class NLDDTabBarItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    selected: boolean;
+    href: string;
+    /** Set by nldd-tab-bar. Not part of the public API. */
+    compact: boolean;
+    /** Set by nldd-tab-bar. Not part of the public API. */
+    responsive: boolean;
+    /** Set by nldd-tab-bar. Not part of the public API. */
+    _groupVariant: 'icon-and-text' | 'text' | 'icon' | '';
+    private _authorVariant;
+    text: string;
+    icon: string;
+    get _effectiveVariant(): 'icon-and-text' | 'text' | 'icon' | 'compact';
+    _hasIconSlot: boolean;
+    /** Set by nldd-tab-bar. Not part of the public API. */
+    _navigation: boolean;
+    /** Set by nldd-tab-bar. Marks this item as the keyboard entry point when no tab is selected. */
+    _isFallbackFocusable: boolean;
+    connectedCallback(): void;
+    updated(): void;
+    focus(options?: FocusOptions): void;
+    _onIconSlotChange(e: Event): void;
+    _handleClick(event: Event): void;
+    render(): import("lit-html").TemplateResult;
+}
+export declare class NLDDTabBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    compact: boolean;
+    responsive: boolean;
+    fullWidth: boolean;
+    variant: 'icon-and-text' | 'text' | 'icon' | '';
+    navigation: boolean;
+    accessibleLabel: string;
+    private _hasCustomLabel;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _getItems;
+    private _syncItems;
+    _onSlotChange(): void;
+    private _handleItemSelect;
+    private _handleKeyDown;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nldd-tab-bar': NLDDTabBar;
+        'nldd-tab-bar-item': NLDDTabBarItem;
+    }
+}
+//# sourceMappingURL=tab-bar.d.ts.map

package/dist/components/navigation/tab-bar/tab-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AASjC,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAoB;IAG1C,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAEV,uDAAuD;IAEvD,OAAO,UAAS;IAEhB,uDAAuD;IAEvD,UAAU,UAAS;IAEnB,uDAAuD;IAEvD,aAAa,EAAE,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,CAAM;IAK3D,OAAO,CAAC,cAAc,CAA8C;IAGpE,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,IAAI,iBAAiB,IAAI,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAQrE;IAGD,YAAY,UAAS;IAErB,uDAAuD;IAEvD,WAAW,UAAS;IAEpB,gGAAgG;IAEhG,oBAAoB,UAAS;IAEpB,iBAAiB,IAAI,IAAI;IAUzB,OAAO,IAAI,IAAI;IAIf,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI5C,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKjC,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAWvB,MAAM;CAGf;AAKD,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAgB;IAGtC,OAAO,UAAS;IAGhB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,OAAO,EAAE,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,EAAE,CAAM;IAGrD,UAAU,UAAS;IAGnB,eAAe,SAAM;IAGrB,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,YAAY,IAAI,IAAI;IAOpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW/D,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IAkBlB,aAAa,IAAI,IAAI;IAIrB,OAAO,CAAC,iBAAiB,CAWvB;IAEF,OAAO,CAAC,cAAc,CA0CpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,UAAU,CAAC;QAC3B,mBAAmB,EAAE,cAAc,CAAC;KACpC;CACD"}

package/dist/components/navigation/tab-bar/tab-bar.js

@@ -0,0 +1,286 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nederlandse Digitale Dienst Tab Bar Component (Lit + TypeScript)
+ *
+ * A horizontal navigation bar with mutually exclusive tabs.
+ * Exports both NLDDTabBar and NLDDTabBarItem.
+ *
+ * @element nldd-tab-bar
+ * @attr {boolean} compact           - Shows items in compact view: icon stacked above text
+ * @attr {boolean} navigation        - Renders a nav landmark instead of tablist; use for href-based items that navigate between routes
+ * @attr {boolean} responsive        - Automatically switches to compact below 480px container width
+ * @attr {string}  accessible-label  - Accessible name for the navigation region; defaults to 'Tabs'
+ *
+ * @slot - nldd-tab-bar-item elements
+ *
+ * @fires tabchange - When a tab is selected; detail: { item: NLDDTabBarItem }
+ *
+ * ---
+ *
+ * @element nldd-tab-bar-item
+ * @attr {boolean} selected  - Selected state (managed by nldd-tab-bar)
+ * @attr {string}  text      - Tab text; also used as accessible name for icon-only items
+ * @attr {string}  href      - Optional link URL; renders an anchor instead of a button
+ *
+ * @slot icon - Icon content
+ *
+ * @fires select - When the item is activated; detail: { item: NLDDTabBarItem }
+ */
+import { LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { tabBarStyles, tabBarItemStyles } from './tab-bar.styles.js';
+import { tabBarTemplate, tabBarItemTemplate } from './tab-bar.template.js';
+import { sanitizeUrl } from '../../../utilities/sanitize-url.js';
+// # nldd-tab-bar-item
+let NLDDTabBarItem = class NLDDTabBarItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.href = '';
+        /** Set by nldd-tab-bar. Not part of the public API. */
+        this.compact = false;
+        /** Set by nldd-tab-bar. Not part of the public API. */
+        this.responsive = false;
+        /** Set by nldd-tab-bar. Not part of the public API. */
+        this._groupVariant = '';
+        // Author-set variant captured once in connectedCallback.
+        // Not a Lit property to avoid a feedback loop with the setAttribute
+        // call in updated() which writes the resolved value to the same attribute.
+        this._authorVariant = '';
+        this.text = '';
+        this.icon = '';
+        this._hasIconSlot = false;
+        /** Set by nldd-tab-bar. Not part of the public API. */
+        this._navigation = false;
+        /** Set by nldd-tab-bar. Marks this item as the keyboard entry point when no tab is selected. */
+        this._isFallbackFocusable = false;
+    }
+    get _effectiveVariant() {
+        if (this.compact)
+            return 'compact';
+        if (this._authorVariant)
+            return this._authorVariant;
+        if (this._groupVariant)
+            return this._groupVariant;
+        const hasIcon = Boolean(this.icon) || this._hasIconSlot;
+        if (this.text && hasIcon)
+            return 'icon-and-text';
+        if (this.text)
+            return 'text';
+        return 'icon';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'none');
+        // Capture author intent before updated() overwrites the attribute with the resolved value
+        const attr = this.getAttribute('variant');
+        if (attr === 'text' || attr === 'icon' || attr === 'icon-and-text') {
+            this._authorVariant = attr;
+        }
+    }
+    updated() {
+        this.setAttribute('variant', this._effectiveVariant);
+    }
+    focus(options) {
+        this.shadowRoot?.querySelector('.tab-bar__item')?.focus(options);
+    }
+    _onIconSlotChange(e) {
+        const slot = e.target;
+        this._hasIconSlot = slot.assignedElements({ flatten: true }).length > 0;
+    }
+    _handleClick(event) {
+        if (!sanitizeUrl(this.href)) {
+            event.preventDefault();
+        }
+        this.dispatchEvent(new CustomEvent('select', {
+            bubbles: true,
+            composed: true,
+            detail: { item: this },
+        }));
+    }
+    render() {
+        return tabBarItemTemplate(this);
+    }
+};
+NLDDTabBarItem.styles = tabBarItemStyles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTabBarItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTabBarItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTabBarItem.prototype, "compact", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTabBarItem.prototype, "responsive", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTabBarItem.prototype, "_groupVariant", void 0);
+__decorate([
+    property({ type: String })
+], NLDDTabBarItem.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTabBarItem.prototype, "icon", void 0);
+__decorate([
+    state()
+], NLDDTabBarItem.prototype, "_hasIconSlot", void 0);
+__decorate([
+    state()
+], NLDDTabBarItem.prototype, "_navigation", void 0);
+__decorate([
+    state()
+], NLDDTabBarItem.prototype, "_isFallbackFocusable", void 0);
+NLDDTabBarItem = __decorate([
+    customElement('nldd-tab-bar-item')
+], NLDDTabBarItem);
+export { NLDDTabBarItem };
+// # nldd-tab-bar
+let NLDDTabBar = class NLDDTabBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.compact = false;
+        this.responsive = false;
+        this.fullWidth = false;
+        this.variant = '';
+        this.navigation = false;
+        this.accessibleLabel = '';
+        // Tracks whether the author provided an explicit accessible label
+        this._hasCustomLabel = false;
+        this._handleItemSelect = (event) => {
+            event.stopPropagation();
+            const items = this._getItems();
+            items.forEach(item => {
+                item.selected = item === event.detail.item;
+            });
+            this.dispatchEvent(new CustomEvent('tabchange', {
+                bubbles: true,
+                composed: true,
+                detail: event.detail,
+            }));
+        };
+        this._handleKeyDown = (event) => {
+            const items = this._getItems();
+            if (items.length === 0)
+                return;
+            const currentIndex = items.findIndex(item => item === event.target || item.contains(event.target));
+            let newIndex = -1;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    newIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    newIndex = 0;
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    newIndex = items.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            if (newIndex >= 0 && newIndex < items.length) {
+                items[newIndex].focus();
+                // Auto-activate only for content-switching tabs, not navigation tabs
+                if (!this.navigation) {
+                    items.forEach(item => { item.selected = item === items[newIndex]; });
+                    this.dispatchEvent(new CustomEvent('tabchange', {
+                        bubbles: true,
+                        composed: true,
+                        detail: { item: items[newIndex] },
+                    }));
+                }
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('select', this._handleItemSelect);
+        this.addEventListener('keydown', this._handleKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('select', this._handleItemSelect);
+        this.removeEventListener('keydown', this._handleKeyDown);
+    }
+    firstUpdated() {
+        this._hasCustomLabel = Boolean(this.accessibleLabel);
+        import.meta.env?.DEV && !this._hasCustomLabel &&
+            console.warn('<nldd-tab-bar>: No accessible-label provided. Add an accessible-label attribute for a meaningful navigation landmark name. Falling back to "Tabs".');
+        this._syncItems();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('compact') ||
+            changedProperties.has('responsive') ||
+            changedProperties.has('variant') ||
+            changedProperties.has('navigation')) {
+            this._syncItems();
+        }
+    }
+    _getItems() {
+        const slot = this.shadowRoot?.querySelector('slot');
+        if (!slot)
+            return [];
+        return slot
+            .assignedElements()
+            .filter((el) => el.tagName.toLowerCase() === 'nldd-tab-bar-item');
+    }
+    _syncItems() {
+        const items = this._getItems();
+        items.forEach(item => {
+            item.compact = this.compact;
+            item.responsive = this.responsive;
+            item._groupVariant = this.variant;
+            item._navigation = this.navigation;
+        });
+        // Ensure keyboard entry point
+        const hasSelected = items.some(item => item.selected);
+        const firstItem = items[0] ?? null;
+        items.forEach(item => {
+            item._isFallbackFocusable = !hasSelected && item === firstItem;
+        });
+    }
+    _onSlotChange() {
+        this._syncItems();
+    }
+    render() {
+        return tabBarTemplate(this);
+    }
+};
+NLDDTabBar.styles = tabBarStyles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTabBar.prototype, "compact", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTabBar.prototype, "responsive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], NLDDTabBar.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NLDDTabBar.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NLDDTabBar.prototype, "navigation", void 0);
+__decorate([
+    property({ type: String, attribute: 'accessible-label' })
+], NLDDTabBar.prototype, "accessibleLabel", void 0);
+NLDDTabBar = __decorate([
+    customElement('nldd-tab-bar')
+], NLDDTabBar);
+export { NLDDTabBar };
+//# sourceMappingURL=tab-bar.js.map

package/dist/components/navigation/tab-bar/tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.ts"],"names":[],"mappings":"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"}

package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const tabBarStyles: import("lit").CSSResult;
+export declare const tabBarItemStyles: import("lit").CSSResult;
+//# sourceMappingURL=tab-bar.styles.d.ts.map

package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBAqDxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBAuK5B,CAAC"}

package/dist/components/navigation/tab-bar/tab-bar.styles.js

@@ -0,0 +1,226 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const smMax = unsafeCSS(breakpoints.smMax);
+export const tabBarStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-block;
+		position: relative;
+		isolation: isolate;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([full-width]) {
+		display: block;
+		width: 100%;
+	}
+
+
+	/* # Block */
+
+	.tab-bar {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.tab-bar__items {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		border-radius: var(--semantics-controls-md-corner-radius);
+		padding: 0 var(--primitives-space-2);
+	}
+
+	:host([compact]) .tab-bar__items {
+		border-radius: var(--semantics-controls-lg-corner-radius);
+	}
+
+
+	/* # Focus */
+
+	::slotted(nldd-tab-bar-item:focus-within) {
+		position: relative;
+		z-index: 1;
+	}
+
+`;
+export const tabBarItemStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: inline-block;
+		position: relative;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Item */
+
+	.tab-bar__item {
+		appearance: none;
+		border: none;
+		margin: 0;
+		padding: 0;
+		background: none;
+		text-decoration: none;
+		box-sizing: border-box;
+		display: flex;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		font: var(--semantics-buttons-md-font);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
+	}
+
+	:host([variant='icon-and-text']) .tab-bar__item {
+		flex-direction: row;
+		gap: var(--semantics-buttons-md-gap);
+		padding: var(--primitives-space-8) var(--primitives-space-12);
+		height: var(--semantics-controls-md-min-size);
+	}
+
+	:host([variant='text']) .tab-bar__item {
+		flex-direction: row;
+		padding: var(--primitives-space-8) var(--primitives-space-12);
+		height: var(--semantics-controls-md-min-size);
+	}
+
+	:host([variant='icon']) .tab-bar__item {
+		flex-direction: row;
+		padding: var(--primitives-space-8);
+		height: var(--semantics-controls-md-min-size);
+	}
+
+	:host([variant='compact']) .tab-bar__item {
+		flex-direction: column;
+		padding: var(--primitives-space-8);
+		height: var(--semantics-controls-lg-min-size);
+	}
+
+	:host([responsive]) .tab-bar__item {
+		@media (max-width: ${smMax}) {
+			flex-direction: column;
+			gap: 0;
+			padding: var(--primitives-space-8);
+			height: var(--semantics-controls-lg-min-size);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			flex-direction: column;
+			gap: 0;
+			padding: var(--primitives-space-8);
+			height: var(--semantics-controls-lg-min-size);
+		}
+	}
+
+	:host([selected]) .tab-bar__item {
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+	}
+
+	.tab-bar__item:focus-visible {
+		outline: none;
+	}
+
+
+	/* # Indicator */
+
+	.tab-bar__item::before {
+		content: '';
+		position: absolute;
+		inset: var(--primitives-space-4) var(--primitives-space-2);
+		border-radius: var(--primitives-corner-radius-sm);
+		background-color: transparent;
+		z-index: 0;
+		pointer-events: none;
+	}
+
+	.tab-bar__item:hover::before {
+		background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+	}
+
+	:host([selected]) .tab-bar__item::before {
+		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+
+		@media (forced-colors: active) {
+			background-color: Highlight;
+		}
+	}
+
+
+	/* # Focus */
+
+	.tab-bar__item:focus-visible::before {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+
+	/* # Icon */
+
+	.tab-bar__item-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		z-index: 1;
+		flex-shrink: 0;
+		width: var(--primitives-space-24);
+		height: var(--primitives-space-24);
+	}
+
+	:host([variant='text']) .tab-bar__item-icon {
+		display: none;
+	}
+
+	::slotted([slot='icon']) {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+
+	/* # Label */
+
+	.tab-bar__item-text {
+		position: relative;
+		z-index: 1;
+	}
+
+	:host([variant='compact']) .tab-bar__item-text {
+		font: var(--primitives-font-body-xxs-bold-flat);
+	}
+
+	:host([variant='icon']) .tab-bar__item-text {
+		display: none;
+	}
+
+	:host([responsive]) .tab-bar__item-text {
+		@media (max-width: ${smMax}) {
+			font: var(--primitives-font-body-xxs-bold-flat);
+		}
+
+		@container layout-area (max-width: ${smMax}) {
+			font: var(--primitives-font-body-xxs-bold-flat);
+		}
+	}
+
+`;
+//# sourceMappingURL=tab-bar.styles.js.map

package/dist/components/navigation/tab-bar/tab-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4DZ,KAAK;;;;;;;uCAOW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2FrB,KAAK;;;;uCAIW,KAAK;;;;;CAK3C,CAAC"}

package/dist/components/navigation/tab-bar/tab-bar.template.d.ts

@@ -0,0 +1,7 @@
+import { TemplateResult } from 'lit';
+import type { NLDDTabBar, NLDDTabBarItem } from './tab-bar.js';
+import '../../content/tooltip/tooltip.js';
+import '../../content/icon/icon.js';
+export declare function tabBarTemplate(component: NLDDTabBar): TemplateResult;
+export declare function tabBarItemTemplate(component: NLDDTabBarItem): TemplateResult;
+//# sourceMappingURL=tab-bar.template.d.ts.map

package/dist/components/navigation/tab-bar/tab-bar.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AAGpC,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CA0BpE;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAkD5E"}