@skdx/web-components 0.26.0

package/dist/tree-select/index.d.cts

@@ -0,0 +1,11 @@
+export { SkdxTreeSelect, defaultTreeSelectFilter, defaultGetMatchCountLabel } from './TreeSelect.cjs';
+export { SkdxTreeSelectTrigger } from './TreeSelectTrigger.cjs';
+export { SkdxTreeSelectValue } from './TreeSelectValue.cjs';
+export { SkdxTreeSelectPortal } from './TreeSelectPortal.cjs';
+export { SkdxTreeSelectContent } from './TreeSelectContent.cjs';
+export { SkdxTreeSelectTree } from './TreeSelectTree.cjs';
+export { SkdxTreeSelectItem } from './TreeSelectItem.cjs';
+export { SkdxTreeSelectItemIndicator } from './TreeSelectItemIndicator.cjs';
+export { SkdxTreeSelectEmpty } from './TreeSelectEmpty.cjs';
+export { SkdxTreeSelectInput } from './TreeSelectInput.cjs';
+export type { TreeSelectNode, TreeSelectCheckStrategy, TreeSelectValueStrategy, TreeSelectFilter, } from './types.cjs';

package/dist/tree-select/index.d.ts

@@ -0,0 +1,11 @@
+export { SkdxTreeSelect, defaultTreeSelectFilter, defaultGetMatchCountLabel } from './TreeSelect.js';
+export { SkdxTreeSelectTrigger } from './TreeSelectTrigger.js';
+export { SkdxTreeSelectValue } from './TreeSelectValue.js';
+export { SkdxTreeSelectPortal } from './TreeSelectPortal.js';
+export { SkdxTreeSelectContent } from './TreeSelectContent.js';
+export { SkdxTreeSelectTree } from './TreeSelectTree.js';
+export { SkdxTreeSelectItem } from './TreeSelectItem.js';
+export { SkdxTreeSelectItemIndicator } from './TreeSelectItemIndicator.js';
+export { SkdxTreeSelectEmpty } from './TreeSelectEmpty.js';
+export { SkdxTreeSelectInput } from './TreeSelectInput.js';
+export type { TreeSelectNode, TreeSelectCheckStrategy, TreeSelectValueStrategy, TreeSelectFilter, } from './types.js';

package/dist/tree-select/index.js

@@ -0,0 +1 @@
+import{SkdxTreeSelect as r,defaultTreeSelectFilter as o,defaultGetMatchCountLabel as S}from"./TreeSelect.js";import{SkdxTreeSelectTrigger as x}from"./TreeSelectTrigger.js";import{SkdxTreeSelectValue as T}from"./TreeSelectValue.js";import{SkdxTreeSelectPortal as d}from"./TreeSelectPortal.js";import{SkdxTreeSelectContent as f}from"./TreeSelectContent.js";import{SkdxTreeSelectTree as a}from"./TreeSelectTree.js";import{SkdxTreeSelectItem as n}from"./TreeSelectItem.js";import{SkdxTreeSelectItemIndicator as g}from"./TreeSelectItemIndicator.js";import{SkdxTreeSelectEmpty as I}from"./TreeSelectEmpty.js";import{SkdxTreeSelectInput as h}from"./TreeSelectInput.js";export{r as SkdxTreeSelect,f as SkdxTreeSelectContent,I as SkdxTreeSelectEmpty,h as SkdxTreeSelectInput,n as SkdxTreeSelectItem,g as SkdxTreeSelectItemIndicator,d as SkdxTreeSelectPortal,a as SkdxTreeSelectTree,x as SkdxTreeSelectTrigger,T as SkdxTreeSelectValue,S as defaultGetMatchCountLabel,o as defaultTreeSelectFilter};

package/dist/tree-select/types.cjs

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

package/dist/tree-select/types.d.cts

@@ -0,0 +1,53 @@
+/**
+ * One node of a `<skdx-tree-select>`'s `collection`. Plain data, not elements:
+ * cascading check state, `value-strategy` projection, and filtering all need to
+ * see branches that are collapsed (and therefore not rendered), which a
+ * children-based tree cannot offer.
+ */
+export interface TreeSelectNode {
+    /** Unique identifier across the whole collection — what lands in `value`, and what every event names. */
+    value: string;
+    /**
+     * Human-readable text: rendered as the node's content, matched by `filter`,
+     * and shown by `<skdx-tree-select-value>`.
+     * @default undefined — falls back to `value`.
+     */
+    label?: string;
+    /**
+     * Excludes this node from checking, cascade propagation, keyboard
+     * navigation, and its parent's checked-ness calculation. Inherited by the
+     * whole subtree — a disabled branch cannot be toggled through its children.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Child nodes. A node with an empty (or absent) `children` is a leaf: it is
+     * not expandable and reports no `aria-expanded`.
+     * @default undefined — a leaf.
+     */
+    children?: TreeSelectNode[];
+}
+/**
+ * Whether checking a node propagates through its subtree. `'cascade'` makes
+ * the tree a tri-state checkbox tree: checking a parent checks every enabled
+ * descendant, and a partially-checked parent reports `aria-checked="mixed"`.
+ * `'independent'` disables propagation entirely — each node stands alone.
+ *
+ * Only meaningful while `multiple` is set; a single-select tree has one
+ * checked node by definition and never cascades.
+ */
+export type TreeSelectCheckStrategy = 'cascade' | 'independent';
+/**
+ * Which of the checked nodes are actually emitted in `value`.
+ *
+ * - `'all'` — every checked node, parents and descendants alike.
+ * - `'leaf'` — only checked leaves; branches are dropped.
+ * - `'shallowest'` — only the topmost fully-checked node of each branch,
+ *   collapsing a fully-checked subtree to the single node that implies it.
+ *
+ * Ignored (treated as `'all'`) under `check-strategy="independent"`, where no
+ * node implies any other and dropping one would silently lose a selection.
+ */
+export type TreeSelectValueStrategy = 'all' | 'leaf' | 'shallowest';
+/** Predicate deciding whether a node matches the current filter text. */
+export type TreeSelectFilter = (node: TreeSelectNode, inputValue: string) => boolean;

package/dist/tree-select/types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * One node of a `<skdx-tree-select>`'s `collection`. Plain data, not elements:
+ * cascading check state, `value-strategy` projection, and filtering all need to
+ * see branches that are collapsed (and therefore not rendered), which a
+ * children-based tree cannot offer.
+ */
+export interface TreeSelectNode {
+    /** Unique identifier across the whole collection — what lands in `value`, and what every event names. */
+    value: string;
+    /**
+     * Human-readable text: rendered as the node's content, matched by `filter`,
+     * and shown by `<skdx-tree-select-value>`.
+     * @default undefined — falls back to `value`.
+     */
+    label?: string;
+    /**
+     * Excludes this node from checking, cascade propagation, keyboard
+     * navigation, and its parent's checked-ness calculation. Inherited by the
+     * whole subtree — a disabled branch cannot be toggled through its children.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Child nodes. A node with an empty (or absent) `children` is a leaf: it is
+     * not expandable and reports no `aria-expanded`.
+     * @default undefined — a leaf.
+     */
+    children?: TreeSelectNode[];
+}
+/**
+ * Whether checking a node propagates through its subtree. `'cascade'` makes
+ * the tree a tri-state checkbox tree: checking a parent checks every enabled
+ * descendant, and a partially-checked parent reports `aria-checked="mixed"`.
+ * `'independent'` disables propagation entirely — each node stands alone.
+ *
+ * Only meaningful while `multiple` is set; a single-select tree has one
+ * checked node by definition and never cascades.
+ */
+export type TreeSelectCheckStrategy = 'cascade' | 'independent';
+/**
+ * Which of the checked nodes are actually emitted in `value`.
+ *
+ * - `'all'` — every checked node, parents and descendants alike.
+ * - `'leaf'` — only checked leaves; branches are dropped.
+ * - `'shallowest'` — only the topmost fully-checked node of each branch,
+ *   collapsing a fully-checked subtree to the single node that implies it.
+ *
+ * Ignored (treated as `'all'`) under `check-strategy="independent"`, where no
+ * node implies any other and dropping one would silently lose a selection.
+ */
+export type TreeSelectValueStrategy = 'all' | 'leaf' | 'shallowest';
+/** Predicate deciding whether a node matches the current filter text. */
+export type TreeSelectFilter = (node: TreeSelectNode, inputValue: string) => boolean;

package/dist/utils/live-announcer.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var a=(n,t)=>{for(var e in t)r(n,e,{get:t[e],enumerable:!0})},m=(n,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of c(t))!s.call(n,i)&&i!==e&&r(n,i,{get:()=>t[i],enumerable:!(o=u(t,i))||o.enumerable});return n};var f=n=>m(r({},"__esModule",{value:!0}),n);var C={};a(C,{ANNOUNCE_DEBOUNCE_MS:()=>p,announce:()=>x,clearAnnouncements:()=>A});module.exports=f(C);var p=150,l="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",d=new Map;function g(n){let t=d.get(n);if(t?.node.isConnected)return t;let e=document.createElement("div");e.setAttribute("aria-live",n),e.setAttribute("aria-atomic","true"),e.setAttribute("data-skdx-live-announcer",n),e.style.cssText=l,document.body.appendChild(e);let o={node:e,timer:void 0};return d.set(n,o),o}function x(n,t="polite"){if(typeof document>"u")return;let e=n.trim();if(!e)return;let o=g(t);clearTimeout(o.timer),o.timer=setTimeout(()=>{o.timer=void 0,o.node.textContent!==e&&(o.node.textContent=e)},150)}function A(n){for(let[t,e]of d)n!==void 0&&t!==n||(clearTimeout(e.timer),e.timer=void 0,e.node.textContent="")}0&&(module.exports={ANNOUNCE_DEBOUNCE_MS,announce,clearAnnouncements});

package/dist/utils/live-announcer.d.cts

@@ -0,0 +1,36 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/**
+ * How long {@link announce} waits before writing a message, so a burst of
+ * calls (a combobox re-filtering on every keystroke) collapses into the one
+ * announcement the user actually cares about instead of a queue of stale
+ * ones.
+ */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/**
+ * Announces `message` to screen readers through a process-wide `aria-live`
+ * region, without rendering anything into your own markup — for state changes
+ * that have no visible text of their own (a filtered result count, a
+ * re-sorted column). The region is created on first use, so nothing is added
+ * to the page until something is actually announced.
+ *
+ * Debounced by {@link ANNOUNCE_DEBOUNCE_MS} and deduplicated: only the last
+ * message in a burst is written, and a message identical to what the region
+ * already holds is skipped (writing the same text back is not a DOM change,
+ * so assistive tech would ignore it anyway). Empty/whitespace messages are
+ * ignored. No-ops when there is no `document` (SSR).
+ *
+ * @example
+ * ```js
+ * import { announce } from '@skdx/web-components';
+ * announce(`${results.length} results available`);
+ * announce('Upload failed', 'assertive');
+ * ```
+ */
+export declare function announce(message: string, politeness?: AnnouncePoliteness): void;
+/**
+ * Empties the live region(s) and drops any debounced message still waiting to
+ * be written — pass a politeness to clear just one. Mostly useful between
+ * tests, and when navigating away from the thing a pending message describes.
+ */
+export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;

package/dist/utils/live-announcer.d.ts

@@ -0,0 +1,36 @@
+/** Which of the two singleton live regions a message is routed to. */
+export type AnnouncePoliteness = 'polite' | 'assertive';
+/**
+ * How long {@link announce} waits before writing a message, so a burst of
+ * calls (a combobox re-filtering on every keystroke) collapses into the one
+ * announcement the user actually cares about instead of a queue of stale
+ * ones.
+ */
+export declare const ANNOUNCE_DEBOUNCE_MS = 150;
+/**
+ * Announces `message` to screen readers through a process-wide `aria-live`
+ * region, without rendering anything into your own markup — for state changes
+ * that have no visible text of their own (a filtered result count, a
+ * re-sorted column). The region is created on first use, so nothing is added
+ * to the page until something is actually announced.
+ *
+ * Debounced by {@link ANNOUNCE_DEBOUNCE_MS} and deduplicated: only the last
+ * message in a burst is written, and a message identical to what the region
+ * already holds is skipped (writing the same text back is not a DOM change,
+ * so assistive tech would ignore it anyway). Empty/whitespace messages are
+ * ignored. No-ops when there is no `document` (SSR).
+ *
+ * @example
+ * ```js
+ * import { announce } from '@skdx/web-components';
+ * announce(`${results.length} results available`);
+ * announce('Upload failed', 'assertive');
+ * ```
+ */
+export declare function announce(message: string, politeness?: AnnouncePoliteness): void;
+/**
+ * Empties the live region(s) and drops any debounced message still waiting to
+ * be written — pass a politeness to clear just one. Mostly useful between
+ * tests, and when navigating away from the thing a pending message describes.
+ */
+export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;

package/dist/utils/live-announcer.js

@@ -0,0 +1 @@
+var u=150,r="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",i=new Map;function d(n){let o=i.get(n);if(o?.node.isConnected)return o;let e=document.createElement("div");e.setAttribute("aria-live",n),e.setAttribute("aria-atomic","true"),e.setAttribute("data-skdx-live-announcer",n),e.style.cssText=r,document.body.appendChild(e);let t={node:e,timer:void 0};return i.set(n,t),t}function c(n,o="polite"){if(typeof document>"u")return;let e=n.trim();if(!e)return;let t=d(o);clearTimeout(t.timer),t.timer=setTimeout(()=>{t.timer=void 0,t.node.textContent!==e&&(t.node.textContent=e)},150)}function s(n){for(let[o,e]of i)n!==void 0&&o!==n||(clearTimeout(e.timer),e.timer=void 0,e.node.textContent="")}export{u as ANNOUNCE_DEBOUNCE_MS,c as announce,s as clearAnnouncements};

package/dist/utils/portal.cjs

@@ -0,0 +1,5 @@
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(i,e)=>{for(var o in e)n(i,o,{get:e[o],enumerable:!0})},C=(i,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!u.call(i,t)&&t!==o&&n(i,t,{get:()=>e[t],enumerable:!(r=c(e,t))||r.enumerable});return i};var f=i=>C(n({},"__esModule",{value:!0}),i),h=(i,e,o,r)=>{for(var t=r>1?void 0:r?c(e,o):e,l=i.length-1,a;l>=0;l--)(a=i[l])&&(t=(r?a(e,o,t):a(t))||t);return r&&t&&n(e,o,t),t};var y={};b(y,{SkdxPortal:()=>s});module.exports=f(y);var d=require("lit"),p=require("lit/decorators.js"),m=require("../internal/define.cjs");var s=class extends d.LitElement{constructor(){super(...arguments);this.container=null;this.host=document.createElement("div");this.observer=new MutationObserver(()=>this.moveChildren())}connectedCallback(){super.connectedCallback(),this.host.setAttribute("data-skdx-portal",""),this.host.portalOrigin=this,(this.container??document.body).appendChild(this.host),this.moveChildren(),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer.disconnect(),this.host.remove(),super.disconnectedCallback()}updated(o){o.has("container")&&(this.container??document.body).appendChild(this.host)}moveChildren(){for(;this.firstChild;)this.host.appendChild(this.firstChild)}render(){return null}};s.styles=d.css`
+    :host {
+      display: contents;
+    }
+  `,h([(0,p.property)({attribute:!1})],s.prototype,"container",2),s=h([(0,m.customElement)("skdx-portal")],s);0&&(module.exports={SkdxPortal});

package/dist/utils/portal.d.cts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import type { SkdxPortalHostElement } from '../internal/closest.cjs';
+/**
+ * `<skdx-portal>` — moves its children into another part of the DOM
+ * (`document.body` by default), so overlay content escapes clipping/`overflow:
+ * hidden` ancestors and any ancestor `transform`/`filter`/`contain` that would
+ * otherwise become the containing block for `position: fixed` descendants.
+ *
+ * The counterpart to React's `<Portal>`, Vue's `<Teleport>`, Svelte's
+ * `use:portal`, and Angular's `[skdxPortal]`, and the base class every
+ * per-family `<skdx-*-portal>` extends — those add nothing but their tag name,
+ * because the per-family behaviour React's portals carry (mounting only while
+ * open) has no counterpart here: a Web Components part never unmounts, it
+ * hides itself with `hidden`.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` appended to `container`.
+ * Moving the host itself would be simpler, but it would then survive its own
+ * parent's removal — the browser can only remove a node from the parent it
+ * actually has. Keeping the host in place means `disconnectedCallback` fires
+ * normally and takes the portalled content with it.
+ *
+ * Children added later are moved too (a `MutationObserver` watches the host),
+ * so it works with frameworks that populate their children asynchronously.
+ *
+ * @example
+ * ```html
+ * <skdx-portal>
+ *   <div class="dialog">…</div>
+ * </skdx-portal>
+ * ```
+ */
+export declare class SkdxPortal extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * DOM node the children are moved into. Set as a property, not an attribute.
+     * @default document.body
+     */
+    container: Element | null;
+    /**
+     * The node the children actually live in — created once, reused across
+     * reconnects. `protected` so a per-family portal that has to mark its own
+     * host (`<skdx-floating-panel-portal>`) can do so before `connectedCallback`
+     * moves anything into it.
+     */
+    protected readonly host: SkdxPortalHostElement;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private moveChildren;
+    render(): null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-portal': SkdxPortal;
+    }
+}

package/dist/utils/portal.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import type { SkdxPortalHostElement } from '../internal/closest.js';
+/**
+ * `<skdx-portal>` — moves its children into another part of the DOM
+ * (`document.body` by default), so overlay content escapes clipping/`overflow:
+ * hidden` ancestors and any ancestor `transform`/`filter`/`contain` that would
+ * otherwise become the containing block for `position: fixed` descendants.
+ *
+ * The counterpart to React's `<Portal>`, Vue's `<Teleport>`, Svelte's
+ * `use:portal`, and Angular's `[skdxPortal]`, and the base class every
+ * per-family `<skdx-*-portal>` extends — those add nothing but their tag name,
+ * because the per-family behaviour React's portals carry (mounting only while
+ * open) has no counterpart here: a Web Components part never unmounts, it
+ * hides itself with `hidden`.
+ *
+ * The **host element stays where you wrote it** and the *children* are the
+ * things that move, into a `<div data-skdx-portal>` appended to `container`.
+ * Moving the host itself would be simpler, but it would then survive its own
+ * parent's removal — the browser can only remove a node from the parent it
+ * actually has. Keeping the host in place means `disconnectedCallback` fires
+ * normally and takes the portalled content with it.
+ *
+ * Children added later are moved too (a `MutationObserver` watches the host),
+ * so it works with frameworks that populate their children asynchronously.
+ *
+ * @example
+ * ```html
+ * <skdx-portal>
+ *   <div class="dialog">…</div>
+ * </skdx-portal>
+ * ```
+ */
+export declare class SkdxPortal extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * DOM node the children are moved into. Set as a property, not an attribute.
+     * @default document.body
+     */
+    container: Element | null;
+    /**
+     * The node the children actually live in — created once, reused across
+     * reconnects. `protected` so a per-family portal that has to mark its own
+     * host (`<skdx-floating-panel-portal>`) can do so before `connectedCallback`
+     * moves anything into it.
+     */
+    protected readonly host: SkdxPortalHostElement;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private moveChildren;
+    render(): null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-portal': SkdxPortal;
+    }
+}

package/dist/utils/portal.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(s,i,o,r)=>{for(var e=r>1?void 0:r?h(i,o):i,n=s.length-1,d;n>=0;n--)(d=s[n])&&(e=(r?d(i,o,e):d(e))||e);return r&&e&&a(i,o,e),e};import{css as c,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var t=class extends p{constructor(){super(...arguments);this.container=null;this.host=document.createElement("div");this.observer=new MutationObserver(()=>this.moveChildren())}connectedCallback(){super.connectedCallback(),this.host.setAttribute("data-skdx-portal",""),this.host.portalOrigin=this,(this.container??document.body).appendChild(this.host),this.moveChildren(),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer.disconnect(),this.host.remove(),super.disconnectedCallback()}updated(o){o.has("container")&&(this.container??document.body).appendChild(this.host)}moveChildren(){for(;this.firstChild;)this.host.appendChild(this.firstChild)}render(){return null}};t.styles=c`
+    :host {
+      display: contents;
+    }
+  `,l([m({attribute:!1})],t.prototype,"container",2),t=l([v("skdx-portal")],t);export{t as SkdxPortal};

package/dist/utils/visually-hidden.cjs

@@ -0,0 +1,8 @@
+"use strict";var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var g=(r,e)=>{for(var o in e)p(r,o,{get:e[o],enumerable:!0})},v=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!w.call(r,t)&&t!==o&&p(r,t,{get:()=>e[t],enumerable:!(s=m(e,t))||s.enumerable});return r};var f=r=>v(p({},"__esModule",{value:!0}),r),c=(r,e,o,s)=>{for(var t=s>1?void 0:s?m(e,o):e,i=r.length-1,l;i>=0;i--)(l=r[i])&&(t=(s?l(e,o,t):l(t))||t);return s&&t&&p(e,o,t),t};var x={};g(x,{SkdxVisuallyHidden:()=>a});module.exports=f(x);var n=require("lit"),d=require("../internal/define.cjs");var a=class extends n.LitElement{render(){return n.html`<span
+      style="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;"
+      ><slot></slot
+    ></span>`}};a.styles=n.css`
+    :host {
+      display: contents;
+    }
+  `,a=c([(0,d.customElement)("skdx-visually-hidden")],a);0&&(module.exports={SkdxVisuallyHidden});

package/dist/utils/visually-hidden.d.cts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-visually-hidden>` — renders its slotted content off-screen but keeps
+ * it in the accessibility tree, for text a screen reader should announce
+ * without it being visible (an icon-only button's label, say).
+ *
+ * Uses the clip-rect technique rather than `display: none`/`visibility:
+ * hidden`/`hidden`, all three of which would also remove the content from the
+ * accessibility tree and defeat the point. The declarations sit inline on the
+ * inner `<span>` rather than in `static styles`, so the hiding survives even
+ * where adopted stylesheets don't apply, and no `::part` override can
+ * accidentally un-hide it.
+ *
+ * @example
+ * ```html
+ * <button>
+ *   <skdx-visually-hidden>Close</skdx-visually-hidden>
+ *   <svg aria-hidden="true">…</svg>
+ * </button>
+ * ```
+ */
+export declare class SkdxVisuallyHidden extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-visually-hidden': SkdxVisuallyHidden;
+    }
+}

package/dist/utils/visually-hidden.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-visually-hidden>` — renders its slotted content off-screen but keeps
+ * it in the accessibility tree, for text a screen reader should announce
+ * without it being visible (an icon-only button's label, say).
+ *
+ * Uses the clip-rect technique rather than `display: none`/`visibility:
+ * hidden`/`hidden`, all three of which would also remove the content from the
+ * accessibility tree and defeat the point. The declarations sit inline on the
+ * inner `<span>` rather than in `static styles`, so the hiding survives even
+ * where adopted stylesheets don't apply, and no `::part` override can
+ * accidentally un-hide it.
+ *
+ * @example
+ * ```html
+ * <button>
+ *   <skdx-visually-hidden>Close</skdx-visually-hidden>
+ *   <svg aria-hidden="true">…</svg>
+ * </button>
+ * ```
+ */
+export declare class SkdxVisuallyHidden extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-visually-hidden': SkdxVisuallyHidden;
+    }
+}

package/dist/utils/visually-hidden.js

@@ -0,0 +1,8 @@
+var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(s,r,a,o)=>{for(var e=o>1?void 0:o?m(r,a):r,n=s.length-1,p;n>=0;n--)(p=s[n])&&(e=(o?p(r,a,e):p(e))||e);return o&&e&&l(r,a,e),e};import{css as c,html as d,LitElement as h}from"lit";import{customElement as w}from"../internal/define.js";var t=class extends h{render(){return d`<span
+      style="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;"
+      ><slot></slot
+    ></span>`}};t.styles=c`
+    :host {
+      display: contents;
+    }
+  `,t=i([w("skdx-visually-hidden")],t);export{t as SkdxVisuallyHidden};