@threadlabs/looma 0.7.3 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-badge.css

@@ -95,6 +95,24 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
+       outline to follow: the edge is the fill. The end padding grows by the point's depth so the
+       label never runs into it. */
+    :scope[data-ui-badge-state~="shape=tag"] {
+      --_badge-point: var(--ui-badge-point, var(--ui-space-2));
+
+      border-color: transparent;
+      border-radius: 0;
+      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
+    }
+
+    :scope[data-ui-badge-state~="shape=tag"]:dir(rtl) {
+      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -107,5 +125,9 @@
     @supports (text-box-trim: trim-both) {
     }
 
+    /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
+       outline to follow: the edge is the fill. The end padding grows by the point's depth so the
+       label never runs into it. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-button.css

@@ -41,6 +41,7 @@
       color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
       font-weight: var(--ui-font-medium);
+      text-decoration: none;
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       background-image: var(--ui-raised-highlight);
@@ -73,13 +74,15 @@
       font-size: 1rem;
     }
 
-    :scope:hover:enabled {
+    /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+       is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+    :scope:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--_tone-hover));
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-    :scope:active:enabled {
+    :scope:active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
       background-image: none;
       box-shadow: var(--ui-pressed);
@@ -92,12 +95,12 @@
       box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
     }
 
-    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:enabled {
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:enabled {
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -154,12 +157,12 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :scope[data-ui-button-state~="variant=ghost"]:hover:enabled {
+    :scope[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
-    :scope[data-ui-button-state~="variant=ghost"]:active:enabled {
+    :scope[data-ui-button-state~="variant=ghost"]:active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
       border-color: transparent;
       box-shadow: var(--ui-pressed);
@@ -183,7 +186,7 @@
        disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
        unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
        highlight and shadow, because nothing that cannot be pressed should look raised. */
-    :scope:disabled {
+    :scope:is(:disabled, [aria-disabled="true"]) {
       /* Derived from the tone itself, not from a separate disabled palette: faded toward the
          page, which desaturates it at the same time. Toward the page rather than toward white,
          so a dark theme dims where a light one lightens — the same rule, both schemes. */
@@ -200,7 +203,7 @@
     }
 
     /* A filled button keeps its fill, faded further so its text stays legible on it. */
-    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):disabled {
+    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):is(:disabled, [aria-disabled="true"]) {
       --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
     }
 
@@ -208,7 +211,7 @@
        it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
        the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
        hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-    :scope[data-ui-button-state~="variant=ghost"]:disabled {
+    :scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]) {
       background-color: oklch(from var(--_tone) l c h / 14%);
       border-color: transparent;
     }
@@ -238,19 +241,19 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope[data-ui-button-state~="variant=link"]:hover:enabled {
+    :scope[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :scope[data-ui-button-state~="variant=link"]:active:enabled {
+    :scope[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :scope[data-ui-button-state~="variant=link"]:disabled {
+    :scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]) {
       background: none;
       border-color: transparent;
       color: var(--ui-button-disabled-text, var(--ui-disabled-text));
@@ -272,6 +275,9 @@
 @supports (text-box-trim: trim-both) {
     }
 
+    /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+       is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a

package/vanilla/UiBadge.d.ts

@@ -6,6 +6,7 @@ export interface UiBadgeElement extends HTMLSpanElement {
   removeEventListener<K extends keyof UiBadgeEventMap>(type: K, listener: (this: UiBadgeElement, event: UiBadgeEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiBadgeProps {
+  shape?: "pill" | "tag" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
   variant?: "solid" | "subtle" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiBadge.js

@@ -5,8 +5,9 @@ import "../styles/ui-badge.css";
 export function createUiBadge(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
   const projected = [];
-  const prop0 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
-  const prop1 = componentProps["variant"] === undefined ? "subtle" : componentProps["variant"];
+  const prop0 = componentProps["shape"] === undefined ? "pill" : componentProps["shape"];
+  const prop1 = componentProps["tone"] === undefined ? "neutral" : componentProps["tone"];
+  const prop2 = componentProps["variant"] === undefined ? "subtle" : componentProps["variant"];
   const element = document.createElement("span");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -22,6 +23,7 @@ export function createUiBadge(options = {}) {
   } else {
   }
   manageGeneratedProps(element, [
+    { name: "shape", attribute: "data-shape", value: componentProps["shape"], default: "pill", type: ["pill","tag"], required: false },
     { name: "tone", attribute: "data-tone", value: componentProps["tone"], default: "neutral", type: ["neutral","accent","info","success","warning","danger"], required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "subtle", type: ["solid","subtle"], required: false },
   ]);

package/vanilla/UiButton.d.ts

@@ -8,12 +8,17 @@ export interface UiButtonElement extends HTMLButtonElement {
 export interface UiButtonProps {
   align?: "center" | "start" | null;
   disabled?: boolean | null;
+  href?: string | null;
+  rel?: string | null;
   size?: "sm" | "md" | "lg" | null;
   stretch?: boolean | null;
+  target?: string | null;
   tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
+  type?: "button" | "submit" | "reset" | null;
   variant?: "outline" | "solid" | "danger" | "ghost" | "link" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+  as?: "button" | "a";
 }
 export declare function createUiButton(props?: UiButtonProps): UiButtonElement;

package/vanilla/UiButton.js

@@ -2,20 +2,22 @@
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import "../styles/ui-button.css";
 
-const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"{ true: type, false: null }[format('%s', not href)]","expressionPlan":{"source":"{ true: type, false: null }[format('%s', not href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"type"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"unary","op":"not","operand":{"kind":"id","name":"href"}}]}},"dependencies":["href","type"]}},{"kind":"attribute","name":"disabled","expression":"{ true: true, false: null }[format('%s', disabled and not href)]","expressionPlan":{"source":"{ true: true, false: null }[format('%s', disabled and not href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":true}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"disabled"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"href"}}}]}},"dependencies":["disabled","href"]}},{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"disabled"}]}},"dependencies":["disabled","href"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled and href)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled and href)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"href"}}]}},"dependencies":["disabled","href"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button","a"]}},source:{file:import.meta.url},css:""};
 
 export function createUiButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
   const projected = [];
-  const element = document.createElement("button");
+  const element = document.createElement(as ?? "button");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
     element.setAttribute(name, value === true ? "" : String(value));
   }
-  if (!element.hasAttribute("type")) element.setAttribute("type", "button");
-  const value0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value0 === true) element.setAttribute("disabled", "");
-  else element.removeAttribute("disabled");
+  const value0 = componentProps["target"] === undefined ? undefined : componentProps["target"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("target");
+  else element.setAttribute("target", String(value0));
+  const value1 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
+  if (value1 === null || value1 === undefined) element.removeAttribute("rel");
+  else element.setAttribute("rel", String(value1));
   element.setAttribute("data-component", "ui-button");
   if (children.length > 0) {
     for (const child of children) {

package/vue/UiBadge.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    shape?: 'pill' | 'tag';
     tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
     variant?: 'solid' | 'subtle';
 };
@@ -7,6 +8,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    shape: "pill" | "tag";
     tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
     variant: "solid" | "subtle";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/vue/UiBadge.vue

@@ -6,10 +6,12 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    shape?: 'pill' | 'tag'
     tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
     variant?: 'solid' | 'subtle'
   }>(),
   {
+    shape: 'pill',
     tone: 'neutral',
     variant: 'subtle',
   },
@@ -20,6 +22,7 @@ const hostState = computed(() =>
   [
     props.tone && `tone tone=${props.tone}`,
     props.variant && `variant variant=${props.variant}`,
+    props.shape && `shape shape=${props.shape}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -129,6 +132,32 @@ const hostState = computed(() =>
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
+/* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
+   outline to follow: the edge is the fill. The end padding grows by the point's depth so the
+   label never runs into it. */
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"] {
+  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
+
+  border-color: transparent;
+  border-radius: 0;
+  padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--_badge-point)) 0,
+    100% 50%,
+    calc(100% - var(--_badge-point)) 100%,
+    0 100%
+  );
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]:dir(rtl) {
+  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+  padding-inline-start: calc(
+    var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
+  );
+  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-badge"][hidden] {
   display: none;

package/vue/UiButton.d.ts

@@ -1,18 +1,25 @@
 type __VLS_Props = {
+    as?: 'button' | 'a';
     align?: 'center' | 'start';
     disabled?: boolean;
+    href?: string;
+    rel?: string;
     size?: 'sm' | 'md' | 'lg';
     stretch?: boolean;
+    target?: string;
     tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info';
+    type?: 'button' | 'submit' | 'reset';
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link';
 };
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "button" | "submit" | "reset";
     tone: "accent" | "neutral" | "danger" | "success" | "warning" | "info";
     variant: "outline" | "solid" | "danger" | "ghost" | "link";
+    as: "button" | "a";
     align: "center" | "start";
     disabled: boolean;
     size: "sm" | "md" | "lg";

package/vue/UiButton.vue

@@ -6,19 +6,26 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    as?: 'button' | 'a'
     align?: 'center' | 'start'
     disabled?: boolean
+    href?: string
+    rel?: string
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
+    target?: string
     tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'
+    type?: 'button' | 'submit' | 'reset'
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
   }>(),
   {
+    as: 'button',
     align: 'center',
     disabled: false,
     size: 'md',
     stretch: false,
     tone: 'accent',
+    type: 'button',
     variant: 'outline',
   },
 )
@@ -33,18 +40,38 @@ const hostState = computed(() =>
     props.tone && `tone tone=${props.tone}`,
   ].filter(Boolean).join(' ')
 )
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
-  <button
+  <component
+    :is="as"
     data-component="ui-button"
-    type="button"
     v-bind="$attrs"
-    :disabled="disabled"
+    :type="attribute(({ true: type, false: null })[`${!href}`])"
+    :disabled="attribute(({ true: true, false: null })[`${disabled && !href}`])"
+    :href="attribute(({ true: null, false: href })[`${disabled}`])"
+    :target="target"
+    :rel="rel"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${Boolean(disabled && href)}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${Boolean(disabled && href)}`])
+    : attribute(({ true: 'true', false: null })[`${Boolean(disabled && href)}`])"
     :data-ui-button-state="hostState || undefined"
   >
     <slot />
-  </button>
+  </component>
 </template>
 
 <style scoped>
@@ -89,6 +116,7 @@ const hostState = computed(() =>
   color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
   font-weight: var(--ui-font-medium);
+  text-decoration: none;
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);
@@ -121,13 +149,15 @@ const hostState = computed(() =>
   font-size: 1rem;
 }
 
-[data-component~="ui-button"]:hover:enabled {
+/* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+   is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+[data-component~="ui-button"]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"]:active:enabled {
+[data-component~="ui-button"]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
@@ -141,12 +171,12 @@ const hostState = computed(() =>
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -204,12 +234,12 @@ const hostState = computed(() =>
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
@@ -233,7 +263,7 @@ const hostState = computed(() =>
    disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
    unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
    highlight and shadow, because nothing that cannot be pressed should look raised. */
-[data-component~="ui-button"]:disabled {
+[data-component~="ui-button"]:is(:disabled, [aria-disabled="true"]) {
   /* Derived from the tone itself, not from a separate disabled palette: faded toward the
      page, which desaturates it at the same time. Toward the page rather than toward white,
      so a dark theme dims where a light one lightens — the same rule, both schemes. */
@@ -250,7 +280,7 @@ const hostState = computed(() =>
 }
 
 /* A filled button keeps its fill, faded further so its text stays legible on it. */
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):disabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):is(:disabled, [aria-disabled="true"]) {
   --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
@@ -258,7 +288,7 @@ const hostState = computed(() =>
    it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
    the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
    hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]) {
   background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
@@ -290,19 +320,19 @@ const hostState = computed(() =>
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]) {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));

package/vue/chunks/UiBadge.js

@@ -8,17 +8,22 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	inheritAttrs: false,
 	__name: "UiBadge",
 	props: {
+		shape: { default: "pill" },
 		tone: { default: "neutral" },
 		variant: { default: "subtle" }
 	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.tone && `tone tone=${props.tone}`, props.variant && `variant variant=${props.variant}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.tone && `tone tone=${props.tone}`,
+			props.variant && `variant variant=${props.variant}`,
+			props.shape && `shape shape=${props.shape}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-90c7d1bb"]]);
+}), [["__scopeId", "data-v-c0ffc4d8"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -1,24 +1,27 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
-//#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled", "data-ui-button-state"];
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
 //#endregion
 //#region .build/vue/UiButton.vue
 var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiButton",
 	props: {
+		as: { default: "button" },
 		align: { default: "center" },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
+		href: {},
+		rel: {},
 		size: { default: "md" },
 		stretch: {
 			type: Boolean,
 			default: false
 		},
+		target: {},
 		tone: { default: "accent" },
+		type: { default: "button" },
 		variant: { default: "outline" }
 	},
 	setup(__props) {
@@ -31,16 +34,55 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			props.variant && `variant variant=${props.variant}`,
 			props.tone && `tone tone=${props.tone}`
 		].filter(Boolean).join(" "));
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", mergeProps({
-				"data-component": "ui-button",
-				type: "button"
-			}, _ctx.$attrs, {
-				disabled: __props.disabled,
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({ "data-component": "ui-button" }, _ctx.$attrs, {
+				type: attribute({
+					true: __props.type,
+					false: null
+				}[`${!__props.href}`]),
+				disabled: attribute({
+					true: true,
+					false: null
+				}[`${__props.disabled && !__props.href}`]),
+				href: attribute({
+					true: null,
+					false: __props.href
+				}[`${__props.disabled}`]),
+				target: __props.target,
+				rel: __props.rel,
+				"aria-disabled": typeof {
+					true: "true",
+					false: null
+				}[`${Boolean(__props.disabled && __props.href)}`] === "boolean" ? String({
+					true: "true",
+					false: null
+				}[`${Boolean(__props.disabled && __props.href)}`]) : attribute({
+					true: "true",
+					false: null
+				}[`${Boolean(__props.disabled && __props.href)}`]),
 				"data-ui-button-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 16, [
+				"type",
+				"disabled",
+				"href",
+				"target",
+				"rel",
+				"aria-disabled",
+				"data-ui-button-state"
+			]);
 		};
 	}
-}), [["__scopeId", "data-v-c6ef4679"]]);
+}), [["__scopeId", "data-v-852dd10e"]]);
 //#endregion
 export { UiButton_default as t };