@crowdstrike/glide-core 0.15.0 → 0.16.0

package/dist/popover.js

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

package/dist/popover.styles.js

@@ -0,0 +1,119 @@
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";export default[css`
+    ${opacityAndScaleAnimation(".popover:popover-open")}
+    ${focusOutline(".target:focus-visible")}
+  `,css`
+    :host {
+      /* https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771 */
+      display: inline-block;
+    }
+
+    .component {
+      /* https://github.com/CrowdStrike/glide-core/pull/119#issuecomment-2113314591 */
+      display: flex;
+
+      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
+      min-inline-size: 0;
+      position: relative;
+    }
+
+    .target-slot {
+      /*
+        Collapses additional whitespace from the slot's line height so the popover is vertically
+        centered against its target.
+      */
+      display: flex;
+
+      /* Allows the consumer to style the target with an ellipsis when its text is truncated. */
+      inline-size: 100%;
+      position: relative;
+
+      ::slotted svg {
+        display: block;
+      }
+    }
+
+    .popover {
+      background-color: transparent;
+      border: none;
+      inset: unset;
+      padding: var(--glide-core-spacing-xs);
+      position: absolute;
+
+      &:popover-open {
+        display: flex;
+
+        /*
+          Elements with a "popover" attribute don't allow overflow. So the arrow can't
+          be positioned with "position: absolute". Relative positioning is used instead.
+          Flex is used to get the arrow on the correct side of the popover. Floating UI
+          handles the rest.
+
+          A simple "transform" could replace Floating UI for the arrow if not for a Chrome
+          bug with "popover" when "scale()" is animated on the popover or a container within
+          it. With "transform" on the arrow, the arrow is initially offset by a couple pixels
+          before landing in the correct position when the animation finishes. It only happens
+          when the popover is left or right of its target.
+        */
+        &.top {
+          flex-direction: column-reverse;
+        }
+
+        &.right {
+          flex-direction: row-reverse;
+        }
+
+        &.bottom {
+          flex-direction: column;
+        }
+      }
+    }
+
+    .arrow {
+      --arrow-height: 0.5625rem;
+      --arrow-width: 1rem;
+
+      color: var(--glide-core-surface-modal);
+      display: flex;
+      position: relative;
+
+      &.top,
+      &.bottom {
+        block-size: var(--arrow-height);
+        inline-size: var(--arrow-width);
+      }
+
+      &.right,
+      &.left {
+        block-size: var(--arrow-width);
+        inline-size: var(--arrow-height);
+        order: 2;
+      }
+    }
+
+    .default-slot {
+      background-color: var(--glide-core-surface-modal);
+      border-radius: var(--glide-core-spacing-xs);
+
+      /* 
+        ".popover" can't overflow because the Popover API won't allow it. And 
+        a shadow counts as overflow. So make sure to adjust the padding on 
+        ".popover" when changing this shadow so ".popover" has enough room for it.
+      */
+      box-shadow:
+        0 3px 8px 0 rgba(0 0 0 / 15%),
+        0 3px 1px 0 rgba(0 0 0 / 6%);
+      box-sizing: border-box;
+      color: var(--glide-core-text-body-1);
+      display: flex;
+      font-family: var(--glide-core-body-md-font-family);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-style: var(--glide-core-body-sm-font-style);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      inset-block-start: 50%;
+      line-height: var(--glide-core-body-sm-line-height);
+      max-inline-size: 23.75rem;
+      min-block-size: 2rem;
+      min-inline-size: 5rem;
+      padding: var(--glide-core-spacing-sm);
+    }
+  `];

package/dist/radio-group.d.ts

@@ -1,6 +1,6 @@
 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;
@@ -21,13 +21,16 @@ export default class GlideCoreRadioGroup extends LitElement {
     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 +44,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>
 
@@ -42,4 +44,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,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.description="",this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s="",this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}))}#d;#r;#o;#e;#i;#s;#a;get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#v(e){e.checked=!0,e.tabIndex=0,this.value=e.value,e.focus(),e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));return void e?.focus()}const t=e.target;if(t instanceof GlideCoreRadio&&t&&!t.disabled){const e=this.#t.filter((e=>e!==t));for(const t of e)t.checked=!1,t.tabIndex=-1;this.#v(t)}}#u(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreRadio])}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const t=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const i=[...this.#t],s=[...this.#t].slice(0,i.indexOf(t)).findLast((e=>!e.disabled)),o=i.findLast((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const i=[...this.#t],s=i.find(((e,s)=>!e.disabled&&s>i.indexOf(t))),o=i.find((e=>!e.disabled));s&&s!==t?(this.#m(t),this.#v(s)):o&&o!==t&&(this.#m(t),this.#v(o));break}case" ":if(e.preventDefault(),!t.disabled&&!t.checked){this.#v(t);for(const e of this.#t)e!==t&&this.#m(e)}}}}#c(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreRadio)):[]}#p(e){e.target instanceof GlideCoreRadio&&e.target.checked&&!e.detail.old&&e.detail.new&&(this.value=e.target.value)}#f(e){e.target instanceof GlideCoreRadio&&e.target.checked&&e.detail.new?this.value=e.target.value:e.target instanceof GlideCoreRadio&&e.target.checked&&(this.value="")}#m(e){e.checked=!1,e.tabIndex=-1}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([state()],GlideCoreRadioGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"validityMessage",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

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

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

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

package/dist/split-button.d.ts

@@ -13,9 +13,9 @@ export default class GlideCoreSplitButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    get size(): 'large' | 'small';
+    get size(): "large" | "small";
     set size(size: 'large' | 'small');
-    get variant(): 'primary' | 'secondary';
+    get variant(): "primary" | "secondary";
     set variant(variant: 'primary' | 'secondary');
     firstUpdated(): void;
     private get secondaryButtonElement();

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: #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)}
+: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-footer-background-blur: 1rem;--glide-core-effects-shadow-footer-blur: .5rem;--glide-core-effects-shadow-footer-fill: #b5b5b540;--glide-core-effects-shadow-footer-spread: -.5rem;--glide-core-effects-shadow-footer-x: 0rem;--glide-core-effects-shadow-footer-y: -.5rem;--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-nav-background-blur: 6.25rem;--glide-core-effects-shadow-nav-blur: .25rem;--glide-core-effects-shadow-nav-fill: #00000040;--glide-core-effects-shadow-nav-spread: 0rem;--glide-core-effects-shadow-nav-x: 0rem;--glide-core-effects-shadow-nav-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-footer-background-blur: 1rem;--glide-core-effects-shadow-footer-blur: .5rem;--glide-core-effects-shadow-footer-fill: #b5b5b540;--glide-core-effects-shadow-footer-spread: -.5rem;--glide-core-effects-shadow-footer-x: 0rem;--glide-core-effects-shadow-footer-y: -.5rem;--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-nav-background-blur: 6.25rem;--glide-core-effects-shadow-nav-blur: .25rem;--glide-core-effects-shadow-nav-fill: #00000040;--glide-core-effects-shadow-nav-spread: 0rem;--glide-core-effects-shadow-nav-x: 0rem;--glide-core-effects-shadow-nav-y: .25rem;--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);--glide-core-shadow-footer: var(--glide-core-effects-shadow-footer-x) var(--glide-core-effects-shadow-footer-y) var(--glide-core-effects-shadow-footer-blur) var(--glide-core-effects-shadow-footer-spread) var(--glide-core-effects-shadow-footer-fill);--glide-core-shadow-nav: var(--glide-core-effects-shadow-nav-x) var(--glide-core-effects-shadow-nav-y) var(--glide-core-effects-shadow-nav-blur) var(--glide-core-effects-shadow-nav-spread) var(--glide-core-effects-shadow-nav-fill)}

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

package/dist/tag.styles.js

@@ -34,7 +34,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &.added {
-        animation: fade-in var(--animation-duration) ease-in-out;
+        @media (prefers-reduced-motion: no-preference) {
+          animation: fade-in var(--animation-duration) ease-in-out;
+        }
       }
 
       &.disabled {
@@ -42,10 +44,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &.removed {
-        animation-duration: var(--animation-duration);
-        animation-fill-mode: forwards;
-        animation-name: fade-out;
-        animation-timing-function: ease-in-out;
+        @media (prefers-reduced-motion: no-preference) {
+          animation-duration: var(--animation-duration);
+          animation-fill-mode: forwards;
+          animation-name: fade-out;
+          animation-timing-function: ease-in-out;
+        }
       }
     }
 

package/dist/toasts.toast.styles.js

@@ -13,9 +13,12 @@ import{css}from"lit";export default[css`
       line-height: var(--glide-core-body-xs-line-height);
       padding: var(--glide-core-spacing-sm);
       transform: translateX(110%);
-      transition:
-        transform 0.2s ease-out,
-        opacity 0.3s ease-out;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          transform 0.2s ease-out,
+          opacity 0.3s ease-out;
+      }
 
       &.error {
         background-color: var(--glide-core-surface-error);

package/dist/toggle.styles.js

@@ -48,6 +48,14 @@ Use the ":checked" pseudo class on the host and throughout when browsers support
         }
       }
 
+      &:has(input:checked:disabled) {
+        background-color: var(--glide-core-surface-primary-disabled);
+
+        &::before {
+          transform: translateX(0);
+        }
+      }
+
       &::before {
         background: var(--glide-core-surface-page);
         block-size: 0.875rem;

package/dist/tooltip.d.ts

@@ -6,7 +6,7 @@ declare global {
 }
 /**
  * @slot - The primary content of the tooltip.
- * @slot target - The element to which the tooltip should anchor.
+ * @slot target - The element to which the tooltip will anchor.
  */
 export default class GlideCoreTooltip extends LitElement {
     #private;

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=createRef(),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get offset(){return this.#f??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#f=e}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#c)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#h}" @mouseout="${this.#d}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" data-test="target" slot="target" @focusin="${this.#m}" @focusout="${this.#u}" @keydown="${this.#v}" ${ref(this.#i)}><slot @slotchange="${this.#g}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`],["right",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`],["bottom",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`],["left",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#R}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#w;#p;#t;#o;#l;#f;#c;#i;#s;#a;#E(){clearTimeout(this.#p)}#n(){this.#a.value?.hidePopover(),this.#w&&this.#w()}#R(){owSlot(this.#t.value)}#m(){this.open=!0}#u(){this.open=!1}#v(e){"Escape"===e.key&&(this.open=!1)}#d(){this.#y(),clearTimeout(this.#c)}#h(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#c=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#g(){owSlot(this.#s.value)}#y(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#p=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#w?.(),this.#i.value&&this.#a.value&&(this.#w=autoUpdate(this.#i.value,this.#a.value,(()=>{(async()=>{if(this.#i.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#i.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=new LocalizeController(this),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get offset(){return this.#p??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#p=e}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#c),clearTimeout(this.#f)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#d}" @mouseout="${this.#h}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target-slot-container"><slot class="target-slot" data-test="target-slot" @focusin="${this.#m}" @focusout="${this.#u}" @keydown="${this.#v}" @slotchange="${this.#g}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>arrows.top],["right",()=>arrows.right],["bottom",()=>arrows.bottom],["left",()=>arrows.left]])}</div><span aria-label="${ifDefined(this.disabled?void 0:this.#i.term("tooltip"))}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#w}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#y;#c;#t;#o;#l;#i;#p;#f;#s;#a;#E(){clearTimeout(this.#c)}#n(){this.#a.value?.hidePopover(),this.#y?.()}#h(){this.#R(),clearTimeout(this.#f)}#d(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#f=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#w(){owSlot(this.#t.value)}#g(){owSlot(this.#s.value)}#m(){this.open=!0}#u(){this.open=!1}#v(e){"Escape"===e.key&&(this.open=!1)}#R(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#c=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#y?.(),this.#s.value&&this.#a.value&&(this.#y=autoUpdate(this.#s.value,this.#a.value,(()=>{(async()=>{if(this.#s.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#s.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;const arrows={top:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,right:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottom:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,left:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};

package/dist/tooltip.styles.js

@@ -1,8 +1,9 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";export default[css`
     ${opacityAndScaleAnimation(".tooltip:popover-open")}
-    ${focusOutline(".target:focus-visible")}
+    ${focusOutline(".target-slot:focus-visible")}
   `,css`
     :host {
+      // https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771
       display: inline-block;
     }
 
@@ -15,25 +16,22 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       position: relative;
     }
 
-    .target {
-      background-color: transparent;
-      border-width: 0;
+    .target-slot-container {
+      /* Allows the consumer to style the target with an ellipsis when its text is truncated. */
+      inline-size: 100%;
+    }
 
+    .target-slot {
       /*
-        Additional whitespace from line height and the tooltip won't be vertically
+        Collapses additional whitespace from the slot's line height so the tooltip is vertically
         centered against its target.
       */
       display: flex;
 
       /* Allows the consumer to style the target with an ellipsis when its text is truncated. */
       inline-size: 100%;
-      padding: 0;
       position: relative;
 
-      &:focus {
-        outline: none;
-      }
-
       ::slotted svg {
         display: block;
       }
@@ -61,7 +59,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
           before landing in the correct position when the animation finishes. It only happens
           when the tooltip is left or right of its target.
         */
-
         &.top {
           flex-direction: column-reverse;
         }

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",announcedCharacterCount:(t,e)=>`Character count ${t} of ${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,actionsFor:t=>`Actions for ${t}`,itemCount:t=>`${t} items`,closeInlineAlert:t=>`Close ${t} alert`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",tooltip:"Tooltip:",announcedCharacterCount:(t,o)=>`Character count ${t} of ${o}`,displayedCharacterCount:(t,o)=>`${t}/${o}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,actionsFor:t=>`Actions for ${t}`,itemCount:t=>`${t} items`,closeInlineAlert:t=>`Close ${t} alert`};export default translation;