@kerfjs/ui 4.4.1 → 5.0.0-beta.10

package/dist/chunk-NHXX4JI5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":";;;AA2BO,SAAS,MAAA,CAA6B,EAAE,IAAA,EAAM,KAAA,EAAO,OAAO,SAAA,EAAW,OAAA,EAAS,SAAA,GAAY,EAAA,EAAI,aAAa,QAAA,GAAW,KAAA,EAAO,OAAA,GAAU,KAAA,EAAO,gBAAe,EAAuB;AAC3L,EAAA,MAAM,WAAW,OAAA,CAAQ,IAAA,CAAK,CAAC,MAAA,KAAW,MAAA,CAAO,UAAU,KAAK,CAAA;AAChE,EAAA,MAAM,OAAO,CAAC,MAAA,EAA6B,eAAe,KAAA,qBAAU,GAAA,CAAC,UAAK,IAAA,EAAK,OAAA,EAAQ,OAAO,CAAA,gBAAA,EAAmB,YAAA,GAAe,gCAAgC,EAAE,CAAA,CAAA,EAAI,OAAO,MAAA,CAAO,KAAA,GAAQ,SAAS,MAAA,CAAO,KAAK,CAAA,CAAA,GAAK,MAAA,EAAY,iBAAO,IAAA,mBAAO,GAAA,CAAC,cAAW,IAAA,EAAM,MAAA,CAAO,MAAM,IAAA,EAAM,MAAA,CAAO,YAAY,MAAA,CAAO,KAAA,CAAM,aAAY,CAAE,UAAA,CAAW,KAAK,GAAG,CAAA,EAAG,IAAK,IAAA,EAAK,CAAA;AACnW,EAAA,MAAM,MAAA,GAAS,CAAC,MAAA,qBAAgC,IAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,eAAA,wBAAoB,YAAA,EAAA,EAAW,CAAA;AAAA,oBAAc,IAAA,CAAC,WAAA,EAAA,EAAU,KAAA,EAAO,MAAA,CAAO,KAAA,EAAQ,QAAA,EAAA;AAAA,MAAA,MAAA,CAAO,IAAA,GAAO,IAAA,CAAK,MAAM,CAAA,GAAI,IAAA;AAAA,MAAM,MAAA,CAAO;AAAA,KAAA,EAAM;AAAA,GAAA,EAAY,CAAA;AACpM,EAAA,MAAM,SAAS,CAAC,GAAG,IAAI,GAAA,CAAI,OAAA,CAAQ,IAAI,CAAC,MAAA,KAAW,OAAO,KAAK,CAAA,CAAE,OAAO,CAAC,KAAA,KAA2B,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAA;AACpH,EAAA,MAAM,YAAY,OAAA,CAAQ,MAAA,CAAO,CAAC,MAAA,KAAW,CAAC,OAAO,KAAK,CAAA;AAC1D,EAAA,uBAAO,IAAA,CAAC,WAAA,EAAA,EAAU,KAAA,EAAO,CAAA,UAAA,EAAa,cAAA,GAAiB,iCAAiC,EAAE,CAAA,EAAG,OAAA,GAAU,uBAAA,GAA0B,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,QAAA,EAAS,IAAA,EAAY,OAAc,YAAA,EAAY,SAAA,EAAW,KAAA,EAAc,WAAA,EAA0B,QAAA,EACzQ,QAAA,EAAA;AAAA,IAAA,QAAA,KAAa,iCAAiB,GAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAM,6BAAA,EAA+B,QAAA,EAAA,cAAA,CAAe,QAAQ,CAAA,EAAE,IAAU,QAAA,CAAS,IAAA,GAAO,IAAA,CAAK,QAAA,EAAU,IAAI,CAAA,GAAI,IAAA,CAAA;AAAA,IAChK,SAAA,CAAU,IAAI,MAAM,CAAA;AAAA,IACpB,MAAA,CAAO,IAAI,CAAC,KAAA,EAAO,0BAAU,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,CAAA,iBAAA,EAAoB,KAAA,GAAQ,KAAK,SAAA,CAAU,MAAA,GAAS,IAAI,+BAAA,GAAkC,EAAE,IAAI,IAAA,EAAK,OAAA,EAAQ,cAAY,KAAA,EAAO,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAAQ,OAAA,CAAQ,OAAO,CAAC,MAAA,KAAW,OAAO,KAAA,KAAU,KAAK,CAAA,CAAE,GAAA,CAAI,MAAM;AAAA,KAAA,EAAE,CAAM;AAAA,GAAA,EACtS,CAAA;AACF","file":"chunk-NHXX4JI5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  color?: string;\n  group?: string;\n  separatorBefore?: boolean;\n}\n\nexport interface SelectProps<Value extends string = string> {\n  name: string;\n  value: Value;\n  label?: string;\n  ariaLabel?: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  fitMenu?: boolean;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n}\n\nexport function Select<Value extends string>({ name, value, label, ariaLabel, choices, className = '', placeholder, disabled = false, fitMenu = false, renderSelected }: SelectProps<Value>) {\n  const selected = choices.find((choice) => choice.value === value);\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => <span slot=\"start\" class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`} style={choice.color ? `color:${choice.color}` : undefined}>{choice.icon ? <LucideIcon icon={choice.icon} name={choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')} /> : null}</span>;\n  const option = (choice: SelectChoice<Value>) => <>{choice.separatorBefore && <wa-divider></wa-divider>}<wa-option value={choice.value}>{choice.icon ? icon(choice) : null}{choice.label}</wa-option></>;\n  const groups = [...new Set(choices.map((choice) => choice.group).filter((group): group is string => Boolean(group)))];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  return <wa-select class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()} data-component=\"select\" name={name} label={label} aria-label={ariaLabel} value={value} placeholder={placeholder} disabled={disabled}>\n    {selected && (renderSelected ? <span slot=\"start\" class=\"kui-select__custom-selected\">{renderSelected(selected)}</span> : selected.icon ? icon(selected, true) : null)}\n    {ungrouped.map(option)}\n    {groups.map((group, index) => <div class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`} role=\"group\" aria-label={group}><span class=\"kui-select__group-title\">{group}</span>{choices.filter((choice) => choice.group === group).map(option)}</div>)}\n  </wa-select>;\n}\n"]}

package/dist/chunk-OPCJRCYO.js

@@ -1,19 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/menu-header.tsx
-function MenuHeader({ label, action, actionLabel, actionIcon, actionDisabled = false, disabledReason, expanded, toggle = false }) {
-  if (toggle) {
-    return /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-menu-header kui-menu-header--toggle", "data-component": "menu-header", "data-action": action, "aria-expanded": String(Boolean(expanded)), children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      actionIcon
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("header", { class: "kui-menu-header", "data-component": "menu-header", children: [
-    /* @__PURE__ */ jsx("h2", { children: label }),
-    action && /* @__PURE__ */ jsx("button", { type: "button", "data-action": action, "aria-label": actionLabel, title: actionDisabled ? disabledReason : actionLabel, disabled: actionDisabled || void 0, children: actionIcon })
-  ] });
-}
-
-export { MenuHeader };
-
-//# sourceMappingURL=chunk-OPCJRCYO.js.map

package/dist/chunk-OPCJRCYO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-header.tsx"],"names":[],"mappings":";;;AAaO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAQ,WAAA,EAAa,UAAA,EAAY,cAAA,GAAiB,KAAA,EAAO,cAAA,EAAgB,QAAA,EAAU,MAAA,GAAS,KAAA,EAAM,EAAoB;AACxJ,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAM,yCAAA,EAA0C,gBAAA,EAAe,aAAA,EAAc,aAAA,EAAa,QAAQ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAC,CAAA,EAAG,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAAQ;AAAA,KAAA,EAAW,CAAA;AAAA,EAC3M;AACA,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,0BAAU,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,eAAa,MAAA,EAAQ,YAAA,EAAY,WAAA,EAAa,KAAA,EAAO,iBAAiB,cAAA,GAAiB,WAAA,EAAa,QAAA,EAAU,cAAA,IAAkB,QAAY,QAAA,EAAA,UAAA,EAAW;AAAA,GAAA,EAAU,CAAA;AACxR","file":"chunk-OPCJRCYO.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface MenuHeaderProps {\n  label: string;\n  action?: string;\n  actionLabel?: string;\n  actionIcon?: SafeHtml;\n  actionDisabled?: boolean;\n  disabledReason?: string;\n  expanded?: boolean;\n  toggle?: boolean;\n}\n\nexport function MenuHeader({ label, action, actionLabel, actionIcon, actionDisabled = false, disabledReason, expanded, toggle = false }: MenuHeaderProps) {\n  if (toggle) {\n    return <button type=\"button\" class=\"kui-menu-header kui-menu-header--toggle\" data-component=\"menu-header\" data-action={action} aria-expanded={String(Boolean(expanded))}><span>{label}</span>{actionIcon}</button>;\n  }\n  return <header class=\"kui-menu-header\" data-component=\"menu-header\"><h2>{label}</h2>{action && <button type=\"button\" data-action={action} aria-label={actionLabel} title={actionDisabled ? disabledReason : actionLabel} disabled={actionDisabled || undefined}>{actionIcon}</button>}</header>;\n}\n"]}

package/dist/chunk-T5XNMVOI.js

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/app-tab.tsx
-function CloseIcon() {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.25", "stroke-linecap": "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "m7 7 10 10" }),
-    /* @__PURE__ */ jsx("path", { d: "M17 7 7 17" })
-  ] });
-}
-function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, selectAction = "select-tab", closeAction = "close-tab", className = "", rootAttributes = {} }) {
-  const keyshortcuts = [closable ? "Delete Backspace" : "", draggable ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { class: `kui-app-tab ${className}`.trim(), ...rootAttributes, "data-component": "app-tab", "data-tab-id": id, "data-selected": String(selected), draggable: draggable ? "true" : "false", children: [
-    closable && /* @__PURE__ */ jsx("button", { type: "button", tabindex: "-1", class: "kui-app-tab__close", "data-action": closeAction, "data-tab-id": id, "aria-label": `Close ${name}`, title: `Close ${name}`, children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
-    /* @__PURE__ */ jsxs("button", { type: "button", class: "kui-app-tab__select", role: "tab", "aria-selected": String(selected), "aria-keyshortcuts": keyshortcuts || void 0, "data-action": selectAction, "data-tab-id": id, tabindex: selected ? "0" : "-1", children: [
-      leading,
-      /* @__PURE__ */ jsx("span", { class: "kui-app-tab__name", children: name }),
-      closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-app-tab__trailing", children: trailing }) : void 0
-    ] })
-  ] });
-}
-
-export { AppTab };
-
-//# sourceMappingURL=chunk-T5XNMVOI.js.map

package/dist/chunk-T5XNMVOI.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":";;;AAgBA,SAAS,SAAA,GAAY;AACnB,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,cAAA,EAAa,MAAA,EAAO,kBAAe,OAAA,EAAQ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA,GAAA,EAAO,CAAA;AAC1L;AAEO,SAAS,MAAA,CAAO,EAAE,EAAA,EAAI,IAAA,EAAM,WAAW,KAAA,EAAO,QAAA,GAAW,MAAM,SAAA,GAAY,KAAA,EAAO,SAAS,QAAA,EAAU,YAAA,GAAe,cAAc,WAAA,GAAc,WAAA,EAAa,YAAY,EAAA,EAAI,cAAA,GAAiB,EAAC,EAAE,EAAgB;AACtN,EAAA,MAAM,YAAA,GAAe,CAAC,QAAA,GAAW,kBAAA,GAAqB,EAAA,EAAI,SAAA,GAAY,0CAAA,GAA6C,EAAE,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAC/I,EAAA,uBAAO,IAAA,CAAC,SAAI,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,IAAS,GAAG,cAAA,EAAgB,kBAAe,SAAA,EAAU,aAAA,EAAa,IAAI,eAAA,EAAe,MAAA,CAAO,QAAQ,CAAA,EAAG,SAAA,EAAW,SAAA,GAAY,MAAA,GAAS,OAAA,EAClL,QAAA,EAAA;AAAA,IAAA,QAAA,oBAAY,GAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,UAAS,IAAA,EAAK,KAAA,EAAM,oBAAA,EAAqB,aAAA,EAAa,WAAA,EAAa,aAAA,EAAa,IAAI,YAAA,EAAY,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,KAAA,EAAO,SAAS,IAAI,CAAA,CAAA,EAAI,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,EAAE,CAAA;AAAA,oBACzL,IAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,OAAM,qBAAA,EAAsB,IAAA,EAAK,KAAA,EAAM,eAAA,EAAe,MAAA,CAAO,QAAQ,GAAG,mBAAA,EAAmB,YAAA,IAAgB,QAAW,aAAA,EAAa,YAAA,EAAc,eAAa,EAAA,EAAI,QAAA,EAAU,QAAA,GAAW,GAAA,GAAM,IAAA,EAChN,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAqB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,MAAQ,YAAY,QAAA,mBAAW,GAAA,CAAC,UAAK,KAAA,EAAM,uBAAA,EAAyB,oBAAS,CAAA,GAAU;AAAA,KAAA,EACxI;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-T5XNMVOI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface AppTabProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  rootAttributes?: Readonly<Record<`data-${string}`, string>>;\n}\n\nfunction CloseIcon() {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"><path d=\"m7 7 10 10\"></path><path d=\"M17 7 7 17\"></path></svg>;\n}\n\nexport function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, selectAction = 'select-tab', closeAction = 'close-tab', className = '', rootAttributes = {} }: AppTabProps) {\n  const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n  return <div class={`kui-app-tab ${className}`.trim()} {...rootAttributes} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} draggable={draggable ? 'true' : 'false'}>\n    {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={closeAction} data-tab-id={id} aria-label={`Close ${name}`} title={`Close ${name}`}><CloseIcon /></button>}\n    <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={keyshortcuts || undefined} data-action={selectAction} data-tab-id={id} tabindex={selected ? '0' : '-1'}>\n      {leading}<span class=\"kui-app-tab__name\">{name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n    </button>\n  </div>;\n}\n"]}

package/dist/chunk-TRNBHPNW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AA4BO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY;AACd,CAAA,EAA0B;AACxB,EAAA,uBAAO,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACN,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,QAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,KAAA;AAClC,QAAA,uBAAO,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACN,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,MAAA;AAAA,YACb,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,OAAO,MAAA,CAAO,KAAA;AAAA,YACd,UAAU,MAAA,CAAO,QAAA;AAAA,YACjB,QAAA,EAAS,GAAA;AAAA,YACT,QAAA,EAAA,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,KAAA,EAAM;AAAA;AAAA,SAAQ;AAAA,MAClD,CAAC;AAAA;AAAA,GACH;AACF","file":"chunk-TRNBHPNW.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice {\n  value: string;\n  label: string;\n  content?: SafeHtml;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  id: string;\n  label: string;\n  value: string;\n  choices: readonly SegmentedControlChoice[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n}\n\nexport function SegmentedControl({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n}: SegmentedControlProps) {\n  return <div\n    class={`kui-segmented-control ${className}`.trim()}\n    data-component=\"segmented-control\"\n    data-segmented-control-id={id}\n    data-value={value}\n    data-appearance={appearance}\n    data-shape={shape}\n    data-size={size}\n    data-layout={layout}\n    role=\"group\"\n    aria-label={label}\n  >\n    {choices.map((choice) => {\n      const selected = choice.value === value;\n      return <button\n        type=\"button\"\n        class=\"kui-segmented-control__item\"\n        data-action={action}\n        data-segment-value={choice.value}\n        data-selected={String(selected)}\n        aria-label={choice.label}\n        aria-pressed={String(selected)}\n        title={choice.title}\n        disabled={choice.disabled}\n        tabindex=\"0\"\n      >{choice.content ?? <span>{choice.label}</span>}</button>;\n    })}\n  </div>;\n}\n"]}

package/dist/chunk-VHW5YNIB.js

@@ -1,17 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/state-banner.tsx
-function StateBanner({ title, detail, icon, action, tone = "info", urgency = "status", className = "" }) {
-  return /* @__PURE__ */ jsxs("section", { class: `kui-state-banner ${className}`.trim(), "data-component": "state-banner", "data-tone": tone, role: urgency, "aria-live": urgency === "alert" ? "assertive" : "polite", children: [
-    icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
-    /* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
-      /* @__PURE__ */ jsx("strong", { children: title }),
-      detail && /* @__PURE__ */ jsx("span", { children: detail })
-    ] }),
-    action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
-  ] });
-}
-
-export { StateBanner };
-
-//# sourceMappingURL=chunk-VHW5YNIB.js.map

package/dist/chunk-VHW5YNIB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;AAcO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,MAAA,EAAQ,IAAA,EAAM,MAAA,EAAQ,IAAA,GAAO,MAAA,EAAQ,OAAA,GAAU,QAAA,EAAU,SAAA,GAAY,EAAA,EAAG,EAAqB;AAChI,EAAA,4BAAQ,SAAA,EAAA,EAAQ,KAAA,EAAO,oBAAoB,SAAS,CAAA,CAAA,CAAG,MAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,MAAM,IAAA,EAAM,OAAA,EAAS,aAAW,OAAA,KAAY,OAAA,GAAU,cAAc,QAAA,EACzK,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EAAyB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAAU,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EAAQ,CAAA;AAAA,IAC5F,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC3D,CAAA;AACF","file":"chunk-VHW5YNIB.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: SafeHtml;\n  tone?: StateBannerTone;\n  urgency?: 'status' | 'alert';\n  className?: string;\n}\n\nexport function StateBanner({ title, detail, icon, action, tone = 'info', urgency = 'status', className = '' }: StateBannerProps) {\n  return <section class={`kui-state-banner ${className}`.trim()} data-component=\"state-banner\" data-tone={tone} role={urgency} aria-live={urgency === 'alert' ? 'assertive' : 'polite'}>\n    {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n    <div class=\"kui-state-banner__copy\"><strong>{title}</strong>{detail && <span>{detail}</span>}</div>\n    {action && <div class=\"kui-state-banner__action\">{action}</div>}\n  </section>;\n}\n"]}

package/dist/chunk-VKH2JLDZ.js

@@ -1,10 +0,0 @@
-import { jsx } from 'kerfjs/jsx-runtime';
-
-// src/value-table.tsx
-function ValueTable({ label, className = "", children }) {
-  return /* @__PURE__ */ jsx("dl", { class: `kui-value-table ${className}`.trim(), "data-component": "value-table", "aria-label": label, children });
-}
-
-export { ValueTable };
-
-//# sourceMappingURL=chunk-VKH2JLDZ.js.map

package/dist/chunk-VKH2JLDZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/value-table.tsx"],"names":[],"mappings":";;;AAQO,SAAS,WAAW,EAAE,KAAA,EAAO,SAAA,GAAY,EAAA,EAAI,UAAS,EAAoB;AAC/E,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,aAAA,EAAc,YAAA,EAAY,KAAA,EAAQ,QAAA,EAAS,CAAA;AACrH","file":"chunk-VKH2JLDZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | SafeHtml[];\n}\n\nexport function ValueTable({ label, className = '', children }: ValueTableProps) {\n  return <dl class={`kui-value-table ${className}`.trim()} data-component=\"value-table\" aria-label={label}>{children}</dl>;\n}\n"]}

package/dist/chunk-WY4CAEPG.js

@@ -1,14 +0,0 @@
-import { jsxs, jsx } from 'kerfjs/jsx-runtime';
-
-// src/menu-item.tsx
-function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = "", style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex }) {
-  return /* @__PURE__ */ jsxs("button", { type: "button", class: `kui-menu-item ${className}`.trim(), style, title, disabled, tabindex: tabIndex, "data-component": "menu-item", "data-action": action, "data-item-id": itemId, "data-multiline": multiline ? "true" : void 0, "data-state": state, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
-    icon && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__icon", children: icon }),
-    /* @__PURE__ */ jsx("span", { class: "kui-menu-item__label", children: label }),
-    trailing && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__trailing", children: trailing })
-  ] });
-}
-
-export { MenuItem };
-
-//# sourceMappingURL=chunk-WY4CAEPG.js.map

package/dist/chunk-WY4CAEPG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-item.tsx"],"names":[],"mappings":";;;AAoBO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,UAAU,QAAA,GAAW,KAAA,EAAO,QAAQ,MAAA,EAAQ,SAAA,GAAY,IAAI,KAAA,EAAO,OAAA,EAAS,iBAAiB,KAAA,EAAO,SAAA,GAAY,OAAO,KAAA,EAAO,QAAA,GAAW,KAAA,EAAO,QAAA,EAAS,EAAkB;AACjN,EAAA,4BAAQ,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,iBAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,OAAc,KAAA,EAAc,QAAA,EAAoB,UAAU,QAAA,EAAU,gBAAA,EAAe,aAAY,aAAA,EAAa,MAAA,EAAQ,cAAA,EAAc,MAAA,EAAQ,kBAAgB,SAAA,GAAY,MAAA,GAAS,QAAW,YAAA,EAAY,KAAA,EAAO,cAAY,eAAA,EAAiB,cAAA,EAAc,QAAA,GAAW,MAAA,GAAS,QAAW,cAAA,EAAc,OAAA,KAAY,SAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EAC7Z,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACjD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACzC,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,2BAA2B,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/D,CAAA;AACF","file":"chunk-WY4CAEPG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface MenuItemProps {\n  label: string | SafeHtml;\n  icon?: SafeHtml;\n  trailing?: SafeHtml;\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  style?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n}\n\nexport function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = '', style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex }: MenuItemProps) {\n  return <button type=\"button\" class={`kui-menu-item ${className}`.trim()} style={style} title={title} disabled={disabled} tabindex={tabIndex} data-component=\"menu-item\" data-action={action} data-item-id={itemId} data-multiline={multiline ? 'true' : undefined} data-state={state} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)}>\n    {icon && <span class=\"kui-menu-item__icon\">{icon}</span>}\n    <span class=\"kui-menu-item__label\">{label}</span>\n    {trailing && <span class=\"kui-menu-item__trailing\">{trailing}</span>}\n  </button>;\n}\n"]}

package/dist/dialog-header.d.ts

@@ -1,14 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface DialogHeaderProps {
-    title: string;
-    titleId: string;
-    summary: string;
-    summaryId?: string;
-    icon?: SafeHtml;
-    iconClassName?: string;
-    actions?: SafeHtml;
-}
-declare function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions }: DialogHeaderProps): SafeHtml;
-
-export { DialogHeader, type DialogHeaderProps };

package/dist/dialog-header.js

@@ -1,3 +0,0 @@
-export { DialogHeader } from './chunk-723YNJBH.js';
-
-//# sourceMappingURL=dialog-header.js.map

package/dist/dialog-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"dialog-header.js"}

package/dist/menu-header.d.ts

@@ -1,15 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface MenuHeaderProps {
-    label: string;
-    action?: string;
-    actionLabel?: string;
-    actionIcon?: SafeHtml;
-    actionDisabled?: boolean;
-    disabledReason?: string;
-    expanded?: boolean;
-    toggle?: boolean;
-}
-declare function MenuHeader({ label, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle }: MenuHeaderProps): SafeHtml;
-
-export { MenuHeader, type MenuHeaderProps };

package/dist/menu-header.js

@@ -1,3 +0,0 @@
-export { MenuHeader } from './chunk-OPCJRCYO.js';
-
-//# sourceMappingURL=menu-header.js.map

package/dist/menu-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-header.js"}

package/dist/menu-item.d.ts

@@ -1,22 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface MenuItemProps {
-    label: string | SafeHtml;
-    icon?: SafeHtml;
-    trailing?: SafeHtml;
-    selected?: boolean;
-    action: string;
-    itemId?: string;
-    className?: string;
-    style?: string;
-    pressed?: boolean;
-    accessibleLabel?: string;
-    title?: string;
-    multiline?: boolean;
-    state?: string;
-    disabled?: boolean;
-    tabIndex?: number;
-}
-declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex }: MenuItemProps): SafeHtml;
-
-export { MenuItem, type MenuItemProps };

package/dist/menu-item.js

@@ -1,3 +0,0 @@
-export { MenuItem } from './chunk-WY4CAEPG.js';
-
-//# sourceMappingURL=menu-item.js.map

package/dist/menu-item.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"menu-item.js"}

package/dist/page-header.d.ts

@@ -1,9 +0,0 @@
-import { SafeHtml } from 'kerfjs';
-
-interface PageHeaderProps {
-    title: string | SafeHtml;
-    action?: SafeHtml;
-}
-declare function PageHeader({ title, action }: PageHeaderProps): SafeHtml;
-
-export { PageHeader, type PageHeaderProps };

package/dist/page-header.js

@@ -1,3 +0,0 @@
-export { PageHeader } from './chunk-2PES33HS.js';
-
-//# sourceMappingURL=page-header.js.map

package/dist/page-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"page-header.js"}

package/src/app-tab.css

@@ -1,20 +0,0 @@
-.kui-app-tab { --kui-app-tab-color: var(--kui-color-neutral-on-quiet); --kui-app-tab-hover-background: color-mix(in srgb, var(--kui-color-surface) 72%, transparent); --kui-app-tab-selected-color: var(--kui-color-brand-on-quiet); --kui-app-tab-selected-background: var(--kui-color-surface); --kui-app-tab-selected-border: color-mix(in srgb, var(--kui-color-neutral-border-normal) 80%, transparent); --kui-app-tab-drop-indicator: var(--kui-color-brand-border-normal); position: relative; display: flex; width: max-content; min-width: max-content; height: 2rem; border: 0; border-radius: var(--kui-radius-pill); color: var(--kui-app-tab-color); background: transparent; align-items: center; flex: none; }
-.kui-app-tab:hover { background: var(--kui-app-tab-hover-background); }
-.kui-app-tab[data-selected="true"] { color: var(--kui-app-tab-selected-color); background: var(--kui-app-tab-selected-background); box-shadow: var(--kui-shadow-s), inset 0 0 0 1px var(--kui-app-tab-selected-border); }
-.kui-app-tab[data-tab-dragging="true"] { opacity: .55; }
-.kui-app-tab[data-tab-drop-position]::after { position: absolute; z-index: 2; top: .2rem; bottom: .2rem; width: 2px; border-radius: var(--kui-radius-pill); background: var(--kui-app-tab-drop-indicator); content: ""; pointer-events: none; }
-.kui-app-tab[data-tab-drop-position="before"]::after { inset-inline-start: calc(var(--kui-space-2xs) * -1); }
-.kui-app-tab[data-tab-drop-position="after"]::after { inset-inline-end: calc(var(--kui-space-2xs) * -1); }
-.kui-app-tab__select { display: flex; min-width: 0; height: 100%; padding: 0 var(--kui-space-s); border: 0; appearance: none; color: inherit; background: transparent; cursor: pointer; font: inherit; align-items: center; gap: var(--kui-space-xs); text-align: start; }
-.kui-app-tab:has(.kui-app-tab__close) .kui-app-tab__select { padding-inline-start: var(--kui-space-2xs); }
-.kui-app-tab:has(.kui-app-tab__select:focus-visible) { outline: var(--kui-focus-ring); outline-offset: -2px; }
-.kui-app-tab__select:focus-visible { outline: none; }
-.kui-app-tab__close:focus-visible { border-radius: var(--kui-radius-pill); outline: var(--kui-focus-ring); outline-offset: -2px; }
-.kui-app-tab__select > svg { width: 1rem; height: 1rem; flex: none; }
-.kui-app-tab__name { overflow: hidden; font-size: var(--kui-font-xs); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
-.kui-app-tab__trailing { display: grid; min-width: 1.275rem; min-height: 1.275rem; flex: none; place-items: center; }
-.kui-app-tab__close { display: grid; width: 1.275rem; height: 1.275rem; margin-inline-start: var(--kui-space-xs); padding: 0; border: 0; appearance: none; color: var(--kui-color-neutral-on-quiet); background: transparent; cursor: pointer; flex: none; place-items: center; }
-.kui-app-tab__close:hover { color: var(--kui-color-text); }
-.kui-app-tab__close svg { width: .6375rem; height: .6375rem; }
-@media (hover: hover) and (pointer: fine) { .kui-app-tab__close { opacity: 0; pointer-events: none; transition: opacity .12s ease; } .kui-app-tab:hover .kui-app-tab__close, .kui-app-tab:focus-within .kui-app-tab__close { opacity: 1; pointer-events: auto; } }
-@media (prefers-reduced-motion: reduce) { .kui-app-tab__close { transition: none; } }

package/src/dialog-header.css

@@ -1,9 +0,0 @@
-.kui-dialog-header { --kui-dialog-header-border: var(--kui-color-border); --kui-dialog-header-icon-background: var(--kui-color-brand-fill-quiet); --kui-dialog-header-icon-foreground: var(--kui-color-brand-on-quiet); display: grid; min-height: 4.9rem; padding: var(--kui-space-m) var(--kui-space-l); box-sizing: border-box; border-bottom: 1px solid var(--kui-dialog-header-border); grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: var(--kui-space-m); }
-.kui-dialog-header[data-has-icon="false"] { grid-template-columns: minmax(0, 1fr) auto; }
-.kui-dialog-header__icon { display: grid; width: 2rem; height: 2rem; border-radius: var(--kui-radius-circle); color: var(--kui-dialog-header-icon-foreground); background: var(--kui-dialog-header-icon-background); place-items: center; }
-.kui-dialog-header__icon svg { width: 1.25rem; height: 1.25rem; }
-.kui-dialog-header__copy { min-width: 0; }
-.kui-dialog-header h2, .kui-dialog-header p { margin: 0; }
-.kui-dialog-header h2 { color: var(--kui-color-text); font-size: var(--kui-font-l); line-height: 1.2; }
-.kui-dialog-header p { margin-block-start: var(--kui-space-2xs); color: var(--kui-color-text-quiet); }
-.kui-dialog-header__actions { display: flex; align-items: center; gap: var(--kui-space-xs); }

package/src/empty-state.css

@@ -1,6 +0,0 @@
-.kui-empty-state { --kui-empty-state-foreground: var(--kui-color-neutral-on-quiet); --kui-empty-state-title: var(--kui-color-text); display: grid; width: min(100%, 28rem); min-height: 12rem; margin: auto; padding: var(--kui-space-xl); box-sizing: border-box; color: var(--kui-empty-state-foreground); place-items: center; place-content: center; gap: var(--kui-space-xs); text-align: center; }
-.kui-empty-state__icon { display: grid; min-width: 2rem; min-height: 2rem; margin-block-end: var(--kui-space-xs); color: inherit; place-items: center; }
-.kui-empty-state__icon svg { width: 2rem; height: 2rem; stroke-width: 1.5; }
-.kui-empty-state strong { color: var(--kui-empty-state-title); font-size: var(--kui-font-l); font-weight: 650; }
-.kui-empty-state > span { max-width: 24rem; font-size: var(--kui-font-s); line-height: 1.45; }
-.kui-empty-state__action { margin-block-start: var(--kui-space-xs); }

package/src/foundation.css

@@ -1,106 +0,0 @@
-:root {
-  color-scheme: light dark;
-
-  /* Web Awesome-compatible typography and geometry with stable standalone fallbacks. */
-  --kui-font-sans: var(--wa-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
-  --kui-font-mono: var(--wa-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace);
-  --kui-font-2xs: var(--wa-font-size-2xs, 11px);
-  --kui-font-xs: var(--wa-font-size-xs, 12px);
-  --kui-font-s: var(--wa-font-size-s, 14px);
-  --kui-font-m: var(--wa-font-size-m, 16px);
-  --kui-font-l: var(--wa-font-size-l, 20px);
-  --kui-font-2xl: var(--wa-font-size-2xl, 32px);
-  --kui-font-weight-semibold: var(--wa-font-weight-semibold, 650);
-  --kui-space-2xs: var(--wa-space-2xs, .25rem);
-  --kui-space-xs: var(--wa-space-xs, .5rem);
-  --kui-space-s: var(--wa-space-s, .75rem);
-  --kui-space-m: var(--wa-space-m, 1rem);
-  --kui-space-l: var(--wa-space-l, 1.5rem);
-  --kui-space-xl: var(--wa-space-xl, 2rem);
-  --kui-radius-s: var(--wa-border-radius-s, .1875rem);
-  --kui-radius-m: var(--wa-border-radius-m, .375rem);
-  --kui-radius-l: var(--wa-border-radius-l, .75rem);
-  --kui-radius-circle: var(--wa-border-radius-circle, 50%);
-  --kui-radius-pill: var(--wa-border-radius-pill, 999px);
-  --kui-disclosure-icon-scale: .5;
-
-  /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
-  --kui-color-surface: var(--wa-color-surface-default, light-dark(#fff, #1c1c1e));
-  --kui-color-surface-raised: var(--wa-color-surface-raised, var(--kui-color-surface));
-  --kui-color-surface-lowered: var(--wa-color-surface-lowered, light-dark(#f2f2f7, #111113));
-  --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
-  --kui-color-text-quiet: var(--wa-color-text-quiet, light-dark(#6e6e73, #aeaeb2));
-  --kui-color-text-link: var(--wa-color-text-link, var(--kui-color-brand-fill-loud));
-
-  --kui-color-neutral-fill-quiet: var(--wa-color-neutral-fill-quiet, var(--kui-color-surface-lowered));
-  --kui-color-neutral-fill-normal: var(--wa-color-neutral-fill-normal, light-dark(#e5e5ea, #3a3a3c));
-  --kui-color-neutral-fill-loud: var(--wa-color-neutral-fill-loud, light-dark(#48484a, #e5e5ea));
-  --kui-color-neutral-border-quiet: var(--wa-color-neutral-border-quiet, var(--kui-color-neutral-fill-normal));
-  --kui-color-neutral-border-normal: var(--wa-color-neutral-border-normal, light-dark(#d1d1d6, #48484a));
-  --kui-color-neutral-border-loud: var(--wa-color-neutral-border-loud, light-dark(#aeaeb2, #636366));
-  --kui-color-neutral-on-quiet: var(--wa-color-neutral-on-quiet, var(--kui-color-text-quiet));
-  --kui-color-neutral-on-normal: var(--wa-color-neutral-on-normal, var(--kui-color-text));
-  --kui-color-neutral-on-loud: var(--wa-color-neutral-on-loud, var(--kui-color-surface));
-
-  --kui-color-brand-fill-loud: var(--wa-color-brand-fill-loud, light-dark(#0088ff, #64d2ff));
-  --kui-color-brand-fill-quiet: var(--wa-color-brand-fill-quiet, color-mix(in srgb, var(--kui-color-brand-fill-loud) 8%, var(--kui-color-surface)));
-  --kui-color-brand-fill-normal: var(--wa-color-brand-fill-normal, color-mix(in srgb, var(--kui-color-brand-fill-loud) 16%, var(--kui-color-surface)));
-  --kui-color-brand-border-quiet: var(--wa-color-brand-border-quiet, color-mix(in srgb, var(--kui-color-brand-fill-loud) 35%, var(--kui-color-surface)));
-  --kui-color-brand-border-normal: var(--wa-color-brand-border-normal, color-mix(in srgb, var(--kui-color-brand-fill-loud) 58%, var(--kui-color-surface)));
-  --kui-color-brand-border-loud: var(--wa-color-brand-border-loud, var(--kui-color-brand-fill-loud));
-  --kui-color-brand-on-quiet: var(--wa-color-brand-on-quiet, light-dark(#1e6ef4, #8acbff));
-  --kui-color-brand-on-normal: var(--wa-color-brand-on-normal, var(--kui-color-brand-on-quiet));
-  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
-
-  --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
-  --kui-color-success-fill-quiet: var(--wa-color-success-fill-quiet, color-mix(in srgb, var(--kui-color-success-fill-loud) 14%, var(--kui-color-surface)));
-  --kui-color-success-fill-normal: var(--wa-color-success-fill-normal, color-mix(in srgb, var(--kui-color-success-fill-loud) 72%, var(--kui-color-surface)));
-  --kui-color-success-border-quiet: var(--wa-color-success-border-quiet, color-mix(in srgb, var(--kui-color-success-fill-loud) 32%, var(--kui-color-surface)));
-  --kui-color-success-border-normal: var(--wa-color-success-border-normal, color-mix(in srgb, var(--kui-color-success-fill-loud) 50%, var(--kui-color-surface)));
-  --kui-color-success-border-loud: var(--wa-color-success-border-loud, color-mix(in srgb, var(--kui-color-success-fill-loud) 78%, var(--kui-color-neutral-on-normal)));
-  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
-  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
-  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
-
-  --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
-  --kui-color-warning-fill-quiet: var(--wa-color-warning-fill-quiet, color-mix(in srgb, var(--kui-color-warning-fill-loud) 9%, var(--kui-color-surface)));
-  --kui-color-warning-fill-normal: var(--wa-color-warning-fill-normal, color-mix(in srgb, var(--kui-color-warning-fill-loud) 22%, var(--kui-color-surface)));
-  --kui-color-warning-border-quiet: var(--wa-color-warning-border-quiet, color-mix(in srgb, var(--kui-color-warning-fill-loud) 35%, var(--kui-color-surface)));
-  --kui-color-warning-border-normal: var(--wa-color-warning-border-normal, color-mix(in srgb, var(--kui-color-warning-fill-loud) 58%, var(--kui-color-neutral-on-normal)));
-  --kui-color-warning-border-loud: var(--wa-color-warning-border-loud, color-mix(in srgb, var(--kui-color-warning-fill-loud) 78%, var(--kui-color-neutral-on-normal)));
-  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
-  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
-  --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
-
-  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
-  --kui-color-danger-fill-quiet: var(--wa-color-danger-fill-quiet, color-mix(in srgb, var(--kui-color-danger-fill-loud) 7%, var(--kui-color-surface)));
-  --kui-color-danger-fill-normal: var(--wa-color-danger-fill-normal, color-mix(in srgb, var(--kui-color-danger-fill-loud) 14%, var(--kui-color-surface)));
-  --kui-color-danger-border-quiet: var(--wa-color-danger-border-quiet, color-mix(in srgb, var(--kui-color-danger-fill-loud) 32%, var(--kui-color-surface)));
-  --kui-color-danger-border-normal: var(--wa-color-danger-border-normal, color-mix(in srgb, var(--kui-color-danger-fill-loud) 50%, var(--kui-color-surface)));
-  --kui-color-danger-border-loud: var(--wa-color-danger-border-loud, color-mix(in srgb, var(--kui-color-danger-fill-loud) 78%, var(--kui-color-neutral-on-normal)));
-  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
-  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
-  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
-
-  /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
-  --kui-color-border: var(--wa-color-surface-border, var(--kui-color-neutral-border-normal));
-  --kui-color-border-quiet: var(--kui-color-neutral-border-quiet);
-  --kui-color-accent: var(--kui-color-brand-fill-normal);
-  --kui-color-accent-text: var(--kui-color-brand-on-quiet);
-  --kui-color-success: var(--kui-color-success-fill-quiet);
-  --kui-color-success-text: var(--kui-color-success-on-quiet);
-  --kui-color-warning: var(--kui-color-warning-fill-quiet);
-  --kui-color-warning-text: var(--kui-color-warning-on-quiet);
-  --kui-color-danger: var(--kui-color-danger-fill-quiet);
-  --kui-color-danger-text: var(--kui-color-danger-on-quiet);
-  --kui-focus-ring: var(--wa-focus-ring, 3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud)));
-  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / .14));
-  --kui-shadow-l: var(--wa-shadow-l, 0 .75rem 2rem rgb(0 0 0 / .09));
-}
-
-@media (prefers-contrast: more) {
-  :root {
-    --kui-color-border: currentColor;
-    --kui-focus-ring: 3px solid currentColor;
-  }
-}

package/src/loading-spinner.css

@@ -1,4 +0,0 @@
-.kui-loading-spinner { display: block; width: 1em; height: 1em; overflow: visible; fill: currentColor; }
-.kui-loading-spinner path { transform-origin: 12px 12px; animation: kui-loading-spinner-rotate .85s linear infinite; }
-@keyframes kui-loading-spinner-rotate { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .kui-loading-spinner path { animation: none; } }

package/src/lucide-icon.css

@@ -1 +0,0 @@
-[data-lucide] { display: block; width: 1em; height: 1em; flex: none; }

package/src/menu-header.css

@@ -1,13 +0,0 @@
-.kui-menu-header { --kui-menu-header-color: var(--kui-color-neutral-on-quiet); --kui-menu-header-hover-background: var(--kui-color-neutral-border-quiet); display: flex; width: 100%; min-height: 1.8rem; padding: .2rem .55rem; border: 0; box-sizing: border-box; color: var(--kui-menu-header-color); background: transparent; align-items: center; justify-content: space-between; font: inherit; }
-.kui-menu-header h2, .kui-menu-header > span { margin: 0; font-size: var(--kui-font-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
-.kui-menu-header button, .kui-menu-header--toggle { cursor: pointer; }
-.kui-menu-header button { display: grid; width: 1.95rem; height: 1.65rem; padding: 0; border: 0; border-radius: .35rem; color: inherit; background: transparent; place-items: center; }
-.kui-menu-header:not(.kui-menu-header--toggle) button { margin-inline-end: -.55rem; }
-.kui-menu-header button:hover, .kui-menu-header--toggle:hover { background: var(--kui-menu-header-hover-background); }
-.kui-menu-header button:focus-visible, .kui-menu-header--toggle:focus-visible { outline: var(--kui-focus-ring); outline-offset: 1px; }
-.kui-menu-header button:disabled { cursor: not-allowed; opacity: .48; }
-.kui-menu-header button:disabled:hover { background: transparent; }
-.kui-menu-header svg { width: .85rem; height: .85rem; flex: none; }
-.kui-menu-header--toggle svg { transition: transform .18s ease; }
-.kui-menu-header--toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
-@media (prefers-reduced-motion: reduce) { .kui-menu-header--toggle svg { transition: none; } }

package/src/menu-item.css

@@ -1,12 +0,0 @@
-.kui-menu-item { --kui-menu-item-color: var(--kui-color-neutral-on-normal); --kui-menu-item-hover-background: var(--kui-color-neutral-fill-quiet); --kui-menu-item-selected-color: var(--kui-color-brand-on-quiet); --kui-menu-item-selected-background: var(--kui-color-brand-fill-normal); display: grid; width: 100%; min-height: 2.1rem; padding: .35rem .55rem; border: 0; border-radius: .5rem; color: var(--kui-menu-item-color); background: transparent; cursor: pointer; grid-template-columns: 1.125rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--kui-space-xs); font: inherit; text-align: start; }
-.kui-menu-item:hover { background: var(--kui-menu-item-hover-background); }
-.kui-menu-item:disabled { color: var(--kui-color-neutral-on-quiet); cursor: not-allowed; opacity: .58; }
-.kui-menu-item[aria-current="page"], .kui-menu-item[aria-pressed="true"] { color: var(--kui-menu-item-selected-color); background: var(--kui-menu-item-selected-background); font-weight: 650; }
-.kui-menu-item:focus-visible { outline: var(--kui-focus-ring); outline-offset: 1px; }
-.kui-menu-item__icon { display: grid; width: 1.125rem; height: 1.125rem; color: currentColor; place-items: center; }
-.kui-menu-item__icon svg { display: block; width: 1rem; height: 1rem; }
-.kui-menu-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.kui-menu-item[data-multiline="true"] { height: fit-content; white-space: normal; }
-.kui-menu-item[data-multiline="true"] .kui-menu-item__label { overflow: visible; white-space: normal; }
-.kui-menu-item__trailing { display: inline-flex; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--kui-space-xs); }
-.kui-menu-item__trailing > svg { width: .85rem; height: .85rem; }

package/src/page-header.css

@@ -1,3 +0,0 @@
-.kui-page-header { --kui-page-header-background: var(--kui-color-surface); --kui-page-header-border: var(--kui-color-border); --kui-page-header-foreground: var(--kui-color-text); display: flex; min-height: 4.15rem; padding: .75rem 1rem; border-bottom: 1px solid var(--kui-page-header-border); color: var(--kui-page-header-foreground); background: var(--kui-page-header-background); align-items: center; justify-content: space-between; gap: var(--kui-space-m); }
-.kui-page-header h1 { margin: 0; color: inherit; font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl)); letter-spacing: -.025em; }
-.kui-page-header__action { flex: none; }

package/src/resizable-region.css

@@ -1,19 +0,0 @@
-.kui-resizable-region { --kui-resizable-region-separator-color: var(--kui-color-border); --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet); --kui-resizable-region-handle-active-color: var(--kui-color-text-link); position: relative; display: flex; min-width: 0; min-height: 0; }
-.kui-resizable-region[data-axis="horizontal"] { width: var(--kui-resizable-region-size); height: 100%; flex: 0 0 var(--kui-resizable-region-size); }
-.kui-resizable-region[data-axis="vertical"] { width: 100%; height: var(--kui-resizable-region-size); flex: 0 0 var(--kui-resizable-region-size); flex-direction: column; }
-.kui-resizable-region[data-collapsed="true"] { overflow: visible; }
-.kui-resizable-region__content { width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
-.kui-resizable-region__handle { position: absolute; z-index: 3; display: grid; min-width: 20px; min-height: 20px; color: var(--kui-resizable-region-handle-color); place-items: center; touch-action: none; }
-.kui-resizable-region__handle::before { position: absolute; background: var(--kui-resizable-region-separator-color); content: ''; pointer-events: none; }
-.kui-resizable-region[data-axis="horizontal"] .kui-resizable-region__handle { top: 0; bottom: 0; width: 20px; cursor: col-resize; }
-.kui-resizable-region[data-axis="horizontal"] .kui-resizable-region__handle::before { top: 0; bottom: 0; width: 1px; }
-.kui-resizable-region[data-axis="horizontal"][data-edge="end"] .kui-resizable-region__handle { right: -10px; }
-.kui-resizable-region[data-axis="horizontal"][data-edge="start"] .kui-resizable-region__handle { left: -10px; }
-.kui-resizable-region[data-axis="vertical"] .kui-resizable-region__handle { right: 0; left: 0; height: 20px; cursor: row-resize; }
-.kui-resizable-region[data-axis="vertical"] .kui-resizable-region__handle::before { right: 0; left: 0; height: 1px; }
-.kui-resizable-region[data-axis="vertical"][data-edge="end"] .kui-resizable-region__handle { bottom: -10px; }
-.kui-resizable-region[data-axis="vertical"][data-edge="start"] .kui-resizable-region__handle { top: -10px; }
-.kui-resizable-region__handle:hover, .kui-resizable-region__handle:focus-visible { color: var(--kui-resizable-region-handle-active-color); }
-.kui-resizable-region__handle:focus-visible { border-radius: var(--kui-radius-s); outline: var(--kui-focus-ring); outline-offset: -2px; }
-.kui-resizable-region__handle svg { position: relative; width: .9rem; height: .9rem; opacity: 0; }
-.kui-resizable-region__handle:hover svg, .kui-resizable-region__handle:focus-visible svg { opacity: 1; }

package/src/select.css

@@ -1,18 +0,0 @@
-.kui-select::part(combobox) { min-height: 2.5rem; padding-inline: .55rem .45rem; gap: 0; }
-.kui-select::part(display-input) { min-width: 0; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; }
-.kui-select::part(start), .kui-select::part(end), .kui-select::part(expand-icon) { margin: 0; }
-.kui-select::part(expand-icon) { transform: scale(var(--kui-disclosure-icon-scale, .5)); }
-.kui-select::part(listbox) { width: max-content; min-width: 100%; max-width: min(20rem, calc(100vw - 1.25rem)); }
-.kui-select--fit-menu::part(listbox) { width: 100%; }
-.kui-select wa-option::part(base) { align-items: center; }
-.kui-select wa-option { --wa-form-control-activated-color: var(--kui-color-brand-fill-normal); --current-text-color: var(--kui-color-brand-on-quiet); }
-.kui-select wa-option::part(start) { align-self: center; margin-top: 0; }
-.kui-select wa-option::part(label) { min-width: 0; padding-block: .35rem; line-height: 1.25; overflow-wrap: normal; word-break: normal; white-space: normal; }
-.kui-select__icon { display: inline-flex; width: 1rem; height: 1rem; flex: none; }
-.kui-select__icon[slot="start"] { margin-inline-end: .5rem !important; }
-.kui-select__icon svg { display: block; width: 100%; height: 100%; }
-.kui-select__custom-selected { display: inline-flex; min-width: 0; align-items: center; }
-.kui-select--custom-selected::part(display-input) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
-.kui-select__group { display: grid; padding: .25rem 0; }
-.kui-select__group--separated { margin-block-start: .25rem; padding-block-start: .5rem; border-block-start: 1px solid var(--kui-color-neutral-border-quiet); }
-.kui-select__group-title { padding: .2rem .75rem .3rem; color: var(--kui-color-neutral-on-quiet); font-size: var(--kui-font-2xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }

package/src/state-banner.css

@@ -1,31 +0,0 @@
-.kui-state-banner {
-  --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-neutral-background, var(--kui-color-neutral-fill-quiet)));
-  --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-neutral-border, var(--kui-color-neutral-border-normal)));
-  --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-neutral-foreground, var(--kui-color-neutral-on-normal)));
-  --_kui-state-banner-detail: var(--kui-state-banner-detail, currentColor);
-  --_kui-state-banner-action-background: var(--kui-state-banner-action-background, color-mix(in srgb, var(--kui-color-surface) 52%, transparent));
-  --_kui-state-banner-action-hover-background: var(--kui-state-banner-action-hover-background, var(--kui-color-surface));
-  display: grid;
-  min-height: 2.6rem;
-  padding: .45rem .75rem;
-  border: 1px solid var(--_kui-state-banner-border);
-  color: var(--_kui-state-banner-foreground);
-  background: var(--_kui-state-banner-background);
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: .6rem;
-}
-.kui-state-banner[data-tone="info"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-info-background, var(--kui-color-brand-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-info-border, var(--kui-color-brand-border-quiet))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-quiet))); }
-.kui-state-banner[data-tone="success"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-success-background, var(--kui-color-success-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-success-border, var(--kui-color-success-border-normal))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-success-foreground, var(--kui-color-success-on-quiet))); }
-.kui-state-banner[data-tone="warning"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-warning-background, var(--kui-color-warning-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-warning-border, var(--kui-color-warning-border-normal))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-warning-foreground, var(--kui-color-warning-on-quiet))); }
-.kui-state-banner[data-tone="danger"] { --_kui-state-banner-background: var(--kui-state-banner-background, var(--kui-state-banner-danger-background, var(--kui-color-danger-fill-quiet))); --_kui-state-banner-border: var(--kui-state-banner-border, var(--kui-state-banner-danger-border, var(--kui-color-danger-border-quiet))); --_kui-state-banner-foreground: var(--kui-state-banner-foreground, var(--kui-state-banner-danger-foreground, var(--kui-color-danger-on-quiet))); }
-.kui-state-banner__icon { display: grid; place-items: center; }
-.kui-state-banner__icon svg { width: 1rem; height: 1rem; }
-.kui-state-banner__copy { display: flex; min-width: 0; align-items: baseline; gap: var(--kui-space-xs); }
-.kui-state-banner__copy strong { font-size: var(--kui-font-xs); }
-.kui-state-banner__copy span { overflow: hidden; color: var(--_kui-state-banner-detail); font-size: var(--kui-font-2xs); opacity: .78; text-overflow: ellipsis; white-space: nowrap; }
-.kui-state-banner__action { justify-self: end; }
-.kui-state-banner__action button { min-height: 1.8rem; padding: 0 .7rem; border: 1px solid currentColor; border-radius: var(--kui-radius-pill); color: inherit; background: var(--_kui-state-banner-action-background); cursor: pointer; font: inherit; font-size: var(--kui-font-2xs); font-weight: 650; }
-.kui-state-banner__action button:hover { background: var(--_kui-state-banner-action-hover-background); }
-.kui-state-banner__action button:focus-visible { outline: 2px solid var(--kui-color-text-link); outline-offset: 2px; }
-@media (max-width: 36rem) { .kui-state-banner__copy { display: grid; gap: .05rem; } }

package/src/styles.css

@@ -1,18 +0,0 @@
-@import './foundation.css';
-@import './lucide-icon.css';
-@import './toolbar.css';
-@import './toolbar-control-group.css';
-@import './toolbar-text.css';
-@import './menu-item.css';
-@import './menu-header.css';
-@import './resizable-region.css';
-@import './app-tab.css';
-@import './tab-bar.css';
-@import './page-header.css';
-@import './loading-spinner.css';
-@import './select.css';
-@import './segmented-control.css';
-@import './state-banner.css';
-@import './empty-state.css';
-@import './dialog-header.css';
-@import './value-table.css';

package/src/tab-bar.css

@@ -1,4 +0,0 @@
-.kui-tab-bar { --kui-tab-bar-background: var(--kui-color-surface-lowered); --kui-tab-bar-border: var(--kui-color-border); display: flex; min-width: 0; width: 100%; height: 3.25rem; padding: .35rem .45rem; box-sizing: border-box; border-bottom: 1px solid var(--kui-tab-bar-border); background: var(--kui-tab-bar-background); align-items: center; gap: .35rem; }
-.kui-tab-bar__tabs { display: flex; min-width: 0; height: 100%; margin: calc(var(--kui-space-2xs) * -1); padding: var(--kui-space-2xs); overflow-x: auto; scrollbar-width: none; align-items: center; flex: 1 1 auto; gap: .2rem; overscroll-behavior-inline: contain; }
-.kui-tab-bar__tabs::-webkit-scrollbar { display: none; }
-.kui-tab-bar__leading, .kui-tab-bar__trailing { display: flex; height: 100%; align-items: center; flex: none; }

package/src/toolbar-control-group.css

@@ -1,25 +0,0 @@
-.kui-toolbar-control-group { --kui-toolbar-control-background: var(--kui-color-neutral-fill-normal); --kui-toolbar-control-border: var(--kui-color-neutral-border-normal); --kui-toolbar-control-color: var(--kui-color-neutral-on-quiet); --kui-toolbar-control-hover-background: var(--kui-color-surface); --kui-toolbar-control-selected-background: var(--kui-color-surface); --kui-toolbar-control-selected-color: var(--kui-color-brand-on-quiet); --kui-toolbar-control-selected-shadow: var(--kui-shadow-s); --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud); --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud); --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud); display: inline-flex; height: 2.525rem; padding: .2rem; box-sizing: border-box; border: 1px solid var(--kui-toolbar-control-border); border-radius: var(--kui-radius-pill); color: var(--kui-toolbar-control-color); background: var(--kui-toolbar-control-background); align-items: center; flex: 0 0 auto; gap: .15rem; }
-.kui-toolbar-control-group[data-tone="dark"] { --kui-toolbar-control-background: color-mix(in srgb, var(--kui-color-neutral-fill-loud) 72%, transparent); --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536); --kui-toolbar-control-color: var(--kui-color-neutral-on-loud); --kui-toolbar-control-hover-background: color-mix(in srgb, var(--kui-color-surface) 28%, transparent); }
-.kui-toolbar-control-group[data-appearance="borderless"] { border-color: transparent; background: transparent; }
-.kui-toolbar-control-group > button { border: 0; }
-.kui-toolbar-control-group > wa-button { min-width: 2rem; height: 2rem; }
-.kui-toolbar-control-group wa-button { display: inline-flex; line-height: 0; align-items: center; justify-content: center; }
-.kui-toolbar-control-group wa-button > svg { display: block; width: 1rem; height: 1rem; }
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown { width: 3rem; min-width: 3rem; height: 2rem; }
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button { width: 3rem; height: 2rem; }
-.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button::part(base) { width: 3rem; height: 2rem; }
-.kui-toolbar-control-group wa-button::part(base) { border: 0; }
-.kui-toolbar-control-group[data-single="true"]:has(> :is(button, wa-button, wa-dropdown)):hover { background: var(--kui-toolbar-control-hover-background); }
-.kui-toolbar-control-group[data-single="true"] wa-button { --wa-color-fill-quiet: transparent; }
-.kui-toolbar-control-group[data-single="false"] wa-button { width: 2rem; height: 2rem; border-radius: var(--kui-radius-pill); --wa-color-fill-quiet: transparent; }
-.kui-toolbar-control-group[data-single="false"] wa-button:hover { background: var(--kui-toolbar-control-hover-background); }
-.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base), .kui-toolbar-control-group[data-single="false"] wa-button:hover::part(base) { background: transparent; }
-.kui-toolbar-control-group > button { display: grid; min-width: 2rem; height: 2rem; padding: 0; border-radius: var(--kui-radius-pill); color: var(--kui-toolbar-control-color); background: transparent; cursor: pointer; place-items: center; }
-.kui-toolbar-control-group > button:hover { background: var(--kui-toolbar-control-hover-background); }
-.kui-toolbar-control-group[data-single="false"] > :is(button, wa-button)[aria-pressed="true"] { color: var(--kui-toolbar-control-selected-color); background: var(--kui-toolbar-control-selected-background); box-shadow: var(--kui-toolbar-control-selected-shadow); }
-.kui-toolbar-control-group > :is(button, wa-button):focus-visible { outline: var(--kui-focus-ring); outline-offset: 1px; }
-.kui-toolbar-control-group > button svg { width: 1rem; height: 1rem; }
-.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(> :is(button, wa-button)[aria-pressed="true"]) { --kui-toolbar-control-color: var(--kui-toolbar-control-pressed-color); border-color: var(--kui-toolbar-control-pressed-border); color: var(--kui-toolbar-control-pressed-color); background: var(--kui-toolbar-control-pressed-background); }
-.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"] > :is(button, wa-button)[aria-pressed="true"] { color: var(--kui-toolbar-control-pressed-color); }
-.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(> :is(button, wa-button)[aria-pressed="true"]):hover { background: var(--kui-toolbar-control-pressed-background); }
-.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"] > :is(button, wa-button)[aria-pressed="true"]:hover { background: transparent; }

package/src/toolbar-text.css

@@ -1,4 +0,0 @@
-.kui-toolbar-text { display: inline-flex; min-width: 0; max-width: 100%; height: 2.525rem; overflow: hidden; color: var(--kui-color-neutral-on-quiet); font-weight: 650; line-height: 1; text-overflow: ellipsis; white-space: nowrap; align-items: center; }
-.kui-toolbar-text[data-size="large"] { font-size: var(--kui-font-m); letter-spacing: -.015em; }
-.kui-toolbar-text[data-size="default"] { font-size: var(--kui-font-s); }
-.kui-toolbar-text[data-size="small"] { font-family: var(--kui-font-mono); font-size: var(--kui-font-xs); }