@pearpages/pulp-react 0.2.1 → 0.3.0

package/dist/spinner.js

@@ -1,5 +1,5 @@
-export { Spinner } from './chunk-I4KC4V6A.js';
-import './chunk-Z4PN6B2C.js';
+export { Spinner } from './chunk-ZL5MMRLG.js';
+import './chunk-IB5UUE3S.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=spinner.js.map
 //# sourceMappingURL=spinner.js.map

package/dist/stack.css

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

package/dist/stack.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stack/Stack.module.css"],"sourcesContent":["/* Every value is a token (--stack-gap-*). Gap, alignment and justification are data attributes. */\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"],"mappings":";AAEA;AACE,GAACA;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;","names":["stack"]}
+{"version":3,"sources":["../src/stack/Stack.module.css"],"sourcesContent":["/* 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"],"mappings":";AAEA;AAEA;AACE,GAACA;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;","names":["stack"]}

package/dist/stack.js

@@ -1,4 +1,4 @@
-export { Stack } from './chunk-7DS4I7OJ.js';
+export { Stack } from './chunk-2E2ESMS2.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=stack.js.map
 //# sourceMappingURL=stack.js.map

package/dist/switch.css

@@ -1,4 +1,5 @@
 /* src/field/Field.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Field_field {
     display: flex;
@@ -27,6 +28,7 @@
 }
 
 /* src/switch/Switch.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Switch_switch {
     --_size: var(--switch-size-md);

package/dist/switch.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/Field.module.css","../src/switch/Switch.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","/*\n * Every value is a token (--switch-*). The input is the track; its ::before\n * is the thumb. Size and invalid state resolve into private custom\n * properties on the root.\n */\n\n@layer components {\n  .switch {\n    --_size: var(--switch-size-md);\n    --_track: var(--switch-track-bg);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--switch-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--switch-size-lg); }\n    &[data-invalid] { --_track: var(--switch-track-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--switch-gap);\n  }\n\n  .input {\n    --_inset: calc(2 * var(--switch-thumb-inset));\n\n    position: relative;\n    flex: none;\n    inline-size: calc(2 * var(--_size));\n    block-size: var(--_size);\n    margin: 0;\n    border: none;\n    border-radius: var(--switch-radius);\n    background-color: var(--_track);\n    appearance: none;\n    cursor: pointer;\n    transition: background-color var(--switch-motion-duration) var(--motion-easing-standard);\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-block-start: var(--_inset);\n      inset-inline-start: var(--_inset);\n      inline-size: calc(var(--_size) - 2 * var(--_inset));\n      block-size: calc(var(--_size) - 2 * var(--_inset));\n      border-radius: var(--switch-radius);\n      background-color: var(--switch-thumb);\n      transition: translate var(--switch-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      background-color: var(--switch-track-bg-checked);\n\n      &::before {\n        translate: var(--_size) 0;\n        background-color: var(--switch-thumb-checked);\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--switch-focus-ring-width) solid var(--switch-focus-ring);\n      outline-offset: var(--switch-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      background-color: var(--switch-track-bg-hover);\n    }\n\n    &:hover:not(:disabled):checked {\n      background-color: var(--switch-track-bg-checked-hover);\n    }\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;;;ACzBA;AACE,GAACC;AACC,aAAS,IAAI;AACb,cAAU,IAAI;AAEd,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAmB;AACpD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAmB;AACpD,KAAC,CAAC;AAAgB,gBAAU,IAAI;AAAyB;AAC3D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;AAEA,GAACC;AACC,cAAU,KAAK,EAAE,EAAE,IAAI;AAEvB,cAAU;AACV,UAAM;AACN,iBAAa,KAAK,EAAE,EAAE,IAAI;AAC1B,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,0BAA0B,IAAI;AAE/D,KAAC;AACC,eAAS;AACT,gBAAU;AACV,yBAAmB,IAAI;AACvB,0BAAoB,IAAI;AACxB,mBAAa,KAAK,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI;AACzC,kBAAY,KAAK,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI;AACxC,qBAAe,IAAI;AACnB,wBAAkB,IAAI;AACtB,kBAAY,UAAU,IAAI,0BAA0B,IAAI;AAC1D;AAEA,KAAC;AACC,wBAAkB,IAAI;AAEtB,OAAC;AACC,mBAAW,IAAI,SAAS;AACxB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC;AACC,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,UAAU;AACpB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","switch","row","input"]}
+{"version":3,"sources":["../src/field/Field.module.css","../src/switch/Switch.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","/*\n * Every value is a token (--switch-*). The input is the track; its ::before\n * is the thumb. Size and invalid state resolve into private custom\n * properties on the root.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .switch {\n    --_size: var(--switch-size-md);\n    --_track: var(--switch-track-bg);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--switch-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--switch-size-lg); }\n    &[data-invalid] { --_track: var(--switch-track-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--switch-gap);\n  }\n\n  .input {\n    --_inset: calc(2 * var(--switch-thumb-inset));\n\n    position: relative;\n    flex: none;\n    inline-size: calc(2 * var(--_size));\n    block-size: var(--_size);\n    margin: 0;\n    border: none;\n    border-radius: var(--switch-radius);\n    background-color: var(--_track);\n    appearance: none;\n    cursor: pointer;\n    transition: background-color var(--switch-motion-duration) var(--motion-easing-standard);\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-block-start: var(--_inset);\n      inset-inline-start: var(--_inset);\n      inline-size: calc(var(--_size) - 2 * var(--_inset));\n      block-size: calc(var(--_size) - 2 * var(--_inset));\n      border-radius: var(--switch-radius);\n      background-color: var(--switch-thumb);\n      transition: translate var(--switch-motion-duration) var(--motion-easing-standard);\n    }\n\n    &:checked {\n      background-color: var(--switch-track-bg-checked);\n\n      &::before {\n        translate: var(--_size) 0;\n        background-color: var(--switch-thumb-checked);\n      }\n    }\n\n    &:focus-visible {\n      outline: var(--switch-focus-ring-width) solid var(--switch-focus-ring);\n      outline-offset: var(--switch-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked) {\n      background-color: var(--switch-track-bg-hover);\n    }\n\n    &:hover:not(:disabled):checked {\n      background-color: var(--switch-track-bg-checked-hover);\n    }\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;;;AC3BA;AAEA;AACE,GAACC;AACC,aAAS,IAAI;AACb,cAAU,IAAI;AAEd,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAmB;AACpD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAmB;AACpD,KAAC,CAAC;AAAgB,gBAAU,IAAI;AAAyB;AAC3D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;AAEA,GAACC;AACC,cAAU,KAAK,EAAE,EAAE,IAAI;AAEvB,cAAU;AACV,UAAM;AACN,iBAAa,KAAK,EAAE,EAAE,IAAI;AAC1B,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ;AACR,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBAAY,iBAAiB,IAAI,0BAA0B,IAAI;AAE/D,KAAC;AACC,eAAS;AACT,gBAAU;AACV,yBAAmB,IAAI;AACvB,0BAAoB,IAAI;AACxB,mBAAa,KAAK,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI;AACzC,kBAAY,KAAK,IAAI,SAAS,EAAE,EAAE,EAAE,IAAI;AACxC,qBAAe,IAAI;AACnB,wBAAkB,IAAI;AACtB,kBAAY,UAAU,IAAI,0BAA0B,IAAI;AAC1D;AAEA,KAAC;AACC,wBAAkB,IAAI;AAEtB,OAAC;AACC,mBAAW,IAAI,SAAS;AACxB,0BAAkB,IAAI;AACxB;AACF;AAEA,KAAC;AACC,eAAS,IAAI,2BAA2B,MAAM,IAAI;AAClD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,UAAU;AACpB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","switch","row","input"]}

package/dist/switch.js

@@ -1,7 +1,7 @@
-export { Switch } from './chunk-OUFAFINB.js';
-import './chunk-BBV4L5WO.js';
-import './chunk-2PXTVZ7H.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Switch } from './chunk-CLE2QGCU.js';
+import './chunk-Q6SYKNZ5.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=switch.js.map
 //# sourceMappingURL=switch.js.map

package/dist/table.css

@@ -1,4 +1,5 @@
 /* src/visually-hidden/VisuallyHidden.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .VisuallyHidden_root {
     position: absolute;
@@ -14,6 +15,7 @@
 }
 
 /* src/table/Table.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Table_container {
     overflow: auto;

package/dist/table.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/table/Table.module.css"],"sourcesContent":["/* 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","/*\n * Every value is a token (--table-*). Density resolves the row padding into a\n * private custom property on the table. React Aria writes the state:\n * data-hovered, data-selected, data-disabled, data-focus-visible on rows and\n * cells; data-allows-sorting and data-sort-direction on columns;\n * data-selected and data-indeterminate on the selection checkbox.\n * Rules are ordered from general to specific so no later selector has a lower\n * specificity than an earlier one for the same element.\n */\n\n@layer components {\n  .container {\n    overflow: auto;\n    border: var(--size-hairline) solid var(--table-border);\n    border-radius: var(--table-radius);\n    background-color: var(--table-bg);\n    color: var(--table-fg);\n    font-family: var(--table-font-family);\n    font-size: var(--table-font-size);\n  }\n\n  .table {\n    --_padding-block: var(--table-cell-padding-block-default);\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    outline: none;\n\n    &[data-density=\"compact\"] {\n      --_padding-block: var(--table-cell-padding-block-compact);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .header {\n    background-color: var(--table-header-bg);\n  }\n\n  .container[data-sticky-header] .header {\n    position: sticky;\n    inset-block-start: 0;\n  }\n\n  .column {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    border-block-end: var(--size-hairline) solid var(--table-border);\n    color: var(--table-header-fg);\n    font-size: var(--table-header-font-size);\n    font-weight: var(--table-header-font-weight);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n    }\n\n    &[data-allows-sorting] {\n      cursor: pointer;\n    }\n\n    &[data-allows-sorting]::after {\n      content: \"\";\n      display: inline-block;\n      inline-size: var(--table-header-sort-indicator-size);\n      block-size: var(--table-header-sort-indicator-size);\n      margin-inline-start: var(--table-header-sort-indicator-size);\n      border-inline-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      border-block-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      rotate: -135deg;\n      translate: 0 25%;\n      opacity: 0;\n      transition: opacity var(--table-motion-duration) var(--motion-easing-standard);\n    }\n\n    &[data-hovered]::after {\n      opacity: 0.5;\n    }\n\n    &[data-sort-direction] {\n      color: var(--table-header-fg-active);\n    }\n\n    &[data-sort-direction]::after {\n      color: var(--table-header-sort-indicator);\n      opacity: 1;\n    }\n\n    &[data-sort-direction=\"descending\"]::after {\n      rotate: 45deg;\n      translate: 0 -25%;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .row {\n    outline: none;\n    transition: background-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--table-row-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--table-row-bg-selected);\n    }\n\n    &[data-disabled] {\n      color: var(--table-row-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .cell {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n      font-variant-numeric: tabular-nums;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .body .row:not(:last-child) .cell {\n    border-block-end: var(--size-hairline) solid var(--table-border);\n  }\n\n  .selectColumn,\n  .selectCell {\n    inline-size: var(--table-select-size);\n    padding-inline-end: 0;\n  }\n\n  .selectBox {\n    display: grid;\n    place-content: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    border: var(--size-hairline) solid var(--table-select-border);\n    border-radius: var(--table-select-radius);\n    background-color: var(--table-select-bg);\n    transition:\n      background-color var(--table-motion-duration) var(--motion-easing-standard),\n      border-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--table-select-size) * 0.3);\n      block-size: calc(var(--table-select-size) * 0.55);\n      border-style: solid;\n      border-color: var(--table-select-check);\n      border-width: 0 var(--table-select-check-width) var(--table-select-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n  }\n\n  .select {\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    cursor: pointer;\n\n    &[data-focus-visible] .selectBox {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: var(--table-focus-ring-offset);\n    }\n\n    &[data-selected] .selectBox,\n    &[data-indeterminate] .selectBox {\n      border-color: var(--table-select-bg-checked);\n      background-color: var(--table-select-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &[data-indeterminate] .selectBox::after {\n      inline-size: calc(var(--table-select-size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--table-select-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n  }\n\n  .empty {\n    padding: var(--table-empty-padding);\n    color: var(--table-empty-fg);\n    text-align: center;\n  }\n}\n"],"mappings":"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","names":["root","container","table","header","column","row","cell","body","selectColumn","selectCell","selectBox","select","empty"]}
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css","../src/table/Table.module.css"],"sourcesContent":["/* 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","/*\n * Every value is a token (--table-*). Density resolves the row padding into a\n * private custom property on the table. React Aria writes the state:\n * data-hovered, data-selected, data-disabled, data-focus-visible on rows and\n * cells; data-allows-sorting and data-sort-direction on columns;\n * data-selected and data-indeterminate on the selection checkbox.\n * Rules are ordered from general to specific so no later selector has a lower\n * specificity than an earlier one for the same element.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .container {\n    overflow: auto;\n    border: var(--size-hairline) solid var(--table-border);\n    border-radius: var(--table-radius);\n    background-color: var(--table-bg);\n    color: var(--table-fg);\n    font-family: var(--table-font-family);\n    font-size: var(--table-font-size);\n  }\n\n  .table {\n    --_padding-block: var(--table-cell-padding-block-default);\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    outline: none;\n\n    &[data-density=\"compact\"] {\n      --_padding-block: var(--table-cell-padding-block-compact);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .header {\n    background-color: var(--table-header-bg);\n  }\n\n  .container[data-sticky-header] .header {\n    position: sticky;\n    inset-block-start: 0;\n  }\n\n  .column {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    border-block-end: var(--size-hairline) solid var(--table-border);\n    color: var(--table-header-fg);\n    font-size: var(--table-header-font-size);\n    font-weight: var(--table-header-font-weight);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n    }\n\n    &[data-allows-sorting] {\n      cursor: pointer;\n    }\n\n    &[data-allows-sorting]::after {\n      content: \"\";\n      display: inline-block;\n      inline-size: var(--table-header-sort-indicator-size);\n      block-size: var(--table-header-sort-indicator-size);\n      margin-inline-start: var(--table-header-sort-indicator-size);\n      border-inline-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      border-block-end: var(--table-header-sort-indicator-width) solid currentcolor;\n      rotate: -135deg;\n      translate: 0 25%;\n      opacity: 0;\n      transition: opacity var(--table-motion-duration) var(--motion-easing-standard);\n    }\n\n    &[data-hovered]::after {\n      opacity: 0.5;\n    }\n\n    &[data-sort-direction] {\n      color: var(--table-header-fg-active);\n    }\n\n    &[data-sort-direction]::after {\n      color: var(--table-header-sort-indicator);\n      opacity: 1;\n    }\n\n    &[data-sort-direction=\"descending\"]::after {\n      rotate: 45deg;\n      translate: 0 -25%;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .row {\n    outline: none;\n    transition: background-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &[data-hovered] {\n      background-color: var(--table-row-bg-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--table-row-bg-selected);\n    }\n\n    &[data-disabled] {\n      color: var(--table-row-fg-disabled);\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .cell {\n    padding-block: var(--_padding-block);\n    padding-inline: var(--table-cell-padding-inline);\n    outline: none;\n\n    &[data-align=\"end\"] {\n      text-align: end;\n      font-variant-numeric: tabular-nums;\n    }\n\n    &[data-focus-visible] {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: calc(-1 * var(--table-focus-ring-width));\n    }\n  }\n\n  .body .row:not(:last-child) .cell {\n    border-block-end: var(--size-hairline) solid var(--table-border);\n  }\n\n  .selectColumn,\n  .selectCell {\n    inline-size: var(--table-select-size);\n    padding-inline-end: 0;\n  }\n\n  .selectBox {\n    display: grid;\n    place-content: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    border: var(--size-hairline) solid var(--table-select-border);\n    border-radius: var(--table-select-radius);\n    background-color: var(--table-select-bg);\n    transition:\n      background-color var(--table-motion-duration) var(--motion-easing-standard),\n      border-color var(--table-motion-duration) var(--motion-easing-standard);\n\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--table-select-size) * 0.3);\n      block-size: calc(var(--table-select-size) * 0.55);\n      border-style: solid;\n      border-color: var(--table-select-check);\n      border-width: 0 var(--table-select-check-width) var(--table-select-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n  }\n\n  .select {\n    display: inline-grid;\n    place-items: center;\n    inline-size: var(--table-select-size);\n    block-size: var(--table-select-size);\n    cursor: pointer;\n\n    &[data-focus-visible] .selectBox {\n      outline: var(--table-focus-ring-width) solid var(--table-focus-ring);\n      outline-offset: var(--table-focus-ring-offset);\n    }\n\n    &[data-selected] .selectBox,\n    &[data-indeterminate] .selectBox {\n      border-color: var(--table-select-bg-checked);\n      background-color: var(--table-select-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &[data-indeterminate] .selectBox::after {\n      inline-size: calc(var(--table-select-size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--table-select-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n  }\n\n  .empty {\n    padding: var(--table-empty-padding);\n    color: var(--table-empty-fg);\n    text-align: center;\n  }\n}\n"],"mappings":"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","names":["root","container","table","header","column","row","cell","body","selectColumn","selectCell","selectBox","select","empty"]}

package/dist/table.js

@@ -1,6 +1,6 @@
-export { Table } from './chunk-7RQQASKS.js';
+"use client";export { Table } from './chunk-XGWFTFGR.js';
 import './chunk-CZBCGLEM.js';
-import './chunk-Z4PN6B2C.js';
+import './chunk-IB5UUE3S.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=table.js.map
 //# sourceMappingURL=table.js.map

package/dist/tabs.css

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

package/dist/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tabs/Tabs.module.css"],"sourcesContent":["/* Every value is a token (--tabs-*). The indicator is a logical border on the active tab, so vertical orientation just flips the side. */\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: row;\n    }\n  }\n\n  .list {\n    display: flex;\n    gap: var(--tabs-gap);\n    border-block-end: 1px solid var(--tabs-list-border);\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: column;\n      border-block-end: none;\n      border-inline-end: 1px solid var(--tabs-list-border);\n    }\n  }\n\n  .tab {\n    position: relative;\n    padding-block: var(--tabs-tab-padding-block);\n    padding-inline: var(--tabs-tab-padding-inline);\n    border: none;\n    border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;\n    background-color: transparent;\n    color: var(--tabs-tab-fg);\n    font-size: var(--tabs-tab-font-size);\n    font-weight: var(--tabs-tab-font-weight);\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    transition:\n      color var(--tabs-motion-duration) var(--motion-easing-standard),\n      background-color var(--tabs-motion-duration) var(--motion-easing-standard);\n\n    /* Indicator: a transparent border always present, coloured when active, so nothing shifts. */\n    border-block-end: 2px solid transparent;\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: calc(-1 * var(--tabs-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-state=\"active\"] {\n      color: var(--tabs-tab-fg-active);\n      border-block-end-color: var(--tabs-tab-indicator);\n    }\n\n    &:hover:not(:disabled, [data-state=\"active\"]) {\n      color: var(--tabs-tab-fg-hover);\n      background-color: var(--tabs-tab-bg-hover);\n    }\n  }\n\n  .list[data-orientation=\"vertical\"] .tab {\n    border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);\n    border-block-end: none;\n    border-inline-end: 2px solid transparent;\n    text-align: start;\n\n    &[data-state=\"active\"] {\n      border-inline-end-color: var(--tabs-tab-indicator);\n    }\n  }\n\n  .panel {\n    padding-block: var(--tabs-panel-padding-block);\n    color: var(--tabs-panel-fg);\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: var(--tabs-focus-ring-offset);\n    }\n  }\n\n  .root[data-orientation=\"vertical\"] .panel {\n    padding-block: 0;\n    padding-inline-start: var(--tabs-tab-padding-inline);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK;AAEL,KAAC,CAAC;AACA,sBAAgB;AAClB;AACF;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAEhC,KAAC,CAAC;AACA,sBAAgB;AAChB,wBAAkB;AAClB,yBAAmB,IAAI,MAAM,IAAI;AACnC;AACF;AAEA,GAACC;AACC,cAAU;AACV,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,mBAAe,IAAI,mBAAmB,IAAI,mBAAmB,EAAE;AAC/D,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,iBAAa;AACb,YAAQ;AACR,gBACE,MAAM,IAAI,wBAAwB,IAAI,yBAAyB,EAC/D,iBAAiB,IAAI,wBAAwB,IAAI;AAGnD,sBAAkB,IAAI,MAAM;AAE5B,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,8BAAwB,IAAI;AAC9B;AAEA,KAAC,MAAM,KAAK,WAAW,CAAC;AACtB,aAAO,IAAI;AACX,wBAAkB,IAAI;AACxB;AACF;AAEA,GArDCD,SAqDI,CAAC,2BAA6B,CAzClCC;AA0CC,mBAAe,IAAI,mBAAmB,EAAE,EAAE,IAAI;AAC9C,sBAAkB;AAClB,uBAAmB,IAAI,MAAM;AAC7B,gBAAY;AAEZ,KAAC,CAAC;AACA,+BAAyB,IAAI;AAC/B;AACF;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,WAAO,IAAI;AAEX,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GApFCH,SAoFI,CAAC,2BAA6B,CAVlCG;AAWC,mBAAe;AACf,0BAAsB,IAAI;AAC5B;AACF;","names":["root","list","tab","panel"]}
+{"version":3,"sources":["../src/tabs/Tabs.module.css"],"sourcesContent":["/* Every value is a token (--tabs-*). The indicator is a logical border on the active tab, so vertical orientation just flips the side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: row;\n    }\n  }\n\n  .list {\n    display: flex;\n    gap: var(--tabs-gap);\n    border-block-end: 1px solid var(--tabs-list-border);\n\n    &[data-orientation=\"vertical\"] {\n      flex-direction: column;\n      border-block-end: none;\n      border-inline-end: 1px solid var(--tabs-list-border);\n    }\n  }\n\n  .tab {\n    position: relative;\n    padding-block: var(--tabs-tab-padding-block);\n    padding-inline: var(--tabs-tab-padding-inline);\n    border: none;\n    border-radius: var(--tabs-tab-radius) var(--tabs-tab-radius) 0 0;\n    background-color: transparent;\n    color: var(--tabs-tab-fg);\n    font-size: var(--tabs-tab-font-size);\n    font-weight: var(--tabs-tab-font-weight);\n    line-height: 1;\n    white-space: nowrap;\n    cursor: pointer;\n    transition:\n      color var(--tabs-motion-duration) var(--motion-easing-standard),\n      background-color var(--tabs-motion-duration) var(--motion-easing-standard);\n\n    /* Indicator: a transparent border always present, coloured when active, so nothing shifts. */\n    border-block-end: 2px solid transparent;\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: calc(-1 * var(--tabs-focus-ring-offset));\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-state=\"active\"] {\n      color: var(--tabs-tab-fg-active);\n      border-block-end-color: var(--tabs-tab-indicator);\n    }\n\n    &:hover:not(:disabled, [data-state=\"active\"]) {\n      color: var(--tabs-tab-fg-hover);\n      background-color: var(--tabs-tab-bg-hover);\n    }\n  }\n\n  .list[data-orientation=\"vertical\"] .tab {\n    border-radius: var(--tabs-tab-radius) 0 0 var(--tabs-tab-radius);\n    border-block-end: none;\n    border-inline-end: 2px solid transparent;\n    text-align: start;\n\n    &[data-state=\"active\"] {\n      border-inline-end-color: var(--tabs-tab-indicator);\n    }\n  }\n\n  .panel {\n    padding-block: var(--tabs-panel-padding-block);\n    color: var(--tabs-panel-fg);\n\n    &:focus-visible {\n      outline: var(--tabs-focus-ring-width) solid var(--tabs-focus-ring);\n      outline-offset: var(--tabs-focus-ring-offset);\n    }\n  }\n\n  .root[data-orientation=\"vertical\"] .panel {\n    padding-block: 0;\n    padding-inline-start: var(--tabs-tab-padding-inline);\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK;AAEL,KAAC,CAAC;AACA,sBAAgB;AAClB;AACF;AAEA,GAACC;AACC,aAAS;AACT,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAEhC,KAAC,CAAC;AACA,sBAAgB;AAChB,wBAAkB;AAClB,yBAAmB,IAAI,MAAM,IAAI;AACnC;AACF;AAEA,GAACC;AACC,cAAU;AACV,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ;AACR,mBAAe,IAAI,mBAAmB,IAAI,mBAAmB,EAAE;AAC/D,sBAAkB;AAClB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AACb,iBAAa;AACb,YAAQ;AACR,gBACE,MAAM,IAAI,wBAAwB,IAAI,yBAAyB,EAC/D,iBAAiB,IAAI,wBAAwB,IAAI;AAGnD,sBAAkB,IAAI,MAAM;AAE5B,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,CAAC;AACA,aAAO,IAAI;AACX,8BAAwB,IAAI;AAC9B;AAEA,KAAC,MAAM,KAAK,WAAW,CAAC;AACtB,aAAO,IAAI;AACX,wBAAkB,IAAI;AACxB;AACF;AAEA,GArDCD,SAqDI,CAAC,2BAA6B,CAzClCC;AA0CC,mBAAe,IAAI,mBAAmB,EAAE,EAAE,IAAI;AAC9C,sBAAkB;AAClB,uBAAmB,IAAI,MAAM;AAC7B,gBAAY;AAEZ,KAAC,CAAC;AACA,+BAAyB,IAAI;AAC/B;AACF;AAEA,GAACC;AACC,mBAAe,IAAI;AACnB,WAAO,IAAI;AAEX,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AACF;AAEA,GApFCH,SAoFI,CAAC,2BAA6B,CAVlCG;AAWC,mBAAe;AACf,0BAAsB,IAAI;AAC5B;AACF;","names":["root","list","tab","panel"]}

package/dist/tabs.js

@@ -1,4 +1,4 @@
-export { Tabs } from './chunk-FH54XQ35.js';
+"use client";export { Tabs } from './chunk-2IYYES7V.js';
 import './chunk-I5OZ63W7.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=tabs.js.map

package/dist/text-field.css

@@ -1,4 +1,5 @@
 /* src/field/Field.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Field_field {
     display: flex;
@@ -27,6 +28,7 @@
 }
 
 /* src/text-field/TextField.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .TextField_field {
     font-family: var(--text-field-font-family);
@@ -71,5 +73,68 @@
   .TextField_field[data-invalid] .TextField_input {
     border-color: var(--text-field-border-invalid);
   }
+  .TextField_hiddenLabel {
+    position: absolute;
+    inline-size: var(--size-hairline);
+    block-size: var(--size-hairline);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .TextField_control {
+    --_slot: var(--text-field-height-md);
+    display: grid;
+    position: relative;
+    align-items: center;
+    .TextField_field[data-size=sm] & {
+      --_slot: var(--text-field-height-sm);
+    }
+    .TextField_field[data-size=lg] & {
+      --_slot: var(--text-field-height-lg);
+    }
+  }
+  .TextField_inControl {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+  .TextField_control[data-icon] .TextField_inControl {
+    padding-inline-start: calc(var(--text-field-padding-inline) + 1em + var(--text-field-icon-gap));
+  }
+  .TextField_control[data-clearable] .TextField_inControl {
+    padding-inline-end: var(--_slot);
+  }
+  .TextField_icon {
+    display: inline-flex;
+    grid-area: 1 / 1;
+    justify-self: start;
+    margin-inline-start: var(--text-field-padding-inline);
+    color: var(--text-field-icon-fg);
+    pointer-events: none;
+  }
+  .TextField_clear {
+    display: inline-flex;
+    grid-area: 1 / 1;
+    align-items: center;
+    justify-content: center;
+    justify-self: end;
+    inline-size: var(--_slot);
+    block-size: var(--_slot);
+    padding: 0;
+    border: 0;
+    border-radius: var(--text-field-radius);
+    background: transparent;
+    color: var(--text-field-icon-fg);
+    cursor: pointer;
+    &:hover {
+      color: var(--text-field-icon-fg-hover);
+    }
+    &:focus-visible {
+      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);
+      outline-offset: calc(-1 * var(--text-field-focus-ring-width));
+    }
+  }
 }
 /*# sourceMappingURL=text-field.css.map */

package/dist/text-field.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/Field.module.css","../src/text-field/TextField.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","/*\n * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer components {\n  .field {\n    font-family: var(--text-field-font-family);\n  }\n\n  .input {\n    min-block-size: var(--text-field-height-md);\n    padding-block: 0;\n    padding-inline: var(--text-field-padding-inline);\n    border: 1px solid var(--text-field-border-default);\n    border-radius: var(--text-field-radius);\n    background-color: var(--text-field-bg);\n    color: var(--text-field-fg);\n    font-size: var(--text-field-font-size-md);\n    transition:\n      border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n      background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--text-field-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--text-field-border-focus);\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: var(--text-field-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--text-field-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .input {\n    min-block-size: var(--text-field-height-sm);\n    font-size: var(--text-field-font-size-sm);\n  }\n\n  .field[data-size=\"lg\"] .input {\n    min-block-size: var(--text-field-height-lg);\n    font-size: var(--text-field-font-size-lg);\n  }\n\n  .field[data-invalid] .input {\n    border-color: var(--text-field-border-invalid);\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;;;ACzBA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM,IAAI;AACtB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBACE,aAAa,IAAI,8BAA8B,IAAI,yBAAyB,EAC5E,iBAAiB,IAAI,8BAA8B,IAAI;AAEzD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GAzCCD,eAyCK,CAAC,cAAgB,CArCtBC;AAsCC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GA9CCD,eA8CK,CAAC,cAAgB,CA1CtBC;AA2CC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GAnDCD,eAmDK,CAAC,cAAc,CA/CpBC;AAgDC,kBAAc,IAAI;AACpB;AACF;","names":["field","label","required","description","error","field","input"]}
+{"version":3,"sources":["../src/field/Field.module.css","../src/text-field/TextField.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","/*\n * The input's own styles (--text-field-*). Label, description and error come\n * from Field. State lives on the wrapper as data attributes and on the input\n * as native pseudo-classes.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    font-family: var(--text-field-font-family);\n  }\n\n  .input {\n    min-block-size: var(--text-field-height-md);\n    padding-block: 0;\n    padding-inline: var(--text-field-padding-inline);\n    border: 1px solid var(--text-field-border-default);\n    border-radius: var(--text-field-radius);\n    background-color: var(--text-field-bg);\n    color: var(--text-field-fg);\n    font-size: var(--text-field-font-size-md);\n    transition:\n      border-color var(--text-field-motion-duration) var(--motion-easing-standard),\n      background-color var(--text-field-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--text-field-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--text-field-border-focus);\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: var(--text-field-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--text-field-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .input {\n    min-block-size: var(--text-field-height-sm);\n    font-size: var(--text-field-font-size-sm);\n  }\n\n  .field[data-size=\"lg\"] .input {\n    min-block-size: var(--text-field-height-lg);\n    font-size: var(--text-field-font-size-lg);\n  }\n\n  .field[data-invalid] .input {\n    border-color: var(--text-field-border-invalid);\n  }\n\n  .hiddenLabel {\n    position: absolute;\n    inline-size: var(--size-hairline);\n    block-size: var(--size-hairline);\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  /* Only when there is an icon or a clear button: the input keeps its own box, they sit over its padding. */\n  .control {\n    --_slot: var(--text-field-height-md);\n\n    display: grid;\n    position: relative;\n    align-items: center;\n\n    .field[data-size=\"sm\"] & {\n      --_slot: var(--text-field-height-sm);\n    }\n\n    .field[data-size=\"lg\"] & {\n      --_slot: var(--text-field-height-lg);\n    }\n\n  }\n\n  /* The input inside .control: a class of its own, so these rules do not race the .input states above. */\n  .inControl {\n    grid-area: 1 / 1;\n    inline-size: 100%;\n\n    /* The browser's own clear control would be a second, unnamed one. */\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n  }\n\n  .control[data-icon] .inControl {\n    padding-inline-start: calc(var(--text-field-padding-inline) + 1em + var(--text-field-icon-gap));\n  }\n\n  .control[data-clearable] .inControl {\n    padding-inline-end: var(--_slot);\n  }\n\n  .icon {\n    display: inline-flex;\n    grid-area: 1 / 1;\n    justify-self: start;\n    margin-inline-start: var(--text-field-padding-inline);\n    color: var(--text-field-icon-fg);\n    pointer-events: none;\n  }\n\n  .clear {\n    display: inline-flex;\n    grid-area: 1 / 1;\n    align-items: center;\n    justify-content: center;\n    justify-self: end;\n    inline-size: var(--_slot);\n    block-size: var(--_slot);\n    padding: 0;\n    border: 0;\n    border-radius: var(--text-field-radius);\n    background: transparent;\n    color: var(--text-field-icon-fg);\n    cursor: pointer;\n\n    &:hover {\n      color: var(--text-field-icon-fg-hover);\n    }\n\n    &:focus-visible {\n      outline: var(--text-field-focus-ring-width) solid var(--text-field-focus-ring);\n      outline-offset: calc(-1 * var(--text-field-focus-ring-width));\n    }\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;;;AC3BA;AAEA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,MAAM,IAAI;AACtB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,gBACE,aAAa,IAAI,8BAA8B,IAAI,yBAAyB,EAC5E,iBAAiB,IAAI,8BAA8B,IAAI;AAEzD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GAzCCD,eAyCK,CAAC,cAAgB,CArCtBC;AAsCC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GA9CCD,eA8CK,CAAC,cAAgB,CA1CtBC;AA2CC,oBAAgB,IAAI;AACpB,eAAW,IAAI;AACjB;AAEA,GAnDCD,eAmDK,CAAC,cAAc,CA/CpBC;AAgDC,kBAAc,IAAI;AACpB;AAEA,GAACC;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACf;AAGA,GAACC;AACC,aAAS,IAAI;AAEb,aAAS;AACT,cAAU;AACV,iBAAa;AAEb,KAxEDH,eAwEO,CAAC,cAAgB;AACrB,eAAS,IAAI;AACf;AAEA,KA5EDA,eA4EO,CAAC,cAAgB;AACrB,eAAS,IAAI;AACf;AAEF;AAGA,GAACI;AACC,eAAW,EAAE,EAAE;AACf,iBAAa;AAGb,KAAC;AACC,eAAS;AACX;AACF;AAEA,GA5BCD,iBA4BO,CAAC,WAAW,CAVnBC;AAWC,0BAAsB,KAAK,IAAI,6BAA6B,EAAE,IAAI,EAAE,IAAI;AAC1E;AAEA,GAhCCD,iBAgCO,CAAC,gBAAgB,CAdxBC;AAeC,wBAAoB,IAAI;AAC1B;AAEA,GAACC;AACC,aAAS;AACT,eAAW,EAAE,EAAE;AACf,kBAAc;AACd,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACX,oBAAgB;AAClB;AAEA,GAACC;AACC,aAAS;AACT,eAAW,EAAE,EAAE;AACf,iBAAa;AACb,qBAAiB;AACjB,kBAAc;AACd,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,mBAAe,IAAI;AACnB,gBAAY;AACZ,WAAO,IAAI;AACX,YAAQ;AAER,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,eAAS,IAAI,+BAA+B,MAAM,IAAI;AACtD,sBAAgB,KAAK,GAAG,EAAE,IAAI;AAChC;AACF;AACF;","names":["field","label","required","description","error","field","input","hiddenLabel","control","inControl","icon","clear"]}

package/dist/text-field.d.ts

@@ -12,6 +12,18 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
      * `data-invalid`) and the message is announced as an alert.
      */
     error?: ReactNode;
+    /** Keeps the label for assistive technology only. For a search box that a heading or its place in the page already names. @default false */
+    hideLabel?: boolean;
+    /** A decorative glyph inside the field, before the text. `type="search"` gets the Search glyph unless you pass another (or `null`). */
+    iconStart?: ReactNode;
+    /**
+     * Adds a clear button that appears once the field has a value. Called when it
+     * is pressed and when Escape is pressed with a value. Controlled: set your
+     * value to `''` here. Uncontrolled: the input is emptied for you.
+     */
+    onClear?: () => void;
+    /** The clear button's name, for other languages. @default 'Clear' */
+    clearLabel?: string;
     /** @default 'md' */
     size?: TextFieldSize;
     /** The `<input>` element. */
@@ -29,13 +41,14 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'si
  *
  * @status stable
  * @category Forms
- * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies.
+ * @accessibility A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies. `hideLabel` hides the label visually, never from assistive technology. The leading icon is decorative. The clear button is a real `button` named by `clearLabel`, after the input in the tab order, present only while there is a value; pressing it (or Escape in the field) empties the field and leaves focus in the input. `type="search"` gives the input the `searchbox` role; wrap the form in `<search>` or `role="search"` yourself when it is the page's search.
  * @do Always pass `label`; use a visible one.
  * Prefer `error` text that says how to fix the value.
+ * @do For a search box: `type="search"`, `hideLabel` if a heading names it, and `onClear`.
  * @dont Use `placeholder` as the label.
  * Use it for multi-line text; use Textarea.
  */
-declare function TextField({ label, description, error, size, required, disabled, readOnly, id, className, ref, 'aria-describedby': describedBy, ...rest }: TextFieldProps): react.JSX.Element;
+declare function TextField({ label, description, error, hideLabel, iconStart, onClear, clearLabel, size, type, value, defaultValue, onChange, onKeyDown, required, disabled, readOnly, id, className, ref, 'aria-describedby': describedBy, ...rest }: TextFieldProps): react.JSX.Element;
 declare namespace TextField {
     var displayName: string;
 }

package/dist/text-field.js

@@ -1,6 +1,6 @@
-export { TextField } from './chunk-MXWXJZFS.js';
-import './chunk-2PXTVZ7H.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { TextField } from './chunk-S632WN4W.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=text-field.js.map
 //# sourceMappingURL=text-field.js.map

package/dist/text.css

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

package/dist/text.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/text/Text.module.css"],"sourcesContent":["/* Every value is a token (--text-*). Variants are data attributes. */\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"],"mappings":";AAEA;AACE,GAACA;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;","names":["text"]}
+{"version":3,"sources":["../src/text/Text.module.css"],"sourcesContent":["/* 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"],"mappings":";AAEA;AAEA;AACE,GAACA;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;","names":["text"]}

package/dist/text.js

@@ -1,4 +1,4 @@
-export { Text } from './chunk-2ZP4ZBI5.js';
+export { Text } from './chunk-LKWZZIRZ.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=text.js.map
 //# sourceMappingURL=text.js.map

package/dist/textarea.css

@@ -1,4 +1,5 @@
 /* src/field/Field.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Field_field {
     display: flex;
@@ -27,6 +28,7 @@
 }
 
 /* src/textarea/Textarea.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Textarea_field {
     font-family: var(--textarea-font-family);

package/dist/textarea.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/field/Field.module.css","../src/textarea/Textarea.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","/* Every value is a token (--textarea-*). Label, description and error come from Field. */\n\n@layer components {\n  .field {\n    font-family: var(--textarea-font-family);\n  }\n\n  .textarea {\n    min-block-size: var(--textarea-min-height);\n    padding-block: var(--textarea-padding-block);\n    padding-inline: var(--textarea-padding-inline);\n    border: var(--size-hairline) solid var(--textarea-border-default);\n    border-radius: var(--textarea-radius);\n    background-color: var(--textarea-bg);\n    color: var(--textarea-fg);\n    font-size: var(--textarea-font-size-md);\n    line-height: var(--textarea-line-height);\n    resize: vertical;\n    transition:\n      border-color var(--textarea-motion-duration) var(--motion-easing-standard),\n      background-color var(--textarea-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--textarea-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--textarea-border-focus);\n      outline: var(--textarea-focus-ring-width) solid var(--textarea-focus-ring);\n      outline-offset: var(--textarea-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--textarea-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .textarea { font-size: var(--textarea-font-size-sm); }\n  .field[data-size=\"lg\"] .textarea { font-size: var(--textarea-font-size-lg); }\n  .field[data-resize=\"none\"] .textarea { resize: none; }\n  .field[data-resize=\"both\"] .textarea { resize: both; }\n  .field[data-auto-grow] .textarea { field-sizing: content; }\n  .field[data-invalid] .textarea { border-color: var(--textarea-border-invalid); }\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;;;AC7BA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,YAAQ;AACR,gBACE,aAAa,IAAI,4BAA4B,IAAI,yBAAyB,EAC1E,iBAAiB,IAAI,4BAA4B,IAAI;AAEvD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GA3CCD,cA2CK,CAAC,cAAgB,CAvCtBC;AAuCkC,eAAW,IAAI;AAA0B;AAC5E,GA5CCD,cA4CK,CAAC,cAAgB,CAxCtBC;AAwCkC,eAAW,IAAI;AAA0B;AAC5E,GA7CCD,cA6CK,CAAC,kBAAoB,CAzC1BC;AAyCsC,YAAQ;AAAM;AACrD,GA9CCD,cA8CK,CAAC,kBAAoB,CA1C1BC;AA0CsC,YAAQ;AAAM;AACrD,GA/CCD,cA+CK,CAAC,gBAAgB,CA3CtBC;AA2CkC,kBAAc;AAAS;AAC1D,GAhDCD,cAgDK,CAAC,cAAc,CA5CpBC;AA4CgC,kBAAc,IAAI;AAA4B;AACjF;","names":["field","label","required","description","error","field","textarea"]}
+{"version":3,"sources":["../src/field/Field.module.css","../src/textarea/Textarea.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","/* Every value is a token (--textarea-*). Label, description and error come from Field. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    font-family: var(--textarea-font-family);\n  }\n\n  .textarea {\n    min-block-size: var(--textarea-min-height);\n    padding-block: var(--textarea-padding-block);\n    padding-inline: var(--textarea-padding-inline);\n    border: var(--size-hairline) solid var(--textarea-border-default);\n    border-radius: var(--textarea-radius);\n    background-color: var(--textarea-bg);\n    color: var(--textarea-fg);\n    font-size: var(--textarea-font-size-md);\n    line-height: var(--textarea-line-height);\n    resize: vertical;\n    transition:\n      border-color var(--textarea-motion-duration) var(--motion-easing-standard),\n      background-color var(--textarea-motion-duration) var(--motion-easing-standard);\n\n    &::placeholder {\n      color: var(--textarea-placeholder);\n    }\n\n    &:focus-visible {\n      border-color: var(--textarea-border-focus);\n      outline: var(--textarea-focus-ring-width) solid var(--textarea-focus-ring);\n      outline-offset: var(--textarea-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:read-only:not(:disabled) {\n      background-color: var(--color-surface-sunken);\n    }\n\n    &:hover:not(:disabled, :focus-visible) {\n      border-color: var(--textarea-border-hover);\n    }\n  }\n\n  .field[data-size=\"sm\"] .textarea { font-size: var(--textarea-font-size-sm); }\n  .field[data-size=\"lg\"] .textarea { font-size: var(--textarea-font-size-lg); }\n  .field[data-resize=\"none\"] .textarea { resize: none; }\n  .field[data-resize=\"both\"] .textarea { resize: both; }\n  .field[data-auto-grow] .textarea { field-sizing: content; }\n  .field[data-invalid] .textarea { border-color: var(--textarea-border-invalid); }\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;;;AC/BA;AAEA;AACE,GAACC;AACC,iBAAa,IAAI;AACnB;AAEA,GAACC;AACC,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,YAAQ;AACR,gBACE,aAAa,IAAI,4BAA4B,IAAI,yBAAyB,EAC1E,iBAAiB,IAAI,4BAA4B,IAAI;AAEvD,KAAC;AACC,aAAO,IAAI;AACb;AAEA,KAAC;AACC,oBAAc,IAAI;AAClB,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,UAAU,KAAK;AACd,wBAAkB,IAAI;AACxB;AAEA,KAAC,MAAM,KAAK,WAAW;AACrB,oBAAc,IAAI;AACpB;AACF;AAEA,GA3CCD,cA2CK,CAAC,cAAgB,CAvCtBC;AAuCkC,eAAW,IAAI;AAA0B;AAC5E,GA5CCD,cA4CK,CAAC,cAAgB,CAxCtBC;AAwCkC,eAAW,IAAI;AAA0B;AAC5E,GA7CCD,cA6CK,CAAC,kBAAoB,CAzC1BC;AAyCsC,YAAQ;AAAM;AACrD,GA9CCD,cA8CK,CAAC,kBAAoB,CA1C1BC;AA0CsC,YAAQ;AAAM;AACrD,GA/CCD,cA+CK,CAAC,gBAAgB,CA3CtBC;AA2CkC,kBAAc;AAAS;AAC1D,GAhDCD,cAgDK,CAAC,cAAc,CA5CpBC;AA4CgC,kBAAc,IAAI;AAA4B;AACjF;","names":["field","label","required","description","error","field","textarea"]}

package/dist/textarea.js

@@ -1,6 +1,6 @@
-export { Textarea } from './chunk-TGMDOQCL.js';
-import './chunk-2PXTVZ7H.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Textarea } from './chunk-VS2HPJIX.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=textarea.js.map
 //# sourceMappingURL=textarea.js.map

package/dist/toast.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;
@@ -177,6 +200,7 @@
 }
 
 /* src/alert/Alert.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Alert_alert {
     --_bg: var(--alert-info-bg);
@@ -246,6 +270,7 @@
 }
 
 /* src/toast/Toast.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
 @layer components {
   .Toast_region {
     --_top: auto;

package/dist/toast.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","../src/alert/Alert.module.css","../src/toast/Toast.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","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer components {\n  .region {\n    --_top: auto;\n    --_end: var(--toast-offset);\n    --_bottom: var(--toast-offset);\n    --_start: auto;\n\n    position: fixed;\n    z-index: var(--toast-layer);\n    inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n    inline-size: min(var(--toast-width), 100vw);\n    padding: 0;\n    pointer-events: none;\n\n    &[data-placement=\"top-end\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n    }\n\n    &[data-placement=\"top-center\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n      --_start: 0;\n      --_end: 0;\n\n      margin-inline: auto;\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--toast-gap);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .item {\n    pointer-events: auto;\n    animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n  }\n\n  .toast {\n    border-radius: var(--toast-radius);\n    box-shadow: var(--toast-shadow);\n  }\n\n  @keyframes enter {\n    from {\n      opacity: 0;\n      translate: 0 var(--space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss","region","list","item","toast","enter"]}
+{"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","../src/alert/Alert.module.css","../src/toast/Toast.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","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .region {\n    --_top: auto;\n    --_end: var(--toast-offset);\n    --_bottom: var(--toast-offset);\n    --_start: auto;\n\n    position: fixed;\n    z-index: var(--toast-layer);\n    inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n    inline-size: min(var(--toast-width), 100vw);\n    padding: 0;\n    pointer-events: none;\n\n    &[data-placement=\"top-end\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n    }\n\n    &[data-placement=\"top-center\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n      --_start: 0;\n      --_end: 0;\n\n      margin-inline: auto;\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--toast-gap);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .item {\n    pointer-events: auto;\n    animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n  }\n\n  .toast {\n    border-radius: var(--toast-radius);\n    box-shadow: var(--toast-shadow);\n  }\n\n  @keyframes enter {\n    from {\n      opacity: 0;\n      translate: 0 var(--space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss","region","list","item","toast","enter"]}