@crowdstrike/glide-core 0.16.0 → 0.17.0

package/dist/modal.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".body:focus-visible")}
+    ${focusOutline(".component:focus-visible")}
   `,css`
     /* When browser support improves, we can have nicer animations with https://caniuse.com/mdn-css_at-rules_starting-style */
     @keyframes backdrop-fade-in {
@@ -31,12 +31,27 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       border-radius: 0.5rem;
       box-shadow: var(--glide-core-shadow-lg);
       font-family: var(--glide-core-body-xs-font-family);
-      inline-size: 35rem;
       max-block-size: 75vh;
       max-inline-size: 80vw;
       opacity: 0;
       padding: 1.25rem;
 
+      &.small {
+        inline-size: 22.5rem;
+      }
+
+      &.medium {
+        inline-size: 35rem;
+      }
+
+      &.large {
+        inline-size: 53.75rem;
+      }
+
+      &.xlarge {
+        inline-size: 69.375rem;
+      }
+
       &[open] {
         opacity: 1;
 
@@ -50,9 +65,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &::backdrop {
-        /* prefix required for Safari */
-        /* stylelint-disable-next-line property-no-vendor-prefix */
-        -webkit-backdrop-filter: blur(3px);
         backdrop-filter: blur(3px);
         background-color: rgba(0 0 0 / 40%);
 
@@ -69,22 +81,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    .small {
-      inline-size: 22.5rem;
-    }
-
-    .medium {
-      inline-size: 35rem;
-    }
-
-    .large {
-      inline-size: 53.75rem;
-    }
-
-    .xlarge {
-      inline-size: 69.375rem;
-    }
-
     .header {
       align-items: center;
       display: flex;
@@ -100,7 +96,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       gap: var(--glide-core-spacing-xs);
       inline-size: 100%;
       line-height: 1.875rem;
-      margin: 0;
+      margin-block-end: 0;
+      margin-block-start: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -110,11 +107,32 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       align-items: center;
       display: flex;
       gap: 0.625rem;
-      line-height: 1;
+
+      ::slotted(*) {
+        /* 
+          Flex so the actions don't sit on the baseline of ".header" and can be 
+          vertically centered.
+        */
+        display: flex;
+      }
+    }
+
+    .back-button {
+      /* 
+        Flex so the icon doesn't sit on the baseline and extend the height of 
+        ".back-button", making the icon not vertically centered relative to ".label".
+      */
+      display: flex;
     }
 
-    .icon-button {
-      display: contents;
+    .close-button {
+      --size: 1.25rem;
+
+      /* 
+        Flex so the icon doesn't sit on the baseline and extend the height of 
+        ".close-button", making the icon not vertically centered relative to ".label".
+      */
+      display: flex;
     }
 
     .body {
@@ -128,36 +146,23 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    .footer {
-      align-items: center;
-      display: flex;
-    }
-
     .actions {
+      align-items: center;
       display: flex;
       gap: var(--glide-core-spacing-xs);
-
-      /* Reset the default menu styles */
       list-style-type: none;
       margin: 0;
-      margin-inline-start: auto;
       padding: 0;
     }
 
-    .menu {
-      display: flex;
-      inline-size: 100%;
-      justify-content: space-between;
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    .flex {
-      display: flex;
+    .action {
+      &:first-of-type {
+        margin-inline-end: auto;
+      }
     }
 
-    .align-center {
+    .tertiary-slot {
       align-items: center;
+      display: flex;
     }
   `];

package/dist/popover.d.ts

@@ -5,6 +5,8 @@ declare global {
     }
 }
 /**
+ * @event toggle
+ *
  * @slot - The content of the popover.
  * @slot target - The element to which the popover will anchor, which can be any focusable element.
  */

package/dist/popover.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,a=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(a=(r<3?i(a):r>3?i(t,o,a):i(t,o))||a);return r>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./popover.styles.js";let GlideCorePopover=class GlideCorePopover extends LitElement{constructor(){super(...arguments),this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=!1,this.#r=!1,this.#a=!1,this.#s=createRef(),this.#n=createRef(),this.#f=()=>{if(this.#l||this.#a||this.#o)return this.#l=!1,this.#a=!1,void(this.#o=!1);this.open=!1}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,this.open&&!e?this.#d():this.#p()}get offset(){return this.#h??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#h=e}get open(){return this.#r}set open(e){this.#r=e,e&&!this.disabled?this.#d():this.#p()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}firstUpdated(){owSlot(this.#t.value),owSlot(this.#n.value),ow(this.#s.value,ow.object.instanceOf(HTMLElement)),this.#s.value.popover="manual",this.open&&!this.disabled&&this.#d(),this.#t.value.addEventListener("mouseup",(()=>{this.#l=!0})),this.#n.value.addEventListener("mouseup",(()=>{this.#a=!0})),this.#e.value?.addEventListener("mouseup",(()=>{this.#o=!0})),this.#n.value.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(this.#a=!0)}))}render(){return html`<div class="component"><slot class="target-slot" data-test="target-slot" name="target" @click="${this.#m}" @keydown="${this.#c}" @slotchange="${this.#u}" ${ref(this.#n)}></slot><div class="${classMap({popover:!0,[this.effectivePlacement]:!0})}" id="popover" data-test="popover" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>arrows.top],["right",()=>arrows.right],["bottom",()=>arrows.bottom],["left",()=>arrows.left]])}</div><slot class="default-slot" @slotchange="${this.#v}" ${ref(this.#t)}></slot></div></div>`}#e;#g;#t;#o;#l;#i;#r;#a;#h;#s;#n;#f;#p(){this.#s.value?.hidePopover(),this.#_&&(this.#_.ariaExpanded="false"),this.#g?.()}#v(){owSlot(this.#t.value)}#u(){owSlot(this.#n.value)}#m(){this.open=!this.open}#c(e){"Escape"===e.key&&(this.open=!1)}get#_(){return this.#n.value?.assignedElements().at(0)}#d(){this.disabled||(this.#g?.(),this.#n.value&&this.#s.value&&(this.#g=autoUpdate(this.#n.value,this.#s.value,(()=>{(async()=>{if(this.#n.value&&this.#s.value&&this.#e.value){const e=Number.parseFloat(window.getComputedStyle(this.#s.value).padding),{x:t,y:o,placement:l,middlewareData:i}=await computePosition(this.#n.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset-e-2),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:30})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${t}px`,top:`${o}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?i.arrow.x-e+"px":null,top:i.arrow?.y?i.arrow.y-e+"px":null}),this.effectivePlacement=l,this.#s.value.showPopover(),this.#_&&(this.#_.ariaExpanded="true")}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCorePopover.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"open",null),__decorate([property()],GlideCorePopover.prototype,"placement",void 0),__decorate([state()],GlideCorePopover.prototype,"effectivePlacement",void 0),GlideCorePopover=__decorate([customElement("glide-core-popover")],GlideCorePopover);export default GlideCorePopover;const arrows={top:html`<svg aria-hidden="true" viewBox="0 0 16 9" fill="none"><mask id="mask0_13064_691" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M16 6.99382e-07V9L0 9L3.93402e-07 0L16 6.99382e-07Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_691)"><g filter="url(#filter0_d_13064_691)"><path d="M8.76822 5.603C8.36842 6.13234 7.63157 6.13233 7.23178 5.60299L3 0L13 9.19407e-07L8.76822 5.603Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_13064_691" x="2" y="0" width="12" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_691"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13064_691" result="shape"/></filter></defs></svg>`,right:html`<svg aria-hidden="true" viewBox="0 0 9 16" fill="none"><mask id="mask0_13064_688" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M9 16H1.39876e-06L0 7.86805e-07L9 0L9 16Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_688)"><g filter="url(#filter0_d_13064_688)"><path d="M3.397 8.76822C2.86766 8.36843 2.86767 7.63157 3.39701 7.23178L9 3V13L3.397 8.76822Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_13064_688" x="2" y="3" width="8" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_688"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13064_688" result="shape"/></filter></defs></svg>`,bottom:html`<svg aria-hidden="true" viewBox="0 0 16 9" fill="none"><mask id="mask0_13064_685" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M0 9L1.07324e-07 0L16 1.90798e-07V9H0Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_685)"><g filter="url(#filter0_dd_13064_685)"><path d="M7.23178 3.397C7.63157 2.86766 8.36843 2.86767 8.76822 3.39701L13 9L3 9L7.23178 3.397Z" fill="currentColor"/></g></g><defs><filter id="filter0_dd_13064_685" x="-5" y="-2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_685"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="effect1_dropShadow_13064_685" result="effect2_dropShadow_13064_685"/><feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_13064_685" result="shape"/></filter></defs></svg>`,left:html`<svg aria-hidden="true" viewBox="0 0 9 16" fill="none"><mask id="mask0_12969_88361" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M0 0H9V16H0V0Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_12969_88361)"><g filter="url(#filter0_d_12969_88361)"><path d="M5.603 7.23178C6.13234 7.63157 6.13233 8.36843 5.60299 8.76822L0 13L4.82293e-07 3L5.603 7.23178Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_12969_88361" x="-1" y="3" width="8" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12969_88361"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12969_88361" result="shape"/></filter></defs></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,a=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(a=(r<3?i(a):r>3?i(t,o,a):i(t,o))||a);return r>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./popover.styles.js";let GlideCorePopover=class GlideCorePopover extends LitElement{constructor(){super(...arguments),this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=!1,this.#r=!1,this.#a=!1,this.#s=createRef(),this.#n=createRef(),this.#f=()=>{if(this.#l||this.#a||this.#o)return this.#l=!1,this.#a=!1,void(this.#o=!1);this.open=!1}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,this.open&&!e?this.#d():this.#p()}get offset(){return this.#h??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#h=e}get open(){return this.#r}set open(e){const t=e!==this.#r;this.#r=e,e&&t&&!this.disabled?(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#p(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}firstUpdated(){owSlot(this.#t.value),owSlot(this.#n.value),ow(this.#s.value,ow.object.instanceOf(HTMLElement)),this.#s.value.popover="manual",this.open&&!this.disabled&&this.#d(),this.#t.value.addEventListener("mouseup",(()=>{this.#l=!0})),this.#n.value.addEventListener("mouseup",(()=>{this.#a=!0})),this.#e.value?.addEventListener("mouseup",(()=>{this.#o=!0})),this.#n.value.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(this.#a=!0)}))}render(){return html`<div class="component"><slot class="target-slot" data-test="target-slot" name="target" @click="${this.#m}" @keydown="${this.#c}" @slotchange="${this.#u}" ${ref(this.#n)}></slot><div class="${classMap({popover:!0,[this.effectivePlacement]:!0})}" id="popover" data-test="popover" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><slot class="default-slot" @slotchange="${this.#v}" ${ref(this.#t)}></slot></div></div>`}#e;#g;#t;#o;#l;#i;#r;#a;#h;#s;#n;#f;#p(){this.#s.value?.hidePopover(),this.#_&&(this.#_.ariaExpanded="false"),this.#g?.()}#v(){owSlot(this.#t.value)}#u(){owSlot(this.#n.value)}#m(){this.open=!this.open}#c(e){"Escape"===e.key&&(this.open=!1)}get#_(){return this.#n.value?.assignedElements().at(0)}#d(){this.disabled||(this.#g?.(),this.#n.value&&this.#s.value&&(this.#g=autoUpdate(this.#n.value,this.#s.value,(()=>{(async()=>{if(this.#n.value&&this.#s.value&&this.#e.value){const e=Number.parseFloat(window.getComputedStyle(this.#s.value).padding),{x:t,y:o,placement:l,middlewareData:i}=await computePosition(this.#n.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset-e-2),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:30})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${t}px`,top:`${o}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?i.arrow.x-e+"px":null,top:i.arrow?.y?i.arrow.y-e+"px":null}),this.effectivePlacement=l,this.#s.value.showPopover(),this.#_&&(this.#_.ariaExpanded="true")}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCorePopover.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"open",null),__decorate([property()],GlideCorePopover.prototype,"placement",void 0),__decorate([state()],GlideCorePopover.prototype,"effectivePlacement",void 0),GlideCorePopover=__decorate([customElement("glide-core-popover")],GlideCorePopover);export default GlideCorePopover;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 16 9" fill="none"><mask id="mask0_13064_691" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M16 6.99382e-07V9L0 9L3.93402e-07 0L16 6.99382e-07Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_691)"><g filter="url(#filter0_d_13064_691)"><path d="M8.76822 5.603C8.36842 6.13234 7.63157 6.13233 7.23178 5.60299L3 0L13 9.19407e-07L8.76822 5.603Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_13064_691" x="2" y="0" width="0.75rem" height="0.625rem" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_691"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13064_691" result="shape"/></filter></defs></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 9 16" fill="none"><mask id="mask0_13064_688" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M9 16H1.39876e-06L0 7.86805e-07L9 0L9 16Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_688)"><g filter="url(#filter0_d_13064_688)"><path d="M3.397 8.76822C2.86766 8.36843 2.86767 7.63157 3.39701 7.23178L9 3V13L3.397 8.76822Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_13064_688" x="2" y="3" width="0.5rem" height="0.875rem" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_688"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13064_688" result="shape"/></filter></defs></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 16 9" fill="none"><mask id="mask0_13064_685" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M0 9L1.07324e-07 0L16 1.90798e-07V9H0Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_685)"><g filter="url(#filter0_dd_13064_685)"><path d="M7.23178 3.397C7.63157 2.86766 8.36843 2.86767 8.76822 3.39701L13 9L3 9L7.23178 3.397Z" fill="currentColor"/></g></g><defs><filter id="filter0_dd_13064_685" x="-5" y="-2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_685"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="effect1_dropShadow_13064_685" result="effect2_dropShadow_13064_685"/><feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_13064_685" result="shape"/></filter></defs></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 9 16" fill="none"><mask id="mask0_12969_88361" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M0 0H9V16H0V0Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_12969_88361)"><g filter="url(#filter0_d_12969_88361)"><path d="M5.603 7.23178C6.13234 7.63157 6.13233 8.36843 5.60299 8.76822L0 13L4.82293e-07 3L5.603 7.23178Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_12969_88361" x="-1" y="3" width="0.5rem" height="0.875rem" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12969_88361"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12969_88361" result="shape"/></filter></defs></svg>`};

package/dist/radio-group.d.ts

@@ -7,9 +7,9 @@ declare global {
     }
 }
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
- * @event invalid - `(event: Event) => void`
+ * @event change
+ * @event input
+ * @event invalid
  *
  * @slot - One or more of `<glide-core-radio>`.
  * @slot description - Additional information or context.
@@ -20,7 +20,6 @@ export default class GlideCoreRadioGroup extends LitElement {
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    description: string;
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
     hideLabel: boolean;

package/dist/radio-group.js

@@ -34,14 +34,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length
 
           <div id="description" slot="description">
             <slot
-              class=${classMap({description:!0,hidden:Boolean(this.#h&&this.validityMessage)})}
+              class=${classMap({"description-slot":!0,hidden:Boolean(this.#h&&this.validityMessage)})}
               name="description"
             ></slot>
 
-            ${when(this.#h&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
-                  >${unsafeHTML(this.validityMessage)}</span
-                >`))}
+            ${when(this.#h&&this.validityMessage,(()=>html`<div data-test="validity-message">
+                  ${unsafeHTML(this.validityMessage)}
+                </div>`))}
           </div>
         </glide-core-private-label>
       </div>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.description="",this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s="",this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}))}#d;#r;#o;#e;#i;#s;#a;get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#v(e){e.checked=!0,e.tabIndex=0,this.value=e.value,e.focus(),e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));return void e?.focus()}const t=e.target;if(t instanceof GlideCoreRadio&&t&&!t.disabled){const e=this.#t.filter((e=>e!==t));for(const t of e)t.checked=!1,t.tabIndex=-1;this.#v(t)}}#u(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreRadio])}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const t=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const i=[...this.#t],s=[...this.#t].slice(0,i.indexOf(t)).findLast((e=>!e.disabled)),o=i.findLast((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const i=[...this.#t],s=i.find(((e,s)=>!e.disabled&&s>i.indexOf(t))),o=i.find((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case" ":if(e.preventDefault(),!t.disabled&&!t.checked){this.#v(t);for(const e of this.#t)e!==t&&this.#m(e)}}}}#c(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreRadio)):[]}#p(e){e.target instanceof GlideCoreRadio&&e.target.checked&&!e.detail.old&&e.detail.new&&(this.value=e.target.value)}#f(e){e.target instanceof GlideCoreRadio&&e.target.checked&&e.detail.new?this.value=e.target.value:e.target instanceof GlideCoreRadio&&e.target.checked&&(this.value="")}#m(e){e.checked=!1,e.tabIndex=-1}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([state()],GlideCoreRadioGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"validityMessage",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s="",this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}))}#d;#r;#o;#e;#i;#s;#a;get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#v(e){e.checked=!0,e.tabIndex=0,this.value=e.value,e.focus(),e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));return void e?.focus()}const t=e.target;if(t instanceof GlideCoreRadio&&t&&!t.disabled){const e=this.#t.filter((e=>e!==t));for(const t of e)t.checked=!1,t.tabIndex=-1;this.#v(t)}}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const t=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const i=[...this.#t],s=[...this.#t].slice(0,i.indexOf(t)).findLast((e=>!e.disabled)),o=i.findLast((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const i=[...this.#t],s=i.find(((e,s)=>!e.disabled&&s>i.indexOf(t))),o=i.find((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case" ":if(e.preventDefault(),!t.disabled&&!t.checked){this.#v(t);for(const e of this.#t)e!==t&&this.#m(e)}}}}#u(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreRadio])}#c(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreRadio)):[]}#p(e){e.target instanceof GlideCoreRadio&&e.target.checked&&!e.detail.old&&e.detail.new&&(this.value=e.target.value)}#f(e){e.target instanceof GlideCoreRadio&&e.target.checked&&e.detail.new?this.value=e.target.value:e.target instanceof GlideCoreRadio&&e.target.checked&&(this.value="")}#m(e){e.checked=!1,e.tabIndex=-1}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([state()],GlideCoreRadioGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"validityMessage",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

package/dist/radio-group.radio.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,l=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,a);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(l=(o<3?r(l):o>3?r(t,i,l):r(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio-group.radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e.toString(),this.dispatchEvent(new CustomEvent("private-checked-change",{bubbles:!0,detail:{old:t,new:e}}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.ariaDisabled=e.toString()}get privateInvalid(){return this.#i}set privateInvalid(e){this.#i=e,this.ariaInvalid=e.toString()}get label(){return this.#a}set label(e){this.#a=e,this.ariaLabel=e.toString()}get privateRequired(){return this.#r}set privateRequired(e){this.#r=e,this.ariaRequired=e.toString()}get value(){return this.#o}set value(e){const t=this.#o;this.#o=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaLabel=this.label,this.ariaRequired=this.privateRequired.toString(),this.role="radio"}render(){return html`<span class="${classMap({component:!0,disabled:this.disabled})}" data-test="component"><span class="${classMap({"radio-circle":!0,checked:this.checked,animate:this.hasUpdated})}" data-test="radio"></span> ${this.#a}</span>`}#e=!1;#t=!1;#a="";#i=!1;#r=!1;#o=""};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"privateInvalid",null),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"privateRequired",null),__decorate([property()],GlideCoreRadio.prototype,"value",null),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;
+var __decorate=this&&this.__decorate||function(e,t,i,r){var a,o=arguments.length,l=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,r);else for(var d=e.length-1;d>=0;d--)(a=e[d])&&(l=(o<3?a(l):o>3?a(t,i,l):a(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./radio-group.radio.styles.js";let GlideCoreRadio=class GlideCoreRadio extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e.toString(),this.dispatchEvent(new CustomEvent("private-checked-change",{bubbles:!0,detail:{old:t,new:e}}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.ariaDisabled=e.toString()}get privateInvalid(){return this.#i}set privateInvalid(e){this.#i=e,this.ariaInvalid=e.toString()}get label(){return this.#r}set label(e){this.#r=e,this.ariaLabel=e.toString()}get privateRequired(){return this.#a}set privateRequired(e){this.#a=e,this.ariaRequired=e.toString()}get value(){return this.#o}set value(e){const t=this.#o;this.#o=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaLabel=this.label,this.ariaRequired=this.privateRequired.toString(),this.role="radio"}render(){return html`<div class="component" data-test="component"><div class="${classMap({circle:!0,checked:this.checked,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#r}</div>`}#e=!1;#t=!1;#r="";#i=!1;#a=!1;#o=""};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],GlideCoreRadio.prototype,"privateInvalid",null),__decorate([property({reflect:!0})],GlideCoreRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadio.prototype,"privateRequired",null),__decorate([property()],GlideCoreRadio.prototype,"value",null),GlideCoreRadio=__decorate([customElement("glide-core-radio")],GlideCoreRadio);export default GlideCoreRadio;

package/dist/radio-group.radio.styles.js

@@ -1,7 +1,12 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(":host(:focus-visible) .component .radio-circle")}
+    ${focusOutline(":host(:focus-visible) .component .circle")}
   `,css`
-    @keyframes animate-radio {
+    :host {
+      display: flex;
+      outline: none;
+    }
+
+    @keyframes circle {
       from {
         opacity: 0;
         transform: scale(0.5);
@@ -13,32 +18,27 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    :host {
-      display: flex;
-      outline: none;
-    }
-
     .component {
       align-items: center;
       color: var(--glide-core-text-body-1);
-      display: inline-flex;
+      display: flex;
       font-weight: var(--glide-core-body-md-font-weight);
-      line-height: 1;
 
-      & .radio-circle {
-        align-items: center;
-        appearance: none;
+      &:hover {
+        .circle {
+          border-color: var(--glide-core-border-focus);
+          box-shadow: var(--glide-core-glow-sm);
+        }
+      }
+
+      .circle {
         block-size: 1rem;
         border: 1px solid var(--glide-core-border-base-dark);
         border-radius: 50%;
         box-sizing: border-box;
-        content: ' ';
-        display: inline-flex;
         inline-size: 1rem;
-        margin: 0;
         margin-inline-end: 0.625rem;
         min-inline-size: 1rem;
-        padding: 0;
         position: relative;
         transition:
           border-color 200ms ease-in-out,
@@ -48,6 +48,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
           background-color: var(--glide-core-color-white);
           border-color: var(--glide-core-surface-primary);
 
+          &.animate {
+            @media (prefers-reduced-motion: no-preference) {
+              &::after {
+                animation: circle 250ms cubic-bezier(0.25, 0, 0.3, 1);
+              }
+            }
+          }
+
           &::after {
             background-color: var(--glide-core-surface-primary);
             block-size: 0.5rem;
@@ -62,27 +70,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
           }
         }
 
-        &.animate {
-          &.checked {
-            @media (prefers-reduced-motion: no-preference) {
-              &::after {
-                animation: animate-radio 250ms cubic-bezier(0.25, 0, 0.3, 1);
-              }
-            }
-          }
-        }
-      }
-
-      &:hover {
-        & .radio-circle {
-          border-color: var(--glide-core-border-focus);
-          box-shadow: var(--glide-core-glow-sm);
-        }
-      }
-
-      &.disabled,
-      &.disabled:hover {
-        & .radio-circle {
+        &.disabled {
           border-color: var(--glide-core-surface-primary-disabled);
           box-shadow: none;
           cursor: not-allowed;

package/dist/radio-group.styles.js

@@ -34,15 +34,11 @@ import{css}from"lit";export default[css`
       align-items: flex-start;
     }
 
-    .description {
+    .description-slot {
       display: block;
 
       &.hidden {
         display: none;
       }
     }
-
-    .validity-message {
-      display: block;
-    }
   `];

package/dist/split-button.d.ts

@@ -5,8 +5,9 @@ declare global {
     }
 }
 /**
- * @slot - One of `<glide-core-split-button-primary-button>` or `<glide-core-split-button-primary-link>`.
+ * @event toggle
  *
+ * @slot - One of `<glide-core-split-button-primary-button>` or `<glide-core-split-button-primary-link>`.
  * @slot secondary-button - One of `<glide-core-split-button-secondary-button>`.
  */
 export default class GlideCoreSplitButton extends LitElement {

package/dist/split-button.secondary-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var n,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(r<3?n(l):r>3?n(t,o,l):n(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./menu.options.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./split-button.secondary-button.styles.js";let GlideCoreSplitButtonSecondaryButton=class GlideCoreSplitButtonSecondaryButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.menuOpen=!1,this.menuPlacement="bottom-end",this.privateActive=!1,this.privateSize="large",this.privateVariant="primary",this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink]);const e=new MutationObserver((()=>{this.#o.value&&(this.menuOpen=this.#o.value.open)}));ow(this.#o.value,ow.object.instanceOf(GlideCoreMenu)),e.observe(this.#o.value,{attributes:!0,attributeFilter:["open"]})}render(){return html`<glide-core-menu placement="${this.menuPlacement}" size="${this.privateSize}" ?open="${this.menuOpen}" ${ref(this.#o)}><button aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,active:this.menuOpen,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="button" slot="target" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><svg aria-hidden="true" class="${classMap({chevron:!0,disabled:this.disabled})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><glide-core-menu-options><slot @slotchange="${this.#i}" ${ref(this.#t)}></slot></glide-core-menu-options></glide-core-menu>`}#e;#t;#o;#i(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"label",void 0),__decorate([property({attribute:"menu-open",reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"menuOpen",void 0),__decorate([property({attribute:"menu-placement",reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"menuPlacement",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateActive",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateSize",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateVariant",void 0),GlideCoreSplitButtonSecondaryButton=__decorate([customElement("glide-core-split-button-secondary-button")],GlideCoreSplitButtonSecondaryButton);export default GlideCoreSplitButtonSecondaryButton;
+var __decorate=this&&this.__decorate||function(e,t,o,n){var i,r=arguments.length,l=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(l=(r<3?i(l):r>3?i(t,o,l):i(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./menu.options.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import chevronIcon from"./icons/chevron.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./split-button.secondary-button.styles.js";let GlideCoreSplitButtonSecondaryButton=class GlideCoreSplitButtonSecondaryButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.menuOpen=!1,this.menuPlacement="bottom-end",this.privateActive=!1,this.privateSize="large",this.privateVariant="primary",this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink]);const e=new MutationObserver((()=>{this.#o.value&&(this.menuOpen=this.#o.value.open)}));ow(this.#o.value,ow.object.instanceOf(GlideCoreMenu)),e.observe(this.#o.value,{attributes:!0,attributeFilter:["open"]})}render(){return html`<glide-core-menu placement="${this.menuPlacement}" size="${this.privateSize}" ?open="${this.menuOpen}" ${ref(this.#o)}><button aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,active:this.menuOpen,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="button" slot="target" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}>${chevronIcon}</button><glide-core-menu-options><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></glide-core-menu-options></glide-core-menu>`}#e;#t;#o;#n(){owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"label",void 0),__decorate([property({attribute:"menu-open",reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"menuOpen",void 0),__decorate([property({attribute:"menu-placement",reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"menuPlacement",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateActive",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateSize",void 0),__decorate([state()],GlideCoreSplitButtonSecondaryButton.prototype,"privateVariant",void 0),GlideCoreSplitButtonSecondaryButton=__decorate([customElement("glide-core-split-button-secondary-button")],GlideCoreSplitButtonSecondaryButton);export default GlideCoreSplitButtonSecondaryButton;

package/dist/split-button.secondary-button.styles.js

@@ -29,8 +29,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         border-block-color: transparent;
         border-inline-end-color: transparent;
         border-inline-start-color: var(--glide-core-border-base-light);
-        color: var(--glide-core-text-tertiary-disabled);
         cursor: not-allowed;
+
+        svg {
+          color: var(--glide-core-text-tertiary-disabled);
+        }
       }
 
       &:focus {
@@ -72,7 +75,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         border-color: transparent;
         color: var(--glide-core-text-selected);
 
-        .chevron {
+        svg {
           color: var(--glide-core-icon-selected);
         }
       }
@@ -89,14 +92,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         /* So the box shadow isn't covered up by the primary button. */
         z-index: 1;
       }
-    }
-
-    .chevron {
-      &.disabled {
-        color: var(--glide-core-icon-tertiary-disabled);
-      }
 
-      &:not(.disabled) {
+      svg {
         color: var(--glide-core-icon-primary);
       }
     }

package/dist/tab.d.ts

@@ -5,8 +5,7 @@ declare global {
     }
 }
 /**
- *
- * @event selected - `(event: "selected", handler: (event: Event) => void) => void`.
+ * @event selected
  *
  * @slot - A label.
  * @slot icon - An optional icon.

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,s,o){var l,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,s,o);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(i<3?l(a):i>3?l(t,s,a):l(t,s))||a);return i>3&&a&&Object.defineProperty(t,s,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#e=createRef(),this.#t=100,this.#s=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#i=1,this.#a=createRef(),this.#r=createRef(),this.#n=null,this.#c=null,this.#h=null,this.#d=null,this.#b=null,this.#f=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selectedTab(){return this.#b}set selectedTab(e){this.#n=this.#b,this.#b=e}disconnectedCallback(){this.#c?.disconnect(),this.#c=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#s.value,[GlideCoreTabPanel]),this.#u()}render(){return html`<div class="component" @click="${this.#m}" @keydown="${this.#v}" ${ref(this.#e)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#f)} @scroll="${this.#w}" @focusout="${this.#T}" tabindex="-1"><slot name="nav" @slotchange="${this.#E}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#S}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#a)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#R}" ${ref(this.#s)}></slot></div>`}updated(){this.#g()}#e;#t;#s;#o;#l;#i;#a;#r;#n;#c;#h;#d;#b;#f;get#O(){return[...this.querySelectorAll("glide-core-tab-panel")]}get#B(){return[...this.querySelectorAll("glide-core-tab")]}#m(e){const t=e.target.closest("glide-core-tab");t&&t instanceof GlideCoreTab&&!t.disabled&&this.#y(t)}#S(){this.#C("right")}#p(){this.#C("left")}#R(){owSlotType(this.#s.value,[GlideCoreTabPanel])}#T(){for(const[,e]of this.#B.entries())e.tabIndex=e===this.selectedTab?0:-1}#v(e){const t=e.target.closest("glide-core-tab");if(["Enter"," "].includes(e.key)&&t&&t instanceof GlideCoreTab&&!t.disabled&&(this.#y(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=this.#B.find((e=>e.matches(":focus")));if(t instanceof GlideCoreTab){let s=this.#B.indexOf(t);switch(e.key){case"Home":s=0;break;case"End":s=this.#B.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#B.length-1),s>this.#B.length-1&&(s=0),this.#B[s].focus({preventScroll:!1});for(const[,e]of this.#B.entries())e.tabIndex=this.#B[s]===e?0:-1;this.#L(),e.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#g(),this.#G(),this.#L()}#w(){this.#d&&clearTimeout(this.#d),this.#d=setTimeout((()=>{this.#L()}),this.#t)}#C(e){const t="right"===e?1:-1;ow(this.#f.value,ow.object.instanceOf(HTMLElement));const s=t*this.#f.value?.clientWidth*.5;this.#f.value?.scrollBy({left:s,top:0})}#$(){const e=this.#f.value,t=e?.getBoundingClientRect();if(ow(e,ow.object.instanceOf(HTMLElement)),t){const{width:s}=t,o=e.scrollLeft+s,l=e.scrollWidth;this.isDisableOverflowEndButton=l-o<=this.#i}}#L(){const e=this.#f.value,t=e?.getBoundingClientRect();if(e&&t){const{width:s}=t;this.isShowOverflowButtons=e.scrollWidth-s>this.#i}this.#k(),this.#$()}#G(){for(const[e,t]of this.#B.entries())this.selectedTab||0!==e?(t.selected=this.selectedTab===t,t.tabIndex=this.selectedTab===t?0:-1):(this.selectedTab=t,this.selectedTab.selected=!0,this.selectedTab.tabIndex=0);for(const e of this.#O){const t=this.selectedTab?.getAttribute("panel"),s=e.getAttribute("name");e.privateIsSelected=s===t,e.tabIndex=s===t?0:-1}if(this.selectedTab!==this.#n&&this.selectedTab&&this.#B.length>0&&this.#e.value){const e=Number.parseInt(window.getComputedStyle(this.selectedTab).getPropertyValue("padding-inline-start")),t=this.selectedTab===this.#B.at(0)?e:this.selectedTab.offsetLeft-this.#B[0].offsetLeft;this.#e.value.style.setProperty("--selected-tab-indicator-translate",`${t}px`);const s=this.selectedTab===this.#B.at(0)||this.selectedTab===this.#B.at(-1)?e:0,{width:o}=this.selectedTab.getBoundingClientRect();this.#e.value.style.setProperty("--selected-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#k(){ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#f.value.scrollLeft<=0}#u(){this.#c=new ResizeObserver((e=>{e?.at(0)?.target===this.#f.value&&(this.#h&&clearTimeout(this.#h),this.#h=setTimeout((()=>{this.#L()}),this.#t))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#c.observe(this.#f.value)}#g(){for(const e of this.#B){const t=this.#O.filter((t=>t.name===e.panel))?.at(0);t?.id&&(e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id))}}#y(e){this.selectedTab=e,this.#G(),e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}};__decorate([state()],GlideCoreTabGroup.prototype,"selectedTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;
+var __decorate=this&&this.__decorate||function(e,t,s,o){var l,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,s,o);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(a=(i<3?l(a):i>3?l(t,s,a):l(t,s))||a);return i>3&&a&&Object.defineProperty(t,s,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import chevronIcon from"./icons/chevron.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#e=createRef(),this.#t=100,this.#s=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#i=1,this.#a=createRef(),this.#n=createRef(),this.#r=null,this.#c=null,this.#h=null,this.#d=null,this.#b=null,this.#f=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selectedTab(){return this.#b}set selectedTab(e){this.#r=this.#b,this.#b=e}disconnectedCallback(){this.#c?.disconnect(),this.#c=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#s.value,[GlideCoreTabPanel]),this.#u()}render(){return html`<div class="component" @click="${this.#m}" @keydown="${this.#v}" ${ref(this.#e)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({"overflow-button":!0,start:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#o.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}">${chevronIcon}</button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#f)} @scroll="${this.#w}" @focusout="${this.#T}" tabindex="-1"><slot name="nav" @slotchange="${this.#E}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#f.value?.clientHeight}px" class="${classMap({"overflow-button":!0,end:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#S}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#a)} ?disabled="${this.isDisableOverflowEndButton}">${chevronIcon}</button>`))}</div><slot @slotchange="${this.#R}" ${ref(this.#s)}></slot></div>`}updated(){this.#O()}#e;#t;#s;#o;#l;#i;#a;#n;#r;#c;#h;#d;#b;#f;get#g(){return[...this.querySelectorAll("glide-core-tab-panel")]}get#y(){return[...this.querySelectorAll("glide-core-tab")]}#m(e){const t=e.target.closest("glide-core-tab");t&&t instanceof GlideCoreTab&&!t.disabled&&this.#B(t)}#S(){this.#C("right")}#p(){this.#C("left")}#R(){owSlotType(this.#s.value,[GlideCoreTabPanel])}#T(){for(const[,e]of this.#y.entries())e.tabIndex=e===this.selectedTab?0:-1}#v(e){const t=e.target.closest("glide-core-tab");if(["Enter"," "].includes(e.key)&&t&&t instanceof GlideCoreTab&&!t.disabled&&(this.#B(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=this.#y.find((e=>e.matches(":focus")));if(t instanceof GlideCoreTab){let s=this.#y.indexOf(t);switch(e.key){case"Home":s=0;break;case"End":s=this.#y.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#y.length-1),s>this.#y.length-1&&(s=0),this.#y[s].focus({preventScroll:!1});for(const[,e]of this.#y.entries())e.tabIndex=this.#y[s]===e?0:-1;this.#L(),e.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#O(),this.#G(),this.#L()}#w(){this.#d&&clearTimeout(this.#d),this.#d=setTimeout((()=>{this.#L()}),this.#t)}#C(e){const t="right"===e?1:-1;ow(this.#f.value,ow.object.instanceOf(HTMLElement));const s=t*this.#f.value?.clientWidth*.5;this.#f.value?.scrollBy({left:s,top:0})}#$(){const e=this.#f.value,t=e?.getBoundingClientRect();if(ow(e,ow.object.instanceOf(HTMLElement)),t){const{width:s}=t,o=e.scrollLeft+s,l=e.scrollWidth;this.isDisableOverflowEndButton=l-o<=this.#i}}#L(){const e=this.#f.value,t=e?.getBoundingClientRect();if(e&&t){const{width:s}=t;this.isShowOverflowButtons=e.scrollWidth-s>this.#i}this.#D(),this.#$()}#G(){for(const[e,t]of this.#y.entries())this.selectedTab||0!==e?(t.selected=this.selectedTab===t,t.tabIndex=this.selectedTab===t?0:-1):(this.selectedTab=t,this.selectedTab.selected=!0,this.selectedTab.tabIndex=0);for(const e of this.#g){const t=this.selectedTab?.getAttribute("panel"),s=e.getAttribute("name");e.privateIsSelected=s===t,e.tabIndex=s===t?0:-1}if(this.selectedTab!==this.#r&&this.selectedTab&&this.#y.length>0&&this.#e.value){const e=Number.parseInt(window.getComputedStyle(this.selectedTab).getPropertyValue("padding-inline-start")),t=this.selectedTab===this.#y.at(0)?e:this.selectedTab.offsetLeft-this.#y[0].offsetLeft;this.#e.value.style.setProperty("--selected-tab-indicator-translate",`${t}px`);const s=this.selectedTab===this.#y.at(0)||this.selectedTab===this.#y.at(-1)?e:0,{width:o}=this.selectedTab.getBoundingClientRect();this.#e.value.style.setProperty("--selected-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#D(){ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#f.value.scrollLeft<=0}#u(){this.#c=new ResizeObserver((e=>{e?.at(0)?.target===this.#f.value&&(this.#h&&clearTimeout(this.#h),this.#h=setTimeout((()=>{this.#L()}),this.#t))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#c.observe(this.#f.value)}#O(){for(const e of this.#y){const t=this.#g.filter((t=>t.name===e.panel))?.at(0);t?.id&&(e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id))}}#B(e){this.selectedTab=e,this.#G(),e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}};__decorate([state()],GlideCoreTabGroup.prototype,"selectedTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;