@dumiflex/wp-kit 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## [0.7.0](https://github.com/DumiFlex/wp-kit/compare/v0.6.0...v0.7.0) (2026-11-03)
+
+
+### Features
+
+* IconPicker all (every PrimeIcons glyph, searchable), inline, color and allow-none ([#70](https://github.com/DumiFlex/wp-kit/issues/70)) ([a0dc837](https://github.com/DumiFlex/wp-kit/commit/a0dc83716441c8061428e69faf751ab7b52ed8ae))
+* RichText, the module payload previews and the post loading shapes move into the kit ([#71](https://github.com/DumiFlex/wp-kit/issues/71)) ([b92d62f](https://github.com/DumiFlex/wp-kit/commit/b92d62f87ecd44cb205d2265d7d56c9018e29144))
+* SelectionBar, the one bulk-action bar over a list of ticked rows ([#69](https://github.com/DumiFlex/wp-kit/issues/69)) ([13a51e2](https://github.com/DumiFlex/wp-kit/commit/13a51e22b0e27b404700dc6f3fb2f34fd912d10a))
+* SettingGroup and SettingRow, the settings page rows both apps use ([#68](https://github.com/DumiFlex/wp-kit/issues/68)) ([20f4ff8](https://github.com/DumiFlex/wp-kit/commit/20f4ff8a8c28da63fcabfd9f2c0c2bf28a4f60dd))
+
+
+### Bug Fixes
+
+* draw WorkingLine's marks on a canvas so they glide in Firefox ([#67](https://github.com/DumiFlex/wp-kit/issues/67)) ([6565f15](https://github.com/DumiFlex/wp-kit/commit/6565f1575ecb224ad9e94efdef611f5c31b12849))
+
+## [0.6.0](https://github.com/DumiFlex/wp-kit/compare/v0.5.0...v0.6.0) (2026-11-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* WpButton, CloseButton and ConfirmDialog are removed. Use Button (size="sm" on the canvas; variant="ghost" icon="times" aria-label="Close" for a close button) and ConfirmModal (visible -> open, variant="danger" -> tone="danger"). Button shows its aria-label as a kit tooltip instead of a title attribute. Modal's panel classes are scoped; a ModalShell backdrop close needs mousedown and click on the backdrop.
+* RangeSlider is removed (use Slider with a [low, high] v-model); _skeleton.css and .wp-skel-bar are removed (use Skeleton); unused global classes are removed from theme/tokens.css.
+* WpCheck is removed; use Checkbox (same v-model, size, disabled and --check-on). Toggle is removed; use <WpSwitch size="md"> (error becomes invalid). ColorPicker is removed; use <ColorField presets size="md"> (test hooks are <dataTest>, <dataTest>-preset, <dataTest>-hex). The global .wp-check, .wp-checkbox* and .wp-radio classes are removed.
+
+### Features
+
+* **site:** API tables under every piece, read from the components' own types ([#58](https://github.com/DumiFlex/wp-kit/issues/58)) ([e23973a](https://github.com/DumiFlex/wp-kit/commit/e23973acf57f158068594dc0d63f8172084ab945))
+* **site:** search bar that finds pieces and sections ([#52](https://github.com/DumiFlex/wp-kit/issues/52)) ([8989669](https://github.com/DumiFlex/wp-kit/commit/8989669c43bc8f1511266525ee6a8b9007ee2891))
+* Slider snap settles the thumb on its marks (all the time, or within a distance) ([#60](https://github.com/DumiFlex/wp-kit/issues/60)) ([9b1b5ac](https://github.com/DumiFlex/wp-kit/commit/9b1b5acf1f0d604814b300d7158691fbab007ee0))
+* WorkingLine and entrance classes; AI animations on the kit site ([#56](https://github.com/DumiFlex/wp-kit/issues/56)) ([430df62](https://github.com/DumiFlex/wp-kit/commit/430df624e27e9181d174a7572f70369c7a7b428c))
+
+
+### Bug Fixes
+
+* centre icons on whole pixels; no link underline on a link drawn as a button ([#59](https://github.com/DumiFlex/wp-kit/issues/59)) ([9de9468](https://github.com/DumiFlex/wp-kit/commit/9de94684688879cdd396f948b54650c43918a9fc))
+* chip text clipped in Firefox, refresh icon wobbling as it spins ([#53](https://github.com/DumiFlex/wp-kit/issues/53)) ([02e0c84](https://github.com/DumiFlex/wp-kit/commit/02e0c8405293e39206ea8c810822b00029ee2f44))
+* circles follow the look's corner cap (square in Terminal and TUI) ([#61](https://github.com/DumiFlex/wp-kit/issues/61)) ([7ae84ba](https://github.com/DumiFlex/wp-kit/commit/7ae84baae4024e20b4e67f7b5fb4ec314d3a55b4))
+* tooltip and popover outlines survive a host's CSS reset ([#63](https://github.com/DumiFlex/wp-kit/issues/63)) ([fd8a334](https://github.com/DumiFlex/wp-kit/commit/fd8a334ac86cca52f83f9e0ac7b3bc3ed3b92a98))
+
+
+### Refactoring
+
+* fold RangeSlider into Slider, drop dead global CSS; write the one-piece rule ([#57](https://github.com/DumiFlex/wp-kit/issues/57)) ([2e5d024](https://github.com/DumiFlex/wp-kit/commit/2e5d0240bbb78b467940f19ee50f4de0623ef69d))
+* one Button and one Modal (WpButton, CloseButton and ConfirmDialog folded in) ([#62](https://github.com/DumiFlex/wp-kit/issues/62)) ([591546d](https://github.com/DumiFlex/wp-kit/commit/591546db46a1d6f3fa6ccef10c484bbe40689e94))
+* one Checkbox, one switch, one colour field ([#54](https://github.com/DumiFlex/wp-kit/issues/54)) ([06dba67](https://github.com/DumiFlex/wp-kit/commit/06dba67d9495773bcb1088c09763b30654972bff))
+* one menu (menu.css, Popover variant="menu", Select on Popover) ([#55](https://github.com/DumiFlex/wp-kit/issues/55)) ([e39dc1f](https://github.com/DumiFlex/wp-kit/commit/e39dc1f27f8d0d1efec5bae609b0bf19543d015b))
+
 ## [0.5.0](https://github.com/DumiFlex/wp-kit/compare/v0.4.0...v0.5.0) (2026-11-02)
 
 

package/README.md

@@ -57,6 +57,11 @@ If you already import the kit as `@/kit/...`, alias `@/kit` to `node_modules/@du
 
 - **Vue 3.5** and **PrimeIcons 7** (peer dependencies). Icons are `pi pi-*` classes. The kit imports nothing else at runtime.
 - **A theme:** the kit's own sheets above. A host with its own colour sheet can define the names in [`SHARED_TOKENS`](https://github.com/DumiFlex/wp-kit/blob/main/src/tokens.ts) instead and use the pieces that read only those.
+- **A layer order, if your app uses cascade layers** (Tailwind 4 does). A few pieces (the tooltip, Popover, DropdownMenu, the entrance classes) put their rules in `@layer wp-extension`, so a host page's unlayered CSS wins a clash (that keeps the kit polite on the ComfyUI canvas). Their outlines are drawn as rings, so a reset like Tailwind's preflight (`border-width: 0`) can't strip them. If your own CSS is layered, declare the order in your page's `<head>`, before any stylesheet, with the kit above your reset and below your utilities:
+
+  ```html
+  <style>@layer theme, base, wp-extension, components, utilities;</style>
+  ```
 
 ## Versions
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",
@@ -53,8 +53,8 @@
     "npm-readme": "node scripts/npm-readme.mjs"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "primeicons": "^7.0.0 || ^8.0.0"
+    "primeicons": "^7.0.0 || ^8.0.0",
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
@@ -72,6 +72,7 @@
     "vite": "5.4.21",
     "vitest": "2.1.9",
     "vue": "3.5.44",
+    "vue-component-meta": "2.2.12",
     "vue-eslint-parser": "10.4.0",
     "vue-tsc": "2.2.12"
   }

package/src/Avatar.vue

@@ -68,7 +68,7 @@ const hue = computed(() => {
 .wp-avatar {
   --_s: var(--wp-control-h-md);
   position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden;
-  width: var(--_s); height: var(--_s); border-radius: 50%; /* round: avatar */
+  width: var(--_s); height: var(--_s); border-radius: min(50%, var(--wp-radius-cap, 999px));
   background: color-mix(in srgb, var(--_hue) 22%, var(--wp-bg-2));
   color: color-mix(in srgb, var(--_hue) 70%, var(--wp-text));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_hue) 30%, transparent);

package/src/Banner.vue

@@ -14,7 +14,7 @@
  * that is part of the page (a docs tip): `role="note"`, never announced.
  */
 import { computed, useSlots } from "vue";
-import CloseButton from "./CloseButton.vue";
+import Button from "./Button.vue";
 
 export type BannerTone = "neutral" | "info" | "success" | "warn" | "danger" | "accent";
 
@@ -60,11 +60,11 @@ const iconClass = computed(() => props.icon ?? TONE_ICON[props.tone]);
       <div v-if="slots.default" class="wp-banner__text"><slot /></div>
     </div>
     <div v-if="slots.actions" class="wp-banner__actions"><slot name="actions" /></div>
-    <CloseButton
-      v-if="dismissible"
+    <Button v-if="dismissible" variant="ghost"
+      icon="times"
       class="wp-banner__close"
       size="sm"
-      :label="dismissLabel"
+      :aria-label="dismissLabel"
       @click="emit('dismiss')"
     />
   </div>

package/src/BundlePreview.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+/**
+ * Bundle: what the bundle needs from outside vs what it sets (folded from
+ * its children), then a child list beside the selected child's own full
+ * preview. Narrow hosts stack the list above the preview.
+ */
+import { computed, ref } from "vue";
+import PayloadPreview from "./PayloadPreview.vue";
+import ListRow from "./ListRow.vue";
+import Chip from "./Chip.vue";
+import { itemType, kindColour, kindIcon, moduleSubtype } from "./kind-colour";
+import {
+  derivationRules,
+  fixedValues,
+  innerOf,
+  readArray,
+  readGroups,
+  readObject,
+  readString,
+  varFlow,
+  wildcardOptions,
+  type Obj,
+} from "./preview-readers";
+
+const props = defineProps<{
+  payload: Obj;
+  refNames: Record<string, string>;
+  refGroups: Record<string, Record<string, string[]>>;
+}>();
+
+interface Child {
+  key: string;
+  id: string;
+  name: string;
+  type: string;
+  enabled: boolean;
+  raw: Obj;
+}
+function childName(c: unknown): string | null {
+  const meta = readObject(c, "meta");
+  return (
+    readString(meta, "name") ??
+    readString(meta, "library_name") ??
+    readString(c, "name") ??
+    readString(readObject(c, "payload"), "var_binding")
+  );
+}
+const children = computed<Child[]>(() =>
+  readArray(props.payload, "children").map((c, i) => ({
+    key: readString(c, "id") ?? String(i),
+    id: readString(c, "id") ?? "",
+    name: childName(c) ?? "—",
+    type: readString(c, "type") ?? "—",
+    enabled: (c as Obj | null)?.["enabled"] !== false,
+    raw: (c && typeof c === "object" ? c : {}) as Obj,
+  })),
+);
+/** Sibling names + wildcard axes so a child constraint resolves its
+ *  wildcards the same way the list does. */
+const childRefNames = computed(() => {
+  const out: Record<string, string> = { ...props.refNames };
+  for (const c of children.value) if (c.id) out[c.id] = c.name;
+  return out;
+});
+const childRefGroups = computed(() => {
+  const out: Record<string, Record<string, string[]>> = { ...props.refGroups };
+  for (const c of children.value) {
+    const g = readGroups(innerOf(c.raw), "tag_groups");
+    if (c.id && g) out[c.id] = g;
+  }
+  return out;
+});
+function summary(c: Child): string {
+  const inner = innerOf(c.raw);
+  const label = c.type.replace(/_/g, " ");
+  switch (c.type) {
+    case "wildcard": {
+      const n = wildcardOptions(inner).length;
+      const b = readString(inner, "var_binding");
+      return `${label} · ${n} option${n === 1 ? "" : "s"}${b ? ` · $${b}` : ""}`;
+    }
+    case "fixed_values": {
+      const n = fixedValues(inner).length;
+      return `${label} · ${n} value${n === 1 ? "" : "s"}`;
+    }
+    case "derivation": {
+      const n = derivationRules(inner).length;
+      return `${label} · ${n} rule${n === 1 ? "" : "s"}`;
+    }
+    case "combine": {
+      const out = readString(inner, "output_var");
+      return out ? `${label} · $${out}` : label;
+    }
+    case "constraint": {
+      const s = readString(inner, "source_wildcard_id");
+      const t = readString(inner, "target_wildcard_id");
+      const name = (id: string | null): string => (id ? (childRefNames.value[id] ?? id) : "?");
+      return `${label} · ${name(s)} → ${name(t)}`;
+    }
+    default:
+      return label;
+  }
+}
+const flow = computed(() => varFlow(props.payload));
+const provide = computed(() => flow.value.reads.filter((v) => !flow.value.sets.includes(v)));
+
+const selected = ref<string | null>(null);
+const current = computed(
+  () => children.value.find((c) => c.key === selected.value) ?? children.value[0] ?? null,
+);
+const counts = computed(() => {
+  const out: Record<string, number> = {};
+  for (const c of children.value) out[c.type] = (out[c.type] ?? 0) + 1;
+  return out;
+});
+</script>
+
+<template>
+  <div class="wp-pv wp-bundle">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ children.length }}</b><span>module{{ children.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-for="(n, t) in counts"
+        :key="t"
+        class="wp-pv-stat wp-pv-hide-narrow"
+      >
+        <b>{{ n }}</b><span>{{ String(t).replace(/_/g, " ") }}</span>
+      </div>
+    </div>
+    <div
+      v-if="provide.length || flow.sets.length"
+      class="wp-bd-flow"
+    >
+      <template v-if="provide.length">
+        <span class="wp-pv-label">You provide</span>
+        <div>
+          <code
+            v-for="v in provide"
+            :key="`p-${v}`"
+            class="wp-bd-var"
+          >${{ v }}</code>
+          <span class="wp-bd-hint">read inside, not set by any module here</span>
+        </div>
+      </template>
+      <template v-if="flow.sets.length">
+        <span class="wp-pv-label">It sets</span>
+        <div>
+          <code
+            v-for="v in flow.sets"
+            :key="`s-${v}`"
+            class="wp-bd-var"
+          >${{ v }}</code>
+        </div>
+      </template>
+    </div>
+    <div class="wp-bd-split">
+      <nav
+        class="wp-bd-kids wp-bundle-children"
+        data-wp-rows
+      >
+        <ListRow
+          v-for="c in children"
+          :key="c.key"
+          class="wp-bd-kid wp-bundle-child"
+          :selected="current?.key === c.key"
+          :icon="kindIcon(c.type)"
+          :description="`${summary(c)}${c.enabled ? '' : ' · disabled'}`"
+          :muted="!c.enabled"
+          data-test="bundle-child"
+          @click="selected = c.key"
+        >
+          {{ c.name }}
+        </ListRow>
+      </nav>
+      <div
+        v-if="current"
+        class="wp-bd-pane"
+        data-test="bundle-child-body"
+      >
+        <div class="wp-bd-pane__head">
+          <Chip v-if="moduleSubtype(current.type)" :color="kindColour(itemType('module', moduleSubtype(current.type)))">{{ itemType('module', moduleSubtype(current.type)) }}</Chip>
+          <Chip v-else>{{ current.type }}</Chip>
+          <b>{{ current.name }}</b>
+        </div>
+        <PayloadPreview
+          :payload="current.raw"
+          :ref-names="childRefNames"
+          :ref-groups="childRefGroups"
+          nested
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-bd-flow {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px 14px;
+  align-items: baseline;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-bd-flow > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: baseline;
+}
+.wp-bd-var {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-success);
+}
+.wp-bd-hint {
+  font-size: 11.5px;
+  color: var(--wp-text-dim);
+}
+.wp-bd-split {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+}
+@container (max-width: 700px) {
+  .wp-bd-split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .wp-bd-kids {
+    border-right: 0;
+    border-bottom: 1px solid var(--wp-border);
+  }
+}
+.wp-bd-kids {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--wp-border);
+}
+.wp-bd-pane {
+  min-width: 0;
+}
+.wp-bd-pane__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--wp-border);
+  font-size: 13px;
+}
+</style>

package/src/Button.vue

@@ -1,103 +1,132 @@
 <script setup lang="ts">
 /**
- * Button — single source of truth for app buttons.
+ * Button: the one button, in the manager, on the canvas and on the
+ * community site (WpButton and CloseButton were folded in).
+ *
+ *   <Button variant="primary" icon="plus">Add module</Button>
+ *   <Button variant="ghost" icon="download" aria-label="Download snapshot" />
+ *   <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" @click="close" />
+ *   <Button variant="add" icon="plus" size="sm" block>Add rule</Button>
+ *   <Button as="a" href="/docs" variant="link">Read the docs</Button>
  *
  * Variants:
- *   primary   — solid accent; main CTA per surface
- *   secondary — subtle filled; default
- *   ghost     — transparent with hover bg; tertiary
- *   danger    — red-tinted; destructive actions
- *   link      — text-only; inline CTAs
- *   outline   — neutral bordered ghost (not accent: an accent outline read as
- *               a second primary)
- *   add       — dashed, quiet: the "Add a row" button at the end of a list
+ *   primary   solid accent; the main action of a surface
+ *   secondary subtle filled; the default
+ *   ghost     transparent with a hover fill; tertiary actions, close (×)
+ *   danger    red-tinted; destructive actions
+ *   link      text only; inline actions
+ *   outline   neutral bordered ghost (an accent outline read as a second primary)
+ *   add       dashed and quiet: the "Add a row" button at the end of a list
  *
- * `block` stretches it to the full width of its container. `pressed` makes
- * it a toggle (aria-pressed, accent tint while on).
+ * Sizes follow the control scale: sm 24 (the canvas) / md 32 (default) / lg 40.
+ * `icon` / `iconRight` take a PrimeIcons name, with or without `pi-`.
  *
- * Sizes follow the control scale: sm 24 / md 32 (default) / lg 40.
+ * With no slot content it is an icon button (square, `.wp-btn--icon`); give
+ * it an `aria-label`, which is also its tooltip (`hint` sets another, `kbd`
+ * adds a key chip). Use `hint`, not `v-tooltip` on the component, which would
+ * fight the button's own. `pressed` makes it a toggle (aria-pressed, accent
+ * tint while on). `block` stretches it to its container.
  *
- * States: default · hover · active · focus-visible · disabled · loading.
  * Disabled fades to 45% with a not-allowed cursor and no hover change.
- * Loading keeps the variant's own colours, swaps the lead icon for the
- * sparkle LoadingMark in the label colour, sets aria-busy and ignores clicks.
+ * Loading keeps the variant's colours, swaps the lead icon for the sparkle,
+ * sets aria-busy and ignores clicks.
  *
- * Icon-only mode auto-engages when no slot content is provided (.wp-btn--icon).
- * Pass `aria-label` for screen reader text when using icon-only mode.
+ * `as="a"` draws a link that looks like a button (pass `href`, `target`…);
+ * disabled then sets aria-disabled and takes it out of the tab order.
  *
- * The styles live in kit/button.css, shared with the canvas
- * Button twin.
+ * Its stylesheet (`button.css`) is pulled in scoped, so the canvas never
+ * carries the `.wp-btn` classes globally; the manager also loads it globally
+ * for the few hand-written `.wp-btn` links. Row icon buttons on the canvas
+ * are WpIconButton.
  */
 import { computed, useSlots } from "vue";
 import Icon from "./Icon.vue";
 import LoadingMark from "./LoadingMark.vue";
+import { vTooltip } from "./tooltip";
 
 type Variant = "primary" | "secondary" | "ghost" | "danger" | "link" | "outline" | "add";
 type Size = "sm" | "md" | "lg";
 
-interface Props {
+const props = withDefaults(defineProps<{
   variant?: Variant | undefined;
   size?: Size | undefined;
+  /** PrimeIcons name ("plus" or "pi-plus"), drawn before the label. */
   icon?: string | undefined;
+  /** PrimeIcons name drawn after the label (a chevron, an external link). */
   iconRight?: string | undefined;
   loading?: boolean | undefined;
   disabled?: boolean | undefined;
+  /** Stretch to the container's full width. */
   block?: boolean | undefined;
   /** Makes it a toggle (`aria-pressed`): on, it wears the accent tint. */
   pressed?: boolean | undefined;
   type?: "button" | "submit" | "reset" | undefined;
   ariaLabel?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), {
+  /** Tooltip text; an icon button shows its aria-label when this is unset. */
+  hint?: string | undefined;
+  /** A shortcut shown in the tooltip's key chip, e.g. "Esc". */
+  kbd?: string | undefined;
+  /** `a` draws a link that looks like a button. */
+  as?: "button" | "a" | undefined;
+}>(), {
   variant: "secondary",
   size: "md",
   type: "button",
   pressed: undefined,
+  icon: undefined,
+  iconRight: undefined,
+  ariaLabel: undefined,
+  hint: undefined,
+  kbd: undefined,
+  as: "button",
 });
 
-const emit = defineEmits<{
-  (e: "click", evt: MouseEvent): void;
-}>();
+const emit = defineEmits<{ click: [evt: MouseEvent] }>();
 
 const slots = useSlots();
-
-const hasContent = computed(() => Boolean(slots.default));
-
-/** Native hover tooltip for icon-only buttons. Their `aria-label` names them
- *  for screen readers, but a sighted user hovering a bare icon gets nothing —
- *  so mirror the label into `title` when there's no visible text. A button with
- *  text already says what it does, so it stays untitled. */
-const titleAttr = computed(() =>
-  !hasContent.value && props.ariaLabel ? props.ariaLabel : undefined);
+const iconOnly = computed(() => !slots.default);
+const isLink = computed(() => props.as === "a");
+const off = computed(() => Boolean(props.disabled || props.loading));
 
 const classes = computed(() => [
   "wp-btn",
   `wp-btn--${props.variant}`,
   `wp-btn--${props.size}`,
-  !hasContent.value && "wp-btn--icon",
+  iconOnly.value && "wp-btn--icon",
   props.block && "wp-btn--block",
 ]);
 
-function onClick(e: MouseEvent) {
-  if (props.disabled || props.loading) return;
+const markSize = computed(() => (props.size === "lg" ? 16 : props.size === "md" ? 14 : 12));
+
+function onClick(e: MouseEvent): void {
+  if (off.value) {
+    // A link can't be disabled natively; stop it following its href.
+    if (isLink.value) e.preventDefault();
+    return;
+  }
   emit("click", e);
 }
 </script>
 
 <template>
-  <button
-    :type="type"
+  <component
+    :is="as"
+    v-tooltip="{ text: hint ?? (iconOnly ? ariaLabel : undefined), kbd }"
+    :type="isLink ? undefined : type"
     :class="classes"
-    :disabled="disabled || loading"
+    :disabled="isLink ? undefined : off"
+    :aria-disabled="isLink && off ? 'true' : undefined"
+    :tabindex="isLink && off ? -1 : undefined"
     :aria-label="ariaLabel"
-    :title="titleAttr"
     :aria-busy="loading || undefined"
     :aria-pressed="pressed === undefined ? undefined : pressed"
     @click="onClick"
   >
-    <LoadingMark v-if="loading" variant="sparkle" mono :size="size === 'lg' ? 16 : 14" decorative />
+    <LoadingMark v-if="loading" variant="sparkle" mono :size="markSize" decorative />
     <Icon v-else-if="icon" :name="icon" />
-    <span v-if="hasContent" class="wp-btn__label"><slot /></span>
+    <span v-if="!iconOnly" class="wp-btn__label"><slot /></span>
     <Icon v-if="iconRight" :name="iconRight" />
-  </button>
+  </component>
 </template>
+
+<style scoped src="./button.css"></style>