@fusion.dev/helix 0.145.0 → 0.147.0

package/dist/icon-button/root/icon-button-root.css.js

@@ -1,221 +1,98 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_icon-button-size: var(--icon-button-size, var(--helix-size-control));
-display: inline-flex;
-}
-
-:host {
---_icon-button-edge: var(--helix-color-border);
-
---_icon-button-turn: 0.8s;
---_icon-button-ink: var(--helix-color-foreground-muted);
---_icon-button-ink-hover: var(--helix-color-foreground);
-
---_icon-button-fill: var(--_icon-button-tone);
---_icon-button-fill-hover: var(--_icon-button-tone-hover);
---_icon-button-on-tone: var(--helix-color-background);
---_icon-button-tone: var(--helix-color-foreground);
---_icon-button-tone-hover: color-mix(
+export const styles = createSheet(`:host {--_icon-button-size: var(--icon-button-size, var(--helix-size-control));display: inline-flex;}:host {--_icon-button-edge: var(--helix-color-border);--_icon-button-turn: 0.8s;--_icon-button-ink: var(--helix-color-foreground-muted);--_icon-button-ink-hover: var(--helix-color-foreground);--_icon-button-fill: var(--_icon-button-tone);--_icon-button-fill-hover: var(--_icon-button-tone-hover);--_icon-button-on-tone: var(--helix-color-background);--_icon-button-tone: var(--helix-color-foreground);--_icon-button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
 var(--helix-color-background)
-);
-}
-:host([tone="primary"]) {
---_icon-button-edge: var(--helix-color-primary);
---_icon-button-ink: var(--helix-color-primary);
---_icon-button-ink-hover: var(--helix-color-primary);
---_icon-button-fill: var(--helix-color-primary-surface);
---_icon-button-fill-hover: var(--helix-color-primary-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-primary);
---_icon-button-tone: var(--helix-color-primary);
---_icon-button-tone-hover: var(--helix-color-primary-hover);
-}
-
-:host([tone="accent"]) {
---_icon-button-edge: var(--helix-color-accent);
---_icon-button-ink: var(--helix-color-accent);
---_icon-button-ink-hover: var(--helix-color-accent);
---_icon-button-fill: var(--helix-color-accent-surface);
---_icon-button-fill-hover: var(--helix-color-accent-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-accent);
---_icon-button-tone: var(--helix-color-accent);
---_icon-button-tone-hover: var(--helix-color-accent-hover);
-}
-
-:host([tone="danger"]) {
---_icon-button-edge: var(--helix-color-danger);
---_icon-button-ink: var(--helix-color-danger);
---_icon-button-ink-hover: var(--helix-color-danger);
---_icon-button-fill: var(--helix-color-danger-surface);
---_icon-button-fill-hover: var(--helix-color-danger-surface-hover);
---_icon-button-on-tone: var(--helix-color-foreground-on-status);
---_icon-button-tone: var(--helix-color-danger);
---_icon-button-tone-hover: color-mix(
+);}:host([tone="primary"]) {--_icon-button-edge: var(--helix-color-primary);--_icon-button-ink: var(--helix-color-primary);--_icon-button-ink-hover: var(--helix-color-primary);--_icon-button-fill: var(--helix-color-primary-surface);--_icon-button-fill-hover: var(--helix-color-primary-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-primary);--_icon-button-tone: var(--helix-color-primary);--_icon-button-tone-hover: var(--helix-color-primary-hover);}:host([tone="accent"]) {--_icon-button-edge: var(--helix-color-accent);--_icon-button-ink: var(--helix-color-accent);--_icon-button-ink-hover: var(--helix-color-accent);--_icon-button-fill: var(--helix-color-accent-surface);--_icon-button-fill-hover: var(--helix-color-accent-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-accent);--_icon-button-tone: var(--helix-color-accent);--_icon-button-tone-hover: var(--helix-color-accent-hover);}:host([tone="danger"]) {--_icon-button-edge: var(--helix-color-danger);--_icon-button-ink: var(--helix-color-danger);--_icon-button-ink-hover: var(--helix-color-danger);--_icon-button-fill: var(--helix-color-danger-surface);--_icon-button-fill-hover: var(--helix-color-danger-surface-hover);--_icon-button-on-tone: var(--helix-color-foreground-on-status);--_icon-button-tone: var(--helix-color-danger);--_icon-button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-danger) 86%,
 var(--helix-color-foreground)
-);
-}
-
-[part="button"] {
-align-items: center;
-background-color: var(--icon-button-background-color, transparent);
-block-size: var(--_icon-button-size);
-border: var(--helix-border-thin) solid transparent;
-
-border-end-end-radius: var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm)));
-border-end-start-radius: var(
+);}[part="button"] {align-items: center;background-color: var(
+--_icon-button-pressed-fill,
+var(--icon-button-background-color, transparent)
+);block-size: var(--_icon-button-size);border: var(--helix-border-thin) solid transparent;border-end-end-radius: var(--button-radius-end, var(--icon-button-radius, var(--helix-radii-sm)));border-end-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
-);
-border-start-end-radius: var(
+);border-start-end-radius: var(
 --button-radius-end,
 var(--icon-button-radius, var(--helix-radii-sm))
-);
-border-start-start-radius: var(
+);border-start-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
-);
-color: var(--icon-button-foreground-color, var(--_icon-button-ink));
-cursor: pointer;
-display: inline-flex;
-
-font: inherit;
-inline-size: var(--_icon-button-size);
-justify-content: center;
-padding: var(--helix-space-none);
-transition:
+);color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-ink))
+);cursor: pointer;display: inline-flex;font: inherit;inline-size: var(--_icon-button-size);justify-content: center;padding: var(--helix-space-none);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not(:disabled)) [part="button"]:hover {
-background-color: var(
+color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not(:disabled)) [part="button"]:hover {background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 8%, transparent)
 )
-);
-color: var(--icon-button-foreground-color, var(--_icon-button-ink-hover));
-}
-
-:host([shape="circle"]) [part="button"] {
-border-radius: var(--helix-radii-full);
-}
-
-:host([raised]) [part="button"] {
-box-shadow: var(--icon-button-shadow, var(--helix-shadow-md));
-}
-
-:host([raised]:not(:disabled)) [part="button"]:hover {
-box-shadow: var(--icon-button-shadow, var(--helix-shadow-lg));
-}
-
-:host([raised]:not(:disabled)) [part="button"]:active {
-box-shadow: var(--icon-button-shadow, var(--helix-shadow-sm));
-}
-
-[part="button"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([emphasis="solid"]) [part="button"] {
-background-color: var(--icon-button-background-color, var(--_icon-button-fill));
-border-color: transparent;
-color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
-}
-:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
-background-color: var(
+)
+);color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-ink-hover))
+);}:host(:not(:disabled)) [part="button"]:active {--_icon-button-pressed-fill: var(--icon-button-background-color-active);--_icon-button-pressed-ink: var(--icon-button-foreground-color-active);}:host([shape="circle"]) [part="button"] {border-radius: var(--helix-radii-full);}:host([raised]) [part="button"] {box-shadow: var(--icon-button-shadow, var(--helix-shadow-md));}:host([raised]:not(:disabled)) [part="button"]:hover {box-shadow: var(--icon-button-shadow, var(--helix-shadow-lg));}:host([raised]:not(:disabled)) [part="button"]:active {box-shadow: var(--icon-button-shadow, var(--helix-shadow-sm));}[part="button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([emphasis="solid"]) [part="button"] {background-color: var(
+--_icon-button-pressed-fill,
+var(--icon-button-background-color, var(--_icon-button-fill))
+);border-color: transparent;color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-on-tone))
+);}:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(--icon-button-background-color, var(--_icon-button-fill-hover))
-);
-color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
-}
-
-:host([emphasis="outlined"]) [part="button"] {
-background-color: var(
+)
+);color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-on-tone))
+);}:host([emphasis="outlined"]) [part="button"] {background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 6%, transparent)
-);
-border-color: var(--_icon-button-edge);
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
-}
-:host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
-background-color: var(
+)
+);border-color: var(--_icon-button-edge);color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);}:host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 12%, transparent)
 )
-);
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
-}
-
-:host([emphasis="subtle"]) [part="button"] {
-background-color: var(
+)
+);color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);}:host([emphasis="subtle"]) [part="button"] {background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)
-);
-border-color: transparent;
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
-}
-
-:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
-background-color: var(
+)
+);border-color: transparent;color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);}:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 22%, transparent)
 )
-);
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
-}
-
-:host(:disabled) [part="button"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host(:state(pending)) [part="button"] {
-cursor: progress;
-position: relative;
-}
-
-:host(:state(pending)) [part="button"] > * {
-visibility: hidden;
-}
-
-:host(:state(pending)) [part="button"]::after {
-animation: helix-icon-button-turn var(--_icon-button-turn) linear infinite;
-block-size: var(--icon-button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
-border-block-start-color: currentColor;
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-content: "";
-inline-size: var(--icon-button-spinner-size, 1.15em);
-inset: 0;
-margin: auto;
-position: absolute;
-}
-
-@keyframes helix-icon-button-turn {
-to {
-rotate: 1turn;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host(:state(pending)) [part="button"]::after {
-animation-duration: calc(var(--helix-duration-slow) * 12);
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+)
+);color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5;}:host(:state(pending)) [part="button"] {cursor: progress;position: relative;}:host(:state(pending)) [part="button"] > :not([part="spinner"]) {visibility: hidden;}[part="spinner"] {animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn))
+linear infinite;block-size: var(--icon-button-spinner-size, 1.15em);border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--icon-button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--icon-button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-icon-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}@media print {:host {display: none;}}`);

package/dist/icon-button/root/icon-button-root.d.ts

@@ -23,13 +23,18 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  *
  * @csspart button - The inner button.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
+ * @csspart spinner - The ring a pending button turns over its icon, sized and colored by the `--icon-button-spinner-*` hooks.
  *
  * @cssproperty --icon-button-background-color - Fill behind the button, in every state.
+ * @cssproperty --icon-button-background-color-active - Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
  * @cssproperty --icon-button-background-color-hover - Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
  * @cssproperty --icon-button-foreground-color - Icon color.
+ * @cssproperty --icon-button-foreground-color-active - Icon color while the button is pressed. Without it, a press shows the color of the state under it.
  * @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
  * @cssproperty --icon-button-shadow - Shadow of a raised icon button.
  * @cssproperty --icon-button-size - Edge length of the control.
+ * @cssproperty --icon-button-spinner-color - Color of the ring a pending button turns. It follows the icon's color.
+ * @cssproperty --icon-button-spinner-duration - How long the ring takes to turn once.
  * @cssproperty --icon-button-spinner-size - Size of the ring a pending button turns.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden icon.

package/dist/image/root/image-root.css.js

@@ -1,66 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-aspect-ratio: var(--image-aspect, auto);
-display: block;
-overflow: hidden;
-position: relative;
-}
-
-:host([shape="rounded"]) {
-border-radius: var(--image-radius, var(--helix-radii-md));
-}
-
-[part="image"] {
-block-size: 100%;
-display: block;
-inline-size: 100%;
-object-fit: var(--image-fit, cover);
-object-position: var(--image-position, center);
-}
-
-:host([data-status="error"]) [part="image"] {
-opacity: 0;
-}
-
-[part="placeholder"],
-[part="fallback"] {
-align-items: center;
-display: flex;
-inset: 0;
-justify-content: center;
-position: absolute;
-}
-
-:host [part="placeholder"][hidden],
-:host [part="fallback"][hidden] {
-display: none;
-}
-
-[part="placeholder"] {
-background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));
-}
-
-[part="placeholder"] ::slotted(*) {
-block-size: 100%;
-inline-size: 100%;
-}
-
-[part="fallback"] {
-background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));
-color: var(--helix-color-foreground-subtle);
-}
-
-[part="image"] {
-opacity: 0;
-transition: opacity var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([data-status="loaded"]) [part="image"] {
-opacity: 1;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {aspect-ratio: var(--image-aspect, auto);display: block;overflow: hidden;position: relative;}:host([shape="rounded"]) {border-radius: var(--image-radius, var(--helix-radii-md));}[part="image"] {block-size: 100%;display: block;inline-size: 100%;object-fit: var(--image-fit, cover);object-position: var(--image-position, center);}:host([data-status="error"]) [part="image"] {opacity: 0;}[part="placeholder"],
+[part="fallback"] {align-items: center;display: flex;inset: 0;justify-content: center;position: absolute;}:host [part="placeholder"][hidden],
+:host [part="fallback"][hidden] {display: none;}[part="placeholder"] {background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));}[part="placeholder"] ::slotted(*) {block-size: 100%;inline-size: 100%;}[part="fallback"] {background-color: var(
+--image-fallback-background-color,
+var(--image-placeholder-color, var(--helix-color-surface-sunken))
+);color: var(--image-fallback-color, var(--helix-color-foreground-subtle));}[part="image"] {opacity: 0;transition: opacity var(--image-fade-duration, var(--helix-duration-normal))
+var(--helix-easing-standard);}:host([data-status="loaded"]) [part="image"] {opacity: 1;}@media print {:host {print-color-adjust: economy;}}`);

package/dist/image/root/image-root.d.ts

@@ -15,6 +15,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/image
  *
  * @cssproperty --image-aspect - The aspect ratio of the box, such as `16 / 9`.
+ * @cssproperty --image-fade-duration - How long the picture takes to fade in once it loads. `0s` shows it at once.
+ * @cssproperty --image-fallback-background-color - The background behind the fallback. Defaults to the placeholder's.
+ * @cssproperty --image-fallback-color - The color of the fallback's text.
  * @cssproperty --image-fit - How the image fills the box, as an `object-fit` value.
  * @cssproperty --image-placeholder-color - The background behind the placeholder and the fallback.
  * @cssproperty --image-position - Which part of the image stays in view when it is cropped, as an `object-position` value.

package/dist/input/root/input-root.css.js

@@ -1,81 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_input-size: var(--input-size, var(--helix-size-control));
-}
-
-[part="field"] {
-align-items: center;
-background-color: var(--input-background-color, var(--helix-color-well));
-block-size: var(--_input-size);
-border: var(--helix-border-thin) solid var(--input-border-color, var(--helix-color-border));
-border-radius: var(--input-radius, var(--helix-radii-sm));
-color: var(--helix-color-foreground-subtle);
-display: flex;
-gap: var(--helix-space-2xs);
-padding-inline: var(--input-padding-inline, var(--helix-space-xs));
-transition:
+export const styles = createSheet(`:host {--_input-size: var(--input-size, var(--helix-size-control));}[part="field"] {align-items: center;background-color: var(--input-background-color, var(--helix-color-well));block-size: var(--_input-size);border: var(--helix-border-thin) solid var(--input-border-color, var(--helix-color-border));border-radius: var(--input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-subtle);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--input-padding-inline, var(--helix-space-xs));transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-background-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="control"] {
-block-size: 100%;
-}
-
-[part="control"]::-webkit-search-cancel-button {
-appearance: none;
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-}
-
-:host(:disabled) [part="field"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([readonly]) [part="field"] {
-background-color: transparent;
-}
-
-[part="clear"],
-[part~="reveal"] {
---icon-size: var(--helix-size-icon-tight);
-all: unset;
-
-align-items: center;
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: flex;
-flex: 0 0 auto;
-justify-content: center;
-min-block-size: var(--helix-size-icon-loose);
-min-inline-size: var(--helix-size-icon-loose);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="clear"]:hover,
-[part~="reveal"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="clear"]:focus-visible,
-[part~="reveal"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part~="reveal"][aria-pressed="true"] {
-color: var(--helix-color-foreground);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="control"] {block-size: 100%;}[part="control"]::-webkit-search-cancel-button {appearance: none;}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="field"] {background-color: transparent;}[part="clear"],
+[part~="reveal"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover,
+[part~="reveal"]:hover {color: var(--helix-color-foreground);}[part="clear"]:focus-visible,
+[part~="reveal"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="reveal"][aria-pressed="true"] {color: var(--helix-color-foreground);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/kbd/root/kbd-root.css.js

@@ -1,46 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_kbd-size: 0.85em;
---_kbd-height: 1.5em;
---_kbd-inset: 0.4em;
-display: inline-flex;
-font: inherit;
-
-vertical-align: -0.05em;
-}
-
-[part="kbd"] {
-align-items: center;
-background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));
-block-size: var(--_kbd-height);
-border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-
-box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));
-color: var(--helix-color-foreground-muted);
-display: inline-flex;
-font-family: var(--helix-font-mono);
-
-font-feature-settings:
+export const styles = createSheet(`:host {--_kbd-size: var(--kbd-font-size, 0.85em);--_kbd-height: var(--kbd-block-size, 1.5em);--_kbd-inset: var(--kbd-padding-inline, 0.4em);display: inline-flex;font: inherit;vertical-align: -0.05em;}[part="kbd"] {align-items: center;background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));block-size: var(--_kbd-height);border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));border-radius: var(--kbd-radius, var(--helix-radii-sm));box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));color: var(--kbd-color, var(--helix-color-foreground-muted));display: inline-flex;font-family: var(--kbd-font-family, var(--helix-font-mono));font-feature-settings:
 "liga" 0,
-"calt" 0;
-font-size: var(--_kbd-size);
-font-variant-ligatures: none;
-font-weight: var(--helix-weight-medium);
-justify-content: center;
-line-height: 1;
-
-min-inline-size: var(--_kbd-height);
-
-white-space: nowrap;
-padding-inline: var(--_kbd-inset);
-
-padding-block-start: var(--helix-border-thin);
-}
-
-@media print {
-:host {
-box-shadow: none;
-}
-}`);
+"calt" 0;font-size: var(--_kbd-size);font-variant-ligatures: none;font-weight: var(--kbd-font-weight, var(--helix-weight-medium));justify-content: center;line-height: 1;min-inline-size: var(--_kbd-height);white-space: nowrap;padding-inline: var(--_kbd-inset);padding-block-start: var(--helix-border-thin);}:host([caps]) [part="kbd"] {background-color: transparent;border: 0;box-shadow: none;gap: var(--kbd-gap, var(--helix-space-2xs));min-inline-size: 0;padding: 0;}:host([caps]) [part="key"] {align-items: center;background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));block-size: var(--_kbd-height);border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));border-radius: var(--kbd-radius, var(--helix-radii-sm));box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));display: inline-flex;justify-content: center;min-inline-size: var(--_kbd-height);padding-block-start: var(--helix-border-thin);padding-inline: var(--_kbd-inset);}[part="separator"] {color: var(--kbd-separator-color, var(--helix-color-foreground-muted));}@media print {:host {box-shadow: none;}}`);

package/dist/kbd/root/kbd-root.d.ts

@@ -17,7 +17,16 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/kbd
  *
  * @cssproperty --kbd-background-color - The fill of the key.
+ * @cssproperty --kbd-block-size - The height of a key, and the least width of one, in `em` of the text around it.
  * @cssproperty --kbd-border-color - The color of the key's border and its bottom edge.
+ * @cssproperty --kbd-color - The color of the key's label.
+ * @cssproperty --kbd-font-family - The face of the key's label. Monospaced by default.
+ * @cssproperty --kbd-font-size - The size of the key's label, in `em` of the text around it.
+ * @cssproperty --kbd-font-weight - The weight of the key's label.
+ * @cssproperty --kbd-gap - The space between two keys of a chord under `caps`.
+ * @cssproperty --kbd-padding-inline - The space either side of the key's label.
+ * @cssproperty --kbd-radius - How far the key's corners are rounded.
+ * @cssproperty --kbd-separator-color - The color of the `+` between two keys of a chord under `caps`.
  */
 export declare class HelixKbd extends HelixHeadlessKbd {
     static styles: CSSResultGroup;