@threadlabs/looma 0.7.3 → 0.8.0

package/package.json

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

package/styles/ui-avatar-group.css

@@ -30,7 +30,7 @@
         var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
         var(--ui-avatar-group-edge-ring, var(--_edge-ring));
       font: inherit;
-      font-size: 0.75rem;
+      font-size: var(--ui-font-size-xs);
       font-weight: 600;
       flex-shrink: 0;
     }

package/styles/ui-avatar.css

@@ -11,7 +11,7 @@
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-solid));
       font: inherit;
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
       font-weight: 600;
       text-transform: uppercase;
     }

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);
@@ -64,22 +65,24 @@
     :scope[data-ui-button-state~="size=sm"] {
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     :scope[data-ui-button-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
-      font-size: 1rem;
+      font-size: var(--ui-font-size-md);
     }
 
-    :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/styles/ui-combobox.css

@@ -9,7 +9,7 @@
     }
     label {
       color: var(--ui-combobox-label-text, var(--ui-text-primary));
-      font-size: var(--ui-combobox-label-font-size, 0.875rem);
+      font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
       font-weight: 500;
     }
     /* The field and anything that annotates it sit on one row; the help button is beside the box,

package/styles/ui-editor-slash-menu.css

@@ -152,7 +152,7 @@
       align-items: center;
       justify-content: center;
       font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-      font-size: 10px;
+      font-size: var(--ui-font-size-2xs);
       background: var(--ui-surface-hover);
       border: 1px solid var(--ui-border);
       border-radius: 3px;

package/styles/ui-editor-table-context-menu.css

@@ -101,7 +101,7 @@
 
     .heading {
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.6875rem;
+      font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;

package/styles/ui-editor-table-toolbar.css

@@ -141,7 +141,7 @@
 
     .menu-heading {
       padding: var(--ui-space-1) var(--ui-space-2);
-      font-size: 0.6875rem;
+      font-size: var(--ui-font-size-2xs);
       font-weight: 700;
       letter-spacing: 0.05em;
       text-transform: uppercase;

package/styles/ui-form-field.css

@@ -18,12 +18,12 @@
 
     .label {
       color: var(--ui-text-secondary);
-      font-size: 0.95rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     .help {
       color: var(--ui-text-muted);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height-md);
     }
 
@@ -43,7 +43,7 @@
     .error,
     :where([data-slotted], [data-slotted] *):is([role="alert"]) {
       color: var(--ui-accent-active);
-      font-size: 0.875rem;
+      font-size: var(--ui-font-size-sm);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-tree-item.css

@@ -17,7 +17,7 @@
       align-items: center;
       min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
-      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
+      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-secondary);
       transition:

package/tokens.css

@@ -36,7 +36,6 @@
       "Segoe UI Emoji";
     --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
     --ui-font-size: 1rem;
-    --ui-font-size-sm: 0.875rem;
     --ui-font-medium: 500;
     --ui-line-height: 1.4;
 
@@ -78,8 +77,8 @@
     /* Type scale, from the base size. */
     --ui-font-size-2xs: calc(var(--ui-font-size) * 0.6875);
     --ui-font-size-xs: calc(var(--ui-font-size) * 0.75);
-    /* Dense interactive text: legible without body-copy spacing. */
-    --ui-font-size-ui: calc(var(--ui-font-size) * 0.9375);
+    /* Dense text: controls, labels, and metadata. Two steps below body copy, never one pixel. */
+    --ui-font-size-sm: calc(var(--ui-font-size) * 0.875);
     --ui-font-size-md: var(--ui-font-size);
     --ui-font-size-lg: calc(var(--ui-font-size) * 1.125);
     --ui-font-size-xl: calc(var(--ui-font-size) * 1.25);

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/UiAvatar.vue

@@ -62,7 +62,7 @@ useComponentHost(controllerModule.default, {
   background: var(--ui-avatar-surface, var(--ui-accent-soft));
   color: var(--ui-avatar-text, var(--ui-accent-solid));
   font: inherit;
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   font-weight: 600;
   text-transform: uppercase;
 }

package/vue/UiAvatarGroup.vue

@@ -85,7 +85,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
     var(--ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
-  font-size: 0.75rem;
+  font-size: var(--ui-font-size-xs);
   font-weight: 600;
   flex-shrink: 0;
 }

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";