@crowdstrike/glide-core 0.5.0

package/dist/menu.stories.d.ts

@@ -0,0 +1,9 @@
+import './icons/storybook.js';
+import './menu.button.js';
+import './menu.js';
+import './menu.link.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Menu: StoryObj;
+export declare const MenuWithIcon: StoryObj;

package/dist/menu.styles.d.ts

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

package/dist/menu.styles.js

@@ -0,0 +1,61 @@
+"use strict";import{css as i}from"lit";export default[i`
+    :host {
+      /* Contains elements with "padding", "margin", and "width". Inline by default. */
+      display: inline-block;
+    }
+
+    .component {
+      color: var(--glide-core-text-body-1);
+      display: flex;
+    }
+
+    .target-container {
+      display: flex;
+      position: relative;
+    }
+
+    .options {
+      background-color: var(--glide-core-surface-base-lighter);
+      border: 1px solid var(--glide-core-border-base-lighter);
+      border-radius: var(--glide-core-spacing-xs);
+      box-shadow: var(--glide-core-shadow-lg);
+      box-sizing: border-box;
+      inline-size: max-content;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      margin-block: 0;
+      min-inline-size: 9.375rem;
+      padding: var(--glide-core-spacing-xxxs);
+      position: absolute;
+      visibility: hidden;
+
+      &.visible {
+        visibility: visible;
+      }
+
+      &.large {
+        --gap: var(--glide-core-spacing-sm);
+        --padding-inline: var(--glide-core-spacing-sm);
+        --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);
+        font-style: var(--glide-core-body-sm-font-style);
+        font-weight: var(--glide-core-body-sm-font-weight);
+        line-height: var(--glide-core-body-sm-line-height);
+      }
+
+      &.small {
+        --gap: var(--glide-core-spacing-xs);
+        --padding-inline: var(--glide-core-spacing-xs);
+        --padding-block: var(--glide-core-spacing-xxxs);
+        --size: 0.75rem;
+
+        font-family: var(--glide-core-body-xs-font-family);
+        font-size: var(--glide-core-body-xs-font-size);
+        font-style: var(--glide-core-body-xs-font-style);
+        font-weight: var(--glide-core-body-xs-font-weight);
+        line-height: var(--glide-core-body-xs-line-height);
+      }
+    }
+  `];

package/dist/menu.test.basics.d.ts

@@ -0,0 +1 @@
+import './menu.button.js';

package/dist/menu.test.focus.d.ts

@@ -0,0 +1,2 @@
+import './menu.js';
+import './menu.link.js';

package/dist/menu.test.interactions.d.ts

@@ -0,0 +1,2 @@
+import './menu.js';
+import './menu.link.js';

package/dist/modal.d.ts

@@ -0,0 +1,51 @@
+import './modal.icon-button.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-modal': GlideCoreModal;
+    }
+}
+/**
+ * @description A Modal dialog component which interrupts interaction with the rest of the page.
+ *
+ * @event close - Emitted when the Modal closes.
+ *
+ * @function showModal - A method on the `glide-core-modal` component to open the Modal programmatically.
+ *
+ * @function close - A method on the `glide-core-modal` component to close the Modal programmatically.
+ *
+ * @slot - The content of the modal.
+ *
+ * @slot header-actions - A slot for placing additional header actions. These are co-located with the close button.
+ *                        Use the `glide-core-modal-icon-button` component only.
+ *
+ * @slot primary - A slot for rendering a primary action button. Normally a "Continue", "Next", or "Submit" action.
+ *
+ * @slot secondary - A slot for rendering a secondary action button. Normally a "Cancel" action.
+ *
+ * @slot tertiary - A slot for rendering an icon+tooltip for additional information,
+ *                  or a tertiary action button.
+ */
+export default class GlideCoreModal extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The title text for the Modal. */
+    label: string;
+    /** Adds a back/dismiss button in the Modal header. */
+    showBackButton: boolean;
+    /** Fixed-size options for the Modal. */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Event called by consumers to programmatically close the Modal.
+     */
+    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

@@ -0,0 +1,26 @@
+import './icon-button.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-modal-icon-button': GlideCoreModalIconButton;
+    }
+}
+/**
+ * @description A Modal Icon Button. Should be used only in the "header-actions" slot of a Modal.
+ *
+ * @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>
+ */
+export default class GlideCoreModalIconButton extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    label?: string | undefined;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/modal.icon-button.js

@@ -0,0 +1 @@
+"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var p=(t,e,o,a)=>{for(var i=a>1?void 0:a?E(e,o):e,f=t.length-1,n;f>=0;f--)(n=t[f])&&(i=(a?n(e,o,i):n(i))||i);return a&&i&&u(e,o,i),i};var c=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var m=(t,e,o)=>(c(t,e,"read from private field"),o?o.call(t):e.get(t)),d=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var h=(t,e,o)=>(c(t,e,"access private method"),o);var l,s,v;import"./icon-button.js";import{LitElement as b,html as R}from"lit";import{createRef as S,ref as w}from"lit/directives/ref.js";import{customElement as y,property as L}from"lit/decorators.js";import{ifDefined as T}from"lit/directives/if-defined.js";import{owSlot as g}from"./library/ow.js";import $ from"./modal.icon-button.styles.js";let r=class extends b{constructor(){super(...arguments);d(this,s);this.label="";d(this,l,S())}firstUpdated(){g(m(this,l).value)}render(){return R`<glide-core-icon-button label="${T(this.label)}" variant="tertiary"><slot @slotchange="${h(this,s,v)}" ${w(m(this,l))}></slot></glide-core-icon-button>`}};l=new WeakMap,s=new WeakSet,v=function(){g(m(this,l).value)},r.shadowRootOptions={...b.shadowRootOptions,mode:"closed"},r.styles=$,p([L()],r.prototype,"label",2),r=p([y("glide-core-modal-icon-button")],r);export{r as default};

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

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

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

@@ -0,0 +1,8 @@
+"use strict";import{css as e}from"lit";export default[e`
+    ::slotted(*) {
+      --size: 1.25rem;
+
+      block-size: 1.25rem;
+      inline-size: 1.25rem;
+    }
+  `];

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

@@ -0,0 +1 @@
+export {};

package/dist/modal.js

@@ -0,0 +1,15 @@
+"use strict";var Y=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var b=(l,o,t,n)=>{for(var c=n>1?void 0:n?N(o,t):o,R=l.length-1,B;R>=0;R--)(B=l[R])&&(c=(n?B(o,t,c):B(c))||c);return n&&c&&Y(o,t,c),c};var z=(l,o,t)=>{if(!o.has(l))throw TypeError("Cannot "+t)};var e=(l,o,t)=>(z(l,o,"read from private field"),t?t.call(l):o.get(l)),i=(l,o,t)=>{if(o.has(l))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(l):o.set(l,t)};var r=(l,o,t)=>(z(l,o,"access private method"),t);var s,p,g,v,f,S,w,x,E,j,y,F,C,P,M,K,$,O,L,W,H,X;import"./modal.icon-button.js";import{LitElement as V,html as D}from"lit";import{classMap as U}from"lit/directives/class-map.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{customElement as q,property as T}from"lit/decorators.js";import{owSlot as I,owSlotType as d}from"./library/ow.js";import{when as J}from"lit/directives/when.js";import h from"./button.js";import Z from"./modal.icon-button.js";import A from"./modal.tertiary-icon.js";import Q from"./modal.styles.js";const k=new CSSStyleSheet;k.insertRule(`
+  @supports (scrollbar-gutter: stable) {
+    .private-glide-core-modal-lock-scroll {
+      scrollbar-gutter: stable !important;
+      overflow: hidden !important;
+    }
+  }
+`),k.insertRule(`
+  @supports not (scrollbar-gutter: stable) {
+    .private-glide-core-modal-lock-scroll {
+      padding-right: var(--glide-scroll-size, 0.9375rem) !important;
+      overflow: hidden !important;
+    }
+  }
+`);let a=class extends V{constructor(){super(...arguments);i(this,w);i(this,E);i(this,y);i(this,C);i(this,M);i(this,$);i(this,L);i(this,H);this.label="";this.showBackButton=!1;this.size="medium";i(this,s,m());i(this,p,m());i(this,g,m());i(this,v,m());i(this,f,m());i(this,S,m())}close(){e(this,s).value?.open&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close())}connectedCallback(){super.connectedCallback(),document.adoptedStyleSheets.includes(k)||document.adoptedStyleSheets.push(k)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter(t=>t!==k)}firstUpdated(){I(e(this,p).value),d(e(this,S).value,[Z]),d(e(this,g).value,[h]),d(e(this,v).value,[h]),d(e(this,f).value,[A,h])}render(){return D`<dialog class="${U({component:!0,small:this.size==="small",medium:this.size==="medium",large:this.size==="large",xlarge:this.size==="xlarge"})}" tabindex="-1" @keydown="${r(this,L,W)}" @mousedown="${r(this,H,X)}" ${u(e(this,s))}><header class="header"><h2 class="label" data-test="heading" id="heading">${J(this.showBackButton,()=>D`<glide-core-modal-icon-button data-test="back-button" @click="${r(this,w,x)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><title>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="${r(this,$,O)}" ${u(e(this,S))}></slot><glide-core-modal-icon-button data-test="close-button" @click="${r(this,w,x)}"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><title>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="${r(this,E,j)}" ${u(e(this,p))}></slot></article><footer class="footer"><menu class="menu"><li class="flex align-center"><slot name="tertiary" @slotchange="${r(this,M,K)}" ${u(e(this,f))}></slot></li><li><menu class="actions"><li><slot name="secondary" @slotchange="${r(this,C,P)}" ${u(e(this,v))}></slot></li><li><slot name="primary" @slotchange="${r(this,y,F)}" ${u(e(this,g))}></slot></li></menu></li></menu></footer></dialog>`}showModal(){if(!e(this,s).value?.open){if(document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),!window.CSS.supports("scrollbar-gutter","stable")){const t=Math.abs(window.innerWidth-document.documentElement.clientWidth);document.documentElement.style.setProperty("--glide-scroll-size",`${t}px`)}e(this,s).value?.showModal(),e(this,s).value?.focus()}}};s=new WeakMap,p=new WeakMap,g=new WeakMap,v=new WeakMap,f=new WeakMap,S=new WeakMap,w=new WeakSet,x=function(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close()},E=new WeakSet,j=function(){I(e(this,p).value)},y=new WeakSet,F=function(){d(e(this,g).value,[h])},C=new WeakSet,P=function(){d(e(this,v).value,[h])},M=new WeakSet,K=function(){d(e(this,f).value,[A,h])},$=new WeakSet,O=function(){d(e(this,S).value,[Z])},L=new WeakSet,W=function(t){t.key==="Escape"&&(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close())},H=new WeakSet,X=function(t){if(t.target!==e(this,s).value)return;const n=e(this,s).value?.getBoundingClientRect();n&&(n.top<=t.clientY&&t.clientY<=n.top+n.height&&n.left<=t.clientX&&t.clientX<=n.left+n.width||(document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.dispatchEvent(new Event("close")),e(this,s).value?.close()))},a.shadowRootOptions={...V.shadowRootOptions,mode:"closed"},a.styles=Q,b([T({reflect:!0})],a.prototype,"label",2),b([T({attribute:"show-back-button",type:Boolean,reflect:!0})],a.prototype,"showBackButton",2),b([T({reflect:!0})],a.prototype,"size",2),a=b([q("glide-core-modal")],a);export{a as default};

package/dist/modal.stories.d.ts

@@ -0,0 +1,14 @@
+import './button.js';
+import './icons/storybook.js';
+import './modal.js';
+import './modal.tertiary-icon.js';
+import './tooltip.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Modal: StoryObj;
+export declare const WithBackButton: StoryObj;
+export declare const HeaderActions: StoryObj;
+export declare const HeaderActionsWithBackButton: StoryObj;
+export declare const TertiaryButton: StoryObj;
+export declare const TertiaryIcon: StoryObj;

package/dist/modal.styles.d.ts

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

package/dist/modal.styles.js

@@ -0,0 +1,169 @@
+"use strict";import{css as i}from"lit";import e from"./styles/focus-outline.js";export default[i`
+    /* When browser support improves, we can have nicer animations with https://caniuse.com/mdn-css_at-rules_starting-style */
+    @keyframes backdrop-fade-in {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes modal-open {
+      from {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    .component {
+      background-color: var(--glide-core-surface-base-lighter);
+      border: none;
+      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;
+      opacity: 0;
+      padding: 1.25rem;
+
+      &[open] {
+        animation: modal-open 250ms;
+        opacity: 1;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${e};
+      }
+
+      &::backdrop {
+        animation: backdrop-fade-in 250ms;
+
+        /* 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%);
+      }
+
+      ::slotted([slot='tertiary']) {
+        --size: 1rem;
+
+        size: 1rem;
+      }
+    }
+
+    @media (prefers-reduced-motion) {
+      dialog {
+        &[open] {
+          animation: none;
+        }
+
+        &::backdrop {
+          animation: none;
+        }
+      }
+    }
+
+    .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;
+      justify-content: space-between;
+    }
+
+    .label {
+      align-items: center;
+      color: var(--glide-core-text-body);
+      display: flex;
+      font-size: 1.5rem;
+      font-weight: 600;
+      gap: var(--glide-core-spacing-xs);
+      inline-size: 100%;
+      line-height: 1.875rem;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .header-actions {
+      align-items: center;
+      display: flex;
+      gap: 0.625rem;
+      line-height: 1;
+    }
+
+    .body {
+      line-height: 1;
+      overflow: auto;
+      padding-block: 1rem;
+      padding-block-end: 0.625rem;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${e};
+      }
+    }
+
+    .footer {
+      align-items: center;
+      display: flex;
+    }
+
+    .actions {
+      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;
+    }
+
+    .align-center {
+      align-items: center;
+    }
+  `];

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

@@ -0,0 +1,21 @@
+import './tooltip.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-modal-tertiary-icon': GlideCoreModalTertiaryIcon;
+    }
+}
+/**
+ * @description A Modal tertiary icon wrapper.  Provides opinionated styling and accessibility for icons in Modals.
+ *  Should be used only in the "tertiary" slot of a Modal.
+ *
+ * @slot - The icon to be rendered.
+ */
+export default class GlideCoreModalTertiaryIcon extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    label?: string;
+    tooltipPlacement: 'bottom' | 'left' | 'right' | 'top';
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/modal.tertiary-icon.js

@@ -0,0 +1 @@
+"use strict";var E=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var r=(e,t,o,m)=>{for(var i=m>1?void 0:m?R(t,o):t,n=e.length-1,f;n>=0;n--)(f=e[n])&&(i=(m?f(t,o,i):f(i))||i);return m&&i&&E(t,o,i),i};var c=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var s=(e,t,o)=>(c(e,t,"read from private field"),o?o.call(e):t.get(e)),h=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var d=(e,t,o)=>(c(e,t,"access private method"),o);var a,p,v;import"./tooltip.js";import{LitElement as g,html as S}from"lit";import{createRef as $,ref as w}from"lit/directives/ref.js";import{customElement as x,property as b}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{owSlot as u}from"./library/ow.js";let l=class extends g{constructor(){super(...arguments);h(this,p);this.tooltipPlacement="bottom";h(this,a,$())}firstUpdated(){u(s(this,a).value)}render(){return S`<glide-core-tooltip placement="${this.tooltipPlacement}">${this.label} <span tabindex="0" aria-label="${L(this.label)}" slot="target"><slot @slotchange="${d(this,p,v)}" ${w(s(this,a))}></slot></span></glide-core-tooltip>`}};a=new WeakMap,p=new WeakSet,v=function(){u(s(this,a).value)},l.shadowRootOptions={...g.shadowRootOptions,mode:"closed"},r([b()],l.prototype,"label",2),r([b({attribute:"tooltip-placement"})],l.prototype,"tooltipPlacement",2),l=r([x("glide-core-modal-tertiary-icon")],l);export{l as default};

package/dist/modal.tertiary-icon.test.basics.d.ts

@@ -0,0 +1 @@
+import './button.js';

package/dist/modal.test.accessibility.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modal.test.basics.d.ts

@@ -0,0 +1,3 @@
+import './button.js';
+import './modal.icon-button.js';
+import './modal.js';

package/dist/modal.test.close.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modal.test.events.d.ts

@@ -0,0 +1 @@
+import './modal.js';

package/dist/modal.test.lock-scroll.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modal.test.methods.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modal.test.scrollbars.d.ts

@@ -0,0 +1 @@
+import './modal.js';

package/dist/radio-group.d.ts

@@ -0,0 +1,48 @@
+import './label.js';
+import './tooltip.js';
+import { LitElement, type PropertyValueMap } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-radio-group': GlideCoreRadioGroup;
+    }
+}
+/**
+ /**
+ * @description A radio group with a label, and optional tooltip and description. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @event change - Dispatched when a radio is clicked or checked by key press.
+ * @event input - Dispatched when a radio is clicked or checked by key press.
+ *
+ * @slot - One or more of `<glide-core-radio>`.
+ * @slot description - Additional information or context.
+ * @slot tooltip - Content for the tooltip.
+ */
+export default class GlideCoreRadioGroup extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    description: string;
+    disabled: boolean;
+    label: string;
+    hideLabel: boolean;
+    name: string;
+    required: boolean;
+    value: string;
+    checkValidity(): boolean;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    focus(options?: FocusOptions): void;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    updated(changedProperties: PropertyValueMap<GlideCoreRadioGroup>): void;
+    willUpdate(changedProperties: PropertyValueMap<GlideCoreRadioGroup>): void;
+    constructor();
+    private isCheckingValidity;
+    private isReportValidityOrSubmit;
+}

package/dist/radio-group.js

@@ -0,0 +1 @@
+"use strict";var tt=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var m=(n,d,t,e)=>{for(var i=e>1?void 0:e?et(d,t):d,b=n.length-1,A;b>=0;b--)(A=n[b])&&(i=(e?A(d,t,i):A(i))||i);return e&&i&&tt(d,t,i),i};var O=(n,d,t)=>{if(!d.has(n))throw TypeError("Cannot "+t)};var s=(n,d,t)=>(O(n,d,"read from private field"),t?t.call(n):d.get(n)),o=(n,d,t)=>{if(d.has(n))throw TypeError("Cannot add the same private member more than once");d instanceof WeakSet?d.add(n):d.set(n,t)},E=(n,d,t,e)=>(O(n,d,"write to private field"),e?e.call(n,t):d.set(n,t),t);var a=(n,d,t)=>(O(n,d,"access private method"),t);var R,g,p,c,y,I,V,F,S,B,$,X,x,Y,C,Z,D,_,U,G,l,r,u,v,w,T,q,H,L,z,M,K;import"./label.js";import"./tooltip.js";import{LitElement as N,html as it}from"lit";import{classMap as st}from"lit/directives/class-map.js";import{createRef as j,ref as J}from"lit/directives/ref.js";import{customElement as at,property as k,state as P}from"lit/decorators.js";import{owSlot as Q,owSlotType as W}from"./library/ow.js";import f from"./radio.js";import lt from"./radio-group.styles.js";let h=class extends N{constructor(){super();o(this,V);o(this,S);o(this,$);o(this,x);o(this,C);o(this,D);o(this,U);o(this,l);o(this,u);o(this,w);o(this,q);o(this,L);o(this,M);this.description="";this.disabled=!1;this.label="";this.hideLabel=!1;this.name="";this.required=!1;this.value="";this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;o(this,R,j());o(this,g,j());o(this,p,void 0);o(this,c,void 0);o(this,y,void 0);o(this,I,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,this.value)});E(this,c,this.attachInternals()),this.addEventListener("invalid",a(this,C,Z))}checkValidity(){return this.isCheckingValidity=!0,s(this,c).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",s(this,I)),E(this,p,void 0)}firstUpdated(){Q(s(this,g).value),W(s(this,g).value,[f]),E(this,p,s(this,l,r).find(t=>t.checked)),a(this,V,F).call(this)}focus(t){let e=s(this,l,r).find(i=>i.checked);e||(e=s(this,l,r).find(i=>i.tabIndex===0)),e?.focus(t)}get form(){return s(this,c).form}get validity(){return s(this,c).validity}get willValidate(){return s(this,c).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",s(this,I))}formResetCallback(){if(s(this,p)&&this.contains(s(this,p)))for(const t of s(this,l,r))a(this,u,v).call(this,t===s(this,p),t)}render(){return it`<div class="component" @click="${a(this,$,X)}" @keydown="${a(this,D,_)}" ${J(s(this,R))}><glide-core-label orientation="horizontal" ?error="${s(this,S,B)}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${st({"radio-container":!0,vertical:!0,invalid:s(this,S,B)})}" role="radiogroup" slot="control" aria-labelledby="label description"><slot ${J(s(this,g))} @slotchange="${a(this,x,Y)}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return s(this,c).reportValidity()}updated(t){this.hasUpdated&&(t.has("value")||t.has("required"))&&(a(this,U,G).call(this),a(this,q,H).call(this,!s(this,c).validity.valid),this.requestUpdate())}willUpdate(t){if(this.hasUpdated){if(t.has("required")&&a(this,M,K).call(this),t.has("disabled")){for(const e of s(this,l,r))a(this,w,T).call(this,this.disabled,e);!this.disabled&&a(this,L,z).call(this)}if(t.has("value"))for(const e of s(this,l,r))e.checked=e.value===this.value}}};R=new WeakMap,g=new WeakMap,p=new WeakMap,c=new WeakMap,y=new WeakMap,I=new WeakMap,V=new WeakSet,F=function(){const t=s(this,l,r).find(e=>e.checked);this.value=t?.value??s(this,p)?.value??"",E(this,y,t??s(this,p)),this.required&&a(this,M,K).call(this);for(const e of s(this,l,r))this.disabled?a(this,w,T).call(this,this.disabled,e):a(this,w,T).call(this,e.disabled,e);!this.disabled&&a(this,L,z).call(this)},S=new WeakSet,B=function(){const t=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return a(this,q,H).call(this,t),t},$=new WeakSet,X=function(t){if(this.disabled)return;if(t.target instanceof f&&t.target.disabled&&s(this,y)&&!s(this,y).disabled){s(this,y)?.focus();return}const e=t.target;if(e instanceof f&&e&&!e.disabled){a(this,u,v).call(this,!0,e);for(const i of s(this,l,r))i!==e&&a(this,u,v).call(this,!1,i)}},x=new WeakSet,Y=function(){Q(s(this,g).value),W(s(this,g).value,[f]),a(this,V,F).call(this)},C=new WeakSet,Z=function(t){t.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())},D=new WeakSet,_=function(t){if(!(this.disabled||t.target instanceof f&&t.target?.disabled)&&t.target instanceof f){const e=t.target;switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let i=e.previousElementSibling;for(;(!i||i instanceof f&&i.disabled||!(i instanceof f))&&i!==e;)if(i===null){const b=s(this,l,r).at(-1);b&&(i=b)}else i=i.previousElementSibling;i&&i instanceof f&&!i.disabled&&i!==e&&(a(this,u,v).call(this,!1,e),a(this,u,v).call(this,!0,i));break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let i=e.nextElementSibling;for(;(!i||i instanceof f&&i.disabled||!(i instanceof f))&&i!==e;)if(i===null){const b=s(this,l,r).at(0);b&&(i=b)}else i=i.nextElementSibling;i&&i instanceof f&&!i.disabled&&i!==e&&(a(this,u,v).call(this,!1,e),a(this,u,v).call(this,!0,i));break}case" ":{if(t.preventDefault(),!e.disabled&&!e.checked){a(this,u,v).call(this,!0,e);for(const i of s(this,l,r))i!==e&&a(this,u,v).call(this,!1,i)}break}}}},U=new WeakSet,G=function(){const t=s(this,l,r).find(e=>e.checked);this.required&&!t?s(this,c).setValidity({valueMissing:!0}," ",s(this,R).value):s(this,c).setValidity({})},l=new WeakSet,r=function(){return s(this,g).value?.assignedElements().filter(t=>t instanceof f)??[]},u=new WeakSet,v=function(t,e){e.checked=t,e.tabIndex=t?0:-1,t&&(E(this,y,e),this.value=e.value,e.focus(),e.dispatchEvent(new Event("change",{bubbles:!0})),e.dispatchEvent(new Event("input",{bubbles:!0})))},w=new WeakSet,T=function(t,e){e.disabled=t,t&&(e.tabIndex=-1)},q=new WeakSet,H=function(t){for(const e of s(this,l,r))e.invalid=t},L=new WeakSet,z=function(){if(this.disabled||s(this,l,r).every(i=>i.disabled))return;let t=null;const e=s(this,l,r).find(i=>!i.disabled&&i.checked);if(e)t=e;else{const i=s(this,l,r).find(b=>!b.disabled);i&&(t=i)}if(t)for(const i of s(this,l,r))i.tabIndex=i===t?0:-1},M=new WeakSet,K=function(){for(const t of s(this,l,r))t.required=this.required},h.formAssociated=!0,h.shadowRootOptions={...N.shadowRootOptions,mode:"closed"},h.styles=lt,m([k()],h.prototype,"description",2),m([k({type:Boolean,reflect:!0})],h.prototype,"disabled",2),m([k()],h.prototype,"label",2),m([k({attribute:"hide-label",type:Boolean})],h.prototype,"hideLabel",2),m([k()],h.prototype,"name",2),m([k({type:Boolean,reflect:!0})],h.prototype,"required",2),m([k({reflect:!0})],h.prototype,"value",2),m([P()],h.prototype,"isCheckingValidity",2),m([P()],h.prototype,"isReportValidityOrSubmit",2),h=m([at("glide-core-radio-group")],h);export{h as default};

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

@@ -0,0 +1,8 @@
+import './radio-group.js';
+import './radio.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Vertical: StoryObj;
+export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithError: StoryObj;

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

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

package/dist/radio-group.styles.js

@@ -0,0 +1,40 @@
+"use strict";import{css as e}from"lit";export default[e`
+    .component {
+      color: var(--glide-core-text-body-1);
+      display: inline-flex;
+      font-family: var(--glide-core-heading-xxxs-font-family);
+      font-size: var(--glide-core-heading-xxxs-font-size);
+      font-style: var(--glide-core-heading-xxxs-font-style);
+      font-variant: var(--glide-core-heading-xxxs-font-variant);
+      font-weight: var(--glide-core-heading-xxxs-font-weight);
+      line-height: 1;
+
+      & .vertical {
+        appearance: none;
+        border: none;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding: 0;
+      }
+
+      & .radio-container {
+        display: flex;
+        gap: var(--glide-core-spacing-xs);
+        inline-size: min-content;
+
+        &.invalid {
+          border: 1px solid var(--glide-core-status-error);
+          border-radius: 0.5rem;
+          color: var(--glide-core-status-error);
+          margin-block-end: -0.0625rem;
+          margin-inline-start: -0.0625rem;
+          padding: var(--glide-core-spacing-xxs) 0.375rem;
+        }
+      }
+
+      glide-core-label::part(tooltip-and-label-container) {
+        align-items: flex-start;
+      }
+    }
+  `];

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

@@ -0,0 +1,2 @@
+import './radio-group.js';
+import './radio.js';

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

@@ -0,0 +1,2 @@
+import './radio-group.js';
+import './radio.js';

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

@@ -0,0 +1,2 @@
+import './radio-group.js';
+import './radio.js';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/radio.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-radio': GlideCoreRadio;
+    }
+}
+/**
+ * @description A radio element for use with `<glide-core-radio-group>`.
+ *
+ */
+export default class GlideCoreRadio extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    value: string;
+    label: string;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    willUpdate(changedProperties: PropertyValueMap<GlideCoreRadio>): void;
+}

package/dist/radio.js

@@ -0,0 +1 @@
+"use strict";var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(d,r,e,l)=>{for(var a=l>1?void 0:l?f(r,e):r,h=d.length-1,o;h>=0;h--)(o=d[h])&&(a=(l?o(r,e,a):o(a))||a);return l&&a&&p(r,e,a),a};import{LitElement as n,html as u}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{customElement as b,property as s}from"lit/decorators.js";import m from"./radio.styles.js";let t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.label=""}firstUpdated(){this.role="radio",this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.invalid.toString(),this.ariaRequired=this.required.toString(),this.ariaLabel=this.label}render(){return u`<span class="${c({component:!0,disabled:this.disabled})}"><span id="radio" class="${c({"radio-circle":!0,checked:this.checked})}" data-test="radio" data-test-error="${this.invalid}"></span> ${this.label}</span>`}willUpdate(e){this.hasUpdated&&(e.has("checked")&&(this.ariaChecked=this.checked.toString()),e.has("disabled")&&(this.ariaDisabled=this.disabled.toString()),e.has("required")&&(this.ariaRequired=this.required.toString()),e.has("invalid")&&(this.ariaInvalid=this.invalid.toString()),e.has("label")&&(this.ariaLabel=this.label))}};t.shadowRootOptions={...n.shadowRootOptions,mode:"closed"},t.styles=m,i([s({type:Boolean,reflect:!0})],t.prototype,"checked",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({type:Boolean})],t.prototype,"invalid",2),i([s({type:Boolean,reflect:!0})],t.prototype,"required",2),i([s()],t.prototype,"value",2),i([s({reflect:!0})],t.prototype,"label",2),t=i([b("glide-core-radio")],t);export{t as default};

package/dist/radio.styles.d.ts

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