@fusion.dev/helix 0.145.0 → 0.147.0

package/dist/notifications/notification/notification.css.js

@@ -1,272 +1,25 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_notifications-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
-
---_notifications-pad-block: var(--notifications-padding-block, var(--helix-space-xs));
---_notifications-unread: var(--notifications-unread-block-size, var(--helix-space-xs));
-
-container-type: inline-size;
-
-display: block;
-}
-
-[part="item"] {
-align-items: start;
-border-block-end: var(--helix-border-thin) solid
-var(--notifications-rule, var(--helix-color-border));
-
-cursor: default;
-display: grid;
-grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;
-padding-block: var(--_notifications-pad-block);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-
-position: relative;
-}
-
-:host(:not(:state(read))) [part="item"]::before {
-background-color: var(--notifications-unread-mark, var(--helix-color-accent));
-block-size: var(--_notifications-unread);
-border-radius: var(--notifications-unread-radius, var(--helix-radii-full));
-content: "";
-inline-size: var(--notifications-unread-inline-size, var(--_notifications-unread));
-
-inset-block-start: var(
+export const styles = createSheet(`:host {--_notifications-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));--_notifications-pad-block: var(--notifications-padding-block, var(--helix-space-xs));--_notifications-unread: var(--notifications-unread-block-size, var(--helix-space-xs));--_notifications-pad-inline: var(--notifications-padding-inline, var(--helix-space-lg));container-type: inline-size;display: block;}[part="item"] {align-items: start;border-block-end: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));cursor: default;display: grid;grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;padding-block: var(--_notifications-pad-block);padding-inline: var(--_notifications-pad-inline);position: relative;}:host(:not(:state(read))) [part="item"]::before {background-color: var(--notifications-unread-mark, var(--helix-color-accent));block-size: var(--_notifications-unread);border-radius: var(--notifications-unread-radius, var(--helix-radii-full));content: "";inline-size: var(--notifications-unread-inline-size, var(--_notifications-unread));inset-block-start: var(
 --notifications-unread-offset,
 calc(
 var(--_notifications-pad-block) +
 (var(--_notifications-line) - var(--_notifications-unread)) /
 2
 )
-);
-inset-inline-start: var(--notifications-unread-inset, var(--helix-space-2xs));
-position: absolute;
-}
-
-:host([separation="filled"]),
-:host([separation="outlined"]) {
---notifications-rule: transparent;
-
-margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));
-}
-
-:host([separation="filled"]) [part="item"],
-:host([separation="outlined"]) [part="item"] {
-border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));
-border-radius: var(--notifications-item-radius, var(--helix-radii-md));
-}
-
-:host([separation="filled"]) [part="item"] {
-background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));
-}
-
-:host([separation="filled"]) {
---avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-}
-
-[part="media"] {
-display: grid;
-
-grid-template-rows: var(--_notifications-line);
-place-items: center start;
-}
-
-[part="body"] {
-display: grid;
-gap: var(--helix-space-2xs);
-}
-
-[part="label"] {
-color: var(--notifications-color, var(--helix-color-foreground-muted));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-line-height: var(--_notifications-line);
-}
-
-slot[name="description"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--helix-leading-normal);
-margin: var(--helix-space-none);
-}
-
-slot[name="detail"]::slotted(*) {
-margin-block: var(--helix-space-2xs) var(--helix-space-none);
-margin-inline: var(--helix-space-none);
-}
-
-[part="body"] slot:not([name])::slotted(a) {
-color: inherit;
-text-decoration: none;
-}
-
-[part="body"] slot:not([name])::slotted(a:hover) {
-text-decoration: underline;
-text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);
-text-decoration-thickness: 1px;
-text-underline-offset: 0.25em;
-}
-
-:host(:not(:state(read))) [part="label"] {
-color: var(--helix-color-foreground);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="controls"] {
-margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);
-}
-
-[part="trailing"] {
-align-items: center;
-align-self: start;
-display: grid;
-grid-template-areas: "swap";
-justify-items: end;
-
-grid-template-rows: var(--_notifications-line);
-margin-inline-start: var(--helix-space-sm);
-}
-
-[part="trailing"] > * {
-grid-area: swap;
-transition:
+);inset-inline-start: var(
+--notifications-unread-inset,
+calc(
+(
+var(--_notifications-pad-inline) -
+var(--notifications-unread-inline-size, var(--_notifications-unread))
+) /
+2
+)
+);position: absolute;}:host([separation="filled"]),
+:host([separation="outlined"]) {--notifications-rule: transparent;margin-block-end: var(--notifications-item-gap, var(--helix-space-xs));}:host([separation="filled"]) [part="item"],
+:host([separation="outlined"]) [part="item"] {border: var(--helix-border-thin) solid var(--notifications-item-edge, var(--helix-color-border));border-radius: var(--notifications-item-radius, var(--helix-radii-md));}:host([separation="filled"]) [part="item"] {background-color: var(--notifications-item-fill, var(--helix-color-surface-raised));}:host([separation="filled"]) {--avatar-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="media"] {display: grid;grid-template-rows: var(--_notifications-line);place-items: center start;}[part="body"] {display: grid;gap: var(--helix-space-2xs);}[part="label"] {color: var(--notifications-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--_notifications-line);}slot[name="description"]::slotted(*) {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);}slot[name="detail"]::slotted(*) {margin-block: var(--helix-space-2xs) var(--helix-space-none);margin-inline: var(--helix-space-none);}[part="body"] slot:not([name])::slotted(a) {color: inherit;text-decoration: none;}[part="body"] slot:not([name])::slotted(a:hover) {text-decoration: underline;text-decoration-color: color-mix(in oklab, currentcolor 35%, transparent);text-decoration-thickness: 1px;text-underline-offset: 0.25em;}:host(:not(:state(read))) [part="label"] {color: var(--helix-color-foreground);font-weight: var(--helix-weight-medium);}[part="controls"] {margin-inline-end: calc((var(--helix-size-control) - var(--helix-size-icon)) / -2);}[part="trailing"] {align-items: center;align-self: start;display: grid;grid-template-areas: "swap";justify-items: end;grid-template-rows: var(--_notifications-line);margin-inline-start: var(--helix-space-sm);}[part="trailing"] > * {grid-area: swap;transition:
 opacity var(--helix-duration-normal) var(--helix-easing-standard),
-translate var(--helix-duration-normal) var(--helix-easing-decelerate);
-}
-
-:host {
---_notifications-swap: 0;
-}
-
-[part="trailing"] > :not([part="controls"]) {
-color: var(--helix-color-foreground-subtle);
-
-display: block;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-line-height: var(--_notifications-line);
-opacity: calc(1 - var(--_notifications-swap));
-
-translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;
-}
-
-[part="controls"] {
-align-items: center;
-display: flex;
-opacity: var(--_notifications-swap);
-translate: calc(var(--helix-space-2xs) * (1 - var(--_notifications-swap))) 0;
-}
-
-:host(:hover:state(controls)),
-:host(:focus-within:state(controls)) {
---_notifications-swap: 1;
-}
-
-[part="controls"] {
-pointer-events: none;
-}
-
-:host(:hover:state(controls)) [part="controls"],
-:host(:focus-within:state(controls)) [part="controls"] {
-pointer-events: auto;
-}
-
-@media (hover: none) and (pointer: coarse) {
-[part="trailing"] {
-column-gap: var(--helix-space-sm);
-grid-auto-flow: column;
-grid-template-areas: none;
-}
-
-[part="trailing"] > * {
-grid-area: auto;
-opacity: 1;
-translate: none;
-}
-
-[part="controls"] {
-pointer-events: auto;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="trailing"] > * {
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-translate: none;
-}
-}
-
-[part="actions"] {
-align-items: center;
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-2xs);
-}
-
-:host(:not(:state(actions))) [part="actions"] {
-display: none;
-}
-
-:host(:state(actions)) [part="actions"] {
-margin-block-start: var(--helix-space-2xs);
-}
-
-[part="dismiss"] {
-background: none;
-border: 0;
-border-radius: var(--helix-radii-sm);
-block-size: var(--helix-size-control);
-color: var(--notifications-dismiss-color, var(--helix-color-foreground-subtle));
-cursor: pointer;
-display: grid;
-inline-size: var(--helix-size-control);
-margin-inline-start: var(--helix-space-2xs);
-padding: var(--helix-space-none);
-place-items: center;
-}
-
-[part="dismiss"] ::slotted(*) {
-block-size: var(--icon-size, var(--helix-size-icon));
-inline-size: var(--icon-size, var(--helix-size-icon));
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, currentcolor 12%, transparent);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-@media print {
-[part="dismiss"] {
-display: none;
-}
-
-:host(:not(:state(read))) [part="item"]::before {
-display: none;
-}
-}
-
-@container (inline-size < 18rem) {
-[part="item"] {
-grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr);
-}
-
-[part="trailing"] {
-align-self: start;
-grid-column: 2;
-grid-row: 2;
-justify-items: end;
-margin-block-start: var(--helix-space-2xs);
-margin-inline-start: var(--helix-space-none);
-}
-}`);
+translate var(--helix-duration-normal) var(--helix-easing-decelerate);}:host {--_notifications-swap: 0;}[part="trailing"] > :not([part="controls"]) {color: var(--helix-color-foreground-subtle);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--_notifications-line);opacity: calc(1 - var(--_notifications-swap));translate: calc(var(--helix-space-2xs) * var(--_notifications-swap)) 0;}[part="controls"] {align-items: center;display: flex;opacity: var(--_notifications-swap);}:host(:hover:state(controls)),
+:host(:focus-within:state(controls)) {--_notifications-swap: 1;}[part="controls"] {pointer-events: none;}:host(:hover:state(controls)) [part="controls"],
+:host(:focus-within:state(controls)) [part="controls"] {pointer-events: auto;}@media (hover: none) and (pointer: coarse) {[part="trailing"] {column-gap: var(--helix-space-sm);grid-auto-flow: column;grid-template-areas: none;}[part="trailing"] > * {grid-area: auto;opacity: 1;translate: none;}[part="controls"] {pointer-events: auto;}}@media (prefers-reduced-motion: reduce) {[part="trailing"] > * {transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);translate: none;}}[part="actions"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);}:host(:not(:state(actions))) [part="actions"] {display: none;}:host(:state(actions)) [part="actions"] {margin-block-start: var(--helix-space-2xs);}[part="dismiss"] {background: none;border: 0;border-radius: var(--helix-radii-sm);block-size: var(--helix-size-control);color: var(--notifications-dismiss-color, var(--helix-color-foreground-subtle));cursor: pointer;display: grid;inline-size: var(--helix-size-control);margin-inline-start: var(--helix-space-2xs);padding: var(--helix-space-none);place-items: center;}[part="dismiss"] ::slotted(*) {block-size: var(--icon-size, var(--helix-size-icon));inline-size: var(--icon-size, var(--helix-size-icon));}[part="dismiss"]:hover {background-color: color-mix(in oklab, currentcolor 12%, transparent);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}@media print {[part="dismiss"] {display: none;}:host(:not(:state(read))) [part="item"]::before {display: none;}}@container (inline-size < 18rem) {[part="item"] {grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr);}[part="trailing"] {align-self: start;grid-column: 2;grid-row: 2;justify-items: end;margin-block-start: var(--helix-space-2xs);margin-inline-start: var(--helix-space-none);}}`);

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

@@ -1,120 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---helix-size-checkbox: var(--helix-size-checkbox-sm);
---helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
---helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
---helix-size-tag: var(--helix-size-tag-sm);
-
---helix-size-avatar: var(--helix-size-avatar-sm);
-
-display: grid;
-grid-template-rows: auto minmax(0, 1fr) auto;
-max-block-size: var(--notifications-max-block-size, none);
-}
-
-:host(:state(media)) {
---notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm));
-}
-
-[part="header"] {
-align-items: center;
-border-block-end: var(--helix-border-thin) solid
-var(--notifications-rule, var(--helix-color-border));
-display: flex;
-gap: var(--helix-space-sm);
-justify-content: space-between;
-padding-block: var(--helix-space-sm);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-}
-
-[part="header"][data-empty],
-[part="footer"][data-empty] {
-display: none;
-}
-
-[part="list"] {
-overflow-y: auto;
-}
-
-[part="footer"] {
-border-block-start: var(--helix-border-thin) solid
-var(--notifications-rule, var(--helix-color-border));
-padding-block: var(--helix-space-sm);
-padding-inline: var(--notifications-padding-inline, var(--helix-space-md));
-}
-
-::slotted(helix-notification:last-of-type) {
---notifications-rule: transparent;
-}
-
-[part="mark-all"] {
-background: none;
-border: 0;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-2xs);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="mark-all"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="more"] {
-background: none;
-border: 0;
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-inline-size: 100%;
-padding-block: var(--helix-space-sm);
-transition: color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="more"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="more"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="mark-all"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="empty"],
-[part="loading"] {
---_collection-inset-block: var(--helix-space-lg);
---_collection-inset-inline: var(--helix-space-md);
-}
-
-@media print {
-:host {
-max-block-size: none;
-}
-
-[part="list"] {
-overflow-y: visible;
-}
-
-[part="mark-all"],
-[part="more"] {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-sm);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: var(--notifications-max-block-size, none);}:host(:state(media)) {--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm));}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg));}[part="header"][data-empty],
+[part="footer"][data-empty] {display: none;}[part="list"] {overflow-y: auto;}[part="footer"] {border-block-start: var(--helix-border-thin) solid
+var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg));}::slotted(helix-notification:last-of-type) {--notifications-rule: transparent;}[part="mark-all"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="mark-all"]:hover {color: var(--helix-color-foreground);}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="more"]:hover {color: var(--helix-color-foreground);}[part="more"][aria-disabled="true"],
+[part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default;}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="mark-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="empty"],
+[part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md);}@media print {:host {max-block-size: none;}[part="list"] {overflow-y: visible;}[part="mark-all"],
+[part="more"] {display: none;}}`);

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

@@ -19,13 +19,15 @@ import '../notification/notification.js';
  * @documentation https://fusion.dev/helix/components/notifications
  *
  * @slot - The notifications.
+ * @slot empty - Replaces the words of `empty-text` in the `empty` part, such as a picture and a line of your own.
  * @slot footer - Below the list, for a link to everything.
  * @slot header - Above the list, for a title and the mark-all control.
+ * @slot loading - Replaces the words of `loading-text` in the `loading` part, such as a loader.
  *
  * @csspart list - The list itself.
  * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
- * @csspart more - The button after the list that asks for more, while `load-more` is set and the feed is not loading.
+ * @csspart more - The button after the list that asks for more, while `load-more` is set. It stays while the feed is loading, in a lighter color and `aria-disabled`, so focus stays on it.
  *
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
  * @cssproperty --notifications-media-column - Width of the media column that every item keeps when any item in the feed has media.

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

@@ -1,102 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-align-items: center;
-background-color: var(--number-input-background-color, var(--helix-color-well));
-block-size: var(--number-input-size, var(--helix-size-control));
-border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));
-border-radius: var(--number-input-radius, var(--helix-radii-sm));
-box-sizing: border-box;
-display: flex;
-
-overflow: hidden;
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:disabled) [part="field"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([readonly]) [part="field"] {
-background-color: transparent;
-}
-
-[part="control"] {
-font-variant-numeric: tabular-nums;
-padding-inline: var(--helix-space-xs);
-text-align: center;
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-}
-
-slot[name="start"]::slotted(*) {
-padding-inline-start: var(--helix-space-xs);
-}
-
-slot[name="end"]::slotted(*) {
-padding-inline-end: var(--helix-space-xs);
-}
-
-[part="decrement"],
-[part="increment"] {
-all: unset;
-align-items: center;
-align-self: stretch;
-box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: flex;
-flex: none;
-inline-size: var(--helix-size-control);
-justify-content: center;
-transition:
+export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--number-input-background-color, var(--helix-color-well));block-size: var(--number-input-size, var(--helix-size-control));border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));border-radius: var(--number-input-radius, var(--helix-radii-sm));box-sizing: border-box;display: flex;overflow: hidden;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="field"] {background-color: transparent;}[part="control"] {font-variant-numeric: tabular-nums;padding-inline: var(--number-input-padding-inline, var(--helix-space-xs));text-align: center;}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}slot[name="start"]::slotted(*) {padding-inline-start: var(--helix-space-xs);}slot[name="end"]::slotted(*) {padding-inline-end: var(--helix-space-xs);}[part="decrement"],
+[part="increment"] {all: unset;align-items: center;align-self: stretch;background-color: var(--number-input-stepper-background-color, transparent);box-sizing: border-box;color: var(--number-input-stepper-color, var(--helix-color-foreground-muted));cursor: pointer;display: flex;flex: none;inline-size: var(--number-input-stepper-size, var(--helix-size-control));justify-content: center;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="decrement"] {
-border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-[part="increment"] {
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-}
-
-[part="decrement"]:hover:not(:disabled),
-[part="increment"]:hover:not(:disabled) {
-background-color: var(--helix-color-surface);
-color: var(--helix-color-foreground);
-}
-
-[part="decrement"]:disabled,
-[part="increment"]:disabled {
-cursor: default;
-opacity: 0.4;
-}
-
-[part="decrement"] svg,
-[part="increment"] svg {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
-}
-
-:host([scrub]) [part="label"] {
-cursor: ew-resize;
-touch-action: none;
-user-select: none;
-}
-
-:host([scrub]:disabled) [part="label"],
-:host([scrub][readonly]) [part="label"] {
-cursor: default;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="decrement"] {border-inline-end: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));}[part="increment"] {border-inline-start: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));}[part="decrement"]:hover:not(:disabled),
+[part="increment"]:hover:not(:disabled) {background-color: var(--number-input-stepper-background-color-hover, var(--helix-color-surface));color: var(--number-input-stepper-color-hover, var(--helix-color-foreground));}[part="decrement"]:disabled,
+[part="increment"]:disabled {cursor: default;opacity: 0.4;}[part="decrement"] svg,
+[part="increment"] svg {block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));}:host([scrub]) [part="label"] {cursor: ew-resize;touch-action: none;user-select: none;}:host([scrub]:disabled) [part="label"],
+:host([scrub][readonly]) [part="label"] {cursor: default;}@media print {:host {print-color-adjust: exact;}}`);

package/dist/number-input/root/number-input-root.d.ts

@@ -34,8 +34,16 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --number-input-background-color - The fill behind the number.
  * @cssproperty --number-input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --number-input-padding-inline - Space at each side of the number, inside the steppers.
  * @cssproperty --number-input-radius - Corner radius of the field.
  * @cssproperty --number-input-size - Height of the field.
+ * @cssproperty --number-input-stepper-background-color - Fill behind each stepper button at rest.
+ * @cssproperty --number-input-stepper-background-color-hover - Fill behind a stepper button under the pointer.
+ * @cssproperty --number-input-stepper-border-color - The rule between each stepper button and the number.
+ * @cssproperty --number-input-stepper-color - Icon color of the stepper buttons at rest.
+ * @cssproperty --number-input-stepper-color-hover - Icon color of a stepper button under the pointer.
+ * @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons.
+ * @cssproperty --number-input-stepper-size - Width of each stepper button.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;