@crowdstrike/glide-core 0.14.1 → 0.15.0

package/dist/icons/magnifying-glass.js

@@ -1 +1 @@
-import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" data-test="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;
+import{svg}from"lit/static-html.js";export default svg`<svg class="search-icon" data-test="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display: block;"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;

package/dist/inline-alert.d.ts

@@ -0,0 +1,29 @@
+import './icon-button.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-inline-alert': GlideCoreInlineAlert;
+    }
+}
+/**
+ * @event remove - `(event: Event) => void`
+ *
+ * @slot - The content of the Inline Alert.
+ */
+export default class GlideCoreInlineAlert extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    variant: keyof typeof icons;
+    removable?: boolean | undefined;
+    firstUpdated(): void;
+    focus(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare const icons: {
+    informational: import("lit").TemplateResult;
+    medium: import("lit").TemplateResult<2>;
+    high: import("lit").TemplateResult<2>;
+    critical: import("lit").TemplateResult<2>;
+};
+export {};

package/dist/inline-alert.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(n<3?l(r):n>3?l(t,o,r):l(t,o))||r);return n>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.js";import{LitElement,html,svg}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,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import{when}from"lit/directives/when.js";import informationalIcon from"./icons/informational.js";import styles from"./inline-alert.styles.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.#e=100,this.#t=createRef(),this.#o=createRef(),this.#i=!1,this.#l=new LocalizeController(this),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#o.value),this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#n.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot @slotchange="${this.#r}" ${ref(this.#o)}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#l.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#a}" @keydown="${this.#s}" ${ref(this.#n)}><svg width="16" height="16" viewBox="0 0 14 14" fill="none"><path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#l;#n;#r(){owSlot(this.#o.value)}#a(){this.#i?this.#i=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#s(e){["Enter"," "].includes(e.key)&&(this.#i=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert")],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:informationalIcon,medium:svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`,high:svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`};

package/dist/inline-alert.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/inline-alert.styles.js

@@ -0,0 +1,100 @@
+import{css}from"lit";export default[css`
+    .component {
+      align-items: flex-start;
+      border: 1px solid;
+      border-radius: var(--glide-core-spacing-sm);
+      color: var(--glide-core-text-body-2);
+      display: flex;
+      font-family: var(--glide-core-body-sm-font-family);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      gap: var(--glide-core-spacing-xs);
+      line-height: var(--glide-core-body-sm-line-height);
+      padding: var(--glide-core-spacing-sm);
+
+      &.informational {
+        background-color: var(--glide-core-surface-informational);
+        border-color: var(--glide-core-border-informational);
+      }
+
+      &.medium {
+        background-color: var(--glide-core-surface-warning);
+        border-color: var(--glide-core-border-attention);
+      }
+
+      &.high {
+        background-color: var(--glide-core-surface-warning);
+        border-color: var(--glide-core-border-warning);
+      }
+
+      &.critical {
+        background-color: var(--glide-core-surface-error);
+        border-color: var(--glide-core-border-error);
+      }
+
+      &.added {
+        animation: fade-in var(--animation-duration) ease-in-out;
+      }
+
+      &.removed {
+        animation-duration: var(--animation-duration);
+        animation-fill-mode: forwards;
+        animation-name: fade-out;
+        animation-timing-function: ease-in-out;
+      }
+    }
+
+    @keyframes fade-in {
+      0% {
+        opacity: 0;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes fade-out {
+      0% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+      }
+    }
+
+    .icon-container {
+      block-size: 1rem;
+      inline-size: 1rem;
+
+      &.informational {
+        color: var(--glide-core-status-warning-informational);
+      }
+
+      &.medium {
+        color: var(--glide-core-status-warning-medium);
+      }
+
+      &.high {
+        color: var(--glide-core-status-warning-high);
+      }
+
+      &.critical {
+        color: var(--glide-core-status-warning-critical);
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-grow: 1;
+      overflow-wrap: anywhere;
+    }
+
+    .removal-button {
+      --icon-color: var(--glide-core-icon-default2);
+
+      align-self: flex-start;
+      transition: color 200ms ease-in-out;
+    }
+  `];

package/dist/input.d.ts

@@ -50,8 +50,6 @@ export default class GlideCoreInput extends LitElement {
     disconnectedCallback(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
-    get hasClearIcon(): boolean;
-    get isClearIconVisible(): boolean;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;

package/dist/input.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(o=(r<3?a(o):r>3?a(e,i,o):a(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}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,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["date","email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`
+var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}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,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["date","email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
       <glide-core-private-label
         class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
         orientation=${this.orientation}
@@ -31,21 +31,21 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length
             ?required=${this.required}
             ?readonly=${this.readonly}
             ?disabled=${this.disabled}
-            @focus=${this.#r}
-            @blur=${this.#o}
+            @focus=${this.#o}
+            @blur=${this.#r}
             @change=${this.#l}
             @input=${this.#n}
             @keydown=${this.#d}
             ${ref(this.#e)}
           />
 
-          ${this.hasClearIcon?html`
+          ${this.#h?html`
                 <glide-core-icon-button
                   variant="tertiary"
-                  class=${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}
+                  class=${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.#p})}
                   data-test="clear-button"
-                  label=${this.#h.term("clearEntry",this.label)}
-                  @click=${this.#p}
+                  label=${this.#c.term("clearEntry",this.label)}
+                  @click=${this.#u}
                 >
                   <!-- X icon -->
                   <svg
@@ -79,7 +79,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length
                   label=${this.passwordVisible?"Hide password":"Show password"}
                   aria-controls="input"
                   aria-expanded=${this.passwordVisible?"true":"false"}
-                  @click=${this.#c}
+                  @click=${this.#v}
                 >
                   ${this.passwordVisible?html`<svg
                         aria-hidden="true"
@@ -143,14 +143,14 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,r=arguments.length
                     more accesible, verbose description below.
                   -->
                   <span aria-hidden="true" data-test="character-count-text">
-                    ${this.#h.term("displayedCharacterCount",this.#u,this.maxlength)}
+                    ${this.#c.term("displayedCharacterCount",this.#y,this.maxlength)}
                   </span>
 
                   <span class="hidden" data-test="character-count-announcement"
-                    >${this.#h.term("announcedCharacterCount",this.#u,this.maxlength)}</span
+                    >${this.#c.term("announcedCharacterCount",this.#y,this.maxlength)}</span
                   >
                 </div>
               `:nothing}
         </div>
       </glide-core-private-label>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#h=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#h;get#u(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#u>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#o(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(t){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value?.value,this.dispatchEvent(new Event(t.type,t))}#p(t){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.hasFocus=!0}#n(){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value.value}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#c(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#h(){return this.clearable&&!this.disabled&&!this.readonly}get#p(){return this.#h&&this.value.length>0}get#y(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#y>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(t){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value?.value,this.dispatchEvent(new Event(t.type,t))}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#o(){this.hasFocus=!0}#n(){ow(this.#e.value,ow.object.instanceOf(HTMLInputElement)),this.value=this.#e.value.value}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#v(){this.passwordVisible=!this.passwordVisible}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;

package/dist/library/localize.d.ts

@@ -23,4 +23,5 @@ export interface Translation extends DefaultTranslation {
     removeTag: (name: string) => string;
     actionsFor: (label: string) => string;
     itemCount: (count: string) => string;
+    closeInlineAlert: (variant: string) => string;
 }

package/dist/menu.button.d.ts

@@ -11,8 +11,11 @@ export default class GlideCoreMenuButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
     label?: string;
     privateActive: boolean;
+    click(): void;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/menu.button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var n,i=arguments.length,s=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(n=t[l])&&(s=(i<3?n(s):i>3?n(e,o,s):n(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./menu.button.styles.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive})}" data-test="component" type="button"><slot name="icon"></slot>${this.label}</button>`}#t};__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var s,n=arguments.length,r=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(n<3?s(r):n>3?s(t,o,r):s(t,o))||r);return n>3&&r&&Object.defineProperty(t,o,r),r};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./menu.button.styles.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=createRef(),this.#t=nanoid(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" ?disabled="${this.disabled}" data-test="component" type="button" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</button>`}#e;#t;#o};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuButton.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;

package/dist/menu.button.styles.js

@@ -4,7 +4,6 @@ import{css}from"lit";export default[css`
       background-color: transparent;
       border: none;
       border-radius: var(--glide-core-spacing-sm);
-      cursor: pointer;
       display: flex;
       font: inherit;
       gap: var(--gap);
@@ -17,5 +16,14 @@ import{css}from"lit";export default[css`
       &.active {
         background-color: var(--glide-core-surface-hover);
       }
+
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+      }
+
+      &:not(.disabled) {
+        color: var(--glide-core-text-body-1);
+        cursor: pointer;
+      }
     }
   `];

package/dist/menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s="large",this.#l=createRef(),this.#a=()=>{this.#n?this.#n=!1:(this.open=!1,this.#r&&(this.#r.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){this.#o=e,e&&!this.isTargetDisabled?this.#h():this.#p()}get size(){return this.#s}set size(e){this.#s=e,this.#r&&(this.#r.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#d=super.createRenderRoot(),this.#d}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#l.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual";const e=this.#m?.at(0);this.open&&e&&!this.isTargetDisabled&&(e.privateActive=!0,this.#h()),this.#l.value.addEventListener("mouseup",(()=>{this.#n=!0}))}get isTargetDisabled(){const e=this.#u&&"disabled"in this.#u&&this.#u.disabled,t=this.#u&&"true"===this.#u.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#f}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#E}" @keydown="${this.#v}" @slotchange="${this.#g}" ${ref(this.#l)}></slot><slot class="default-slot" @click="${this.#S}" @focusin="${this.#w}" @keydown="${this.#v}" @mouseover="${this.#C}" @private-slot-change="${this.#y}" @slotchange="${this.#R}" ${ref(this.#t)}></slot></div>`}#k;#e;#t;#i;#o;#n;#c;#d;#s;#l;get#O(){return this.#m?.find((({privateActive:e})=>e))}#a;#b(e){this.#u&&"focus"in this.#u&&this.#u?.focus(e)}#p(){this.#k?.(),this.#r&&(this.#r.ariaActivedescendant=""),this.#u&&(this.#u.ariaExpanded="false"),this.#t.value?.hidePopover()}get#r(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#R(){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#r.privateSize=this.size}#S(){this.open=!1}#w(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#O&&this.#r&&(this.#O.privateActive=!1,e.target.privateActive=!0,this.#r.ariaActivedescendant=e.target.id)}#C(e){if(e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton){if(this.#m)for(const t of this.#m)t.privateActive=t===e.target;this.#r&&(this.#r.ariaActivedescendant=e.target.id)}}#f(e){const t=e.relatedTarget instanceof HTMLElement&&this.#d?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#y(){const e=this.#m?.find((({privateActive:e})=>e)),t=this.#m?.at(0);!e&&t&&(t.privateActive=!0)}#v(e){ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#u instanceof HTMLSpanElement||this.#u instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#b(),this.#O?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#b();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#O)return e.preventDefault(),this.open=!0,void(this.#r.ariaActivedescendant=this.#O.id);if(this.open){ow(this.#m,ow.array),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#O,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#m.indexOf(this.#O);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t-1);return void(i&&0!==t&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#m.at(t+1);return void(i&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=this.#m.at(0);return void(t&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=this.#m.at(-1);return void(t&&(this.#O.privateActive=!1,this.#r.ariaActivedescendant=t.id,t.privateActive=!0))}}}#g(){owSlot(this.#l.value),ow(this.#u,ow.object.instanceOf(Element)),ow(this.#r,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#h():this.#p()})).observe(this.#u,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#u.ariaHasPopup="true",this.#u.id=nanoid(),this.#u.setAttribute("aria-controls",this.#r.id),this.#r.ariaLabelledby=this.#u.id;(this.#u instanceof HTMLSpanElement||this.#u instanceof HTMLDivElement)&&this.#u instanceof HTMLElement&&(this.#u.tabIndex=0),this.open&&!this.isTargetDisabled?this.#h():this.#p()}#E(){this.isTargetDisabled?this.#p():this.#i?this.#i=!1:this.#m&&this.#m.length>0&&(this.open=!this.open)}get#m(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#h(){this.#k?.(),this.#u&&this.#t.value&&(this.#k=autoUpdate(this.#u,this.#t.value,(()=>{(async()=>{if(this.#u&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#u,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#r&&this.#O?.id&&(this.#r.ariaActivedescendant=this.#O.id),this.#u&&(this.#u.ariaExpanded="true")})()})))}get#u(){return this.#l.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./menu.styles.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#d&&(this.#d.ariaActivedescendant=""))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}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.#s}set open(e){this.#s=e,e&&!this.isTargetDisabled?this.#p():this.#f()}get size(){return this.#a}set size(e){this.#a=e,this.#d&&(this.#d.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlot(this.#r.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#p(),this.#r.value.addEventListener("mouseup",(()=>{this.#l=!0})),this.#t.value.addEventListener("mousedown",(e=>{e.target===this.#t.value&&e.preventDefault()})),this.#t.value.addEventListener("mouseup",(e=>{if(e.target!==this.#t.value){if(e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}}else this.#o=!0}))}get isTargetDisabled(){const e=this.#m&&"disabled"in this.#m&&this.#m.disabled,t=this.#m&&"true"===this.#m.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#E}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#S}" ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#C}" @focusin="${this.#w}" @keydown="${this.#g}" @mouseover="${this.#k}" @private-disabled="${this.#b}" @private-slot-change="${this.#y}" @slotchange="${this.#O}" ${ref(this.#t)}></slot></div>`}#R;#e;#t;#i;#o;#n;#s;#l;#h;#u;#a;#r;get#D(){return this.#M?.find((({privateActive:e})=>e))}#c;#A(e){this.#m&&"focus"in this.#m&&this.#m?.focus(e)}#f(){this.#R?.(),this.#d&&(this.#d.ariaActivedescendant=""),this.#m&&(this.#m.ariaExpanded="false"),this.#t.value?.hidePopover()}get#d(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}#O(){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),owSlot(this.#t.value),owSlotType(this.#t.value,[GlideCoreMenuOptions]),this.#d.privateSize=this.size}#C(e){e.target!==this.#t.value&&(this.open=!1)}#w(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#D&&this.#d&&!e.target.disabled&&(this.#D.privateActive=!1,e.target.privateActive=!0,this.#d.ariaActivedescendant=e.target.id)}#k(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#M)for(const t of this.#M)t.privateActive=t===e.target;this.#d&&(this.#d.ariaActivedescendant=e.target.id)}}#E(e){const t=e.relatedTarget instanceof HTMLElement&&this.#u?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#b(){if(this.#M&&this.#D){const e=this.#M.indexOf(this.#D);this.#D.privateActive=!1;const t=this.#M?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#M.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#y(){const e=this.#M?.find((e=>!e.disabled));!this.#D&&e&&(e.privateActive=!0)}#g(e){ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions));const t=this.#m instanceof HTMLSpanElement||this.#m instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#A(),this.#D?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#A();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#D)return e.preventDefault(),this.open=!0,void(this.#d.ariaActivedescendant=this.#D.id);if(this.open){ow(this.#M,ow.array),ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions)),ow(this.#D,ow.object.is((e=>e instanceof GlideCoreMenuButton||e instanceof GlideCoreMenuLink)));const t=this.#M.indexOf(this.#D);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#M.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#M.find(((e,i)=>!e.disabled&&i>t));return void(i&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#M].reverse().findLast((e=>!e.disabled));return void(t&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#M].findLast((e=>!e.disabled));return void(t&&(this.#D.privateActive=!1,this.#d.ariaActivedescendant=t.id,t.privateActive=!0))}}}#S(){owSlot(this.#r.value),ow(this.#m,ow.object.instanceOf(Element)),ow(this.#d,ow.object.instanceOf(GlideCoreMenuOptions));new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#p():this.#f()})).observe(this.#m,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#m.ariaHasPopup="true",this.#m.id=nanoid(),this.#m.setAttribute("aria-controls",this.#d.id),this.#d.ariaLabelledby=this.#m.id;(this.#m instanceof HTMLSpanElement||this.#m instanceof HTMLDivElement)&&this.#m instanceof HTMLElement&&(this.#m.tabIndex=0),this.open&&!this.isTargetDisabled?this.#p():this.#f()}#v(){this.isTargetDisabled?this.#f():this.#i?this.#i=!1:this.#M&&this.#M.length>0&&(this.open=!this.open)}get#M(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#p(){this.#R?.(),this.#m&&this.#t.value&&(this.#R=autoUpdate(this.#m,this.#t.value,(()=>{(async()=>{if(this.#m&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#m,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#d&&this.#D?.id&&(this.#d.ariaActivedescendant=this.#D.id),this.#m&&(this.#m.ariaExpanded="true")})()})))}get#m(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;

package/dist/menu.link.d.ts

@@ -11,6 +11,8 @@ export default class GlideCoreMenuLink extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
     label?: string;
     url?: string;
     privateActive: boolean;

package/dist/menu.link.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,l=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,i,l):r(t,i))||l);return n>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=createRef(),this.#t=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive})}" data-test="component" href="${ifDefined(this.url)}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,i,l):r(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import styles from"./menu.link.styles.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.#e=createRef(),this.#t=nanoid(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.disabled||this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" href="${ifDefined(this.url)}" @click="${this.#o}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t;#i;#o(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuLink.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;

package/dist/menu.link.styles.js

@@ -5,7 +5,6 @@ import{css}from"lit";export default[css`
       border: none;
       border-radius: var(--glide-core-spacing-sm);
       box-sizing: border-box;
-      color: inherit;
       display: flex;
       font: inherit;
       gap: var(--gap);
@@ -19,5 +18,15 @@ import{css}from"lit";export default[css`
       &.active {
         background-color: var(--glide-core-surface-hover);
       }
+
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+        cursor: default;
+      }
+
+      &:not(.disabled) {
+        color: var(--glide-core-text-body-1);
+        cursor: pointer;
+      }
     }
   `];

package/dist/radio-group.js

@@ -42,4 +42,4 @@ var __decorate=this&&this.__decorate||function(e,i,t,s){var o,a=arguments.length
           </div>
         </glide-core-private-label>
       </div>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#e.setValidity({customError:!1},"",this.#d.value):this.#e.setValidity({customError:!0,valueMissing:this.#e.validity.valueMissing}," ",this.#d.value)}setValidity(e,i){this.validityMessage=i,this.#e.setValidity(e," ",this.#d.value)}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#u(),this.#f(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#m(),e.has("disabled")){for(const e of this.#o)this.#v(this.disabled,e);!this.disabled&&this.#R()}if(e.has("value"))for(const e of this.#o)e.checked=e.value===this.value}}constructor(){super(),this.description="",this.disabled=!1,this.label="",this.hideLabel=!1,this.name="",this.required=!1,this.value="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#s=createRef(),this.#t=void 0,this.#i=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",this.#b)}#d;#s;#t;#e;#y;#i;#a(){const e=this.#o.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#y=e??this.#t,this.required&&this.#m();for(const e of this.#o)this.disabled?this.#v(this.disabled,e):this.#v(e.disabled,e),e.addEventListener("blur",this.#C.bind(this));!this.disabled&&this.#R()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#f(e),e}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#y&&!this.#y.disabled)return void this.#y?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#r(!0,i);for(const e of this.#o)e!==i&&this.#r(!1,e)}}#p(){owSlot(this.#s.value),owSlotType(this.#s.value,[GlideCoreRadio]),this.#a()}#b(e){if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let t=i.previousElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#o.at(-1);e&&(t=e)}else t=t.previousElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#r(!1,i),this.#r(!0,t));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let t=i.nextElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#o.at(0);e&&(t=e)}else t=t.nextElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#r(!1,i),this.#r(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#r(!0,i);for(const e of this.#o)e!==i&&this.#r(!1,e)}}}}#C(e){const i=e.relatedTarget;i&&i instanceof GlideCoreRadio&&this.#o.includes(i)||this.#c()}#u(){const e=this.#o.find((e=>e.checked));this.required&&!e?this.#e.setValidity({valueMissing:!0}," ",this.#d.value):this.#e.setValidity({})}get#o(){return this.#s.value?.assignedElements().filter((e=>e instanceof GlideCoreRadio))??[]}#r(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#y=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#v(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#f(e){for(const i of this.#o)i.invalid=e}#R(){if(this.disabled||this.#o.every((e=>e.disabled)))return;let e=null;const i=this.#o.find((e=>!e.disabled&&e.checked));if(i)e=i;else{const i=this.#o.find((e=>!e.disabled));i&&(e=i)}if(e)for(const i of this.#o)i.tabIndex=i===e?0:-1}#m(){for(const e of this.#o)e.required=this.required}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"disabled",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"value",void 0),__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.#e.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#e.setValidity({customError:!1},"",this.#d.value):this.#e.setValidity({customError:!0,valueMissing:this.#e.validity.valueMissing}," ",this.#d.value)}setValidity(e,i){this.validityMessage=i,this.#e.setValidity(e," ",this.#d.value)}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#u(),this.#f(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#m(),e.has("disabled")){for(const e of this.#o)this.#v(this.disabled,e);!this.disabled&&this.#R()}if(e.has("value"))for(const e of this.#o)e.checked=e.value===this.value}}constructor(){super(),this.description="",this.disabled=!1,this.label="",this.hideLabel=!1,this.name="",this.required=!1,this.value="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#s=createRef(),this.#t=void 0,this.#i=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",this.#b)}#d;#s;#t;#e;#y;#i;#a(){const e=this.#o.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#y=e??this.#t,this.required&&this.#m();for(const e of this.#o)this.disabled?this.#v(this.disabled,e):this.#v(e.disabled,e),e.addEventListener("blur",this.#C.bind(this));!this.disabled&&this.#R()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#f(e),e}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#y&&!this.#y.disabled)return void this.#y?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#r(!0,i);for(const e of this.#o)e!==i&&this.#r(!1,e)}}#p(){owSlot(this.#s.value),owSlotType(this.#s.value,[GlideCoreRadio]),this.#a()}#b(e){if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();let t=i.previousElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#o.at(-1);e&&(t=e)}else t=t.previousElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#r(!1,i),this.#r(!0,t));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let t=i.nextElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#o.at(0);e&&(t=e)}else t=t.nextElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#r(!1,i),this.#r(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#r(!0,i);for(const e of this.#o)e!==i&&this.#r(!1,e)}}}}#C(e){const i=e.relatedTarget;i&&i instanceof GlideCoreRadio&&this.#o.includes(i)||this.#c()}#u(){const e=this.#o.find((e=>e.checked));this.required&&!e?this.#e.setValidity({valueMissing:!0}," ",this.#d.value):this.#e.setValidity({})}get#o(){return this.#s.value?.assignedElements().filter((e=>e instanceof GlideCoreRadio))??[]}#r(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#y=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}#v(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#f(e){for(const i of this.#o)i.invalid=e}#R(){if(this.disabled||this.#o.every((e=>e.disabled)))return;let e=null;const i=this.#o.find((e=>!e.disabled&&e.checked));if(i)e=i;else{const i=this.#o.find((e=>!e.disabled));i&&(e=i)}if(e)for(const i of this.#o)i.tabIndex=i===e?0:-1}#m(){for(const e of this.#o)e.required=this.required}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"disabled",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"value",void 0),__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/styles/variables.css

@@ -1 +1 @@
-:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-radius-zero: 0rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-sm: .0625rem;--glide-core-border-width-zero: 0rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-attention: #f8f0d1;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-error: #ffdcda;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-informational: #d7e7ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-border-warning: #ffebce;--glide-core-data-viz-cobalt-cobalt: #5183df;--glide-core-data-viz-cyan-cyan: #299ed1;--glide-core-data-viz-gold-gold: #cc8519;--glide-core-data-viz-gray-dark: #424242;--glide-core-data-viz-gray-darker: #212121;--glide-core-data-viz-gray-default: #6d6d6d;--glide-core-data-viz-gray-light: #8a8a8a;--glide-core-data-viz-gray-lighter: #c9c9c9;--glide-core-data-viz-gray-lightest: #f0f0f0;--glide-core-data-viz-gray-x-lighter: #e3e3e3;--glide-core-data-viz-indigo-indigo: #6563d9;--glide-core-data-viz-lilac-lilac: #ce66e5;--glide-core-data-viz-magenta-magenta: #f9338b;--glide-core-data-viz-moss-moss: #959328;--glide-core-data-viz-olive-olive: #7f994d;--glide-core-data-viz-red-red: #db2d24;--glide-core-data-viz-rose-rose: #ea5da3;--glide-core-data-viz-teal-teal: #39a288;--glide-core-data-viz-turquoise-turqoise: #339da3;--glide-core-data-viz-violet-violet: #af52de;--glide-core-effects-shadow-large-background-blur: 12.5rem;--glide-core-effects-shadow-large-blur: .875rem;--glide-core-effects-shadow-large-fill: #00000040;--glide-core-effects-shadow-large-spread: 0rem;--glide-core-effects-shadow-large-x: 0rem;--glide-core-effects-shadow-large-y: .25rem;--glide-core-effects-shadow-small-blur: .5rem;--glide-core-effects-shadow-small-fill: #b5b5b540;--glide-core-effects-shadow-small-spread: 0rem;--glide-core-effects-shadow-small-x: 0rem;--glide-core-effects-shadow-small-y: .125rem;--glide-core-effects-shadow-switcher-blur: .125rem;--glide-core-effects-shadow-switcher-fill: #ffffff59;--glide-core-effects-shadow-switcher-spread: 0rem;--glide-core-effects-shadow-switcher-x: .0625rem;--glide-core-effects-shadow-switcher-y: .0625rem;--glide-core-effects-shadow-xlarge-background-blur: 6.25rem;--glide-core-effects-shadow-xlarge-blur: 3.75rem;--glide-core-effects-shadow-xlarge-fill: #adadad;--glide-core-effects-shadow-xlarge-spread: 0rem;--glide-core-effects-shadow-xlarge-x: 0rem;--glide-core-effects-shadow-xlarge-y: .25rem;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-background-image: #00000000;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #0000000d;--glide-core-surface-base-gray-lightest: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #d7e7ff;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #3989da;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-attention: #f8f0d1;--glide-core-border-base: #585858;--glide-core-border-base-dark: #8a8a8a;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #424242;--glide-core-border-base-lighter: #424242;--glide-core-border-base-lightest: #c9c9c9;--glide-core-border-base-transparent: #ffffff1a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-error: #ffdcda;--glide-core-border-focus: #3989da;--glide-core-border-focus-light: #eef5ff;--glide-core-border-informational: #d7e7ff;--glide-core-border-primary: #424242;--glide-core-border-primary-hover: #3989da;--glide-core-border-warning: #ffebce;--glide-core-data-viz-cobalt-cobalt: #6e8ec4;--glide-core-data-viz-cyan-cyan: #4b98b9;--glide-core-data-viz-gold-gold: #b98d4b;--glide-core-data-viz-gray-dark: #424242;--glide-core-data-viz-gray-darker: #212121;--glide-core-data-viz-gray-default: #6d6d6d;--glide-core-data-viz-gray-light: #8a8a8a;--glide-core-data-viz-gray-lighter: #c9c9c9;--glide-core-data-viz-gray-lightest: #000000e5;--glide-core-data-viz-gray-x-lighter: #e3e3e3;--glide-core-data-viz-indigo-indigo: #7574e5;--glide-core-data-viz-lilac-lilac: #b37cc5;--glide-core-data-viz-magenta-magenta: #c2678f;--glide-core-data-viz-moss-moss: #949151;--glide-core-data-viz-olive-olive: #7a845c;--glide-core-data-viz-red-red: #db4743;--glide-core-data-viz-rose-rose: #be7e9f;--glide-core-data-viz-teal-teal: #5c9d8c;--glide-core-data-viz-turquoise-turqoise: #639d9f;--glide-core-data-viz-violet-violet: #a66dc3;--glide-core-effects-shadow-large-background-blur: 12.5rem;--glide-core-effects-shadow-large-blur: .75rem;--glide-core-effects-shadow-large-fill: #00000080;--glide-core-effects-shadow-large-spread: 0rem;--glide-core-effects-shadow-large-x: 0rem;--glide-core-effects-shadow-large-y: .125rem;--glide-core-effects-shadow-small-blur: .5rem;--glide-core-effects-shadow-small-fill: #00000040;--glide-core-effects-shadow-small-spread: 0rem;--glide-core-effects-shadow-small-x: 0rem;--glide-core-effects-shadow-small-y: .125rem;--glide-core-effects-shadow-switcher-blur: .125rem;--glide-core-effects-shadow-switcher-fill: #0000000d;--glide-core-effects-shadow-switcher-spread: 0rem;--glide-core-effects-shadow-switcher-x: .0625rem;--glide-core-effects-shadow-switcher-y: .0625rem;--glide-core-effects-shadow-xlarge-background-blur: 0rem;--glide-core-effects-shadow-xlarge-blur: 4rem;--glide-core-effects-shadow-xlarge-fill: #000000f7;--glide-core-effects-shadow-xlarge-spread: 0rem;--glide-core-effects-shadow-xlarge-x: 0rem;--glide-core-effects-shadow-xlarge-y: .25rem;--glide-core-icon-active: #3989da;--glide-core-icon-default: #f0f0f0;--glide-core-icon-default2: #8a8a8a;--glide-core-icon-display: #f0f0f0;--glide-core-icon-display-light: #8a8a8a;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #73b2f3;--glide-core-icon-primary-hover: #4d99e7;--glide-core-icon-secondary-disabled: #c9c9c9;--glide-core-icon-selected: #f0f0f0;--glide-core-icon-selected-disabled: #c9c9c9;--glide-core-icon-selected2: #f0f0f0;--glide-core-icon-tertiary-disabled: #ffffff8c;--glide-core-status-error: #db4743;--glide-core-status-expired: #db4743;--glide-core-status-failed: #db4743;--glide-core-status-in-progress: #fad232;--glide-core-status-queued: #63a8c7;--glide-core-status-scheduled: #ae73cd;--glide-core-status-success: #51bc6f;--glide-core-status-unknown: #686868;--glide-core-status-warning-critical: #db4743;--glide-core-status-warning-high: #e3901d;--glide-core-status-warning-informational: #3989da;--glide-core-status-warning-low: #607c89;--glide-core-status-warning-medium: #fad232;--glide-core-surface-active: #ffffffe5;--glide-core-surface-attention: #fffbeb;--glide-core-surface-background-image: #151414f7;--glide-core-surface-base: #ffffff26;--glide-core-surface-base-dark: #625c5c;--glide-core-surface-base-gray: #ffffff1a;--glide-core-surface-base-gray-dark: #ffffff1a;--glide-core-surface-base-gray-light: #ffffff12;--glide-core-surface-base-gray-lighter: #ffffff0d;--glide-core-surface-base-gray-lightest: #ffffff0d;--glide-core-surface-base-light: #ffffff08;--glide-core-surface-base-lighter: #ffffff12;--glide-core-surface-base-lightest: #ffffff0d;--glide-core-surface-base-xlightest: #333030;--glide-core-surface-disabled: #6d6d6d;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #3989da;--glide-core-surface-hover: #567a9e75;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #464242;--glide-core-surface-page: #212121;--glide-core-surface-primary: #3989da;--glide-core-surface-primary-disabled: #3888d999;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #3989da;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #256db7;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #6d6d6d;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #f0f0f0;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #f0f0f0;--glide-core-text-body-lighter: #f0f0f0;--glide-core-text-disabled: #c9c9c9;--glide-core-text-header-1: #f0f0f0;--glide-core-text-header-2: #f0f0f0;--glide-core-text-link: #73b2f3;--glide-core-text-link-dark-surface: #73b2f3;--glide-core-text-link-table: #93c4f6;--glide-core-text-placeholder: #9e9e9e;--glide-core-text-primary: #73b2f3;--glide-core-text-primary-hover: #4d99e7;--glide-core-text-secondary: #3989da;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #f0f0f0;--glide-core-text-selected-2: #f0f0f0;--glide-core-text-tertiary: #f0f0f0;--glide-core-text-tertiary-disabled: #ffffff8c}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-checkbox: 0px 0px 7px 0px #5ba4ee;--glide-core-shadow-sm: var(--glide-core-effects-shadow-small-x) var(--glide-core-effects-shadow-small-y) var(--glide-core-effects-shadow-small-blur) var(--glide-core-effects-shadow-small-spread) var(--glide-core-effects-shadow-small-fill);--glide-core-shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, .15), 0px 3px 1px 0px rgba(0, 0, 0, .06);--glide-core-shadow-lg: var(--glide-core-effects-shadow-large-x) var(--glide-core-effects-shadow-large-y) var(--glide-core-effects-shadow-large-blur) var(--glide-core-effects-shadow-large-spread) var(--glide-core-effects-shadow-large-fill);--glide-core-shadow-xl: var(--glide-core-effects-shadow-xlarge-x) var(--glide-core-effects-shadow-xlarge-y) var(--glide-core-effects-shadow-xlarge-blur) var(--glide-core-effects-shadow-xlarge-spread) var(--glide-core-effects-shadow-xlarge-fill)}
+:root,:host{color-scheme:normal;--glide-core-border-radius-lg: .75rem;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-round: 7.5rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-radius-zero: 0rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-sm: .0625rem;--glide-core-border-width-zero: 0rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-attention: #f8f0d1;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-base-transparent: #0000001a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-error: #ffdcda;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-informational: #d7e7ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-border-warning: #ffebce;--glide-core-data-viz-cobalt-cobalt: #5183df;--glide-core-data-viz-cyan-cyan: #299ed1;--glide-core-data-viz-gold-gold: #cc8519;--glide-core-data-viz-gray-dark: #424242;--glide-core-data-viz-gray-darker: #212121;--glide-core-data-viz-gray-default: #6d6d6d;--glide-core-data-viz-gray-light: #8a8a8a;--glide-core-data-viz-gray-lighter: #c9c9c9;--glide-core-data-viz-gray-lightest: #f0f0f0;--glide-core-data-viz-gray-x-lighter: #e3e3e3;--glide-core-data-viz-indigo-indigo: #6563d9;--glide-core-data-viz-lilac-lilac: #ce66e5;--glide-core-data-viz-magenta-magenta: #f9338b;--glide-core-data-viz-moss-moss: #959328;--glide-core-data-viz-olive-olive: #7f994d;--glide-core-data-viz-red-red: #db2d24;--glide-core-data-viz-rose-rose: #ea5da3;--glide-core-data-viz-teal-teal: #39a288;--glide-core-data-viz-turquoise-turqoise: #339da3;--glide-core-data-viz-violet-violet: #af52de;--glide-core-effects-shadow-large-background-blur: 12.5rem;--glide-core-effects-shadow-large-blur: .875rem;--glide-core-effects-shadow-large-fill: #00000040;--glide-core-effects-shadow-large-spread: 0rem;--glide-core-effects-shadow-large-x: 0rem;--glide-core-effects-shadow-large-y: .25rem;--glide-core-effects-shadow-small-blur: .5rem;--glide-core-effects-shadow-small-fill: #b5b5b540;--glide-core-effects-shadow-small-spread: 0rem;--glide-core-effects-shadow-small-x: 0rem;--glide-core-effects-shadow-small-y: .125rem;--glide-core-effects-shadow-switcher-blur: .125rem;--glide-core-effects-shadow-switcher-fill: #ffffff59;--glide-core-effects-shadow-switcher-spread: 0rem;--glide-core-effects-shadow-switcher-x: .0625rem;--glide-core-effects-shadow-switcher-y: .0625rem;--glide-core-effects-shadow-xlarge-background-blur: 6.25rem;--glide-core-effects-shadow-xlarge-blur: 3.75rem;--glide-core-effects-shadow-xlarge-fill: #adadad;--glide-core-effects-shadow-xlarge-spread: 0rem;--glide-core-effects-shadow-xlarge-x: 0rem;--glide-core-effects-shadow-xlarge-y: .25rem;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #6d6d6d;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-background-image: #00000000;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-gray-lighter: #0000000d;--glide-core-surface-base-gray-lightest: #00000008;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #d7e7ff;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #8a8a8a;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #3989da;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-attention: #f8f0d1;--glide-core-border-base: #585858;--glide-core-border-base-dark: #8a8a8a;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #424242;--glide-core-border-base-lighter: #424242;--glide-core-border-base-lightest: #c9c9c9;--glide-core-border-base-transparent: #ffffff1a;--glide-core-border-disabled: #8a8a8a;--glide-core-border-error: #ffdcda;--glide-core-border-focus: #3989da;--glide-core-border-focus-light: #eef5ff;--glide-core-border-informational: #d7e7ff;--glide-core-border-primary: #424242;--glide-core-border-primary-hover: #3989da;--glide-core-border-warning: #ffebce;--glide-core-data-viz-cobalt-cobalt: #6e8ec4;--glide-core-data-viz-cyan-cyan: #4b98b9;--glide-core-data-viz-gold-gold: #b98d4b;--glide-core-data-viz-gray-dark: #424242;--glide-core-data-viz-gray-darker: #212121;--glide-core-data-viz-gray-default: #6d6d6d;--glide-core-data-viz-gray-light: #8a8a8a;--glide-core-data-viz-gray-lighter: #c9c9c9;--glide-core-data-viz-gray-lightest: #000000e5;--glide-core-data-viz-gray-x-lighter: #e3e3e3;--glide-core-data-viz-indigo-indigo: #7574e5;--glide-core-data-viz-lilac-lilac: #b37cc5;--glide-core-data-viz-magenta-magenta: #c2678f;--glide-core-data-viz-moss-moss: #949151;--glide-core-data-viz-olive-olive: #7a845c;--glide-core-data-viz-red-red: #db4743;--glide-core-data-viz-rose-rose: #be7e9f;--glide-core-data-viz-teal-teal: #5c9d8c;--glide-core-data-viz-turquoise-turqoise: #639d9f;--glide-core-data-viz-violet-violet: #a66dc3;--glide-core-effects-shadow-large-background-blur: 12.5rem;--glide-core-effects-shadow-large-blur: .75rem;--glide-core-effects-shadow-large-fill: #00000080;--glide-core-effects-shadow-large-spread: 0rem;--glide-core-effects-shadow-large-x: 0rem;--glide-core-effects-shadow-large-y: .125rem;--glide-core-effects-shadow-small-blur: .5rem;--glide-core-effects-shadow-small-fill: #00000040;--glide-core-effects-shadow-small-spread: 0rem;--glide-core-effects-shadow-small-x: 0rem;--glide-core-effects-shadow-small-y: .125rem;--glide-core-effects-shadow-switcher-blur: .125rem;--glide-core-effects-shadow-switcher-fill: #0000000d;--glide-core-effects-shadow-switcher-spread: 0rem;--glide-core-effects-shadow-switcher-x: .0625rem;--glide-core-effects-shadow-switcher-y: .0625rem;--glide-core-effects-shadow-xlarge-background-blur: 0rem;--glide-core-effects-shadow-xlarge-blur: 4rem;--glide-core-effects-shadow-xlarge-fill: #000000f7;--glide-core-effects-shadow-xlarge-spread: 0rem;--glide-core-effects-shadow-xlarge-x: 0rem;--glide-core-effects-shadow-xlarge-y: .25rem;--glide-core-icon-active: #3989da;--glide-core-icon-default: #f0f0f0;--glide-core-icon-default2: #8a8a8a;--glide-core-icon-display: #f0f0f0;--glide-core-icon-display-light: #8a8a8a;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #73b2f3;--glide-core-icon-primary-hover: #4d99e7;--glide-core-icon-secondary-disabled: #c9c9c9;--glide-core-icon-selected: #f0f0f0;--glide-core-icon-selected-disabled: #c9c9c9;--glide-core-icon-selected2: #f0f0f0;--glide-core-icon-tertiary-disabled: #ffffff33;--glide-core-status-error: #db4743;--glide-core-status-expired: #db4743;--glide-core-status-failed: #db4743;--glide-core-status-in-progress: #fad232;--glide-core-status-queued: #63a8c7;--glide-core-status-scheduled: #ae73cd;--glide-core-status-success: #51bc6f;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #db4743;--glide-core-status-warning-high: #e3901d;--glide-core-status-warning-informational: #3989da;--glide-core-status-warning-low: #6d6d6d;--glide-core-status-warning-medium: #fad232;--glide-core-surface-active: #ffffffe5;--glide-core-surface-attention: #fffbeb;--glide-core-surface-background-image: #151414f7;--glide-core-surface-base: #ffffff26;--glide-core-surface-base-dark: #625c5c;--glide-core-surface-base-gray: #ffffff1a;--glide-core-surface-base-gray-dark: #ffffff1a;--glide-core-surface-base-gray-light: #ffffff12;--glide-core-surface-base-gray-lighter: #ffffff0d;--glide-core-surface-base-gray-lightest: #ffffff0d;--glide-core-surface-base-light: #ffffff08;--glide-core-surface-base-lighter: #ffffff12;--glide-core-surface-base-lightest: #ffffff0d;--glide-core-surface-base-xlightest: #333030;--glide-core-surface-disabled: #6d6d6d;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #3989da;--glide-core-surface-hover: #567a9e75;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #464242;--glide-core-surface-page: #212121;--glide-core-surface-primary: #3989da;--glide-core-surface-primary-disabled: #3888d999;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #3989da;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #256db7;--glide-core-surface-success: #f1fdf4;--glide-core-surface-table-row-hover: #1d7afc26;--glide-core-surface-unselected-disabled: #6d6d6d;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #f0f0f0;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #f0f0f0;--glide-core-text-body-lighter: #f0f0f0;--glide-core-text-disabled: #c9c9c9;--glide-core-text-header-1: #f0f0f0;--glide-core-text-header-2: #f0f0f0;--glide-core-text-link: #73b2f3;--glide-core-text-link-dark-surface: #73b2f3;--glide-core-text-link-table: #93c4f6;--glide-core-text-placeholder: #9e9e9e;--glide-core-text-primary: #73b2f3;--glide-core-text-primary-hover: #4d99e7;--glide-core-text-secondary: #3989da;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #f0f0f0;--glide-core-text-selected-2: #f0f0f0;--glide-core-text-tertiary: #f0f0f0;--glide-core-text-tertiary-disabled: #ffffff8c}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-checkbox: 0px 0px 7px 0px #5ba4ee;--glide-core-shadow-sm: var(--glide-core-effects-shadow-small-x) var(--glide-core-effects-shadow-small-y) var(--glide-core-effects-shadow-small-blur) var(--glide-core-effects-shadow-small-spread) var(--glide-core-effects-shadow-small-fill);--glide-core-shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, .15), 0px 3px 1px 0px rgba(0, 0, 0, .06);--glide-core-shadow-lg: var(--glide-core-effects-shadow-large-x) var(--glide-core-effects-shadow-large-y) var(--glide-core-effects-shadow-large-blur) var(--glide-core-effects-shadow-large-spread) var(--glide-core-effects-shadow-large-fill);--glide-core-shadow-xl: var(--glide-core-effects-shadow-xlarge-x) var(--glide-core-effects-shadow-xlarge-y) var(--glide-core-effects-shadow-xlarge-blur) var(--glide-core-effects-shadow-xlarge-spread) var(--glide-core-effects-shadow-xlarge-fill)}

package/dist/tab.d.ts

@@ -5,6 +5,9 @@ declare global {
     }
 }
 /**
+ *
+ * @event selected - `(event: "selected", handler: (event: Event) => void) => void`.
+ *
  * @slot - A label.
  * @slot icon - An optional icon.
  */
@@ -13,8 +16,8 @@ export default class GlideCoreTab extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     panel: string;
-    active: boolean;
     disabled: boolean;
+    selected: boolean;
     protected firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     protected updated(changes: PropertyValues): void;

package/dist/tab.group.d.ts

@@ -22,8 +22,8 @@ export default class GlideCoreTabGroup extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    get activeTab(): GlideCoreTab | null;
-    set activeTab(tab: GlideCoreTab | null);
+    get selectedTab(): GlideCoreTab | null;
+    set selectedTab(tab: GlideCoreTab | null);
     isAfterFirstUpdated: boolean;
     isDisableOverflowStartButton: boolean;
     isDisableOverflowEndButton: boolean;

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,s,i){var o,l=arguments.length,a=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,i);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(a=(l<3?o(a):l>3?o(e,s,a):o(e,s))||a);return l>3&&a&&Object.defineProperty(e,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,queryAssignedElements,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.#t=createRef(),this.#e=null,this.#s=100,this.#i=createRef(),this.#o=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#f=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#i.value,[GlideCoreTabPanel]),this.#d()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><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.#n)} ?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.#E}" tabindex="-1"><slot name="nav" @slotchange="${this.#T}" ${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.#R}" tabindex="-1" aria-label="${this.#o.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?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.#g}" ${ref(this.#i)}></slot></div>`}updated(){this.#S()}#t;#e;#s;#i;#o;#l;#a;#r;#n;#c;#h;#b;#u;#f;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#O(e)}#R(){this.#y("right")}#p(){this.#y("left")}#g(){owSlotType(this.#i.value,[GlideCoreTabPanel])}#E(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#O(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#T(){owSlotType(this.#l.value,[GlideCoreTab]),this.#S(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#y(t){const e="right"===t?1:-1;ow(this.#f.value,ow.object.instanceOf(HTMLElement));const s=e*this.#f.value?.clientWidth*.5;this.#f.value?.scrollBy({left:s,top:0})}#C(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:i}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",i-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#f.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,i=t.scrollLeft+s,o=t.scrollWidth;this.isDisableOverflowEndButton=o-i<=this.#a}}#B(){const t=this.#f.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#A(),this.#L()}#A(){ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#f.value.scrollLeft<=0}#d(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#f.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#f.value)}#S(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#O(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",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),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",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 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,queryAssignedElements,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.#d=null,this.#h=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;#d;#h;#b;#f;#m(e){const t=e.target.closest("glide-core-tab");t&&t instanceof GlideCoreTab&&!t.disabled&&this.#O(t)}#S(){this.#y("right")}#p(){this.#y("left")}#R(){owSlotType(this.#s.value,[GlideCoreTabPanel])}#T(){for(const[,e]of this.tabElements.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.#O(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=this.tabElements.find((e=>e.matches(":focus")));if(t instanceof GlideCoreTab){let s=this.tabElements.indexOf(t);switch(e.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,e]of this.tabElements.entries())e.tabIndex=this.tabElements[s]===e?0:-1;this.#B(),e.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#g(),this.#C(),this.#B()}#w(){this.#h&&clearTimeout(this.#h),this.#h=setTimeout((()=>{this.#B()}),this.#t)}#y(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})}#L(){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}}#B(){const e=this.#f.value,t=e?.getBoundingClientRect();if(e&&t){const{width:s}=t;this.isShowOverflowButtons=e.scrollWidth-s>this.#i}this.#G(),this.#L()}#C(){for(const[e,t]of this.tabElements.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.panelElements){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.tabElements.length>0&&this.#e.value){const e=Number.parseInt(window.getComputedStyle(this.selectedTab).getPropertyValue("padding-inline-start")),t=this.selectedTab===this.tabElements.at(0)?e:this.selectedTab.offsetLeft-this.tabElements[0].offsetLeft;this.#e.value.style.setProperty("--selected-tab-indicator-translate",`${t}px`);const s=this.selectedTab===this.tabElements.at(0)||this.selectedTab===this.tabElements.at(-1)?e:0,{width:o}=this.selectedTab.getBoundingClientRect();this.#e.value.style.setProperty("--selected-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#G(){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.#d&&clearTimeout(this.#d),this.#d=setTimeout((()=>{this.#B()}),this.#t))})),ow(this.#f.value,ow.object.instanceOf(HTMLElement)),this.#c.observe(this.#f.value)}#g(){for(const e of this.tabElements){const t=this.panelElements.filter((t=>t.name===e.panel))?.at(0);t?.getAttribute("id")&&(e.setAttribute("aria-controls",t.getAttribute("id")),t.setAttribute("aria-labelledby",e.getAttribute("id")))}}#O(e){this.selectedTab=e,this.#C(),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),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;