@skdx/web-components 0.26.0

package/dist/tabs/TabsList.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tabs-list>` — container for a `<skdx-tabs>`' triggers. Sets
+ * `role="tablist"` on itself and drives roving-focus keyboard navigation
+ * (Arrow Left/Right for horizontal, Arrow Up/Down for vertical, plus
+ * Home/End) across its `<skdx-tabs-trigger>` children, which it reaches via
+ * `this.querySelectorAll` in the light DOM (they're slotted, not nested in
+ * this element's own shadow root).
+ *
+ * @example
+ * ```html
+ * <skdx-tabs-list aria-label="Manage account">
+ *   <skdx-tabs-trigger value="account">Account</skdx-tabs-trigger>
+ *   <skdx-tabs-trigger value="password">Password</skdx-tabs-trigger>
+ * </skdx-tabs-list>
+ * ```
+ */
+export declare class SkdxTabsList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether arrow-key navigation wraps from the last trigger back to the
+     * first (and vice versa).
+     * @default true
+     */
+    loop: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _syncOrientation;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs-list': SkdxTabsList;
+    }
+}

package/dist/tabs/TabsList.js

@@ -0,0 +1,5 @@
+var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=(d,s,n,e)=>{for(var t=e>1?void 0:e?p(s,n):s,i=d.length-1,l;i>=0;i--)(l=d[i])&&(t=(e?l(s,n,t):l(t))||t);return e&&t&&f(s,n,t),t};import{css as u,html as v,LitElement as y}from"lit";import{property as b}from"lit/decorators.js";import{customElement as w}from"../internal/define.js";import{directionalKey as A}from"../internal/direction.js";import{optOutBoolean as E}from"../internal/positioning.js";var r=class extends y{constructor(){super(...arguments);this.loop=!0;this._handleKeydown=n=>{let e=Array.from(this.querySelectorAll('[role="tab"]')).filter(m=>!m.hasAttribute("disabled"));if(e.length===0)return;let t=e.indexOf(document.activeElement),i=(this.closest("skdx-tabs")?.orientation??"horizontal")==="vertical",l=i?["ArrowDown"]:["ArrowRight"],h=i?["ArrowUp"]:["ArrowLeft"],a=A(n.key,this),o;l.includes(a)?(o=t+1,o>=e.length&&(o=this.loop?0:e.length-1)):h.includes(a)?(o=t-1,o<0&&(o=this.loop?e.length-1:0)):a==="Home"?o=0:a==="End"&&(o=e.length-1),o!==void 0&&(n.preventDefault(),e[o]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tablist"),this._syncOrientation(),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown)}_syncOrientation(){let n=this.closest("skdx-tabs")?.orientation??"horizontal";this.setAttribute("aria-orientation",n),this.setAttribute("data-orientation",n)}render(){return v`<slot></slot>`}};r.styles=u`
+    :host {
+      display: block;
+    }
+  `,c([b({converter:E})],r.prototype,"loop",2),r=c([w("skdx-tabs-list","tabs","list")],r);export{r as SkdxTabsList};

package/dist/tabs/TabsTrigger.cjs

@@ -0,0 +1,9 @@
+"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var f=(i,s)=>{for(var t in s)n(i,t,{get:s[t],enumerable:!0})},k=(i,s,t,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let e of m(s))!p.call(i,e)&&e!==t&&n(i,e,{get:()=>s[e],enumerable:!(a=b(s,e))||a.enumerable});return i};var y=i=>k(n({},"__esModule",{value:!0}),i),h=(i,s,t,a)=>{for(var e=a>1?void 0:a?b(s,t):s,l=i.length-1,o;l>=0;l--)(o=i[l])&&(e=(a?o(s,t,e):o(e))||e);return a&&e&&n(s,t,e),e};var g={};f(g,{SkdxTabsTrigger:()=>d});module.exports=y(g);var r=require("lit"),u=require("lit/decorators.js"),v=require("../internal/define.cjs"),c=require("./ids.cjs");var d=class extends r.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this._handleClick=()=>{this.disabled||this.closest("skdx-tabs")?.setValue(this.value)};this._handleFocus=()=>{let t=this.closest("skdx-tabs");!t||this.disabled||t.activationMode==="automatic"&&t.getSelectedValue()!==this.value&&t.setValue(this.value)};this._handleKeydown=t=>{(t.key===" "||t.key==="Enter")&&!this.disabled&&(t.preventDefault(),this.closest("skdx-tabs")?.setValue(this.value))}}connectedCallback(){super.connectedCallback(),this.closest("skdx-tabs")?.registerTrigger(this,this.disabled),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-tabs")?.unregisterTrigger(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown)}refresh(){this._sync()}_sync(){let t=this.closest("skdx-tabs"),a=t?.baseId??"",e=t?.getSelectedValue()===this.value;this.id||(this.id=(0,c.makeTriggerId)(a,this.value)),this.setAttribute("role","tab"),this.setAttribute("aria-selected",String(e)),this.setAttribute("aria-controls",(0,c.makeContentId)(a,this.value)),this.setAttribute("data-state",e?"active":"inactive"),this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.setAttribute("data-orientation",t?.orientation??"horizontal"),this.setAttribute("data-value",this.value);let l=t?.getSelectedValue()===void 0&&t?.getFirstEnabledValue()===this.value,o=this.disabled?-1:e||l?0:-1;this.setAttribute("tabindex",String(o))}updated(){this._sync()}render(){return r.html`<slot></slot>`}};d.styles=r.css`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([disabled]) {
+      cursor: default;
+    }
+  `,h([(0,u.property)({type:String,reflect:!0})],d.prototype,"value",2),h([(0,u.property)({type:Boolean,reflect:!0})],d.prototype,"disabled",2),d=h([(0,v.customElement)("skdx-tabs-trigger","tabs","trigger")],d);0&&(module.exports={SkdxTabsTrigger});

package/dist/tabs/TabsTrigger.d.cts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tabs-trigger>` — a single tab button. Sets `role="tab"` with
+ * `aria-selected` and `data-state="active" | "inactive"` for styling on
+ * **itself** (the host), rather than a shadow-internal `<button>`, since
+ * `aria-controls`/`id` need to be resolvable as light-DOM IDREFs shared
+ * with a sibling `<skdx-tabs-content>` — an IDREF can't cross a shadow
+ * boundary. Selecting it (click, or focus when the parent's
+ * `activation-mode` is `"automatic"`) updates the parent `<skdx-tabs>`'
+ * value.
+ *
+ * Because the host *is* the tab, a disabled trigger reports
+ * `aria-disabled="true"`: a custom element never matches `:disabled`, so the
+ * native attribute the other four frameworks rely on has no effect here.
+ *
+ * @example
+ * ```html
+ * <skdx-tabs-trigger value="password" disabled>Password</skdx-tabs-trigger>
+ * ```
+ */
+export declare class SkdxTabsTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier matched against a sibling `<skdx-tabs-content>`'s `value`. */
+    value: string;
+    /**
+     * Excludes this trigger from selection and keyboard navigation.
+     * @default false
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-tabs>` whenever the selected value changes. */
+    refresh(): void;
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleFocus;
+    private readonly _handleKeydown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs-trigger': SkdxTabsTrigger;
+    }
+}

package/dist/tabs/TabsTrigger.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tabs-trigger>` — a single tab button. Sets `role="tab"` with
+ * `aria-selected` and `data-state="active" | "inactive"` for styling on
+ * **itself** (the host), rather than a shadow-internal `<button>`, since
+ * `aria-controls`/`id` need to be resolvable as light-DOM IDREFs shared
+ * with a sibling `<skdx-tabs-content>` — an IDREF can't cross a shadow
+ * boundary. Selecting it (click, or focus when the parent's
+ * `activation-mode` is `"automatic"`) updates the parent `<skdx-tabs>`'
+ * value.
+ *
+ * Because the host *is* the tab, a disabled trigger reports
+ * `aria-disabled="true"`: a custom element never matches `:disabled`, so the
+ * native attribute the other four frameworks rely on has no effect here.
+ *
+ * @example
+ * ```html
+ * <skdx-tabs-trigger value="password" disabled>Password</skdx-tabs-trigger>
+ * ```
+ */
+export declare class SkdxTabsTrigger extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier matched against a sibling `<skdx-tabs-content>`'s `value`. */
+    value: string;
+    /**
+     * Excludes this trigger from selection and keyboard navigation.
+     * @default false
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-tabs>` whenever the selected value changes. */
+    refresh(): void;
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleFocus;
+    private readonly _handleKeydown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs-trigger': SkdxTabsTrigger;
+    }
+}

package/dist/tabs/TabsTrigger.js

@@ -0,0 +1,9 @@
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(o,a,t,s)=>{for(var e=s>1?void 0:s?c(a,t):a,d=o.length-1,r;d>=0;d--)(r=o[d])&&(e=(s?r(a,t,e):r(e))||e);return s&&e&&h(a,t,e),e};import{css as u,html as b,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{makeContentId as p,makeTriggerId as f}from"./ids.js";var i=class extends v{constructor(){super(...arguments);this.value="";this.disabled=!1;this._handleClick=()=>{this.disabled||this.closest("skdx-tabs")?.setValue(this.value)};this._handleFocus=()=>{let t=this.closest("skdx-tabs");!t||this.disabled||t.activationMode==="automatic"&&t.getSelectedValue()!==this.value&&t.setValue(this.value)};this._handleKeydown=t=>{(t.key===" "||t.key==="Enter")&&!this.disabled&&(t.preventDefault(),this.closest("skdx-tabs")?.setValue(this.value))}}connectedCallback(){super.connectedCallback(),this.closest("skdx-tabs")?.registerTrigger(this,this.disabled),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-tabs")?.unregisterTrigger(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown)}refresh(){this._sync()}_sync(){let t=this.closest("skdx-tabs"),s=t?.baseId??"",e=t?.getSelectedValue()===this.value;this.id||(this.id=f(s,this.value)),this.setAttribute("role","tab"),this.setAttribute("aria-selected",String(e)),this.setAttribute("aria-controls",p(s,this.value)),this.setAttribute("data-state",e?"active":"inactive"),this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.setAttribute("data-orientation",t?.orientation??"horizontal"),this.setAttribute("data-value",this.value);let d=t?.getSelectedValue()===void 0&&t?.getFirstEnabledValue()===this.value,r=this.disabled?-1:e||d?0:-1;this.setAttribute("tabindex",String(r))}updated(){this._sync()}render(){return b`<slot></slot>`}};i.styles=u`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([disabled]) {
+      cursor: default;
+    }
+  `,l([n({type:String,reflect:!0})],i.prototype,"value",2),l([n({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=l([m("skdx-tabs-trigger","tabs","trigger")],i);export{i as SkdxTabsTrigger};

package/dist/tabs/ids.cjs

@@ -0,0 +1 @@
+"use strict";var g=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var $=(n,t)=>{for(var e in t)g(n,e,{get:t[e],enumerable:!0})},c=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of s(t))!u.call(n,r)&&r!==e&&g(n,r,{get:()=>t[r],enumerable:!(i=o(t,r))||i.enumerable});return n};var a=n=>c(g({},"__esModule",{value:!0}),n);var k={};$(k,{makeContentId:()=>f,makeTriggerId:()=>d});module.exports=a(k);function d(n,t){return`${n}-trigger-${t}`}function f(n,t){return`${n}-content-${t}`}0&&(module.exports={makeContentId,makeTriggerId});

package/dist/tabs/ids.d.cts

@@ -0,0 +1,11 @@
+/**
+ * @internal Derives the stable `id` for a tab trigger from the tablist's base
+ * id and the tab's value, so a trigger and its panel can reference each other
+ * via `aria-controls`/`aria-labelledby` without a shared registry.
+ */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/**
+ * @internal Derives the stable `id` for a tab panel — the `aria-controls`
+ * target of {@link makeTriggerId}'s trigger for the same value.
+ */
+export declare function makeContentId(baseId: string, value: string): string;

package/dist/tabs/ids.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @internal Derives the stable `id` for a tab trigger from the tablist's base
+ * id and the tab's value, so a trigger and its panel can reference each other
+ * via `aria-controls`/`aria-labelledby` without a shared registry.
+ */
+export declare function makeTriggerId(baseId: string, value: string): string;
+/**
+ * @internal Derives the stable `id` for a tab panel — the `aria-controls`
+ * target of {@link makeTriggerId}'s trigger for the same value.
+ */
+export declare function makeContentId(baseId: string, value: string): string;

package/dist/tabs/ids.js

@@ -0,0 +1 @@
+function r(t,n){return`${t}-trigger-${n}`}function e(t,n){return`${t}-content-${n}`}export{e as makeContentId,r as makeTriggerId};

package/dist/tabs/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(o,r)=>{for(var t in r)e(o,t,{get:r[t],enumerable:!0})},S=(o,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let x of k(r))!m.call(o,x)&&x!==t&&e(o,x,{get:()=>r[x],enumerable:!(s=f(r,x))||s.enumerable});return o};var g=o=>S(e({},"__esModule",{value:!0}),o);var i={};p(i,{SkdxTabs:()=>T.SkdxTabs,SkdxTabsContent:()=>d.SkdxTabsContent,SkdxTabsList:()=>a.SkdxTabsList,SkdxTabsTrigger:()=>b.SkdxTabsTrigger});module.exports=g(i);var T=require("./Tabs.cjs"),a=require("./TabsList.cjs"),b=require("./TabsTrigger.cjs"),d=require("./TabsContent.cjs");0&&(module.exports={SkdxTabs,SkdxTabsContent,SkdxTabsList,SkdxTabsTrigger});

package/dist/tabs/index.d.cts

@@ -0,0 +1,4 @@
+export { SkdxTabs } from './Tabs.cjs';
+export { SkdxTabsList } from './TabsList.cjs';
+export { SkdxTabsTrigger } from './TabsTrigger.cjs';
+export { SkdxTabsContent } from './TabsContent.cjs';

package/dist/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { SkdxTabs } from './Tabs.js';
+export { SkdxTabsList } from './TabsList.js';
+export { SkdxTabsTrigger } from './TabsTrigger.js';
+export { SkdxTabsContent } from './TabsContent.js';

package/dist/tabs/index.js

@@ -0,0 +1 @@
+import{SkdxTabs as x}from"./Tabs.js";import{SkdxTabsList as e}from"./TabsList.js";import{SkdxTabsTrigger as T}from"./TabsTrigger.js";import{SkdxTabsContent as b}from"./TabsContent.js";export{x as SkdxTabs,b as SkdxTabsContent,e as SkdxTabsList,T as SkdxTabsTrigger};

package/dist/tag/Tag.cjs

@@ -0,0 +1,5 @@
+"use strict";var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(i,e)=>{for(var s in e)l(i,s,{get:e[s],enumerable:!0})},E=(i,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!y.call(i,t)&&t!==s&&l(i,t,{get:()=>e[t],enumerable:!(o=b(e,t))||o.enumerable});return i};var A=i=>E(l({},"__esModule",{value:!0}),i),a=(i,e,s,o)=>{for(var t=o>1?void 0:o?b(e,s):e,p=i.length-1,h;p>=0;p--)(h=i[p])&&(t=(o?h(e,s,t):h(t))||t);return o&&t&&l(e,s,t),t};var f={};g(f,{SkdxTag:()=>r,TAG_UPDATE_EVENT:()=>v});module.exports=A(f);var d=require("lit"),u=require("lit/decorators.js"),c=require("../internal/define.cjs"),n=require("../tag-group/TagGroup.cjs");var v="skdx-tag-internal-update",r=class extends d.LitElement{constructor(){super(...arguments);this.index=0;this.value="";this.disabled=!1;this.group=null;this.handleGroupUpdate=()=>{this.syncHostAttributes(),this.requestUpdate()};this.handleKeydown=s=>{s.key!=="Delete"&&s.key!=="Backspace"||(s.preventDefault(),this.requestDelete())}}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-tag-group"),!this.group)throw new Error("<skdx-tag> must be used inside <skdx-tag-group>.");this.setAttribute("role","listitem"),this.setAttribute("data-skdx-tag",""),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.group.addEventListener(n.TAG_GROUP_UPDATE_EVENT,this.handleGroupUpdate),this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.group.syncTabStops()}disconnectedCallback(){this.group?.removeEventListener(n.TAG_GROUP_UPDATE_EVENT,this.handleGroupUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback(),this.group?.syncTabStops()}updated(){this.syncHostAttributes(),this.dispatchEvent(new CustomEvent(v))}syncHostAttributes(){this.isDisabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}get isDisabled(){return this.disabled||!!this.group?.disabled}requestDelete(){this.isDisabled||(this.group?.setActiveIndex((0,n.focusTagNeighbor)(this,this.index)),this.dispatchEvent(new CustomEvent("delete",{bubbles:!0,composed:!0})))}render(){return d.html`<slot></slot>`}};r.styles=d.css`
+    :host {
+      display: inline-block;
+    }
+  `,a([(0,u.property)({type:Number})],r.prototype,"index",2),a([(0,u.property)({type:String})],r.prototype,"value",2),a([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=a([(0,c.customElement)("skdx-tag","tag","root")],r);0&&(module.exports={SkdxTag,TAG_UPDATE_EVENT});

package/dist/tag/Tag.d.cts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/** @internal Event a tag dispatches whenever its own state changes, so its delete part can re-render (same convention as `<skdx-tags-input>`). */
+export declare const TAG_UPDATE_EVENT = "skdx-tag-internal-update";
+/**
+ * `<skdx-tag>` — the Web Components implementation of the shared Tag contract
+ * (see `@skdx/shared`'s `tagContract`). One removable entry inside a
+ * `<skdx-tag-group>`: sets `role="listitem"` on this host element, takes part
+ * in the group's roving tabindex, and fires `delete` on `Delete` or
+ * `Backspace` after moving focus to a neighbouring tag — so the removal never
+ * drops focus to `<body>`.
+ *
+ * Give it a `<skdx-tag-delete>` child for a pointer affordance; the button
+ * borrows `value` for its accessible name, so it announces "Remove react"
+ * rather than joining a row of identical "Remove" buttons.
+ *
+ * Must be used inside `<skdx-tag-group>`, which is found via
+ * `closest('skdx-tag-group')` and re-read on the
+ * `skdx-tag-group-internal-update` event the group dispatches (the same
+ * convention `<skdx-tags-input-item>` uses). For a purely decorative label with
+ * no keyboard behaviour, use `<skdx-badge>`.
+ *
+ * Unlike React and Svelte, where a missing `onDelete`/`ondelete` marks a tag
+ * static, this fires `delete` unconditionally: a custom element cannot ask
+ * whether anyone is listening.
+ *
+ * @fires delete - The tag asked to be removed. Fires after focus has already moved to a neighbouring tag.
+ *
+ * @example
+ * ```html
+ * <skdx-tag index="0" value="react">
+ *   react
+ *   <skdx-tag-delete>×</skdx-tag-delete>
+ * </skdx-tag>
+ * ```
+ */
+export declare class SkdxTag extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** This tag's position in the list, zero-based. Used to work out which tag focus lands on when this one is removed. @default 0 */
+    index: number;
+    /** This tag's text, used to name `<skdx-tag-delete>` (`Remove react`). @default '' */
+    value: string;
+    /** Disables this tag alone: it can't be removed and arrow-key navigation skips it. @default false */
+    disabled: boolean;
+    private group;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private readonly handleGroupUpdate;
+    private syncHostAttributes;
+    /** @internal This tag's own flag, or the whole group's. */
+    get isDisabled(): boolean;
+    /**
+     * @internal Moves focus to a neighbouring tag and then fires `delete`. A
+     * no-op while disabled. Named `requestDelete` rather than `remove` because
+     * `Element.prototype.remove()` already exists and takes the node out of the
+     * DOM — shadowing it would break every caller that expects that.
+     */
+    requestDelete(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag': SkdxTag;
+    }
+}

package/dist/tag/Tag.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/** @internal Event a tag dispatches whenever its own state changes, so its delete part can re-render (same convention as `<skdx-tags-input>`). */
+export declare const TAG_UPDATE_EVENT = "skdx-tag-internal-update";
+/**
+ * `<skdx-tag>` — the Web Components implementation of the shared Tag contract
+ * (see `@skdx/shared`'s `tagContract`). One removable entry inside a
+ * `<skdx-tag-group>`: sets `role="listitem"` on this host element, takes part
+ * in the group's roving tabindex, and fires `delete` on `Delete` or
+ * `Backspace` after moving focus to a neighbouring tag — so the removal never
+ * drops focus to `<body>`.
+ *
+ * Give it a `<skdx-tag-delete>` child for a pointer affordance; the button
+ * borrows `value` for its accessible name, so it announces "Remove react"
+ * rather than joining a row of identical "Remove" buttons.
+ *
+ * Must be used inside `<skdx-tag-group>`, which is found via
+ * `closest('skdx-tag-group')` and re-read on the
+ * `skdx-tag-group-internal-update` event the group dispatches (the same
+ * convention `<skdx-tags-input-item>` uses). For a purely decorative label with
+ * no keyboard behaviour, use `<skdx-badge>`.
+ *
+ * Unlike React and Svelte, where a missing `onDelete`/`ondelete` marks a tag
+ * static, this fires `delete` unconditionally: a custom element cannot ask
+ * whether anyone is listening.
+ *
+ * @fires delete - The tag asked to be removed. Fires after focus has already moved to a neighbouring tag.
+ *
+ * @example
+ * ```html
+ * <skdx-tag index="0" value="react">
+ *   react
+ *   <skdx-tag-delete>×</skdx-tag-delete>
+ * </skdx-tag>
+ * ```
+ */
+export declare class SkdxTag extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** This tag's position in the list, zero-based. Used to work out which tag focus lands on when this one is removed. @default 0 */
+    index: number;
+    /** This tag's text, used to name `<skdx-tag-delete>` (`Remove react`). @default '' */
+    value: string;
+    /** Disables this tag alone: it can't be removed and arrow-key navigation skips it. @default false */
+    disabled: boolean;
+    private group;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private readonly handleGroupUpdate;
+    private syncHostAttributes;
+    /** @internal This tag's own flag, or the whole group's. */
+    get isDisabled(): boolean;
+    /**
+     * @internal Moves focus to a neighbouring tag and then fires `delete`. A
+     * no-op while disabled. Named `requestDelete` rather than `remove` because
+     * `Element.prototype.remove()` already exists and takes the node out of the
+     * DOM — shadowing it would break every caller that expects that.
+     */
+    requestDelete(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag': SkdxTag;
+    }
+}

package/dist/tag/Tag.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(d,i,t,o)=>{for(var s=o>1?void 0:o?h(i,t):i,a=d.length-1,n;a>=0;a--)(n=d[a])&&(s=(o?n(i,t,s):n(s))||s);return o&&s&&p(i,t,s),s};import{css as b,html as c,LitElement as v}from"lit";import{property as l}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{focusTagNeighbor as y,TAG_GROUP_UPDATE_EVENT as u}from"../tag-group/TagGroup.js";var g="skdx-tag-internal-update",e=class extends v{constructor(){super(...arguments);this.index=0;this.value="";this.disabled=!1;this.group=null;this.handleGroupUpdate=()=>{this.syncHostAttributes(),this.requestUpdate()};this.handleKeydown=t=>{t.key!=="Delete"&&t.key!=="Backspace"||(t.preventDefault(),this.requestDelete())}}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-tag-group"),!this.group)throw new Error("<skdx-tag> must be used inside <skdx-tag-group>.");this.setAttribute("role","listitem"),this.setAttribute("data-skdx-tag",""),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.group.addEventListener(u,this.handleGroupUpdate),this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.group.syncTabStops()}disconnectedCallback(){this.group?.removeEventListener(u,this.handleGroupUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback(),this.group?.syncTabStops()}updated(){this.syncHostAttributes(),this.dispatchEvent(new CustomEvent(g))}syncHostAttributes(){this.isDisabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}get isDisabled(){return this.disabled||!!this.group?.disabled}requestDelete(){this.isDisabled||(this.group?.setActiveIndex(y(this,this.index)),this.dispatchEvent(new CustomEvent("delete",{bubbles:!0,composed:!0})))}render(){return c`<slot></slot>`}};e.styles=b`
+    :host {
+      display: inline-block;
+    }
+  `,r([l({type:Number})],e.prototype,"index",2),r([l({type:String})],e.prototype,"value",2),r([l({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e=r([m("skdx-tag","tag","root")],e);export{e as SkdxTag,g as TAG_UPDATE_EVENT};

package/dist/tag/TagDelete.cjs

@@ -0,0 +1,17 @@
+"use strict";var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var f=(a,e)=>{for(var i in e)o(a,i,{get:e[i],enumerable:!0})},y=(a,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!k.call(a,t)&&t!==i&&o(a,t,{get:()=>e[t],enumerable:!(s=m(e,t))||s.enumerable});return a};var E=a=>y(o({},"__esModule",{value:!0}),a),p=(a,e,i,s)=>{for(var t=s>1?void 0:s?m(e,i):e,n=a.length-1,c;n>=0;n--)(c=a[n])&&(t=(s?c(e,i,t):c(t))||t);return s&&t&&o(e,i,t),t};var x={};f(x,{SkdxTagDelete:()=>d});module.exports=E(x);var l=require("lit"),b=require("lit/decorators.js"),g=require("../internal/define.cjs"),v=require("../internal/part.cjs"),r=require("../internal/styles.cjs"),h=require("./Tag.cjs");var d=class extends l.LitElement{constructor(){super(...arguments);this.tag=null;this.handleUpdate=()=>this.requestUpdate();this.handleClick=()=>this.tag?.requestDelete()}connectedCallback(){if(super.connectedCallback(),this.tag=this.closest("skdx-tag"),!this.tag)throw new Error("<skdx-tag-delete> must be used inside <skdx-tag>.");this.tag.addEventListener(h.TAG_UPDATE_EVENT,this.handleUpdate)}disconnectedCallback(){this.tag?.removeEventListener(h.TAG_UPDATE_EVENT,this.handleUpdate),super.disconnectedCallback()}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.tag?.isDisabled?"":null})}render(){let i=this.tag,s=this.label??`Remove ${i?.value??""}`.trim(),t=!!i?.isDisabled;return l.html`
+      <button
+        part="delete"
+        type="button"
+        tabindex="-1"
+        aria-label=${s}
+        ?disabled=${t}
+        data-disabled=${t?"":l.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};d.styles=[r.resetNativeControl,r.hiddenHostStyles,l.css`
+      :host {
+        display: inline-block;
+      }
+    `,r.controlBoxOnHost],p([(0,b.property)({type:String})],d.prototype,"label",2),d=p([(0,g.customElement)("skdx-tag-delete","tag","delete")],d);0&&(module.exports={SkdxTagDelete});

package/dist/tag/TagDelete.d.cts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tag-delete>` — removes its closest `<skdx-tag>` on click. Renders a
+ * native `<button type="button">` in shadow DOM named `Remove <value>` from
+ * the tag's own text, so a group of them reads as "Remove react", "Remove
+ * typescript" rather than a row of identical "Remove" buttons.
+ *
+ * It is deliberately **not** a Tab stop — hence no `delegatesFocus`, unlike
+ * `<skdx-tags-input-item-delete>`: the group has a single Tab stop and the
+ * keyboard path to removal is `Delete`/`Backspace` on the tag itself. Must be
+ * used inside `<skdx-tag>`.
+ *
+ * @csspart delete - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tag index="0" value="react">
+ *   react
+ *   <skdx-tag-delete>×</skdx-tag-delete>
+ * </skdx-tag>
+ * ```
+ */
+export declare class SkdxTagDelete extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the inner `<button>`, replacing the generated
+     * `Remove <value>`. The button lives in this element's shadow root, so an
+     * `aria-label` written on the host names nothing — this property is the only
+     * way in from markup, and "Remove" is not a word in every language. Set it
+     * per tag (the whole string, not a prefix), since it is what distinguishes
+     * one delete button from the next.
+     * @default undefined — keeps `` `Remove ${value}` ``
+     */
+    label?: string;
+    private tag;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleUpdate;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-delete': SkdxTagDelete;
+    }
+}

package/dist/tag/TagDelete.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tag-delete>` — removes its closest `<skdx-tag>` on click. Renders a
+ * native `<button type="button">` in shadow DOM named `Remove <value>` from
+ * the tag's own text, so a group of them reads as "Remove react", "Remove
+ * typescript" rather than a row of identical "Remove" buttons.
+ *
+ * It is deliberately **not** a Tab stop — hence no `delegatesFocus`, unlike
+ * `<skdx-tags-input-item-delete>`: the group has a single Tab stop and the
+ * keyboard path to removal is `Delete`/`Backspace` on the tag itself. Must be
+ * used inside `<skdx-tag>`.
+ *
+ * @csspart delete - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-tag index="0" value="react">
+ *   react
+ *   <skdx-tag-delete>×</skdx-tag-delete>
+ * </skdx-tag>
+ * ```
+ */
+export declare class SkdxTagDelete extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the inner `<button>`, replacing the generated
+     * `Remove <value>`. The button lives in this element's shadow root, so an
+     * `aria-label` written on the host names nothing — this property is the only
+     * way in from markup, and "Remove" is not a word in every language. Set it
+     * per tag (the whole string, not a prefix), since it is what distinguishes
+     * one delete button from the next.
+     * @default undefined — keeps `` `Remove ${value}` ``
+     */
+    label?: string;
+    private tag;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleUpdate;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-delete': SkdxTagDelete;
+    }
+}

package/dist/tag/TagDelete.js

@@ -0,0 +1,17 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(l,s,e,a)=>{for(var t=a>1?void 0:a?p(s,e):s,d=l.length-1,r;d>=0;d--)(r=l[d])&&(t=(a?r(s,e,t):r(t))||t);return a&&t&&c(s,e,t),t};import{css as h,html as m,LitElement as b,nothing as g}from"lit";import{property as v}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{reflectHostState as k}from"../internal/part.js";import{controlBoxOnHost as f,hiddenHostStyles as y,resetNativeControl as E}from"../internal/styles.js";import{TAG_UPDATE_EVENT as n}from"./Tag.js";var i=class extends b{constructor(){super(...arguments);this.tag=null;this.handleUpdate=()=>this.requestUpdate();this.handleClick=()=>this.tag?.requestDelete()}connectedCallback(){if(super.connectedCallback(),this.tag=this.closest("skdx-tag"),!this.tag)throw new Error("<skdx-tag-delete> must be used inside <skdx-tag>.");this.tag.addEventListener(n,this.handleUpdate)}disconnectedCallback(){this.tag?.removeEventListener(n,this.handleUpdate),super.disconnectedCallback()}updated(){k(this,{"data-disabled":this.tag?.isDisabled?"":null})}render(){let e=this.tag,a=this.label??`Remove ${e?.value??""}`.trim(),t=!!e?.isDisabled;return m`
+      <button
+        part="delete"
+        type="button"
+        tabindex="-1"
+        aria-label=${a}
+        ?disabled=${t}
+        data-disabled=${t?"":g}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};i.styles=[E,y,h`
+      :host {
+        display: inline-block;
+      }
+    `,f],o([v({type:String})],i.prototype,"label",2),i=o([u("skdx-tag-delete","tag","delete")],i);export{i as SkdxTagDelete};

package/dist/tag/index.cjs

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

package/dist/tag/index.d.cts

@@ -0,0 +1,2 @@
+export { SkdxTag } from './Tag.cjs';
+export { SkdxTagDelete } from './TagDelete.cjs';

package/dist/tag/index.d.ts

@@ -0,0 +1,2 @@
+export { SkdxTag } from './Tag.js';
+export { SkdxTagDelete } from './TagDelete.js';

package/dist/tag/index.js

@@ -0,0 +1 @@
+import{SkdxTag as r}from"./Tag.js";import{SkdxTagDelete as t}from"./TagDelete.js";export{r as SkdxTag,t as SkdxTagDelete};

package/dist/tag-group/TagGroup.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var x=(o,s)=>{for(var t in s)h(o,t,{get:s[t],enumerable:!0})},L=(o,s,t,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of y(s))!A.call(o,n)&&n!==t&&h(o,n,{get:()=>s[n],enumerable:!(e=m(s,n))||e.enumerable});return o};var T=o=>L(h({},"__esModule",{value:!0}),o),d=(o,s,t,e)=>{for(var n=e>1?void 0:e?m(s,t):s,r=o.length-1,i;r>=0;r--)(i=o[r])&&(n=(e?i(s,t,n):i(n))||n);return e&&n&&h(s,t,n),n};var I={};x(I,{SkdxTagGroup:()=>a,TAG_GROUP_SELECTOR:()=>E,TAG_GROUP_UPDATE_EVENT:()=>b,TAG_SELECTOR:()=>c,focusTagNeighbor:()=>H});module.exports=T(I);var l=require("lit"),u=require("lit/decorators.js"),p=require("../internal/define.cjs"),f=require("../internal/direction.cjs"),v=require("../internal/positioning.cjs");var c="[data-skdx-tag]",E="[data-skdx-tag-group]";function H(o,s){let t=o?.closest(E)??null,e=t?Array.from(t.querySelectorAll(c)):[],n=o?e.indexOf(o):-1,r=n===-1?void 0:e[n+1];return(r??e[n-1]??t)?.focus(),r?s:Math.max(s-1,0)}var b="skdx-tag-group-internal-update",M={horizontal:"ArrowRight",vertical:"ArrowDown"},w={horizontal:"ArrowLeft",vertical:"ArrowUp"},a=class extends l.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.loop=!0;this.disabled=!1;this.activeIndex=0;this.handleFocusIn=t=>{let e=this.tags.indexOf(t.target?.closest(c));e!==-1&&this.setActiveIndex(e)};this.handleKeydown=t=>{let e=this.tags.filter(g=>g.getAttribute("data-disabled")===null);if(e.length===0)return;let n=e.indexOf(t.target?.closest(c)),r=(0,f.directionalKey)(t.key,this),i;r===M[this.orientation]?(i=n+1,i>=e.length&&(i=this.loop?0:e.length-1)):r===w[this.orientation]?(i=n-1,i<0&&(i=this.loop?e.length-1:0)):r==="Home"?i=0:r==="End"&&(i=e.length-1),i!==void 0&&(t.preventDefault(),e[i]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","list"),this.setAttribute("data-skdx-tag-group",""),this.setAttribute("tabindex","-1"),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("focusin",this.handleFocusIn),this.syncHostAttributes()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("focusin",this.handleFocusIn),super.disconnectedCallback()}updated(){this.syncHostAttributes(),this.syncTabStops(),this.dispatchEvent(new CustomEvent(b))}syncHostAttributes(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}get tags(){return Array.from(this.querySelectorAll(c))}setActiveIndex(t){this.activeIndex=t,this.syncTabStops()}syncTabStops(){let t=this.tags;if(t.length===0)return;let e=Math.min(Math.max(this.activeIndex,0),t.length-1);t.forEach((n,r)=>n.setAttribute("tabindex",r===e?"0":"-1"))}render(){return l.html`<slot></slot>`}};a.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,d([(0,u.property)({type:String,reflect:!0})],a.prototype,"orientation",2),d([(0,u.property)({converter:v.optOutBoolean})],a.prototype,"loop",2),d([(0,u.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),a=d([(0,p.customElement)("skdx-tag-group","tag-group","root")],a);0&&(module.exports={SkdxTagGroup,TAG_GROUP_SELECTOR,TAG_GROUP_UPDATE_EVENT,TAG_SELECTOR,focusTagNeighbor});

package/dist/tag-group/TagGroup.d.cts

@@ -0,0 +1,86 @@
+import { LitElement } from 'lit';
+/** @internal Marks a tag, so the group can discover its items in its own light DOM. */
+export declare const TAG_SELECTOR = "[data-skdx-tag]";
+/** @internal Marks the group root, so a tag being removed can find the group to fall back to. */
+export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
+/**
+ * Moves focus off the tag at `index` *before* it is removed, and returns the
+ * index the newly focused tag will hold once the removal lands.
+ *
+ * Focus moves to the following tag, or to the preceding one when the removed
+ * tag was last, or to the group itself when it was the only one — never to
+ * `<body>`, which is what happens by default when the focused element is
+ * removed. Focus is moved first and the removal is left to the consumer, so
+ * this works the same whether they remove the element synchronously or not.
+ *
+ * Mirrors `packages/react/src/tag-group/TagGroup.tsx`'s `focusTagNeighbor` —
+ * duplicated rather than shared, because no framework package imports
+ * `@skdx/shared` at runtime.
+ * @internal
+ */
+export declare function focusTagNeighbor(tag: HTMLElement | null, index: number): number;
+/** @internal Event the group dispatches whenever a relevant property changes, so its tags can re-sync (same convention as `<skdx-tags-input>`). */
+export declare const TAG_GROUP_UPDATE_EVENT = "skdx-tag-group-internal-update";
+/**
+ * `<skdx-tag-group>` — the Web Components implementation of the shared
+ * TagGroup contract (see `@skdx/shared`'s `tagGroupContract`). A
+ * keyboard-navigable list of `<skdx-tag>`s: sets `role="list"` on this host
+ * element and gives the whole group a *single* Tab stop, with the arrow keys
+ * (plus `Home`/`End`) moving between tags.
+ *
+ * Its real job is the other half of that: when a tag is deleted, focus moves
+ * to the neighbouring tag (or to the group when the last one goes) instead of
+ * falling back to `<body>`, so deleting three tags in a row takes three
+ * `Delete` presses rather than three trips back through the document.
+ *
+ * The group holds no tag data — each `<skdx-tag>` fires its own `delete`
+ * event, so the list can come from anywhere. Name the group with `aria-label`
+ * or `aria-labelledby`; `role="list"` has no implicit name.
+ *
+ * @example
+ * ```html
+ * <skdx-tag-group aria-label="Filters">
+ *   <skdx-tag index="0" value="react">
+ *     react
+ *     <skdx-tag-delete>×</skdx-tag-delete>
+ *   </skdx-tag>
+ * </skdx-tag-group>
+ * ```
+ */
+export declare class SkdxTagGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right vs. Arrow Up/Down. @default 'horizontal' */
+    orientation: 'horizontal' | 'vertical';
+    /** Whether arrow-key navigation wraps from the last tag back to the first, and vice versa. @default true */
+    loop: boolean;
+    /** Disables every tag in the group: none can be removed, and each mirrors `data-disabled`. @default false */
+    disabled: boolean;
+    /** Index of the tag that currently owns the group's single tab stop, clamped to the tags present. */
+    private activeIndex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncHostAttributes;
+    /** @internal The group's tags, in DOM order. */
+    private get tags();
+    /**
+     * @internal Claims the group's single tab stop for the tag at `index`. Called
+     * on focus, and again after a removal shifts the indices.
+     */
+    setActiveIndex(index: number): void;
+    /**
+     * Exactly one tag carries `tabindex="0"`; the rest carry `-1`. The stop is
+     * clamped to the tags actually present, so removing the last one hands it to
+     * the new last rather than leaving the group unreachable by Tab.
+     * @internal
+     */
+    syncTabStops(): void;
+    private readonly handleFocusIn;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tag-group': SkdxTagGroup;
+    }
+}