@skdx/web-components 0.28.0 → 0.29.0

package/dist/toggle-group/ToggleGroupItem.js

@@ -1,4 +1,4 @@
-var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(a,r,e,s)=>{for(var t=s>1?void 0:s?p(r,e):r,d=a.length-1,l;d>=0;d--)(l=a[d])&&(t=(s?l(r,e,t):l(t))||t);return s&&t&&u(r,e,t),t};import{css as h,html as c,LitElement as g}from"lit";import{property as n}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";var i=class extends g{constructor(){super(...arguments);this.value="";this.disabled=!1;this.group=null;this.onGroupUpdate=()=>this._sync();this._handleClick=()=>{this.effectiveDisabled||!this.group||(this.pressed?this.group.deactivate(this.value):this.group.activate(this.value))};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.effectiveDisabled&&(e.preventDefault(),this._handleClick())}}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-toggle-group"),!this.group)throw new Error("<skdx-toggle-group-item> must be used inside <skdx-toggle-group>.");this.group.addEventListener("skdx-toggle-group-internal-update",this.onGroupUpdate),this.setAttribute("role","button"),this.setAttribute("data-skdx-toggle-group-item",""),this.classList.add("skdx-toggle"),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.group?.removeEventListener("skdx-toggle-group-internal-update",this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(){this._sync()}get pressed(){return this.group?.pressedValues.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let e=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),this.setAttribute("data-value",this.value),e?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let s=this.group?.pressedValues??[],t=this.group?.rovingFocus===!1?!e:s.length===0?this.group?.firstEnabledValue===this.value:this.pressed&&s[0]===this.value;this.tabIndex=t?0:-1}render(){return c`<slot></slot>`}};i.styles=h`
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,o,s,e)=>{for(var t=e>1?void 0:e?p(o,s):o,r=n.length-1,d;r>=0;r--)(d=n[r])&&(t=(e?d(o,s,t):d(t))||t);return e&&t&&h(o,s,t),t};import{css as c,html as v,LitElement as g}from"lit";import{property as u}from"lit/decorators.js";import{ButtonHost as f}from"../internal/button-host.js";import{customElement as b,whenUpgraded as m}from"../internal/define.js";import{resolveTabStopId as _,rovingTabIndex as y}from"../internal/roving-tab-stop.js";import{TOGGLE_GROUP_FAMILY as l}from"./family.js";var i=class extends f(g){constructor(){super(...arguments);this.value="";this.disabled=!1;this.group=null;this.onGroupUpdate=()=>this._sync();this._pointerPressed=!1;this._handlePointerDown=()=>{this._pointerPressed=!0};this._handleBlur=()=>{this._pointerPressed=!1};this._handleFocus=s=>{let e=this.group;if(!e?.selectOnFocus||e.type!=="single"||this.effectiveDisabled||this.pressed)return;if(this._pointerPressed){e.activate(this.value,"pointer");return}let t=s.relatedTarget;t?.hasAttribute("data-skdx-toggle-group-item")===!0&&t.closest("skdx-toggle-group")===e&&e.activate(this.value,"keyboard")};this._handleClick=s=>{if(this.effectiveDisabled||!this.group)return;let e=s.detail===0?"keyboard":"pointer";this.pressed?this.group.deactivate(this.value,e):this.group.activate(this.value,e)}}connectedCallback(){if(super.connectedCallback(),this.group=l.root(this),!this.group)throw new Error("<skdx-toggle-group-item> must be used inside <skdx-toggle-group>.");this.group.addEventListener(l.event,this.onGroupUpdate),this.setAttribute("role","button"),this.setAttribute("data-skdx-toggle-group-item",""),this.classList.add("skdx-toggle"),this.addEventListener("click",this._handleClick),this.addEventListener("pointerdown",this._handlePointerDown),this.addEventListener("blur",this._handleBlur),this.addEventListener("focus",this._handleFocus),m(this.group,()=>this._sync())}disconnectedCallback(){this.group?.removeEventListener(l.event,this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("pointerdown",this._handlePointerDown),this.removeEventListener("blur",this._handleBlur),this.removeEventListener("focus",this._handleFocus),super.disconnectedCallback()}updated(s){super.updated(s),this._sync()}syncButtonHost(){this.effectiveDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}get pressed(){return this.group?.pressedValues.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let s=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),this.setAttribute("data-value",this.value),s?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let e=this.group!==null&&this.group.rovingFocus!==!1,t=this.group?.firstEnabledValue??null,r=_(t===null?[]:[t],this.group?.pressedValues??[],null);this.tabIndex=y(e,r===this.value,s)}render(){return v`<slot></slot>`}};i.styles=c`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@ var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(a,r,e,s
     :host([data-disabled]) {
       cursor: default;
     }
-  `,o([n({type:String,reflect:!0})],i.prototype,"value",2),o([n({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=o([v("skdx-toggle-group-item","toggle-group","item")],i);export{i as SkdxToggleGroupItem};
+  `,a([u({type:String,reflect:!0})],i.prototype,"value",2),a([u({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=a([b("skdx-toggle-group-item","toggle-group","item")],i);export{i as SkdxToggleGroupItem};

package/dist/toggle-group/family.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var G=(e,o)=>{for(var g in o)t(e,g,{get:o[g],enumerable:!0})},d=(e,o,g,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of i(o))!m.call(e,r)&&r!==g&&t(e,r,{get:()=>o[r],enumerable:!(p=u(o,r))||p.enumerable});return e};var s=e=>d(t({},"__esModule",{value:!0}),e);var T={};G(T,{TOGGLE_GROUP_FAMILY:()=>x});module.exports=s(T);var l=require("../internal/family.cjs"),x=(0,l.defineFamily)("toggle-group",{selector:"skdx-toggle-group",init:{bubbles:!0,composed:!0}});0&&(module.exports={TOGGLE_GROUP_FAMILY});

package/dist/toggle-group/family.d.cts

@@ -0,0 +1,3 @@
+import type { SkdxToggleGroup } from './ToggleGroup.cjs';
+/** @internal The broadcast every `<skdx-toggle-group-*>` part re-renders on, and the lookup that finds their root. */
+export declare const TOGGLE_GROUP_FAMILY: import("../internal/family.cjs").SkdxFamily<SkdxToggleGroup>;

package/dist/toggle-group/family.d.ts

@@ -0,0 +1,3 @@
+import type { SkdxToggleGroup } from './ToggleGroup.js';
+/** @internal The broadcast every `<skdx-toggle-group-*>` part re-renders on, and the lookup that finds their root. */
+export declare const TOGGLE_GROUP_FAMILY: import("../internal/family.js").SkdxFamily<SkdxToggleGroup>;

package/dist/toggle-group/family.js

@@ -0,0 +1 @@
+import{defineFamily as o}from"../internal/family.js";var r=o("toggle-group",{selector:"skdx-toggle-group",init:{bubbles:!0,composed:!0}});export{r as TOGGLE_GROUP_FAMILY};

package/dist/toggle-group/primitives.cjs

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

package/dist/toggle-group/primitives.d.cts

@@ -1,8 +1,8 @@
 /**
- * Advanced primitives for `<skdx-toggle-group>` — the part the recipe composes.
+ * Advanced primitives for `<skdx-toggle-group>` — the parts the recipe composes.
  *
  * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-toggle-group>` from `@skdx/web-components`) is built from exactly this element.
+ * The recipe (`<skdx-toggle-group>` from `@skdx/web-components`) is built from exactly these elements.
  *
  * @example
  * ```ts
@@ -16,3 +16,4 @@
  * ```
  */
 export { SkdxToggleGroupItem } from './ToggleGroupItem.cjs';
+export { SkdxToggleGroupIndicator } from './ToggleGroupIndicator.cjs';

package/dist/toggle-group/primitives.d.ts

@@ -1,8 +1,8 @@
 /**
- * Advanced primitives for `<skdx-toggle-group>` — the part the recipe composes.
+ * Advanced primitives for `<skdx-toggle-group>` — the parts the recipe composes.
  *
  * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-toggle-group>` from `@skdx/web-components`) is built from exactly this element.
+ * The recipe (`<skdx-toggle-group>` from `@skdx/web-components`) is built from exactly these elements.
  *
  * @example
  * ```ts
@@ -16,3 +16,4 @@
  * ```
  */
 export { SkdxToggleGroupItem } from './ToggleGroupItem.js';
+export { SkdxToggleGroupIndicator } from './ToggleGroupIndicator.js';

package/dist/toggle-group/primitives.js

@@ -1 +1 @@
-import{SkdxToggleGroupItem as r}from"./ToggleGroupItem.js";export{r as SkdxToggleGroupItem};
+import{SkdxToggleGroupItem as e}from"./ToggleGroupItem.js";import{SkdxToggleGroupIndicator as p}from"./ToggleGroupIndicator.js";export{p as SkdxToggleGroupIndicator,e as SkdxToggleGroupItem};

package/dist/toolbar/Toolbar.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var I=(i,r)=>{for(var t in r)p(i,t,{get:r[t],enumerable:!0})},g=(i,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of E(r))!T.call(i,e)&&e!==t&&p(i,e,{get:()=>r[e],enumerable:!(o=y(r,e))||o.enumerable});return i};var O=i=>g(p({},"__esModule",{value:!0}),i),m=(i,r,t,o)=>{for(var e=o>1?void 0:o?y(r,t):r,l=i.length-1,c;l>=0;l--)(c=i[l])&&(e=(o?c(r,t,e):c(e))||e);return o&&e&&p(r,t,e),e};var S={};I(S,{SkdxToolbar:()=>s});module.exports=O(S);var d=require("lit"),u=require("lit/decorators.js"),f=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),b=require("../internal/direction.cjs"),_=require("../internal/positioning.cjs"),a=require("./ToolbarAnatomy.cjs");var k="[data-skdx-toolbar-item]:not([data-disabled])",s=class extends d.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.loop=!0;this._currentTabStopId=null;this._fillAnatomy=()=>{if((0,f.hasAuthoredParts)(this,a.TOOLBAR_ANATOMY_GENERATED,a.TOOLBAR_RENDER_SLOTS)){this._anatomyItemsRef=void 0;return}this.items===this._anatomyItemsRef&&(0,f.hasGeneratedContent)(this,a.TOOLBAR_ANATOMY_GENERATED)||(this._anatomyItemsRef=this.items,(0,a.fillToolbarAnatomy)(this))};this._handleKeydown=t=>{let o=Array.from(this.querySelectorAll(k));if(o.length===0)return;let e=o.indexOf(document.activeElement),l=this.orientation==="vertical",c=l?["ArrowDown"]:["ArrowRight"],A=l?["ArrowUp"]:["ArrowLeft"],h=(0,b.directionalKey)(t.key,this),n;c.includes(h)?(n=e+1,n>=o.length&&(n=this.loop?0:o.length-1)):A.includes(h)?(n=e-1,n<0&&(n=this.loop?o.length-1:0)):h==="Home"?n=0:h==="End"&&(n=o.length-1),n!==void 0&&(t.preventDefault(),o[n]?.focus())}}get currentTabStopId(){return this._currentTabStopId}claimTabStop(t){this._currentTabStopId!==t&&(this._currentTabStopId=t,this.refreshTabStops())}refreshTabStops(){this.dispatchEvent(new CustomEvent("skdx-toolbar-internal-update",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","toolbar"),this._syncOrientation(),this.addEventListener("keydown",this._handleKeydown),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(t){this._fillAnatomy(),t.has("orientation")&&this._syncOrientation()}_syncOrientation(){this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}render(){return d.html`<slot @slotchange=${this._fillAnatomy}></slot>`}};s.styles=d.css`
+"use strict";var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var O=(i,r)=>{for(var t in r)p(i,t,{get:r[t],enumerable:!0})},g=(i,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of E(r))!I.call(i,e)&&e!==t&&p(i,e,{get:()=>r[e],enumerable:!(o=y(r,e))||o.enumerable});return i};var R=i=>g(p({},"__esModule",{value:!0}),i),c=(i,r,t,o)=>{for(var e=o>1?void 0:o?y(r,t):r,l=i.length-1,m;l>=0;l--)(m=i[l])&&(e=(o?m(r,t,e):m(e))||e);return o&&e&&p(r,t,e),e};var k={};O(k,{SkdxToolbar:()=>s});module.exports=R(k);var d=require("lit"),f=require("lit/decorators.js"),u=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),b=require("../internal/direction.cjs"),_=require("../internal/positioning.cjs"),A=require("./family.cjs"),a=require("./ToolbarAnatomy.cjs");var L="[data-skdx-toolbar-item]:not([data-disabled])",s=class extends d.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.loop=!0;this._currentTabStopId=null;this._fillAnatomy=()=>{if((0,u.hasAuthoredParts)(this,a.TOOLBAR_ANATOMY_GENERATED,a.TOOLBAR_RENDER_SLOTS)){this._anatomyItemsRef=void 0;return}this.items===this._anatomyItemsRef&&(0,u.hasGeneratedContent)(this,a.TOOLBAR_ANATOMY_GENERATED)||(this._anatomyItemsRef=this.items,(0,a.fillToolbarAnatomy)(this))};this._handleKeydown=t=>{let o=Array.from(this.querySelectorAll(L));if(o.length===0)return;let e=o.indexOf(document.activeElement),l=this.orientation==="vertical",m=l?["ArrowDown"]:["ArrowRight"],T=l?["ArrowUp"]:["ArrowLeft"],h=(0,b.directionalKey)(t.key,this),n;m.includes(h)?(n=e+1,n>=o.length&&(n=this.loop?0:o.length-1)):T.includes(h)?(n=e-1,n<0&&(n=this.loop?o.length-1:0)):h==="Home"?n=0:h==="End"&&(n=o.length-1),n!==void 0&&(t.preventDefault(),o[n]?.focus())}}get currentTabStopId(){return this._currentTabStopId}claimTabStop(t){this._currentTabStopId!==t&&(this._currentTabStopId=t,this.refreshTabStops())}refreshTabStops(){A.TOOLBAR_FAMILY.notify(this)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","toolbar"),this._syncOrientation(),this.addEventListener("keydown",this._handleKeydown),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(t){this._fillAnatomy(),t.has("orientation")&&this._syncOrientation()}_syncOrientation(){this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}render(){return d.html`<slot @slotchange=${this._fillAnatomy}></slot>`}};s.styles=d.css`
     :host {
       display: block;
     }
-  `,m([(0,u.property)({type:String,reflect:!0})],s.prototype,"orientation",2),m([(0,u.property)({converter:_.optOutBoolean,reflect:!0})],s.prototype,"loop",2),m([(0,u.property)({attribute:!1})],s.prototype,"items",2),s=m([(0,v.customElement)("skdx-toolbar","toolbar","root")],s);0&&(module.exports={SkdxToolbar});
+  `,c([(0,f.property)({type:String,reflect:!0})],s.prototype,"orientation",2),c([(0,f.property)({converter:_.optOutBoolean,reflect:!0})],s.prototype,"loop",2),c([(0,f.property)({attribute:!1})],s.prototype,"items",2),s=c([(0,v.customElement)("skdx-toolbar","toolbar","root")],s);0&&(module.exports={SkdxToolbar});

package/dist/toolbar/Toolbar.d.cts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import type { SkdxToolbarItemDescriptor } from './types.cjs';
 /** Layout axis of a `<skdx-toolbar>`. */
 export type SkdxToolbarOrientation = 'horizontal' | 'vertical';
@@ -53,7 +53,7 @@ export declare class SkdxToolbar extends LitElement {
     protected updated(changed: PropertyValues): void;
     private _syncOrientation;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/Toolbar.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import type { SkdxToolbarItemDescriptor } from './types.js';
 /** Layout axis of a `<skdx-toolbar>`. */
 export type SkdxToolbarOrientation = 'horizontal' | 'vertical';
@@ -53,7 +53,7 @@ export declare class SkdxToolbar extends LitElement {
     protected updated(changed: PropertyValues): void;
     private _syncOrientation;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/Toolbar.js

@@ -1,5 +1,5 @@
-var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(c,s,e,t)=>{for(var r=t>1?void 0:t?f(s,e):s,n=c.length-1,a;n>=0;n--)(a=c[n])&&(r=(t?a(s,e,r):a(r))||r);return t&&r&&u(s,e,r),r};import{css as y,html as v,LitElement as b}from"lit";import{property as m}from"lit/decorators.js";import{hasAuthoredParts as _,hasGeneratedContent as A}from"../internal/authored.js";import{customElement as E}from"../internal/define.js";import{directionalKey as T}from"../internal/direction.js";import{optOutBoolean as I}from"../internal/positioning.js";import{fillToolbarAnatomy as g,TOOLBAR_ANATOMY_GENERATED as h,TOOLBAR_RENDER_SLOTS as O}from"./ToolbarAnatomy.js";var k="[data-skdx-toolbar-item]:not([data-disabled])",i=class extends b{constructor(){super(...arguments);this.orientation="horizontal";this.loop=!0;this._currentTabStopId=null;this._fillAnatomy=()=>{if(_(this,h,O)){this._anatomyItemsRef=void 0;return}this.items===this._anatomyItemsRef&&A(this,h)||(this._anatomyItemsRef=this.items,g(this))};this._handleKeydown=e=>{let t=Array.from(this.querySelectorAll(k));if(t.length===0)return;let r=t.indexOf(document.activeElement),n=this.orientation==="vertical",a=n?["ArrowDown"]:["ArrowRight"],p=n?["ArrowUp"]:["ArrowLeft"],d=T(e.key,this),o;a.includes(d)?(o=r+1,o>=t.length&&(o=this.loop?0:t.length-1)):p.includes(d)?(o=r-1,o<0&&(o=this.loop?t.length-1:0)):d==="Home"?o=0:d==="End"&&(o=t.length-1),o!==void 0&&(e.preventDefault(),t[o]?.focus())}}get currentTabStopId(){return this._currentTabStopId}claimTabStop(e){this._currentTabStopId!==e&&(this._currentTabStopId=e,this.refreshTabStops())}refreshTabStops(){this.dispatchEvent(new CustomEvent("skdx-toolbar-internal-update",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback(),this.setAttribute("role","toolbar"),this._syncOrientation(),this.addEventListener("keydown",this._handleKeydown),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(e){this._fillAnatomy(),e.has("orientation")&&this._syncOrientation()}_syncOrientation(){this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}render(){return v`<slot @slotchange=${this._fillAnatomy}></slot>`}};i.styles=y`
+var f=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=(m,s,e,t)=>{for(var r=t>1?void 0:t?u(s,e):s,n=m.length-1,a;n>=0;n--)(a=m[n])&&(r=(t?a(s,e,r):a(r))||r);return t&&r&&f(s,e,r),r};import{css as y,html as v,LitElement as b}from"lit";import{property as c}from"lit/decorators.js";import{hasAuthoredParts as _,hasGeneratedContent as A}from"../internal/authored.js";import{customElement as T}from"../internal/define.js";import{directionalKey as E}from"../internal/direction.js";import{optOutBoolean as I}from"../internal/positioning.js";import{TOOLBAR_FAMILY as O}from"./family.js";import{fillToolbarAnatomy as g,TOOLBAR_ANATOMY_GENERATED as h,TOOLBAR_RENDER_SLOTS as R}from"./ToolbarAnatomy.js";var L="[data-skdx-toolbar-item]:not([data-disabled])",i=class extends b{constructor(){super(...arguments);this.orientation="horizontal";this.loop=!0;this._currentTabStopId=null;this._fillAnatomy=()=>{if(_(this,h,R)){this._anatomyItemsRef=void 0;return}this.items===this._anatomyItemsRef&&A(this,h)||(this._anatomyItemsRef=this.items,g(this))};this._handleKeydown=e=>{let t=Array.from(this.querySelectorAll(L));if(t.length===0)return;let r=t.indexOf(document.activeElement),n=this.orientation==="vertical",a=n?["ArrowDown"]:["ArrowRight"],p=n?["ArrowUp"]:["ArrowLeft"],d=E(e.key,this),o;a.includes(d)?(o=r+1,o>=t.length&&(o=this.loop?0:t.length-1)):p.includes(d)?(o=r-1,o<0&&(o=this.loop?t.length-1:0)):d==="Home"?o=0:d==="End"&&(o=t.length-1),o!==void 0&&(e.preventDefault(),t[o]?.focus())}}get currentTabStopId(){return this._currentTabStopId}claimTabStop(e){this._currentTabStopId!==e&&(this._currentTabStopId=e,this.refreshTabStops())}refreshTabStops(){O.notify(this)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","toolbar"),this._syncOrientation(),this.addEventListener("keydown",this._handleKeydown),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(e){this._fillAnatomy(),e.has("orientation")&&this._syncOrientation()}_syncOrientation(){this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}render(){return v`<slot @slotchange=${this._fillAnatomy}></slot>`}};i.styles=y`
     :host {
       display: block;
     }
-  `,l([m({type:String,reflect:!0})],i.prototype,"orientation",2),l([m({converter:I,reflect:!0})],i.prototype,"loop",2),l([m({attribute:!1})],i.prototype,"items",2),i=l([E("skdx-toolbar","toolbar","root")],i);export{i as SkdxToolbar};
+  `,l([c({type:String,reflect:!0})],i.prototype,"orientation",2),l([c({converter:I,reflect:!0})],i.prototype,"loop",2),l([c({attribute:!1})],i.prototype,"items",2),i=l([T("skdx-toolbar","toolbar","root")],i);export{i as SkdxToolbar};

package/dist/toolbar/ToolbarAnatomy.cjs

@@ -1 +1 @@
-"use strict";var b=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(o,i)=>{for(var l in i)b(o,l,{get:i[l],enumerable:!0})},v=(o,i,l,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of A(i))!f.call(o,a)&&a!==l&&b(o,a,{get:()=>i[a],enumerable:!(t=c(i,a))||t.enumerable});return o};var E=o=>v(b({},"__esModule",{value:!0}),o);var T={};g(T,{TOOLBAR_ANATOMY_GENERATED:()=>d,TOOLBAR_RENDER_SLOTS:()=>k,fillToolbarAnatomy:()=>x});module.exports=E(T);var u=require("../internal/options.cjs"),C=require("./ToolbarButton.cjs"),R=require("./ToolbarLink.cjs"),S=require("./ToolbarSeparator.cjs"),O=require("./ToolbarToggleGroup.cjs"),L=require("./ToolbarToggleItem.cjs"),d="data-skdx-toolbar-generated",k=["item"];function m(o,i,l,t){o.setAttribute("data-value",i);let a=t.get(i);a?o.append((0,u.stampRenderSlot)(a)):o.textContent=l}function x(o){let i=(0,u.renderSlotContent)(o,"item"),l=(o.items??[]).map((t,a)=>{let p=String(a);if("type"in t&&t.type==="separator"){let e=document.createElement("skdx-toolbar-separator");return e.setAttribute(d,""),e}if("type"in t&&t.type==="link"){let e=document.createElement("skdx-toolbar-link");return e.setAttribute(d,""),e.setAttribute("href",t.href),t.disabled&&(e.setAttribute("aria-disabled","true"),e.setAttribute("data-disabled","")),m(e,p,t.label,i),e}if("type"in t&&t.type==="toggle-group"){let e=document.createElement("skdx-toolbar-toggle-group");e.setAttribute(d,""),e.setAttribute("type",t.mode??"single"),t.disabled&&e.setAttribute("disabled",""),t.value!==void 0&&e.setAttribute("value",Array.isArray(t.value)?t.value.join(","):t.value),e.addEventListener("value-change",s=>{t.onValueChange?.(s.detail.value)});for(let s of t.items){let n=document.createElement("skdx-toolbar-toggle-item");n.setAttribute("value",s.value),s.disabled&&n.setAttribute("disabled",""),m(n,s.value,s.label,i),e.append(n)}return e}let r=document.createElement("skdx-toolbar-button");return r.setAttribute(d,""),t.disabled&&r.setAttribute("disabled",""),m(r,p,t.label,i),r.addEventListener("click",()=>{t.disabled||t.onClick?.()}),r});o.replaceChildren(...l)}0&&(module.exports={TOOLBAR_ANATOMY_GENERATED,TOOLBAR_RENDER_SLOTS,fillToolbarAnatomy});
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var b=(t,o)=>{for(var i in o)n(t,i,{get:o[i],enumerable:!0})},c=(t,o,i,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of p(o))!m.call(t,r)&&r!==i&&n(t,r,{get:()=>o[r],enumerable:!(e=u(o,r))||e.enumerable});return t};var g=t=>c(n({},"__esModule",{value:!0}),t);var T={};b(T,{TOOLBAR_ANATOMY_GENERATED:()=>l,TOOLBAR_RENDER_SLOTS:()=>f,fillToolbarAnatomy:()=>v});module.exports=g(T);var a=require("../internal/options.cjs"),R=require("./ToolbarButton.cjs"),h=require("./ToolbarLink.cjs"),C=require("./ToolbarSeparator.cjs"),D=require("./ToolbarToggleGroup.cjs"),L=require("./ToolbarToggleItem.cjs"),l="data-skdx-toolbar-generated",f=["item"];function s(t,o,i,e){t.setAttribute("data-value",o);let r=e.get(o);r?t.append((0,a.stampRenderSlot)(r)):t.textContent=i}function E(){let t=document.createElement("skdx-toolbar-separator");return t.setAttribute(l,""),t}function A(t,o,i){let e=document.createElement("skdx-toolbar-link");return e.setAttribute(l,""),e.setAttribute("href",t.href),t.disabled&&e.setAttribute("aria-disabled","true"),s(e,o,t.label,i),e}function k(t,o){let i=document.createElement("skdx-toolbar-toggle-group");i.setAttribute(l,""),i.setAttribute("type",t.mode??"single"),t.disabled&&i.setAttribute("disabled",""),t.value!==void 0&&i.setAttribute("value",Array.isArray(t.value)?t.value.join(","):t.value),i.addEventListener("value-change",e=>{t.onValueChange?.(e.detail.value)});for(let e of t.items){let r=document.createElement("skdx-toolbar-toggle-item");r.setAttribute("value",e.value),e.disabled&&r.setAttribute("disabled",""),s(r,e.value,e.label,o),i.append(r)}return i}function x(t,o,i){let e=document.createElement("skdx-toolbar-button");return e.setAttribute(l,""),t.disabled&&e.setAttribute("disabled",""),s(e,o,t.label,i),e.addEventListener("click",()=>{t.disabled||t.onClick?.()}),e}function v(t){let o=(0,a.renderSlotContent)(t,"item"),i=(t.items??[]).map((e,r)=>{let d=String(r);return"type"in e&&e.type==="separator"?E():"type"in e&&e.type==="link"?A(e,d,o):"type"in e&&e.type==="toggle-group"?k(e,o):x(e,d,o)});t.replaceChildren(...i)}0&&(module.exports={TOOLBAR_ANATOMY_GENERATED,TOOLBAR_RENDER_SLOTS,fillToolbarAnatomy});

package/dist/toolbar/ToolbarAnatomy.d.cts

@@ -9,7 +9,7 @@ export declare const TOOLBAR_ANATOMY_GENERATED = "data-skdx-toolbar-generated";
 /** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
 export declare const TOOLBAR_RENDER_SLOTS: readonly ["item"];
 /**
- * Builds the anatomy — one Button, Link, Separator or ToggleGroup per `items`
+ * Builds the anatomy — one Button, Link, Divider or ToggleGroup per `items`
  * entry — as light-DOM children of `root`. `slot="item"` children supply
  * per-item content, keyed by `data-value`.
  *

package/dist/toolbar/ToolbarAnatomy.d.ts

@@ -9,7 +9,7 @@ export declare const TOOLBAR_ANATOMY_GENERATED = "data-skdx-toolbar-generated";
 /** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
 export declare const TOOLBAR_RENDER_SLOTS: readonly ["item"];
 /**
- * Builds the anatomy — one Button, Link, Separator or ToggleGroup per `items`
+ * Builds the anatomy — one Button, Link, Divider or ToggleGroup per `items`
  * entry — as light-DOM children of `root`. `slot="item"` children supply
  * per-item content, keyed by `data-value`.
  *

package/dist/toolbar/ToolbarAnatomy.js

@@ -1 +1 @@
-import{renderSlotContent as m,stampRenderSlot as p}from"../internal/options.js";import"./ToolbarButton.js";import"./ToolbarLink.js";import"./ToolbarSeparator.js";import"./ToolbarToggleGroup.js";import"./ToolbarToggleItem.js";var d="data-skdx-toolbar-generated",k=["item"];function u(i,o,n,t){i.setAttribute("data-value",o);let s=t.get(o);s?i.append(p(s)):i.textContent=n}function x(i){let o=m(i,"item"),n=(i.items??[]).map((t,s)=>{let b=String(s);if("type"in t&&t.type==="separator"){let e=document.createElement("skdx-toolbar-separator");return e.setAttribute(d,""),e}if("type"in t&&t.type==="link"){let e=document.createElement("skdx-toolbar-link");return e.setAttribute(d,""),e.setAttribute("href",t.href),t.disabled&&(e.setAttribute("aria-disabled","true"),e.setAttribute("data-disabled","")),u(e,b,t.label,o),e}if("type"in t&&t.type==="toggle-group"){let e=document.createElement("skdx-toolbar-toggle-group");e.setAttribute(d,""),e.setAttribute("type",t.mode??"single"),t.disabled&&e.setAttribute("disabled",""),t.value!==void 0&&e.setAttribute("value",Array.isArray(t.value)?t.value.join(","):t.value),e.addEventListener("value-change",a=>{t.onValueChange?.(a.detail.value)});for(let a of t.items){let r=document.createElement("skdx-toolbar-toggle-item");r.setAttribute("value",a.value),a.disabled&&r.setAttribute("disabled",""),u(r,a.value,a.label,o),e.append(r)}return e}let l=document.createElement("skdx-toolbar-button");return l.setAttribute(d,""),t.disabled&&l.setAttribute("disabled",""),u(l,b,t.label,o),l.addEventListener("click",()=>{t.disabled||t.onClick?.()}),l});i.replaceChildren(...n)}export{d as TOOLBAR_ANATOMY_GENERATED,k as TOOLBAR_RENDER_SLOTS,x as fillToolbarAnatomy};
+import{renderSlotContent as s,stampRenderSlot as d}from"../internal/options.js";import"./ToolbarButton.js";import"./ToolbarLink.js";import"./ToolbarSeparator.js";import"./ToolbarToggleGroup.js";import"./ToolbarToggleItem.js";var l="data-skdx-toolbar-generated",x=["item"];function a(e,i,o,t){e.setAttribute("data-value",i);let r=t.get(i);r?e.append(d(r)):e.textContent=o}function u(){let e=document.createElement("skdx-toolbar-separator");return e.setAttribute(l,""),e}function p(e,i,o){let t=document.createElement("skdx-toolbar-link");return t.setAttribute(l,""),t.setAttribute("href",e.href),e.disabled&&t.setAttribute("aria-disabled","true"),a(t,i,e.label,o),t}function m(e,i){let o=document.createElement("skdx-toolbar-toggle-group");o.setAttribute(l,""),o.setAttribute("type",e.mode??"single"),e.disabled&&o.setAttribute("disabled",""),e.value!==void 0&&o.setAttribute("value",Array.isArray(e.value)?e.value.join(","):e.value),o.addEventListener("value-change",t=>{e.onValueChange?.(t.detail.value)});for(let t of e.items){let r=document.createElement("skdx-toolbar-toggle-item");r.setAttribute("value",t.value),t.disabled&&r.setAttribute("disabled",""),a(r,t.value,t.label,i),o.append(r)}return o}function b(e,i,o){let t=document.createElement("skdx-toolbar-button");return t.setAttribute(l,""),e.disabled&&t.setAttribute("disabled",""),a(t,i,e.label,o),t.addEventListener("click",()=>{e.disabled||e.onClick?.()}),t}function v(e){let i=s(e,"item"),o=(e.items??[]).map((t,r)=>{let n=String(r);return"type"in t&&t.type==="separator"?u():"type"in t&&t.type==="link"?p(t,n,i):"type"in t&&t.type==="toggle-group"?m(t,i):b(t,n,i)});e.replaceChildren(...o)}export{l as TOOLBAR_ANATOMY_GENERATED,x as TOOLBAR_RENDER_SLOTS,v as fillToolbarAnatomy};

package/dist/toolbar/ToolbarButton.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var e in t)d(o,e,{get:t[e],enumerable:!0})},f=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of m(t))!u.call(o,i)&&i!==e&&d(o,i,{get:()=>t[i],enumerable:!(s=c(t,i))||s.enumerable});return o};var k=o=>f(d({},"__esModule",{value:!0}),o),b=(o,t,e,s)=>{for(var i=s>1?void 0:s?c(t,e):t,n=o.length-1,h;n>=0;n--)(h=o[n])&&(i=(s?h(t,e,i):h(i))||i);return s&&i&&d(t,e,i),i};var E={};y(E,{SkdxToolbarButton:()=>r});module.exports=k(E);var a=require("lit"),p=require("lit/decorators.js"),v=require("../internal/define.cjs"),l=require("./toolbarItem.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.disabled=!1;this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>{this.disabled||this.toolbar?.claimTabStop(this.itemId)};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.disabled&&(e.preventDefault(),this.click())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:s}=(0,l.initToolbarItem)(this);this.itemId=e,this.toolbar=s,this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.setAttribute("role","button"),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.setAttribute("aria-disabled",String(this.disabled)),(0,l.syncTabIndex)(this,this.itemId,this.toolbar)}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var t in e)d(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of u(e))!y.call(o,i)&&i!==t&&d(o,i,{get:()=>e[i],enumerable:!(s=p(e,i))||s.enumerable});return o};var _=o=>E(d({},"__esModule",{value:!0}),o),b=(o,e,t,s)=>{for(var i=s>1?void 0:s?p(e,t):e,n=o.length-1,h;n>=0;n--)(h=o[n])&&(i=(s?h(e,t,i):h(i))||i);return s&&i&&d(e,t,i),i};var k={};f(k,{SkdxToolbarButton:()=>r});module.exports=_(k);var a=require("lit"),m=require("lit/decorators.js"),v=require("../internal/define.cjs"),c=require("./family.cjs"),l=require("./toolbarItem.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.disabled=!1;this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>{this.disabled||this.toolbar?.claimTabStop(this.itemId)};this._handleKeydown=t=>{(t.key==="Enter"||t.key===" ")&&!this.disabled&&(t.preventDefault(),this.click())}}connectedCallback(){super.connectedCallback();let{id:t,toolbar:s}=(0,l.initToolbarItem)(this);this.itemId=t,this.toolbar=s,this.toolbar?.addEventListener(c.TOOLBAR_FAMILY.event,this.onRootUpdate),this.setAttribute("role","button"),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener(c.TOOLBAR_FAMILY.event,this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),(0,l.syncTabIndex)(this,this.itemId,this.toolbar)}render(){return a.html`<slot></slot>`}};r.styles=a.css`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@
     :host([data-disabled]) {
       cursor: default;
     }
-  `,b([(0,p.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=b([(0,v.customElement)("skdx-toolbar-button","toolbar","button")],r);0&&(module.exports={SkdxToolbarButton});
+  `,b([(0,m.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=b([(0,v.customElement)("skdx-toolbar-button","toolbar","button")],r);0&&(module.exports={SkdxToolbarButton});

package/dist/toolbar/ToolbarButton.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * An action button in the toolbar: joins the roving-tabindex group.
  * Must be used inside `<skdx-toolbar>`.
@@ -21,7 +21,7 @@ export declare class SkdxToolbarButton extends LitElement {
     private _sync;
     private readonly _handleFocus;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarButton.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * An action button in the toolbar: joins the roving-tabindex group.
  * Must be used inside `<skdx-toolbar>`.
@@ -21,7 +21,7 @@ export declare class SkdxToolbarButton extends LitElement {
     private _sync;
     private readonly _handleFocus;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarButton.js

@@ -1,4 +1,4 @@
-var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(r,s,t,i)=>{for(var e=i>1?void 0:i?h(s,t):s,a=r.length-1,d;a>=0;a--)(d=r[a])&&(e=(i?d(s,t,e):d(e))||e);return i&&e&&n(s,t,e),e};import{css as b,html as c,LitElement as p}from"lit";import{property as v}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{initToolbarItem as u,syncTabIndex as y}from"./toolbarItem.js";var o=class extends p{constructor(){super(...arguments);this.disabled=!1;this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>{this.disabled||this.toolbar?.claimTabStop(this.itemId)};this._handleKeydown=t=>{(t.key==="Enter"||t.key===" ")&&!this.disabled&&(t.preventDefault(),this.click())}}connectedCallback(){super.connectedCallback();let{id:t,toolbar:i}=u(this);this.itemId=t,this.toolbar=i,this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.setAttribute("role","button"),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.setAttribute("aria-disabled",String(this.disabled)),y(this,this.itemId,this.toolbar)}render(){return c`<slot></slot>`}};o.styles=b`
+var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var l=(r,s,e,i)=>{for(var t=i>1?void 0:i?b(s,e):s,a=r.length-1,d;a>=0;a--)(d=r[a])&&(t=(i?d(s,e,t):d(t))||t);return i&&t&&h(s,e,t),t};import{css as c,html as p,LitElement as m}from"lit";import{property as v}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{TOOLBAR_FAMILY as n}from"./family.js";import{initToolbarItem as y,syncTabIndex as f}from"./toolbarItem.js";var o=class extends m{constructor(){super(...arguments);this.disabled=!1;this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>{this.disabled||this.toolbar?.claimTabStop(this.itemId)};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.disabled&&(e.preventDefault(),this.click())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:i}=y(this);this.itemId=e,this.toolbar=i,this.toolbar?.addEventListener(n.event,this.onRootUpdate),this.setAttribute("role","button"),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener(n.event,this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),f(this,this.itemId,this.toolbar)}render(){return p`<slot></slot>`}};o.styles=c`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@ var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(r,s,t,i
     :host([data-disabled]) {
       cursor: default;
     }
-  `,l([v({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=l([m("skdx-toolbar-button","toolbar","button")],o);export{o as SkdxToolbarButton};
+  `,l([v({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=l([u("skdx-toolbar-button","toolbar","button")],o);export{o as SkdxToolbarButton};

package/dist/toolbar/ToolbarLink.cjs

@@ -1,6 +1,6 @@
-"use strict";var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var u=(i,t)=>{for(var e in t)a(i,e,{get:t[e],enumerable:!0})},f=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!y.call(i,o)&&o!==e&&a(i,o,{get:()=>t[o],enumerable:!(r=v(t,o))||r.enumerable});return i};var _=i=>f(a({},"__esModule",{value:!0}),i),c=(i,t,e,r)=>{for(var o=r>1?void 0:r?v(t,e):t,l=i.length-1,h;l>=0;l--)(h=i[l])&&(o=(r?h(t,e,o):h(o))||o);return r&&o&&a(t,e,o),o};var E={};u(E,{SkdxToolbarLink:()=>s});module.exports=_(E);var n=require("lit"),p=require("lit/decorators.js"),m=require("../internal/define.cjs"),d=require("./toolbarItem.cjs");var s=class extends n.LitElement{constructor(){super(...arguments);this.href="";this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>this.toolbar?.claimTabStop(this.itemId);this._handleActivate=()=>{this.href&&window.location.assign(this.href)};this._handleKeydown=e=>{e.key==="Enter"&&(e.preventDefault(),this._handleActivate())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:r}=(0,d.initToolbarItem)(this);this.itemId=e,this.toolbar=r,this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.setAttribute("role","link"),this.addEventListener("focus",this._handleFocus),this.addEventListener("click",this._handleActivate),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("click",this._handleActivate),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){(0,d.syncTabIndex)(this,this.itemId,this.toolbar)}render(){return n.html`<slot></slot>`}};s.styles=n.css`
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},_=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of y(e))!u.call(i,o)&&o!==t&&a(i,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return i};var E=i=>_(a({},"__esModule",{value:!0}),i),c=(i,e,t,r)=>{for(var o=r>1?void 0:r?p(e,t):e,d=i.length-1,h;d>=0;d--)(h=i[d])&&(o=(r?h(e,t,o):h(o))||o);return r&&o&&a(e,t,o),o};var k={};f(k,{SkdxToolbarLink:()=>s});module.exports=E(k);var n=require("lit"),m=require("lit/decorators.js"),b=require("../internal/define.cjs"),v=require("./family.cjs"),l=require("./toolbarItem.cjs");var s=class extends n.LitElement{constructor(){super(...arguments);this.href="";this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>this.toolbar?.claimTabStop(this.itemId);this._handleActivate=()=>{this.href&&window.location.assign(this.href)};this._handleKeydown=t=>{t.key==="Enter"&&(t.preventDefault(),this._handleActivate())}}connectedCallback(){super.connectedCallback();let{id:t,toolbar:r}=(0,l.initToolbarItem)(this);this.itemId=t,this.toolbar=r,this.toolbar?.addEventListener(v.TOOLBAR_FAMILY.event,this.onRootUpdate),this.setAttribute("role","link"),this.addEventListener("focus",this._handleFocus),this.addEventListener("click",this._handleActivate),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener(v.TOOLBAR_FAMILY.event,this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("click",this._handleActivate),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){(0,l.syncTabIndex)(this,this.itemId,this.toolbar)}render(){return n.html`<slot></slot>`}};s.styles=n.css`
     :host {
       display: inline-block;
       cursor: pointer;
     }
-  `,c([(0,p.property)({type:String,reflect:!0})],s.prototype,"href",2),s=c([(0,m.customElement)("skdx-toolbar-link","toolbar","link")],s);0&&(module.exports={SkdxToolbarLink});
+  `,c([(0,m.property)({type:String,reflect:!0})],s.prototype,"href",2),s=c([(0,b.customElement)("skdx-toolbar-link","toolbar","link")],s);0&&(module.exports={SkdxToolbarLink});

package/dist/toolbar/ToolbarLink.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * `<skdx-toolbar-link>` — a plain navigable link in the toolbar: sets
  * `role="link"` on itself (the host) and joins the root's roving-tabindex
@@ -23,7 +23,7 @@ export declare class SkdxToolbarLink extends LitElement {
     private readonly _handleFocus;
     private readonly _handleActivate;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarLink.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * `<skdx-toolbar-link>` — a plain navigable link in the toolbar: sets
  * `role="link"` on itself (the host) and joins the root's roving-tabindex
@@ -23,7 +23,7 @@ export declare class SkdxToolbarLink extends LitElement {
     private readonly _handleFocus;
     private readonly _handleActivate;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarLink.js

@@ -1,6 +1,6 @@
-var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,r,t,o)=>{for(var e=o>1?void 0:o?h(r,t):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(e=(o?a(r,t,e):a(e))||e);return o&&e&&l(r,t,e),e};import{css as c,html as v,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{initToolbarItem as y,syncTabIndex as u}from"./toolbarItem.js";var i=class extends p{constructor(){super(...arguments);this.href="";this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>this.toolbar?.claimTabStop(this.itemId);this._handleActivate=()=>{this.href&&window.location.assign(this.href)};this._handleKeydown=t=>{t.key==="Enter"&&(t.preventDefault(),this._handleActivate())}}connectedCallback(){super.connectedCallback();let{id:t,toolbar:o}=y(this);this.itemId=t,this.toolbar=o,this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.setAttribute("role","link"),this.addEventListener("focus",this._handleFocus),this.addEventListener("click",this._handleActivate),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("click",this._handleActivate),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){u(this,this.itemId,this.toolbar)}render(){return v`<slot></slot>`}};i.styles=c`
+var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(s,r,e,o)=>{for(var t=o>1?void 0:o?c(r,e):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(t=(o?a(r,e,t):a(t))||t);return o&&t&&h(r,e,t),t};import{css as v,html as p,LitElement as m}from"lit";import{property as b}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{TOOLBAR_FAMILY as d}from"./family.js";import{initToolbarItem as u,syncTabIndex as f}from"./toolbarItem.js";var i=class extends m{constructor(){super(...arguments);this.href="";this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>this.toolbar?.claimTabStop(this.itemId);this._handleActivate=()=>{this.href&&window.location.assign(this.href)};this._handleKeydown=e=>{e.key==="Enter"&&(e.preventDefault(),this._handleActivate())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:o}=u(this);this.itemId=e,this.toolbar=o,this.toolbar?.addEventListener(d.event,this.onRootUpdate),this.setAttribute("role","link"),this.addEventListener("focus",this._handleFocus),this.addEventListener("click",this._handleActivate),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener(d.event,this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("click",this._handleActivate),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){f(this,this.itemId,this.toolbar)}render(){return p`<slot></slot>`}};i.styles=v`
     :host {
       display: inline-block;
       cursor: pointer;
     }
-  `,d([m({type:String,reflect:!0})],i.prototype,"href",2),i=d([b("skdx-toolbar-link","toolbar","link")],i);export{i as SkdxToolbarLink};
+  `,l([b({type:String,reflect:!0})],i.prototype,"href",2),i=l([y("skdx-toolbar-link","toolbar","link")],i);export{i as SkdxToolbarLink};

package/dist/toolbar/ToolbarSeparator.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var u=(o,t)=>{for(var r in t)l(o,r,{get:t[r],enumerable:!0})},f=(o,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!h.call(o,e)&&e!==r&&l(o,e,{get:()=>t[e],enumerable:!(a=b(t,e))||a.enumerable});return o};var k=o=>f(l({},"__esModule",{value:!0}),o),m=(o,t,r,a)=>{for(var e=a>1?void 0:a?b(t,r):t,c=o.length-1,d;c>=0;c--)(d=o[c])&&(e=(a?d(t,r,e):d(e))||e);return a&&e&&l(t,r,e),e};var v={};u(v,{SkdxToolbarSeparator:()=>i});module.exports=k(v);var s=require("lit"),n=require("../internal/define.cjs");var i=class extends s.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator");let t=this.closest("skdx-toolbar"),r=()=>{let a=t?.orientation??"horizontal";this.setAttribute("aria-orientation",a==="horizontal"?"vertical":"horizontal"),this.setAttribute("data-orientation",a)};t?(0,n.whenUpgraded)(t,r):r()}render(){return s.html`<slot></slot>`}};i.styles=s.css`
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var f=(o,t)=>{for(var r in t)s(o,r,{get:t[r],enumerable:!0})},v=(o,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!u.call(o,e)&&e!==r&&s(o,e,{get:()=>t[e],enumerable:!(a=p(t,e))||a.enumerable});return o};var y=o=>v(s({},"__esModule",{value:!0}),o),d=(o,t,r,a)=>{for(var e=a>1?void 0:a?p(t,r):t,c=o.length-1,m;c>=0;c--)(m=o[c])&&(e=(a?m(t,r,e):m(e))||e);return a&&e&&s(t,r,e),e};var A={};f(A,{SkdxToolbarSeparator:()=>i});module.exports=y(A);var l=require("lit"),n=require("../internal/define.cjs"),b=require("./family.cjs");var i=class extends l.LitElement{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator");let t=b.TOOLBAR_FAMILY.root(this),r=()=>{let a=t?.orientation??"horizontal";this.setAttribute("aria-orientation",a==="horizontal"?"vertical":"horizontal"),this.setAttribute("data-orientation",a)};t?(0,n.whenUpgraded)(t,r):r()}render(){return l.html`<slot></slot>`}};i.styles=l.css`
     :host {
       display: inline-block;
     }
-  `,i=m([(0,n.customElement)("skdx-toolbar-separator","toolbar","separator")],i);0&&(module.exports={SkdxToolbarSeparator});
+  `,i=d([(0,n.customElement)("skdx-toolbar-separator","toolbar","separator")],i);0&&(module.exports={SkdxToolbarSeparator});

package/dist/toolbar/ToolbarSeparator.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * A visual divider for toolbar controls: sets `aria-orientation` to the
  * *opposite* of the toolbar's orientation (a vertical divider in a horizontal toolbar).
@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
 export declare class SkdxToolbarSeparator extends LitElement {
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarSeparator.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * A visual divider for toolbar controls: sets `aria-orientation` to the
  * *opposite* of the toolbar's orientation (a vertical divider in a horizontal toolbar).
@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
 export declare class SkdxToolbarSeparator extends LitElement {
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarSeparator.js

@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(i,t,r,e)=>{for(var o=e>1?void 0:e?d(t,r):t,s=i.length-1,l;s>=0;s--)(l=i[s])&&(o=(e?l(t,r,o):l(o))||o);return e&&o&&c(t,r,o),o};import{css as b,html as m,LitElement as p}from"lit";import{customElement as h,whenUpgraded as u}from"../internal/define.js";var a=class extends p{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator");let t=this.closest("skdx-toolbar"),r=()=>{let e=t?.orientation??"horizontal";this.setAttribute("aria-orientation",e==="horizontal"?"vertical":"horizontal"),this.setAttribute("data-orientation",e)};t?u(t,r):r()}render(){return m`<slot></slot>`}};a.styles=b`
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(i,t,r,e)=>{for(var o=e>1?void 0:e?m(t,r):t,l=i.length-1,s;l>=0;l--)(s=i[l])&&(o=(e?s(t,r,o):s(o))||o);return e&&o&&c(t,r,o),o};import{css as p,html as d,LitElement as b}from"lit";import{customElement as h,whenUpgraded as u}from"../internal/define.js";import{TOOLBAR_FAMILY as f}from"./family.js";var a=class extends b{connectedCallback(){super.connectedCallback(),this.setAttribute("role","separator");let t=f.root(this),r=()=>{let e=t?.orientation??"horizontal";this.setAttribute("aria-orientation",e==="horizontal"?"vertical":"horizontal"),this.setAttribute("data-orientation",e)};t?u(t,r):r()}render(){return d`<slot></slot>`}};a.styles=p`
     :host {
       display: inline-block;
     }

package/dist/toolbar/ToolbarToggleGroup.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var y=(l,t)=>{for(var e in t)p(l,e,{get:t[e],enumerable:!0})},b=(l,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of m(t))!g.call(l,i)&&i!==e&&p(l,i,{get:()=>t[i],enumerable:!(r=h(t,i))||r.enumerable});return l};var _=l=>b(p({},"__esModule",{value:!0}),l),u=(l,t,e,r)=>{for(var i=r>1?void 0:r?h(t,e):t,d=l.length-1,v;d>=0;d--)(v=l[d])&&(i=(r?v(t,e,i):v(i))||i);return r&&i&&p(t,e,i),i};var f={};y(f,{SkdxToolbarToggleGroup:()=>a});module.exports=_(f);var o=require("lit"),n=require("lit/decorators.js"),c=require("../internal/define.cjs"),s=require("../internal/selection.cjs");var a=class extends o.LitElement{constructor(){super(...arguments);this.disabled=!1;this._value=[];this._rawValue=null;this._valueSet=!1}get value(){return[...this._value]}set value(e){this._valueSet=!0,this._rawValue=e??null,(this.type==="single"||this.type==="multiple")&&this._applyValue()}_applyValue(){let e=(0,s.toSelectionValues)(this._rawValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup value"});e.length===this._value.length&&e.every((r,i)=>r===this._value[i])||(this._value=e,this.requestUpdate(),this._notifyItems())}connectedCallback(){if(super.connectedCallback(),this.type!=="single"&&this.type!=="multiple")throw new Error(`<skdx-toolbar-toggle-group> requires type="single" or type="multiple", got ${this.type===void 0?"no type attribute":`"${String(this.type)}"`}.`);this.setAttribute("role","group"),this._syncDisabled(),this._valueSet?this._applyValue():this._value=(0,s.toSelectionValues)(this.defaultValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup defaultValue"})}updated(e){e.has("disabled")&&this._syncDisabled()}_syncDisabled(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(e){this._value=e,this._rawValue=e,this._notifyItems()}_notifyItems(){this.dispatchEvent(new CustomEvent("skdx-toolbar-toggle-group-internal-update",{bubbles:!0,composed:!0}))}activate(e){this._commit((0,s.nextSelection)(this._value,e,this.type==="multiple"))}deactivate(e){this.type==="multiple"&&this._commit((0,s.nextSelection)(this._value,e,!0))}_commit(e){this.setValue(e),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,selectedValue:(0,s.selectedValueOf)(e)},bubbles:!0,composed:!0}))}render(){return o.html`<slot></slot>`}};a.styles=o.css`
+"use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var b=(a,i)=>{for(var e in i)p(a,e,{get:i[e],enumerable:!0})},V=(a,i,e,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of f(i))!_.call(a,t)&&t!==e&&p(a,t,{get:()=>i[t],enumerable:!(l=d(i,t))||l.enumerable});return a};var C=a=>V(p({},"__esModule",{value:!0}),a),o=(a,i,e,l)=>{for(var t=l>1?void 0:l?d(i,e):i,h=a.length-1,v;h>=0;h--)(v=a[h])&&(t=(l?v(i,e,t):v(t))||t);return l&&t&&p(i,e,t),t};var S={};b(S,{SkdxToolbarToggleGroup:()=>s});module.exports=C(S);var u=require("lit"),n=require("lit/decorators.js"),c=require("../internal/define.cjs"),g=require("../internal/events.cjs"),r=require("../internal/selection.cjs"),m=require("../internal/selection-attribute.cjs"),y=require("./family.cjs");var s=class extends u.LitElement{constructor(){super(...arguments);this.disabled=!1;this._value=[];this._rawValue=null;this._valueSet=!1}get value(){return[...this._value]}set value(e){this._valueSet=!0,this._rawValue=e??null,(this.type==="single"||this.type==="multiple")&&this._applyValue()}_applyValue(){let e=(0,r.toSelectionValues)(this._rawValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup value"});e.length===this._value.length&&e.every((l,t)=>l===this._value[t])||(this._value=e,this.requestUpdate(),this._notifyItems())}connectedCallback(){if(super.connectedCallback(),this.type!=="single"&&this.type!=="multiple")throw new Error(`<skdx-toolbar-toggle-group> requires type="single" or type="multiple", got ${this.type===void 0?"no type attribute":`"${String(this.type)}"`}.`);this.setAttribute("role","group"),this._syncDisabled(),this._valueSet?this._applyValue():this._value=(0,r.toSelectionValues)(this.defaultValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup defaultValue"})}updated(e){e.has("disabled")&&this._syncDisabled()}_syncDisabled(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(e){this._value=e,this._rawValue=e,this._notifyItems()}_notifyItems(){y.TOOLBAR_TOGGLE_GROUP_FAMILY.notify(this)}activate(e,l="programmatic"){this._commit((0,r.nextSelection)(this._value,e,this.type==="multiple"),l)}deactivate(e,l="programmatic"){this.type==="multiple"&&this._commit((0,r.nextSelection)(this._value,e,!0),l)}_commit(e,l){let t=this._value;(0,r.sameSelection)(e,t)||(this.setValue(e),(0,g.emit)(this,"value-change",{value:e,selectedValue:(0,r.selectedValueOf)(e),previousValue:t,reason:l}))}render(){return u.html`<slot></slot>`}};s.styles=u.css`
     :host {
       display: inline-flex;
     }
-  `,u([(0,n.property)({type:String,reflect:!0})],a.prototype,"type",2),u([(0,n.property)({type:Boolean,reflect:!0})],a.prototype,"disabled",2),u([(0,n.property)({converter:s.selectionAttributeConverter,attribute:"default-value"})],a.prototype,"defaultValue",2),u([(0,n.property)({converter:s.selectionAttributeConverter,attribute:"value",noAccessor:!0})],a.prototype,"value",1),a=u([(0,c.customElement)("skdx-toolbar-toggle-group","toolbar","toggle-group")],a);0&&(module.exports={SkdxToolbarToggleGroup});
+  `,o([(0,n.property)({type:String,reflect:!0})],s.prototype,"type",2),o([(0,n.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),o([(0,n.property)({converter:m.selectionAttributeConverter,attribute:"default-value"})],s.prototype,"defaultValue",2),o([(0,n.property)({converter:m.selectionAttributeConverter,attribute:"value",noAccessor:!0})],s.prototype,"value",1),s=o([(0,c.customElement)("skdx-toolbar-toggle-group","toolbar","toggle-group")],s);0&&(module.exports={SkdxToolbarToggleGroup});

package/dist/toolbar/ToolbarToggleGroup.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { type SelectionChangeReason } from '../internal/selection.cjs';
 /** Whether a `<skdx-toolbar-toggle-group>` allows one pressed item at a time, or several. */
 export type SkdxToolbarToggleGroupType = 'single' | 'multiple';
 /**
@@ -11,7 +12,7 @@ export type SkdxToolbarToggleGroupType = 'single' | 'multiple';
  *   <skdx-toolbar-toggle-item value="italic">Italic</skdx-toolbar-toggle-item>
  * </skdx-toolbar-toggle-group>
  * ```
- * @fires value-change - Fires with `{ value, selectedValue }` when pressed items change.
+ * @fires value-change - Fires with `{ value, selectedValue, previousValue, reason }` when pressed items change.
  */
 export declare class SkdxToolbarToggleGroup extends LitElement {
     static styles: import("lit").CSSResult;
@@ -35,11 +36,11 @@ export declare class SkdxToolbarToggleGroup extends LitElement {
     private setValue;
     private _notifyItems;
     /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's pressed. */
-    activate(itemValue: string): void;
+    activate(itemValue: string, reason?: SelectionChangeReason): void;
     /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's unpressed (multiple mode only). */
-    deactivate(itemValue: string): void;
+    deactivate(itemValue: string, reason?: SelectionChangeReason): void;
     private _commit;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarToggleGroup.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { type SelectionChangeReason } from '../internal/selection.js';
 /** Whether a `<skdx-toolbar-toggle-group>` allows one pressed item at a time, or several. */
 export type SkdxToolbarToggleGroupType = 'single' | 'multiple';
 /**
@@ -11,7 +12,7 @@ export type SkdxToolbarToggleGroupType = 'single' | 'multiple';
  *   <skdx-toolbar-toggle-item value="italic">Italic</skdx-toolbar-toggle-item>
  * </skdx-toolbar-toggle-group>
  * ```
- * @fires value-change - Fires with `{ value, selectedValue }` when pressed items change.
+ * @fires value-change - Fires with `{ value, selectedValue, previousValue, reason }` when pressed items change.
  */
 export declare class SkdxToolbarToggleGroup extends LitElement {
     static styles: import("lit").CSSResult;
@@ -35,11 +36,11 @@ export declare class SkdxToolbarToggleGroup extends LitElement {
     private setValue;
     private _notifyItems;
     /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's pressed. */
-    activate(itemValue: string): void;
+    activate(itemValue: string, reason?: SelectionChangeReason): void;
     /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's unpressed (multiple mode only). */
-    deactivate(itemValue: string): void;
+    deactivate(itemValue: string, reason?: SelectionChangeReason): void;
     private _commit;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toolbar/ToolbarToggleGroup.js

@@ -1,5 +1,5 @@
-var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(u,a,e,l)=>{for(var t=l>1?void 0:l?c(a,e):a,o=u.length-1,n;o>=0;o--)(n=u[o])&&(t=(l?n(a,e,t):n(t))||t);return l&&t&&h(a,e,t),t};import{css as m,html as g,LitElement as y}from"lit";import{property as r}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{nextSelection as p,selectedValueOf as _,selectionAttributeConverter as d,toSelectionValues as v}from"../internal/selection.js";var i=class extends y{constructor(){super(...arguments);this.disabled=!1;this._value=[];this._rawValue=null;this._valueSet=!1}get value(){return[...this._value]}set value(e){this._valueSet=!0,this._rawValue=e??null,(this.type==="single"||this.type==="multiple")&&this._applyValue()}_applyValue(){let e=v(this._rawValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup value"});e.length===this._value.length&&e.every((l,t)=>l===this._value[t])||(this._value=e,this.requestUpdate(),this._notifyItems())}connectedCallback(){if(super.connectedCallback(),this.type!=="single"&&this.type!=="multiple")throw new Error(`<skdx-toolbar-toggle-group> requires type="single" or type="multiple", got ${this.type===void 0?"no type attribute":`"${String(this.type)}"`}.`);this.setAttribute("role","group"),this._syncDisabled(),this._valueSet?this._applyValue():this._value=v(this.defaultValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup defaultValue"})}updated(e){e.has("disabled")&&this._syncDisabled()}_syncDisabled(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(e){this._value=e,this._rawValue=e,this._notifyItems()}_notifyItems(){this.dispatchEvent(new CustomEvent("skdx-toolbar-toggle-group-internal-update",{bubbles:!0,composed:!0}))}activate(e){this._commit(p(this._value,e,this.type==="multiple"))}deactivate(e){this.type==="multiple"&&this._commit(p(this._value,e,!0))}_commit(e){this.setValue(e),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,selectedValue:_(e)},bubbles:!0,composed:!0}))}render(){return g`<slot></slot>`}};i.styles=m`
+var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var a=(o,s,e,t)=>{for(var i=t>1?void 0:t?d(s,e):s,u=o.length-1,n;u>=0;u--)(n=o[u])&&(i=(t?n(s,e,i):n(i))||i);return t&&i&&m(s,e,i),i};import{css as c,html as g,LitElement as y}from"lit";import{property as r}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{emit as _}from"../internal/events.js";import{nextSelection as p,sameSelection as b,selectedValueOf as V,toSelectionValues as h}from"../internal/selection.js";import{selectionAttributeConverter as v}from"../internal/selection-attribute.js";import{TOOLBAR_TOGGLE_GROUP_FAMILY as C}from"./family.js";var l=class extends y{constructor(){super(...arguments);this.disabled=!1;this._value=[];this._rawValue=null;this._valueSet=!1}get value(){return[...this._value]}set value(e){this._valueSet=!0,this._rawValue=e??null,(this.type==="single"||this.type==="multiple")&&this._applyValue()}_applyValue(){let e=h(this._rawValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup value"});e.length===this._value.length&&e.every((t,i)=>t===this._value[i])||(this._value=e,this.requestUpdate(),this._notifyItems())}connectedCallback(){if(super.connectedCallback(),this.type!=="single"&&this.type!=="multiple")throw new Error(`<skdx-toolbar-toggle-group> requires type="single" or type="multiple", got ${this.type===void 0?"no type attribute":`"${String(this.type)}"`}.`);this.setAttribute("role","group"),this._syncDisabled(),this._valueSet?this._applyValue():this._value=h(this.defaultValue,{multiple:this.type==="multiple",label:"ToolbarToggleGroup defaultValue"})}updated(e){e.has("disabled")&&this._syncDisabled()}_syncDisabled(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(e){this._value=e,this._rawValue=e,this._notifyItems()}_notifyItems(){C.notify(this)}activate(e,t="programmatic"){this._commit(p(this._value,e,this.type==="multiple"),t)}deactivate(e,t="programmatic"){this.type==="multiple"&&this._commit(p(this._value,e,!0),t)}_commit(e,t){let i=this._value;b(e,i)||(this.setValue(e),_(this,"value-change",{value:e,selectedValue:V(e),previousValue:i,reason:t}))}render(){return g`<slot></slot>`}};l.styles=c`
     :host {
       display: inline-flex;
     }
-  `,s([r({type:String,reflect:!0})],i.prototype,"type",2),s([r({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([r({converter:d,attribute:"default-value"})],i.prototype,"defaultValue",2),s([r({converter:d,attribute:"value",noAccessor:!0})],i.prototype,"value",1),i=s([b("skdx-toolbar-toggle-group","toolbar","toggle-group")],i);export{i as SkdxToolbarToggleGroup};
+  `,a([r({type:String,reflect:!0})],l.prototype,"type",2),a([r({type:Boolean,reflect:!0})],l.prototype,"disabled",2),a([r({converter:v,attribute:"default-value"})],l.prototype,"defaultValue",2),a([r({converter:v,attribute:"value",noAccessor:!0})],l.prototype,"value",1),l=a([f("skdx-toolbar-toggle-group","toolbar","toggle-group")],l);export{l as SkdxToolbarToggleGroup};

package/dist/toolbar/ToolbarToggleItem.cjs

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var e in t)l(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!f.call(o,i)&&i!==e&&l(o,i,{get:()=>t[i],enumerable:!(s=c(t,i))||s.enumerable});return o};var y=o=>m(l({},"__esModule",{value:!0}),o),d=(o,t,e,s)=>{for(var i=s>1?void 0:s?c(t,e):t,h=o.length-1,p;h>=0;h--)(p=o[h])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&l(t,e,i),i};var k={};g(k,{SkdxToolbarToggleItem:()=>r});module.exports=y(k);var a=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),n=require("./toolbarItem.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.toolbar=null;this.group=null;this.itemId="";this.onRootUpdate=()=>this._sync();this.onGroupUpdate=()=>this._sync();this._handleFocus=()=>{this.effectiveDisabled||this.toolbar?.claimTabStop(this.itemId)};this._handleClick=()=>{this.effectiveDisabled||!this.group||(this.pressed?this.group.type==="multiple"&&this.group.deactivate(this.value):this.group.activate(this.value))};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.effectiveDisabled&&(e.preventDefault(),this._handleClick())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:s}=(0,n.initToolbarItem)(this);if(this.itemId=e,this.toolbar=s,this.group=this.closest("skdx-toolbar-toggle-group"),!this.group)throw new Error("<skdx-toolbar-toggle-item> must be used inside <skdx-toolbar-toggle-group>.");this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.group.addEventListener("skdx-toolbar-toggle-group-internal-update",this.onGroupUpdate),this.setAttribute("role","button"),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.group?.removeEventListener("skdx-toolbar-toggle-group-internal-update",this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}get pressed(){return this.group?.value.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let e=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),e?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),(0,n.syncTabIndex)(this,this.itemId,this.toolbar)}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var e in t)d(o,e,{get:t[e],enumerable:!0})},g=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!m.call(o,i)&&i!==e&&d(o,i,{get:()=>t[i],enumerable:!(s=c(t,i))||s.enumerable});return o};var _=o=>g(d({},"__esModule",{value:!0}),o),n=(o,t,e,s)=>{for(var i=s>1?void 0:s?c(t,e):t,p=o.length-1,v;p>=0;p--)(v=o[p])&&(i=(s?v(t,e,i):v(i))||i);return s&&i&&d(t,e,i),i};var k={};y(k,{SkdxToolbarToggleItem:()=>r});module.exports=_(k);var l=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),a=require("./family.cjs"),h=require("./toolbarItem.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.toolbar=null;this.group=null;this.itemId="";this.onRootUpdate=()=>this._sync();this.onGroupUpdate=()=>this._sync();this._handleFocus=()=>{this.effectiveDisabled||this.toolbar?.claimTabStop(this.itemId)};this._handleClick=e=>{this._activate(e.detail===0?"keyboard":"pointer")};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.effectiveDisabled&&(e.preventDefault(),this._activate("keyboard"))}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:s}=(0,h.initToolbarItem)(this);if(this.itemId=e,this.toolbar=s,this.group=a.TOOLBAR_TOGGLE_GROUP_FAMILY.root(this),!this.group)throw new Error("<skdx-toolbar-toggle-item> must be used inside <skdx-toolbar-toggle-group>.");this.toolbar?.addEventListener(a.TOOLBAR_FAMILY.event,this.onRootUpdate),this.group.addEventListener(a.TOOLBAR_TOGGLE_GROUP_FAMILY.event,this.onGroupUpdate),this.setAttribute("role","button"),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener(a.TOOLBAR_FAMILY.event,this.onRootUpdate),this.group?.removeEventListener(a.TOOLBAR_TOGGLE_GROUP_FAMILY.event,this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}get pressed(){return this.group?.value.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let e=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),e?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),(0,h.syncTabIndex)(this,this.itemId,this.toolbar)}_activate(e){this.effectiveDisabled||!this.group||(this.pressed?this.group.type==="multiple"&&this.group.deactivate(this.value,e):this.group.activate(this.value,e))}render(){return l.html`<slot></slot>`}};r.styles=l.css`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@
     :host([data-disabled]) {
       cursor: default;
     }
-  `,d([(0,u.property)({type:String,reflect:!0})],r.prototype,"value",2),d([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=d([(0,b.customElement)("skdx-toolbar-toggle-item","toolbar","toggle-item")],r);0&&(module.exports={SkdxToolbarToggleItem});
+  `,n([(0,u.property)({type:String,reflect:!0})],r.prototype,"value",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=n([(0,b.customElement)("skdx-toolbar-toggle-item","toolbar","toggle-item")],r);0&&(module.exports={SkdxToolbarToggleItem});