@skdx/web-components-blocks 0.34.0 → 0.36.0

package/dist/verification-page/VerificationPage.d.cts

@@ -0,0 +1,149 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/pin-input';
+import '@skdx/web-components/text';
+/** What a `verify` event carries: the complete code the form held. */
+export interface SkdxVerificationDetail {
+    /** The full code, exactly `length` characters long. */
+    code: string;
+}
+/** What a `value-change` event carries: the new code, the one it replaced, and what drove the edit. */
+export interface SkdxVerificationValueChangeDetail {
+    /** The code as it stands after the edit. */
+    value: string;
+    /** The code held immediately before, or `null` when nothing was. */
+    previousValue: string | null;
+    /** What drove the change: a key press, a pointer, or the application. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Verification block: a pin input for a one-time code, a submit button and a
+ * resend control whose cooldown the consumer owns.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-verification-page` on the host, then `__panel`, `__title`,
+ * `__description`, `__error`, `__form`, `__field`, `__code`, `__submit`,
+ * `__resend`, `__resend-hint` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-verification-page
+ *   id="verify"
+ *   description="We sent a code to ada@example.com."
+ * ></skdx-verification-page>
+ * <script>
+ *   const page = document.getElementById('verify');
+ *   page.addEventListener('verify', (event) => console.log(event.detail.code));
+ *   page.addEventListener('resend', () => send());
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the submit button.
+ * @slot footer - Navigation below the resend region, such as a link back to the sign-in page.
+ * @fires verify - Fires with `{ code }` when the form submits with a code of exactly the declared length.
+ * @fires resend - Fires when the resend button is activated; listening for it is what renders the resend region.
+ * @fires value-change - Fires with `{ value, previousValue, reason }` whenever any code box changes.
+ */
+export declare class SkdxVerificationPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Enter your verification code'
+     */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, naming where the code was sent.
+     * @default undefined — no description region renders.
+     */
+    description?: string;
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while the code boxes stay editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Legend of the code fieldset and accessible name of the derived pin input holding the code.
+     * @default 'Verification code'
+     */
+    codeLabel: string;
+    /**
+     * How many character boxes the code is entered into, and how long a complete code is.
+     * @default 6
+     */
+    length: number;
+    /**
+     * Current code, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string;
+    /**
+     * Initial code for uncontrolled usage, seeding the boxes on first render.
+     * @default '' — the boxes start empty.
+     */
+    defaultValue: string;
+    /**
+     * Text of the form's submit button.
+     * @default 'Verify'
+     */
+    submitLabel: string;
+    /**
+     * Text of the resend button, which renders only alongside a resend listener.
+     * @default 'Resend code'
+     */
+    resendLabel: string;
+    /**
+     * Makes the resend button unusable, for a consumer running its own cooldown.
+     * @default false
+     */
+    resendDisabled: boolean;
+    /**
+     * Note rendered beside the resend button, such as how long the cooldown has left.
+     * @default undefined — no hint renders; the block runs no timer of its own.
+     */
+    resendHint?: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    /** What the boxes last held; outranked by `value` whenever the consumer controls the code. */
+    private uncontrolledValue?;
+    /** How many listeners each gated event holds, so the anatomy it drives renders only while one is bound. */
+    private readonly gated;
+    /** @internal Standard DOM registration, counted so a listener-gated region knows it has one. */
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    /** @internal Standard DOM removal, counted so a listener-gated region knows it lost one. */
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    private countListener;
+    /** Whether the consumer is listening for `type` on this element, which is what renders its control. */
+    private handles;
+    /** The code right now, controlled or not. */
+    private get currentValue();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private setValue;
+    private readonly handleValueChange;
+    private readonly handleSubmit;
+    private readonly resend;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-verification-page': SkdxVerificationPage;
+    }
+}

package/dist/verification-page/VerificationPage.d.ts

@@ -0,0 +1,149 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/pin-input';
+import '@skdx/web-components/text';
+/** What a `verify` event carries: the complete code the form held. */
+export interface SkdxVerificationDetail {
+    /** The full code, exactly `length` characters long. */
+    code: string;
+}
+/** What a `value-change` event carries: the new code, the one it replaced, and what drove the edit. */
+export interface SkdxVerificationValueChangeDetail {
+    /** The code as it stands after the edit. */
+    value: string;
+    /** The code held immediately before, or `null` when nothing was. */
+    previousValue: string | null;
+    /** What drove the change: a key press, a pointer, or the application. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Verification block: a pin input for a one-time code, a submit button and a
+ * resend control whose cooldown the consumer owns.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-verification-page` on the host, then `__panel`, `__title`,
+ * `__description`, `__error`, `__form`, `__field`, `__code`, `__submit`,
+ * `__resend`, `__resend-hint` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-verification-page
+ *   id="verify"
+ *   description="We sent a code to ada@example.com."
+ * ></skdx-verification-page>
+ * <script>
+ *   const page = document.getElementById('verify');
+ *   page.addEventListener('verify', (event) => console.log(event.detail.code));
+ *   page.addEventListener('resend', () => send());
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the submit button.
+ * @slot footer - Navigation below the resend region, such as a link back to the sign-in page.
+ * @fires verify - Fires with `{ code }` when the form submits with a code of exactly the declared length.
+ * @fires resend - Fires when the resend button is activated; listening for it is what renders the resend region.
+ * @fires value-change - Fires with `{ value, previousValue, reason }` whenever any code box changes.
+ */
+export declare class SkdxVerificationPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Enter your verification code'
+     */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, naming where the code was sent.
+     * @default undefined — no description region renders.
+     */
+    description?: string;
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while the code boxes stay editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Legend of the code fieldset and accessible name of the derived pin input holding the code.
+     * @default 'Verification code'
+     */
+    codeLabel: string;
+    /**
+     * How many character boxes the code is entered into, and how long a complete code is.
+     * @default 6
+     */
+    length: number;
+    /**
+     * Current code, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string;
+    /**
+     * Initial code for uncontrolled usage, seeding the boxes on first render.
+     * @default '' — the boxes start empty.
+     */
+    defaultValue: string;
+    /**
+     * Text of the form's submit button.
+     * @default 'Verify'
+     */
+    submitLabel: string;
+    /**
+     * Text of the resend button, which renders only alongside a resend listener.
+     * @default 'Resend code'
+     */
+    resendLabel: string;
+    /**
+     * Makes the resend button unusable, for a consumer running its own cooldown.
+     * @default false
+     */
+    resendDisabled: boolean;
+    /**
+     * Note rendered beside the resend button, such as how long the cooldown has left.
+     * @default undefined — no hint renders; the block runs no timer of its own.
+     */
+    resendHint?: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    /** What the boxes last held; outranked by `value` whenever the consumer controls the code. */
+    private uncontrolledValue?;
+    /** How many listeners each gated event holds, so the anatomy it drives renders only while one is bound. */
+    private readonly gated;
+    /** @internal Standard DOM registration, counted so a listener-gated region knows it has one. */
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    /** @internal Standard DOM removal, counted so a listener-gated region knows it lost one. */
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    private countListener;
+    /** Whether the consumer is listening for `type` on this element, which is what renders its control. */
+    private handles;
+    /** The code right now, controlled or not. */
+    private get currentValue();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private setValue;
+    private readonly handleValueChange;
+    private readonly handleSubmit;
+    private readonly resend;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-verification-page': SkdxVerificationPage;
+    }
+}

package/dist/verification-page/VerificationPage.js

@@ -0,0 +1,61 @@
+var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n)=>{for(var r=n>1?void 0:n?g(d,e):d,p=l.length-1,v;p>=0;p--)(v=l[p])&&(r=(n?v(d,e,r):v(r))||r);return n&&r&&h(d,e,r),r};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as E,placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",L="data-skdx-verification-page-content",k=["resend"],x=0,t=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++x}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,n,r){super.addEventListener(e,n,r),this.countListener(e,1)}removeEventListener(e,n,r){super.removeEventListener(e,n,r),this.countListener(e,-1)}countListener(e,n){k.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+n)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${L}]`)}get hasContent(){return E(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),f(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,n){let r=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:r,reason:n})}render(){return a`
+      <div
+        class="skdx-verification-page__panel"
+        data-skdx-verification-page-generated
+      >
+        <skdx-heading
+          class="skdx-verification-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?a`<skdx-alert
+                class="skdx-verification-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:o}
+        ${this.description?a`<skdx-text
+                class="skdx-verification-page__description"
+                as="p"
+                .tone=${"muted"}
+                >${this.description}</skdx-text
+              >`:o}
+        <skdx-form class="skdx-verification-page__form">
+          <form>
+            <skdx-fieldset class="skdx-verification-page__field">
+              <skdx-field-label>${this.codeLabel}</skdx-field-label>
+              <skdx-pin-input
+                class="skdx-verification-page__code"
+                aria-label=${this.codeLabel}
+                name="code"
+                required
+                length=${this.length}
+                .value=${this.currentValue}
+                @value-change=${this.handleValueChange}
+              ></skdx-pin-input>
+            </skdx-fieldset>
+            ${this.hasContent?a`<div data-skdx-verification-page-content></div>`:o}
+            <skdx-button
+              class="skdx-verification-page__submit"
+              type="submit"
+              ?loading=${this.pending}
+              ?disabled=${this.pending}
+              >${this.submitLabel}</skdx-button
+            >
+          </form>
+        </skdx-form>
+        ${this.handles("resend")?a`<div class="skdx-verification-page__resend">
+                <skdx-button
+                  type="button"
+                  .variant=${"ghost"}
+                  ?disabled=${this.resendDisabled}
+                  @click=${this.resend}
+                  >${this.resendLabel}</skdx-button
+                >
+                ${this.resendHint?a`<span class="skdx-verification-page__resend-hint"
+                        >${this.resendHint}</span
+                      >`:o}
+              </div>`:o}
+        ${this.hasSlotted("footer")?a`<div class="skdx-verification-page__footer"></div>`:o}
+      </div>
+    `}};i([s({type:String})],t.prototype,"title",2),i([s({type:String})],t.prototype,"description",2),i([s({type:String})],t.prototype,"error",2),i([s({type:Boolean})],t.prototype,"pending",2),i([s({type:String,attribute:"code-label"})],t.prototype,"codeLabel",2),i([s({type:Number})],t.prototype,"length",2),i([s({type:String})],t.prototype,"value",2),i([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),i([s({type:String,attribute:"resend-label"})],t.prototype,"resendLabel",2),i([s({type:Boolean,attribute:"resend-disabled"})],t.prototype,"resendDisabled",2),i([s({type:String,attribute:"resend-hint"})],t.prototype,"resendHint",2),t=i([b("skdx-verification-page","verification-page","root")],t);export{t as SkdxVerificationPage};

package/dist/verification-page/index.cjs

@@ -0,0 +1 @@
+"use strict";var o=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var c=(i,e)=>{for(var t in e)o(i,t,{get:e[t],enumerable:!0})},d=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of x(e))!V.call(i,a)&&a!==t&&o(i,a,{get:()=>e[a],enumerable:!(r=n(e,a))||r.enumerable});return i};var k=i=>d(o({},"__esModule",{value:!0}),i);var l={};c(l,{SkdxVerificationPage:()=>f.SkdxVerificationPage});module.exports=k(l);var f=require("./VerificationPage.cjs");0&&(module.exports={SkdxVerificationPage});

package/dist/verification-page/index.d.cts

@@ -0,0 +1 @@
+export { SkdxVerificationPage, type SkdxVerificationDetail, type SkdxVerificationValueChangeDetail, } from './VerificationPage.cjs';

package/dist/verification-page/index.d.ts

@@ -0,0 +1 @@
+export { SkdxVerificationPage, type SkdxVerificationDetail, type SkdxVerificationValueChangeDetail, } from './VerificationPage.js';

package/dist/verification-page/index.js

@@ -0,0 +1 @@
+import{SkdxVerificationPage as a}from"./VerificationPage.js";export{a as SkdxVerificationPage};

package/dist/workspace-switcher/WorkspaceSwitcher.cjs

@@ -0,0 +1,69 @@
+"use strict";var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var w=(i,n)=>{for(var e in n)u(i,e,{get:n[e],enumerable:!0})},x=(i,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of b(n))!f.call(i,s)&&s!==e&&u(i,s,{get:()=>n[s],enumerable:!(t=g(n,s))||t.enumerable});return i};var y=i=>x(u({},"__esModule",{value:!0}),i),o=(i,n,e,t)=>{for(var s=t>1?void 0:t?g(n,e):n,c=i.length-1,d;c>=0;c--)(d=i[c])&&(s=(t?d(n,e,s):d(s))||s);return t&&s&&u(n,e,s),s};var E={};w(E,{SkdxWorkspaceSwitcher:()=>a});module.exports=y(E);var r=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),h=require("../internal/events.cjs"),k=require("../internal/slots.cjs"),T=require("@skdx/web-components/primitives/command"),q=require("@skdx/web-components/primitives/popover"),M=require("@skdx/web-components/visually-hidden");var $="data-skdx-workspace-switcher-generated",_={fromAttribute:i=>i!=="false"};function m(i){i.stopPropagation()}function L(i,n){let e=n.toLowerCase(),t=new Map([[void 0,[]]]);for(let d of i){let p=t.get(d.group);p?p.push(d):t.set(d.group,[d])}let s=d=>e===""||d.id.toLowerCase().includes(e)||d.label.toLowerCase().includes(e)||(d.description?.toLowerCase().includes(e)??!1),c=[];for(let[d,p]of t)p.some(s)&&c.push({heading:d,items:p});return c}var a=class extends r.LitElement{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),(0,h.emit)(this,"open-change",e)}select(e,t){e.stopPropagation();let s=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),(0,h.emit)(this,"value-change",{value:t,previousValue:s,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let s=this.querySelector("skdx-command-input");s?.updateComplete.then(()=>s.querySelector("input")?.setAttribute("aria-label",this.searchLabel)),(0,k.placeSlotted)(this,$,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return r.html`${this.renderLeading&&e?r.html`<span
+              aria-hidden="true"
+              class="skdx-workspace-switcher__leading"
+              >${this.renderLeading(e)}</span
+            >`:r.nothing}
+      <span class="skdx-workspace-switcher__current">${e?.label??this.placeholder}</span>
+      ${e?.description?r.html`<span class="skdx-workspace-switcher__description">${e.description}</span>`:r.nothing}`}listedItem(e){let t=e.id===this.currentValue;return r.html`<skdx-command-item
+      class="skdx-workspace-switcher__item"
+      .value=${e.id}
+      .keywords=${e.description?[e.label,e.description]:[e.label]}
+      ?disabled=${e.disabled}
+      data-selected=${t?"":r.nothing}
+      @select=${s=>this.select(s,e.id)}
+    >
+      ${this.renderLeading?r.html`<span
+              aria-hidden="true"
+              class="skdx-workspace-switcher__item-leading"
+              >${this.renderLeading(e)}</span
+            >`:r.nothing}
+      <span class="skdx-workspace-switcher__item-label">${e.label}</span>
+      ${e.description?r.html`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:r.nothing}
+      ${t?r.html`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:r.nothing}
+    </skdx-command-item>`}render(){let e=L(this.items??[],this.search);return r.html`
+      <skdx-popover-root
+        data-skdx-workspace-switcher-generated
+        modal="none"
+        @open-change=${this.handleOpenChange}
+      >
+        <skdx-popover-trigger
+          >${this.hasTrigger?r.nothing:this.derivedTrigger()}</skdx-popover-trigger
+        >
+        <skdx-popover-content
+          class="skdx-workspace-switcher__content"
+          align="start"
+          aria-label=${this.label??this.placeholder}
+        >
+          <skdx-command
+            .search=${this.search}
+            ?loading=${this.loading}
+            @search-change=${this.handleSearchChange}
+            @value-change=${m}
+            @item-select=${m}
+          >
+            <skdx-command-input
+              class="skdx-workspace-switcher__search"
+              placeholder=${this.searchPlaceholder??r.nothing}
+            ></skdx-command-input>
+            <skdx-command-list
+              class="skdx-workspace-switcher__list"
+              aria-label=${this.label??this.placeholder}
+            >
+              ${e.map(t=>r.html`<skdx-command-group
+                    class="skdx-workspace-switcher__group"
+                    heading=${t.heading??r.nothing}
+                  >
+                    ${t.items.map(s=>this.listedItem(s))}
+                  </skdx-command-group>`)}
+            </skdx-command-list>
+            <skdx-command-loading class="skdx-workspace-switcher__loading"
+              >${this.loadingMessage}</skdx-command-loading
+            >
+            <skdx-command-empty class="skdx-workspace-switcher__empty"
+              >${this.emptyMessage}</skdx-command-empty
+            >
+          </skdx-command>
+          ${this.hasActions?r.html`<div class="skdx-workspace-switcher__footer"></div>`:r.nothing}
+        </skdx-popover-content>
+      </skdx-popover-root>
+    `}};o([(0,l.property)({attribute:!1})],a.prototype,"items",2),o([(0,l.property)({type:String})],a.prototype,"value",2),o([(0,l.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),o([(0,l.property)({type:String})],a.prototype,"placeholder",2),o([(0,l.property)({type:String})],a.prototype,"label",2),o([(0,l.property)({type:String,attribute:"search-label"})],a.prototype,"searchLabel",2),o([(0,l.property)({type:String,attribute:"search-placeholder"})],a.prototype,"searchPlaceholder",2),o([(0,l.property)({type:String,attribute:"empty-message"})],a.prototype,"emptyMessage",2),o([(0,l.property)({type:String,attribute:"loading-message"})],a.prototype,"loadingMessage",2),o([(0,l.property)({type:Boolean})],a.prototype,"loading",2),o([(0,l.property)({type:String,attribute:"selected-label"})],a.prototype,"selectedLabel",2),o([(0,l.property)({attribute:!1})],a.prototype,"renderLeading",2),o([(0,l.property)({converter:_})],a.prototype,"open",2),o([(0,l.property)({type:Boolean,attribute:"default-open"})],a.prototype,"defaultOpen",2),a=o([(0,v.customElement)("skdx-workspace-switcher","workspace-switcher","root")],a);0&&(module.exports={SkdxWorkspaceSwitcher});

package/dist/workspace-switcher/WorkspaceSwitcher.d.cts

@@ -0,0 +1,165 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/primitives/command';
+import '@skdx/web-components/primitives/popover';
+import '@skdx/web-components/visually-hidden';
+/** One switchable context in the list — a workspace, organisation, team, account or project. */
+export interface SkdxWorkspaceSwitcherItem {
+    /** Stable identifier reported to the change event and matched against the current value. */
+    id: string;
+    /** Human-readable name rendered as the item's first line and in the closed trigger. */
+    label: string;
+    /** Secondary line rendered under the label, such as a plan name or member count. @default undefined */
+    description?: string | undefined;
+    /** Heading of the group this item is listed under, gathering items that share it. @default undefined */
+    group?: string | undefined;
+    /** Lists the item but withholds selection, keyboard traversal and pointer highlighting. @default false */
+    disabled?: boolean | undefined;
+}
+/** What a `value-change` event carries: the picked id, the one it replaced, and what drove the change. */
+export interface SkdxWorkspaceSwitcherValueChangeDetail {
+    /** Id of the context the user picked. */
+    value: string;
+    /** Id that was active immediately before, or `null` when nothing was. */
+    previousValue: string | null;
+    /** What drove the change: a key press, a pointer, or the application. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Switches the active context — workspace, organisation, team, account or
+ * project — from a searchable, groupable list in a popover, with loading,
+ * empty and footer regions.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-workspace-switcher` on the host, then `__leading`,
+ * `__current`, `__description`, `__content`, `__search`, `__list`, `__loading`,
+ * `__empty`, `__group`, `__item`, `__item-leading`, `__item-label`,
+ * `__item-description` and `__footer`. `data-selected` marks the active item.
+ *
+ * @example
+ * ```html
+ * <skdx-workspace-switcher id="switcher" default-value="acme"></skdx-workspace-switcher>
+ * <script>
+ *   const switcher = document.getElementById('switcher');
+ *   switcher.items = [{ id: 'acme', label: 'Acme', description: 'Pro' }];
+ *   switcher.addEventListener('value-change', (event) => switchTo(event.detail.value));
+ * </script>
+ * ```
+ *
+ * @slot trigger - Content that replaces the derived trigger button entirely.
+ * @slot actions - Controls placed in the panel's footer, such as create and manage buttons.
+ * @fires value-change - Fires with the id of the item the user picked, immediately before the panel closes.
+ * @fires open-change - Fires with the new open state whenever the panel opens or closes, controlled or not.
+ * @fires open-change-complete - Fires with the new open state once the panel's enter or exit animation has settled.
+ * @fires escape-key-down - Fires when Escape is pressed while the panel is open; `preventDefault()` keeps it open.
+ * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; `preventDefault()` keeps it open.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; `preventDefault()` keeps it open.
+ * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
+ * @fires open-auto-focus - Fires before focus moves into the panel on open; `preventDefault()` leaves focus where it is.
+ * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+ */
+export declare class SkdxWorkspaceSwitcher extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Every context the user may switch to, rendered in the order given and grouped by `group`. */
+    items: readonly SkdxWorkspaceSwitcherItem[];
+    /**
+     * Id of the active context, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, following `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Id of the context active on first render, for uncontrolled usage.
+     * @default '' — the trigger shows the placeholder until one is picked.
+     */
+    defaultValue: string;
+    /**
+     * Trigger text shown while no item in the list is the active one.
+     * @default 'Select'
+     */
+    placeholder: string;
+    /**
+     * Accessible name for the trigger and the result list, when the visible text is not enough.
+     * @default undefined — the trigger is named by its own visible text.
+     */
+    label?: string | undefined;
+    /**
+     * Accessible name of the search field inside the open panel.
+     * @default 'Search'
+     */
+    searchLabel: string;
+    /**
+     * Placeholder text shown inside the panel's empty search field.
+     * @default undefined — the search field renders no placeholder.
+     */
+    searchPlaceholder?: string | undefined;
+    /**
+     * Message shown in place of the list when the search matches nothing.
+     * @default 'No results'
+     */
+    emptyMessage: string;
+    /**
+     * Message announced beside the list while results are still in flight.
+     * @default 'Loading'
+     */
+    loadingMessage: string;
+    /**
+     * Marks the results as in flight, showing the loading message instead of the empty one.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Visually hidden text appended to the active item, naming it for screen readers.
+     * @default 'Current'
+     */
+    selectedLabel: string;
+    /**
+     * Renders a decorative glyph — an avatar or a logo — for one item and for the trigger.
+     * @default undefined — no leading region renders anywhere.
+     */
+    renderLeading?: ((item: SkdxWorkspaceSwitcherItem) => unknown) | undefined;
+    /**
+     * Whether the panel is open, for controlled usage paired with `open-change`.
+     * @default undefined — uncontrolled, following `defaultOpen`.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the panel is open on first render, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /** What the list last chose; outranked by `value` whenever the consumer controls it. */
+    private uncontrolledValue?;
+    /** What the trigger last chose; outranked by `open` whenever the consumer controls it. */
+    private uncontrolledOpen?;
+    /** Current search text, cleared whenever the panel closes so it reopens on the full list. */
+    private search;
+    /** What drove the gesture in flight, read when a selection is reported. */
+    private reason;
+    /** Id of the active context right now, controlled or not. */
+    private get currentValue();
+    /** Whether the panel is open right now, controlled or not. */
+    private get isOpen();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly notePointer;
+    private readonly noteKeyboard;
+    /** Whether the consumer supplied their own trigger — still true once it has been moved in. */
+    private get hasTrigger();
+    /** Whether the consumer supplied footer controls — still true once they have been moved in. */
+    private get hasActions();
+    private region;
+    private readonly handleOpenChange;
+    private setOpen;
+    private readonly handleSearchChange;
+    private select;
+    private nameTrigger;
+    protected updated(): void;
+    private derivedTrigger;
+    private listedItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-workspace-switcher': SkdxWorkspaceSwitcher;
+    }
+}