@crowdstrike/glide-core 0.15.1 → 0.17.0

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0">${icons.information}</span><slot name="tooltip" @slotchange="${this.#r}" ${ref(this.#s)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#a}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#n}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#d}" ${ref(this.#i)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#n(){owSlot(this.#e.value)}#a(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#d(){const e=this.#i.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#r(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};

package/dist/label.styles.js

@@ -71,7 +71,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .optional-tooltip-target {
       background-color: transparent;
       border: none;
-      border-radius: 0.0625rem;
+      border-radius: 50%;
       color: var(--glide-core-text-body-1);
 
       /*
@@ -82,6 +82,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       display: flex;
       padding: 0;
+
+      &:focus-visible {
+        outline-offset: 0;
+      }
     }
 
     .label {

package/dist/library/localize.d.ts

@@ -8,13 +8,12 @@ export interface Translation extends DefaultTranslation {
     $dir: 'ltr' | 'rtl';
     close: string;
     dismiss: string;
-    open: string;
     selectAll: string;
-    moreInformation: string;
     notifications: string;
     nextTab: string;
     previousTab: string;
     noResults: string;
+    tooltip: string;
     announcedCharacterCount: (current: number, maximum: number) => string;
     displayedCharacterCount: (current: number, maximum: number) => string;
     clearEntry: (label: string) => string;

package/dist/library/localize.test.js

@@ -24,9 +24,7 @@ GlideCoreMockComponent = __decorate([
     customElement('mock-component')
 ], GlideCoreMockComponent);
 it('can call any term from en translation if locale is Japanese', async () => {
-    const component = await fixture(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    html `<mock-component></mock-component>`);
+    const component = await fixture(html `<mock-component></mock-component>`);
     component.lang = 'ja';
     expect(component.localize.lang()).to.equal('ja');
     const keys = Object.keys(en);

package/dist/library/mouse.d.ts

@@ -0,0 +1,2 @@
+export declare function click(element: Element | null | undefined, position?: 'top' | 'right' | 'bottom' | 'left' | 'outside' | 'center'): Promise<void>;
+export declare function hover(element: Element | null | undefined, position?: 'top' | 'right' | 'bottom' | 'left' | 'outside' | 'center'): Promise<void>;

package/dist/library/mouse.js

@@ -0,0 +1 @@
+import{assert}from"@open-wc/testing";import{resetMouse,sendMouse}from"@web/test-runner-commands";export function click(t,e="center"){return mouse(t,e,"click")}export function hover(t,e="center"){return mouse(t,e,"move")}async function mouse(t,e="center",o){assert(t);const{height:i,width:r,x:c,y:n}=t.getBoundingClientRect();await sendMouse({type:o,position:"top"===e?[Math.ceil(c+r/2),Math.ceil(n)]:"right"===e?[Math.floor(c+r),Math.ceil(n+i/2)]:"bottom"===e?[Math.ceil(c+r/2),Math.floor(n+i)]:"left"===e?[Math.ceil(c),Math.ceil(n+i/2)]:"outside"===e?[Math.floor(c-1),Math.floor(n-1)]:[Math.ceil(c+r/2),Math.ceil(n+i/2)]}),afterEach((async()=>{await resetMouse()}))}

package/dist/library/ow.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/menu.d.ts

@@ -6,8 +6,10 @@ declare global {
     }
 }
 /**
+ * @event toggle
+ *
  * @slot - One of `<glide-core-menu-options>`.
- * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
+ * @slot target - The element to which the menu will anchor, which can be any focusable element.
  */
 export default class GlideCoreMenu extends LitElement {
     #private;

package/dist/menu.js

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

package/dist/menu.options.d.ts

@@ -5,7 +5,7 @@ declare global {
     }
 }
 /**
- * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
+ * @slot - One or more of `<glide-core-menu-button>` or `<glide-core-menu-link>`.
  */
 export default class GlideCoreMenuOptions extends LitElement {
     #private;

package/dist/modal.d.ts

@@ -6,9 +6,9 @@ declare global {
     }
 }
 /**
- * @event close - `(event: "close", handler: (event: Event)) => void) => void`
+ * @event toggle
  *
- * @slot - The content of the modal.
+ * @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>`.
@@ -18,16 +18,13 @@ export default class GlideCoreModal extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label: string;
     backButton: boolean;
+    label?: string;
+    get open(): boolean;
+    set open(isOpen: boolean);
     size?: 'small' | 'medium' | 'large' | 'xlarge';
-    close(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
-    /**
-     * Method called by consumers to open the Modal.
-     */
-    showModal(): void;
 }

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

@@ -6,13 +6,8 @@ declare global {
     }
 }
 /**
- * @slot - The content of the button. Should only be an icon. The icon should also leverage the
- *         "label" attribute for accessibility so that it is read to screenreaders.
- *
- * @example
- * <glide-core-modal-icon-button slot="header-actions">
- *   <!-- icon here -->
- * </glide-core-modal-icon-button>
+ * @slot - The content of the button. Should only be an icon. The icon should also use the
+ *         "label" attribute for accessibility.
  */
 export default class GlideCoreModalIconButton extends LitElement {
     #private;

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

@@ -1,8 +1,8 @@
 import{css}from"lit";export default[css`
     ::slotted(*) {
-      --size: 1.25rem;
+      --size: 1.125rem;
 
-      block-size: 1.25rem;
-      inline-size: 1.25rem;
+      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 n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n  @supports (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      scrollbar-gutter: stable !important;\n      overflow: hidden !important;\n    }\n  }\n"),globalStylesheet.insertRule("\n  @supports not (scrollbar-gutter: stable) {\n    .private-glide-core-modal-lock-scroll {\n      padding-right: var(--glide-scroll-size, 0.9375rem) !important;\n      overflow: hidden !important;\n    }\n  }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.label="",this.backButton=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#r=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){this.#e.value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#t.value),owSlotType(this.#r.value,[GlideCoreModalIconButton]),owSlotType(this.#o.value,[GlideCoreButton]),owSlotType(this.#l.value,[GlideCoreButton]),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" tabindex="-1" @keydown="${this.#s}" @mousedown="${this.#a}" ${ref(this.#e)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="icon-button" data-test="back-button" @click="${this.#c}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("dismiss")}</title><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></glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" @slotchange="${this.#d}" ${ref(this.#r)}></slot><glide-core-modal-icon-button class="icon-button" data-test="close-button" @click="${this.#c}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>${this.#i.term("close")}</title><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region" tabindex="0"><slot @slotchange="${this.#m}" ${ref(this.#t)}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${this.#u}" ${ref(this.#n)}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${this.#h}" ${ref(this.#l)}></slot></li><li><slot name="primary" @slotchange="${this.#f}" ${ref(this.#o)}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!this.#e.value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const e=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${e}px`)}this.#e.value?.showModal(),this.#e.value?.focus()}}#e;#t;#o;#l;#n;#r;#i;#c(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close()}#m(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#t.value)}#f(){owSlotType(this.#o.value,[GlideCoreButton])}#h(){owSlotType(this.#l.value,[GlideCoreButton])}#u(){ow(this.#e.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#n.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#d(){owSlotType(this.#r.value,[GlideCoreModalIconButton])}#s(e){"Escape"===e.key&&(e.preventDefault(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}#a(e){if(e.target!==this.#e.value)return;const t=this.#e.value?.getBoundingClientRect();if(t){t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),this.#e.value?.close())}}};__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,i=arguments.length,r=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(i<3?n(r):i>3?n(t,o,r):n(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./modal.icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import GlideCoreButton from"./button.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreModalTertiaryIcon from"./modal.tertiary-icon.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.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.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#n=createRef(),this.#i=createRef(),this.#r=createRef(),this.#a=createRef(),this.#s=!1,this.#c=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t?(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet))}firstUpdated(){owSlot(this.#l.value),owSlotType(this.#a.value,[GlideCoreModalIconButton]),owSlotType(this.#n.value,[GlideCoreButton]),owSlotType(this.#i.value,[GlideCoreButton]),owSlotType(this.#r.value,[GlideCoreModalTertiaryIcon,GlideCoreButton]),this.open&&this.#d()}render(){return html`<dialog class="${classMap({component:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" data-test="component" @keydown="${this.#h}" @click="${this.#f}" ${ref(this.#o)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button aria-label="${this.#c.term("dismiss")}" class="back-button" data-test="back-button" @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" @slotchange="${this.#p}" ${ref(this.#a)}></slot><glide-core-modal-icon-button aria-label="${this.#c.term("close")}" class="close-button" data-test="close-button" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot @slotchange="${this.#y}" ${ref(this.#l)}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" @slotchange="${this.#S}" ${ref(this.#r)}></slot></li><li class="action"><slot name="secondary" @slotchange="${this.#C}" ${ref(this.#i)}></slot></li><li class="action"><slot name="primary" @slotchange="${this.#b}" ${ref(this.#n)}></slot></li></menu></footer></dialog>`}#e;#t;#o;#l;#n;#i;#r;#a;#s;#c;#m(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#f(e){if(this.#o.value){const{height:t,width:o,top:l,left:n}=this.#o.value.getBoundingClientRect();l<=e.clientY&&e.clientY<=l+t&&n<=e.clientX&&e.clientX<=n+o||(this.open=!1)}}#h(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#y(){ow(this.#o.value,ow.object.instanceOf(HTMLDialogElement)),owSlot(this.#l.value)}#b(){owSlotType(this.#n.value,[GlideCoreButton])}#C(){owSlotType(this.#i.value,[GlideCoreButton])}#S(){ow(this.#o.value,ow.object.instanceOf(HTMLDialogElement)),owSlotType(this.#r.value,[GlideCoreModalTertiaryIcon,GlideCoreButton])}#p(){owSlotType(this.#a.value,[GlideCoreModalIconButton])}#d(){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),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>`};

package/dist/modal.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".body:focus-visible")}
+    ${focusOutline(".component:focus-visible")}
   `,css`
     /* When browser support improves, we can have nicer animations with https://caniuse.com/mdn-css_at-rules_starting-style */
     @keyframes backdrop-fade-in {
@@ -31,12 +31,27 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       border-radius: 0.5rem;
       box-shadow: var(--glide-core-shadow-lg);
       font-family: var(--glide-core-body-xs-font-family);
-      inline-size: 35rem;
       max-block-size: 75vh;
       max-inline-size: 80vw;
       opacity: 0;
       padding: 1.25rem;
 
+      &.small {
+        inline-size: 22.5rem;
+      }
+
+      &.medium {
+        inline-size: 35rem;
+      }
+
+      &.large {
+        inline-size: 53.75rem;
+      }
+
+      &.xlarge {
+        inline-size: 69.375rem;
+      }
+
       &[open] {
         opacity: 1;
 
@@ -50,9 +65,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &::backdrop {
-        /* prefix required for Safari */
-        /* stylelint-disable-next-line property-no-vendor-prefix */
-        -webkit-backdrop-filter: blur(3px);
         backdrop-filter: blur(3px);
         background-color: rgba(0 0 0 / 40%);
 
@@ -69,22 +81,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    .small {
-      inline-size: 22.5rem;
-    }
-
-    .medium {
-      inline-size: 35rem;
-    }
-
-    .large {
-      inline-size: 53.75rem;
-    }
-
-    .xlarge {
-      inline-size: 69.375rem;
-    }
-
     .header {
       align-items: center;
       display: flex;
@@ -100,7 +96,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       gap: var(--glide-core-spacing-xs);
       inline-size: 100%;
       line-height: 1.875rem;
-      margin: 0;
+      margin-block-end: 0;
+      margin-block-start: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -110,11 +107,32 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       align-items: center;
       display: flex;
       gap: 0.625rem;
-      line-height: 1;
+
+      ::slotted(*) {
+        /* 
+          Flex so the actions don't sit on the baseline of ".header" and can be 
+          vertically centered.
+        */
+        display: flex;
+      }
+    }
+
+    .back-button {
+      /* 
+        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;
     }
 
-    .icon-button {
-      display: contents;
+    .close-button {
+      --size: 1.25rem;
+
+      /* 
+        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;
     }
 
     .body {
@@ -128,36 +146,23 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    .footer {
-      align-items: center;
-      display: flex;
-    }
-
     .actions {
+      align-items: center;
       display: flex;
       gap: var(--glide-core-spacing-xs);
-
-      /* Reset the default menu styles */
       list-style-type: none;
       margin: 0;
-      margin-inline-start: auto;
       padding: 0;
     }
 
-    .menu {
-      display: flex;
-      inline-size: 100%;
-      justify-content: space-between;
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    .flex {
-      display: flex;
+    .action {
+      &:first-of-type {
+        margin-inline-end: auto;
+      }
     }
 
-    .align-center {
+    .tertiary-slot {
       align-items: center;
+      display: flex;
     }
   `];

package/dist/popover.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-popover': GlideCorePopover;
+    }
+}
+/**
+ * @event toggle
+ *
+ * @slot - The content of the popover.
+ * @slot target - The element to which the popover will anchor, which can be any focusable element.
+ */
+export default class GlideCorePopover extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
+    get offset(): number;
+    set offset(offset: number);
+    get open(): boolean;
+    set open(isOpen: boolean);
+    placement?: 'bottom' | 'left' | 'right' | 'top';
+    connectedCallback(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private effectivePlacement;
+}

package/dist/popover.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,a=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(a=(r<3?i(a):r>3?i(t,o,a):i(t,o))||a);return r>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./popover.styles.js";let GlideCorePopover=class GlideCorePopover extends LitElement{constructor(){super(...arguments),this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=!1,this.#r=!1,this.#a=!1,this.#s=createRef(),this.#n=createRef(),this.#f=()=>{if(this.#l||this.#a||this.#o)return this.#l=!1,this.#a=!1,void(this.#o=!1);this.open=!1}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,this.open&&!e?this.#d():this.#p()}get offset(){return this.#h??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#h=e}get open(){return this.#r}set open(e){const t=e!==this.#r;this.#r=e,e&&t&&!this.disabled?(this.#d(),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.addEventListener("click",this.#f,{capture:!0})}firstUpdated(){owSlot(this.#t.value),owSlot(this.#n.value),ow(this.#s.value,ow.object.instanceOf(HTMLElement)),this.#s.value.popover="manual",this.open&&!this.disabled&&this.#d(),this.#t.value.addEventListener("mouseup",(()=>{this.#l=!0})),this.#n.value.addEventListener("mouseup",(()=>{this.#a=!0})),this.#e.value?.addEventListener("mouseup",(()=>{this.#o=!0})),this.#n.value.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(this.#a=!0)}))}render(){return html`<div class="component"><slot class="target-slot" data-test="target-slot" name="target" @click="${this.#m}" @keydown="${this.#c}" @slotchange="${this.#u}" ${ref(this.#n)}></slot><div class="${classMap({popover:!0,[this.effectivePlacement]:!0})}" id="popover" data-test="popover" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><slot class="default-slot" @slotchange="${this.#v}" ${ref(this.#t)}></slot></div></div>`}#e;#g;#t;#o;#l;#i;#r;#a;#h;#s;#n;#f;#p(){this.#s.value?.hidePopover(),this.#_&&(this.#_.ariaExpanded="false"),this.#g?.()}#v(){owSlot(this.#t.value)}#u(){owSlot(this.#n.value)}#m(){this.open=!this.open}#c(e){"Escape"===e.key&&(this.open=!1)}get#_(){return this.#n.value?.assignedElements().at(0)}#d(){this.disabled||(this.#g?.(),this.#n.value&&this.#s.value&&(this.#g=autoUpdate(this.#n.value,this.#s.value,(()=>{(async()=>{if(this.#n.value&&this.#s.value&&this.#e.value){const e=Number.parseFloat(window.getComputedStyle(this.#s.value).padding),{x:t,y:o,placement:l,middlewareData:i}=await computePosition(this.#n.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset-e-2),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:30})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${t}px`,top:`${o}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?i.arrow.x-e+"px":null,top:i.arrow?.y?i.arrow.y-e+"px":null}),this.effectivePlacement=l,this.#s.value.showPopover(),this.#_&&(this.#_.ariaExpanded="true")}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCorePopover.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"open",null),__decorate([property()],GlideCorePopover.prototype,"placement",void 0),__decorate([state()],GlideCorePopover.prototype,"effectivePlacement",void 0),GlideCorePopover=__decorate([customElement("glide-core-popover")],GlideCorePopover);export default GlideCorePopover;const 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

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