@crowdstrike/glide-core 0.22.0 → 0.24.0

package/dist/popover.js

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

package/dist/popover.styles.js

@@ -36,7 +36,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       background-color: transparent;
       border: none;
       inset: unset;
-      padding: var(--glide-core-spacing-xs);
+      padding: var(--glide-core-spacing-base-xs);
       position: absolute;
 
       &:popover-open {
@@ -72,7 +72,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       --private-arrow-height: 0.5625rem;
       --private-arrow-width: 1rem;
 
-      color: var(--glide-core-surface-modal);
+      color: var(--glide-core-private-color-dialog-and-modal-surface-container);
       display: flex;
       position: relative;
 
@@ -91,29 +91,29 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .default-slot {
-      background-color: var(--glide-core-surface-modal);
-      border-radius: var(--glide-core-spacing-xs);
+      background-color: var(
+        --glide-core-private-color-dialog-and-modal-surface-container
+      );
+      border-radius: var(--glide-core-spacing-base-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" 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);
+      color: var(--glide-core-color-static-text-default);
       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);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       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);
+      padding: var(--glide-core-spacing-base-sm);
     }
   `];

package/dist/radio-group.js

@@ -1,9 +1,9 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var o,s=arguments.length,r=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var d=e.length-1;d>=0;d--)(o=e[d])&&(r=(s<3?o(r):s>3?o(t,i,r):o(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import"./tooltip.js";import{html,LitElement}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{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreRadioGroupRadio from"./radio-group.radio.js";import styles from"./radio-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t){this.#i=!0,t.disabled=e,this.#i=!1;const i=this.#t.find((e=>e.checked)),a=this.#t.find((e=>!e.disabled));e?t.tabIndex=-1:t===i?t.tabIndex=0:i||t!==a||(t.tabIndex=0)}}get required(){return this.#a}set required(e){this.#a=e;for(const t of this.#t)t.privateRequired=e}get value(){return this.#o}set value(e){this.#o=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.#s.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){for(const e of this.#t)e.privateRequired=this.required,e.tabIndex=-1,this.disabled&&(e.disabled=this.disabled);const e=this.#t.findLast((({checked:e,disabled:t})=>e&&!t));if(e)return this.#o=e.value,this.disabled||(e.tabIndex=0),void(""!==e.value&&this.setAttribute("value",e.value));if(!e&&""!==this.value){const e=this.#t.findLast((({value:e})=>e===this.value));return!this.disabled&&e?.disabled&&(e.disabled=!1),void(e&&(e.checked=!0,e.tabIndex=0))}const t=this.#t.find((({disabled:e})=>!e));t&&(t.tabIndex=0)}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.#s.form}get validity(){const e=this.#t.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#s.validity.valueMissing&&e?(this.#s.setValidity({}),this.#s.validity):this.required&&this.disabled&&!e?(this.#s.setValidity({valueMissing:!0}," ",this.#d.value),this.#s.validity):(this.required||!this.#s.validity.valueMissing||e||this.#s.setValidity({}),this.#s.validity):(this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#d.value),this.#s.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
+var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length,r=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import"./tooltip.js";import{html,LitElement}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{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreRadioGroupRadio from"./radio-group.radio.js";import styles from"./radio-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;const t=this.#t.findLast((e=>e.checked));for(const i of this.#t){this.#i=!0,i.disabled=e,this.#i=!1;const a=this.#t.find((e=>!e.disabled));e?i.tabIndex=-1:i===t?i.tabIndex=0:t||i!==a||(i.tabIndex=0)}e?this.#a="":t&&(this.#a=t.value)}get required(){return this.#s}set required(e){this.#s=e;for(const t of this.#t)t.privateRequired=e}get value(){return this.#a}set value(e){if(this.#a=e,!this.#o)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.#r.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#d)}firstUpdated(){for(const e of this.#t)e.privateRequired=this.required,e.tabIndex=-1,this.disabled&&(e.disabled=this.disabled);const e=this.#t.findLast((({checked:e,disabled:t})=>e&&!t));if(e)return this.#a=e.value,this.disabled||(e.tabIndex=0),this.#o=!0,this.setAttribute("value",e.value),void(this.#o=!1);if(!e&&""!==this.value){const e=this.#t.findLast((({value:e})=>e===this.value));return!this.disabled&&e?.disabled&&(e.disabled=!1),void(e&&(e.checked=!0,e.tabIndex=0))}const t=this.#t.find((({disabled:e})=>!e));t&&(t.tabIndex=0)}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.#r.form}get validity(){const e=this.#t.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#r.validity.valueMissing&&e?(this.#r.setValidity({}),this.#r.validity):this.required&&this.disabled&&!e?(this.#r.setValidity({valueMissing:!0}," ",this.#l.value),this.#r.validity):(this.required||!this.#r.validity.valueMissing||e||this.#r.setValidity({}),this.#r.validity):(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.#r.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#d)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
       <div
         class="component"
-        @click=${this.#l}
-        @keydown=${this.#n}
-        ${ref(this.#d)}
+        @click=${this.#n}
+        @keydown=${this.#h}
+        ${ref(this.#l)}
       >
         <glide-core-private-label
           label=${ifDefined(this.label)}
@@ -11,26 +11,26 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var o,s=arguments.length
           split=${ifDefined(this.privateSplit??void 0)}
           tooltip=${ifDefined(this.tooltip)}
           ?disabled=${this.disabled}
-          ?error=${this.#h}
+          ?error=${this.#c}
           ?hide=${this.hideLabel}
           ?required=${this.required}
         >
           <label id="label" data-test="label"> ${this.label} </label>
 
           <div
-            class=${classMap({"radio-container":!0,invalid:this.#h})}
+            class=${classMap({"radio-container":!0,invalid:this.#c})}
             role="radiogroup"
             slot="control"
             aria-labelledby="label description"
           >
             <slot
-              @focusout=${this.#c}
-              @private-checked-change=${this.#u}
-              @private-disabled-change=${this.#p}
-              @private-value-change=${this.#f}
-              @slotchange=${this.#m}
+              @focusout=${this.#u}
+              @private-checked-change=${this.#p}
+              @private-disabled-change=${this.#f}
+              @private-value-change=${this.#m}
+              @slotchange=${this.#b}
               ${assertSlot([GlideCoreRadioGroupRadio])}
-              ${ref(this.#b)}
+              ${ref(this.#g)}
             >
               <!-- @type {GlideCoreRadio} -->
             </slot>
@@ -38,7 +38,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var o,s=arguments.length
 
           <div id="description" slot="description">
             <slot
-              class=${classMap({"description-slot":!0,hidden:Boolean(this.#h&&this.validityMessage)})}
+              class=${classMap({"description-slot":!0,hidden:Boolean(this.#c&&this.validityMessage)})}
               name="description"
             >
               <!--
@@ -47,10 +47,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var o,s=arguments.length
               -->
             </slot>
 
-            ${when(this.#h&&this.validityMessage,(()=>html`<div data-test="validity-message">
+            ${when(this.#c&&this.validityMessage,(()=>html`<div data-test="validity-message">
                   ${unsafeHTML(this.validityMessage)}
                 </div>`))}
           </div>
         </glide-core-private-label>
       </div>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#s.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#s.setValidity({customError:!1},"",this.#d.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#s.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#b=createRef(),this.#e=!1,this.#i=!1,this.#a=!1,this.#o="",this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#s=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;#b;#s;#e;#i;#a;#o;#r;get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#g(e){this.#t.find((({tabIndex:e})=>0===e))?.setAttribute("tabindex","-1"),this.#o=e.value,e.checked=!0,e.tabIndex=0,e.focus()}#l(e){if(!this.disabled)if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));e?.focus()}else if(e.target instanceof GlideCoreRadioGroupRadio&&!e.target.disabled){const t=this.#t.filter((t=>t!==e.target));for(const e of t)e.checked=!1,e.tabIndex=-1;this.#g(e.target)}}#n(e){if(!(this.disabled||e.target instanceof GlideCoreRadioGroupRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadioGroupRadio)switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const t=this.#t.slice(0,this.#t.indexOf(e.target)).findLast((e=>!e.disabled)),i=this.#t.findLast((e=>!e.disabled));t&&t!==e.target?(this.#v(e.target),this.#g(t)):i&&i!==e.target&&(this.#v(e.target),this.#g(i));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const t=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof GlideCoreRadioGroupRadio&&i>this.#t.indexOf(e.target))),i=this.#t.find((e=>!e.disabled));t&&t!==e.target?(this.#v(e.target),this.#g(t)):i&&i!==e.target&&(this.#v(e.target),this.#g(i));break}case" ":if(e.preventDefault(),!e.target.disabled&&!e.target.checked){this.#g(e.target);for(const t of this.#t)t!==e.target&&this.#v(t)}}}#m(){const e=this.#t.findLast((({checked:e,disabled:t})=>e&&!t));e&&(this.#o=e.value)}#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.#b.value?this.#b.value.assignedElements().filter((e=>e instanceof GlideCoreRadioGroupRadio)):[]}#u(e){if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&!e.detail.old&&e.detail.new){const t=this.#t.find((({tabIndex:e})=>0===e));t&&t!==e.target&&this.#v(t),this.#o=e.target.value,e.target.tabIndex=e.target.disabled?-1:0}}#p(e){if(this.#i)return;if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const t=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof GlideCoreRadioGroupRadio&&i>this.#t.indexOf(e.target)));if(t&&0===e.target.tabIndex)return t.tabIndex=0,void(e.target.tabIndex=-1);const i=this.#t.find((e=>!e.disabled));if(i&&0===e.target.tabIndex)return i.tabIndex=0,void(e.target.tabIndex=-1)}const t=this.#t.some((({tabIndex:e})=>0===e));e.target instanceof GlideCoreRadioGroupRadio&&!t&&!this.disabled&&(e.target.tabIndex=0)}#f(e){e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&e.detail.new?this.#o=e.target.value:e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&(this.#o="")}#v(e){e.checked=!1,e.tabIndex=-1}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"version",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"),final],GlideCoreRadioGroup);export default GlideCoreRadioGroup;
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#l.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#g=createRef(),this.#e=!1,this.#i=!1,this.#s=!1,this.#o=!1,this.#a="",this.#d=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#r=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()}}))}#l;#g;#r;#e;#i;#s;#o;#a;#d;get#c(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#v(e){this.#t.find((({tabIndex:e})=>0===e))?.setAttribute("tabindex","-1"),this.#a=e.value,e.checked=!0,e.tabIndex=0,e.focus()}#n(e){if(!this.disabled)if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));e?.focus()}else if(e.target instanceof GlideCoreRadioGroupRadio&&!e.target.disabled){const t=this.#t.filter((t=>t!==e.target));for(const e of t)e.checked=!1,e.tabIndex=-1;this.#v(e.target)}}#h(e){if(!(this.disabled||e.target instanceof GlideCoreRadioGroupRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadioGroupRadio)switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const t=this.#t.slice(0,this.#t.indexOf(e.target)).findLast((e=>!e.disabled)),i=this.#t.findLast((e=>!e.disabled));t&&t!==e.target?(this.#R(e.target),this.#v(t)):i&&i!==e.target&&(this.#R(e.target),this.#v(i));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const t=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof GlideCoreRadioGroupRadio&&i>this.#t.indexOf(e.target))),i=this.#t.find((e=>!e.disabled));t&&t!==e.target?(this.#R(e.target),this.#v(t)):i&&i!==e.target&&(this.#R(e.target),this.#v(i));break}case" ":if(e.preventDefault(),!e.target.disabled&&!e.target.checked){this.#v(e.target);for(const t of this.#t)t!==e.target&&this.#R(t)}}}#b(){const e=this.#t.findLast((({checked:e,disabled:t})=>e&&!t));e&&(this.#a=e.value)}#u(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#g.value?this.#g.value.assignedElements().filter((e=>e instanceof GlideCoreRadioGroupRadio)):[]}#p(e){if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&!e.detail.old&&e.detail.new){const t=this.#t.find((({tabIndex:e})=>0===e));t&&t!==e.target&&this.#R(t),this.#a=e.target.value,e.target.tabIndex=e.target.disabled?-1:0}}#f(e){if(!this.#i){if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const t=this.#t.findLast((e=>e.checked&&!e.disabled));e.target.checked&&!t?this.#a="":t&&(this.#a=t.value);const i=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof GlideCoreRadioGroupRadio&&i>this.#t.indexOf(e.target)));if(i&&0===e.target.tabIndex)return i.tabIndex=0,void(e.target.tabIndex=-1);const a=this.#t.find((e=>!e.disabled));if(a&&0===e.target.tabIndex)return a.tabIndex=0,void(e.target.tabIndex=-1)}if(e.target instanceof GlideCoreRadioGroupRadio&&!this.disabled){this.#t.some((({tabIndex:e})=>0===e))||(e.target.tabIndex=0);const t=this.#t.findLast((e=>e.checked&&!e.disabled));e.target===t&&(this.#a=e.target.value)}else;}}#m(e){const t=this.#t.findLast((e=>e.checked&&!this.disabled));e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&e.detail.new&&e.target===t?this.#a=e.target.value:e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&e.target===t&&(this.#a="")}#R(e){e.checked=!1,e.tabIndex=-1}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"version",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"),final],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

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

@@ -29,7 +29,7 @@ export default class GlideCoreRadioGroupRadio extends LitElement {
      * @default false
      */
     get disabled(): boolean;
-    set disabled(disabled: boolean);
+    set disabled(isDisabled: boolean);
     get privateInvalid(): boolean;
     set privateInvalid(invalid: boolean);
     /**
@@ -46,5 +46,6 @@ export default class GlideCoreRadioGroupRadio extends LitElement {
     set value(value: string);
     readonly version: string;
     firstUpdated(): void;
+    private get lastCheckedRadio();
     render(): import("lit").TemplateResult<1>;
 }

package/dist/radio-group.radio.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length,d=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(d=(a<3?o(d):a>3?o(t,i,d):o(t,i))||d);return a>3&&d&&Object.defineProperty(t,i,d),d};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./radio-group.radio.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreRadioGroupRadio=class GlideCoreRadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i=!1,this.#r=!1,this.#o=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e.toString(),e&&t!==e&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))),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(),this.dispatchEvent(new CustomEvent("private-disabled-change",{bubbles:!0}))}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.ariaRequired=this.privateRequired.toString(),this.role="radio",this.label&&(this.ariaLabel=this.label)}render(){return html`<div class="component" data-test="component"><div class="${classMap({circle:!0,checked:this.checked,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#a}</div>`}#e;#t;#a;#i;#r;#o};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],GlideCoreRadioGroupRadio.prototype,"privateInvalid",null),__decorate([property({reflect:!0}),required],GlideCoreRadioGroupRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"privateRequired",null),__decorate([property()],GlideCoreRadioGroupRadio.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreRadioGroupRadio.prototype,"version",void 0),GlideCoreRadioGroupRadio=__decorate([customElement("glide-core-radio-group-radio"),final],GlideCoreRadioGroupRadio);export default GlideCoreRadioGroupRadio;
+var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,d=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,a);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(d=(o<3?r(d):o>3?r(t,i,d):r(t,i))||d);return o>3&&d&&Object.defineProperty(t,i,d),d};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./radio-group.radio.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreRadioGroupRadio=class GlideCoreRadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i=!1,this.#a=!1,this.#r=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e&&!this.disabled?"true":"false",e&&t!==e&&(this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))),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(),this.ariaChecked=this.checked&&!e?"true":"false",this.dispatchEvent(new CustomEvent("private-disabled-change",{bubbles:!0}))}get privateInvalid(){return this.#i}set privateInvalid(e){this.#i=e,this.ariaInvalid=e.toString()}get label(){return this.#o}set label(e){this.#o=e,this.ariaLabel=e.toString()}get privateRequired(){return this.#a}set privateRequired(e){this.#a=e,this.ariaRequired=e.toString()}get value(){return this.#r}set value(e){const t=this.#r;this.#r=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked&&!this.disabled&&this===this.lastCheckedRadio?"true":"false",this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaRequired=this.privateRequired.toString(),this.role="radio",this.label&&(this.ariaLabel=this.label)}get lastCheckedRadio(){const e=this.parentElement?.querySelectorAll("glide-core-radio-group-radio");if(e&&e.length>0)return[...e].findLast((e=>e.checked))}render(){return html`<div class="component" data-test="component"><div class="${classMap({circle:!0,checked:this.checked&&this===this.lastCheckedRadio&&!this.disabled,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#o}</div>`}#e;#t;#o;#i;#a;#r};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],GlideCoreRadioGroupRadio.prototype,"privateInvalid",null),__decorate([property({reflect:!0}),required],GlideCoreRadioGroupRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"privateRequired",null),__decorate([property()],GlideCoreRadioGroupRadio.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreRadioGroupRadio.prototype,"version",void 0),__decorate([state()],GlideCoreRadioGroupRadio.prototype,"lastCheckedRadio",null),GlideCoreRadioGroupRadio=__decorate([customElement("glide-core-radio-group-radio"),final],GlideCoreRadioGroupRadio);export default GlideCoreRadioGroupRadio;

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

@@ -19,20 +19,32 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
     .component {
       align-items: center;
-      color: var(--glide-core-text-body-1);
+      color: var(--glide-core-color-interactive-text-default);
       display: flex;
-      font-weight: var(--glide-core-body-md-font-weight);
+      font-weight: var(--glide-core-typography-weight-regular);
 
       &:hover {
-        .circle {
-          border-color: var(--glide-core-border-focus);
-          box-shadow: var(--glide-core-glow-sm);
+        .circle:not(.disabled) {
+          border-color: var(--glide-core-color-interactive-icon-active--hover);
+
+          &.checked {
+            border-color: var(
+              --glide-core-color-interactive-icon-active--hover
+            );
+            box-shadow: var(--glide-core-effect-hovered);
+
+            &::after {
+              background-color: var(
+                --glide-core-color-interactive-icon-active--hover
+              );
+            }
+          }
         }
       }
 
       .circle {
         block-size: 1rem;
-        border: 1px solid var(--glide-core-border-base-dark);
+        border: 1px solid var(--glide-core-color-interactive-stroke-contrast);
         border-radius: 50%;
         box-sizing: border-box;
         inline-size: 1rem;
@@ -44,8 +56,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
           box-shadow 200ms ease-in-out;
 
         &.checked {
-          background-color: var(--glide-core-color-white);
-          border-color: var(--glide-core-surface-primary);
+          background-color: var(
+            --glide-core-private-color-checkbox-surface-background-idle
+          );
+          border-color: var(--glide-core-color-interactive-icon-active);
 
           &.animate {
             @media (prefers-reduced-motion: no-preference) {
@@ -56,7 +70,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
           }
 
           &::after {
-            background-color: var(--glide-core-surface-primary);
+            background-color: var(
+              --glide-core-color-interactive-surface-container-active
+            );
             block-size: 0.5rem;
             border-radius: 50%;
             box-sizing: border-box;
@@ -70,12 +86,16 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         }
 
         &.disabled {
-          border-color: var(--glide-core-surface-primary-disabled);
+          border-color: var(
+            --glide-core-private-color-radio-icon-default--disabled
+          );
           box-shadow: none;
           cursor: not-allowed;
 
           &::after {
-            background-color: var(--glide-core-surface-primary-disabled);
+            background-color: var(
+              --glide-core-private-color-radio-icon-default--disabled
+            );
           }
         }
       }

package/dist/radio-group.styles.js

@@ -1,11 +1,9 @@
 import{css}from"lit";export default[css`
     .component {
-      color: var(--glide-core-text-body-1);
-      font-family: var(--glide-core-heading-xxxs-font-family);
-      font-size: var(--glide-core-heading-xxxs-font-size);
-      font-style: var(--glide-core-heading-xxxs-font-style);
-      font-variant: var(--glide-core-heading-xxxs-font-variant);
-      font-weight: var(--glide-core-heading-xxxs-font-weight);
+      color: var(--glide-core-color-static-text-default);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-bold);
     }
 
     .radio-container {
@@ -14,12 +12,12 @@ import{css}from"lit";export default[css`
       gap: 0.375rem;
 
       &.invalid {
-        border: 1px solid var(--glide-core-status-error);
-        border-radius: 0.5rem;
-        color: var(--glide-core-status-error);
+        border: 1px solid var(--glide-core-color-error-stroke-primary);
+        border-radius: var(--glide-core-rounding-base-radius-sm);
+        color: var(--glide-core-color-error-stroke-primary);
         margin-block-end: -0.0625rem;
         margin-inline-start: -0.0625rem;
-        padding: var(--glide-core-spacing-xxs) 0.375rem;
+        padding: var(--glide-core-spacing-base-xxs) 0.375rem;
       }
     }
 

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

@@ -3,19 +3,18 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
   `,css`
     .component {
       align-items: center;
-      border-radius: 0.75rem 0 0 0.75rem;
+      border-radius: var(--glide-core-rounding-base-radius-md) 0 0
+        var(--glide-core-rounding-base-radius-md);
       border-style: solid;
       border-width: 1px 0 1px 1px;
       cursor: pointer;
       display: inline-flex;
-      font-family: var(--glide-core-heading-xxs-font-family);
-      font-style: var(--glide-core-heading-xxs-font-style);
-      font-weight: var(--glide-core-heading-xxs-font-weight);
+      font-family: var(--glide-core-typography-family-primary);
+      font-weight: var(--glide-core-typography-weight-bold);
       gap: 0.625rem;
       justify-content: center;
-      padding-block: var(--glide-core-spacing-xs);
-      padding-inline: var(--glide-core-spacing-md);
-      padding-inline-end: var(--glide-core-spacing-xs);
+      padding-block: var(--glide-core-spacing-base-xs);
+      padding-inline: var(--glide-core-spacing-base-md);
       position: relative;
       text-decoration: none;
       transition-duration: 150ms;
@@ -32,65 +31,81 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
       &:focus-visible {
         /* Covers up the secondary button's border. */
-        box-shadow: 0 0 0 2px var(--glide-core-surface-page) !important;
+        box-shadow: 0 0 0 2px
+          var(--glide-core-color-interactive-surface-container) !important;
       }
 
       &.primary {
-        background-color: var(--glide-core-surface-primary);
+        background-color: var(
+          --glide-core-color-interactive-surface-container-active
+        );
         border-color: transparent;
-        color: var(--glide-core-text-selected);
+        color: var(--glide-core-private-color-button-text-primary);
       }
 
       &.secondary {
-        background-color: var(--glide-core-surface-page);
-        border-color: var(--glide-core-border-primary);
-        color: var(--glide-core-text-primary);
+        background-color: var(--glide-core-color-interactive-surface-container);
+        border-color: var(--glide-core-private-color-button-stroke-default);
+        color: var(--glide-core-color-interactive-text-link);
 
         &:not(.disabled) {
           /* So it has a right border when the secondary button is disabled. */
-          box-shadow: 1px 0 0 var(--glide-core-border-primary);
+          box-shadow: 1px 0 0
+            var(--glide-core-private-color-button-stroke-default);
+        }
+
+        &.disabled {
+          border-color: var(
+            --glide-core-color-interactive-stroke-primary--disabled
+          );
         }
       }
 
       &.small {
         block-size: 1.75rem;
         box-sizing: border-box;
-        font-size: var(--glide-core-body-xs-font-size);
+        font-size: var(--glide-core-typography-size-body-small);
         line-height: 1rem;
       }
 
       &.large {
         block-size: 2.125rem;
         box-sizing: border-box;
-        font-size: var(--glide-core-body-xxs-font-size);
+        font-size: var(--glide-core-typography-size-body-large);
         line-height: 1.5rem;
       }
 
-      /* 
-        A "disabled" class is used instead of ":disabled" because these styles are 
-        shared between Split Button Primary Button and Split Button Primary Link.  
+      /*
+        A "disabled" class is used instead of ":disabled" because these styles are
+        shared between Split Button Primary Button and Split Button Primary Link.
       */
       &.disabled {
-        background-color: var(--glide-core-surface-disabled);
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border-color: transparent;
-        color: var(--glide-core-text-tertiary-disabled);
+        color: var(--glide-core-color-interactive-text-link--disabled);
         cursor: not-allowed;
       }
 
       &:not(:active, .disabled):is(:focus, :hover) {
-        background-color: var(--glide-core-surface-hover);
+        background-color: var(
+          --glide-core-color-interactive-surface-container--hover
+        );
         border-color: transparent;
-        color: var(--glide-core-text-primary);
+        color: var(--glide-core-color-interactive-text-link);
       }
 
       &:not(:active, .disabled):is(:hover) {
-        box-shadow: var(--glide-core-glow-sm);
+        box-shadow: var(--glide-core-effect-hovered);
         z-index: 1;
       }
 
       &:not(.disabled):active {
-        background-color: var(--glide-core-surface-selected-hover);
-        color: var(--glide-core-text-selected);
+        background-color: var(
+          --glide-core-color-interactive-surface-container-active
+        );
+        color: var(--glide-core-private-color-button-text-primary);
       }
     }
   `];