@k2b/ui 0.1.0-rc.0

package/README.md

@@ -0,0 +1,343 @@
+# @k2b/ui
+
+`@k2b/ui` is a standalone, production-ready component library for SolidJS. It
+uses accessible interaction patterns, scoped precompiled styles, configurable
+design tokens, and separate browser and server builds. Use it inside Cloud or
+in another Solid application.
+
+```css
+@import "@k2b/ui/global.css";
+```
+
+Or load only the component styles when the application provides its own fonts
+and icons:
+
+```ts
+import "@k2b/ui/styles.css";
+import { Button, DatePicker, StatusBadge, prompts } from "@k2b/ui";
+```
+
+Wrap the rendered application in the UI scope:
+
+```tsx
+<main class="k2b-ui">
+  <Placeholder title="Nothing here yet" />
+</main>
+```
+
+The scope uses `0.9375rem` body text at weight `400` without changing the
+document's global `body`.
+
+Fonts and theme stacks are CSS variables and can be replaced without
+JavaScript:
+
+```css
+.k2b-ui {
+  --k2b-font-sans: Inter, sans-serif;
+  --k2b-accent-50: #f5f3ff;
+  --k2b-accent-100: #ede9fe;
+  --k2b-accent-300: #c4b5fd;
+  --k2b-accent-400: #a78bfa;
+  --k2b-accent-500: #8b5cf6;
+  --k2b-accent-600: #7c3aed;
+  --k2b-accent-700: #6d28d9;
+  --k2b-accent-950: #2e1065;
+}
+```
+
+`--k2b-action` is the accessible foreground color for links and text actions.
+`--k2b-action-solid` is the background color for filled controls; override both
+with matching hover tokens when defining a custom theme.
+
+AI surfaces can use a distinct semantic treatment without changing the general
+application accent:
+
+```css
+.k2b-ui {
+  --k2b-ai-accent: #0891b2;
+  --k2b-ai-accent-hover: #0e7490;
+  --k2b-ai-border: #06b6d4;
+  --k2b-ai-surface: #ecfeff;
+}
+```
+
+IBM Plex is an optional preset:
+
+```ts
+import "@k2b/ui/fonts/plex.css";
+```
+
+Tabler's webfont is the supported icon preset:
+
+```ts
+import "@k2b/ui/icons/tabler.css";
+```
+
+## Component tranches
+
+The public package surface only exposes components that have passed the
+standalone SSR, behavior, styling, and migration checks:
+
+- Actions: buttons, menus, context menus, filter/select chips, spotlight
+  search, copy, remove, segmented controls, controlled tabs, native
+  disclosures, and semantic toolbars
+- Inputs: text, number, checkbox and switch controls; select, combobox,
+  multi-select, freeform tags, managed tag editing, icons, PIN, slider, color,
+  and date/time pickers;
+  dropzones, image selection/cropping, completion-aware plain text,
+  Markdown, and template editors
+- Layout: `AppOverview`, `DataPanel`, `PanelHeader`, `PanelDialog`,
+  `SettingsModal`, `AppWorkspace`, `Panes`, `FloatingWindow`, and generic
+  settings-form helpers
+- Surfaces: `Paper`, `Avatar`, `LinkCard`, `StatGrid`, `StatCell`, `StatusBadge`,
+  `ProgressBar`, `NoticeCard` (with `NoticeCard.Grid`), `Tag`,
+  `DescriptionList`, `Placeholder`, and `NotFoundState`
+- Feedback: the complete scoped prompt family, `Tooltip`, and scoped `toast`
+- AI: the controlled compound `Chat` surface with timeline, messages,
+  activity, composer, and compact context usage
+- Content: data and log tables, charts and interactive state timelines,
+  calendars, file trees/browsers/previews, lightboxes, PDF previews,
+  documentation primitives, pagination, range navigation, code and Markdown
+  views, and structured-data previews
+- Widgets: `Widget`, `WidgetHero`, `WidgetList`, `WidgetPills`,
+  `WidgetStat`, and `WidgetStatus`
+- Intl: `LocaleProvider`, `useLocale`, and the unstyled `Format` namespace
+  (`Number`, `Percent`, `Currency`, `Bytes`, `Date`, `Time`, `DateTime`,
+  `RelativeTime`, `Duration`, `DurationMs`)
+
+`MarkdownView` renders escaped Markdown by default. Pre-rendered HTML requires
+the explicit `trustedHtml` prop and stays an application-owned trust boundary.
+Authoring previews may pass an exact `inlineTokens` allowlist to emphasize
+standalone placeholders during safe Markdown parsing.
+
+## Field contract
+
+Form controls share one controlled contract. The same prop always has the same
+meaning:
+
+- `id`, `class`, `label`, `description`, `error`, `required`, and `disabled`
+  describe the field around the control.
+- Use a visible `label` whenever possible. If the surrounding UI already
+  provides the label, use the native `"aria-label"` or `"aria-describedby"`
+  props. A placeholder is never an accessible label.
+- `value` accepts either a direct value or a Solid accessor.
+- `onValueChange` reports every controlled edit.
+- `onValueCommit` reports the value when the user finishes the edit: on blur
+  or Enter for text-like controls, and on an explicit selection or Apply action
+  for pickers.
+
+```tsx
+const [name, setName] = createSignal("");
+const [date, setDate] = createSignal<string | null>(null);
+
+<TextInput
+  label="Project name"
+  value={name}
+  onValueChange={setName}
+  onValueCommit={saveName}
+/>
+<DatePicker
+  label="Release date"
+  value={date}
+  onValueChange={setDate}
+  onValueCommit={saveReleaseDate}
+/>
+```
+
+Select, date, combobox, tags, and text controls use the same field metadata,
+ARIA wiring, disabled and invalid states, and stable one-border focus shell.
+Control-specific props only describe genuinely different behavior. For
+example, `Combobox` owns a transient search `query` and hands the selected
+domain object to `onSelect`; `FileDropzone` and `ImageCropper` are action/editor
+primitives rather than value fields.
+
+The package does not read Cloud routes, services, permissions, or application
+state. Product-specific composition stays with the consuming application.
+`Avatar` is therefore an additive portable presentation adapter. It does not
+migrate Cloud's routed `./misc/Avatar` source contract, which remains
+Cloud-specific.
+
+Composition components intentionally use semantic data instead of application
+stores:
+
+```tsx
+<Widget title="Platform health" icon="ti ti-heartbeat">
+  <WidgetStatus title="Operational" tone="success" />
+  <WidgetPills pills={[{ label: "Checks", value: 48, tone: "emerald" }]} />
+</Widget>
+```
+
+Portable presentation components use shared semantic vocabularies:
+`IntentTone` (`neutral`, `info`, `success`, `warning`, `danger`) and
+`AccentColor` (`zinc`, `blue`, `emerald`, `amber`, `red`). Specialized state
+components such as `StatusBadge` keep a smaller domain-specific vocabulary
+where the states carry meaning beyond color.
+
+## Locale and formatting
+
+Locale-aware components resolve their locale in one order: an explicit
+component `locale` prop, the nearest `LocaleProvider`, the browser's
+`document.documentElement.lang`, then `"en"`. The package never reads
+`navigator.language` and holds no global locale state, so one server can
+render different locales concurrently.
+
+```tsx
+import { Format, LocaleProvider } from "@k2b/ui";
+
+<html lang={locale}>
+  {/* ... */}
+  <LocaleProvider locale={locale}>
+    <Format.Currency value={1999.5} currency="EUR" />
+    <Format.DateTime value={order.createdAt} timeZone="Europe/Berlin" />
+  </LocaleProvider>
+</html>;
+```
+
+The server-side provider controls SSR output. A browser island rendered with
+`@k2b/ssr` is an independent Solid root: an outer server provider does not
+survive the island's browser re-render, which falls back to `<html lang>`.
+Emit `<html lang>` equal to the provider locale to keep both passes identical.
+Changing the language without a reload is out of scope.
+
+`Format` components are unstyled and semantic: numeric components render a
+`<span>`, temporal components render `<time>` with a canonical `datetime`
+attribute. `Format.Percent` takes a ratio (`0.12` → `12%`), `Format.Currency`
+requires an ISO 4217 code, and `Format.Date`/`Time`/`DateTime` format in UTC
+unless an explicit `timeZone` is passed, so server and browser text cannot
+drift with the runtime timezone. Null and invalid input renders a `"—"`
+fallback (override with `fallback`).
+
+`NumberInput` derives its decimal separator from the effective locale while
+keeping the controlled value a canonical number; `DatePicker` and `Calendar`
+prefer an explicit `dateConfig.locale` and inherit the render locale
+otherwise. Timezone is never part of the locale context.
+
+## Catalog groups
+
+The source tree and component documentation use the same groups as the Cloud
+UI showcase: AI, Inputs, Actions, Layout, Surfaces, Feedback, Content, and
+Widgets. Cloud-specific integrations are intentionally not part of this
+package.
+
+The chat family accepts portable data and callbacks. Applications keep their
+protocol, persistence, tool rendering, approvals, and file storage:
+
+```tsx
+const [draft, setDraft] = createSignal("");
+
+<Chat>
+  <Chat.Timeline
+    items={items()}
+    hasMore={hasMore()}
+    onLoadOlder={loadOlder}
+  />
+  <Chat.Composer
+    value={draft()}
+    onValueChange={setDraft}
+    onSubmit={sendMessage}
+    state={runState()}
+    models={models}
+    selectedModelId={modelId()}
+    onModelChange={setModelId}
+    contextUsage={{ usage: usage(), contextWindow: 128_000 }}
+  />
+</Chat>;
+```
+
+Return `false` or throw from `onSubmit` to restore the controlled draft and
+attachments. A synchronous throw and a rejected promise are treated identically,
+and the failure is handed to
+`onError` for user-facing reporting. Raw selected files are handed to
+`fileSelection.onSelect`; storage and upload policy remain application-owned.
+`Chat.Timeline` requests older items through `hasMore`/`onLoadOlder` and keeps
+the reader's position once they are prepended.
+
+`Panes` is a controlled, serializable layout for IDE-like workspaces. The
+package owns tabs, nested splits, resize and drag-and-drop; applications own
+pane content, open and close behavior, routing, and persistence:
+
+```tsx
+const [layout, setLayout] = createSignal(createPanesLayout(["result", "query"]));
+const items: PanesItem[] = [
+  {
+    id: "result",
+    title: "Result",
+    icon: "ti ti-table",
+    render: () => <ResultView />,
+    onClose: () => setLayout((current) => removePanesItem(current, "result")),
+  },
+  {
+    id: "query",
+    title: "Query",
+    icon: "ti ti-code",
+    render: () => <QueryEditor />,
+  },
+];
+
+<Panes layout={layout()} onLayoutChange={setLayout} items={items} />;
+```
+
+Persist only `PanesLayout`, never the runtime item descriptors containing
+render functions. Validate stored input with `parsePanesLayout`; invalid or
+unsupported values require an explicit application fallback. Panes invokes an
+item's `render` function only while that item is active in its tab group.
+Tab rows remain one line and scroll horizontally when needed. Dragging exposes
+separate tab-insertion, group, and directional split targets while the pointer
+preview retains the source tab's compact pill treatment.
+
+Cloud applications import portable components directly from `@k2b/ui`.
+Product-owned behavior such as permissions, account routes, stored AI
+protocols, and workflow contracts stays behind focused Cloud package exports;
+there is no generic Cloud UI compatibility layer.
+
+The Fibel component showcase is the canonical acceptance consumer. Its
+portable pages import `@k2b/ui` directly, while Cloud API integrations remain
+in a visibly separate section. Together with `packages/ui/fixture`, it
+exercises the package boundary and public API ergonomics outside the Cloud
+shell. The fixture provides automated server-render and shipped-class checks;
+the catalog owns representative browser interaction, theme, responsive, and
+accessibility states.
+
+## Verification
+
+```bash
+bun run typecheck          # package sources
+bun run test               # builds the stylesheet first, then runs every suite
+bun run build              # dist/styles.css and the optional font/icon presets
+bun run fixture:typecheck  # standalone consumer fixture
+bun run fixture:build      # standalone SSR build, no Cloud CSS or runtime
+```
+
+The JavaScript build preserves per-component ESM modules for browser and SSR
+conditions. Bundlers can therefore tree-shake unused component families instead
+of retaining the complete package through the root export.
+
+Do not use bare `bun test` as the package verification command: several guards
+compare rendered markup with `dist/styles.css`. The fixture render guard rejects
+a missing or stale stylesheet so this mistake fails loudly, but `bun run test`
+is the supported one-step command.
+
+Three contracts are enforced by tests rather than convention, because each one
+regressed silently during the extraction:
+
+- `src/styles/class-contract.test.ts` — the package renders no class its own
+  stylesheet cannot style, renders only `k2b-`-prefixed names, and claims no
+  unprefixed name inside the `.k2b-ui` scope. `styles/entry.css` imports the six
+  scoped source sheets; Tailwind `@reference` directives live in source sheets
+  such as `index.css` and `content-parity.css` and emit no generic utilities, so
+  a leftover utility class in markup styles nothing.
+- `src/styles/focus-contract.test.ts` — at most one focus signal per selector
+  and cascade context, box-shadow-only focus rings have a forced-colors outline
+  fallback, and AI tokens stay inside AI surfaces.
+- Per-group single-ownership tests — a selector may be declared in only one
+  stylesheet. Two partial declarations of the same selector merge into a third
+  geometry matching neither Cloud nor either source.
+
+## License
+
+`@k2b/ui` uses AGPL-3.0-or-later, the same license as Cloud. See `LICENSE`.
+The bundled IBM Plex fonts retain their SIL Open Font License, and Tabler
+Icons retain their MIT license. Their complete notices ship in `dist/licenses`.
+
+See [Release instructions](https://github.com/ValentinKolb/cloud/blob/main/docs-site/RELEASING.md) for package verification
+and the first npm publication.

package/dist/browser/actions/Button.js

@@ -0,0 +1,236 @@
+import { template as _$template } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button><!$><!/><span class=k2b-button__label>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-button__label>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<a>`);
+import { Link } from "@k2b/ssr/nav";
+import { Show, splitProps } from "solid-js";
+import { Tooltip } from "../feedback/Tooltip";
+const buttonClass = className => ["k2b-button", className].filter(Boolean).join(" ");
+export function Button(props) {
+  const [local, rest] = splitProps(props, ["children", "class", "disabled", "loading", "loadingLabel", "ref", "size", "tooltip", "tooltipDelay", "tooltipPlacement", "type", "variant"]);
+  let target;
+  const setRef = element => {
+    target = element;
+    if (typeof local.ref === "function") local.ref(element);
+  };
+  const control = (() => {
+    var _el$ = _$getNextElement(_tmpl$2),
+      _el$4 = _el$.firstChild,
+      [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
+      _el$3 = _el$5.nextSibling;
+    _$use(setRef, _el$);
+    _$spread(_el$, _$mergeProps(rest, {
+      get type() {
+        return local.type ?? "button";
+      },
+      get ["class"]() {
+        return buttonClass(local.class);
+      },
+      get ["data-size"]() {
+        return local.size ?? "md";
+      },
+      get ["data-variant"]() {
+        return local.variant ?? "primary";
+      },
+      get disabled() {
+        return local.disabled || local.loading;
+      },
+      get ["aria-busy"]() {
+        return local.loading ? "true" : undefined;
+      }
+    }), false, true);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return local.loading;
+      },
+      get children() {
+        return _$getNextElement(_tmpl$);
+      }
+    }), _el$5, _co$);
+    _$insert(_el$3, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!local.loading)() && local.loadingLabel;
+      },
+      get fallback() {
+        return local.children;
+      },
+      get children() {
+        return local.loadingLabel;
+      }
+    }));
+    _$runHydrationEvents();
+    return _el$;
+  })();
+  return [control, _$createComponent(Show, {
+    get when() {
+      return _$memo(() => local.tooltip !== false)() && local.tooltip !== undefined;
+    },
+    get children() {
+      return _$createComponent(Tooltip, {
+        get content() {
+          return local.tooltip;
+        },
+        target: () => target,
+        get delay() {
+          return local.tooltipDelay;
+        },
+        get disabled() {
+          return local.disabled || local.loading;
+        },
+        get placement() {
+          return local.tooltipPlacement;
+        }
+      });
+    }
+  })];
+}
+export function ButtonLink(props) {
+  const [local, rest] = splitProps(props, ["children", "class", "href", "navigation", "onClick", "onNavigate", "replace", "ref", "scroll", "size", "tooltip", "tooltipDelay", "tooltipPlacement", "variant"]);
+  let target;
+  const setRef = element => {
+    target = element;
+    if (typeof local.ref === "function") local.ref(element);
+  };
+  const className = buttonClass(local.class);
+  const content = (() => {
+    var _el$6 = _$getNextElement(_tmpl$3);
+    _$insert(_el$6, () => local.children);
+    return _el$6;
+  })();
+  const tooltip = () => _$createComponent(Show, {
+    get when() {
+      return _$memo(() => local.tooltip !== false)() && local.tooltip !== undefined;
+    },
+    get children() {
+      return _$createComponent(Tooltip, {
+        get content() {
+          return local.tooltip;
+        },
+        target: () => target,
+        get delay() {
+          return local.tooltipDelay;
+        },
+        get placement() {
+          return local.tooltipPlacement;
+        }
+      });
+    }
+  });
+  if (local.navigation === "enhanced" && local.href && local.onNavigate) {
+    return [_$createComponent(Link, _$mergeProps(rest, {
+      ref: setRef,
+      get href() {
+        return local.href;
+      },
+      "class": className,
+      get ["data-size"]() {
+        return local.size ?? "md";
+      },
+      get ["data-variant"]() {
+        return local.variant ?? "primary";
+      },
+      get onClick() {
+        return local.onClick;
+      },
+      get onNavigate() {
+        return local.onNavigate;
+      },
+      get replace() {
+        return local.replace;
+      },
+      get scroll() {
+        return local.scroll;
+      },
+      children: content
+    })), _$memo(tooltip)];
+  }
+  return [(() => {
+    var _el$7 = _$getNextElement(_tmpl$4);
+    _$use(setRef, _el$7);
+    _$spread(_el$7, _$mergeProps(rest, {
+      get href() {
+        return local.href;
+      },
+      "class": className,
+      get ["data-size"]() {
+        return local.size ?? "md";
+      },
+      get ["data-variant"]() {
+        return local.variant ?? "primary";
+      },
+      get onClick() {
+        return local.onClick;
+      }
+    }), false, true);
+    _$insert(_el$7, content);
+    _$runHydrationEvents();
+    return _el$7;
+  })(), _$memo(tooltip)];
+}
+export function IconButton(props) {
+  const [local, rest] = splitProps(props, ["children", "class", "label", "loading", "loadingLabel", "tooltip", "variant"]);
+  return _$createComponent(Button, _$mergeProps(rest, {
+    get loading() {
+      return local.loading;
+    },
+    get variant() {
+      return local.variant ?? "ghost";
+    },
+    get ["class"]() {
+      return `k2b-icon-button ${local.class ?? ""}`;
+    },
+    get ["aria-label"]() {
+      return _$memo(() => !!local.loading)() ? local.loadingLabel ?? local.label : local.label;
+    },
+    get title() {
+      return rest.title ?? (local.tooltip === undefined ? local.label : undefined);
+    },
+    get tooltip() {
+      return local.tooltip;
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return !local.loading;
+        },
+        get children() {
+          return local.children;
+        }
+      });
+    }
+  }));
+}
+export function IconButtonLink(props) {
+  const [local, rest] = splitProps(props, ["children", "class", "label", "tooltip", "variant"]);
+  return _$createComponent(ButtonLink, _$mergeProps(rest, {
+    get variant() {
+      return local.variant ?? "ghost";
+    },
+    get ["class"]() {
+      return `k2b-icon-button ${local.class ?? ""}`;
+    },
+    get ["aria-label"]() {
+      return local.label;
+    },
+    get title() {
+      return rest.title ?? (local.tooltip === undefined ? local.label : undefined);
+    },
+    get tooltip() {
+      return local.tooltip;
+    },
+    get children() {
+      return local.children;
+    }
+  }));
+}
+//# sourceMappingURL=Button.js.map

package/dist/browser/actions/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Link","Show","splitProps","Tooltip","buttonClass","className","filter","Boolean","join","Button","props","local","rest","target","setRef","element","ref","control","_el$","_$getNextElement","_tmpl$2","_el$4","firstChild","_el$5","_co$","_$getNextMarker","nextSibling","_el$3","_$use","_$spread","_$mergeProps","type","class","data-size","size","data-variant","variant","disabled","loading","aria-busy","undefined","_$insert","_$createComponent","when","children","_tmpl$","_$memo","loadingLabel","fallback","_$runHydrationEvents","tooltip","content","delay","tooltipDelay","placement","tooltipPlacement","ButtonLink","_el$6","_tmpl$3","navigation","href","onNavigate","onClick","replace","scroll","_el$7","_tmpl$4","IconButton","aria-label","label","title","IconButtonLink"],"sources":["actions/Button.tsx"],"sourcesContent":["import { Link, type LinkNavigateEvent, type NavigationScrollMode } from \"@k2b/ssr/nav\";\nimport { type JSX, Show, splitProps } from \"solid-js\";\nimport { Tooltip, type TooltipPlacement } from \"../feedback/Tooltip\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"text\" | \"subtle\" | \"input\" | \"warning\" | \"danger\" | \"success\" | \"ai\";\nexport type ButtonSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\nexport type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  loading?: boolean;\n  loadingLabel?: string;\n  size?: ButtonSize;\n  variant?: ButtonVariant;\n  tooltip?: JSX.Element | false;\n  tooltipDelay?: number;\n  tooltipPlacement?: TooltipPlacement;\n};\n\nexport type ButtonLinkProps = Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, \"onClick\"> & {\n  navigation?: \"document\" | \"enhanced\";\n  onClick?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;\n  onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;\n  replace?: boolean;\n  scroll?: NavigationScrollMode;\n  size?: ButtonSize;\n  variant?: ButtonVariant;\n  tooltip?: JSX.Element | false;\n  tooltipDelay?: number;\n  tooltipPlacement?: TooltipPlacement;\n};\n\nconst buttonClass = (className?: string): string => [\"k2b-button\", className].filter(Boolean).join(\" \");\n\nexport function Button(props: ButtonProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"disabled\",\n    \"loading\",\n    \"loadingLabel\",\n    \"ref\",\n    \"size\",\n    \"tooltip\",\n    \"tooltipDelay\",\n    \"tooltipPlacement\",\n    \"type\",\n    \"variant\",\n  ]);\n  let target: HTMLButtonElement | undefined;\n  const setRef = (element: HTMLButtonElement) => {\n    target = element;\n    if (typeof local.ref === \"function\") local.ref(element);\n  };\n\n  const control = (\n    <button\n      {...rest}\n      ref={setRef}\n      type={local.type ?? \"button\"}\n      class={buttonClass(local.class)}\n      data-size={local.size ?? \"md\"}\n      data-variant={local.variant ?? \"primary\"}\n      disabled={local.disabled || local.loading}\n      aria-busy={local.loading ? \"true\" : undefined}\n    >\n      <Show when={local.loading}>\n        <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n      </Show>\n      <span class=\"k2b-button__label\">\n        <Show when={local.loading && local.loadingLabel} fallback={local.children}>\n          {local.loadingLabel}\n        </Show>\n      </span>\n    </button>\n  );\n\n  return (\n    <>\n      {control}\n      <Show when={local.tooltip !== false && local.tooltip !== undefined}>\n        <Tooltip\n          content={local.tooltip as JSX.Element}\n          target={() => target}\n          delay={local.tooltipDelay}\n          disabled={local.disabled || local.loading}\n          placement={local.tooltipPlacement}\n        />\n      </Show>\n    </>\n  );\n}\n\nexport function ButtonLink(props: ButtonLinkProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"href\",\n    \"navigation\",\n    \"onClick\",\n    \"onNavigate\",\n    \"replace\",\n    \"ref\",\n    \"scroll\",\n    \"size\",\n    \"tooltip\",\n    \"tooltipDelay\",\n    \"tooltipPlacement\",\n    \"variant\",\n  ]);\n  let target: HTMLAnchorElement | undefined;\n  const setRef = (element: HTMLAnchorElement) => {\n    target = element;\n    if (typeof local.ref === \"function\") local.ref(element);\n  };\n  const className = buttonClass(local.class);\n  const content = <span class=\"k2b-button__label\">{local.children}</span>;\n\n  const tooltip = () => (\n    <Show when={local.tooltip !== false && local.tooltip !== undefined}>\n      <Tooltip content={local.tooltip as JSX.Element} target={() => target} delay={local.tooltipDelay} placement={local.tooltipPlacement} />\n    </Show>\n  );\n\n  if (local.navigation === \"enhanced\" && local.href && local.onNavigate) {\n    return (\n      <>\n        <Link\n          {...rest}\n          ref={setRef}\n          href={local.href}\n          class={className}\n          data-size={local.size ?? \"md\"}\n          data-variant={local.variant ?? \"primary\"}\n          onClick={local.onClick}\n          onNavigate={local.onNavigate}\n          replace={local.replace}\n          scroll={local.scroll}\n        >\n          {content}\n        </Link>\n        {tooltip()}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <a\n        {...rest}\n        ref={setRef}\n        href={local.href}\n        class={className}\n        data-size={local.size ?? \"md\"}\n        data-variant={local.variant ?? \"primary\"}\n        onClick={local.onClick}\n      >\n        {content}\n      </a>\n      {tooltip()}\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"children\"> & {\n  children: JSX.Element;\n  label: string;\n};\n\nexport type IconButtonLinkProps = Omit<ButtonLinkProps, \"children\"> & {\n  children: JSX.Element;\n  label: string;\n};\n\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"label\", \"loading\", \"loadingLabel\", \"tooltip\", \"variant\"]);\n\n  return (\n    <Button\n      {...rest}\n      loading={local.loading}\n      variant={local.variant ?? \"ghost\"}\n      class={`k2b-icon-button ${local.class ?? \"\"}`}\n      aria-label={local.loading ? (local.loadingLabel ?? local.label) : local.label}\n      title={rest.title ?? (local.tooltip === undefined ? local.label : undefined)}\n      tooltip={local.tooltip}\n    >\n      <Show when={!local.loading}>{local.children}</Show>\n    </Button>\n  );\n}\n\nexport function IconButtonLink(props: IconButtonLinkProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"label\", \"tooltip\", \"variant\"]);\n\n  return (\n    <ButtonLink\n      {...rest}\n      variant={local.variant ?? \"ghost\"}\n      class={`k2b-icon-button ${local.class ?? \"\"}`}\n      aria-label={local.label}\n      title={rest.title ?? (local.tooltip === undefined ? local.label : undefined)}\n      tooltip={local.tooltip}\n    >\n      {local.children}\n    </ButtonLink>\n  );\n}\n"],"mappings":"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","ignoreList":[]}