@skdx/web-components-blocks 0.1.0 → 0.35.0

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;
+    }
+}

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

@@ -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;
+    }
+}

package/dist/workspace-switcher/WorkspaceSwitcher.js

@@ -0,0 +1,69 @@
+var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t)=>{for(var s=t>1?void 0:t?v(c,e):c,p=d.length-1,i;p>=0;p--)(i=d[p])&&(s=(t?i(c,e,s):i(s))||s);return t&&s&&m(c,e,s),s};import{html as o,LitElement as k,nothing as l}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as h}from"../internal/events.js";import{placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/primitives/command";import"@skdx/web-components/primitives/popover";import"@skdx/web-components/visually-hidden";var w="data-skdx-workspace-switcher-generated",x={fromAttribute:d=>d!=="false"};function g(d){d.stopPropagation()}function y(d,c){let e=c.toLowerCase(),t=new Map([[void 0,[]]]);for(let i of d){let u=t.get(i.group);u?u.push(i):t.set(i.group,[i])}let s=i=>e===""||i.id.toLowerCase().includes(e)||i.label.toLowerCase().includes(e)||(i.description?.toLowerCase().includes(e)??!1),p=[];for(let[i,u]of t)u.some(s)&&p.push({heading:i,items:u});return p}var r=class extends k{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"]')!==null}get hasActions(){return this.querySelector('[slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),h(this,"open-change",e)}select(e,t){e.stopPropagation();let s=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),h(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)),f(this,w,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return o`${this.renderLeading&&e?o`<span
+              aria-hidden="true"
+              class="skdx-workspace-switcher__leading"
+              >${this.renderLeading(e)}</span
+            >`:l}
+      <span class="skdx-workspace-switcher__current">${e?.label??this.placeholder}</span>
+      ${e?.description?o`<span class="skdx-workspace-switcher__description">${e.description}</span>`:l}`}listedItem(e){let t=e.id===this.currentValue;return o`<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?"":l}
+      @select=${s=>this.select(s,e.id)}
+    >
+      ${this.renderLeading?o`<span
+              aria-hidden="true"
+              class="skdx-workspace-switcher__item-leading"
+              >${this.renderLeading(e)}</span
+            >`:l}
+      <span class="skdx-workspace-switcher__item-label">${e.label}</span>
+      ${e.description?o`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:l}
+      ${t?o`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:l}
+    </skdx-command-item>`}render(){let e=y(this.items??[],this.search);return o`
+      <skdx-popover-root
+        data-skdx-workspace-switcher-generated
+        modal="none"
+        @open-change=${this.handleOpenChange}
+      >
+        <skdx-popover-trigger
+          >${this.hasTrigger?l: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=${g}
+            @item-select=${g}
+          >
+            <skdx-command-input
+              class="skdx-workspace-switcher__search"
+              placeholder=${this.searchPlaceholder??l}
+            ></skdx-command-input>
+            <skdx-command-list
+              class="skdx-workspace-switcher__list"
+              aria-label=${this.label??this.placeholder}
+            >
+              ${e.map(t=>o`<skdx-command-group
+                    class="skdx-workspace-switcher__group"
+                    heading=${t.heading??l}
+                  >
+                    ${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?o`<div class="skdx-workspace-switcher__footer"></div>`:l}
+        </skdx-popover-content>
+      </skdx-popover-root>
+    `}};a([n({attribute:!1})],r.prototype,"items",2),a([n({type:String})],r.prototype,"value",2),a([n({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([n({type:String})],r.prototype,"placeholder",2),a([n({type:String})],r.prototype,"label",2),a([n({type:String,attribute:"search-label"})],r.prototype,"searchLabel",2),a([n({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2),a([n({type:String,attribute:"empty-message"})],r.prototype,"emptyMessage",2),a([n({type:String,attribute:"loading-message"})],r.prototype,"loadingMessage",2),a([n({type:Boolean})],r.prototype,"loading",2),a([n({type:String,attribute:"selected-label"})],r.prototype,"selectedLabel",2),a([n({attribute:!1})],r.prototype,"renderLeading",2),a([n({converter:x})],r.prototype,"open",2),a([n({type:Boolean,attribute:"default-open"})],r.prototype,"defaultOpen",2),r=a([b("skdx-workspace-switcher","workspace-switcher","root")],r);export{r as SkdxWorkspaceSwitcher};

package/dist/workspace-switcher/index.cjs

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

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

@@ -0,0 +1 @@
+export { SkdxWorkspaceSwitcher, type SkdxWorkspaceSwitcherItem, type SkdxWorkspaceSwitcherValueChangeDetail, } from './WorkspaceSwitcher.cjs';

package/dist/workspace-switcher/index.d.ts

@@ -0,0 +1 @@
+export { SkdxWorkspaceSwitcher, type SkdxWorkspaceSwitcherItem, type SkdxWorkspaceSwitcherValueChangeDetail, } from './WorkspaceSwitcher.js';

package/dist/workspace-switcher/index.js

@@ -0,0 +1 @@
+import{SkdxWorkspaceSwitcher as t}from"./WorkspaceSwitcher.js";export{t as SkdxWorkspaceSwitcher};