@maggioli-design-system/magma 2.0.0-alpha.1 → 2.0.0-beta.2

package/dist/components/mds-stepper-bar.js

@@ -1,136 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const mdsStepperBarCss = "@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-stepper-bar-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-stepper-bar-offset-margin{syntax:\"<length>\";inherits:false;initial-value:0}@property --mds-stepper-bar-scroll-behavior{syntax:\"smooth|auto\";inherits:false;initial-value:smooth}@property --mds-stepper-bar-scrollbar-margin{syntax:\"<length>\";inherits:false;initial-value:0}@property --mds-stepper-bar-scrollbar-radius{syntax:\"<length>\";inherits:false;initial-value:0}:host{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107));display:grid;gap:calc(var(--spacing,.0025rem)*600);position:relative}.items{align-items:start;display:flex;flex-grow:1;gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*500));margin:0 calc(var(--mds-stepper-bar-offset-margin,0)*-1);overflow:auto;padding:0 var(--mds-stepper-bar-offset-margin,0);position:relative;scroll-behavior:var(--mds-stepper-bar-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%;z-index:10}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}.contents{display:flex;flex-direction:column;width:100%}:host-context(:root.pref-animation-reduce){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .contents,:host-context(:root.pref-animation-reduce) .items){transition-duration:0s}:host(:not([navigation=scrollbar])) .items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .items::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .items::-webkit-scrollbar{height:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .items::-webkit-scrollbar-track{background-color:var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0);margin-block:var(--mds-stepper-bar-scrollbar-margin,0);margin-inline:var(--mds-stepper-bar-scrollbar-margin,0)}:host([navigation=scrollbar]) .items::-webkit-scrollbar-thumb{background-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.items{scrollbar-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)))var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));scrollbar-width:thin}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .contents,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .items{transition-duration:0s}}";
-
-const MdsStepperBar$1 = /*@__PURE__*/ proxyCustomElement(class MdsStepperBar extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.changedEvent = createEvent(this, "mdsStepperBarChange", 7);
-        this.currentItem = 0;
-        /**
-         * Sets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
-         */
-        this.itemsDone = 1;
-        /**
-         * Specifies the navigation type
-         */
-        this.navigation = 'none';
-        this.queryItems = () => this.element.querySelectorAll('mds-stepper-bar-item');
-        this.queryContentItems = () => this.element.querySelectorAll('[slot=content]');
-        // private queryContents = (): NodeListOf<HTMLElement> =>
-        //   this.element.querySelectorAll<HTMLElement>('[slot="content"]')
-        this.minmax = (value, min, max) => Math.min(Math.max(value, min), max);
-        this.setCurrent = (index) => {
-            this.items = this.queryItems();
-            this.currentItem = index - 1;
-            const values = new Array();
-            this.items.forEach((item, key) => {
-                item.done = false;
-                if (key < this.currentItem) {
-                    item.done = true;
-                    if (item.value) {
-                        values.push(item.value);
-                    }
-                }
-                item.current = false;
-                if (key === this.currentItem) {
-                    item.current = true;
-                    this.currentItem = key;
-                }
-            });
-            this.changedEvent.emit({ value: values.toString(), step: this.currentItem });
-            this.scrollItems();
-            this.setCurrentContent();
-        };
-        this.setCurrentContent = () => {
-            this.contentItems.forEach((item, index) => {
-                item.classList.add('hidden');
-                if (index === this.currentItem) {
-                    item.classList.remove('hidden');
-                }
-            });
-        };
-        this.scrollItems = () => {
-            var _a;
-            const itemsElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items');
-            const pagesItems = this.queryItems();
-            const elementIndex = this.minmax(this.currentItem, 0, this.items.length - 1);
-            if (!itemsElement)
-                throw Error('No mds-stepper-bar-items found');
-            if (elementIndex <= 0) {
-                itemsElement.scrollLeft = 0;
-                return;
-            }
-            if (elementIndex >= pagesItems.length) {
-                const pageItem = pagesItems[pagesItems.length - 1];
-                itemsElement.scrollLeft = pageItem.offsetLeft - itemsElement.offsetLeft;
-                return;
-            }
-            const pageItem = pagesItems[elementIndex];
-            itemsElement.scrollLeft =
-                pageItem.offsetLeft -
-                    itemsElement.offsetLeft -
-                    itemsElement.offsetWidth / 2 +
-                    pageItem.offsetWidth / 2;
-        };
-    }
-    componentWillLoad() {
-        this.items = this.queryItems();
-        this.items.forEach((item, key) => {
-            item.id = `mds-stepper-bar-item-${key}`;
-        });
-    }
-    componentDidLoad() {
-        this.contentItems = this.queryContentItems();
-        this.setCurrent(this.itemsDone);
-    }
-    itemDone(newValue) {
-        this.setCurrent(newValue);
-    }
-    changeEventHandler(event) {
-        this.items = this.queryItems();
-        this.items.forEach((item, key) => {
-            item.done = false;
-            if (`mds-stepper-bar-item-${key}` === event.detail) {
-                item.current = true;
-                this.currentItem = key;
-            }
-        });
-    }
-    render() {
-        return (h(Host, { key: 'a0b7e159765a3130fcc67b2e3a1146b0c43907ff' }, h("div", { key: '25d1984f704bc071cda8010ab382384d28b86273', class: "items", part: "items" }, h("slot", { key: 'f32c13a94bbce2e93f28ef23b2dfcaeec17269d1' })), h("div", { key: '7dc90454240058f41ce07f98bb53e4376346b582', class: "contents", part: "contents" }, h("slot", { key: '25185f4817e18132b066c01d9d98353e1f62b19e', name: "content" }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "itemsDone": ["itemDone"]
-    }; }
-    static get style() { return mdsStepperBarCss; }
-}, [257, "mds-stepper-bar", {
-        "itemsDone": [2, "items-done"],
-        "navigation": [513],
-        "currentItem": [32]
-    }, [[0, "mdsStepperBarItemDone", "changeEventHandler"]], {
-        "itemsDone": ["itemDone"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-stepper-bar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-stepper-bar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsStepperBar$1);
-            }
-            break;
-    } });
-}
-
-const MdsStepperBar = MdsStepperBar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsStepperBar, defineCustomElement };
+import{proxyCustomElement as r,HTMLElement as t,createEvent as e,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";const i=r(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.changedEvent=e(this,"mdsStepperBarChange",7),this.currentItem=0,this.itemsDone=1,this.navigation="none",this.queryItems=()=>this.element.querySelectorAll("mds-stepper-bar-item"),this.queryContentItems=()=>this.element.querySelectorAll("[slot=content]"),this.minmax=(r,t,e)=>Math.min(Math.max(r,t),e),this.setCurrent=r=>{this.items=this.queryItems(),this.currentItem=r-1;const t=[];this.items.forEach(((r,e)=>{r.done=!1,e<this.currentItem&&(r.done=!0,void 0!==r.value&&""!==r.value&&t.push(r.value)),r.current=!1,e===this.currentItem&&(r.current=!0,this.currentItem=e)})),this.changedEvent.emit({value:""+t,step:this.currentItem}),this.scrollItems(),this.setCurrentContent()},this.setCurrentContent=()=>{this.contentItems.forEach(((r,t)=>{r.classList.add("hidden"),t===this.currentItem&&r.classList.remove("hidden")}))},this.scrollItems=()=>{var r;const t=null===(r=this.element.shadowRoot)||void 0===r?void 0:r.querySelector(".items"),e=this.queryItems(),s=this.minmax(this.currentItem,0,this.items.length-1);if(!t)throw Error("No mds-stepper-bar-items found");if(s<=0)return void(t.scrollLeft=0);if(s>=e.length)return void(t.scrollLeft=e[e.length-1].offsetLeft-t.offsetLeft);const a=e[s];t.scrollLeft=a.offsetLeft-t.offsetLeft-t.offsetWidth/2+a.offsetWidth/2}}componentWillLoad(){this.items=this.queryItems(),this.items.forEach(((r,t)=>{r.id="mds-stepper-bar-item-"+t}))}componentDidLoad(){this.contentItems=this.queryContentItems(),this.setCurrent(this.itemsDone)}itemDone(r){this.setCurrent(r)}changeEventHandler(r){this.items=this.queryItems(),this.items.forEach(((t,e)=>{t.done=!1,"mds-stepper-bar-item-"+e===r.detail&&(t.current=!0,this.currentItem=e)}))}render(){return s(a,{key:"07b3ac18136f0bc4e6b7424238705c951a37e0bf"},s("div",{key:"7d2e747d084bc581966e88c55ad19a8b27086030",class:"items",part:"items"},s("slot",{key:"7934e741a279fdf3635c9ef56a92c96441f21081"})),s("div",{key:"3d3c6e31fa33b046604845886bfd94093e51bba8",class:"contents",part:"contents"},s("slot",{key:"9af87d63470bf64e882477dc4f8d0e25159a708d",name:"content"})))}get element(){return this}static get watchers(){return{itemsDone:[{itemDone:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-stepper-bar-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-stepper-bar-offset-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-stepper-bar-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107));display:grid;gap:calc(var(--spacing,.0025rem)*600);position:relative}.items{align-items:start;display:flex;flex-grow:1;gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*500));margin:0 calc(var(--mds-stepper-bar-offset-margin,0)*-1);overflow:auto;padding:0 var(--mds-stepper-bar-offset-margin,0);position:relative;scroll-behavior:var(--mds-stepper-bar-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%;z-index:10}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}.contents{display:flex;flex-direction:column;width:100%}:host-context(:root.pref-animation-reduce){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .contents,:host-context(:root.pref-animation-reduce) .items){transition-duration:0s}:host(:not([navigation=scrollbar])) .items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .items::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .items::-webkit-scrollbar{height:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .items::-webkit-scrollbar-track{background-color:var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0);margin-block:var(--mds-stepper-bar-scrollbar-margin,0);margin-inline:var(--mds-stepper-bar-scrollbar-margin,0)}:host([navigation=scrollbar]) .items::-webkit-scrollbar-thumb{background-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.items{scrollbar-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158))) var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));scrollbar-width:thin}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .contents,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .items{transition-duration:0s}}'}},[257,"mds-stepper-bar",{itemsDone:[2,"items-done"],navigation:[513],currentItem:[32]},[[0,"mdsStepperBarItemDone","changeEventHandler"]],{itemsDone:[{itemDone:0}]}]),n=i,l=function(){"undefined"!=typeof customElements&&["mds-stepper-bar"].forEach((r=>{"mds-stepper-bar"===r&&(customElements.get(o(r))||customElements.define(o(r),i))}))};export{n as MdsStepperBar,l as defineCustomElement}

package/dist/components/mds-tab-bar-item.js

@@ -1,89 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as readSlottedLabel, s as sanitizeLabel } from './slot.js';
-import { d as defineCustomElement$3 } from './mds-icon2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsTabBarItemCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:transparent;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tab-bar-item-background-selected{syntax:\"<color>\";inherits:false;initial-value:#0000}:host{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:transparent;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*200);--tw-duration:.2s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-tab-bar-item-background,rgb(var(--tone-neutral-10,60 60 60)));color:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));cursor:pointer;display:flex;fill:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));flex:1 0 0;flex-direction:column;text-align:center;transition-duration:.2s;transition-property:color,background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host([selected]:not([selected=false])){background-color:var(--mds-tab-bar-item-background-selected,transparent);color:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)));fill:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}:host-context(:root.pref-contrast-more){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}";
-
-const MdsTabBarItem$1 = /*@__PURE__*/ proxyCustomElement(class MdsTabBarItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.selectedEvent = createEvent(this, "mdsTabBarItemSelect", 7);
-        this.icon = '';
-        /**
-         * Specifies the typography of the element
-         */
-        this.typography = 'tip';
-        this.select = () => {
-            this.isSelected = !this.isSelected;
-            if (this.isSelected) {
-                this.selectedEvent.emit(this.element.id);
-            }
-        };
-        this.onSlotChangeHandler = () => {
-            /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
-                return;
-            this.label = readSlottedLabel(this.element);
-        };
-    }
-    componentWillLoad() {
-        this.isSelected = this.selected;
-    }
-    validateSelected(newValue) {
-        this.isSelected = newValue;
-    }
-    labelChanged(newValue) {
-        this.label = sanitizeLabel(newValue);
-    }
-    render() {
-        return (h(Host, { key: 'cfdd8682bdab7117d3853abff77c31f871314a20', onClick: this.select }, h("mds-icon", { key: '4dd1b08193a0c6c1238104c1484523b7cc074a8a', name: this.icon }), h("mds-text", { key: 'd8bb748fbc4941fd5b65101997a1a21b1b7a1ed4', typography: this.typography }, this.label || h("slot", { key: '7e4fead88e847406b6e22ac534fcd67862fbe613', onSlotchange: this.onSlotChangeHandler }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "selected": ["validateSelected"],
-        "label": ["labelChanged"]
-    }; }
-    static get style() { return mdsTabBarItemCss; }
-}, [257, "mds-tab-bar-item", {
-        "icon": [1],
-        "label": [1537],
-        "selected": [1540],
-        "typography": [1],
-        "isSelected": [32]
-    }, undefined, {
-        "selected": ["validateSelected"],
-        "label": ["labelChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-tab-bar-item", "mds-icon", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-tab-bar-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsTabBarItem$1);
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsTabBarItem = MdsTabBarItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsTabBarItem, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as a,Host as o,transformTag as s}from"@stencil/core/internal/client";import{r as i,s as n}from"./slot.js";import{d as c}from"./mds-icon2.js";import{d}from"./mds-text2.js";const m=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=r(this,"mdsTabBarItemSelect",7),this.icon="",this.typography="tip",this.select=()=>{this.isSelected=!this.isSelected,this.isSelected&&this.selectedEvent.emit(this.element.id)},this.onSlotChangeHandler=()=>{void 0!==this.label&&""!==this.label||(this.label=i(this.element))}}componentWillLoad(){this.isSelected=this.selected}validateSelected(t){this.isSelected=t}labelChanged(t){this.label=n(t)}render(){return a(o,{key:"f3c37cdf12cd99a5e9c2ffa3ef04af68548c4c3c",onClick:this.select},a("mds-icon",{key:"f79a29591079ab87d9afcc6e5bcf3acf8db4c66c",name:this.icon}),a("mds-text",{key:"5399aa307b7c9e097232b903e3482b2f2d8eebc4",typography:this.typography},this.label||a("slot",{key:"ebd5d848468f5f0fd895c93b5c67f7954636234a",onSlotchange:this.onSlotChangeHandler})))}get element(){return this}static get watchers(){return{selected:[{validateSelected:0}],label:[{labelChanged:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:transparent;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tab-bar-item-background-selected{syntax:"<color>";inherits:false;initial-value:#0000}:host{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:transparent;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*200);--tw-duration:.2s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-tab-bar-item-background,rgb(var(--tone-neutral-10,60 60 60)));color:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));cursor:pointer;display:flex;fill:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));flex:1 0 0;flex-direction:column;text-align:center;transition-duration:.2s;transition-property:color,background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host([selected]:not([selected=false])){background-color:var(--mds-tab-bar-item-background-selected,transparent);color:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)));fill:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}:host-context(:root.pref-contrast-more){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}'}},[257,"mds-tab-bar-item",{icon:[1],label:[1537],selected:[1540],typography:[1],isSelected:[32]},void 0,{selected:[{validateSelected:0}],label:[{labelChanged:0}]}]),l=m,b=function(){"undefined"!=typeof customElements&&["mds-tab-bar-item","mds-icon","mds-text"].forEach((t=>{switch(t){case"mds-tab-bar-item":customElements.get(s(t))||customElements.define(s(t),m);break;case"mds-icon":customElements.get(s(t))||c();break;case"mds-text":customElements.get(s(t))||d()}}))};export{l as MdsTabBarItem,b as defineCustomElement}

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

@@ -1,51 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const mdsTabBarCss = "@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-tab-bar-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:rgb(var(--tone-neutral,0 0 0));bottom:0;-webkit-box-shadow:var(--shadow-outline-light-50);box-shadow:var(--shadow-outline-light-50);display:flex;justify-content:space-around;left:0;position:fixed;right:0;transition-duration:.2s;transition-property:background-color,color,box-shadow;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}";
-
-const MdsTabBar$1 = /*@__PURE__*/ proxyCustomElement(class MdsTabBar extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.changedEvent = createEvent(this, "mdsTabBarChange", 7);
-        this.queryItems = () => this.element.querySelectorAll('mds-tab-bar-item');
-    }
-    componentWillLoad() {
-        const items = this.queryItems();
-        items.forEach((item, key) => (item.id = `mds-tab-bar-item-${key}`));
-    }
-    changeEventHandler(event) {
-        const items = this.queryItems();
-        items.forEach((item, key) => {
-            item.selected = `mds-tab-bar-item-${key}` === event.detail;
-            if (item.selected) {
-                this.changedEvent.emit({ index: key });
-            }
-        });
-    }
-    render() {
-        return (h(Host, { key: '65e92345e90f0b287bcb89e42803730b914bb6c1' }, h("slot", { key: 'c5eb2105f89f7957a0fb0aa5752d40d90d4396b3' })));
-    }
-    get element() { return this; }
-    static get style() { return mdsTabBarCss; }
-}, [257, "mds-tab-bar", undefined, [[0, "mdsTabBarItemSelect", "changeEventHandler"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-tab-bar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-tab-bar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsTabBar$1);
-            }
-            break;
-    } });
-}
-
-const MdsTabBar = MdsTabBar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsTabBar, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changedEvent=o(this,"mdsTabBarChange",7),this.queryItems=()=>this.element.querySelectorAll("mds-tab-bar-item")}componentWillLoad(){this.queryItems().forEach(((t,e)=>t.id="mds-tab-bar-item-"+e))}changeEventHandler(t){this.queryItems().forEach(((e,o)=>{e.selected="mds-tab-bar-item-"+o===t.detail,e.selected&&this.changedEvent.emit({index:o})}))}render(){return r(a,{key:"84740f9df076cec8856a6cbe740bfc3f1611cbb8"},r("slot",{key:"0ce78860c913e57192918839130e566b349b7804"}))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-tab-bar-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:rgb(var(--tone-neutral,0 0 0));bottom:0;-webkit-box-shadow:var(--shadow-outline-light-50);box-shadow:var(--shadow-outline-light-50);display:flex;justify-content:space-around;left:0;position:fixed;right:0;transition-duration:.2s;transition-property:background-color,color,box-shadow;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}'}},[257,"mds-tab-bar",void 0,[[0,"mdsTabBarItemSelect","changeEventHandler"]]]),n=i,d=function(){"undefined"!=typeof customElements&&["mds-tab-bar"].forEach((t=>{"mds-tab-bar"===t&&(customElements.get(s(t))||customElements.define(s(t),i))}))};export{n as MdsTabBar,d as defineCustomElement}

package/dist/components/mds-tab-item.js

@@ -1,6 +1 @@
-import { M as MdsTabItem$1, d as defineCustomElement$1 } from './mds-tab-item2.js';
-
-const MdsTabItem = MdsTabItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsTabItem, defineCustomElement };
+import{M as s,d as t}from"./mds-tab-item2.js";const m=s,o=t;export{m as MdsTabItem,o as defineCustomElement}

package/dist/components/mds-tab-item2.js

@@ -1,112 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
-import { d as defineCustomElement$4 } from './mds-button2.js';
-import { d as defineCustomElement$3 } from './mds-icon2.js';
-import { d as defineCustomElement$2 } from './mds-spinner2.js';
-import { d as defineCustomElement$1 } from './mds-text2.js';
-
-const mdsTabItemCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tab-item-hover-background:transparent;--mds-tab-item-selected-background:transparent;--mds-tab-item-default-background:transparent;--mds-tab-item-corner-shape:round}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tab-item-hover-background{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --mds-tab-item-selected-background{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --mds-tab-item-default-background{syntax:\"<color>\";inherits:false;initial-value:#0000}@property --mds-tab-item-corner-shape{syntax:\"bevel|notch|round|scoop|square|squircle\";inherits:false;initial-value:round}:host{--mds-tab-item-selected-shadow:inherit;--mds-tab-item-radius:inherit;corner-shape:var(--magma-corner-shape,round);cursor:pointer;display:flex}:host-context(mds-tab[animation=slide]){--mds-tab-item-hover-background:transparent;--mds-tab-item-selected-background:transparent;--mds-tab-item-selected-shadow:none;--mds-tab-item-default-background:transparent;--mds-tab-item-default-shadow:none}.button{--mds-button-background:var(--mds-tab-item-default-background,transparent);--mds-button-color:var(--mds-tab-item-default-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-button-radius:var(--mds-tab-item-radius,var(--radius-lg,16px));--mds-button-border-default-opacity:0;--mds-button-corner-shape:var(--mds-tab-item-corner-shape,round);aspect-ratio:auto;flex-grow:1}.button:hover{--mds-button-background:var(--mds-tab-item-hover-background,transparent);--mds-button-color:var(--mds-tab-item-hover-color,rgb(var(--tone-neutral-02,244 244 244)))}.button.selected,.button.selected:hover{--mds-button-background:var(--mds-tab-item-selected-background,transparent);--mds-button-color:var(--mds-tab-item-selected-color,rgb(var(--tone-neutral-01,255 255 255)));-webkit-box-shadow:var(--mds-tab-item-selected-shadow);box-shadow:var(--mds-tab-item-selected-shadow);pointer-events:none}:host([disabled]){pointer-events:none}:host-context(mds-tab[direction=vertical]){width:100%}:host-context(mds-tab[direction=vertical]) .button{justify-content:start}:host-context(:root.pref-contrast-more){--mds-tab-item-selected-color:rgb(var(--tone-neutral-01,255 255 255));--mds-tab-item-selected-shadow:var(--shadow-outline-strong-50)}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tab-item-selected-color:rgb(var(--tone-neutral-01,255 255 255));--mds-tab-item-selected-shadow:var(--shadow-outline-strong-50)}}";
-
-const MdsTabItem = /*@__PURE__*/ proxyCustomElement(class MdsTabItem extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.selectedEvent = createEvent(this, "mdsTabItemSelect", 7);
-        this.focusedEvent = createEvent(this, "mdsTabItemFocus", 7);
-        /**
-         * Specifies the horizontal position of the icon displayed in the tab item
-         */
-        this.iconPosition = 'left';
-        /**
-         * The type of the tab item element
-         */
-        this.type = 'submit';
-        /**
-         * Specifies the size for the tab item
-         */
-        this.size = 'md';
-        this.toggle = () => {
-            if (this.disabled) {
-                return;
-            }
-            this.isSelected = !this.isSelected;
-            if (this.isSelected) {
-                this.selectedEvent.emit({ target: this.element, value: this.value });
-            }
-        };
-        this.focus = () => {
-            this.focusedEvent.emit({ target: this.element, value: this.value });
-        };
-    }
-    validateActive(newValue) {
-        this.isSelected = newValue;
-        if (this.isSelected) {
-            this.selectedEvent.emit({ target: this.element, value: this.value });
-        }
-    }
-    componentWillLoad() {
-        this.hasText = this.element.innerHTML !== '';
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: '8e3e4eaa9a5c331d461247f8ac91b1ba4fffbc11' }, h("mds-button", { key: 'f2afbe737326a6c01fd42727e1893c48dc2c5e0c', class: clsx('button', this.selected ? 'selected' : ''), await: this.await, disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : undefined, href: this.href, icon: this.icon, iconPosition: this.iconPosition, onKeyDown: this.focus, onClick: this.toggle, part: "button", role: "tab", label: this.label, size: this.size, type: this.type })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "selected": ["validateActive"]
-    }; }
-    static get style() { return mdsTabItemCss; }
-}, [257, "mds-tab-item", {
-        "await": [516],
-        "selected": [1540],
-        "disabled": [1540],
-        "icon": [1],
-        "label": [513],
-        "iconPosition": [1, "icon-position"],
-        "type": [1],
-        "size": [513],
-        "value": [513],
-        "href": [513],
-        "isSelected": [32],
-        "hasText": [32]
-    }, undefined, {
-        "selected": ["validateActive"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-tab-item", "mds-button", "mds-icon", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-tab-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsTabItem);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { MdsTabItem as M, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as o,Host as r,transformTag as i}from"@stencil/core/internal/client";import{c as n}from"./clsx.js";import{d as a}from"./mds-button2.js";import{d as m}from"./mds-icon2.js";import{d}from"./mds-spinner2.js";import{d as l}from"./mds-text2.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=s(this,"mdsTabItemSelect",7),this.focusedEvent=s(this,"mdsTabItemFocus",7),this.iconPosition="left",this.type="submit",this.size="md",this.toggle=()=>{this.disabled||(this.isSelected=!this.isSelected,this.isSelected&&this.selectedEvent.emit({target:this.element,value:this.value}))},this.focus=()=>{this.focusedEvent.emit({target:this.element,value:this.value})}}validateActive(e){this.isSelected=e,this.isSelected&&this.selectedEvent.emit({target:this.element,value:this.value})}componentWillLoad(){this.hasText=""!==this.element.innerHTML}render(){var e;return o(r,{key:"a91b51214bfa7b7b77d6dba5332904ba94827ec2"},o("mds-button",{key:"cc6ae4285e0084f5f36b28928fd1b3aced17e106",class:n("button",this.selected?"selected":""),await:this.await,disabled:null!==(e=this.disabled)&&void 0!==e?e:void 0,href:this.href,icon:this.icon,iconPosition:this.iconPosition,onKeyDown:this.focus,onClick:this.toggle,part:"button",role:"tab",label:this.label,size:this.size,type:this.type}))}get element(){return this}static get watchers(){return{selected:[{validateActive:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tab-item-hover-background:transparent;--mds-tab-item-selected-background:transparent;--mds-tab-item-default-background:transparent;--mds-tab-item-corner-shape:round}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tab-item-hover-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tab-item-selected-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tab-item-default-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tab-item-corner-shape{syntax:"bevel|notch|round|scoop|square|squircle";inherits:false;initial-value:round}:host{--mds-tab-item-selected-shadow:inherit;--mds-tab-item-radius:inherit;corner-shape:var(--magma-corner-shape,round);cursor:pointer;display:flex}:host-context(mds-tab[animation=slide]){--mds-tab-item-hover-background:transparent;--mds-tab-item-selected-background:transparent;--mds-tab-item-selected-shadow:none;--mds-tab-item-default-background:transparent;--mds-tab-item-default-shadow:none}.button{--mds-button-background:var(--mds-tab-item-default-background,transparent);--mds-button-color:var(--mds-tab-item-default-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-button-radius:var(--mds-tab-item-radius,var(--radius-lg,16px));--mds-button-border-default-opacity:0;--mds-button-corner-shape:var(--mds-tab-item-corner-shape,round);aspect-ratio:auto;flex-grow:1}.button:hover{--mds-button-background:var(--mds-tab-item-hover-background,transparent);--mds-button-color:var(--mds-tab-item-hover-color,rgb(var(--tone-neutral-02,244 244 244)))}.button.selected,.button.selected:hover{--mds-button-background:var(--mds-tab-item-selected-background,transparent);--mds-button-color:var(--mds-tab-item-selected-color,rgb(var(--tone-neutral-01,255 255 255)));-webkit-box-shadow:var(--mds-tab-item-selected-shadow);box-shadow:var(--mds-tab-item-selected-shadow);pointer-events:none}:host([disabled]){pointer-events:none}:host-context(mds-tab[direction=vertical]){width:100%}:host-context(mds-tab[direction=vertical]) .button{justify-content:start}:host-context(:root.pref-contrast-more){--mds-tab-item-selected-color:rgb(var(--tone-neutral-01,255 255 255));--mds-tab-item-selected-shadow:var(--shadow-outline-strong-50)}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tab-item-selected-color:rgb(var(--tone-neutral-01,255 255 255));--mds-tab-item-selected-shadow:var(--shadow-outline-strong-50)}}'}},[1,"mds-tab-item",{await:[516],selected:[1540],disabled:[1540],icon:[1],label:[513],iconPosition:[1,"icon-position"],type:[1],size:[513],value:[513],href:[513],isSelected:[32],hasText:[32]},void 0,{selected:[{validateActive:0}]}]);function b(){"undefined"!=typeof customElements&&["mds-tab-item","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-tab-item":customElements.get(i(e))||customElements.define(i(e),c);break;case"mds-button":customElements.get(i(e))||a();break;case"mds-icon":customElements.get(i(e))||m();break;case"mds-spinner":customElements.get(i(e))||d();break;case"mds-text":customElements.get(i(e))||l()}}))}export{c as M,b as d}

package/dist/components/mds-tab.js

@@ -1,6 +1 @@
-import { M as MdsTab$1, d as defineCustomElement$1 } from './mds-tab2.js';
-
-const MdsTab = MdsTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsTab, defineCustomElement };
+import{M as s,d as o}from"./mds-tab2.js";const t=s,a=o;export{t as MdsTab,a as defineCustomElement}