contain-css-svelte 1.1.20 → 1.2.0

package/dist/layout/SplitPane.svelte.d.ts

@@ -1,9 +1,23 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type Props = {
+import type { ContainProps } from "../types";
+type Props = ContainProps<HTMLAttributes<HTMLElement>, {
     left?: Snippet;
     right?: Snippet;
-} & HTMLAttributes<HTMLElement> & Record<string, unknown>;
+    /**
+     * Accessible name for the drag handle between the panes. Name what the
+     * panes hold -- `resizerLabel="Resize the preview"` -- so it is clear
+     * what moving the handle does.
+     */
+    resizerLabel?: string;
+}, {
+    bg?: string | null;
+    fg?: string | null;
+    border?: string | null;
+    height?: string | null;
+    leftWidth?: string | null;
+    rightWidth?: string | null;
+}>;
 declare const SplitPane: import("svelte").Component<Props, {}, "">;
 type SplitPane = ReturnType<typeof SplitPane>;
 export default SplitPane;

package/dist/layout/Stack.svelte

@@ -1,32 +1,33 @@
-<script lang="ts">import { injectVars } from "../util";
-let { fill = false, stretch = false, split = false, center = false, justify = null, align = null, gap = null, children, ...restProps } = $props();
+<script lang="ts">import { elementProps } from "../util";
+import { MARGIN_VARS, PADDING_VARS, RADIUS_VARS, } from "../styleProps";
+let { fill = false, stretch = false, split = false, center = false, justify = null, align = null, gap = null, children, class: className, ...restProps } = $props();
 const resolvedAlign = $derived(align ?? (center ? "center" : null));
-const inlineStyle = $derived(restProps.style);
-const elementProps = $derived.by(() => {
-    const { style: _, ...rest } = restProps;
-    return rest;
-});
-const style = $derived(injectVars({ justify, align: resolvedAlign, gap, ...elementProps }, "stack", [
+/* The shorthands stack's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const STACK_VARS = [
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...MARGIN_VARS,
+];
+const el = $derived(elementProps({ justify, align: resolvedAlign, gap, ...restProps }, "stack", [
+    ...STACK_VARS,
     "bg",
     "fg",
-    "padding",
     "width",
     "height",
     "gap",
     "justify",
     "align",
-    "marginBlock",
-    "marginInline",
-]) + (inlineStyle ?? ""));
+]));
 </script>
 
 <div
-  class="stack"
+  class={["stack", className]}
   class:fill
   class:stretch
   class:split
-  {style}
-  {...elementProps}
+  {...el}
 >
   {@render children?.()}
 </div>

package/dist/layout/Stack.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { BaseStyleProps, MarginStyleProps } from "../types";
-type Props = {
+import type { BaseStyleProps, ContainProps, MarginStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Stack: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     fill?: boolean;
     stretch?: boolean;
     split?: boolean;
@@ -10,7 +11,6 @@ type Props = {
     align?: string | null;
     gap?: string | null;
     children?: Snippet;
-} & BaseStyleProps & MarginStyleProps & HTMLAttributes<HTMLDivElement>;
-declare const Stack: import("svelte").Component<Props, {}, "">;
+}, BaseStyleProps & MarginStyleProps & StyleProps<readonly ["padding", "borderRadius", "marginBlock", "marginInline"]>>, {}, "">;
 type Stack = ReturnType<typeof Stack>;
 export default Stack;

package/dist/layout/TabBar.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">import Bar from "./Bar.svelte";
 import TabItem from "../controls/TabItem.svelte";
-let { sticky = false, active = $bindable(null), items = [], onchange, children, } = $props();
+import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { sticky = false, active = $bindable(null), items = [], onchange, children, class: className, ...restProps } = $props();
+/* The shorthands this component's own CSS backs, one group per mixin
+   it includes. The Props type is derived from this same array, so what
+   the component accepts and what it emits cannot drift apart. */
+const TAB_BAR_VARS = [
+    ...COLOR_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "tab-bar", TAB_BAR_VARS));
 let lastActive = $state(active);
 </script>
 
-<div class="tabs" class:sticky>
+<div class={["tabs", className]} class:sticky {...el}>
   <Bar
     padding="0"
     --button-height="var(--tab-bar-height, 3em)"

package/dist/layout/TabBar.svelte.d.ts

@@ -1,14 +1,21 @@
-type Item = {
-    label: string;
-    value: string;
-};
-interface Props {
+import type { HTMLAttributes } from "svelte/elements";
+import type { ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const TabBar: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     sticky?: boolean;
-    active?: string | Item | null;
-    items?: (string | Item)[];
-    onchange?: (value: string | Item | null) => void;
+    active?: string | {
+        label: string;
+        value: string;
+    } | null;
+    items?: (string | {
+        label: string;
+        value: string;
+    })[];
+    onchange?: (value: string | {
+        label: string;
+        value: string;
+    } | null) => void;
     children?: import("svelte").Snippet;
-}
-declare const TabBar: import("svelte").Component<Props, {}, "active">;
+}, StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "active">;
 type TabBar = ReturnType<typeof TabBar>;
 export default TabBar;

package/dist/layout/Table.svelte

@@ -1,4 +1,8 @@
-<script lang="ts">let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
+<script lang="ts">/* No attribute pass-through, deliberately: the sticky variant renders the
+   visible tables AND a visually-hidden clone of them used to measure column
+   widths. Spreading a caller's `id` would emit it twice, which is invalid.
+   Set attributes on the <table> markup you pass in as `thead`/`tbody`. */
+let { sticky = false, column_widths = null, thead, tbody, children, } = $props();
 // svelte-ignore state_referenced_locally
 let columns = $state(column_widths || []);
 /* Code for syncing column widths for scrolling table solution */

package/dist/layout/Tile.svelte

@@ -1,4 +1,15 @@
-<script lang="ts">import { injectVars } from "../util";
+<script lang="ts">import { splitProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, MARGIN_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+/* The shorthands this component's own CSS backs, one group per mixin
+   it includes. The Props type is derived from this same array, so what
+   the component accepts and what it emits cannot drift apart. */
+const TILE_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...MARGIN_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
 let { checked = $bindable(false), ...props } = $props();
 /* Props to CSS variables, the way Stack, Card, Tag and the rest do it, so a
    Tile can be aimed with `<Tile center>` rather than only a raw variable. */
@@ -16,43 +27,45 @@ const styleProps = $derived.by(() => {
         align: align ?? (center ? "center" : null),
     };
 });
-const style = $derived(injectVars(styleProps, "tile", [
-    "bg",
-    "fg",
-    "padding",
-    "width",
-    "height",
-    "justify",
-    "align",
-    "marginBlock",
-    "marginInline",
-]) + (props.style ?? ""));
-/** Everything that is ours rather than the element's. */
-function stripOwnProps(value) {
-    const { selectable: _selectable, interactive: _interactive, children: _children, justify: _justify, align: _align, center: _center, bg: _bg, fg: _fg, padding: _padding, width: _width, height: _height, marginBlock: _marginBlock, marginInline: _marginInline, style: _style, ...rest } = value;
-    return rest;
-}
-function getSelectableInputProps(value) {
-    return stripOwnProps(value);
-}
-function getInteractiveButtonProps(value) {
-    return stripOwnProps(value);
-}
+/* splitProps consumes the style props and `--*`, and keeps `style` out of
+   the attributes; the props that are Tile's own rather than the element's
+   are peeled off here first. In the selectable case the variables land on
+   the label that `.tile` styles while the attributes go to the checkbox,
+   which is what a caller's `aria-*` and `data-*` are describing. */
+const el = $derived.by(() => {
+    const { selectable: _selectable, interactive: _interactive, children: _children, center: _center, class: _class, ...rest } = props;
+    return splitProps({ ...rest, ...styleProps }, "tile", [
+        ...TILE_VARS,
+        "width",
+        "height",
+        "justify",
+        "align",
+    ]);
+});
+const className = $derived(props.class);
 </script>
 
 {#if props.selectable}
-  <label class="tile" {style}>
+  <label class={["tile", className]} style={el.style}>
     <div class="checkbox">
-      <input type="checkbox" bind:checked {...getSelectableInputProps(props)} />
+      <input
+        type="checkbox"
+        bind:checked
+        {...el.attrs as HTMLInputAttributes}
+      />
     </div>
     {@render props.children?.()}
   </label>
 {:else if props.interactive}
-  <button class="tile" {style} {...getInteractiveButtonProps(props)}>
+  <button
+    class={["tile", className]}
+    style={el.style}
+    {...el.attrs as HTMLButtonAttributes}
+  >
     {@render props.children?.()}
   </button>
 {:else}
-  <div class="tile" {style} {...stripOwnProps(props as RenderProps)}>
+  <div class={["tile", className]} style={el.style} {...el.attrs}>
     {@render props.children?.()}
   </div>
 {/if}

package/dist/layout/Tile.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import { type StyleProps } from "../styleProps";
 import type { BaseStyleProps, MarginStyleProps } from "../types";
-type BaseProps = BaseStyleProps & MarginStyleProps & {
+declare const Tile: import("svelte").Component<(BaseStyleProps & MarginStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "marginBlock", "marginInline", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]> & {
     /** Distribution along the tile's own axis, which is vertical. */
     justify?: string | null;
     /** Cross-axis alignment, which is horizontal. Centred already. */
@@ -14,23 +15,44 @@ type BaseProps = BaseStyleProps & MarginStyleProps & {
      */
     center?: boolean;
     children?: Snippet;
-};
-type StaticTileProps = BaseProps & HTMLAttributes<HTMLDivElement> & {
+} & HTMLAttributes<HTMLDivElement> & {
     interactive?: false;
     selectable?: false;
     checked?: never;
-};
-type InteractiveTileProps = BaseProps & HTMLButtonAttributes & {
+}) | (BaseStyleProps & MarginStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "marginBlock", "marginInline", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]> & {
+    /** Distribution along the tile's own axis, which is vertical. */
+    justify?: string | null;
+    /** Cross-axis alignment, which is horizontal. Centred already. */
+    align?: string | null;
+    /**
+     * Shorthand for centring the tile's contents. Sets both axes, unlike
+     * `Stack`'s `center`, because a Tile already centres horizontally -- setting
+     * only the cross axis here would be a no-op and `<Tile center>` would look
+     * broken.
+     */
+    center?: boolean;
+    children?: Snippet;
+} & HTMLButtonAttributes & {
     interactive: true;
     selectable?: false;
     checked?: never;
-};
-type SelectableTileProps = BaseProps & HTMLInputAttributes & {
+}) | (BaseStyleProps & MarginStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "marginBlock", "marginInline", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]> & {
+    /** Distribution along the tile's own axis, which is vertical. */
+    justify?: string | null;
+    /** Cross-axis alignment, which is horizontal. Centred already. */
+    align?: string | null;
+    /**
+     * Shorthand for centring the tile's contents. Sets both axes, unlike
+     * `Stack`'s `center`, because a Tile already centres horizontally -- setting
+     * only the cross axis here would be a no-op and `<Tile center>` would look
+     * broken.
+     */
+    center?: boolean;
+    children?: Snippet;
+} & HTMLInputAttributes & {
     selectable: true;
     interactive?: false;
     checked?: boolean;
-};
-type Props = StaticTileProps | InteractiveTileProps | SelectableTileProps;
-declare const Tile: import("svelte").Component<Props, {}, "checked">;
+}), {}, "checked">;
 type Tile = ReturnType<typeof Tile>;
 export default Tile;

package/dist/misc/Code.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">const browser = typeof window !== "undefined";
+/* No attribute pass-through, deliberately: this renders CodeInner (loaded
+   lazily in the browser) and no element of its own. */
 let { code, inline = false, language = "html" } = $props();
 let component = $state(null);
 if (browser) {

package/dist/misc/Progress.svelte

@@ -1,8 +1,20 @@
-<script lang="ts">import { injectVars } from "../util";
-// migrate props via $props() so we can pick up extra CSS var props in restProps
-let { state = "inprogress", value = 0, max = 100, bg = null, fg = null, padding = null, width = null, height = null, children, ...restProps } = $props();
-const cssKeys = ["bg", "fg", "padding", "width", "height"];
-const style = $derived(injectVars(restProps, "progress", cssKeys));
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_CONTAINER_VARS, } from "../styleProps";
+let { state = "inprogress", value = 0, max = 100, bg = null, fg = null, padding = null, width = null, height = null, children, progressLabel = "Progress", class: className, ...restProps } = $props();
+/* The shorthands this component's own CSS backs, one group per mixin
+   it includes. The Props type is derived from this same array, so what
+   the component accepts and what it emits cannot drift apart. */
+const PROGRESS_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_CONTAINER_VARS,
+];
+const cssKeys = [...PROGRESS_VARS, "width", "height"];
+/* Every style prop is destructured above, so they are handed back
+   explicitly. Passing `restProps` alone -- which is what this did before --
+   meant <Progress bg="red"> emitted no --progress-bg at all. */
+const el = $derived(elementProps({ bg, fg, padding, width, height, ...restProps }, "progress", cssKeys));
 // Compute filled fraction (0..1). 'indeterminate' treats as 1 for the visual bar,
 // but the native <progress> should omit the value attribute for indeterminate.
 let fillFraction = $derived(value === "indeterminate"
@@ -19,11 +31,16 @@ let halfFull = $derived(fillFraction > 0.5);
     1) Hidden native <progress> for a11y. 
        If 'indeterminate', omit the value attribute entirely.
   -->
-<div class="progress-container" data-state={state} {style}>
+<div class={["progress-container", className]} data-state={state} {...el}>
   {#if value === "indeterminate"}
-    <progress aria-label="Progress" {max} hidden></progress>
+    <progress aria-label={progressLabel} {max} hidden></progress>
   {:else}
-    <progress aria-label="Progress" {max} value={Number(value)} hidden></progress>
+    <progress
+      aria-label={progressLabel}
+      {max}
+      value={Number(value)}
+      hidden
+    ></progress>
   {/if}
 
   <!-- 2) Custom track with diagonal stripes (scrolling) when animateTrack=true -->

package/dist/misc/Progress.svelte.d.ts

@@ -1,15 +1,22 @@
+import { type StyleProps } from "../styleProps";
 import type { Snippet } from "svelte";
-type $$ComponentProps = {
+import type { HTMLAttributes } from "svelte/elements";
+import type { BaseStyleProps, ContainProps } from "../types";
+declare const Progress: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
     state?: "uninitiated" | "inprogress" | "complete";
     value?: number | "indeterminate";
     max?: number;
-    bg?: string | null;
-    fg?: string | null;
-    padding?: string | null;
-    width?: string | null;
-    height?: string | null;
     children?: Snippet;
-} & Record<string, unknown>;
-declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
+    /**
+     * Accessible name for the native <progress> that carries this bar's
+     * semantics. Say what is progressing -- `progressLabel="Upload"` -- since
+     * "Progress" tells a screen-reader user nothing they did not already know
+     * from the role.
+     *
+     * Named `progressLabel`, not `label`, because `label` is a real HTML
+     * attribute; a style or a11y prop must never shadow one.
+     */
+    progressLabel?: string;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant", "lineWidth"]>>, {}, "">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;

package/dist/misc/Tag.svelte

@@ -1,32 +1,33 @@
-<script lang="ts">import { injectVars } from "../util";
-let { children, primary, warning, danger, success, info, onclose = null, ...restProps } = $props();
-let style = $derived(injectVars(restProps, "tag", [
-    "bg",
-    "fg",
-    "padding",
-    "borderRadius",
-    "fontSize",
-]));
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, PADDING_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+let { children, primary, warning, danger, success, info, onclose = null, closeLabel = "Remove", class: className, ...restProps } = $props();
+/* The shorthands tag's own CSS backs, one group per mixin it
+   includes. The Props type is derived from this same array, so what the
+   component accepts and what it emits cannot drift apart. */
+const TAG_VARS = [
+    ...COLOR_VARS,
+    ...PADDING_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+const el = $derived(elementProps(restProps, "tag", TAG_VARS));
 </script>
 
 <span
-  {style}
-  class="tag"
+  class={["tag", className]}
   class:closable={!!onclose}
-  {...restProps}
   class:primary
   class:warning
   class:danger
   class:success
   class:info
+  {...el}
 >
-  {@render children?.()}
-  {#if onclose}
-    &nbsp;
-    <button class="close-button" aria-label="Close tag" onclick={onclose}>
-      &times;
-    </button>
-  {/if}
+  {@render children?.()}{#if onclose}<button
+      class="close-button"
+      aria-label={closeLabel}
+      onclick={onclose}><span aria-hidden="true">&times;</span></button
+    >{/if}
 </span>
 
 <style>/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
@@ -161,48 +162,100 @@ let style = $derived(injectVars(restProps, "tag", [
   margin-inline-end: var(--space);
 }
 
+/* A closable tag lays its label and button out in flow rather than absolutely
+   positioning the button over the top-right corner. The old approach needed a
+   literal &nbsp; in the markup to stop the button covering the last character,
+   which still overlapped once a tag wrapped to two lines and put the button's
+   hit area outside the padding. As a flex item the button reserves its own
+   space at any length, and the gap scales with the tag's font-size. */
 .tag.closable {
-  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-close-button-gap, 0.35em);
 }
 
-.tag button {
+.tag .close-button {
   background: transparent;
   color: inherit;
   box-shadow: none;
   border: none;
-  position: absolute;
-  top: 0;
-  right: 0;
+  padding: 0;
+  margin: 0;
+  /* Square, so the focus ring and pointer target read as a button rather
+     than tracking the width of the glyph. */
+  inline-size: var(--tag-close-button-size, 1.25em);
+  block-size: var(--tag-close-button-size, 1.25em);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tag-close-button-border-radius, 50%);
+  font-size: inherit;
+  line-height: 1;
+  flex: none;
   cursor: var(--tag-close-button-cursor, var(--button-cursor, var(--cursor, pointer)));
   transition: filter var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), background-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), border-color var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), box-shadow var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms))), transform var(--tag-close-button-transition, var(--button-transition, var(--transition, 300ms)));
 }
 
-.tag button:hover {
-  filter: var(--tag-close-button-hover-filter, var(--button-hover-filter, var(--hover-filter, brightness(1.05))));
-  transform: var(--tag-close-button-hover-transform, var(--button-hover-transform, var(--hover-transform, none)));
-  background-color: color-mix(in oklch, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, white) calc(100% - var(--hover-base-color-percentage, 90%)));
-  box-shadow: var(--tag-close-button-hover-box-shadow, var(--button-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
+/* The affordance is a scrim mixed from the tag's own FOREGROUND, not from
+   `clickable()`'s fill.
+
+   clickable() derives its hover fill from --_background-color, which this
+   button inherits from the tag. On a red tag that produced 90% red + 10%
+   white -- a muddy circle a shade off the tag it sits on, reading as a
+   rendering artifact rather than a control. Mixing from currentColor
+   instead inverts correctly against any tag colour: a light scrim on a
+   saturated tag, a dark one on the default pale tag, with no per-variant
+   rules. */
+.tag .close-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: transparent;
+  transition: background-color var(--tag-close-button-transition, var(--transition, 150ms));
+}
+
+.tag .close-button:hover::before {
+  background-color: var(--tag-close-button-hover-bg, color-mix(in oklab, transparent, currentColor 18%));
+}
+
+.tag .close-button:active::before {
+  background-color: var(--tag-close-button-active-bg, color-mix(in oklab, transparent, currentColor 30%));
 }
 
-.tag button:active {
-  filter: var(--tag-close-button-active-filter, var(--button-active-filter, var(--active-filter, brightness(0.9))));
-  transform: var(--tag-close-button-active-transform, var(--button-active-transform, var(--active-transform, none)));
-  background-color: color-mix(in oklch, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
-  box-shadow: var(--tag-close-button-active-box-shadow, var(--button-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
+/* WCAG 2.5.8 wants a 24x24 CSS px target. The glyph is sized in `em` so it
+   stays proportional to a tag that is deliberately tiny (0.75rem), which
+   left a 15x15 target. This expands the POINTER target without changing
+   the visual size or the tag's height. */
+.tag .close-button::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  inline-size: max(100%, var(--tag-close-button-target-size, 24px));
+  block-size: max(100%, var(--tag-close-button-target-size, 24px));
 }
 
-.tag button:disabled {
-  cursor: var(--tag-close-button-disabled-cursor, var(--button-disabled-cursor, var(--disabled-cursor, not-allowed)));
-  transform: var(--tag-close-button-disabled-transform, var(--button-disabled-transform, var(--disabled-transform, none)));
-  filter: var(--tag-close-button-disabled-filter, var(--button-disabled-filter, var(--disabled-filter, grayscale(0.5))));
-  background-color: color-mix(in oklch, var(--_background-color) var(--disabled-base-color-percentage, 50%), var(--disabled-color-mix, gray) calc(100% - var(--disabled-base-color-percentage, 50%)));
-  box-shadow: var(--tag-close-button-disabled-box-shadow, var(--button-disabled-box-shadow, var(--disabled-box-shadow, var(--_box-shadow, none))));
+/* focus-ring()'s 3px spread shadow plus its 2px offset is sized for a button
+   standing on a page; on a 15px control inside a 26px tag it ballooned well
+   outside the tag.
+
+   The room available is exactly the tag's padding-block (0.2em, ~2.4px at
+   the default tag font-size) -- the button is as tall as the tag's line box,
+   so there is nothing else to grow into. Hence a 2px ring at no offset: it
+   reads clearly, hugs the circle, and clears the tag's edge. The scrim stays
+   lit under focus so keyboard focus reads the same as pointer hover (the
+   `focusable-as-hover` idea, with this component's own fill). */
+.tag .close-button:focus-visible {
+  outline: var(--tag-close-button-focus-color, var(--focus-color, currentColor)) solid var(--tag-close-button-focus-width, 2px);
+  outline-offset: var(--tag-close-button-focus-offset, 0px);
+  box-shadow: none;
 }
 
-.tag button:focus-visible {
-  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
-  outline-offset: var(--focus-outline-offset, 2px);
-  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+.tag .close-button:focus-visible::before {
+  background-color: var(--tag-close-button-hover-bg, color-mix(in oklab, transparent, currentColor 18%));
 }
 
 .tag:first-child {

package/dist/misc/Tag.svelte.d.ts

@@ -1,14 +1,26 @@
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import type { TagStyleProps } from "../types";
-type Props = {
-    children?: import("svelte").Snippet;
+import type { ContainProps, TagStyleProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const Tag: import("svelte").Component<ContainProps<HTMLAttributes<HTMLSpanElement>, {
+    children?: Snippet;
     primary?: boolean;
     warning?: boolean;
     danger?: boolean;
     success?: boolean;
     info?: boolean;
     onclose?: (() => void) | null;
-} & TagStyleProps & HTMLAttributes<HTMLSpanElement>;
-declare const Tag: import("svelte").Component<Props, {}, "">;
+    /**
+     * Accessible name for the close button.
+     *
+     * The default describes the *widget* ("close a tag"), which is rarely
+     * what the action means to a user. A tag is a filter chip in one app and
+     * a removable label in another, so say what pressing it does here:
+     * `closeLabel="Remove Fiction"`, `closeLabel="Stop searching by author"`.
+     * Including the tag's own text is what makes a list of close buttons
+     * distinguishable to a screen reader.
+     */
+    closeLabel?: string;
+}, TagStyleProps & StyleProps<readonly ["bg", "fg", "padding", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
 type Tag = ReturnType<typeof Tag>;
 export default Tag;