@skdx/web-components 0.26.0 → 0.28.0

package/dist/pagination/PaginationLink.cjs

@@ -1,9 +0,0 @@
-"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var m=(i,t)=>{for(var r in t)d(i,r,{get:t[r],enumerable:!0})},A=(i,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!v.call(i,e)&&e!==r&&d(i,e,{get:()=>t[e],enumerable:!(a=b(t,e))||a.enumerable});return i};var f=i=>A(d({},"__esModule",{value:!0}),i),l=(i,t,r,a)=>{for(var e=a>1?void 0:a?b(t,r):t,n=i.length-1,h;n>=0;n--)(h=i[n])&&(e=(a?h(t,r,e):h(e))||e);return a&&e&&d(t,r,e),e};var g={};m(g,{SkdxPaginationLink:()=>s});module.exports=f(g);var o=require("lit"),c=require("lit/decorators.js"),p=require("../internal/define.cjs");var s=class extends o.LitElement{constructor(){super(...arguments);this.page=1;this.disabled=!1;this.rootEl=null;this._handleClick=()=>{this.disabled||this.rootEl?.setPage(this.page)}}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-pagination"),this.setAttribute("data-skdx-pagination-item",""),this.addEventListener("click",this._handleClick),this._sync()}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}refresh(){this._sync()}get active(){return this.isActive??this.rootEl?.getPage()===this.page}_sync(){this.setAttribute("role","button"),this.active?(this.setAttribute("aria-current","page"),this.setAttribute("data-state","active")):(this.removeAttribute("aria-current"),this.removeAttribute("data-state")),this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0"))}updated(){this._sync()}render(){return o.html`<slot>${this.page}</slot>`}};s.styles=o.css`
-    :host {
-      display: inline-block;
-      cursor: pointer;
-    }
-    :host([data-disabled]) {
-      cursor: default;
-    }
-  `,l([(0,c.property)({type:Number})],s.prototype,"page",2),l([(0,c.property)({type:Boolean,attribute:"is-active",reflect:!0})],s.prototype,"isActive",2),l([(0,c.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=l([(0,p.customElement)("skdx-pagination-link","pagination","link")],s);0&&(module.exports={SkdxPaginationLink});

package/dist/pagination/PaginationLink.d.cts

@@ -1,53 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-pagination-link>` — a page button. Sets `role="button"`,
- * `data-skdx-pagination-item` (so the root's roving focus can find it),
- * `aria-current="page"` and `data-state="active"` when `is-active`, and
- * `disabled`/`data-disabled` when disabled — on itself (the host) rather
- * than an inner shadow `<button>`, matching `<skdx-tabs-trigger>`'s
- * host-as-control convention. Clicking it calls the root's `setPage` with
- * its `page`. Falls back to `page` as its label when no children are given,
- * via native `<slot>` fallback content. Must be used inside
- * `<skdx-pagination>`.
- *
- * @example
- * ```html
- * <skdx-pagination-link page="3" is-active>3</skdx-pagination-link>
- * ```
- */
-export declare class SkdxPaginationLink extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** Page number this button navigates to when clicked. */
-    page: number;
-    /**
-     * Marks this page as the currently selected one. Left unset it is *derived*
-     * — the root already knows which page it is on, and asking the consumer to
-     * recompute `page === root.getPage()` is asking them to reimplement the
-     * component's own state. Undeclared it marked no link active at all: no
-     * `data-state="active"` for the skin to paint and, worse, no
-     * `aria-current="page"` anywhere, so the strip never told assistive
-     * technology which page you were on. An explicit `is-active` still wins,
-     * for the split list/detail case where the highlighted page is not the
-     * loaded one. Mirrors React's `isActive ?? context.page === page`.
-     * @default undefined
-     */
-    isActive?: boolean;
-    /** Disables the link, excluding it from the tab order and click handling. @default false */
-    disabled: boolean;
-    private rootEl;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /** @internal Called by the parent `<skdx-pagination>` whenever the current page changes. */
-    refresh(): void;
-    /** Explicit `is-active` if the consumer set one, otherwise the root's current page. */
-    private get active();
-    private _sync;
-    private readonly _handleClick;
-    protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-pagination-link': SkdxPaginationLink;
-    }
-}

package/dist/pagination/PaginationLink.d.ts

@@ -1,53 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-pagination-link>` — a page button. Sets `role="button"`,
- * `data-skdx-pagination-item` (so the root's roving focus can find it),
- * `aria-current="page"` and `data-state="active"` when `is-active`, and
- * `disabled`/`data-disabled` when disabled — on itself (the host) rather
- * than an inner shadow `<button>`, matching `<skdx-tabs-trigger>`'s
- * host-as-control convention. Clicking it calls the root's `setPage` with
- * its `page`. Falls back to `page` as its label when no children are given,
- * via native `<slot>` fallback content. Must be used inside
- * `<skdx-pagination>`.
- *
- * @example
- * ```html
- * <skdx-pagination-link page="3" is-active>3</skdx-pagination-link>
- * ```
- */
-export declare class SkdxPaginationLink extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** Page number this button navigates to when clicked. */
-    page: number;
-    /**
-     * Marks this page as the currently selected one. Left unset it is *derived*
-     * — the root already knows which page it is on, and asking the consumer to
-     * recompute `page === root.getPage()` is asking them to reimplement the
-     * component's own state. Undeclared it marked no link active at all: no
-     * `data-state="active"` for the skin to paint and, worse, no
-     * `aria-current="page"` anywhere, so the strip never told assistive
-     * technology which page you were on. An explicit `is-active` still wins,
-     * for the split list/detail case where the highlighted page is not the
-     * loaded one. Mirrors React's `isActive ?? context.page === page`.
-     * @default undefined
-     */
-    isActive?: boolean;
-    /** Disables the link, excluding it from the tab order and click handling. @default false */
-    disabled: boolean;
-    private rootEl;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /** @internal Called by the parent `<skdx-pagination>` whenever the current page changes. */
-    refresh(): void;
-    /** Explicit `is-active` if the consumer set one, otherwise the root's current page. */
-    private get active();
-    private _sync;
-    private readonly _handleClick;
-    protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-pagination-link': SkdxPaginationLink;
-    }
-}

package/dist/pagination/PaginationLink.js

@@ -1,9 +0,0 @@
-var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(a,i,o,r)=>{for(var e=r>1?void 0:r?h(i,o):i,l=a.length-1,d;l>=0;l--)(d=a[l])&&(e=(r?d(i,o,e):d(e))||e);return r&&e&&n(i,o,e),e};import{css as b,html as p,LitElement as u}from"lit";import{property as c}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var t=class extends u{constructor(){super(...arguments);this.page=1;this.disabled=!1;this.rootEl=null;this._handleClick=()=>{this.disabled||this.rootEl?.setPage(this.page)}}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-pagination"),this.setAttribute("data-skdx-pagination-item",""),this.addEventListener("click",this._handleClick),this._sync()}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}refresh(){this._sync()}get active(){return this.isActive??this.rootEl?.getPage()===this.page}_sync(){this.setAttribute("role","button"),this.active?(this.setAttribute("aria-current","page"),this.setAttribute("data-state","active")):(this.removeAttribute("aria-current"),this.removeAttribute("data-state")),this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0"))}updated(){this._sync()}render(){return p`<slot>${this.page}</slot>`}};t.styles=b`
-    :host {
-      display: inline-block;
-      cursor: pointer;
-    }
-    :host([data-disabled]) {
-      cursor: default;
-    }
-  `,s([c({type:Number})],t.prototype,"page",2),s([c({type:Boolean,attribute:"is-active",reflect:!0})],t.prototype,"isActive",2),s([c({type:Boolean,reflect:!0})],t.prototype,"disabled",2),t=s([v("skdx-pagination-link","pagination","link")],t);export{t as SkdxPaginationLink};

package/dist/select/SelectOption.cjs

@@ -1,5 +0,0 @@
-"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},k=(s,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of m(t))!f.call(s,i)&&i!==e&&d(s,i,{get:()=>t[i],enumerable:!(a=u(t,i))||a.enumerable});return s};var x=s=>k(d({},"__esModule",{value:!0}),s),l=(s,t,e,a)=>{for(var i=a>1?void 0:a?u(t,e):t,h=s.length-1,c;h>=0;h--)(c=s[h])&&(i=(a?c(t,e,i):c(i))||i);return a&&i&&d(t,e,i),i};var E={};y(E,{SkdxSelectOption:()=>r});module.exports=x(E);var o=require("lit"),n=require("lit/decorators.js"),v=require("../internal/closest.cjs"),p=require("../internal/define.cjs"),b=require("../internal/styles.cjs");var r=class extends o.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.syncSelectedState();this.handleClick=()=>{this.disabled||!this.root||(this.root.selectItem(this.value),!this.root.multiple&&(this.root.setOpen(!1),this.root.focusTrigger()))};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleClick())};this.handlePointerEnter=()=>{this.disabled||this.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.root=(0,v.closestThroughPortal)(this,"skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.syncSelectedState(),this.registerLabel()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(e){(e.has("disabled")||e.has("value"))&&this.syncSelectedState(),(e.has("value")||e.has("textValue"))&&this.registerLabel()}syncSelectedState(){let e=this.root?.isSelected(this.value)??!1;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"checked":"unchecked"),this.disabled?(this.setAttribute("data-disabled",""),this.removeAttribute("tabindex")):(this.removeAttribute("data-disabled"),this.tabIndex=-1)}registerLabel(){this.root?.registerOptionLabel(this.value,this.textValue??this.textContent?.trim()??""),this.textValue===void 0?this.removeAttribute("data-text-value"):this.setAttribute("data-text-value",this.textValue)}render(){return o.html`<slot></slot>`}};r.styles=[b.hiddenHostStyles,o.css`
-      :host {
-        display: block;
-      }
-    `],l([(0,n.property)({type:String})],r.prototype,"value",2),l([(0,n.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),l([(0,n.property)({type:String,attribute:"text-value"})],r.prototype,"textValue",2),r=l([(0,p.customElement)("skdx-select-option","select","item")],r);0&&(module.exports={SkdxSelectOption});

package/dist/select/SelectOption.d.cts

@@ -1,44 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-select-option>` — a single selectable option within a
- * `<skdx-select-content>`. Folds React's `SelectItem` + `SelectItemText` +
- * `SelectItemIndicator` into one part: light-DOM content IS the option's
- * label (captured automatically for `<skdx-select-value>`), and
- * `data-state="checked"` is the styling hook for a selected indicator
- * instead of a separate part.
- *
- * `role`, `aria-selected`, `data-state`, `data-disabled`, and `tabindex` are
- * set directly on this host element (not inside shadow DOM) so
- * `<skdx-select-content>`'s light-DOM `querySelectorAll('[role="option"]')`
- * can find them. Click, Enter, or Space selects the option and closes the
- * listbox — or, while the root is `multiple`, toggles it and leaves the
- * listbox open with focus on it.
- */
-export declare class SkdxSelectOption extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /** Unique identifier committed to the select root's value when this option is chosen. */
-    value: string;
-    /** Excludes this option from selection and keyboard/typeahead navigation. */
-    disabled: boolean;
-    /**
-     * Text used for the trigger label; defaults to the option's text content.
-     * @default undefined — falls back to the option's rendered text content.
-     */
-    textValue?: string;
-    private root;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
-    private syncSelectedState;
-    private registerLabel;
-    private readonly handleClick;
-    private readonly handleKeyDown;
-    private readonly handlePointerEnter;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-select-option': SkdxSelectOption;
-    }
-}

package/dist/select/SelectOption.d.ts

@@ -1,44 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-select-option>` — a single selectable option within a
- * `<skdx-select-content>`. Folds React's `SelectItem` + `SelectItemText` +
- * `SelectItemIndicator` into one part: light-DOM content IS the option's
- * label (captured automatically for `<skdx-select-value>`), and
- * `data-state="checked"` is the styling hook for a selected indicator
- * instead of a separate part.
- *
- * `role`, `aria-selected`, `data-state`, `data-disabled`, and `tabindex` are
- * set directly on this host element (not inside shadow DOM) so
- * `<skdx-select-content>`'s light-DOM `querySelectorAll('[role="option"]')`
- * can find them. Click, Enter, or Space selects the option and closes the
- * listbox — or, while the root is `multiple`, toggles it and leaves the
- * listbox open with focus on it.
- */
-export declare class SkdxSelectOption extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /** Unique identifier committed to the select root's value when this option is chosen. */
-    value: string;
-    /** Excludes this option from selection and keyboard/typeahead navigation. */
-    disabled: boolean;
-    /**
-     * Text used for the trigger label; defaults to the option's text content.
-     * @default undefined — falls back to the option's rendered text content.
-     */
-    textValue?: string;
-    private root;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: Map<string, unknown>): void;
-    private syncSelectedState;
-    private registerLabel;
-    private readonly handleClick;
-    private readonly handleKeyDown;
-    private readonly handlePointerEnter;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-select-option': SkdxSelectOption;
-    }
-}

package/dist/select/SelectOption.js

@@ -1,5 +0,0 @@
-var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(o,s,e,a)=>{for(var i=a>1?void 0:a?c(s,e):s,l=o.length-1,d;l>=0;l--)(d=o[l])&&(i=(a?d(s,e,i):d(i))||i);return a&&i&&h(s,e,i),i};import{css as u,html as v,LitElement as p}from"lit";import{property as n}from"lit/decorators.js";import{closestThroughPortal as b}from"../internal/closest.js";import{customElement as m}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";var t=class extends p{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.syncSelectedState();this.handleClick=()=>{this.disabled||!this.root||(this.root.selectItem(this.value),!this.root.multiple&&(this.root.setOpen(!1),this.root.focusTrigger()))};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleClick())};this.handlePointerEnter=()=>{this.disabled||this.focus()}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","option"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.root=b(this,"skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate),this.syncSelectedState(),this.registerLabel()}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(e){(e.has("disabled")||e.has("value"))&&this.syncSelectedState(),(e.has("value")||e.has("textValue"))&&this.registerLabel()}syncSelectedState(){let e=this.root?.isSelected(this.value)??!1;this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"checked":"unchecked"),this.disabled?(this.setAttribute("data-disabled",""),this.removeAttribute("tabindex")):(this.removeAttribute("data-disabled"),this.tabIndex=-1)}registerLabel(){this.root?.registerOptionLabel(this.value,this.textValue??this.textContent?.trim()??""),this.textValue===void 0?this.removeAttribute("data-text-value"):this.setAttribute("data-text-value",this.textValue)}render(){return v`<slot></slot>`}};t.styles=[f,u`
-      :host {
-        display: block;
-      }
-    `],r([n({type:String})],t.prototype,"value",2),r([n({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([n({type:String,attribute:"text-value"})],t.prototype,"textValue",2),t=r([m("skdx-select-option","select","item")],t);export{t as SkdxSelectOption};