@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0

package/dist/components/ds-spinner.js

@@ -1,6 +1 @@
-import { D as DsSpinner$1, d as defineCustomElement$1 } from './p-Dq55XDgV.js';
-
-const DsSpinner = DsSpinner$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsSpinner, defineCustomElement };
+import{D as o,d as s}from"./p-B9VvQC9G.js";const p=o,r=s;export{p as DsSpinner,r as defineCustomElement}

package/dist/components/ds-store.js

@@ -1,57 +1 @@
-import { p as proxyCustomElement, H, c as createEvent } from './p-GalXVdFP.js';
-import { d as defaultLanguage, i as initialize, s as setLanguage, g as getLanguage } from './p-B71giUZh.js';
-
-const DsStore$1 = proxyCustomElement(class DsStore extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsLanguageChange = createEvent(this, "dsLanguageChange");
-    }
-    dsLanguage = defaultLanguage;
-    dsLanguageChange;
-    componentWillLoad() {
-        initialize({
-            language: this.dsLanguage,
-        });
-    }
-    dsLanguageObserver(newLanguage) {
-        setLanguage(newLanguage);
-        this.dsLanguageChange.emit(newLanguage);
-    }
-    async setLanguage(language) {
-        this.dsLanguage = language;
-        setLanguage(language);
-    }
-    async getLanguage() {
-        return getLanguage();
-    }
-    static get watchers() { return {
-        "dsLanguage": ["dsLanguageObserver"]
-    }; }
-}, [0, "ds-store", {
-        "dsLanguage": [1537, "ds-language"],
-        "setLanguage": [64],
-        "getLanguage": [64]
-    }, undefined, {
-        "dsLanguage": ["dsLanguageObserver"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-store"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-store":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsStore$1);
-            }
-            break;
-    } });
-}
-
-const DsStore = DsStore$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsStore, defineCustomElement };
+import{p as s,H as e,c as a,t}from"./p-D7drWwKe.js";import{d as g,i as n,s as u,g as r}from"./p-J7Ct1MQ0.js";const d=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.dsLanguageChange=a(this,"dsLanguageChange",7)}dsLanguage=g;dsLanguageChange;componentWillLoad(){n({language:this.dsLanguage})}dsLanguageObserver(s){u(s),this.dsLanguageChange.emit(s)}async setLanguage(s){this.dsLanguage=s,u(s)}async getLanguage(){return r()}static get watchers(){return{dsLanguage:[{dsLanguageObserver:0}]}}},[512,"ds-store",{dsLanguage:[1537,"ds-language"],setLanguage:[64],getLanguage:[64]},void 0,{dsLanguage:[{dsLanguageObserver:0}]}]),o=d,c=function(){"undefined"!=typeof customElements&&["ds-store"].forEach((s=>{"ds-store"===s&&(customElements.get(t(s))||customElements.define(t(s),d))}))};export{o as DsStore,c as defineCustomElement}

package/dist/components/ds-tab.js

@@ -1,6 +1 @@
-import { D as DsTab$1, d as defineCustomElement$1 } from './p-C3xcmSbZ.js';
-
-const DsTab = DsTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsTab, defineCustomElement };
+import{D as o,d as s}from"./p-F5R4uB0e.js";const p=o,r=s;export{p as DsTab,r as defineCustomElement}

package/dist/components/ds-tablist.js

@@ -1,219 +1 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { t as transformTagName, e as throttle, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { t as tabsFactory } from './p-D1DYiRu4.js';
-import { d as defineCustomElement$6 } from './p-CBTcmEBq.js';
-import { d as defineCustomElement$5 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$4 } from './p-Dq55XDgV.js';
-import { d as defineCustomElement$3 } from './p-C3xcmSbZ.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsTablistCss = ".ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__oSBnIJ.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist:focus,.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable--container.sc-ds-tablist{background:linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__scrollable--line.sc-ds-tablist{background:linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--backward.sc-ds-tablist{left:0}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--forward.sc-ds-tablist{right:0}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--container.ds-tablist__oSBnIJ__button--backward.sc-ds-tablist::after{content:\"\";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button--container.ds-tablist__oSBnIJ__button--forward.sc-ds-tablist::after{content:\"\";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button[hidden].sc-ds-tablist{display:none}.ds-tablist__oSBnIJ.sc-ds-tablist .ds-tablist__oSBnIJ__button__ds-button.sc-ds-tablist{width:100%;height:100%}";
-
-const DsTablist$1 = proxyCustomElement(class DsTablist extends Mixin(tabsFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsTabChange = createEvent(this, "dsTabChange");
-    }
-    get el() { return this; }
-    RESIZE_THROTTLE_TIMEOUT = 100;
-    scrollableElement;
-    backwardButtonElement;
-    forwardButtonElement;
-    dsTabChange;
-    dsAriaLabel;
-    dsAriaLabelledby;
-    showBackwardButton = false;
-    showForwardButton = false;
-    get DsTab() {
-        return transformTagName('ds-tab', 'ds-tablist', this.el);
-    }
-    get DsButton() {
-        return transformTagName('ds-button', 'ds-tablist', this.el);
-    }
-    setButtonsVisibility = (target) => {
-        if (!target)
-            return;
-        const { scrollLeft, scrollWidth, clientWidth } = target;
-        this.showBackwardButton = scrollLeft > 0;
-        this.showForwardButton = Math.round(scrollLeft + clientWidth) < scrollWidth;
-    };
-    throttledSetButtonsVisibility = throttle(this.setButtonsVisibility, this.RESIZE_THROTTLE_TIMEOUT);
-    async tabConnected() {
-        this.setButtonsVisibility(this.scrollableElement);
-    }
-    async tabDisconnected() {
-        this.setButtonsVisibility(this.scrollableElement);
-    }
-    handleResize() {
-        this.throttledSetButtonsVisibility(this.scrollableElement);
-    }
-    handleTabClick(event) {
-        event.stopPropagation();
-        if (event.detail.tabId === this.context?.currentTab)
-            return;
-        this.dsTabChange.emit(event.detail);
-    }
-    scrollTabIntoView = (tab) => {
-        if (!this.scrollableElement)
-            return;
-        const tabNode = tab.querySelector('[role="tab"]');
-        if (!tabNode)
-            return;
-        const leftCover = this.backwardButtonElement && !this.backwardButtonElement.hidden ? this.backwardButtonElement.offsetWidth : 0;
-        const rightCover = this.forwardButtonElement && !this.forwardButtonElement.hidden ? this.forwardButtonElement.offsetWidth : 0;
-        const { left, right } = this.scrollableElement.getBoundingClientRect();
-        const { left: tabLeft, right: tabRight } = tabNode.getBoundingClientRect();
-        const visibilityBuffer = 16;
-        let next = this.scrollableElement.scrollLeft;
-        if (tabLeft < left + leftCover + visibilityBuffer) {
-            next -= left + leftCover + visibilityBuffer - tabLeft;
-        }
-        else if (tabRight > right - rightCover - visibilityBuffer) {
-            next += tabRight - (right - rightCover - visibilityBuffer);
-        }
-        const max = this.scrollableElement.scrollWidth - this.scrollableElement.clientWidth;
-        this.scrollableElement.scrollTo({ left: Math.max(0, Math.min(next, max)), behavior: 'auto' });
-    };
-    handleTabFocus(event) {
-        event.stopPropagation();
-        this.scrollTabIntoView(event.target);
-    }
-    handleKeyDown = (event) => {
-        event.stopPropagation();
-        const activeTab = event.target.closest(this.DsTab);
-        const tabs = Array.from(this.el.querySelectorAll(this.DsTab));
-        const activeTabIndex = tabs.indexOf(activeTab);
-        if (activeTabIndex === -1)
-            return;
-        let nextIndex = 0;
-        switch (event.key) {
-            case 'Enter':
-            case ' ': {
-                if (this.context?.currentTab === tabs[activeTabIndex].dsId)
-                    return;
-                this.dsTabChange.emit({ tabId: tabs[activeTabIndex].dsId, tabPanelId: tabs[activeTabIndex].dsTabPanelId });
-                return;
-            }
-            case 'ArrowRight': {
-                nextIndex = (activeTabIndex + 1) % tabs.length;
-                break;
-            }
-            case 'ArrowLeft': {
-                nextIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
-                break;
-            }
-            case 'Home': {
-                nextIndex = 0;
-                break;
-            }
-            case 'End': {
-                nextIndex = tabs.length - 1;
-                break;
-            }
-            default:
-                return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        tabs[nextIndex].setFocus();
-    };
-    handleScroll = (event) => {
-        const target = event.target;
-        this.setButtonsVisibility(target);
-    };
-    handleButtonClick = (direction) => {
-        if (!this.scrollableElement)
-            return;
-        const scrollAmount = this.scrollableElement.clientWidth * 0.8;
-        const left = direction === 'backward' ? this.scrollableElement.scrollLeft - scrollAmount : this.scrollableElement.scrollLeft + scrollAmount;
-        this.scrollableElement.scrollTo({ left, behavior: 'smooth' });
-    };
-    connectedCallback() {
-        this.el.addEventListener('keydown', this.handleKeyDown);
-    }
-    componentDidLoad() {
-        this.setButtonsVisibility(this.scrollableElement);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.el.removeEventListener('keydown', this.handleKeyDown);
-    }
-    renderButton = (direction) => {
-        const baseClass = cx('ds-tablist');
-        const iconName = direction === 'backward' ? 'chevron_backward' : 'chevron_forward';
-        return (h(this.DsButton, { class: `${baseClass}__button__ds-button`, onClick: () => this.handleButtonClick(direction), dsAriaHidden: true, dsTabIndex: -1, dsVariant: "supplementary", dsColour: "black", dsIcon: iconName }));
-    };
-    render() {
-        const baseClass = cx('ds-tablist');
-        const scrollableClass = `${baseClass}__scrollable`;
-        const buttonClass = `${baseClass}__button`;
-        return (h("div", { key: '4b8dd6949171369541110b01c52acd043981d4a9', class: baseClass }, h("div", { key: '3327ec21ece39c85a83990dc25b717ed7c528f3e', ref: el => (this.scrollableElement = el), class: classNames(scrollableClass, {
-                [`${scrollableClass}--container`]: this.context?.variant === 'container',
-                [`${scrollableClass}--line`]: this.context?.variant === 'line',
-            }), role: "tablist", ...ifDefined('aria-label', this.dsAriaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), onScroll: this.handleScroll }, h("slot", { key: 'a762574f9666d851041e085f16a0b7e0cd1371eb' })), h("div", { key: 'bfbd4760e1276d7db4fc5dd7707321dc4ea53870', ref: el => (this.backwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--backward`, {
-                [`${buttonClass}--container`]: this.context?.variant === 'container',
-                [`${buttonClass}--line`]: this.context?.variant === 'line',
-            }), "aria-hidden": "true", hidden: !this.showBackwardButton }, this.renderButton('backward')), h("div", { key: '3f435da4ecb5bf45ebebac651b0419a62f3fb5be', ref: el => (this.forwardButtonElement = el), class: classNames(buttonClass, `${buttonClass}--forward`, {
-                [`${buttonClass}--container`]: this.context?.variant === 'container',
-                [`${buttonClass}--line`]: this.context?.variant === 'line',
-            }), "aria-hidden": "true", hidden: !this.showForwardButton }, this.renderButton('forward'))));
-    }
-    static get style() { return dsTablistCss; }
-}, [262, "ds-tablist", {
-        "dsAriaLabel": [1, "ds-aria-label"],
-        "dsAriaLabelledby": [1, "ds-aria-labelledby"],
-        "context": [32],
-        "showBackwardButton": [32],
-        "showForwardButton": [32],
-        "tabConnected": [64],
-        "tabDisconnected": [64]
-    }, [[9, "resize", "handleResize"], [0, "dsTabClick", "handleTabClick"], [0, "dsTabFocus", "handleTabFocus"]]]);
-declareComponentDependencies([h("ds-tab", { dsId: "", dsTabPanelId: "" }), h("ds-button", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-tablist", "ds-button", "ds-icon", "ds-spinner", "ds-tab", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-tablist":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsTablist$1);
-            }
-            break;
-        case "ds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ds-tab":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsTablist = DsTablist$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsTablist, defineCustomElement };
+import{p as t,M as s,c as a,h as e,t as i}from"./p-D7drWwKe.js";import{c as r}from"./p-BfTCfPZ1.js";import{c as d}from"./p-DgTb4Jpc.js";import{t as o,e as l,a as n,d as b}from"./p-J5Ghj1_T.js";import{t as c}from"./p-t2gGbeQx.js";import{d as h}from"./p-Dib6BujO.js";import{d as _}from"./p-BRKwvv98.js";import{d as u}from"./p-B9VvQC9G.js";import{d as f}from"./p-F5R4uB0e.js";import{d as p}from"./p-tTA4zhDH.js";const v=t(class extends(s(c)){constructor(t){super(!1),!1!==t&&this.__registerHost(),this.dsTabChange=a(this,"dsTabChange",7)}get el(){return this}RESIZE_THROTTLE_TIMEOUT=100;scrollableElement;backwardButtonElement;forwardButtonElement;dsTabChange;dsAriaLabel;dsAriaLabelledby;showBackwardButton=!1;showForwardButton=!1;get DsTab(){return o("ds-tab","ds-tablist",this.el)}get DsButton(){return o("ds-button","ds-tablist",this.el)}setButtonsVisibility=t=>{if(!t)return;const{scrollLeft:s,scrollWidth:a,clientWidth:e}=t;this.showBackwardButton=s>0,this.showForwardButton=Math.round(s+e)<a};throttledSetButtonsVisibility=l(this.setButtonsVisibility,this.RESIZE_THROTTLE_TIMEOUT);async tabConnected(){this.setButtonsVisibility(this.scrollableElement)}async tabDisconnected(){this.setButtonsVisibility(this.scrollableElement)}handleResize(){this.throttledSetButtonsVisibility(this.scrollableElement)}handleTabClick(t){t.stopPropagation(),t.detail.tabId!==this.context?.currentTab&&this.dsTabChange.emit(t.detail)}scrollTabIntoView=t=>{if(!this.scrollableElement)return;const s=t.querySelector('[role="tab"]');if(!s)return;const a=this.backwardButtonElement&&!this.backwardButtonElement.hidden?this.backwardButtonElement.offsetWidth:0,e=this.forwardButtonElement&&!this.forwardButtonElement.hidden?this.forwardButtonElement.offsetWidth:0,{left:i,right:r}=this.scrollableElement.getBoundingClientRect(),{left:d,right:o}=s.getBoundingClientRect();let l=this.scrollableElement.scrollLeft;d<i+a+16?l-=i+a+16-d:o>r-e-16&&(l+=o-(r-e-16)),this.scrollableElement.scrollTo({left:Math.max(0,Math.min(l,this.scrollableElement.scrollWidth-this.scrollableElement.clientWidth)),behavior:"auto"})};handleTabFocus(t){t.stopPropagation(),this.scrollTabIntoView(t.target)}handleKeyDown=t=>{t.stopPropagation();const s=t.target.closest(this.DsTab),a=Array.from(this.el.querySelectorAll(this.DsTab)),e=a.indexOf(s);if(-1===e)return;let i=0;switch(t.key){case"Enter":case" ":if(this.context?.currentTab===a[e].dsId)return;return void this.dsTabChange.emit({tabId:a[e].dsId,tabPanelId:a[e].dsTabPanelId});case"ArrowRight":i=(e+1)%a.length;break;case"ArrowLeft":i=(e-1+a.length)%a.length;break;case"Home":i=0;break;case"End":i=a.length-1;break;default:return}t.preventDefault(),t.stopPropagation(),a[i].setFocus()};handleScroll=t=>{this.setButtonsVisibility(t.target)};handleButtonClick=t=>{if(!this.scrollableElement)return;const s=.8*this.scrollableElement.clientWidth;this.scrollableElement.scrollTo({left:"backward"===t?this.scrollableElement.scrollLeft-s:this.scrollableElement.scrollLeft+s,behavior:"smooth"})};connectedCallback(){this.el.addEventListener("keydown",this.handleKeyDown)}componentDidLoad(){this.setButtonsVisibility(this.scrollableElement)}disconnectedCallback(){super.disconnectedCallback(),this.el.removeEventListener("keydown",this.handleKeyDown)}renderButton=t=>{const s=d("ds-tablist");return e(this.DsButton,{class:s+"__button__ds-button",onClick:()=>this.handleButtonClick(t),dsAriaHidden:!0,dsTabIndex:-1,dsVariant:"supplementary",dsColour:"black",dsIcon:"backward"===t?"chevron_backward":"chevron_forward"})};render(){const t=d("ds-tablist"),s=t+"__scrollable",a=t+"__button";return e("div",{key:"0b8939092cebd964f1d059c39e96356c9667b30b",class:t},e("div",{key:"95df4f0c08c9d7683b7ad33c619f6316a01645bd",ref:t=>this.scrollableElement=t,class:r(s,{[s+"--container"]:"container"===this.context?.variant,[s+"--line"]:"line"===this.context?.variant}),role:"tablist",...n("aria-label",this.dsAriaLabel),...n("aria-labelledby",this.dsAriaLabelledby),onScroll:this.handleScroll},e("slot",{key:"4f8a069e168c9de0387347d08c618abd0b6167a6"})),e("div",{key:"53fb3cbeca8828a5e8cb29252b62458902b2d292",ref:t=>this.backwardButtonElement=t,class:r(a,a+"--backward",{[a+"--container"]:"container"===this.context?.variant,[a+"--line"]:"line"===this.context?.variant}),"aria-hidden":"true",hidden:!this.showBackwardButton},this.renderButton("backward")),e("div",{key:"4a4b57eb33f521de240bb884252b0c557c03e7be",ref:t=>this.forwardButtonElement=t,class:r(a,a+"--forward",{[a+"--container"]:"container"===this.context?.variant,[a+"--line"]:"line"===this.context?.variant}),"aria-hidden":"true",hidden:!this.showForwardButton},this.renderButton("forward")))}static get style(){return'.ds-no-style-leak.sc-ds-tablist *.sc-ds-tablist{all:unset;box-sizing:border-box;display:block}.ds-tablist__SPFJ1E.sc-ds-tablist{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__scrollable.sc-ds-tablist{display:flex;gap:var(--ds-spacing-2xSmall);overflow-x:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__scrollable.sc-ds-tablist:focus,.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__scrollable.sc-ds-tablist:focus-visible,.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__scrollable.sc-ds-tablist:-moz-focusring{outline:none;box-shadow:none}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__scrollable--container.sc-ds-tablist{background:linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) left/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) right/var(--ds-borderWidth-hairline) 100% no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) top/100% var(--ds-borderWidth-hairline) no-repeat, linear-gradient(var(--ds-bgColor-neutralLight), var(--ds-bgColor-neutralLight)) top/100% calc(100% - var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__scrollable--line.sc-ds-tablist{background:linear-gradient(var(--ds-bgColor-transparent-onLight), var(--ds-bgColor-transparent-onLight)) top/100% calc(100% - 1 * var(--ds-borderWidth-hairline)) no-repeat, linear-gradient(var(--ds-borderColor-default), var(--ds-borderColor-default)) bottom/100% var(--ds-borderWidth-hairline) no-repeat}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button.sc-ds-tablist{position:absolute;top:0;bottom:0;display:flex;aspect-ratio:1;justify-content:center;align-items:center}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button--backward.sc-ds-tablist{left:0}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button--forward.sc-ds-tablist{right:0}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button--container.sc-ds-tablist{border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-neutralLight)}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button--line.sc-ds-tablist{border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button--container.ds-tablist__SPFJ1E__button--backward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 calc(-1 * var(--ds-spacing-small)) 0 0)}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button--container.ds-tablist__SPFJ1E__button--forward.sc-ds-tablist::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--ds-shadow-overlay);clip-path:inset(0 0 0 calc(-1 * var(--ds-spacing-small)))}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button[hidden].sc-ds-tablist{display:none}.ds-tablist__SPFJ1E.sc-ds-tablist .ds-tablist__SPFJ1E__button__ds-button.sc-ds-tablist{width:100%;height:100%}'}},[774,"ds-tablist",{dsAriaLabel:[1,"ds-aria-label"],dsAriaLabelledby:[1,"ds-aria-labelledby"],context:[32],showBackwardButton:[32],showForwardButton:[32],tabConnected:[64],tabDisconnected:[64]},[[9,"resize","handleResize"],[0,"dsTabClick","handleTabClick"],[0,"dsTabFocus","handleTabFocus"]]]);b([e("ds-tab",{dsId:"",dsTabPanelId:""}),e("ds-button",null)]);const m=v,E=function(){"undefined"!=typeof customElements&&["ds-tablist","ds-button","ds-icon","ds-spinner","ds-tab","ds-visually-hidden"].forEach((t=>{switch(t){case"ds-tablist":customElements.get(i(t))||customElements.define(i(t),v);break;case"ds-button":customElements.get(i(t))||h();break;case"ds-icon":customElements.get(i(t))||_();break;case"ds-spinner":customElements.get(i(t))||u();break;case"ds-tab":customElements.get(i(t))||f();break;case"ds-visually-hidden":customElements.get(i(t))||p()}}))};export{m as DsTablist,E as defineCustomElement}

package/dist/components/ds-tabpanel.js

@@ -1,50 +1 @@
-import { p as proxyCustomElement, M as Mixin, h } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { t as tabsFactory } from './p-D1DYiRu4.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-
-const dsTabpanelCss = ".ds-no-style-leak.sc-ds-tabpanel *.sc-ds-tabpanel{all:unset;box-sizing:border-box;display:block}.ds-tabpanel__oSBnIJ.sc-ds-tabpanel{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-tabpanel__oSBnIJ--container.sc-ds-tabpanel{border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-medium)}}.ds-tabpanel__oSBnIJ--container.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__oSBnIJ--container.ds-tabpanel__oSBnIJ--padded.sc-ds-tabpanel{padding:var(--ds-spacing-medium)}}.ds-tabpanel__oSBnIJ[hidden].sc-ds-tabpanel{display:none}";
-
-const DsTabpanel$1 = proxyCustomElement(class DsTabpanel extends Mixin(tabsFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    dsId;
-    dsTabId;
-    dsPadded = true;
-    render() {
-        const baseClass = cx('ds-tabpanel');
-        return (h("div", { key: 'a652b9384924c3b603dddcab5e7c2e37d7b5e9d7', id: this.dsId, class: classNames(baseClass, {
-                [`${baseClass}--container`]: this.context?.variant === 'container',
-                [`${baseClass}--padded`]: this.dsPadded,
-            }), role: "tabpanel", hidden: this.context?.currentTabPanel !== this.dsId, "aria-labelledby": this.dsTabId }, h("slot", { key: '72972372dcdec5183419aa01726a39c680e4aba8' })));
-    }
-    static get style() { return dsTabpanelCss; }
-}, [262, "ds-tabpanel", {
-        "dsId": [1, "ds-id"],
-        "dsTabId": [1, "ds-tab-id"],
-        "dsPadded": [4, "ds-padded"],
-        "context": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-tabpanel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-tabpanel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsTabpanel$1);
-            }
-            break;
-    } });
-}
-
-const DsTabpanel = DsTabpanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsTabpanel, defineCustomElement };
+import{p as d,M as a,h as s,t as e}from"./p-D7drWwKe.js";import{c as t}from"./p-DgTb4Jpc.js";import{t as n}from"./p-t2gGbeQx.js";import{c as i}from"./p-BfTCfPZ1.js";const l=d(class extends(a(n)){constructor(d){super(!1),!1!==d&&this.__registerHost()}get el(){return this}dsId;dsTabId;dsPadded=!0;render(){const d=t("ds-tabpanel");return s("div",{key:"02cfe60faa9a5482863fd37c36fe8280065c63c2",id:this.dsId,class:i(d,{[d+"--container"]:"container"===this.context?.variant,[d+"--padded"]:this.dsPadded}),role:"tabpanel",hidden:this.context?.currentTabPanel!==this.dsId,"aria-labelledby":this.dsTabId},s("slot",{key:"180822110e02fc238cc144ca5028eb64d2b365dc"}))}static get style(){return".ds-no-style-leak.sc-ds-tabpanel *.sc-ds-tabpanel{all:unset;box-sizing:border-box;display:block}.ds-tabpanel__SPFJ1E.sc-ds-tabpanel{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);display:block}.ds-tabpanel__SPFJ1E--container.sc-ds-tabpanel{border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tabpanel__SPFJ1E--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__SPFJ1E--padded.sc-ds-tabpanel{padding-block-start:var(--ds-spacing-medium)}}.ds-tabpanel__SPFJ1E--container.ds-tabpanel__SPFJ1E--padded.sc-ds-tabpanel{padding:var(--ds-spacing-small)}@media (min-width: 60rem){.ds-tabpanel__SPFJ1E--container.ds-tabpanel__SPFJ1E--padded.sc-ds-tabpanel{padding:var(--ds-spacing-medium)}}.ds-tabpanel__SPFJ1E[hidden].sc-ds-tabpanel{display:none}"}},[774,"ds-tabpanel",{dsId:[1,"ds-id"],dsTabId:[1,"ds-tab-id"],dsPadded:[4,"ds-padded"],context:[32]}]),r=l,o=function(){"undefined"!=typeof customElements&&["ds-tabpanel"].forEach((d=>{"ds-tabpanel"===d&&(customElements.get(e(d))||customElements.define(e(d),l))}))};export{r as DsTabpanel,o as defineCustomElement}

package/dist/components/ds-tabs.js

@@ -1,69 +1 @@
-import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { s as storeTabsContext, p as provideTabsContext } from './p-C9U2JkHS.js';
-
-const dsTabsCss = ".ds-no-style-leak.sc-ds-tabs *.sc-ds-tabs{all:unset;box-sizing:border-box;display:block}.ds-tabs__oSBnIJ.sc-ds-tabs{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}";
-
-const DsTabs$1 = proxyCustomElement(class DsTabs extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    dsCurrentTab;
-    dsCurrentTabPanel;
-    dsVariant = 'container';
-    handleTabChange(event) {
-        event.stopPropagation();
-    }
-    createContext = () => {
-        return {
-            currentTab: this.dsCurrentTab,
-            currentTabPanel: this.dsCurrentTabPanel,
-            variant: this.dsVariant,
-        };
-    };
-    storeContext = () => {
-        const context = this.createContext();
-        storeTabsContext(this.el, context);
-    };
-    updateContext = () => {
-        const context = this.createContext();
-        provideTabsContext(this.el, context);
-    };
-    componentWillLoad() {
-        this.storeContext();
-    }
-    componentDidUpdate() {
-        this.updateContext();
-    }
-    render() {
-        const baseClass = cx('ds-tabs');
-        return (h("div", { key: '38636c60ba2cd1122bbe70b1b25e99af2122b2d9', class: baseClass }, h("slot", { key: '252cc12020e9777cd61f72db136c25d932f176e8' })));
-    }
-    static get style() { return dsTabsCss; }
-}, [262, "ds-tabs", {
-        "dsCurrentTab": [1, "ds-current-tab"],
-        "dsCurrentTabPanel": [1, "ds-current-tab-panel"],
-        "dsVariant": [1, "ds-variant"]
-    }, [[0, "dsTabChange", "handleTabChange"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-tabs"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsTabs$1);
-            }
-            break;
-    } });
-}
-
-const DsTabs = DsTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsTabs, defineCustomElement };
+import{p as t,H as s,h as e,t as a}from"./p-D7drWwKe.js";import{c as n}from"./p-DgTb4Jpc.js";import{s as r,p as d}from"./p-C9U2JkHS.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}dsCurrentTab;dsCurrentTabPanel;dsVariant="container";handleTabChange(t){t.stopPropagation()}createContext=()=>({currentTab:this.dsCurrentTab,currentTabPanel:this.dsCurrentTabPanel,variant:this.dsVariant});storeContext=()=>{const t=this.createContext();r(this.el,t)};updateContext=()=>{const t=this.createContext();d(this.el,t)};componentWillLoad(){this.storeContext()}componentDidUpdate(){this.updateContext()}render(){const t=n("ds-tabs");return e("div",{key:"8d1dd34db51da0c57559334cc3702ac2f8874eb4",class:t},e("slot",{key:"33780bd8adb124f21410b823712bff55c2c6ff2d"}))}static get style(){return".ds-no-style-leak.sc-ds-tabs *.sc-ds-tabs{all:unset;box-sizing:border-box;display:block}.ds-tabs__SPFJ1E.sc-ds-tabs{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}"}},[774,"ds-tabs",{dsCurrentTab:[1,"ds-current-tab"],dsCurrentTabPanel:[1,"ds-current-tab-panel"],dsVariant:[1,"ds-variant"]},[[0,"dsTabChange","handleTabChange"]]]),i=o,b=function(){"undefined"!=typeof customElements&&["ds-tabs"].forEach((t=>{"ds-tabs"===t&&(customElements.get(a(t))||customElements.define(a(t),o))}))};export{i as DsTabs,b as defineCustomElement}

package/dist/components/ds-tag-group.js

@@ -1,73 +1 @@
-import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
-import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-import { d as defineCustomElement$3 } from './p-BtwuVYMk.js';
-import { d as defineCustomElement$2 } from './p-1tClFY_L.js';
-
-const dsTagGroupCss = ".ds-tag-group__oSBnIJ__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}";
-
-const tagGroupIdGenerator = idGenerator('ds-tag-group');
-const DsTagGroup$1 = proxyCustomElement(class DsTagGroup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    tagGroupId = tagGroupIdGenerator.next().value;
-    assistiveTextId = `${this.tagGroupId}-assistive-text`;
-    inheritedAttributes = {};
-    get el() { return this; }
-    dsLabel;
-    dsAriaLabel;
-    dsAssistiveText;
-    componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, ['aria-describedby']),
-        };
-    }
-    render() {
-        const baseClass = cx('ds-tag-group');
-        const DsGroupLabel = transformTagName('ds-group-label', 'ds-tag-group', this.el);
-        const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
-        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
-        const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
-        return (h("div", { key: '84a23f69a82a6e636ecdb9344383708f367f1290', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }, h(DsGroupLabel, { key: 'a34005c9c50bc0dd9419857297ffe0bf0964f34d', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: '64e6e95287c2b56e339c658bd280dac82b57b587', name: "label" }), h("slot", { key: 'd87ebcb6cbe9c1bc5a0807f3c041fcacbb79d693', name: "assistiveText" })), h("div", { key: '72350ed04210fdc3e47b190bd6700a029980fbab', role: "list", class: `${baseClass}__tags` }, h("slot", { key: 'c70dea6040754dfa32465cecbd8d2e8e828b35ac' }))));
-    }
-    static get style() { return dsTagGroupCss; }
-}, [262, "ds-tag-group", {
-        "dsLabel": [1, "ds-label"],
-        "dsAriaLabel": [1, "ds-aria-label"],
-        "dsAssistiveText": [1, "ds-assistive-text"]
-    }]);
-declareComponentDependencies([h("ds-group-label", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-tag-group", "ds-assistive-text", "ds-group-label"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-tag-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsTagGroup$1);
-            }
-            break;
-        case "ds-assistive-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-group-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsTagGroup = DsTagGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsTagGroup, defineCustomElement };
+import{p as s,H as e,h as t,t as a}from"./p-D7drWwKe.js";import{i as d,t as i,a as r,d as l}from"./p-J5Ghj1_T.js";import{c as o}from"./p-DgTb4Jpc.js";import{i as c,a as b}from"./p-BecId8t2.js";import{d as p}from"./p-Bg8W_xlr.js";import{d as g}from"./p-D1r2tfNI.js";const n=d("ds-tag-group"),m=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost()}tagGroupId=n.next().value;assistiveTextId=this.tagGroupId+"-assistive-text";inheritedAttributes={};get el(){return this}dsLabel;dsAriaLabel;dsAssistiveText;componentWillLoad(){this.inheritedAttributes={...b(this,this.el),...c(this.el,["aria-describedby"])}}render(){const s=o("ds-tag-group"),e=i("ds-group-label","ds-tag-group",this.el),{"aria-label":a,...d}=this.inheritedAttributes,l=[!!this.dsAssistiveText&&this.assistiveTextId].filter(Boolean).join(" ");return t("div",{key:"506cb8b9335b5cdbf8dcd67e1ac09b523dbc7c71",class:s,role:"group",...r("aria-label",this.dsAriaLabel||a||this.dsLabel),...r("aria-describedby",l),...d},t(e,{key:"cfbd992d2f91d68192e511d61dbfd88cf1fc5cb5",dsLabel:this.dsLabel,dsAssistiveText:this.dsAssistiveText,dsAssistiveTextId:this.assistiveTextId},t("slot",{key:"00fdecc8b0e2fbe3b57b9dd59803bb8e84c604c1",name:"label"}),t("slot",{key:"209aa3a2a855dfa78e2f776d01472c9bb08d049d",name:"assistiveText"})),t("div",{key:"0bfdd460d007fc112e931770e41c593b874692dc",role:"list",class:s+"__tags"},t("slot",{key:"87b3169b5eb8eb25f83889f533005c738fadee7e"})))}static get style(){return".ds-tag-group__SPFJ1E__tags.sc-ds-tag-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}"}},[774,"ds-tag-group",{dsLabel:[1,"ds-label"],dsAriaLabel:[1,"ds-aria-label"],dsAssistiveText:[1,"ds-assistive-text"]}]);l([t("ds-group-label",null)]);const f=m,u=function(){"undefined"!=typeof customElements&&["ds-tag-group","ds-assistive-text","ds-group-label"].forEach((s=>{switch(s){case"ds-tag-group":customElements.get(a(s))||customElements.define(a(s),m);break;case"ds-assistive-text":customElements.get(a(s))||p();break;case"ds-group-label":customElements.get(a(s))||g()}}))};export{f as DsTagGroup,u as defineCustomElement}

package/dist/components/ds-tag.js

@@ -1,6 +1 @@
-import { D as DsTag$1, d as defineCustomElement$1 } from './p-DcrTglyg.js';
-
-const DsTag = DsTag$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsTag, defineCustomElement };
+import{D as o,d as p}from"./p-ORTpE52P.js";const s=o,r=p;export{s as DsTag,r as defineCustomElement}