@crowdstrike/glide-core 0.15.1 → 0.17.0

package/dist/radio-group.d.ts

@@ -1,15 +1,15 @@
 import './label.js';
 import './tooltip.js';
-import { LitElement, type PropertyValueMap } from 'lit';
+import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-radio-group': GlideCoreRadioGroup;
     }
 }
 /**
- * @event change - `(event: Event) => void`
- * @event input - `(event: Event) => void`
- * @event invalid - `(event: Event) => void`
+ * @event change
+ * @event input
+ * @event invalid
  *
  * @slot - One or more of `<glide-core-radio>`.
  * @slot description - Additional information or context.
@@ -20,14 +20,16 @@ export default class GlideCoreRadioGroup extends LitElement {
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    description: string;
-    disabled: boolean;
-    label: string;
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
     hideLabel: boolean;
+    label?: string;
     name: string;
     privateSplit?: 'left' | 'middle';
-    required: boolean;
-    value: string;
+    get required(): boolean;
+    set required(isRequired: boolean);
+    get value(): string;
+    set value(value: string);
     checkValidity(): boolean;
     disconnectedCallback(): void;
     firstUpdated(): void;
@@ -41,8 +43,6 @@ export default class GlideCoreRadioGroup extends LitElement {
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
     setValidity(flags?: ValidityStateFlags, message?: string): void;
-    updated(changedProperties: PropertyValueMap<GlideCoreRadioGroup>): void;
-    willUpdate(changedProperties: PropertyValueMap<GlideCoreRadioGroup>): void;
     constructor();
     private isBlurring;
     private isCheckingValidity;

package/dist/radio-group.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,i,t,s){var o,a=arguments.length,d=a<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,t):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,i,t,s);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(d=(a<3?o(d):a>3?o(i,t,d):o(i,t))||d);return a>3&&d&&Object.defineProperty(i,t,d),d};import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import GlideCoreRadio from"./radio.js";import styles from"./radio-group.styles.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.#t=void 0}firstUpdated(){owSlot(this.#s.value),owSlotType(this.#s.value,[GlideCoreRadio]),this.#t=this.#o.find((e=>e.checked)),this.#a()}focus(e){let i=this.#o.find((e=>e.checked));i||(i=this.#o.find((e=>0===e.tabIndex))),i?.focus(e)}get form(){return this.#e.form}get validity(){const e=this.#o.some((({checked:e})=>e));return!this.required||e||this.value||this.disabled?this.required&&this.#e.validity.valueMissing&&(e||this.value)?(this.#e.setValidity({}),this.#e.validity):this.#e.validity:(this.#e.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#d.value),this.#e.validity)}get willValidate(){return this.#e.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){if(this.#t&&this.contains(this.#t))for(const e of this.#o)this.#r(e===this.#t,e)}render(){return html`
+var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length,r=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var d=e.length-1;d>=0;d--)(o=e[d])&&(r=(a<3?o(r):a>3?o(t,i,r):o(t,i))||r);return a>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import GlideCoreRadio from"./radio-group.radio.js";import styles from"./radio-group.styles.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)t.privateRequired=e}get value(){return this.#s}set value(e){this.#s=e;for(const t of this.#t){const i=Boolean(e&&t.value===e);t.checked=!!i,t.tabIndex=i?0:-1,t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a)}firstUpdated(){if(owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreRadio]),this.disabled)for(const e of this.#t)e.disabled=!0;if(this.required)for(const e of this.#t)e.privateRequired=!0;const e=this.value?this.#t.find((({value:e})=>e===this.value)):this.#t.find((({checked:e,disabled:t})=>e&&!t));if(!this.value&&e?.value&&this.setAttribute("value",e.value),e){this.value=e.value;for(const t of this.#t)t.tabIndex=t===e?0:-1;return}const t=this.#t.find((({disabled:e})=>!e));for(const e of this.#t)e.tabIndex=e===t?0:-1}focus(e){const t=this.#t.find((({checked:e,disabled:t})=>e&&!t))??this.#t.find((({tabIndex:e})=>0===e));t?.focus(e)}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#o.validity.valueMissing&&e?(this.#o.setValidity({}),this.#o.validity):this.required&&this.disabled&&!e?(this.#o.setValidity({valueMissing:!0}," ",this.#d.value),this.#o.validity):(this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({}),this.#o.validity):(this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#d.value),this.#o.validity)}get willValidate(){return this.#o.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
       <div
         class="component"
         @click=${this.#l}
@@ -20,11 +20,13 @@ var __decorate=this&&this.__decorate||function(e,i,t,s){var o,a=arguments.length
             role="radiogroup"
             slot="control"
             aria-labelledby="label description"
-            @blur=${this.#c}
           >
             <slot
-              ${ref(this.#s)}
-              @slotchange=${this.#p}
+              ${ref(this.#r)}
+              @focusout=${this.#c}
+              @slotchange=${this.#u}
+              @private-checked-change=${this.#p}
+              @private-value-change=${this.#f}
             ></slot>
           </div>
 
@@ -32,14 +34,14 @@ var __decorate=this&&this.__decorate||function(e,i,t,s){var o,a=arguments.length
 
           <div id="description" slot="description">
             <slot
-              class=${classMap({description:!0,hidden:Boolean(this.#h&&this.validityMessage)})}
+              class=${classMap({"description-slot":!0,hidden:Boolean(this.#h&&this.validityMessage)})}
               name="description"
             ></slot>
 
-            ${when(this.#h&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
-                  >${unsafeHTML(this.validityMessage)}</span
-                >`))}
+            ${when(this.#h&&this.validityMessage,(()=>html`<div data-test="validity-message">
+                  ${unsafeHTML(this.validityMessage)}
+                </div>`))}
           </div>
         </glide-core-private-label>
       </div>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#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;
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s="",this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}))}#d;#r;#o;#e;#i;#s;#a;get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#v(e){e.checked=!0,e.tabIndex=0,this.value=e.value,e.focus(),e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));return void e?.focus()}const t=e.target;if(t instanceof GlideCoreRadio&&t&&!t.disabled){const e=this.#t.filter((e=>e!==t));for(const t of e)t.checked=!1,t.tabIndex=-1;this.#v(t)}}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const t=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const i=[...this.#t],s=[...this.#t].slice(0,i.indexOf(t)).findLast((e=>!e.disabled)),o=i.findLast((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const i=[...this.#t],s=i.find(((e,s)=>!e.disabled&&s>i.indexOf(t))),o=i.find((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case" ":if(e.preventDefault(),!t.disabled&&!t.checked){this.#v(t);for(const e of this.#t)e!==t&&this.#m(e)}}}}#u(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreRadio])}#c(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreRadio)):[]}#p(e){e.target instanceof GlideCoreRadio&&e.target.checked&&!e.detail.old&&e.detail.new&&(this.value=e.target.value)}#f(e){e.target instanceof GlideCoreRadio&&e.target.checked&&e.detail.new?this.value=e.target.value:e.target instanceof GlideCoreRadio&&e.target.checked&&(this.value="")}#m(e){e.checked=!1,e.tabIndex=-1}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([state()],GlideCoreRadioGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"validityMessage",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

package/dist/radio-group.radio.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-radio': GlideCoreRadio;
+    }
+}
+export default class GlideCoreRadio extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    get checked(): boolean;
+    set checked(checked: boolean);
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    get privateInvalid(): boolean;
+    set privateInvalid(invalid: boolean);
+    get label(): string;
+    set label(label: string);
+    get privateRequired(): boolean;
+    set privateRequired(required: boolean);
+    get value(): string;
+    set value(value: string);
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/radio-group.radio.js

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

package/dist/radio-group.radio.styles.d.ts

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

package/dist/{radio.styles.js → radio-group.radio.styles.js}

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

package/dist/radio-group.styles.js

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

package/dist/split-button.d.ts

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

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

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

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

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

package/dist/tab.d.ts

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

package/dist/tab.group.d.ts

@@ -1,7 +1,6 @@
 import './icon-button.js';
 import { LitElement } from 'lit';
 import GlideCoreTab from './tab.js';
-import GlideCoreTabPanel from './tab.panel.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tab-group': GlideCoreTabGroup;
@@ -28,8 +27,6 @@ export default class GlideCoreTabGroup extends LitElement {
     isDisableOverflowStartButton: boolean;
     isDisableOverflowEndButton: boolean;
     isShowOverflowButtons: boolean;
-    panelElements: GlideCoreTabPanel[];
-    tabElements: GlideCoreTab[];
     disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/tab.group.js

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

package/dist/tab.group.styles.js

@@ -8,73 +8,79 @@ import{css}from"lit";export default[css`
 
     .component {
       display: contents;
+    }
+
+    .tab-container {
+      border-block-end: 1px solid var(--glide-core-border-base-lighter);
+      box-sizing: border-box;
+      display: flex;
+      padding-block-end: var(--tabs-padding-block-end);
+      padding-block-start: var(--tabs-padding-block-start);
+      padding-inline-end: var(--tabs-padding-inline-end);
+      padding-inline-start: var(--tabs-padding-inline-start);
+    }
+
+    .tab-group {
+      display: flex;
+      gap: var(--glide-core-spacing-xl);
+      overflow: auto hidden;
+      position: relative;
+      scrollbar-width: none;
+      white-space: nowrap;
 
-      & .tab-container {
-        border-block-end: 1px solid var(--glide-core-border-base-lighter);
-        box-sizing: border-box;
-        display: flex;
-        padding-block-end: var(--tabs-padding-block-end);
-        padding-block-start: var(--tabs-padding-block-start);
-        padding-inline-end: var(--tabs-padding-inline-end);
-        padding-inline-start: var(--tabs-padding-inline-start);
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
       }
 
-      & .tab-group {
-        display: flex;
-        gap: var(--glide-core-spacing-xl);
-        overflow: auto hidden;
-        position: relative;
-        scrollbar-width: none;
-        white-space: nowrap;
+      &::after {
+        background: var(--glide-core-border-focus);
+        block-size: 0.125rem;
+        content: '';
+        inline-size: var(--selected-tab-indicator-width);
+        inset-block-end: 0;
+        inset-inline: 0;
+        position: absolute;
+        transform-origin: left;
+        translate: var(--selected-tab-indicator-translate, 0) 0;
+      }
 
+      &.animated {
         @media (prefers-reduced-motion: no-preference) {
-          scroll-behavior: smooth;
+          &::after {
+            transition:
+              inline-size 250ms,
+              translate 250ms;
+          }
         }
+      }
+    }
 
-        /* "-webkit-scrollbar" is needed for Safari */
-
-        &::-webkit-scrollbar {
-          block-size: 0;
-          inline-size: 0;
-        }
+    .overflow-button {
+      --size: 1.125rem;
 
-        &::after {
-          background: var(--glide-core-border-focus);
-          block-size: 0.125rem;
-          content: '';
-          inline-size: var(--selected-tab-indicator-width);
-          inset-block-end: 0;
-          inset-inline: 0;
-          position: absolute;
-          transform-origin: left;
-          translate: var(--selected-tab-indicator-translate, 0) 0;
-        }
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      color: var(--glide-core-icon-default);
+      cursor: pointer;
+      display: flex;
+      flex-shrink: 0;
+      inline-size: 1.875rem;
+      justify-content: center;
+      margin: 0;
+      outline: none;
+      padding: 0;
 
-        &.animated {
-          @media (prefers-reduced-motion: no-preference) {
-            &::after {
-              transition:
-                inline-size 250ms,
-                translate 250ms;
-            }
-          }
-        }
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
       }
 
-      & .overflow {
-        background-color: transparent;
-        border: none;
-        color: var(--glide-core-icon-default);
-        cursor: pointer;
-        flex-shrink: 0;
-        inline-size: 1.875rem;
-        margin: 0;
-        outline: none;
-        padding: 0;
+      &.start {
+        transform: rotate(90deg);
+      }
 
-        &.disabled {
-          color: var(--glide-core-icon-tertiary-disabled);
-        }
+      &.end {
+        transform: rotate(-90deg);
       }
     }
 

package/dist/tab.panel.d.ts

@@ -1,11 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tab-panel': GlideCoreTabPanel;
     }
 }
 /**
- * @slot - Main content for the tab panel
+ * @slot - The content of the panel.
  */
 export default class GlideCoreTabPanel extends LitElement {
     #private;
@@ -17,8 +17,8 @@ export default class GlideCoreTabPanel extends LitElement {
      * The corresponding <glide-core-tab> will have a `panel` attribute with this name
      */
     name: string;
-    privateIsSelected: boolean;
+    get privateIsSelected(): boolean;
+    set privateIsSelected(isSelected: boolean);
     protected firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    protected updated(changes: PropertyValues): void;
 }

package/dist/tab.panel.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,o,a):r(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};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"./tab.panel.styles.js";let GlideCoreTabPanel=class GlideCoreTabPanel extends LitElement{constructor(){super(...arguments),this.name="",this.privateIsSelected=!0,this.#e=nanoid()}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tabpanel"),this.id=this.#e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}updated(e){super.updated(e),e.has("privateIsSelected")&&this.setAttribute("aria-hidden",this.privateIsSelected?"false":"true")}#e};__decorate([property({reflect:!0})],GlideCoreTabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTabPanel.prototype,"privateIsSelected",void 0),GlideCoreTabPanel=__decorate([customElement("glide-core-tab-panel")],GlideCoreTabPanel);export default GlideCoreTabPanel;
+var __decorate=this&&this.__decorate||function(e,t,i,s){var o,r=arguments.length,l=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(l=(r<3?o(l):r>3?o(t,i,l):o(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import styles from"./tab.panel.styles.js";let GlideCoreTabPanel=class GlideCoreTabPanel extends LitElement{constructor(){super(...arguments),this.name="",this.#e=nanoid(),this.#t=!1}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get privateIsSelected(){return this.#t}set privateIsSelected(e){this.setAttribute("aria-hidden",e?"false":"true"),this.#t=e}firstUpdated(){this.setAttribute("role","tabpanel"),this.id=this.#e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreTabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTabPanel.prototype,"privateIsSelected",null),GlideCoreTabPanel=__decorate([customElement("glide-core-tab-panel")],GlideCoreTabPanel);export default GlideCoreTabPanel;

package/dist/tab.styles.js

@@ -27,14 +27,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         color: var(--glide-core-text-tertiary-disabled);
         pointer-events: none;
       }
+    }
 
-      & .container {
-        align-items: center;
-        border-radius: 0.0625rem;
-        display: flex;
-        flex-shrink: 0;
-        gap: var(--glide-core-spacing-xs);
-        white-space: nowrap;
-      }
+    .container {
+      align-items: center;
+      border-radius: 0.0625rem;
+      display: flex;
+      flex-shrink: 0;
+      gap: var(--glide-core-spacing-xs);
+      white-space: nowrap;
     }
   `];

package/dist/tag.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @event remove - `(event: Event) => void`
+ * @event remove
  *
  * @slot icon
  */