@pearpages/pulp-react 0.2.1 → 0.3.0

package/dist/date-picker.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/calendar/Calendar.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Calendar_root {
     display: inline-flex;
@@ -127,6 +129,7 @@
 }
 
 /* src/internal/AriaField.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .AriaField_field {
     display: flex;
@@ -156,6 +159,7 @@
 }
 
 /* src/date-picker/DatePicker.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .DatePicker_root {
     --_height: var(--date-picker-height-md);

package/dist/date-picker.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/calendar/Calendar.module.css","../src/internal/AriaField.module.css","../src/date-picker/DatePicker.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/*\n * Every value is a token (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer components {\n  .root {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--calendar-gap);\n    padding: var(--calendar-padding);\n    background-color: var(--calendar-bg);\n    color: var(--calendar-fg);\n    font-family: var(--calendar-font-family);\n    font-size: var(--calendar-font-size);\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--calendar-gap);\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--calendar-heading-font-size);\n    font-weight: var(--calendar-heading-font-weight);\n  }\n\n  .nav {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-nav-size);\n    block-size: var(--calendar-nav-size);\n    padding: 0;\n    border: none;\n    border-radius: var(--calendar-nav-radius);\n    background-color: transparent;\n    color: var(--calendar-nav-fg);\n    cursor: pointer;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--calendar-nav-bg-hover);\n      color: var(--calendar-nav-fg-hover);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  .grid {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  .weekday {\n    inline-size: var(--calendar-cell-size);\n    padding: 0;\n    color: var(--calendar-weekday-fg);\n    font-size: var(--calendar-weekday-font-size);\n    font-weight: var(--calendar-weekday-font-weight);\n    text-align: center;\n  }\n\n  .cell {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-cell-size);\n    block-size: var(--calendar-cell-size);\n    border-radius: var(--calendar-cell-radius);\n    color: var(--calendar-cell-fg);\n    cursor: pointer;\n    outline: none;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &[data-today] {\n      color: var(--calendar-cell-fg-today);\n      font-weight: var(--calendar-heading-font-weight);\n    }\n\n    &[data-hovered] {\n      background-color: var(--calendar-cell-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--calendar-cell-bg-selected);\n      color: var(--calendar-cell-fg-selected);\n\n      &[data-hovered] {\n        background-color: var(--calendar-cell-bg-selected-hover);\n      }\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-unavailable] {\n      color: var(--calendar-cell-fg-unavailable);\n      text-decoration: line-through;\n      cursor: not-allowed;\n    }\n\n    /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n    &[data-disabled] {\n      color: var(--calendar-cell-fg-unavailable);\n      cursor: not-allowed;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--date-picker-*); the calendar reads --calendar-*.\n * The control is a group drawn like a text field around the date segments.\n * React Aria writes the state: data-focus-within, data-hovered,\n * data-disabled, data-invalid on the group; data-placeholder, data-focused\n * on each segment.\n */\n\n@layer components {\n  .root {\n    --_height: var(--date-picker-height-md);\n    --_font-size: var(--date-picker-font-size-md);\n    --_border: var(--date-picker-border-default);\n\n    font-family: var(--date-picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--date-picker-height-sm);\n      --_font-size: var(--date-picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--date-picker-height-lg);\n      --_font-size: var(--date-picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--date-picker-border-invalid); }\n  }\n\n  .control {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--_height);\n    padding-inline-start: var(--date-picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--date-picker-radius);\n    background-color: var(--date-picker-bg);\n    color: var(--date-picker-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--date-picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-within] {\n      border-color: var(--date-picker-border-focus);\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: var(--date-picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-within], [data-disabled]) {\n      border-color: var(--date-picker-border-hover);\n    }\n  }\n\n  .input {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n\n  .segment {\n    padding-inline: var(--date-picker-segment-padding-inline);\n    border-radius: var(--date-picker-segment-radius);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    caret-color: transparent;\n\n    &[data-type=\"literal\"] {\n      padding-inline: 0;\n    }\n\n    &[data-placeholder] {\n      color: var(--date-picker-segment-fg-placeholder);\n    }\n\n    &[data-focused] {\n      background-color: var(--date-picker-segment-bg-focus);\n      color: var(--date-picker-fg);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--date-picker-icon-size);\n    block-size: calc(var(--_height) - 2 * var(--size-hairline));\n    padding: 0;\n    border: none;\n    border-radius: var(--date-picker-radius);\n    background-color: transparent;\n    color: var(--date-picker-icon);\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: calc(-1 * var(--date-picker-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    padding-block-start: var(--date-picker-gap);\n    animation: fade var(--date-picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--date-picker-gap);\n    }\n  }\n\n  .dialog {\n    border: var(--size-hairline) solid var(--date-picker-dialog-border);\n    border-radius: var(--date-picker-dialog-radius);\n    background-color: var(--date-picker-dialog-bg);\n    box-shadow: var(--date-picker-popover-shadow);\n    outline: none;\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","header","heading","nav","grid","weekday","cell","field","label","required","description","error","root","control","input","segment","button","popover","dialog","fade"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/calendar/Calendar.module.css","../src/internal/AriaField.module.css","../src/date-picker/DatePicker.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/*\n * Every value is a token (--calendar-*). React Aria writes the cell state:\n * data-selected, data-focused, data-focus-visible, data-hovered,\n * data-disabled, data-unavailable, data-today, data-outside-month.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--calendar-gap);\n    padding: var(--calendar-padding);\n    background-color: var(--calendar-bg);\n    color: var(--calendar-fg);\n    font-family: var(--calendar-font-family);\n    font-size: var(--calendar-font-size);\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--calendar-gap);\n  }\n\n  .heading {\n    margin: 0;\n    font-size: var(--calendar-heading-font-size);\n    font-weight: var(--calendar-heading-font-weight);\n  }\n\n  .nav {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-nav-size);\n    block-size: var(--calendar-nav-size);\n    padding: 0;\n    border: none;\n    border-radius: var(--calendar-nav-radius);\n    background-color: transparent;\n    color: var(--calendar-nav-fg);\n    cursor: pointer;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--calendar-nav-bg-hover);\n      color: var(--calendar-nav-fg-hover);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n  }\n\n  .grid {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  .weekday {\n    inline-size: var(--calendar-cell-size);\n    padding: 0;\n    color: var(--calendar-weekday-fg);\n    font-size: var(--calendar-weekday-font-size);\n    font-weight: var(--calendar-weekday-font-weight);\n    text-align: center;\n  }\n\n  .cell {\n    display: grid;\n    place-items: center;\n    inline-size: var(--calendar-cell-size);\n    block-size: var(--calendar-cell-size);\n    border-radius: var(--calendar-cell-radius);\n    color: var(--calendar-cell-fg);\n    cursor: pointer;\n    outline: none;\n    transition: background-color var(--calendar-motion-duration) var(--motion-easing-standard);\n\n    &[data-outside-month] {\n      display: none;\n    }\n\n    &[data-today] {\n      color: var(--calendar-cell-fg-today);\n      font-weight: var(--calendar-heading-font-weight);\n    }\n\n    &[data-hovered] {\n      background-color: var(--calendar-cell-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--calendar-cell-bg-selected);\n      color: var(--calendar-cell-fg-selected);\n\n      &[data-hovered] {\n        background-color: var(--calendar-cell-bg-selected-hover);\n      }\n    }\n\n    &[data-focus-visible] {\n      outline: var(--calendar-focus-ring-width) solid var(--calendar-focus-ring);\n      outline-offset: var(--calendar-focus-ring-offset);\n    }\n\n    &[data-unavailable] {\n      color: var(--calendar-cell-fg-unavailable);\n      text-decoration: line-through;\n      cursor: not-allowed;\n    }\n\n    /* Disabled dims the days, not the month name, so the visible text keeps its contrast. */\n    &[data-disabled] {\n      color: var(--calendar-cell-fg-unavailable);\n      cursor: not-allowed;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--date-picker-*); the calendar reads --calendar-*.\n * The control is a group drawn like a text field around the date segments.\n * React Aria writes the state: data-focus-within, data-hovered,\n * data-disabled, data-invalid on the group; data-placeholder, data-focused\n * on each segment.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--date-picker-height-md);\n    --_font-size: var(--date-picker-font-size-md);\n    --_border: var(--date-picker-border-default);\n\n    font-family: var(--date-picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--date-picker-height-sm);\n      --_font-size: var(--date-picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--date-picker-height-lg);\n      --_font-size: var(--date-picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--date-picker-border-invalid); }\n  }\n\n  .control {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--_height);\n    padding-inline-start: var(--date-picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--date-picker-radius);\n    background-color: var(--date-picker-bg);\n    color: var(--date-picker-fg);\n    font-size: var(--_font-size);\n    transition: border-color var(--date-picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-within] {\n      border-color: var(--date-picker-border-focus);\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: var(--date-picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-within], [data-disabled]) {\n      border-color: var(--date-picker-border-hover);\n    }\n  }\n\n  .input {\n    display: flex;\n    flex: 1;\n    align-items: center;\n  }\n\n  .segment {\n    padding-inline: var(--date-picker-segment-padding-inline);\n    border-radius: var(--date-picker-segment-radius);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    caret-color: transparent;\n\n    &[data-type=\"literal\"] {\n      padding-inline: 0;\n    }\n\n    &[data-placeholder] {\n      color: var(--date-picker-segment-fg-placeholder);\n    }\n\n    &[data-focused] {\n      background-color: var(--date-picker-segment-bg-focus);\n      color: var(--date-picker-fg);\n    }\n  }\n\n  .button {\n    display: grid;\n    place-items: center;\n    inline-size: var(--date-picker-icon-size);\n    block-size: calc(var(--_height) - 2 * var(--size-hairline));\n    padding: 0;\n    border: none;\n    border-radius: var(--date-picker-radius);\n    background-color: transparent;\n    color: var(--date-picker-icon);\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: var(--date-picker-focus-ring-width) solid var(--date-picker-focus-ring);\n      outline-offset: calc(-1 * var(--date-picker-focus-ring-width));\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n  }\n\n  .popover {\n    padding-block-start: var(--date-picker-gap);\n    animation: fade var(--date-picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--date-picker-gap);\n    }\n  }\n\n  .dialog {\n    border: var(--size-hairline) solid var(--date-picker-dialog-border);\n    border-radius: var(--date-picker-dialog-radius);\n    background-color: var(--date-picker-dialog-bg);\n    box-shadow: var(--date-picker-popover-shadow);\n    outline: none;\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","header","heading","nav","grid","weekday","cell","field","label","required","description","error","root","control","input","segment","button","popover","dialog","fade"]}

package/dist/date-picker.js

@@ -1,8 +1,8 @@
-export { DatePicker } from './chunk-UX42PQLT.js';
-import './chunk-OXYP34CG.js';
-import './chunk-4HRNRTXI.js';
-import './chunk-YUHS5S5Y.js';
-import './chunk-ASNTNTJW.js';
+"use client";export { DatePicker } from './chunk-Y4YVAHD2.js';
+import './chunk-JOGIN4SS.js';
+import './chunk-IRNTXAA7.js';
+import './chunk-DGIXNUNI.js';
+import './chunk-O5LII5XP.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=date-picker.js.map
 //# sourceMappingURL=date-picker.js.map

package/dist/dialog.css

@@ -1,4 +1,5 @@
 /* src/dialog/Dialog.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Dialog_root {
     --modal-bg: var(--dialog-surface);

package/dist/dialog.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/dialog/Dialog.module.css"],"sourcesContent":["/*\n * The vendor (@pearpages/modals) reads --modal-* custom properties. This class\n * goes on the portal element pulp owns, so every dialog inherits pulp's\n * --dialog-* tokens and the vendor's :root defaults never apply.\n */\n\n@layer components {\n  .root {\n    --modal-bg: var(--dialog-surface);\n    --modal-surface-elevated: var(--dialog-surface);\n    --modal-surface-subtle: var(--dialog-surface-subtle);\n    --modal-color: var(--dialog-fg);\n    --modal-text-secondary: var(--dialog-fg-muted);\n    --modal-text-muted: var(--dialog-fg-muted);\n    --modal-backdrop-bg: var(--dialog-backdrop);\n    --modal-border-primary-color: var(--dialog-border);\n    --modal-border-hover-color: var(--dialog-border-hover);\n    --modal-border-focus-color: var(--dialog-focus);\n    --modal-border-accent-color: var(--dialog-border);\n    --modal-radius: var(--dialog-radius);\n    --modal-radius-md: var(--dialog-radius);\n    --modal-radius-sm: var(--radius-control);\n    --modal-button-radius: var(--radius-control);\n    --modal-shadow: var(--dialog-shadow);\n    --modal-padding: var(--dialog-padding);\n    --modal-spacing-xs: var(--space-1);\n    --modal-spacing-sm: var(--space-2);\n    --modal-spacing-md: var(--dialog-gap);\n    --modal-spacing-lg: var(--space-4);\n    --modal-spacing-xl: var(--space-5);\n    --modal-font-family: var(--dialog-font-family);\n    --modal-font-family-mono: var(--font-family-mono);\n    --modal-font-size-title: var(--dialog-title-font-size);\n    --modal-font-size-title-mobile: var(--dialog-title-font-size);\n    --modal-font-weight-title: var(--dialog-title-font-weight);\n    --modal-font-size-description: var(--dialog-description-font-size);\n    --modal-font-size-description-mobile: var(--dialog-description-font-size);\n    --modal-font-size-button: var(--font-size-sm);\n    --modal-close-bg: var(--dialog-close-bg);\n    --modal-close-hover-bg: var(--dialog-close-bg-hover);\n    --modal-close-text: var(--dialog-close-fg);\n    --modal-close-hover-text: var(--dialog-close-fg-hover);\n    --modal-interactive-hover: var(--color-action-secondary-hover);\n    --modal-interactive-active: var(--color-action-secondary-hover);\n    --modal-interactive-focus: var(--color-action-primary-quiet);\n    --modal-transition-duration: var(--dialog-motion-duration);\n    --modal-transition-easing: var(--dialog-motion-easing);\n    --modal-outline-width: var(--focus-ring-width);\n    --modal-outline-offset: var(--focus-ring-offset);\n    --modal-button-focus-color: var(--dialog-focus);\n    --modal-button-primary-bg: var(--color-action-primary);\n    --modal-button-primary-border: var(--color-action-primary);\n    --modal-button-primary-color: var(--color-text-on-action);\n    --modal-button-primary-hover-bg: var(--color-action-primary-hover);\n    --modal-button-primary-hover-border: var(--color-action-primary-hover);\n    --modal-button-primary-active-bg: var(--color-action-primary-active);\n    --modal-button-primary-active-border: var(--color-action-primary-active);\n    --modal-button-secondary-bg: var(--color-action-secondary);\n    --modal-button-secondary-border: var(--color-border-default);\n    --modal-button-secondary-color: var(--color-text-default);\n    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-hover-border: var(--color-border-strong);\n    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-active-border: var(--color-border-strong);\n  }\n}\n"],"mappings":";AAMA;AACE,GAACA;AACC,gBAAY,IAAI;AAChB,8BAA0B,IAAI;AAC9B,4BAAwB,IAAI;AAC5B,mBAAe,IAAI;AACnB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,kCAA8B,IAAI;AAClC,gCAA4B,IAAI;AAChC,gCAA4B,IAAI;AAChC,iCAA6B,IAAI;AACjC,oBAAgB,IAAI;AACpB,uBAAmB,IAAI;AACvB,uBAAmB,IAAI;AACvB,2BAAuB,IAAI;AAC3B,oBAAgB,IAAI;AACpB,qBAAiB,IAAI;AACrB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,8BAA0B,IAAI;AAC9B,6BAAyB,IAAI;AAC7B,oCAAgC,IAAI;AACpC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,0CAAsC,IAAI;AAC1C,8BAA0B,IAAI;AAC9B,sBAAkB,IAAI;AACtB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,8BAA0B,IAAI;AAC9B,+BAA2B,IAAI;AAC/B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,iCAA6B,IAAI;AACjC,+BAA2B,IAAI;AAC/B,2BAAuB,IAAI;AAC3B,4BAAwB,IAAI;AAC5B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,kCAA8B,IAAI;AAClC,qCAAiC,IAAI;AACrC,yCAAqC,IAAI;AACzC,sCAAkC,IAAI;AACtC,0CAAsC,IAAI;AAC1C,iCAA6B,IAAI;AACjC,qCAAiC,IAAI;AACrC,oCAAgC,IAAI;AACpC,uCAAmC,IAAI;AACvC,2CAAuC,IAAI;AAC3C,wCAAoC,IAAI;AACxC,4CAAwC,IAAI;AAC9C;AACF;","names":["root"]}
+{"version":3,"sources":["../src/dialog/Dialog.module.css"],"sourcesContent":["/*\n * The vendor (@pearpages/modals) reads --modal-* custom properties. This class\n * goes on the portal element pulp owns, so every dialog inherits pulp's\n * --dialog-* tokens and the vendor's :root defaults never apply.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --modal-bg: var(--dialog-surface);\n    --modal-surface-elevated: var(--dialog-surface);\n    --modal-surface-subtle: var(--dialog-surface-subtle);\n    --modal-color: var(--dialog-fg);\n    --modal-text-secondary: var(--dialog-fg-muted);\n    --modal-text-muted: var(--dialog-fg-muted);\n    --modal-backdrop-bg: var(--dialog-backdrop);\n    --modal-border-primary-color: var(--dialog-border);\n    --modal-border-hover-color: var(--dialog-border-hover);\n    --modal-border-focus-color: var(--dialog-focus);\n    --modal-border-accent-color: var(--dialog-border);\n    --modal-radius: var(--dialog-radius);\n    --modal-radius-md: var(--dialog-radius);\n    --modal-radius-sm: var(--radius-control);\n    --modal-button-radius: var(--radius-control);\n    --modal-shadow: var(--dialog-shadow);\n    --modal-padding: var(--dialog-padding);\n    --modal-spacing-xs: var(--space-1);\n    --modal-spacing-sm: var(--space-2);\n    --modal-spacing-md: var(--dialog-gap);\n    --modal-spacing-lg: var(--space-4);\n    --modal-spacing-xl: var(--space-5);\n    --modal-font-family: var(--dialog-font-family);\n    --modal-font-family-mono: var(--font-family-mono);\n    --modal-font-size-title: var(--dialog-title-font-size);\n    --modal-font-size-title-mobile: var(--dialog-title-font-size);\n    --modal-font-weight-title: var(--dialog-title-font-weight);\n    --modal-font-size-description: var(--dialog-description-font-size);\n    --modal-font-size-description-mobile: var(--dialog-description-font-size);\n    --modal-font-size-button: var(--font-size-sm);\n    --modal-close-bg: var(--dialog-close-bg);\n    --modal-close-hover-bg: var(--dialog-close-bg-hover);\n    --modal-close-text: var(--dialog-close-fg);\n    --modal-close-hover-text: var(--dialog-close-fg-hover);\n    --modal-interactive-hover: var(--color-action-secondary-hover);\n    --modal-interactive-active: var(--color-action-secondary-hover);\n    --modal-interactive-focus: var(--color-action-primary-quiet);\n    --modal-transition-duration: var(--dialog-motion-duration);\n    --modal-transition-easing: var(--dialog-motion-easing);\n    --modal-outline-width: var(--focus-ring-width);\n    --modal-outline-offset: var(--focus-ring-offset);\n    --modal-button-focus-color: var(--dialog-focus);\n    --modal-button-primary-bg: var(--color-action-primary);\n    --modal-button-primary-border: var(--color-action-primary);\n    --modal-button-primary-color: var(--color-text-on-action);\n    --modal-button-primary-hover-bg: var(--color-action-primary-hover);\n    --modal-button-primary-hover-border: var(--color-action-primary-hover);\n    --modal-button-primary-active-bg: var(--color-action-primary-active);\n    --modal-button-primary-active-border: var(--color-action-primary-active);\n    --modal-button-secondary-bg: var(--color-action-secondary);\n    --modal-button-secondary-border: var(--color-border-default);\n    --modal-button-secondary-color: var(--color-text-default);\n    --modal-button-secondary-hover-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-hover-border: var(--color-border-strong);\n    --modal-button-secondary-active-bg: var(--color-action-secondary-hover);\n    --modal-button-secondary-active-border: var(--color-border-strong);\n  }\n}\n"],"mappings":";AAMA;AAEA;AACE,GAACA;AACC,gBAAY,IAAI;AAChB,8BAA0B,IAAI;AAC9B,4BAAwB,IAAI;AAC5B,mBAAe,IAAI;AACnB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,kCAA8B,IAAI;AAClC,gCAA4B,IAAI;AAChC,gCAA4B,IAAI;AAChC,iCAA6B,IAAI;AACjC,oBAAgB,IAAI;AACpB,uBAAmB,IAAI;AACvB,uBAAmB,IAAI;AACvB,2BAAuB,IAAI;AAC3B,oBAAgB,IAAI;AACpB,qBAAiB,IAAI;AACrB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,wBAAoB,IAAI;AACxB,yBAAqB,IAAI;AACzB,8BAA0B,IAAI;AAC9B,6BAAyB,IAAI;AAC7B,oCAAgC,IAAI;AACpC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,0CAAsC,IAAI;AAC1C,8BAA0B,IAAI;AAC9B,sBAAkB,IAAI;AACtB,4BAAwB,IAAI;AAC5B,wBAAoB,IAAI;AACxB,8BAA0B,IAAI;AAC9B,+BAA2B,IAAI;AAC/B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,iCAA6B,IAAI;AACjC,+BAA2B,IAAI;AAC/B,2BAAuB,IAAI;AAC3B,4BAAwB,IAAI;AAC5B,gCAA4B,IAAI;AAChC,+BAA2B,IAAI;AAC/B,mCAA+B,IAAI;AACnC,kCAA8B,IAAI;AAClC,qCAAiC,IAAI;AACrC,yCAAqC,IAAI;AACzC,sCAAkC,IAAI;AACtC,0CAAsC,IAAI;AAC1C,iCAA6B,IAAI;AACjC,qCAAiC,IAAI;AACrC,oCAAgC,IAAI;AACpC,uCAAmC,IAAI;AACvC,2CAAuC,IAAI;AAC3C,wCAAoC,IAAI;AACxC,4CAAwC,IAAI;AAC9C;AACF;","names":["root"]}

package/dist/dialog.js

@@ -1,3 +1,3 @@
-export { Dialog, DialogSystem } from './chunk-IDNGNQNV.js';
+"use client";export { Dialog, DialogSystem } from './chunk-55QUKGK2.js';
 //# sourceMappingURL=dialog.js.map
 //# sourceMappingURL=dialog.js.map

package/dist/divider.css

@@ -0,0 +1,37 @@
+/* src/divider/Divider.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Divider_divider {
+    flex-shrink: 0;
+    margin: 0;
+    border: 0;
+    background-color: var(--divider-color);
+    &[data-orientation=horizontal] {
+      inline-size: 100%;
+      block-size: var(--divider-thickness);
+      &[data-spacing=sm] {
+        margin-block: var(--divider-spacing-sm);
+      }
+      &[data-spacing=md] {
+        margin-block: var(--divider-spacing-md);
+      }
+      &[data-spacing=lg] {
+        margin-block: var(--divider-spacing-lg);
+      }
+    }
+    &[data-orientation=vertical] {
+      align-self: stretch;
+      inline-size: var(--divider-thickness);
+      &[data-spacing=sm] {
+        margin-inline: var(--divider-spacing-sm);
+      }
+      &[data-spacing=md] {
+        margin-inline: var(--divider-spacing-md);
+      }
+      &[data-spacing=lg] {
+        margin-inline: var(--divider-spacing-lg);
+      }
+    }
+  }
+}
+/*# sourceMappingURL=divider.css.map */

package/dist/divider.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/divider/Divider.module.css"],"sourcesContent":["/* Every value is a token: --divider-* in packages/tokens/tokens/component/divider.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .divider {\n    flex-shrink: 0;\n    margin: 0;\n    border: 0;\n    background-color: var(--divider-color);\n\n    &[data-orientation=\"horizontal\"] {\n      inline-size: 100%;\n      block-size: var(--divider-thickness);\n\n      &[data-spacing=\"sm\"] { margin-block: var(--divider-spacing-sm); }\n      &[data-spacing=\"md\"] { margin-block: var(--divider-spacing-md); }\n      &[data-spacing=\"lg\"] { margin-block: var(--divider-spacing-lg); }\n    }\n\n    &[data-orientation=\"vertical\"] {\n      align-self: stretch;\n      inline-size: var(--divider-thickness);\n\n      &[data-spacing=\"sm\"] { margin-inline: var(--divider-spacing-sm); }\n      &[data-spacing=\"md\"] { margin-inline: var(--divider-spacing-md); }\n      &[data-spacing=\"lg\"] { margin-inline: var(--divider-spacing-lg); }\n    }\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,iBAAa;AACb,YAAQ;AACR,YAAQ;AACR,sBAAkB,IAAI;AAEtB,KAAC,CAAC;AACA,mBAAa;AACb,kBAAY,IAAI;AAEhB,OAAC,CAAC;AAAqB,sBAAc,IAAI;AAAuB;AAChE,OAAC,CAAC;AAAqB,sBAAc,IAAI;AAAuB;AAChE,OAAC,CAAC;AAAqB,sBAAc,IAAI;AAAuB;AAClE;AAEA,KAAC,CAAC;AACA,kBAAY;AACZ,mBAAa,IAAI;AAEjB,OAAC,CAAC;AAAqB,uBAAe,IAAI;AAAuB;AACjE,OAAC,CAAC;AAAqB,uBAAe,IAAI;AAAuB;AACjE,OAAC,CAAC;AAAqB,uBAAe,IAAI;AAAuB;AACnE;AACF;AACF;","names":["divider"]}

package/dist/divider.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref } from 'react';
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
+interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** @default 'horizontal' */
+    orientation?: DividerOrientation;
+    /** Space on both sides, along the axis the line separates. @default 'none' */
+    spacing?: DividerSpacing;
+    /**
+     * A decorative line is hidden from assistive technology. Pass `false` when the
+     * line is the only thing that says two groups are separate. @default true
+     */
+    decorative?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A hairline between two groups of content, horizontal or vertical. A vertical
+ * divider stretches to its flex or grid row, so it needs a parent that lays it out.
+ *
+ * @status experimental
+ * @category Layout
+ * @accessibility Decorative by default: `role="none"`, nothing is announced, because headings and landmarks should already carry the structure. With `decorative={false}` it is a `separator`, and a vertical one says so through `aria-orientation`. It is never focusable: a separator that moves is a splitter, which this is not.
+ * @do Put it between groups inside a Card, a Menu-like list or a toolbar.
+ * @do Let `spacing` set the distance, so it stays on the spacing scale.
+ * @dont Use it to draw a border around something; that is the container's border.
+ * @dont Rely on it alone to tell a screen reader that a new section starts; use a heading.
+ */
+declare function Divider({ orientation, spacing, decorative, className, ref, ...rest }: DividerProps): react.JSX.Element;
+declare namespace Divider {
+    var displayName: string;
+}
+
+export { Divider, type DividerOrientation, type DividerProps, type DividerSpacing };

package/dist/divider.js

@@ -0,0 +1,4 @@
+export { Divider } from './chunk-QID6YYFF.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=divider.js.map
+//# sourceMappingURL=divider.js.map

package/dist/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"divider.js"}

package/dist/empty-state.css

@@ -0,0 +1,175 @@
+/* src/heading/Heading.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Heading_heading {
+    margin: 0;
+    font-family: var(--heading-font-family);
+    font-weight: var(--heading-font-weight);
+    line-height: var(--heading-line-height);
+    color: var(--heading-tone-default);
+    text-wrap: balance;
+    &[data-size=sm] {
+      font-size: var(--heading-size-sm);
+    }
+    &[data-size=md] {
+      font-size: var(--heading-size-md);
+    }
+    &[data-size=lg] {
+      font-size: var(--heading-size-lg);
+    }
+    &[data-size=xl] {
+      font-size: var(--heading-size-xl);
+    }
+    &[data-size="2xl"] {
+      font-size: var(--heading-size-2xl);
+    }
+    &[data-tone=muted] {
+      color: var(--heading-tone-muted);
+    }
+  }
+}
+
+/* src/stack/Stack.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Stack_stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--stack-gap-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    &[data-gap="1"] {
+      gap: var(--stack-gap-1);
+    }
+    &[data-gap="2"] {
+      gap: var(--stack-gap-2);
+    }
+    &[data-gap="3"] {
+      gap: var(--stack-gap-3);
+    }
+    &[data-gap="4"] {
+      gap: var(--stack-gap-4);
+    }
+    &[data-gap="5"] {
+      gap: var(--stack-gap-5);
+    }
+    &[data-gap="6"] {
+      gap: var(--stack-gap-6);
+    }
+    &[data-gap="7"] {
+      gap: var(--stack-gap-7);
+    }
+    &[data-gap="8"] {
+      gap: var(--stack-gap-8);
+    }
+    &[data-align=start] {
+      align-items: flex-start;
+    }
+    &[data-align=center] {
+      align-items: center;
+    }
+    &[data-align=end] {
+      align-items: flex-end;
+    }
+    &[data-align=stretch] {
+      align-items: stretch;
+    }
+    &[data-justify=start] {
+      justify-content: flex-start;
+    }
+    &[data-justify=center] {
+      justify-content: center;
+    }
+    &[data-justify=end] {
+      justify-content: flex-end;
+    }
+    &[data-justify=between] {
+      justify-content: space-between;
+    }
+  }
+}
+
+/* src/text/Text.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Text_text {
+    margin: 0;
+    font-family: var(--text-font-family-body);
+    font-size: var(--text-size-md);
+    font-weight: var(--text-weight-regular);
+    line-height: var(--text-line-height);
+    color: var(--text-tone-default);
+    &[data-size=xs] {
+      font-size: var(--text-size-xs);
+    }
+    &[data-size=sm] {
+      font-size: var(--text-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--text-size-lg);
+    }
+    &[data-size=xl] {
+      font-size: var(--text-size-xl);
+    }
+    &[data-weight=medium] {
+      font-weight: var(--text-weight-medium);
+    }
+    &[data-weight=semibold] {
+      font-weight: var(--text-weight-semibold);
+    }
+    &[data-tone=muted] {
+      color: var(--text-tone-muted);
+    }
+    &[data-tone=faint] {
+      color: var(--text-tone-faint);
+    }
+    &[data-family=mono] {
+      font-family: var(--text-font-family-mono);
+    }
+    &[data-align=start] {
+      text-align: start;
+    }
+    &[data-align=center] {
+      text-align: center;
+    }
+    &[data-align=end] {
+      text-align: end;
+    }
+    &[data-truncate] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+/* src/empty-state/EmptyState.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .EmptyState_root {
+    box-sizing: border-box;
+    padding: var(--empty-state-padding);
+  }
+  .EmptyState_text {
+    text-align: center;
+    text-wrap: balance;
+  }
+  .EmptyState_icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--empty-state-icon-size);
+    block-size: var(--empty-state-icon-size);
+    border-radius: var(--empty-state-icon-radius);
+    background: var(--empty-state-icon-neutral-bg);
+    color: var(--empty-state-icon-neutral-fg);
+    font-size: var(--empty-state-icon-glyph-size);
+    .EmptyState_root[data-tone=error] & {
+      background: var(--empty-state-icon-error-bg);
+      color: var(--empty-state-icon-error-fg);
+    }
+  }
+}
+/*# sourceMappingURL=empty-state.css.map */

package/dist/empty-state.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heading/Heading.module.css","../src/stack/Stack.module.css","../src/text/Text.module.css","../src/empty-state/EmptyState.module.css"],"sourcesContent":["/* Every value is a token (--heading-*). Size is a data attribute, independent of the level. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .heading {\n    margin: 0;\n    font-family: var(--heading-font-family);\n    font-weight: var(--heading-font-weight);\n    line-height: var(--heading-line-height);\n    color: var(--heading-tone-default);\n    text-wrap: balance;\n\n    &[data-size=\"sm\"] { font-size: var(--heading-size-sm); }\n    &[data-size=\"md\"] { font-size: var(--heading-size-md); }\n    &[data-size=\"lg\"] { font-size: var(--heading-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--heading-size-xl); }\n    &[data-size=\"2xl\"] { font-size: var(--heading-size-2xl); }\n    &[data-tone=\"muted\"] { color: var(--heading-tone-muted); }\n  }\n}\n","/* Every value is a token (--stack-gap-*). Gap, alignment and justification are data attributes. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stack-gap-3);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n\n    &[data-gap=\"1\"] { gap: var(--stack-gap-1); }\n    &[data-gap=\"2\"] { gap: var(--stack-gap-2); }\n    &[data-gap=\"3\"] { gap: var(--stack-gap-3); }\n    &[data-gap=\"4\"] { gap: var(--stack-gap-4); }\n    &[data-gap=\"5\"] { gap: var(--stack-gap-5); }\n    &[data-gap=\"6\"] { gap: var(--stack-gap-6); }\n    &[data-gap=\"7\"] { gap: var(--stack-gap-7); }\n    &[data-gap=\"8\"] { gap: var(--stack-gap-8); }\n    &[data-align=\"start\"] { align-items: flex-start; }\n    &[data-align=\"center\"] { align-items: center; }\n    &[data-align=\"end\"] { align-items: flex-end; }\n    &[data-align=\"stretch\"] { align-items: stretch; }\n    &[data-justify=\"start\"] { justify-content: flex-start; }\n    &[data-justify=\"center\"] { justify-content: center; }\n    &[data-justify=\"end\"] { justify-content: flex-end; }\n    &[data-justify=\"between\"] { justify-content: space-between; }\n  }\n}\n","/* Every value is a token (--text-*). Variants are data attributes. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .text {\n    margin: 0;\n    font-family: var(--text-font-family-body);\n    font-size: var(--text-size-md);\n    font-weight: var(--text-weight-regular);\n    line-height: var(--text-line-height);\n    color: var(--text-tone-default);\n\n    &[data-size=\"xs\"] { font-size: var(--text-size-xs); }\n    &[data-size=\"sm\"] { font-size: var(--text-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--text-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--text-size-xl); }\n    &[data-weight=\"medium\"] { font-weight: var(--text-weight-medium); }\n    &[data-weight=\"semibold\"] { font-weight: var(--text-weight-semibold); }\n    &[data-tone=\"muted\"] { color: var(--text-tone-muted); }\n    &[data-tone=\"faint\"] { color: var(--text-tone-faint); }\n    &[data-family=\"mono\"] { font-family: var(--text-font-family-mono); }\n    &[data-align=\"start\"] { text-align: start; }\n    &[data-align=\"center\"] { text-align: center; }\n    &[data-align=\"end\"] { text-align: end; }\n\n    &[data-truncate] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n","/* Every value is a token: --empty-state-* in packages/tokens/tokens/component/empty-state.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    box-sizing: border-box;\n    padding: var(--empty-state-padding);\n  }\n\n  .text {\n    text-align: center;\n    text-wrap: balance;\n  }\n\n  .icon {\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--empty-state-icon-size);\n    block-size: var(--empty-state-icon-size);\n    border-radius: var(--empty-state-icon-radius);\n    background: var(--empty-state-icon-neutral-bg);\n    color: var(--empty-state-icon-neutral-fg);\n    font-size: var(--empty-state-icon-glyph-size);\n\n    .root[data-tone='error'] & {\n      background: var(--empty-state-icon-error-bg);\n      color: var(--empty-state-icon-error-fg);\n    }\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,WAAO,IAAI;AACX,eAAW;AAEX,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAmB,iBAAW,IAAI;AAAqB;AACzD,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAuB;AAC3D;AACF;;;AClBA;AAEA;AACE,GAACC;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,YAAQ;AACR,aAAS;AACT,gBAAY;AAEZ,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAgB,WAAK,IAAI;AAAgB;AAC3C,KAAC,CAAC;AAAsB,mBAAa;AAAY;AACjD,KAAC,CAAC;AAAuB,mBAAa;AAAQ;AAC9C,KAAC,CAAC;AAAoB,mBAAa;AAAU;AAC7C,KAAC,CAAC;AAAwB,mBAAa;AAAS;AAChD,KAAC,CAAC;AAAwB,uBAAiB;AAAY;AACvD,KAAC,CAAC;AAAyB,uBAAiB;AAAQ;AACpD,KAAC,CAAC;AAAsB,uBAAiB;AAAU;AACnD,KAAC,CAAC;AAA0B,uBAAiB;AAAe;AAC9D;AACF;;;AC5BA;AAEA;AACE,GAACC;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,WAAO,IAAI;AAEX,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAiB;AACpD,KAAC,CAAC;AAAwB,mBAAa,IAAI;AAAuB;AAClE,KAAC,CAAC;AAA0B,mBAAa,IAAI;AAAyB;AACtE,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAoB;AACtD,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAoB;AACtD,KAAC,CAAC;AAAsB,mBAAa,IAAI;AAA0B;AACnE,KAAC,CAAC;AAAsB,kBAAY;AAAO;AAC3C,KAAC,CAAC;AAAuB,kBAAY;AAAQ;AAC7C,KAAC,CAAC;AAAoB,kBAAY;AAAK;AAEvC,KAAC,CAAC;AACA,gBAAU;AACV,qBAAe;AACf,mBAAa;AACf;AACF;AACF;;;AC9BA;AAEA;AACE,GAACC;AACC,gBAAY;AACZ,aAAS,IAAI;AACf;AAEA,GAACC;AACC,gBAAY;AACZ,eAAW;AACb;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,qBAAiB;AACjB,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,mBAAe,IAAI;AACnB,gBAAY,IAAI;AAChB,WAAO,IAAI;AACX,eAAW,IAAI;AAEf,KAtBDF,eAsBM,CAAC,iBAAmB;AACvB,kBAAY,IAAI;AAChB,aAAO,IAAI;AACb;AACF;AACF;","names":["heading","stack","text","root","text","icon"]}

package/dist/empty-state.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { HeadingLevel } from './heading.js';
+
+type EmptyStateTone = 'neutral' | 'error';
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** What is missing, or what went wrong, in a few words. Rendered as a heading. */
+    title: ReactNode;
+    /** One or two sentences: why it is empty and what to do about it. */
+    description?: ReactNode;
+    /** A glyph, shown in a tinted disc. Decorative: the title carries the meaning. */
+    icon?: ReactNode;
+    /** One control: a Button, or a Link. For an error, the retry. */
+    action?: ReactNode;
+    /** `error` tints the icon with the error colours. It does not announce anything: see the accessibility notes. @default 'neutral' */
+    tone?: EmptyStateTone;
+    /** The heading's outline level, from where the empty state sits in the page. @default 3 */
+    headingLevel?: HeadingLevel;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * What a list, a search or a page shows instead of its content: nothing yet,
+ * nothing found, or it failed to load. An icon, a title, a sentence and one
+ * action, centred. Composes Heading, Text and Stack, so the type follows the
+ * brand without tokens of its own.
+ *
+ * @status experimental
+ * @category Feedback
+ * @accessibility The title is a real heading at `headingLevel`, so the empty region shows up in the outline; pick the level from the page, as with Heading. The icon is `aria-hidden`. Nothing is announced on its own: an empty state that is there when the page loads is just content. When it **replaces** content after the user did something (a search with no results, a failed reload), pass `role="status"` (or `role="alert"` for an error that needs attention) so it is read out; do not put `role="alert"` on one that renders with the page. The action is whatever you pass, with its own semantics.
+ * @do Say what to do next in the description, and make the action that next step.
+ * @do Use `tone="error"` with a retry action when loading failed.
+ * @dont Use it for a validation error or a transient message; that is a Field error, an Alert or a Toast.
+ * @dont Offer several actions; an empty state has one way forward.
+ */
+declare function EmptyState({ title, description, icon, action, tone, headingLevel, className, ref, ...rest }: EmptyStateProps): react.JSX.Element;
+declare namespace EmptyState {
+    var displayName: string;
+}
+
+export { EmptyState, type EmptyStateProps };

package/dist/empty-state.js

@@ -0,0 +1,7 @@
+export { EmptyState } from './chunk-5TYCIBLW.js';
+import './chunk-2E2ESMS2.js';
+import './chunk-F3S5BHX2.js';
+import './chunk-LKWZZIRZ.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=empty-state.js.map
+//# sourceMappingURL=empty-state.js.map

package/dist/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"empty-state.js"}

package/dist/field.css

@@ -1,4 +1,5 @@
 /* src/field/Field.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Field_field {
     display: flex;

package/dist/field.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/Field.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;","names":["field","label","required","description","error"]}
+{"version":3,"sources":["../src/field/Field.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;","names":["field","label","required","description","error"]}

package/dist/field.js

@@ -1,5 +1,5 @@
-export { Field, useField } from './chunk-2PXTVZ7H.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Field, useField } from './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=field.js.map
 //# sourceMappingURL=field.js.map

package/dist/heading.css

@@ -1,4 +1,5 @@
 /* src/heading/Heading.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Heading_heading {
     margin: 0;

package/dist/heading.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/heading/Heading.module.css"],"sourcesContent":["/* Every value is a token (--heading-*). Size is a data attribute, independent of the level. */\n\n@layer components {\n  .heading {\n    margin: 0;\n    font-family: var(--heading-font-family);\n    font-weight: var(--heading-font-weight);\n    line-height: var(--heading-line-height);\n    color: var(--heading-tone-default);\n    text-wrap: balance;\n\n    &[data-size=\"sm\"] { font-size: var(--heading-size-sm); }\n    &[data-size=\"md\"] { font-size: var(--heading-size-md); }\n    &[data-size=\"lg\"] { font-size: var(--heading-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--heading-size-xl); }\n    &[data-size=\"2xl\"] { font-size: var(--heading-size-2xl); }\n    &[data-tone=\"muted\"] { color: var(--heading-tone-muted); }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,WAAO,IAAI;AACX,eAAW;AAEX,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAmB,iBAAW,IAAI;AAAqB;AACzD,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAuB;AAC3D;AACF;","names":["heading"]}
+{"version":3,"sources":["../src/heading/Heading.module.css"],"sourcesContent":["/* Every value is a token (--heading-*). Size is a data attribute, independent of the level. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .heading {\n    margin: 0;\n    font-family: var(--heading-font-family);\n    font-weight: var(--heading-font-weight);\n    line-height: var(--heading-line-height);\n    color: var(--heading-tone-default);\n    text-wrap: balance;\n\n    &[data-size=\"sm\"] { font-size: var(--heading-size-sm); }\n    &[data-size=\"md\"] { font-size: var(--heading-size-md); }\n    &[data-size=\"lg\"] { font-size: var(--heading-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--heading-size-xl); }\n    &[data-size=\"2xl\"] { font-size: var(--heading-size-2xl); }\n    &[data-tone=\"muted\"] { color: var(--heading-tone-muted); }\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,YAAQ;AACR,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,iBAAa,IAAI;AACjB,WAAO,IAAI;AACX,eAAW;AAEX,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAkB,iBAAW,IAAI;AAAoB;AACvD,KAAC,CAAC;AAAmB,iBAAW,IAAI;AAAqB;AACzD,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAuB;AAC3D;AACF;","names":["heading"]}

package/dist/heading.js

@@ -1,4 +1,4 @@
-export { Heading } from './chunk-3GWESUGD.js';
+export { Heading } from './chunk-F3S5BHX2.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=heading.js.map
 //# sourceMappingURL=heading.js.map

package/dist/icon-button.css

@@ -1,4 +1,5 @@
 /* src/icon/Icon.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Icon_icon {
     display: inline-flex;
@@ -24,6 +25,7 @@
 }
 
 /* src/visually-hidden/VisuallyHidden.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .VisuallyHidden_root {
     position: absolute;
@@ -39,6 +41,7 @@
 }
 
 /* src/spinner/Spinner.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Spinner_spinner {
     --_size: var(--spinner-size-md);
@@ -84,6 +87,7 @@
 }
 
 /* src/button/Button.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Button_button {
     display: inline-flex;
@@ -156,12 +160,31 @@
       }
     }
   }
+  .Button_button[data-tone=danger] {
+    &[data-variant=primary] {
+      background-color: var(--button-danger-bg);
+      color: var(--button-danger-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-active);
+      }
+    }
+    &:is([data-variant=secondary], [data-variant=ghost]) {
+      color: var(--button-danger-text);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-quiet-bg-hover);
+      }
+    }
+  }
   .Button_label {
     display: inline-block;
   }
 }
 
 /* src/icon-button/IconButton.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .IconButton_iconButton[data-icon-only] {
     gap: 0;

package/dist/icon-button.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  /* tone=\"danger\", after the variants so it wins at equal specificity plus one attribute. */\n  .button[data-tone=\"danger\"] {\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-danger-bg);\n      color: var(--button-danger-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-active);\n      }\n    }\n\n    &:is([data-variant=\"secondary\"], [data-variant=\"ghost\"]) {\n      color: var(--button-danger-text);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-quiet-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton"]}