@crowdstrike/glide-core 0.19.4 → 0.20.0

package/dist/menu.options.d.ts

@@ -5,7 +5,13 @@ declare global {
     }
 }
 /**
- * @slot - One or more of `<glide-core-menu-button>` or `<glide-core-menu-link>`.
+ * @attr {string} [aria-activedescendant='']
+ * @attr {string} [aria-labelledby='']
+ *
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {GlideCoreMenuButton | GlideCoreMenuLink}
  */
 export default class GlideCoreMenuOptions extends LitElement {
     #private;
@@ -13,7 +19,7 @@ export default class GlideCoreMenuOptions extends LitElement {
     static styles: import("lit").CSSResult[];
     ariaActivedescendant: string;
     ariaLabelledby: string;
-    privateSize: 'small' | 'large';
+    privateSize: 'large' | 'small';
     readonly version: string;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/menu.options.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.version=packageJson.version,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menu",this.tabIndex=-1}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink,Text])} @slotchange="${this.#t}"></slot></div>`}#e;#t(){this.dispatchEvent(new Event("private-slot-change",{bubbles:!0}))}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([property()],GlideCoreMenuOptions.prototype,"privateSize",void 0),__decorate([property({reflect:!0})],GlideCoreMenuOptions.prototype,"version",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,s=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(n<3?r(s):n>3?r(t,o,s):r(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.version=packageJson.version,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menu",this.tabIndex=-1}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink,Text])} @slotchange="${this.#t}"></slot></div>`}#e;#t(){this.dispatchEvent(new Event("private-slot-change",{bubbles:!0}))}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([property()],GlideCoreMenuOptions.prototype,"privateSize",void 0),__decorate([property({reflect:!0})],GlideCoreMenuOptions.prototype,"version",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options"),final],GlideCoreMenuOptions);export default GlideCoreMenuOptions;

package/dist/menu.options.styles.js

@@ -6,9 +6,9 @@ import{css}from"lit";export default[css`
 
     .component {
       &.large {
-        --gap: var(--glide-core-spacing-sm);
-        --padding-inline: var(--glide-core-spacing-sm);
-        --padding-block: var(--glide-core-spacing-xxs);
+        --private-gap: var(--glide-core-spacing-sm);
+        --private-padding-inline: var(--glide-core-spacing-sm);
+        --private-padding-block: var(--glide-core-spacing-xxs);
 
         font-family: var(--glide-core-body-sm-font-family);
         font-size: var(--glide-core-body-sm-font-size);
@@ -18,10 +18,10 @@ import{css}from"lit";export default[css`
       }
 
       &.small {
-        --gap: var(--glide-core-spacing-xs);
-        --padding-inline: var(--glide-core-spacing-xs);
-        --padding-block: var(--glide-core-spacing-xxxs);
-        --size: 0.75rem;
+        --private-gap: var(--glide-core-spacing-xs);
+        --private-padding-inline: var(--glide-core-spacing-xs);
+        --private-padding-block: var(--glide-core-spacing-xxxs);
+        --private-size: 0.75rem;
 
         font-family: var(--glide-core-body-xs-font-family);
         font-size: var(--glide-core-body-xs-font-size);

package/dist/modal.d.ts

@@ -5,13 +5,22 @@ declare global {
     }
 }
 /**
- * @event toggle
+ * @attr {string} label
+ * @attr {boolean} [back-button=false]
+ * @attr {boolean} [open=false]
+ * @attr {'critical'|'informational'|'medium'} [severity]
+ * @attr {'small'|'medium'|'large'|'xlarge'} [size='medium']
  *
- * @slot - The primary content of the modal.
- * @slot header-actions - One or more of `<glide-core-modal-icon-button>`.
- * @slot primary - One of `<glide-core-button>`.
- * @slot secondary - One of `<glide-core-button>`.
- * @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-tooltip>`.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element | string}
+ * @slot {GlideCoreModalIconButton} [header-actions]
+ * @slot {GlideCoreButton} [primary]
+ * @slot {GlideCoreButton} [secondary]
+ * @slot {GlideCoreButton | GlideCoreTooltip} [tertiary]
+ *
+ * @fires {Event} toggle
  */
 export default class GlideCoreModal extends LitElement {
     #private;
@@ -19,8 +28,12 @@ export default class GlideCoreModal extends LitElement {
     static styles: import("lit").CSSResult[];
     backButton: boolean;
     label?: string;
+    /**
+     * @default false
+     */
     get open(): boolean;
     set open(isOpen: boolean);
+    severity?: 'critical' | 'informational' | 'medium';
     size?: 'small' | 'medium' | 'large' | 'xlarge';
     readonly version: string;
     connectedCallback(): void;

package/dist/modal.icon-button.d.ts

@@ -6,13 +6,17 @@ declare global {
     }
 }
 /**
- * @slot - The content of the button. Should only be an icon. The icon should also use the
- *         "label" attribute for accessibility.
+ * @attr {string} label
+ *
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element} - An icon
  */
 export default class GlideCoreModalIconButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label?: string | undefined;
+    label?: string;
     readonly version: string;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/modal.icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(o,t,e,r){var i,l=arguments.length,s=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(o,t,e,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(s=(l<3?i(s):l>3?i(t,e,s):i(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import"./icon-button.js";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./modal.icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property()],GlideCoreModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreModalIconButton.prototype,"version",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button")],GlideCoreModalIconButton);export default GlideCoreModalIconButton;
+var __decorate=this&&this.__decorate||function(o,t,e,r){var i,l=arguments.length,n=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(o,t,e,r);else for(var s=o.length-1;s>=0;s--)(i=o[s])&&(n=(l<3?i(n):l>3?i(t,e,n):i(t,e))||n);return l>3&&n&&Object.defineProperty(t,e,n),n};import"./icon-button.js";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./modal.icon-button.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 GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property(),required],GlideCoreModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreModalIconButton.prototype,"version",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button"),final],GlideCoreModalIconButton);export default GlideCoreModalIconButton;

package/dist/modal.icon-button.styles.js

@@ -1,6 +1,6 @@
 import{css}from"lit";export default[css`
     ::slotted(*) {
-      --size: 1.125rem;
+      --private-size: 1.125rem;
 
       block-size: 1.125rem;
       inline-size: 1.125rem;

package/dist/modal.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreTooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  .private-glide-core-modal-lock-scroll {\n    scrollbar-gutter: stable !important;\n    overflow: hidden !important;\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=createRef(),this.#s=!1,this.#n=!1,this.#r=new LocalizeController(this),this.#a=()=>{this.#s=!0},this.#c=()=>{this.#s=!0},this.#d=()=>{const e=this.open;setTimeout((()=>{this.#s?setTimeout((()=>{this.#s=!1})):e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#n}set open(e){const t=e!==this.#n;this.#n=e,e&&t?(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#h(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#d,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#d,{capture:!0})}firstUpdated(){this.open&&this.#m(),this.#l.value?.addEventListener("click",this.#a,{capture:!0}),this.#l.value?.addEventListener("mouseup",this.#c)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#p}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#l)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("dismiss")}" @click="${this.#u}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([GlideCoreModalIconButton],!0)} ${ref(this.#i)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" ${assertSlot([GlideCoreButton,GlideCoreTooltip],!0)}></slot></li><li class="action"><slot name="secondary" ${assertSlot([GlideCoreButton],!0)}></slot></li><li class="action"><slot name="primary" ${assertSlot([GlideCoreButton],!0)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#l;#i;#s;#n;#r;#a;#c;#d;#h(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#p(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#m(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(n=(s<3?l(n):s>3?l(t,o,n):l(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreTooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import final from"./library/final.js";import required from"./library/required.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  .private-glide-core-modal-lock-scroll {\n    scrollbar-gutter: stable !important;\n    overflow: hidden !important;\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=createRef(),this.#l=createRef(),this.#s=!1,this.#n=!1,this.#r=new LocalizeController(this),this.#a=()=>{this.#s=!0},this.#c=()=>{this.#s=!0},this.#d=()=>{const e=this.open;setTimeout((()=>{this.#s?setTimeout((()=>{this.#s=!1})):e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#n}set open(e){const t=e!==this.#n;this.#n=e,e&&t?(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#p(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#d,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#d,{capture:!0})}firstUpdated(){this.open&&this.#m(),this.#i.value?.addEventListener("click",this.#a,{capture:!0}),this.#i.value?.addEventListener("mouseup",this.#c)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#h}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#i)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.severity,(()=>html`<span class="${classMap({severity:!0,critical:"critical"===this.severity,informational:"informational"===this.severity,medium:"medium"===this.severity})}" data-test="severity">${this.severity&&icons[this.severity]}</span>`))} ${when(this.backButton&&!this.severity,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("dismiss")}" @click="${this.#u}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([GlideCoreModalIconButton],!0)} ${ref(this.#l)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" ${assertSlot([GlideCoreButton,GlideCoreTooltip],!0)}></slot></li><li class="action"><slot name="secondary" ${assertSlot([GlideCoreButton],!0)}></slot></li><li class="action"><slot name="primary" ${assertSlot([GlideCoreButton],!0)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#i;#l;#s;#n;#r;#a;#c;#d;#p(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#h(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#m(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0}),required],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"severity",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal"),final],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,critical:severityCriticalIcon,informational:severityInformationalIcon,medium:severityMediumIcon};

package/dist/modal.styles.js

@@ -56,7 +56,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       ::slotted([slot='tertiary']) {
-        --size: 1rem;
+        --private-size: 1rem;
 
         display: contents;
         size: 1rem;
@@ -113,27 +113,45 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       gap: 0.625rem;
 
       ::slotted(*) {
-        /* 
-          Flex so the actions don't sit on the baseline of ".header" and can be 
+        /*
+          Flex so the actions don't sit on the baseline of ".header" and can be
           vertically centered.
         */
         display: flex;
       }
     }
 
+    .severity {
+      --private-size: 1.5rem;
+
+      display: flex;
+
+      &.informational {
+        color: var(--glide-core-status-warning-informational);
+      }
+
+      &.medium {
+        color: var(--glide-core-status-warning-medium);
+      }
+
+      &.critical {
+        color: var(--glide-core-status-warning-critical);
+      }
+    }
+
     .back-button {
-      /* 
-        Flex so the icon doesn't sit on the baseline and extend the height of 
+      /*
+        Flex so the icon doesn't sit on the baseline and extend the height of
         ".back-button", making the icon not vertically centered relative to ".label".
       */
       display: flex;
     }
 
     .close-button {
-      --size: 1.25rem;
+      --private-size: 1.25rem;
 
-      /* 
-        Flex so the icon doesn't sit on the baseline and extend the height of 
+      /*
+        Flex so the icon doesn't sit on the baseline and extend the height of
         ".close-button", making the icon not vertically centered relative to ".label".
       */
       display: flex;

package/dist/popover.d.ts

@@ -5,19 +5,36 @@ declare global {
     }
 }
 /**
- * @event toggle
+ * @attr {boolean} [disabled=false]
+ * @attr {number} [offset=4]
+ * @attr {boolean} [open=false]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement]
  *
- * @slot - The content of the popover.
- * @slot target - The element to which the popover will anchor, which can be any focusable element.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element | string} - The content of the popover
+ * @slot {Element} [target] - The element to which the popover will anchor. Can be any focusable element.
+ *
+ * @fires {Event} toggle
  */
 export default class GlideCorePopover extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
+    /**
+     * @default 4
+     */
     get offset(): number;
     set offset(offset: number);
+    /**
+     * @default false
+     */
     get open(): boolean;
     set open(isOpen: boolean);
     placement?: 'bottom' | 'left' | 'right' | 'top';

package/dist/popover.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,l=arguments.length,s=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(l<3?i(s):l>3?i(t,o,s):i(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};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";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.#s=!1,this.#a=createRef(),this.#n=createRef(),this.#p=()=>{if(this.#r||this.#s||this.#o)return this.#r=!1,this.#s=!1,void(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.#a.value&&(this.#a.value.popover="manual"),this.open&&!this.disabled&&this.#f(),this.#t.value?.addEventListener("mouseup",(()=>{this.#r=!0})),this.#n.value?.addEventListener("mouseup",(()=>{this.#s=!0})),this.#e.value?.addEventListener("mouseup",(()=>{this.#o=!0})),this.#n.value?.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(this.#s=!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.#a)}><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;#s;#m;#a;#n;#p;#d(){this.#a.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.#a.value&&(this.#u=autoUpdate(this.#n.value,this.#a.value,(()=>{(async()=>{if(this.#n.value&&this.#a.value&&this.#e.value){const e=Number.parseFloat(window.getComputedStyle(this.#a.value).padding),{x:t,y:o,placement:r,middlewareData:i}=await computePosition(this.#n.value,this.#a.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.#a.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.#a.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")],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-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

@@ -69,8 +69,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .arrow {
-      --arrow-height: 0.5625rem;
-      --arrow-width: 1rem;
+      --private-arrow-height: 0.5625rem;
+      --private-arrow-width: 1rem;
 
       color: var(--glide-core-surface-modal);
       display: flex;
@@ -78,14 +78,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.top,
       &.bottom {
-        block-size: var(--arrow-height);
-        inline-size: var(--arrow-width);
+        block-size: var(--private-arrow-height);
+        inline-size: var(--private-arrow-width);
       }
 
       &.right,
       &.left {
-        block-size: var(--arrow-width);
-        inline-size: var(--arrow-height);
+        block-size: var(--private-arrow-width);
+        inline-size: var(--private-arrow-height);
         order: 2;
       }
     }

package/dist/radio-group.d.ts

@@ -8,18 +8,55 @@ declare global {
     }
 }
 /**
- * @event change
- * @event input
- * @event invalid
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {string} [tooltip]
+ * @attr {string} [value='']
  *
- * @slot - One or more of `<glide-core-radio>`.
- * @slot description - Additional information or context.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {GlideCoreRadio}
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
  */
 export default class GlideCoreRadioGroup extends LitElement implements FormControl {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
     hideLabel: boolean;
@@ -28,8 +65,14 @@ export default class GlideCoreRadioGroup extends LitElement implements FormContr
     orientation: "horizontal";
     privateSplit?: 'left' | 'middle';
     tooltip?: string;
+    /**
+     * @default false
+     */
     get required(): boolean;
     set required(isRequired: boolean);
+    /**
+     * @default ''
+     */
     get value(): string;
     set value(value: string);
     readonly version: string;
@@ -39,7 +82,6 @@ export default class GlideCoreRadioGroup extends LitElement implements FormContr
     focus(options?: FocusOptions): void;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
-    get willValidate(): boolean;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/radio-group.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length,r=a<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,i,t,o);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(r=(a<3?s(r):a>3?s(i,t,r):s(i,t))||r);return a>3&&r&&Object.defineProperty(i,t,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";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 i of this.#i)i.disabled=e}get required(){return this.#t}set required(e){this.#t=e;for(const i of this.#i)i.privateRequired=e}get value(){return this.#o}set value(e){this.#o=e;for(const i of this.#i){const t=Boolean(e&&i.value===e);i.checked=!!t,i.tabIndex=t?0:-1,i.checked&&i.disabled&&(i.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#s.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a)}firstUpdated(){if(this.disabled)for(const e of this.#i)e.disabled=!0;if(this.required)for(const e of this.#i)e.privateRequired=!0;const e=this.value?this.#i.find((({value:e})=>e===this.value)):this.#i.find((({checked:e,disabled:i})=>e&&!i));if(!this.value&&e?.value&&this.setAttribute("value",e.value),e){this.value=e.value;for(const i of this.#i)i.tabIndex=i===e?0:-1;return}const i=this.#i.find((({disabled:e})=>!e));for(const e of this.#i)e.tabIndex=e===i?0:-1}focus(e){const i=this.#i.find((({checked:e,disabled:i})=>e&&!i))??this.#i.find((({tabIndex:e})=>0===e));i?.focus(e)}get form(){return this.#s.form}get validity(){const e=this.#i.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.#r.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.#r.value),this.#s.validity)}get willValidate(){return this.#s.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
+var __decorate=this&&this.__decorate||function(e,t,i,o){var a,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var d=e.length-1;d>=0;d--)(a=e[d])&&(r=(s<3?a(r):s>3?a(t,i,r):a(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)t.disabled=e,t.tabIndex=e?-1:0}get required(){return this.#i}set required(e){this.#i=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.#a.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s)}firstUpdated(){if(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.#o=e.value;for(const t of this.#t)t.tabIndex=t!==e||t.disabled?-1:0;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.#a.form}get validity(){const e=this.#t.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#a.validity.valueMissing&&e?(this.#a.setValidity({}),this.#a.validity):this.required&&this.disabled&&!e?(this.#a.setValidity({valueMissing:!0}," ",this.#r.value),this.#a.validity):(this.required||!this.#a.validity.valueMissing||e||this.#a.setValidity({}),this.#a.validity):(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#r.value),this.#a.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
       <div
         class="component"
         @click=${this.#d}
@@ -6,6 +6,7 @@ var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length
         ${ref(this.#r)}
       >
         <glide-core-private-label
+          label=${ifDefined(this.label)}
           orientation=${this.orientation}
           split=${ifDefined(this.privateSplit??void 0)}
           tooltip=${ifDefined(this.tooltip)}
@@ -25,17 +26,25 @@ var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length
             <slot
               @focusout=${this.#h}
               @private-checked-change=${this.#c}
-              @private-value-change=${this.#u}
+              @private-disabled-change=${this.#u}
+              @private-value-change=${this.#p}
               ${assertSlot([GlideCoreRadioGroupRadio])}
-              ${ref(this.#p)}
-            ></slot>
+              ${ref(this.#f)}
+            >
+              <!-- @type {GlideCoreRadio} -->
+            </slot>
           </div>
 
           <div id="description" slot="description">
             <slot
               class=${classMap({"description-slot":!0,hidden:Boolean(this.#n&&this.validityMessage)})}
               name="description"
-            ></slot>
+            >
+              <!--
+                Additional information or context
+                @type {Element | string}
+              -->
+            </slot>
 
             ${when(this.#n&&this.validityMessage,(()=>html`<div data-test="validity-message">
                   ${unsafeHTML(this.validityMessage)}
@@ -43,4 +52,4 @@ var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length
           </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.#r.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#r.value)}setValidity(e,i){this.validityMessage=i,this.#s.setValidity(e," ",this.#r.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.#r=createRef(),this.#p=createRef(),this.#e=!1,this.#t=!1,this.#o="",this.#a=({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()}}))}#r;#p;#s;#e;#t;#o;#a;get#n(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const i of this.#i)i.privateInvalid=e;return e}#f(e){e.checked=!0,e.tabIndex=0,this.value=e.value,e.focus(),e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#d(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const e=this.#i.find((({checked:e})=>e));return void e?.focus()}const i=e.target;if(i instanceof GlideCoreRadioGroupRadio&&i&&!i.disabled){const e=this.#i.filter((e=>e!==i));for(const i of e)i.checked=!1,i.tabIndex=-1;this.#f(i)}}#l(e){if(!(this.disabled||e.target instanceof GlideCoreRadioGroupRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadioGroupRadio){const i=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const t=[...this.#i],o=[...this.#i].slice(0,t.indexOf(i)).findLast((e=>!e.disabled)),s=t.findLast((e=>!e.disabled));o&&o!==i?(this.#v(i),this.#f(o)):s&&s!==i&&(this.#v(i),this.#f(s));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const t=[...this.#i],o=t.find(((e,o)=>!e.disabled&&o>t.indexOf(i))),s=t.find((e=>!e.disabled));o&&o!==i?(this.#v(i),this.#f(o)):s&&s!==i&&(this.#v(i),this.#f(s));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#f(i);for(const e of this.#i)e!==i&&this.#v(e)}}}}#h(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#i(){return this.#p.value?this.#p.value.assignedElements().filter((e=>e instanceof GlideCoreRadioGroupRadio)):[]}#c(e){e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&!e.detail.old&&e.detail.new&&(this.value=e.target.value)}#u(e){e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&e.detail.new?this.value=e.target.value:e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&(this.value="")}#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})],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")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#r.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#r.value)}setValidity(e,t){this.validityMessage=t,this.#a.setValidity(e," ",this.#r.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.#r=createRef(),this.#f=createRef(),this.#e=!1,this.#i=!1,this.#o="",this.#s=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#a=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()}}))}#r;#f;#a;#e;#i;#o;#s;get#n(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#m(e){this.#t.find((({tabIndex:e})=>0===e))?.setAttribute("tabindex","-1"),this.#o=e.value,e.checked=!0,e.tabIndex=0,e.focus()}#d(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.#m(e.target)}}#l(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.#m(t)):i&&i!==e.target&&(this.#v(e.target),this.#m(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.#m(t)):i&&i!==e.target&&(this.#v(e.target),this.#m(i));break}case" ":if(e.preventDefault(),!e.target.disabled&&!e.target.checked){this.#m(e.target);for(const t of this.#t)t!==e.target&&this.#v(t)}}}#h(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#f.value?this.#f.value.assignedElements().filter((e=>e instanceof GlideCoreRadioGroupRadio)):[]}#c(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}}#u(e){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&&(e.target.tabIndex=0)}#p(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;

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

@@ -4,20 +4,44 @@ declare global {
         'glide-core-radio-group-radio': GlideCoreRadioGroupRadio;
     }
 }
+/**
+ * @attr {string} label
+ * @attr {boolean} [checked=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [value]
+ *
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ */
 export default class GlideCoreRadioGroupRadio extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get checked(): boolean;
-    set checked(checked: boolean);
+    set checked(isChecked: boolean);
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(disabled: boolean);
     get privateInvalid(): boolean;
     set privateInvalid(invalid: boolean);
-    get label(): string;
+    /**
+     * @default undefined
+     */
+    get label(): string | undefined;
     set label(label: string);
     get privateRequired(): boolean;
     set privateRequired(required: boolean);
+    /**
+     * @default undefined
+     */
     get value(): string;
     set value(value: string);
     readonly version: string;

package/dist/radio-group.radio.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,d=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(d=(a<3?r(d):a>3?r(t,i,d):r(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";let GlideCoreRadioGroupRadio=class GlideCoreRadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i="",this.#o=!1,this.#r=!1,this.#a=""}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(),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.#o}set privateInvalid(e){this.#o=e,this.ariaInvalid=e.toString()}get label(){return this.#i}set label(e){this.#i=e,this.ariaLabel=e.toString()}get privateRequired(){return this.#r}set privateRequired(e){this.#r=e,this.ariaRequired=e.toString()}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}firstUpdated(){this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaLabel=this.label,this.ariaRequired=this.privateRequired.toString(),this.role="radio"}render(){return html`<div class="component" data-test="component"><div class="${classMap({circle:!0,checked:this.checked,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#i}</div>`}#e;#t;#i;#o;#r;#a};__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})],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")],GlideCoreRadioGroupRadio);export default GlideCoreRadioGroupRadio;
+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;