@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/ds-steps.entry.js

@@ -0,0 +1,225 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
+import { O as OneOf } from './one-of-CKPv0Nqm.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import './create-validator-decorator-DovxquEu.js';
+
+const STEPS_COLORS = ['', 'purple', 'green', 'red', 'yellow'];
+
+const stepsHostCss = () => `:host{--_steps-connector-color:var(--steps-connector-color, var(--mod-steps-connector-color, var(--ds-steps-connector-color)));--_steps-connector-color-filled:var(--steps-connector-color-filled, var(--mod-steps-connector-color-filled, var(--ds-steps-connector-color-filled)));--_steps-connector-height:var(--steps-connector-height, var(--mod-steps-connector-height, var(--ds-steps-connector-height)));--_steps-circle-size:var(--steps-circle-size, var(--mod-steps-circle-size, var(--ds-steps-circle-size)));--_steps-circle-size-sm:var(--steps-circle-size-sm, var(--mod-steps-circle-size-sm, var(--ds-steps-circle-size-sm)));--_steps-circle-color-bg:var(--steps-circle-color-bg, var(--mod-steps-circle-color-bg, var(--ds-steps-circle-color-bg)));--_steps-circle-color-bg-selected:var(--steps-circle-color-bg-selected, var(--mod-steps-circle-color-bg-selected, var(--ds-steps-circle-color-bg-selected)));--_steps-circle-color-bg-done:var(--steps-circle-color-bg-done, var(--mod-steps-circle-color-bg-done, var(--ds-steps-circle-color-bg-done)));--_steps-circle-color-bg-invalid:var(--steps-circle-color-bg-invalid, var(--mod-steps-circle-color-bg-invalid, var(--ds-steps-circle-color-bg-invalid)));--_steps-circle-color-bg-disabled:var(--steps-circle-color-bg-disabled, var(--mod-steps-circle-color-bg-disabled, var(--ds-steps-circle-color-bg-disabled)));--_steps-circle-color-text:var(--steps-circle-color-text, var(--mod-steps-circle-color-text, var(--ds-steps-circle-color-text)));--_steps-circle-color-text-selected:var(--steps-circle-color-text-selected, var(--mod-steps-circle-color-text-selected, var(--ds-steps-circle-color-text-selected)));--_steps-circle-color-text-done:var(--steps-circle-color-text-done, var(--mod-steps-circle-color-text-done, var(--ds-steps-circle-color-text-done)));--_steps-circle-color-text-invalid:var(--steps-circle-color-text-invalid, var(--mod-steps-circle-color-text-invalid, var(--ds-steps-circle-color-text-invalid)));--_steps-circle-color-text-disabled:var(--steps-circle-color-text-disabled, var(--mod-steps-circle-color-text-disabled, var(--ds-steps-circle-color-text-disabled)));--_steps-step-font-family:var(--steps-step-font-family, var(--mod-steps-step-font-family, var(--ds-steps-step-font-family)));--_steps-step-font-size:var(--steps-step-font-size, var(--mod-steps-step-font-size, var(--ds-steps-step-font-size)));--_steps-step-font-size-sm:var(--steps-step-font-size-sm, var(--mod-steps-step-font-size-sm, var(--ds-steps-step-font-size-sm)));--_steps-step-font-weight:var(--steps-step-font-weight, var(--mod-steps-step-font-weight, var(--ds-steps-step-font-weight)));--_steps-step-color:var(--steps-step-color, var(--mod-steps-step-color, var(--ds-steps-step-color-base)));--_steps-step-color-selected:var(--steps-step-color-selected, var(--mod-steps-step-color-selected, var(--ds-steps-step-color-selected)));--_steps-step-color-focus:var(--steps-step-color-focus, var(--mod-steps-step-color-focus, var(--ds-steps-step-color-focus)));--_steps-panel-padding:var(--steps-panel-padding, var(--mod-steps-panel-padding, var(--ds-steps-panel-padding)));--_steps-color-purple:var(--steps-color-purple, var(--mod-steps-color-purple, var(--ds-steps-color-purple)));--_steps-color-green:var(--steps-color-green, var(--mod-steps-color-green, var(--ds-steps-color-green)));--_steps-color-red:var(--steps-color-red, var(--mod-steps-color-red, var(--ds-steps-color-red)));--_steps-color-yellow:var(--steps-color-yellow, var(--mod-steps-color-yellow, var(--ds-steps-color-yellow)));display:block}:host(.is-purple){--_steps-connector-color:var(--_steps-color-purple);--_steps-circle-color-bg:var(--_steps-color-purple);--_steps-circle-color-bg-disabled:var(--_steps-color-purple)}:host(.is-green){--_steps-connector-color:var(--_steps-color-green);--_steps-circle-color-bg:var(--_steps-color-green);--_steps-circle-color-bg-disabled:var(--_steps-color-green)}:host(.is-red){--_steps-connector-color:var(--_steps-color-red);--_steps-circle-color-bg:var(--_steps-color-red);--_steps-circle-color-bg-disabled:var(--_steps-color-red)}:host(.is-yellow){--_steps-connector-color:var(--_steps-color-yellow);--_steps-circle-color-bg:var(--_steps-color-yellow);--_steps-circle-color-bg-disabled:var(--_steps-color-yellow)}:host #steplist{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;width:100%}:host(.is-navigation) nav,:host(.is-navigation) ol{display:contents}:host ::slotted(ds-step-panel){--step-panel-padding:var(--_steps-panel-padding)}:host(.is-vertical) #steplist{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;position:relative}:host(.is-vertical) #steplist::before{content:"";position:absolute;left:calc(var(--_steps-circle-size)/2);-webkit-transform:translateX(-50%);transform:translateX(-50%);top:calc(var(--_steps-circle-size)/2);bottom:calc(var(--_steps-circle-size)/2);width:var(--_steps-connector-height);background-color:var(--_steps-connector-color);z-index:0}@media screen and (max-width: 768px){:host(.is-vertical) #steplist::before{left:calc(var(--_steps-circle-size-sm)/2);top:calc(var(--_steps-circle-size-sm)/2);bottom:calc(var(--_steps-circle-size-sm)/2)}}`;
+
+const Steps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsChange = createEvent(this, "dsChange");
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Accent color applied to inactive circles and connector lines.
+         */
+        this.color = '';
+        /**
+         * Accessible label for the navigation landmark (navigation variant only).
+         */
+        this.label = '';
+        /**
+         * If `true`, the steplist is displayed vertically.
+         */
+        this.vertical = false;
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d;
+            if (this.isNavigation())
+                return;
+            const focusable = this.getSteps().filter(s => !s.disabled && !s.hidden);
+            const currentIndex = focusable.findIndex(s => s.name === this.value);
+            const isForward = this.vertical ? ev.key === 'ArrowDown' : ev.key === 'ArrowRight';
+            const isBackward = this.vertical ? ev.key === 'ArrowUp' : ev.key === 'ArrowLeft';
+            if (ev.key === 'Home') {
+                ev.preventDefault();
+                this.activateStep((_a = focusable[0]) === null || _a === void 0 ? void 0 : _a.name);
+            }
+            else if (ev.key === 'End') {
+                ev.preventDefault();
+                this.activateStep((_b = focusable[focusable.length - 1]) === null || _b === void 0 ? void 0 : _b.name);
+            }
+            else if (isForward) {
+                ev.preventDefault();
+                this.activateStep((_c = focusable[(currentIndex + 1) % focusable.length]) === null || _c === void 0 ? void 0 : _c.name);
+            }
+            else if (isBackward) {
+                ev.preventDefault();
+                this.activateStep((_d = focusable[(currentIndex - 1 + focusable.length) % focusable.length]) === null || _d === void 0 ? void 0 : _d.name);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.setup();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    componentDidLoad() {
+        this.setup();
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsStepSelect(ev) {
+        stopEventBubbling(ev);
+        this.activateStep(ev.detail.name);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    getSteps() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-step'));
+    }
+    getPanels() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-step-panel'));
+    }
+    isNavigation() {
+        return this.getPanels().length === 0;
+    }
+    setup() {
+        const steps = this.getSteps();
+        const panels = this.getPanels();
+        const isNav = this.isNavigation();
+        let visibleIndex = 0;
+        steps.forEach(step => {
+            step.slot = 'step';
+            step.navigation = isNav;
+            step.vertical = this.vertical;
+            if (!step.hidden) {
+                visibleIndex++;
+                step.index = visibleIndex;
+            }
+            else {
+                step.index = 0;
+            }
+            if (!isNav && step.name) {
+                if (!step.id)
+                    step.id = `ds-step-${stepIds++}`;
+                const panel = panels.find(p => p.for === step.name);
+                if (panel) {
+                    if (!panel.id)
+                        panel.id = `ds-step-panel-${stepIds++}`;
+                    step.setAttribute('aria-controls', panel.id);
+                    panel.setAttribute('aria-labelledby', step.id);
+                }
+            }
+        });
+        if (!isNav && !this.value) {
+            const first = steps.find((s) => !s.hidden && !s.disabled);
+            if (first)
+                this.value = first.name;
+        }
+        this.updateChildren();
+    }
+    updateChildren() {
+        const isNav = this.isNavigation();
+        const steps = this.getSteps();
+        const panels = this.getPanels();
+        let effectiveValue = this.value;
+        // If the selected value is disabled, don't select any step
+        if (!isNav && effectiveValue) {
+            const selectedStep = steps.find((s) => s.name === effectiveValue);
+            if (selectedStep && (selectedStep.disabled || selectedStep.hasAttribute('disabled'))) {
+                effectiveValue = undefined;
+            }
+        }
+        const activeStep = steps.find(s => s.name === effectiveValue);
+        const activeIndex = activeStep ? activeStep.index : 0;
+        steps.forEach(step => {
+            step.navigation = isNav;
+            step.vertical = this.vertical;
+            step.selected = isNav ? !!step.querySelector('[aria-current]') : step.name === effectiveValue;
+            step.activeIndex = activeIndex;
+        });
+        panels.forEach(panel => {
+            panel.selected = panel.for === effectiveValue;
+        });
+    }
+    activateStep(name) {
+        if (name === this.value)
+            return;
+        const step = this.getSteps().find(s => s.name === name);
+        if (step === null || step === void 0 ? void 0 : step.disabled)
+            return;
+        this.value = name;
+        this.dsChange.emit({ value: name });
+        this.focusSelectedStep();
+    }
+    focusSelectedStep() {
+        const selected = this.getSteps().find(s => s.name === this.value);
+        selected === null || selected === void 0 ? void 0 : selected.focus();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const isNav = this.isNavigation();
+        const hostClass = {
+            'is-vertical': this.vertical,
+            'is-navigation': isNav,
+            'is-purple': this.color === 'purple',
+            'is-green': this.color === 'green',
+            'is-red': this.color === 'red',
+            'is-yellow': this.color === 'yellow',
+        };
+        const slotRef = (el) => {
+            if (el)
+                this.steplistEl = el;
+        };
+        if (isNav) {
+            return (h(Host, { class: hostClass }, h("nav", { "aria-label": this.label || undefined }, h("ol", { id: "steplist", part: "steplist", ref: slotRef }, h("slot", { name: "step", onSlotchange: this.handleSlotChange }))), h("slot", { onSlotchange: this.handleSlotChange })));
+        }
+        return (h(Host, { class: hostClass }, h("div", { id: "steplist", part: "steplist", role: "tablist", "aria-orientation": this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: slotRef }, h("slot", { name: "step", onSlotchange: this.handleSlotChange })), h("slot", { onSlotchange: this.handleSlotChange })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('steps'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Steps.prototype, "createLogger", null);
+__decorate([
+    OneOf(STEPS_COLORS),
+    __metadata("design:type", String)
+], Steps.prototype, "color", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Steps.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Steps.prototype, "value", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Steps.prototype, "vertical", void 0);
+let stepIds = 0;
+Steps.style = stepsHostCss();
+
+export { Steps as ds_steps };

package/dist/esm/ds-tab-panel.entry.js

@@ -0,0 +1,53 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { R as Required } from './required-Dqsbx5fH.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import './create-validator-decorator-DovxquEu.js';
+
+const tabPanelHostCss = () => `:host{--_tab-panel-padding:var(--tab-panel-padding, var(--mod-tab-panel-padding, var(--ds-tab-panel-padding)));display:none}:host(.is-selected){display:block;padding:var(--_tab-panel-padding)}`;
+
+const TabPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * If `true`, the panel is visible. Managed by the parent ds-tabs.
+         */
+        this.selected = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: 'ea4a246545d0c21beaae274d7b5cbb16d8ddb85d', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '05489a1a0f725057ca6abf569222a242a60e16cf' })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('tab-panel'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], TabPanel.prototype, "createLogger", null);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], TabPanel.prototype, "for", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], TabPanel.prototype, "selected", void 0);
+TabPanel.style = tabPanelHostCss();
+
+export { TabPanel as ds_tab_panel };

package/dist/esm/ds-tab.entry.js

@@ -0,0 +1,118 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import { R as Required } from './required-Dqsbx5fH.js';
+import './create-validator-decorator-DovxquEu.js';
+
+const tabHostCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;outline:none}span,a{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-ms-flex:1;flex:1;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;gap:.5rem;padding:var(--_tabs-tab-padding);background:none;border:none;cursor:pointer;text-decoration:none;color:var(--_tabs-tab-color);font-family:var(--_tabs-tab-font-family);font-size:var(--_tabs-tab-font-size);font-weight:var(--_tabs-tab-font-weight);outline:none;white-space:nowrap;-webkit-transition:color 120ms ease;transition:color 120ms ease}span::after,a::after{content:"";position:absolute;bottom:calc(-1*var(--_tabs-indicator-height));left:0;right:0;height:2px;border-radius:9999px;background-color:rgba(0,0,0,0);-webkit-transition:background-color 120ms ease;transition:background-color 120ms ease}@media (hover: hover)and (pointer: fine){span:hover,a:hover{color:var(--_tabs-tab-color-hover)}span:hover::after,a:hover::after{background-color:var(--_tabs-tab-indicator-color-idle)}}span:active,a:active{color:var(--_tabs-tab-color-active)}span:active::after,a:active::after{background-color:var(--_tabs-tab-indicator-color-idle)}:host(:focus-visible:not(:active)){border-radius:var(--_tabs-tab-radius)}@media (hover: hover)and (pointer: fine){:host(:focus-visible:not(:active)){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_tabs-tab-color-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_tabs-tab-color-focus) 0 0 0 5px !important}}span.is-selected,a.is-selected{color:var(--_tabs-tab-color-selected);font-weight:var(--_tabs-tab-font-weight-selected)}span ::slotted(ds-badge.is-sm),a ::slotted(ds-badge.is-sm){position:absolute;top:calc(var(--_tabs-tab-badge-size));right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}span ::slotted(ds-icon.is-filled:not(.is-auto)),a ::slotted(ds-icon.is-filled:not(.is-auto)){--mod-icon-color:currentColor}:host(.is-fullwidth) span{width:100%;-ms-flex-pack:center;justify-content:center}:host(.is-vertical) span,:host(.is-vertical) a{white-space:normal;-ms-flex-pack:start;justify-content:flex-start;text-align:left}:host(.is-vertical) span::after,:host(.is-vertical) a::after{top:0;bottom:0;left:calc(-1*var(--_tabs-indicator-height));right:auto;width:var(--_tabs-indicator-height);height:auto}:host(.is-inverted) span.is-selected,:host(.is-inverted) a.is-selected{font-family:var(--ds-alias-text-family-heading);font-weight:var(--_tabs-tab-font-weight-selected)}:host(.is-navigation){position:relative;display:-ms-inline-flexbox;display:inline-flex}:host(.is-navigation)::after{content:"";position:absolute;bottom:calc(-1*var(--_tabs-indicator-height));left:0;right:0;height:2px;border-radius:9999px;background-color:rgba(0,0,0,0);-webkit-transition:background-color 120ms ease;transition:background-color 120ms ease}:host(.is-navigation.is-selected)::after{background-color:var(--_tabs-tab-border-color-selected)}:host(.is-navigation) ::slotted(a){display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;gap:.5rem;padding:var(--_tabs-tab-padding);color:var(--_tabs-tab-color);font-family:var(--_tabs-tab-font-family);font-size:var(--_tabs-tab-font-size);font-weight:var(--_tabs-tab-font-weight);text-decoration:none;white-space:nowrap;-webkit-transition:color 120ms ease;transition:color 120ms ease;--mod-icon-color:currentColor}:host(.is-navigation) ::slotted(a:focus-visible:not(:active)){border-radius:var(--_tabs-tab-radius)}@media (hover: hover)and (pointer: fine){:host(.is-navigation) ::slotted(a:focus-visible:not(:active)){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_tabs-tab-color-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_tabs-tab-color-focus) 0 0 0 5px !important}}:host(.is-navigation.is-selected) ::slotted(a),:host(.is-navigation) ::slotted([aria-current]){color:var(--_tabs-tab-color-selected);font-weight:var(--_tabs-tab-font-weight-selected)}:host(.is-navigation.is-inverted.is-selected) ::slotted(a),:host(.is-navigation.is-inverted) ::slotted([aria-current]){font-family:var(--ds-alias-text-family-heading);font-weight:var(--_tabs-tab-font-weight-selected)}:host(.is-navigation.is-vertical)::after{top:0;bottom:0;left:calc(-1*var(--_tabs-indicator-height));right:auto;width:2px;height:auto}`;
+
+const Tab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsTabSelect = createEvent(this, "dsTabSelect");
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Set by ds-tabs. When true, the tab expands to fill available width.
+         * @internal
+         */
+        this.fullwidth = false;
+        /**
+         * Set by ds-tabs. When true, the tab renders in inverted (dark background) mode.
+         * @internal
+         */
+        this.inverted = false;
+        /**
+         * Set by ds-tabs. When true, renders as a slot wrapper for navigation mode.
+         * @internal
+         */
+        this.navigation = false;
+        /**
+         * If `true`, this tab is currently selected. Set by the parent ds-tabs.
+         */
+        this.selected = false;
+        /**
+         * Set by ds-tabs. When true, renders in vertical layout.
+         * @internal
+         */
+        this.vertical = false;
+        /**
+         * PROPERTY VALIDATION
+         * ------------------------------------------------------
+         */
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleClick = (ev) => {
+            ev.preventDefault();
+            this.dsTabSelect.emit({ name: this.name });
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                this.dsTabSelect.emit({ name: this.name });
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const hostClass = {
+            'is-selected': this.selected,
+            'is-fullwidth': this.fullwidth,
+            'is-inverted': this.inverted,
+            'is-navigation': this.navigation,
+            'is-vertical': this.vertical,
+        };
+        if (this.navigation) {
+            return (h(Host, { role: "none", class: hostClass }, h("slot", null)));
+        }
+        return (h(Host, { role: "tab", class: hostClass, "aria-selected": String(this.selected), tabIndex: this.selected ? 0 : -1, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { class: { 'is-selected': this.selected } }, h("slot", null))));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('tab'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tab.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "fullwidth", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "inverted", void 0);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], Tab.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "navigation", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "selected", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "vertical", void 0);
+Tab.style = tabHostCss();
+
+export { Tab as ds_tab };