@skdx/web-components-blocks 0.1.0 → 0.35.0

package/dist/empty-state/EmptyState.d.ts

@@ -0,0 +1,69 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/text';
+/** Whether a consumer child bound for the default region is still waiting to be placed. */
+/**
+ * Placeholder block for a region with nothing to show — no content yet, no
+ * results, first use, or disconnected — composing a Heading, a Text
+ * description and consumer-supplied icon and actions.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-empty-state` on the host, then `__icon`, `__title`,
+ * `__description`, `__content` and `__actions`. `data-size` and `data-align`
+ * sit on the host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-empty-state
+ *   title="No invoices yet"
+ *   description="Invoices you create will show up here."
+ * >
+ *   <svg slot="icon"></svg>
+ *   <skdx-button slot="actions">Create invoice</skdx-button>
+ * </skdx-empty-state>
+ * ```
+ *
+ * @slot - Extra content rendered between the description and the actions region.
+ * @slot icon - Decorative illustration or glyph rendered above the title.
+ * @slot actions - Primary and secondary controls rendered below the content.
+ */
+export declare class SkdxEmptyState extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Heading text naming the empty region, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining why the region is empty.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, lowered or raised to fit the surrounding outline.
+     * @default 3
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Visual size rung, written to `data-size` on the host; the skin scales the icon, spacing and title by it.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Text and content alignment rung, written to `data-align` on the host.
+     * @default 'center'
+     */
+    align: 'center' | 'start' | (string & {});
+    /** Generated title id, so a consumer can name a surrounding landmark with it. */
+    private readonly titleId;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private get hasContent();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-empty-state': SkdxEmptyState;
+    }
+}

package/dist/empty-state/EmptyState.js

@@ -0,0 +1,29 @@
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,n,e,d)=>{for(var s=d>1?void 0:d?g(n,e):n,h=l.length-1,p;h>=0;h--)(p=l[h])&&(s=(d?p(n,e,s):p(s))||s);return d&&s&&m(n,e,s),s};import{html as a,LitElement as u,nothing as o}from"lit";import{property as r}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{hasUnslottedChild as y,placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/heading";import"@skdx/web-components/text";var c="data-skdx-empty-state-generated",k=0,t=class extends u{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}get hasContent(){return y(this,c)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),x(this,c,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return a`
+      ${this.hasSlotted("icon")?a`<div
+              class="skdx-empty-state__icon"
+              aria-hidden="true"
+              data-skdx-empty-state-generated
+            ></div>`:o}
+      <skdx-heading
+        class="skdx-empty-state__title"
+        as=${`h${this.headingLevel}`}
+        id=${this.titleId}
+        data-skdx-empty-state-generated
+        >${this.title??""}</skdx-heading
+      >
+      ${this.description?a`<skdx-text
+              class="skdx-empty-state__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-empty-state-generated
+              >${this.description}</skdx-text
+            >`:o}
+      ${this.hasContent?a`<div
+              class="skdx-empty-state__content"
+              data-skdx-empty-state-generated
+            ></div>`:o}
+      ${this.hasSlotted("actions")?a`<div
+              class="skdx-empty-state__actions"
+              data-skdx-empty-state-generated
+            ></div>`:o}
+    `}};i([r({type:String})],t.prototype,"title",2),i([r({type:String})],t.prototype,"description",2),i([r({type:Number,attribute:"heading-level"})],t.prototype,"headingLevel",2),i([r({type:String})],t.prototype,"size",2),i([r({type:String})],t.prototype,"align",2),t=i([v("skdx-empty-state","empty-state","root")],t);export{t as SkdxEmptyState};

package/dist/empty-state/index.cjs

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

package/dist/empty-state/index.d.cts

@@ -0,0 +1 @@
+export { SkdxEmptyState } from './EmptyState.cjs';

package/dist/empty-state/index.d.ts

@@ -0,0 +1 @@
+export { SkdxEmptyState } from './EmptyState.js';

package/dist/empty-state/index.js

@@ -0,0 +1 @@
+import{SkdxEmptyState as m}from"./EmptyState.js";export{m as SkdxEmptyState};

package/dist/filter-bar/FilterBar.cjs

@@ -0,0 +1,44 @@
+"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var x=(s,r)=>{for(var e in r)o(s,e,{get:r[e],enumerable:!0})},k=(s,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of g(r))!m.call(s,a)&&a!==e&&o(s,a,{get:()=>r[a],enumerable:!(t=p(r,a))||t.enumerable});return s};var y=s=>k(o({},"__esModule",{value:!0}),s),n=(s,r,e,t)=>{for(var a=t>1?void 0:t?p(r,e):r,u=s.length-1,b;u>=0;u--)(b=s[u])&&(a=(t?b(r,e,a):b(a))||a);return t&&a&&o(r,e,a),a};var S={};x(S,{SkdxFilterBar:()=>l});module.exports=y(S);var i=require("lit"),d=require("lit/decorators.js"),f=require("../internal/define.cjs"),c=require("../internal/events.cjs"),h=require("../internal/slots.cjs"),_=require("@skdx/web-components/button"),L=require("@skdx/web-components/tag-group"),E=require("@skdx/web-components/text-field");var v="data-skdx-filter-bar-generated",l=class extends i.LitElement{constructor(){super(...arguments);this.label="Filters";this.defaultSearchValue="";this.clearSearchLabel="Clear search";this.activeFiltersLabel="Active filters";this.clearLabel="Clear filters";this.handleSearchValueChange=e=>{e.stopPropagation();let t=e.detail;this.uncontrolledSearchValue=t,this.requestUpdate(),(0,c.emit)(this,"search-value-change",{value:t}),this.syncSearchField()};this.handleRemove=e=>{e.stopPropagation();let{index:t}=e.detail,a=(this.activeFilters??[])[t];a&&(0,c.emit)(this,"remove-filter",a)};this.handleClear=()=>{(0,c.emit)(this,"clear")}}createRenderRoot(){return this}get searchText(){return this.searchValue??this.uncontrolledSearchValue??this.defaultSearchValue}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-filter-bar__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}get hasFilters(){return(0,h.hasUnslottedChild)(this,v)||(this.region("filters")?.hasChildNodes()??!1)}syncSearchField(){let e=this.querySelector(".skdx-filter-bar__search > skdx-text-field");if(!e)return;let t=this.searchText;e.value!==t&&(e.value=t);let a=e.querySelector("input");a&&a.value!==t&&(a.value=t)}updated(){this.setAttribute("aria-label",this.label),this.syncSearchField(),(0,h.placeSlotted)(this,v,{actions:this.region("actions")},this.region("filters"))}render(){let e=this.activeFilters??[];return i.html`
+      ${this.searchLabel?i.html`<div
+              class="skdx-filter-bar__search"
+              data-skdx-filter-bar-generated
+            >
+              <skdx-text-field @value-change=${this.handleSearchValueChange}>
+                <skdx-text-field-input
+                  type="search"
+                  aria-label=${this.searchLabel??i.nothing}
+                  placeholder=${this.searchPlaceholder??i.nothing}
+                ></skdx-text-field-input>
+                <skdx-text-field-clear-button
+                  label=${this.clearSearchLabel}
+                ></skdx-text-field-clear-button>
+              </skdx-text-field>
+            </div>`:i.nothing}
+      ${this.hasFilters?i.html`<div
+              class="skdx-filter-bar__filters"
+              data-skdx-filter-bar-generated
+            ></div>`:i.nothing}
+      ${this.hasSlotted("actions")?i.html`<div
+              class="skdx-filter-bar__actions"
+              data-skdx-filter-bar-generated
+            ></div>`:i.nothing}
+      ${e.length>0?i.html`<div
+              class="skdx-filter-bar__active"
+              data-skdx-filter-bar-generated
+            >
+              <skdx-tag-group
+                class="skdx-filter-bar__tags"
+                aria-label=${this.activeFiltersLabel}
+                removable
+                .tags=${e.map(t=>({value:t.id,label:t.label}))}
+                @remove=${this.handleRemove}
+              ></skdx-tag-group>
+              <skdx-button
+                class="skdx-filter-bar__clear"
+                .variant=${"ghost"}
+                .size=${"sm"}
+                @click=${this.handleClear}
+                >${this.clearLabel}</skdx-button
+              >
+            </div>`:i.nothing}
+    `}};n([(0,d.property)({type:String})],l.prototype,"label",2),n([(0,d.property)({type:String,attribute:"search-label"})],l.prototype,"searchLabel",2),n([(0,d.property)({type:String,attribute:"search-placeholder"})],l.prototype,"searchPlaceholder",2),n([(0,d.property)({type:String,attribute:"search-value"})],l.prototype,"searchValue",2),n([(0,d.property)({type:String,attribute:"default-search-value"})],l.prototype,"defaultSearchValue",2),n([(0,d.property)({type:String,attribute:"clear-search-label"})],l.prototype,"clearSearchLabel",2),n([(0,d.property)({attribute:!1})],l.prototype,"activeFilters",2),n([(0,d.property)({type:String,attribute:"active-filters-label"})],l.prototype,"activeFiltersLabel",2),n([(0,d.property)({type:String,attribute:"clear-label"})],l.prototype,"clearLabel",2),l=n([(0,f.customElement)("skdx-filter-bar","filter-bar","root")],l);0&&(module.exports={SkdxFilterBar});

package/dist/filter-bar/FilterBar.d.cts

@@ -0,0 +1,110 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/tag-group';
+import '@skdx/web-components/text-field';
+/** One applied filter rendered as a removable tag by `<skdx-filter-bar>`. */
+export interface SkdxFilterBarFilter {
+    /** Unique identifier, carried as the tag's value and handed back with `remove-filter`. */
+    id: string;
+    /** Text rendered on the tag and read by its remove control's accessible name. */
+    label: string;
+}
+/** Whether a consumer child bound for the filters region is still waiting to be placed. */
+/**
+ * Filtering surface above a table, list, card grid or report: a search field,
+ * the consumer's filter controls, the applied filters as removable tags, and a
+ * clear action. Composes TextField, TagGroup and Button.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-filter-bar` on the host, then `__search`, `__filters`,
+ * `__actions`, `__active`, `__tags` and `__clear`.
+ *
+ * @example
+ * ```html
+ * <skdx-filter-bar
+ *   id="bar"
+ *   search-label="Search invoices"
+ * >
+ *   <skdx-select aria-label="Status"></skdx-select>
+ *   <skdx-button slot="actions">Save view</skdx-button>
+ * </skdx-filter-bar>
+ * <script>
+ *   document.getElementById('bar').activeFilters = [{ id: 'status', label: 'Status: Overdue' }];
+ * </script>
+ * ```
+ *
+ * @slot - The consumer's filter controls, laid out in the filters region.
+ * @slot actions - Controls rendered at the end of the bar, such as a "Save view" button.
+ * @fires search-value-change - Fires with the new text whenever the search field changes, controlled or not.
+ * @fires remove-filter - Fires with the removed filter when its tag's remove control is activated.
+ * @fires clear - Fires when the clear-filters button is activated while filters are shown.
+ */
+export declare class SkdxFilterBar extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Accessible name of the root region, written to `aria-label`.
+     * @default 'Filters'
+     */
+    label: string;
+    /**
+     * Accessible name of the search field; providing it renders the search region.
+     * @default undefined — no search region renders.
+     */
+    searchLabel?: string | undefined;
+    /**
+     * Placeholder shown in the empty search field.
+     * @default undefined — no placeholder renders.
+     */
+    searchPlaceholder?: string | undefined;
+    /**
+     * Current search text, for controlled usage; pair it with `search-value-change`.
+     * @default undefined — uncontrolled, tracking its own value internally.
+     */
+    searchValue?: string | undefined;
+    /**
+     * Initial search text, for uncontrolled usage — seeds the internally tracked value.
+     * @default ''
+     */
+    defaultSearchValue: string;
+    /**
+     * Accessible name of the search field's clear button.
+     * @default 'Clear search'
+     */
+    clearSearchLabel: string;
+    /**
+     * The applied filters, in display order, rendered as removable tags.
+     * @default undefined — no active region renders.
+     */
+    activeFilters?: readonly SkdxFilterBarFilter[] | undefined;
+    /**
+     * Accessible name of the active-filters tag list.
+     * @default 'Active filters'
+     */
+    activeFiltersLabel: string;
+    /**
+     * Text rendered on the clear-filters button.
+     * @default 'Clear filters'
+     */
+    clearLabel: string;
+    /** What the search field last reported; outranked by `searchValue` whenever the consumer controls the text. */
+    private uncontrolledSearchValue?;
+    /** The text the search field must show right now, controlled or not. */
+    private get searchText();
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private get hasFilters();
+    private syncSearchField;
+    private readonly handleSearchValueChange;
+    private readonly handleRemove;
+    private readonly handleClear;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-filter-bar': SkdxFilterBar;
+    }
+}

package/dist/filter-bar/FilterBar.d.ts

@@ -0,0 +1,110 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/tag-group';
+import '@skdx/web-components/text-field';
+/** One applied filter rendered as a removable tag by `<skdx-filter-bar>`. */
+export interface SkdxFilterBarFilter {
+    /** Unique identifier, carried as the tag's value and handed back with `remove-filter`. */
+    id: string;
+    /** Text rendered on the tag and read by its remove control's accessible name. */
+    label: string;
+}
+/** Whether a consumer child bound for the filters region is still waiting to be placed. */
+/**
+ * Filtering surface above a table, list, card grid or report: a search field,
+ * the consumer's filter controls, the applied filters as removable tags, and a
+ * clear action. Composes TextField, TagGroup and Button.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-filter-bar` on the host, then `__search`, `__filters`,
+ * `__actions`, `__active`, `__tags` and `__clear`.
+ *
+ * @example
+ * ```html
+ * <skdx-filter-bar
+ *   id="bar"
+ *   search-label="Search invoices"
+ * >
+ *   <skdx-select aria-label="Status"></skdx-select>
+ *   <skdx-button slot="actions">Save view</skdx-button>
+ * </skdx-filter-bar>
+ * <script>
+ *   document.getElementById('bar').activeFilters = [{ id: 'status', label: 'Status: Overdue' }];
+ * </script>
+ * ```
+ *
+ * @slot - The consumer's filter controls, laid out in the filters region.
+ * @slot actions - Controls rendered at the end of the bar, such as a "Save view" button.
+ * @fires search-value-change - Fires with the new text whenever the search field changes, controlled or not.
+ * @fires remove-filter - Fires with the removed filter when its tag's remove control is activated.
+ * @fires clear - Fires when the clear-filters button is activated while filters are shown.
+ */
+export declare class SkdxFilterBar extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Accessible name of the root region, written to `aria-label`.
+     * @default 'Filters'
+     */
+    label: string;
+    /**
+     * Accessible name of the search field; providing it renders the search region.
+     * @default undefined — no search region renders.
+     */
+    searchLabel?: string | undefined;
+    /**
+     * Placeholder shown in the empty search field.
+     * @default undefined — no placeholder renders.
+     */
+    searchPlaceholder?: string | undefined;
+    /**
+     * Current search text, for controlled usage; pair it with `search-value-change`.
+     * @default undefined — uncontrolled, tracking its own value internally.
+     */
+    searchValue?: string | undefined;
+    /**
+     * Initial search text, for uncontrolled usage — seeds the internally tracked value.
+     * @default ''
+     */
+    defaultSearchValue: string;
+    /**
+     * Accessible name of the search field's clear button.
+     * @default 'Clear search'
+     */
+    clearSearchLabel: string;
+    /**
+     * The applied filters, in display order, rendered as removable tags.
+     * @default undefined — no active region renders.
+     */
+    activeFilters?: readonly SkdxFilterBarFilter[] | undefined;
+    /**
+     * Accessible name of the active-filters tag list.
+     * @default 'Active filters'
+     */
+    activeFiltersLabel: string;
+    /**
+     * Text rendered on the clear-filters button.
+     * @default 'Clear filters'
+     */
+    clearLabel: string;
+    /** What the search field last reported; outranked by `searchValue` whenever the consumer controls the text. */
+    private uncontrolledSearchValue?;
+    /** The text the search field must show right now, controlled or not. */
+    private get searchText();
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private get hasFilters();
+    private syncSearchField;
+    private readonly handleSearchValueChange;
+    private readonly handleRemove;
+    private readonly handleClear;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-filter-bar': SkdxFilterBar;
+    }
+}

package/dist/filter-bar/FilterBar.js

@@ -0,0 +1,44 @@
+var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(o,n,e,t)=>{for(var a=t>1?void 0:t?v(n,e):n,c=o.length-1,h;c>=0;c--)(h=o[c])&&(a=(t?h(n,e,a):h(a))||a);return t&&a&&p(n,e,a),a};import{html as d,LitElement as f,nothing as s}from"lit";import{property as l}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as m,placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/button";import"@skdx/web-components/tag-group";import"@skdx/web-components/text-field";var b="data-skdx-filter-bar-generated",r=class extends f{constructor(){super(...arguments);this.label="Filters";this.defaultSearchValue="";this.clearSearchLabel="Clear search";this.activeFiltersLabel="Active filters";this.clearLabel="Clear filters";this.handleSearchValueChange=e=>{e.stopPropagation();let t=e.detail;this.uncontrolledSearchValue=t,this.requestUpdate(),u(this,"search-value-change",{value:t}),this.syncSearchField()};this.handleRemove=e=>{e.stopPropagation();let{index:t}=e.detail,a=(this.activeFilters??[])[t];a&&u(this,"remove-filter",a)};this.handleClear=()=>{u(this,"clear")}}createRenderRoot(){return this}get searchText(){return this.searchValue??this.uncontrolledSearchValue??this.defaultSearchValue}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-filter-bar__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}get hasFilters(){return m(this,b)||(this.region("filters")?.hasChildNodes()??!1)}syncSearchField(){let e=this.querySelector(".skdx-filter-bar__search > skdx-text-field");if(!e)return;let t=this.searchText;e.value!==t&&(e.value=t);let a=e.querySelector("input");a&&a.value!==t&&(a.value=t)}updated(){this.setAttribute("aria-label",this.label),this.syncSearchField(),x(this,b,{actions:this.region("actions")},this.region("filters"))}render(){let e=this.activeFilters??[];return d`
+      ${this.searchLabel?d`<div
+              class="skdx-filter-bar__search"
+              data-skdx-filter-bar-generated
+            >
+              <skdx-text-field @value-change=${this.handleSearchValueChange}>
+                <skdx-text-field-input
+                  type="search"
+                  aria-label=${this.searchLabel??s}
+                  placeholder=${this.searchPlaceholder??s}
+                ></skdx-text-field-input>
+                <skdx-text-field-clear-button
+                  label=${this.clearSearchLabel}
+                ></skdx-text-field-clear-button>
+              </skdx-text-field>
+            </div>`:s}
+      ${this.hasFilters?d`<div
+              class="skdx-filter-bar__filters"
+              data-skdx-filter-bar-generated
+            ></div>`:s}
+      ${this.hasSlotted("actions")?d`<div
+              class="skdx-filter-bar__actions"
+              data-skdx-filter-bar-generated
+            ></div>`:s}
+      ${e.length>0?d`<div
+              class="skdx-filter-bar__active"
+              data-skdx-filter-bar-generated
+            >
+              <skdx-tag-group
+                class="skdx-filter-bar__tags"
+                aria-label=${this.activeFiltersLabel}
+                removable
+                .tags=${e.map(t=>({value:t.id,label:t.label}))}
+                @remove=${this.handleRemove}
+              ></skdx-tag-group>
+              <skdx-button
+                class="skdx-filter-bar__clear"
+                .variant=${"ghost"}
+                .size=${"sm"}
+                @click=${this.handleClear}
+                >${this.clearLabel}</skdx-button
+              >
+            </div>`:s}
+    `}};i([l({type:String})],r.prototype,"label",2),i([l({type:String,attribute:"search-label"})],r.prototype,"searchLabel",2),i([l({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2),i([l({type:String,attribute:"search-value"})],r.prototype,"searchValue",2),i([l({type:String,attribute:"default-search-value"})],r.prototype,"defaultSearchValue",2),i([l({type:String,attribute:"clear-search-label"})],r.prototype,"clearSearchLabel",2),i([l({attribute:!1})],r.prototype,"activeFilters",2),i([l({type:String,attribute:"active-filters-label"})],r.prototype,"activeFiltersLabel",2),i([l({type:String,attribute:"clear-label"})],r.prototype,"clearLabel",2),r=i([g("skdx-filter-bar","filter-bar","root")],r);export{r as SkdxFilterBar};

package/dist/filter-bar/index.cjs

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

package/dist/filter-bar/index.d.cts

@@ -0,0 +1 @@
+export { SkdxFilterBar, type SkdxFilterBarFilter } from './FilterBar.cjs';

package/dist/filter-bar/index.d.ts

@@ -0,0 +1 @@
+export { SkdxFilterBar, type SkdxFilterBarFilter } from './FilterBar.js';

package/dist/filter-bar/index.js

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

package/dist/forgot-password-page/ForgotPasswordPage.cjs

@@ -0,0 +1,57 @@
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)n(o,t,{get:e[t],enumerable:!0})},v=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of x(e))!k.call(o,s)&&s!==t&&n(o,s,{get:()=>e[s],enumerable:!(a=u(e,s))||a.enumerable});return o};var $=o=>v(n({},"__esModule",{value:!0}),o),l=(o,e,t,a)=>{for(var s=a>1?void 0:a?u(e,t):e,m=o.length-1,c;m>=0;m--)(c=o[m])&&(s=(a?c(e,t,s):c(s))||s);return a&&s&&n(e,t,s),s};var E={};b(E,{SkdxForgotPasswordPage:()=>i});module.exports=$(E);var r=require("lit"),d=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/events.cjs"),p=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),w=require("@skdx/web-components/button"),S=require("@skdx/web-components/field"),q=require("@skdx/web-components/form"),C=require("@skdx/web-components/heading"),M=require("@skdx/web-components/text"),R=require("@skdx/web-components/text-field");var g="data-skdx-forgot-password-page-generated",y="data-skdx-forgot-password-page-content",_=0,i=class extends r.LitElement{constructor(){super(...arguments);this.title="Reset your password";this.pending=!1;this.emailLabel="Email";this.submitLabel="Send reset link";this.titleId=`skdx-forgot-password-page-title-${++_}`;this.handleSubmit=t=>{let a=t.target?.closest("skdx-form");if(!a)return;t.preventDefault();let s=a.querySelector('[name="email"]');(0,f.emit)(this,"request-reset",{email:s?.value??""})}}createRenderRoot(){return this}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(t){return this.querySelector(`[slot="${t}"]`)!==null}region(t){return this.querySelector(`.skdx-forgot-password-page__${t}`)}get contentRegion(){return this.querySelector(`[${y}]`)}get hasContent(){return(0,p.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,p.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}render(){return r.html`
+      <div
+        class="skdx-forgot-password-page__panel"
+        data-skdx-forgot-password-page-generated
+      >
+        <skdx-heading
+          class="skdx-forgot-password-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?r.html`<skdx-alert
+                class="skdx-forgot-password-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:r.nothing}
+        ${this.description?r.html`<skdx-text
+                class="skdx-forgot-password-page__description"
+                as="p"
+                .tone=${"muted"}
+                >${this.description}</skdx-text
+              >`:r.nothing}
+        ${this.success?r.html`<skdx-alert
+                class="skdx-forgot-password-page__success"
+                .status=${"success"}
+                >${this.success}</skdx-alert
+              >`:r.html`<skdx-form class="skdx-forgot-password-page__form">
+                <form>
+                  <skdx-field
+                    class="skdx-forgot-password-page__field"
+                    label=${this.emailLabel}
+                    required
+                  >
+                    <skdx-text-field
+                      name="email"
+                      type="email"
+                      required
+                    >
+                      <skdx-text-field-input
+                        type="email"
+                        autocomplete="email"
+                      ></skdx-text-field-input>
+                    </skdx-text-field>
+                  </skdx-field>
+                  ${this.hasContent?r.html`<div data-skdx-forgot-password-page-content></div>`:r.nothing}
+                  <skdx-button
+                    class="skdx-forgot-password-page__submit"
+                    type="submit"
+                    ?loading=${this.pending}
+                    ?disabled=${this.pending}
+                    >${this.submitLabel}</skdx-button
+                  >
+                </form>
+              </skdx-form>`}
+        ${this.hasSlotted("footer")?r.html`<div class="skdx-forgot-password-page__footer"></div>`:r.nothing}
+      </div>
+    `}};l([(0,d.property)({type:String})],i.prototype,"title",2),l([(0,d.property)({type:String})],i.prototype,"description",2),l([(0,d.property)({type:String})],i.prototype,"error",2),l([(0,d.property)({type:String})],i.prototype,"success",2),l([(0,d.property)({type:Boolean})],i.prototype,"pending",2),l([(0,d.property)({type:String,attribute:"email-label"})],i.prototype,"emailLabel",2),l([(0,d.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),i=l([(0,h.customElement)("skdx-forgot-password-page","forgot-password-page","root")],i);0&&(module.exports={SkdxForgotPasswordPage});

package/dist/forgot-password-page/ForgotPasswordPage.d.cts

@@ -0,0 +1,95 @@
+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/text';
+import '@skdx/web-components/text-field';
+/** What a `request-reset` event carries: the address the reset link should be sent to. */
+export interface SkdxForgotPasswordDetail {
+    /** The address the reset link should be sent to, as typed. */
+    email: string;
+}
+/**
+ * Forgot-password block: a description, one email field and a submit button,
+ * replaced entirely by a success alert once the request is accepted.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-forgot-password-page` on the host, then `__panel`,
+ * `__title`, `__description`, `__error`, `__success`, `__form`, `__field`,
+ * `__submit` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-forgot-password-page
+ *   id="forgot"
+ *   description="We will email you a link to choose a new password."
+ * ></skdx-forgot-password-page>
+ * <script>
+ *   document
+ *     .getElementById('forgot')
+ *     .addEventListener('request-reset', (event) => console.log(event.detail.email));
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the submit button.
+ * @slot footer - Navigation below the form, such as a link back to the sign-in page.
+ * @fires request-reset - Fires with `{ email }` when the form submits with an address that passes constraint validation.
+ */
+export declare class SkdxForgotPasswordPage 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 'Reset your password'
+     */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining what the reset link does.
+     * @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;
+    /**
+     * Confirmation rendered into a derived success Alert that replaces the form entirely.
+     * @default undefined — the form renders instead.
+     */
+    success?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while the email field stays editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Label of the email field the reset link is requested for.
+     * @default 'Email'
+     */
+    emailLabel: string;
+    /**
+     * Text of the form's submit button.
+     * @default 'Send reset link'
+     */
+    submitLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    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 readonly handleSubmit;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-forgot-password-page': SkdxForgotPasswordPage;
+    }
+}