@mgdis/mg-components 6.22.0 → 6.22.1

package/dist/components/mg-skip-links.js

@@ -1 +1 @@
-import{transformTag as i,proxyCustomElement as s,HTMLElement as t,createEvent as n,h as e}from"@stencil/core/internal/client";import{i as a}from"./index3.js";import{i as l}from"./index2.js";const r=s(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.goToAnchor=n(this,"go-to-anchor",7),this.handleLinkCLick=i=>{const s=i.currentTarget;s.blur(),this.goToAnchor.emit(s.getAttribute("href"))}}validateLinks(i){if(void 0===i||0===i.length||i.some((i=>!l(i.href)||!i.href.startsWith("#")||!l(i.label))))throw Error('<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.')}componentWillLoad(){this.validateLinks(this.links),this.messages=a(this.element).messages}render(){return e("nav",{key:"b126d6fe3aa2553562fe18a0d4340205e178fbe0",class:"mg-c-skip-links",role:"navigation","aria-label":this.messages.skipLinks.navLabel},e("ul",{key:"1028704238d5119f67cf2e7a77282dec504bbc4f",class:"mg-c-skip-links__list",role:"list"},this.links.map((i=>e("li",{key:i.href},e("a",{class:"mg-c-skip-links__link",href:i.href,onClick:this.handleLinkCLick},i.label))))))}get element(){return this}static get watchers(){return{links:[{validateLinks:0}]}}static get style(){return".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}"}},[1,"mg-skip-links",{links:[16]},void 0,{links:[{validateLinks:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-skip-links"].forEach((s=>{"mg-skip-links"===s&&(customElements.get(i(s))||customElements.define(i(s),r))}))}o();const c=r,k=o;export{c as MgSkipLinks,k as defineCustomElement}
+import{transformTag as i,proxyCustomElement as s,HTMLElement as t,createEvent as n,h as a}from"@stencil/core/internal/client";import{i as e}from"./index3.js";import{i as l}from"./index2.js";const r=s(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.goToAnchor=n(this,"go-to-anchor",7),this.handleLinkCLick=i=>{const s=i.currentTarget;s.blur(),this.goToAnchor.emit(s.getAttribute("href"))}}validateLinks(i){if(void 0===i||0===i.length||i.some((i=>!l(i.href)||!i.href.startsWith("#")||!l(i.label))))throw Error('<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.')}componentWillLoad(){this.validateLinks(this.links),this.messages=e(this.element).messages}render(){return a("nav",{key:"5bf4427662bdca6512969bee91aa03f43a126743",class:"mg-c-skip-links",role:"navigation","aria-label":this.messages.skipLinks.navLabel},a("ul",{key:"1d2b2a56b3960f70a3d37b333c77bf686643e0fd",class:"mg-c-skip-links__list",role:"list"},this.links.map((i=>a("li",{key:i.href},a("a",{class:"mg-c-skip-links__link",href:i.href,onClick:this.handleLinkCLick},i.label))))))}get element(){return this}static get watchers(){return{links:[{validateLinks:0}]}}static get style(){return".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}"}},[1,"mg-skip-links",{links:[16]},void 0,{links:[{validateLinks:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-skip-links"].forEach((s=>{"mg-skip-links"===s&&(customElements.get(i(s))||customElements.define(i(s),r))}))}o();const c=r,k=o;export{c as MgSkipLinks,k as defineCustomElement}

package/dist/components/mg-tabs2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as a,HTMLElement as i,createEvent as s,h as e}from"@stencil/core/internal/client";import{c as o,C as n,n as r,a as b,t as c,i as g,d as h}from"./index2.js";import{K as l}from"./events.utils.js";import{d as m}from"./mg-badge2.js";import{d}from"./mg-icon2.js";const v={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},u=t=>"object"==typeof t&&"string"==typeof t.label,_=a(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeTabChange=s(this,"active-tab-change",7),this.tabPanel="panel",this.buttonTabBaseClass="mg-c-tabs__navigation-button",this.startIndex=1,this.identifier=o("mg-tabs"),this.tabs=[],this.classCollection=new n(["mg-c-tabs"]),this.isActivableTab=t=>[void 0,v.ACTIVE,v.VISIBLE].includes(t.status),this.tabHasStatus=(t,a)=>t.status===a,this.getElementId=(t,a)=>`${t}-${this.getTabItemIndex(a)}`,this.getTabItemIndex=t=>t+this.startIndex,this.handleClick=t=>{const a=t.currentTarget.dataset.index;this.isActivableTab(this.tabs[Number(a)-this.startIndex])?(this.activeTab=Number(a),this.tabFocus=void 0):t.preventDefault()},this.getNavigationButtonClass=t=>`${this.buttonTabBaseClass}--${t}`,this.handleKeydown=t=>{const a=t.target.parentElement;if([l.ARROWLEFT,l.ARROWRIGHT].includes(t.key)){this.tabFocus=Number(t.target.dataset.index),a.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute("tabindex","-1"),t.key===l.ARROWRIGHT?(this.tabFocus++,this.tabFocus>this.tabs.length&&(this.tabFocus=this.startIndex)):t.key===l.ARROWLEFT&&(this.tabFocus--,this.tabFocus<this.startIndex&&(this.tabFocus=this.tabs.length));const i=a.querySelector(`[data-index="${this.tabFocus}"]`);this.tabHasStatus(this.tabs[this.tabFocus-1],v.HIDDEN)?i.dispatchEvent(new KeyboardEvent("keydown",{key:t.key,bubbles:!0})):(i.setAttribute("tabindex","0"),i.focus())}else t.key===l.TAB&&this.resetFocus()},this.handleDocumentClick=t=>{t.target.closest("mg-tabs")!==this.element&&this.resetFocus()},this.resetFocus=()=>{r((()=>{this.tabFocus=void 0,Array.from(this.element.shadowRoot.querySelectorAll("[data-index]")).forEach(((t,a)=>{t.setAttribute("tabindex",this.activeTab-this.startIndex!==a?"-1":"0")}))}))},this.validateSlots=()=>{if(Array.from(this.element.children).filter((t=>{var a;return null===(a=t.getAttribute("slot"))||void 0===a?void 0:a.includes("tab_content-")})).length!==this.tabs.length)throw new Error("<mg-tabs> Must have slots counts equal to tabs count.")}}watchIdentifier(t){b(t)||console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${c(t)}.`)}validateLabel(t){if(!g(t))throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${c(t)}.`)}validateItems(t){if(h(t))this.tabs=t.map((t=>({label:t,status:v.VISIBLE})));else{if(!(Array.isArray(t)&&t.length>0&&t.every(u)))throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${c(t)}.`);this.tabs=t}}validateActiveTab(t){if(void 0===t)this.activeTab=this.tabs.some((t=>this.tabHasStatus(t,v.ACTIVE)))?this.getTabItemIndex(this.tabs.findIndex((t=>this.tabHasStatus(t,v.ACTIVE)))):this.startIndex;else{if(!("number"==typeof t&&t>=this.startIndex&&t<=this.tabs.length&&this.isActivableTab(this.tabs[t-this.startIndex])))throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${c(t)}.`);this.tabs.forEach(((a,i)=>{const s=i===t-this.startIndex;this.tabHasStatus(a,v.ACTIVE)&&!s?a.status=v.VISIBLE:this.isActivableTab(a)&&s&&(a.status=v.ACTIVE)})),this.activeTabChange.emit(t)}}componentWillLoad(){this.watchIdentifier(this.identifier),this.validateLabel(this.label),this.validateItems(this.items),this.validateActiveTab(this.activeTab),this.validateSlots()}componentDidLoad(){document.addEventListener("click",this.handleDocumentClick,!1)}disconnectedCallback(){document.removeEventListener("keydown",this.handleDocumentClick)}render(){return e("div",{key:"c971ca94267dd64a173740d9d7a81c0ea00852b9",class:this.classCollection.join()},e("header",{key:"d160fdca50842a310fe2b710f8ffcc6f7cd1bd3d",role:"tablist","aria-label":this.label,class:"mg-c-tabs__header"},this.tabs.map(((t,a)=>e("button",{key:t.label,role:"tab",id:this.getElementId(this.identifier,a),class:{[`${this.buttonTabBaseClass}`]:!0,[`${this.buttonTabBaseClass}--horizontal`]:!0,[`${this.getNavigationButtonClass(v.ACTIVE)}`]:this.tabHasStatus(t,v.ACTIVE),[`${this.getNavigationButtonClass(v.DISABLED)}`]:this.tabHasStatus(t,v.DISABLED),[`${this.getNavigationButtonClass(v.HIDDEN)}`]:this.tabHasStatus(t,v.HIDDEN)},tabindex:this.tabHasStatus(t,v.ACTIVE)?0:-1,"aria-selected":this.tabHasStatus(t,v.ACTIVE).toString(),"aria-controls":this.getElementId(this.tabPanel,a),"aria-disabled":this.tabHasStatus(t,v.DISABLED),onClick:this.handleClick,onKeyDown:this.handleKeydown,"data-index":this.getTabItemIndex(a)},void 0!==t.icon&&e("mg-icon",{icon:t.icon,size:"small"}),t.label,void 0!==t.badge&&e("mg-badge",{variant:"text-color",value:t.badge.value,label:t.badge.label,outline:"information"===t.badge.role}))))),this.tabs.map(((t,a)=>e("article",{key:t.label,role:"tabpanel",id:this.getElementId(this.tabPanel,a),hidden:!this.tabHasStatus(t,v.ACTIVE),"aria-labelledby":this.getElementId(this.identifier,a),tabindex:this.tabHasStatus(t,v.ACTIVE)?0:-1,class:"mg-c-tabs__content-container"},e("slot",{name:this.getElementId("tab_content",a)})))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],label:[{validateLabel:0}],items:[{validateItems:0}],activeTab:[{validateActiveTab:0}]}}static get style(){return'.mg-c-tabs__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-tabs-button-spacing-vertical)*2 + var(--mg-c-tabs-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-tabs-button-spacing-vertical) calc(var(--mg-c-tabs-button-margin-horizontal) + var(--mg-c-tabs-button-padding-horizontal)) var(--mg-c-tabs-button-spacing-vertical) calc(var(--mg-c-tabs-button-margin-horizontal) + var(--mg-c-tabs-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button::after{position:absolute;background-color:var(--mg-c-tabs-color);content:""}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:hover,.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled)::before,.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-tabs-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-tabs-button-margin-horizontal);margin-left:var(--mg-c-tabs-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-tabs-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs__navigation-button:not(.mg-c-tabs__navigation-button--disabled).mg-c-tabs__navigation-button--horizontal::before{margin:var(--mg-c-tabs-button-spacing-vertical) var(--mg-c-tabs-button-margin-horizontal)}.mg-c-tabs__navigation-button:not(.mg-c-tabs__navigation-button--disabled).mg-c-tabs__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-tabs-button-margin-horizontal)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal{--mg-c-tabs-height:var(--mg-b-size-24);--mg-c-tabs-button-spacing-vertical:var(--mg-b-size-8);--mg-c-tabs-button-margin-horizontal:var(--mg-b-size-4);--mg-c-tabs-button-padding-horizontal:var(--mg-b-size-8)}'}},[257,"mg-tabs",{identifier:[1],label:[1],size:[16],items:[16],activeTab:[1538,"active-tab"],tabs:[32],classCollection:[32]},void 0,{identifier:[{watchIdentifier:0}],label:[{validateLabel:0}],items:[{validateItems:0}],activeTab:[{validateActiveTab:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-tabs","mg-badge","mg-icon"].forEach((a=>{switch(a){case"mg-tabs":customElements.get(t(a))||customElements.define(t(a),_);break;case"mg-badge":customElements.get(t(a))||m();break;case"mg-icon":customElements.get(t(a))||d()}}))}f();export{_ as M,v as S,f as d}
+import{transformTag as t,proxyCustomElement as a,HTMLElement as i,createEvent as s,h as e}from"@stencil/core/internal/client";import{c as o,C as n,n as r,a as b,t as c,i as g,d as h}from"./index2.js";import{K as l}from"./events.utils.js";import{d as m}from"./mg-badge2.js";import{d}from"./mg-icon2.js";const v={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},u=t=>"object"==typeof t&&"string"==typeof t.label,_=a(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeTabChange=s(this,"active-tab-change",7),this.tabPanel="panel",this.buttonTabBaseClass="mg-c-tabs__navigation-button",this.startIndex=1,this.identifier=o("mg-tabs"),this.tabs=[],this.classCollection=new n(["mg-c-tabs"]),this.isActivableTab=t=>[void 0,v.ACTIVE,v.VISIBLE].includes(t.status),this.tabHasStatus=(t,a)=>t.status===a,this.getElementId=(t,a)=>`${t}-${this.getTabItemIndex(a)}`,this.getTabItemIndex=t=>t+this.startIndex,this.handleClick=t=>{const a=t.currentTarget.dataset.index;this.isActivableTab(this.tabs[Number(a)-this.startIndex])?(this.activeTab=Number(a),this.tabFocus=void 0):t.preventDefault()},this.getNavigationButtonClass=t=>`${this.buttonTabBaseClass}--${t}`,this.handleKeydown=t=>{const a=t.target.parentElement;if([l.ARROWLEFT,l.ARROWRIGHT].includes(t.key)){this.tabFocus=Number(t.target.dataset.index),a.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute("tabindex","-1"),t.key===l.ARROWRIGHT?(this.tabFocus++,this.tabFocus>this.tabs.length&&(this.tabFocus=this.startIndex)):t.key===l.ARROWLEFT&&(this.tabFocus--,this.tabFocus<this.startIndex&&(this.tabFocus=this.tabs.length));const i=a.querySelector(`[data-index="${this.tabFocus}"]`);this.tabHasStatus(this.tabs[this.tabFocus-1],v.HIDDEN)?i.dispatchEvent(new KeyboardEvent("keydown",{key:t.key,bubbles:!0})):(i.setAttribute("tabindex","0"),i.focus())}else t.key===l.TAB&&this.resetFocus()},this.handleDocumentClick=t=>{t.target.closest("mg-tabs")!==this.element&&this.resetFocus()},this.resetFocus=()=>{r((()=>{this.tabFocus=void 0,Array.from(this.element.shadowRoot.querySelectorAll("[data-index]")).forEach(((t,a)=>{t.setAttribute("tabindex",this.activeTab-this.startIndex!==a?"-1":"0")}))}))},this.validateSlots=()=>{if(Array.from(this.element.children).filter((t=>{var a;return null===(a=t.getAttribute("slot"))||void 0===a?void 0:a.includes("tab_content-")})).length!==this.tabs.length)throw new Error("<mg-tabs> Must have slots counts equal to tabs count.")}}watchIdentifier(t){b(t)||console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${c(t)}.`)}validateLabel(t){if(!g(t))throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${c(t)}.`)}validateItems(t){if(h(t))this.tabs=t.map((t=>({label:t,status:v.VISIBLE})));else{if(!(Array.isArray(t)&&t.length>0&&t.every(u)))throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${c(t)}.`);this.tabs=t}}validateActiveTab(t){if(void 0===t)this.activeTab=this.tabs.some((t=>this.tabHasStatus(t,v.ACTIVE)))?this.getTabItemIndex(this.tabs.findIndex((t=>this.tabHasStatus(t,v.ACTIVE)))):this.startIndex;else{if(!("number"==typeof t&&t>=this.startIndex&&t<=this.tabs.length&&this.isActivableTab(this.tabs[t-this.startIndex])))throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${c(t)}.`);this.tabs.forEach(((a,i)=>{const s=i===t-this.startIndex;this.tabHasStatus(a,v.ACTIVE)&&!s?a.status=v.VISIBLE:this.isActivableTab(a)&&s&&(a.status=v.ACTIVE)})),this.activeTabChange.emit(t)}}componentWillLoad(){this.watchIdentifier(this.identifier),this.validateLabel(this.label),this.validateItems(this.items),this.validateActiveTab(this.activeTab),this.validateSlots()}componentDidLoad(){document.addEventListener("click",this.handleDocumentClick,!1)}disconnectedCallback(){document.removeEventListener("keydown",this.handleDocumentClick)}render(){return e("div",{key:"c58c255ddffc83ad6d911d37f626bcadaea61747",class:this.classCollection.join()},e("header",{key:"ba6d581a4a8bc4338d6341372c267a28df882113",role:"tablist","aria-label":this.label,class:"mg-c-tabs__header"},this.tabs.map(((t,a)=>e("button",{key:t.label,role:"tab",id:this.getElementId(this.identifier,a),class:{[`${this.buttonTabBaseClass}`]:!0,[`${this.buttonTabBaseClass}--horizontal`]:!0,[`${this.getNavigationButtonClass(v.ACTIVE)}`]:this.tabHasStatus(t,v.ACTIVE),[`${this.getNavigationButtonClass(v.DISABLED)}`]:this.tabHasStatus(t,v.DISABLED),[`${this.getNavigationButtonClass(v.HIDDEN)}`]:this.tabHasStatus(t,v.HIDDEN)},tabindex:this.tabHasStatus(t,v.ACTIVE)?0:-1,"aria-selected":this.tabHasStatus(t,v.ACTIVE).toString(),"aria-controls":this.getElementId(this.tabPanel,a),"aria-disabled":this.tabHasStatus(t,v.DISABLED),onClick:this.handleClick,onKeyDown:this.handleKeydown,"data-index":this.getTabItemIndex(a)},void 0!==t.icon&&e("mg-icon",{icon:t.icon,size:"small"}),t.label,void 0!==t.badge&&e("mg-badge",{variant:"text-color",value:t.badge.value,label:t.badge.label,outline:"information"===t.badge.role}))))),this.tabs.map(((t,a)=>e("article",{key:t.label,role:"tabpanel",id:this.getElementId(this.tabPanel,a),hidden:!this.tabHasStatus(t,v.ACTIVE),"aria-labelledby":this.getElementId(this.identifier,a),tabindex:this.tabHasStatus(t,v.ACTIVE)?0:-1,class:"mg-c-tabs__content-container"},e("slot",{name:this.getElementId("tab_content",a)})))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],label:[{validateLabel:0}],items:[{validateItems:0}],activeTab:[{validateActiveTab:0}]}}static get style(){return'.mg-c-tabs__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-tabs-button-spacing-vertical)*2 + var(--mg-c-tabs-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-tabs-button-spacing-vertical) calc(var(--mg-c-tabs-button-margin-horizontal) + var(--mg-c-tabs-button-padding-horizontal)) var(--mg-c-tabs-button-spacing-vertical) calc(var(--mg-c-tabs-button-margin-horizontal) + var(--mg-c-tabs-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button::after{position:absolute;background-color:var(--mg-c-tabs-color);content:""}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:hover,.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled)::before,.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-tabs-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-tabs-button-margin-horizontal);margin-left:var(--mg-c-tabs-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-tabs-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs__navigation-button:not(.mg-c-tabs__navigation-button--disabled).mg-c-tabs__navigation-button--horizontal::before{margin:var(--mg-c-tabs-button-spacing-vertical) var(--mg-c-tabs-button-margin-horizontal)}.mg-c-tabs__navigation-button:not(.mg-c-tabs__navigation-button--disabled).mg-c-tabs__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-tabs-button-margin-horizontal)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal{--mg-c-tabs-height:var(--mg-b-size-24);--mg-c-tabs-button-spacing-vertical:var(--mg-b-size-8);--mg-c-tabs-button-margin-horizontal:var(--mg-b-size-4);--mg-c-tabs-button-padding-horizontal:var(--mg-b-size-8)}'}},[257,"mg-tabs",{identifier:[1],label:[1],size:[16],items:[16],activeTab:[1538,"active-tab"],tabs:[32],classCollection:[32]},void 0,{identifier:[{watchIdentifier:0}],label:[{validateLabel:0}],items:[{validateItems:0}],activeTab:[{validateActiveTab:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-tabs","mg-badge","mg-icon"].forEach((a=>{switch(a){case"mg-tabs":customElements.get(t(a))||customElements.define(t(a),_);break;case"mg-badge":customElements.get(t(a))||m();break;case"mg-icon":customElements.get(t(a))||d()}}))}f();export{_ as M,v as S,f as d}