@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/toast.toasts.js

@@ -1,59 +1,273 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length,a=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(a=(r<3?o(a):r>3?o(e,i,a):o(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};import"./icon-button.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{classMap}from"lit/directives/class-map.js";import{styleMap}from"lit/directives/style-map.js";import{choose}from"lit/directives/choose.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import xIcon from"./icons/x.js";import{LocalizeController}from"./library/localize.js";import styles from"./toast.toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import Toast from"./toast.js";import Link from"./link.js";let Toasts=class Toasts extends LitElement{constructor(){super(...arguments),this.toasts=[],this.#t=createRef(),this.#e=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}dismiss(t){const e=this.toasts.indexOf(t);this.toasts=[...this.toasts.slice(0,e),...this.toasts.slice(e+1)],t.dismiss(),0===this.toasts.length&&this.remove()}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual")}render(){return html`<div
-      aria-label=${this.#e.term("notifications")}
+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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './icon-button.js';
+import { html, LitElement } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { choose } from 'lit/directives/choose.js';
+import { when } from 'lit/directives/when.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import xIcon from './icons/x.js';
+import { LocalizeController } from './library/localize.js';
+import styles from './toast.toasts.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import Toast from './toast.js';
+import Link from './link.js';
+/**
+ * @attr {Toast[]} [toasts=[]]
+ *
+ * @method dismiss
+ * @param {Toast} toast
+ *
+ * @method show
+ * @param {Toast} toast
+ * @returns Promise<void>
+ *
+ * @method showPopover
+ */
+let Toasts = class Toasts extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toasts = [];
+        this.#componentElementRef = createRef();
+        this.#localize = new LocalizeController(this);
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    dismiss(toast) {
+        const index = this.toasts.indexOf(toast);
+        this.toasts = [
+            ...this.toasts.slice(0, index),
+            ...this.toasts.slice(index + 1),
+        ];
+        toast.dismiss();
+        if (this.toasts.length === 0) {
+            this.remove();
+        }
+    }
+    firstUpdated() {
+        if (this.#componentElementRef.value) {
+            this.#componentElementRef.value.popover = 'manual';
+        }
+    }
+    render() {
+        // Lit-ally doesn't know that our "mouseover" listener is only an affordance for
+        // mouse users. It also doesn't know that the purpose of the "click" listener on
+        // ".description" is only so that we can programmatically click the consumer's
+        // Toast.
+        //
+        /* eslint-disable lit-a11y/click-events-have-key-events, lit-a11y/mouse-events-have-key-events */
+        return html `<div
+      aria-label=${this.#localize.term('notifications')}
       class="component"
       data-test="component"
       role="region"
       tabindex="-1"
-      ${ref(this.#t)}
+      ${ref(this.#componentElementRef)}
     >
       <div class="toasts">
-        ${repeat(this.toasts,(t=>t.privateId),(t=>html`<div
+        ${repeat(this.toasts, (toast) => toast.privateId, (toast) => {
+            return html `<div
               aria-labelledby="prefix label description"
-              class=${classMap({toast:!0,error:"error"===t.variant,informational:"informational"===t.variant,success:"success"===t.variant,show:Boolean(t.privateShow),dismissing:Boolean(t.privateDismissing),"dismissing-via-button":Boolean(t.privateDismissingViaButton)})}
+              class=${classMap({
+                toast: true,
+                error: toast.variant === 'error',
+                informational: toast.variant === 'informational',
+                success: toast.variant === 'success',
+                show: Boolean(toast.privateShow),
+                dismissing: Boolean(toast.privateDismissing),
+                'dismissing-via-button': Boolean(toast.privateDismissingViaButton),
+            })}
               data-test="toast"
               role="alert"
-              @mouseover=${this.#i.bind(this,t)}
-              @mouseout=${this.#s.bind(this,t)}
-              @transitionend=${this.#o.bind(this,t)}
+              @mouseover=${this.#onToastMouseOver.bind(this, toast)}
+              @mouseout=${this.#onToastMouseOut.bind(this, toast)}
+              @transitionend=${this.#onToastTransitionEnd.bind(this, toast)}
             >
               <span class="prefix" id="prefix">
-                ${this.#e.term(t.variant)}
+                ${this.#localize.term(toast.variant)}
               </span>
 
-              ${choose(t.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}
+              ${choose(toast.variant, [
+                ['success', () => icons.success],
+                ['error', () => icons.error],
+            ], () => icons.warningInformational)}
 
               <div class="label" data-test="label" id="label">
-                ${t.label}
+                ${toast.label}
               </div>
 
               <glide-core-icon-button
                 class="dismiss-button"
                 data-test="dismiss-button"
-                label=${this.#e.term("dismiss")}
+                label=${this.#localize.term('dismiss')}
                 variant="tertiary"
-                @click=${this.#r.bind(this,t)}
+                @click=${this.#onToastDismissButtonClick.bind(this, toast)}
               >
                 ${xIcon}
               </glide-core-icon-button>
 
-              ${when(t.privateDescription,(()=>html`
+              ${when(toast.privateDescription, () => {
+                return html `
                   <div
                     class="description"
                     data-test="description"
                     id="description"
-                    @click=${this.#a.bind(this,t)}
+                    @click=${this.#onDescriptionClick.bind(this, toast)}
                   >
-                    ${unsafeHTML(t.privateDescription)}
+                    ${unsafeHTML(toast.privateDescription)}
                   </div>
-                `))}
-            </div>`))}
+                `;
+            })}
+            </div>`;
+        })}
       </div>
-    </div>`}showPopover(){this.#t.value?.showPopover()}static async show(t){let e=document.querySelector("glide-core-private-toasts");if(e||(e=document.createElement("glide-core-private-toasts"),document.body.append(e)),t.childNodes.length>0){let e="";for(const i of t.childNodes)i instanceof Element?e+=i.outerHTML:i instanceof Text&&(e+=i.textContent);t.privateDescription=e.trim()}e.toasts=[t,...e.toasts],await e.updateComplete,e.showPopover(),t.privateShow=!0,setTimeout((()=>{e.requestUpdate()})),t.duration<Number.POSITIVE_INFINITY&&(t.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?e?.dismiss(t):(t.privateDismissing=!0,e.requestUpdate())}),t.duration))}#t;#e;#a(t,e){e.target instanceof Link&&e.preventDefault();const i=[...t.querySelectorAll("*")].find((t=>{if(e.target instanceof Link)return t instanceof Link&&t.label===e.target.label&&t.href===e.target.href}));i instanceof Link&&i.click()}#r(t){window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(t):(t.privateDismissing=!0,t.privateDismissingViaButton=!0,this.requestUpdate())}#s(t){t.duration<Number.POSITIVE_INFINITY&&(t.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(t):(t.privateDismissing=!0,this.requestUpdate())}),t.duration))}#i(t){clearTimeout(t.privateTimeoutId)}#o(t){document.querySelector("glide-core-private-toasts")&&t.privateDismissing&&this.dismiss(t)}};__decorate([property({type:Array})],Toasts.prototype,"toasts",void 0),Toasts=__decorate([customElement("glide-core-private-toasts"),final],Toasts);export default Toasts;const icons={error:html`<svg
+    </div>`;
+    }
+    showPopover() {
+        this.#componentElementRef.value?.showPopover();
+    }
+    static async show(toast) {
+        let toasts = document.querySelector('glide-core-private-toasts');
+        if (!toasts) {
+            toasts = document.createElement('glide-core-private-toasts');
+            document.body.append(toasts);
+        }
+        if (toast.childNodes.length > 0) {
+            let description = '';
+            // Toast's inner HTML will include comments (`<!--?lit$277222571$-->`) used by
+            // Lit in rendering. There's a good chance Lit will misbehave if we copy those
+            // comments. So, to be safe, we only copy Element and Text nodes.
+            for (const node of toast.childNodes) {
+                if (node instanceof Element) {
+                    description += node.outerHTML;
+                }
+                else if (node instanceof Text) {
+                    description += node.textContent;
+                }
+            }
+            toast.privateDescription = description.trim();
+        }
+        toasts.toasts = [toast, ...toasts.toasts];
+        // The transition won't play if the toast is added to the DOM in the same
+        // tick that the `.show` class is added to `.toast`. So we first add the
+        // toast to the DOM (above), then we set `privateShow` to apply the class.
+        // Then we force a render in the next frame (below).
+        await toasts.updateComplete;
+        toasts.showPopover();
+        toast.privateShow = true;
+        setTimeout(() => {
+            // Because `privateShow` is only a reactive property of Toast, Toasts won't
+            // know it needs to rerender. So we let it know.
+            toasts.requestUpdate();
+        });
+        if (toast.duration < Number.POSITIVE_INFINITY) {
+            toast.privateTimeoutId = setTimeout(() => {
+                const isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                if (isReducedMotion) {
+                    toasts?.dismiss(toast);
+                }
+                else {
+                    toast.privateDismissing = true;
+                    // Because `privateDismissing` is only a reactive property of Toast, Toasts won't
+                    // know it needs to rerender. So we let it know.
+                    toasts.requestUpdate();
+                }
+            }, toast.duration);
+        }
+    }
+    #componentElementRef;
+    #localize;
+    #onDescriptionClick(toast, event) {
+        // We want to let the consumer decide if navigation should occur. So we
+        // cancel the event here, and then programmatically click the consumer's
+        // link. The consumer can cancel that link's "click" event if he wants to
+        // prevent navigation.
+        if (event.target instanceof Link) {
+            event.preventDefault();
+        }
+        const link = [...toast.querySelectorAll('*')].find((element) => {
+            if (event.target instanceof Link) {
+                return (element instanceof Link &&
+                    element.label === event.target.label &&
+                    element.href === event.target.href);
+            }
+        });
+        if (link instanceof Link) {
+            link.click();
+        }
+    }
+    #onToastDismissButtonClick(toast) {
+        const isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (isReducedMotion) {
+            this.dismiss(toast);
+        }
+        else {
+            toast.privateDismissing = true;
+            toast.privateDismissingViaButton = true;
+            // Because `privateDismissing` and `privateDismissViaButton` are only reactive
+            // properties of Toast, Toasts won't know it needs to rerender. So we let it know.
+            this.requestUpdate();
+        }
+    }
+    #onToastMouseOut(toast) {
+        if (toast.duration < Number.POSITIVE_INFINITY) {
+            toast.privateTimeoutId = setTimeout(() => {
+                const isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                if (isReducedMotion) {
+                    this.dismiss(toast);
+                }
+                else {
+                    toast.privateDismissing = true;
+                    // Because `privateDismissing` is only a reactive property of Toast, Toasts
+                    // won't know it needs to rerender. So we let it know.
+                    this.requestUpdate();
+                }
+            }, toast.duration);
+        }
+    }
+    #onToastMouseOver(toast) {
+        clearTimeout(toast.privateTimeoutId);
+    }
+    #onToastTransitionEnd(toast) {
+        const toasts = document.querySelector('glide-core-private-toasts');
+        // Checking `privateDismissing` ensures we don't dismiss Toasts when the
+        // "transitionend" event comes from the transition that's played when they're
+        // shown instead of the one played when they're dismissed.
+        if (toasts && toast.privateDismissing) {
+            this.dismiss(toast);
+        }
+    }
+};
+__decorate([
+    property({ type: Array })
+], Toasts.prototype, "toasts", void 0);
+Toasts = __decorate([
+    customElement('glide-core-private-toasts'),
+    final
+], Toasts);
+export default Toasts;
+const icons = {
+    error: html `<svg
     aria-hidden="true"
     class="icon error"
     fill="none"
     viewBox="0 0 20 20"
-    style=${styleMap({height:"1.25rem",width:"1.25rem"})}
+    style=${styleMap({
+        height: '1.25rem',
+        width: '1.25rem',
+    })}
   >
     <path
       fill-rule="evenodd"
@@ -61,12 +275,16 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length
       d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z"
       fill="currentColor"
     />
-  </svg>`,success:html`<svg
+  </svg>`,
+    success: html `<svg
     aria-hidden="true"
     class="icon success"
     fill="none"
     viewBox="0 0 20 20"
-    style=${styleMap({height:"1.25rem",width:"1.25rem"})}
+    style=${styleMap({
+        height: '1.25rem',
+        width: '1.25rem',
+    })}
   >
     <path
       fill-rule="evenodd"
@@ -74,12 +292,16 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length
       d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z"
       fill="currentColor"
     />
-  </svg>`,warningInformational:html`<svg
+  </svg>`,
+    warningInformational: html `<svg
     aria-hidden="true"
     class="icon informational"
     fill="none"
     viewBox="0 0 20 20"
-    style=${styleMap({height:"1.25rem",width:"1.25rem"})}
+    style=${styleMap({
+        height: '1.25rem',
+        width: '1.25rem',
+    })}
   >
     <path
       fill-rule="evenodd"
@@ -87,4 +309,5 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length
       d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z"
       fill="currentColor"
     />
-  </svg>`};
+  </svg>`,
+};

package/dist/toast.toasts.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${visuallyHidden(".prefix")}
-  `,css`
+import { css } from 'lit';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${visuallyHidden('.prefix')}
+  `,
+    css `
     .component {
       background-color: transparent;
       border: none;
@@ -125,4 +129,5 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
       color: var(--glide-core-color-static-text-default);
       grid-column: 2;
     }
-  `];
+  `,
+];

package/dist/toggle.js

@@ -1 +1,178 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Toggle=class Toggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-private-label label="${ifDefined(this.label)}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" @input="${this.#t}" ${ref(this.#e)}></div>${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}<slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};__decorate([property({reflect:!0}),required],Toggle.prototype,"label",void 0),__decorate([property({type:Boolean})],Toggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],Toggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],Toggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],Toggle.prototype,"orientation",void 0),__decorate([property()],Toggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],Toggle.prototype,"summary",void 0),__decorate([property({reflect:!0})],Toggle.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],Toggle.prototype,"version",void 0),Toggle=__decorate([customElement("glide-core-toggle"),final],Toggle);export default Toggle;
+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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './label.js';
+import { html, LitElement } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './toggle.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [checked=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {string} [summary]
+ * @attr {string} [tooltip]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} change
+ */
+let Toggle = class Toggle extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.disabled = false;
+        this.hideLabel = false;
+        this.orientation = 'horizontal';
+        this.version = packageJson.version;
+        this.#inputElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    click() {
+        this.#inputElementRef.value?.click();
+    }
+    focus(options) {
+        this.#inputElementRef.value?.focus(options);
+    }
+    render() {
+        return html `<div data-test="component">
+      <glide-core-private-label
+        label=${ifDefined(this.label)}
+        orientation=${this.orientation}
+        split=${ifDefined(this.privateSplit ?? undefined)}
+        tooltip=${ifDefined(this.tooltip)}
+        ?disabled=${this.disabled}
+        ?hide=${this.hideLabel}
+      >
+        <label for="input"> ${this.label} </label>
+
+        <div class="toggle-and-input" slot="control">
+          <!--
+            The input is described by the summary and description but not the tooltip.
+            Screenreaders will come across the tooltip naturally as they move focus
+            through Toggle.
+
+            Describing the input additionally by the tooltip is possible. We'd have to:
+
+            1. Get the content of the tooltip slot.
+            2. Dump the content into a DIV.
+            3. Visually hide the DIV.
+            4. Describe the input using the DIV.
+            5. Hide the tooltip using "aria-hidden" so its content isn't doubly read.
+
+            Even then, the tooltip would still receive focus to support sighted keyboard
+            users. Screenreaders would likewise focus the tooltip. But its contents would
+            not be read aloud because they would be hidden. This would be pretty confusing.
+          -->
+          <input
+            aria-checked=${this.checked}
+            aria-describedby="summary description"
+            data-test="input"
+            id="input"
+            role="switch"
+            type="checkbox"
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            @change=${this.#onChangeOrInput}
+            @input=${this.#onChangeOrInput}
+            ${ref(this.#inputElementRef)}
+          />
+        </div>
+
+        ${when(this.summary, () => html `<div id="summary" slot="summary">${this.summary}</div>`)}
+
+        <slot
+          class="description"
+          id="description"
+          name="description"
+          slot="description"
+        >
+          <!--
+            Additional information or context
+            @type {Element | string}
+          -->
+        </slot>
+      </glide-core-private-label>
+    </div>`;
+    }
+    #inputElementRef;
+    // Only "change" would need to be handled if not for some consumers needing
+    // to force Toggle checked or unchecked until the user has completed some action.
+    //
+    // The way to force Toggle checked or unchecked is to add an "input" or
+    // "change" handler and then immediately set `checked` back to its desired
+    // state inside that handler.
+    //
+    // To do that, consumers need to await `this.updateComplete` so `checked` isn't
+    // immediately reverted after Toggle updates, which happens asynchronously and
+    // so would happen after their handler runs.
+    //
+    // To await `this.updateComplete`, however, an update has to be pending. That's
+    // why we're handling "input" as well: so that "input", like "change", results
+    // in an update that can be awaited.
+    //
+    // If "input" events were dispatched after "change" events, only handling
+    // "change" here would suffice because an update from "change" would already
+    // be pending by the time "input" is dispatched.
+    #onChangeOrInput(event) {
+        if (event.target instanceof HTMLInputElement) {
+            this.checked = event.target.checked;
+        }
+        if (event.type === 'change') {
+            // Unlike "input" events, "change" events aren't composed. So we have to
+            // manually dispatch them.
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Toggle.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], Toggle.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Toggle.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'hide-label', type: Boolean })
+], Toggle.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Toggle.prototype, "orientation", void 0);
+__decorate([
+    property()
+], Toggle.prototype, "privateSplit", void 0);
+__decorate([
+    property({ reflect: true })
+], Toggle.prototype, "summary", void 0);
+__decorate([
+    property({ reflect: true })
+], Toggle.prototype, "tooltip", void 0);
+__decorate([
+    property({ reflect: true })
+], Toggle.prototype, "version", void 0);
+Toggle = __decorate([
+    customElement('glide-core-toggle'),
+    final
+], Toggle);
+export default Toggle;

package/dist/toggle.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".toggle-and-input:has(input:focus-visible)")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline('.toggle-and-input:has(input:focus-visible)')}
+  `,
+    css `
     .toggle-and-input-and-summary {
       align-items: center;
       display: flex;
@@ -22,6 +26,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       inline-size: var(--private-inline-size);
       justify-content: center;
       position: relative;
+      transition: background-color var(--glide-core-duration-moderate-02)
+        var(--glide-core-animation-swoop);
 
       &:has(input:checked:not(:disabled)) {
         background-color: var(
@@ -32,6 +38,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         &::before {
           transform: translateX(0);
         }
+
+        &:hover {
+          background-color: var(
+            --glide-core-color-interactive-surface-container-active--hover
+          );
+        }
       }
 
       &:has(input:disabled) {
@@ -54,6 +66,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         }
       }
 
+      &:has(input:not(:disabled, :checked):hover) {
+        background-color: var(
+          --glide-core-color-interactive-surface-container-inactive--hover
+        );
+      }
+
       &::before {
         background: var(--glide-core-color-interactive-icon-onsolid);
         block-size: 0.875rem;
@@ -67,7 +85,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         inset-inline-end: 0;
         position: absolute;
         transform: translateX(calc(var(--private-inline-size) * -1 + 100%));
-        transition: 150ms transform;
+        transition: transform var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop);
       }
     }
 
@@ -81,4 +100,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       opacity: 0;
       position: absolute;
     }
-  `];
+  `,
+];