@teseor/css 1.15.2 → 1.15.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +16 -16
  3. package/package.json +1 -1
  4. package/src/base/docs.html +1 -1
  5. package/src/base/typography/docs.html +33 -33
  6. package/src/components/actions/button/docs.html +19 -19
  7. package/src/components/actions/button/index.scss +6 -6
  8. package/src/components/actions/button-group/docs.html +12 -12
  9. package/src/components/actions/close-button/docs.html +10 -10
  10. package/src/components/content/divider/docs.html +1 -1
  11. package/src/components/content/scroll-area/docs.html +81 -81
  12. package/src/components/content/spacer/docs.html +6 -6
  13. package/src/components/data-display/avatar/docs.html +8 -8
  14. package/src/components/data-display/card/docs.html +12 -12
  15. package/src/components/data-display/card/index.scss +2 -2
  16. package/src/components/data-display/data-list/docs.html +32 -32
  17. package/src/components/data-display/icon/docs.html +5 -5
  18. package/src/components/data-display/image/docs.html +1 -1
  19. package/src/components/data-display/stat/docs.html +6 -6
  20. package/src/components/data-display/status/docs.html +9 -9
  21. package/src/components/data-display/table/docs.html +14 -14
  22. package/src/components/data-display/tag/docs.html +17 -17
  23. package/src/components/disclosure/accordion/docs.html +14 -14
  24. package/src/components/disclosure/disclosure/docs.html +8 -8
  25. package/src/components/feedback/alert/docs.html +18 -18
  26. package/src/components/feedback/progress/docs.html +2 -2
  27. package/src/components/feedback/progress/index.scss +3 -3
  28. package/src/components/feedback/toast/docs.html +22 -22
  29. package/src/components/forms/checkbox/docs.html +1 -1
  30. package/src/components/forms/checkbox-group/docs.html +21 -21
  31. package/src/components/forms/field/docs.html +11 -11
  32. package/src/components/forms/field/index.scss +3 -3
  33. package/src/components/forms/fieldset/docs.html +30 -30
  34. package/src/components/forms/form/docs.html +29 -29
  35. package/src/components/forms/form-error/docs.html +2 -2
  36. package/src/components/forms/form-helper/docs.html +9 -9
  37. package/src/components/forms/input/docs.html +13 -13
  38. package/src/components/forms/label/docs.html +7 -7
  39. package/src/components/forms/number-input/docs.html +12 -12
  40. package/src/components/forms/number-input/index.scss +2 -2
  41. package/src/components/forms/password-input/docs.html +14 -14
  42. package/src/components/forms/password-input/index.scss +2 -2
  43. package/src/components/forms/radio/docs.html +5 -5
  44. package/src/components/forms/radio-group/docs.html +20 -20
  45. package/src/components/forms/search-input/docs.html +7 -7
  46. package/src/components/forms/search-input/index.scss +2 -2
  47. package/src/components/forms/select/docs.html +23 -23
  48. package/src/components/forms/textarea/docs.html +18 -18
  49. package/src/components/forms/toggle/docs.html +1 -1
  50. package/src/components/forms/toggle/index.scss +1 -1
  51. package/src/components/navigation/breadcrumb/docs.html +11 -11
  52. package/src/components/navigation/dropdown-menu/docs.html +18 -18
  53. package/src/components/navigation/dropdown-menu/index.scss +2 -2
  54. package/src/components/navigation/menu/docs.html +25 -25
  55. package/src/components/navigation/menu/index.scss +2 -2
  56. package/src/components/navigation/nav/docs.html +13 -13
  57. package/src/components/navigation/pagination/docs.html +6 -6
  58. package/src/components/navigation/tabs/docs.html +19 -19
  59. package/src/components/overlays/dialog/docs.html +12 -12
  60. package/src/components/overlays/drawer/docs.html +16 -16
  61. package/src/components/overlays/modal/docs.html +11 -11
  62. package/src/components/overlays/overlay/docs.html +3 -3
  63. package/src/components/overlays/popover/docs.html +7 -7
  64. package/src/components/overlays/tooltip/docs.html +7 -7
  65. package/src/components/typography/blockquote/docs.html +5 -5
  66. package/src/components/typography/code/docs.html +2 -2
  67. package/src/components/typography/code-block/docs.html +2 -2
  68. package/src/components/typography/heading/docs.html +11 -11
  69. package/src/components/typography/kbd/docs.html +6 -6
  70. package/src/components/typography/link/docs.html +8 -8
  71. package/src/components/typography/link/index.scss +2 -2
  72. package/src/components/typography/list/docs.html +32 -32
  73. package/src/config/guides/accessibility.docs.html +5 -5
  74. package/src/config/guides/getting-started.docs.html +7 -7
  75. package/src/config/guides/theming.docs.html +21 -21
  76. package/src/config/tokens/_variables.scss +14 -0
  77. package/src/config/tokens/docs.html +7 -7
  78. package/src/config/tokens/grid/docs.html +3 -3
  79. package/src/config/tokens/spacing/docs.html +6 -6
  80. package/src/debug/docs.html +3 -3
  81. package/src/layout/app-shell/docs.html +15 -15
  82. package/src/layout/aspect-ratio/docs.html +8 -8
  83. package/src/layout/box/docs.html +10 -10
  84. package/src/layout/center/docs.html +4 -4
  85. package/src/layout/column/docs.html +11 -11
  86. package/src/layout/container/docs.html +7 -7
  87. package/src/layout/content/docs.html +12 -12
  88. package/src/layout/footer/docs.html +16 -16
  89. package/src/layout/grid/docs.html +25 -25
  90. package/src/layout/grid/index.scss +4 -2
  91. package/src/layout/main/docs.html +3 -3
  92. package/src/layout/nav-rail/docs.html +6 -6
  93. package/src/layout/page-header/docs.html +9 -9
  94. package/src/layout/row/docs.html +18 -18
  95. package/src/layout/sidebar/docs.html +5 -5
  96. package/src/layout/sidebar-nav/docs.html +37 -37
  97. package/src/layout/sidebar-nav/index.scss +2 -2
  98. package/src/layout/topbar/docs.html +14 -14
  99. package/src/utilities/container/docs.html +4 -4
  100. package/src/utilities/display/docs.html +11 -11
  101. package/src/utilities/scroll-animation/docs.html +5 -5
  102. package/src/utilities/scroll-snap/docs.html +30 -30
  103. package/src/utilities/spacing/docs.html +12 -12
  104. package/src/utilities/text/docs.html +36 -36
  105. package/src/utilities/view-transition/docs.html +12 -12
  106. package/src/utilities/visually-hidden/docs.html +3 -3
package/dist/index.css CHANGED
@@ -23,16 +23,16 @@
23
23
  @layer primitives{.ui-container{--ui-_unit: var(--ui-unit);--ui-_space-4: var(--ui-space-4);max-inline-size:var(--ui-container-width, calc(var(--ui-_unit) * 120));padding-inline:var(--ui-_space-4)}.ui-container--center{margin-inline:auto}.ui-container--sm{--ui-container-width: calc(var(--ui-_unit) * 80)}.ui-container--md{--ui-container-width: calc(var(--ui-_unit) * 100)}.ui-container--lg{--ui-container-width: calc(var(--ui-_unit) * 120)}.ui-container--xl{--ui-container-width: calc(var(--ui-_unit) * 160)}.ui-container--full{max-inline-size:none}}
24
24
  @layer primitives{.ui-content{--ui-_unit: var(--ui-unit);--ui-_padding-block: var(--ui-content-padding-block, var(--ui-space-4));--ui-_padding-inline: var(--ui-content-padding-inline, var(--ui-space-4));--ui-_gap: var(--ui-content-gap, var(--ui-space-3));display:flex;flex-direction:column;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline)}.ui-content--prose{max-inline-size:calc(var(--ui-_unit)*80)}.ui-content--flush{padding-block:0;padding-inline:0}}
25
25
  @layer primitives{.ui-footer{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_hue-primary: var(--ui-hue-primary, 220);--ui-_height: var(--ui-footer-height, var(--ui-row-3));--ui-_bg: var(--ui-footer-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-footer-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-footer-border-color, var(--ui-color-border));--ui-_z: var(--ui-footer-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-footer__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-_space-2)}.ui-footer__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer--sticky{position:sticky;inset-block-end:0}.ui-footer--fixed{position:fixed;inset-block-end:0;inset-inline:0}.ui-footer--bordered{box-shadow:inset 0 var(--ui-_border-width-sm) 0 0 var(--ui-_border-color)}.ui-footer--raised{box-shadow:0 calc(var(--ui-_border-width-sm)*-1) 6px hsl(var(--ui-_hue-primary), 10%, 20%, 0.08)}}
26
- @layer primitives{.ui-grid{--ui-_space-4: var(--ui-space-4);display:grid;gap:var(--ui-grid-gap, var(--ui-_space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}.ui-grid--subgrid{display:grid;grid-template-columns:subgrid}.ui-grid--subgrid-rows{display:grid;grid-template-rows:subgrid}.ui-grid--subgrid-both{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}.ui-grid-col-span-2{grid-column:span 2}.ui-grid-col-span-3{grid-column:span 3}.ui-grid-col-span-4{grid-column:span 4}.ui-grid-col-span-full{grid-column:1/-1}.ui-grid-row-span-2{grid-row:span 2}.ui-grid-row-span-3{grid-row:span 3}.ui-grid-row-span-full{grid-row:1/-1}}
26
+ @layer primitives{.ui-grid{--ui-_space-4: var(--ui-space-4, 2rem);display:grid;gap:var(--ui-grid-gap, var(--ui-_space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}.ui-grid--subgrid{display:grid;grid-template-columns:subgrid}.ui-grid--subgrid-rows{display:grid;grid-template-rows:subgrid}.ui-grid--subgrid-both{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}.ui-grid-col-span-2{grid-column:span 2}.ui-grid-col-span-3{grid-column:span 3}.ui-grid-col-span-4{grid-column:span 4}.ui-grid-col-span-full{grid-column:1/-1}.ui-grid-row-span-2{grid-row:span 2}.ui-grid-row-span-3{grid-row:span 3}.ui-grid-row-span-full{grid-row:1/-1}}
27
27
  @layer primitives{.ui-main{--ui-_unit: var(--ui-unit);padding-block-start:var(--ui-topbar-height, 0);margin-inline-start:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30))}.ui-main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30))}.ui-main--full{margin-inline-start:0;margin-inline-end:0}}
28
28
  @layer primitives{.ui-nav-rail{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_width: var(--ui-nav-rail-width, var(--ui-row-4));--ui-_bg: var(--ui-nav-rail-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-nav-rail-border-color, var(--ui-color-border));--ui-_gap: var(--ui-nav-rail-gap, var(--ui-space-1));--ui-_z: var(--ui-nav-rail-z, var(--ui-z-sticky));display:flex;flex-direction:column;align-items:center;position:fixed;inset-block:var(--ui-topbar-height, 0);inset-inline-start:0;z-index:var(--ui-_z);inline-size:var(--ui-_width);padding-block:var(--ui-_space-2);background:var(--ui-_bg);box-shadow:inset calc(var(--ui-_border-width-sm)*-1) 0 0 0 var(--ui-_border-color)}.ui-nav-rail__items{display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--ui-_gap)}.ui-nav-rail__actions{display:flex;flex-direction:column;align-items:center;gap:var(--ui-_gap);margin-block-start:auto}.ui-nav-rail--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-_border-width-sm) 0 0 0 var(--ui-_border-color)}}
29
29
  @layer primitives{.ui-page-header{--ui-_body-line-height: var(--ui-body-line-height);--ui-_space-1: var(--ui-space-1);--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_z-sticky: var(--ui-z-sticky);--ui-_color-bg: var(--ui-color-bg);--ui-_padding-block: var(--ui-page-header-padding-block, var(--ui-space-3));--ui-_padding-inline: var(--ui-page-header-padding-inline, 0);--ui-_gap: var(--ui-page-header-gap, var(--ui-space-2));--ui-_border-color: var(--ui-page-header-border-color, var(--ui-color-border));display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline);line-height:var(--ui-_body-line-height)}.ui-page-header__title{display:flex;flex:1;flex-direction:column;gap:var(--ui-_space-1)}.ui-page-header__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-page-header__breadcrumb{flex-basis:100%}.ui-page-header--bordered{box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-page-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ui-_z-sticky);background:var(--ui-_color-bg)}}
30
30
  @layer primitives{.ui-row{--ui-_space-2: var(--ui-space-2);--ui-_space-1: var(--ui-space-1);--ui-_space-4: var(--ui-space-4);--ui-_space-6: var(--ui-space-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-row-gap, var(--ui-_space-2))}.ui-row--xs{--ui-row-gap: var(--ui-_space-1)}.ui-row--sm{--ui-row-gap: var(--ui-_space-2)}.ui-row--md{--ui-row-gap: var(--ui-_space-4)}.ui-row--lg{--ui-row-gap: var(--ui-_space-6)}.ui-row--start{justify-content:flex-start}.ui-row--center{justify-content:center}.ui-row--end{justify-content:flex-end}.ui-row--between{justify-content:space-between}}
31
31
  @layer primitives{.ui-sidebar{--ui-_z-sticky: var(--ui-z-sticky);--ui-_unit: var(--ui-unit);--ui-_color-bg-subtle: var(--ui-color-bg-subtle);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_color-border: var(--ui-color-border);display:flex;flex-direction:column;position:fixed;inset-block-start:var(--ui-topbar-height, 0);inset-inline-start:0;z-index:var(--ui-_z-sticky);block-size:calc(100vh - var(--ui-topbar-height, 0px));inline-size:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30));overflow-y:auto;background:var(--ui-_color-bg-subtle);box-shadow:inset calc(var(--ui-_border-width-sm)*-1) 0 0 0 var(--ui-_color-border)}.ui-sidebar--sm{--ui-sidebar-width: calc(var(--ui-_unit) * 24)}.ui-sidebar--md{--ui-sidebar-width: calc(var(--ui-_unit) * 30)}.ui-sidebar--lg{--ui-sidebar-width: calc(var(--ui-_unit) * 40)}.ui-sidebar--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-_border-width-sm) 0 0 0 var(--ui-_color-border)}}
32
- @layer primitives{.ui-sidebar-nav{--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_space-2: var(--ui-space-2);--ui-_space-1: var(--ui-space-1);--ui-_space-half: var(--ui-space-half);--ui-_size-xs: var(--ui-size-xs);--ui-_weight-medium: var(--ui-weight-medium);--ui-_color-text-muted: var(--ui-color-text-muted);--ui-_duration-fast: var(--ui-duration-fast);--ui-_easing-default: var(--ui-easing-default);--ui-_color-focus: var(--ui-color-focus);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size-md: var(--ui-size-md);--ui-_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));--ui-_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));--ui-_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));display:flex;flex-direction:column;block-size:100%;inline-size:var(--ui-_width);background:var(--ui-_bg)}.ui-sidebar-nav__header{--ui-_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__content{flex:1;padding:var(--ui-_padding);overflow-y:auto}.ui-sidebar-nav__footer{--ui-_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 var(--ui-_border-width-sm) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__group{margin-block-end:var(--ui-_space-2)}.ui-sidebar-nav__group-label{--ui-_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));--ui-_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));--ui-_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));display:block;padding:var(--ui-_space-1) var(--ui-_space-2);margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-_color)}.ui-sidebar-nav__group-items{display:flex;flex-direction:column;gap:var(--ui-_space-half);padding:0;margin:0;list-style:none}.ui-sidebar-nav__subgroup{margin:0}.ui-sidebar-nav__subgroup-label{display:block;list-style:none;padding:var(--ui-_space-1) var(--ui-_space-2);margin:0;margin-block-start:var(--ui-_space-1);font-size:var(--ui-_size-xs);font-weight:var(--ui-_weight-medium);color:var(--ui-_color-text-muted);cursor:pointer;user-select:none}.ui-sidebar-nav__subgroup-label::-webkit-details-marker{display:none}.ui-sidebar-nav__item{--ui-_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));--ui-_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));--ui-_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));--ui-_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));--ui-_bg: var(--ui-sidebar-nav-item-bg, transparent);--ui-_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));display:flex;align-items:center;gap:var(--ui-_space-1);min-block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);font-size:var(--ui-_font-size);font-weight:var(--ui-_weight, normal);text-decoration:none;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_easing-default),color var(--ui-_duration-fast) var(--ui-_easing-default)}.ui-sidebar-nav__item:hover{--ui-_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted))}.ui-sidebar-nav__item:visited{color:var(--ui-_color)}.ui-sidebar-nav__item:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-2px}.ui-sidebar-nav__item--active{--ui-_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));--ui-_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));--ui-_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium))}.ui-sidebar-nav__item--nested{--ui-_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));padding-inline-start:var(--ui-_padding-inline-start)}.ui-sidebar-nav__item--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed;pointer-events:none}.ui-sidebar-nav__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-_size-md);inline-size:var(--ui-_size-md)}.ui-sidebar-nav__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar-nav__badge{flex-shrink:0;margin-inline-start:auto}.ui-sidebar-nav--collapsed{--ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3))}.ui-sidebar-nav--collapsed .ui-sidebar-nav__label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,.ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label{display:none}.ui-sidebar-nav--collapsed .ui-sidebar-nav__item{justify-content:center;padding-inline:var(--ui-_space-1)}}
32
+ @layer primitives{.ui-sidebar-nav{--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_space-2: var(--ui-space-2);--ui-_space-1: var(--ui-space-1);--ui-_space-half: var(--ui-space-half);--ui-_size-xs: var(--ui-size-xs);--ui-_weight-medium: var(--ui-weight-medium);--ui-_color-text-muted: var(--ui-color-text-muted);--ui-_duration-fast: var(--ui-duration-fast);--ui-_easing-default: var(--ui-easing-default);--ui-_color-focus: var(--ui-color-focus);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size-md: var(--ui-size-md);--ui-_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));--ui-_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));--ui-_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));display:flex;flex-direction:column;block-size:100%;inline-size:var(--ui-_width);background:var(--ui-_bg)}.ui-sidebar-nav__header{--ui-_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__content{flex:1;padding:var(--ui-_padding);overflow-y:auto}.ui-sidebar-nav__footer{--ui-_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 var(--ui-_border-width-sm) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__group{margin-block-end:var(--ui-_space-2)}.ui-sidebar-nav__group-label{--ui-_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));--ui-_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));--ui-_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));display:block;padding:var(--ui-_space-1) var(--ui-_space-2);margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);letter-spacing:0.05em;text-transform:uppercase;color:var(--ui-_color)}.ui-sidebar-nav__group-items{display:flex;flex-direction:column;gap:var(--ui-_space-half);padding:0;margin:0;list-style:none}.ui-sidebar-nav__subgroup{margin:0}.ui-sidebar-nav__subgroup-label{display:block;list-style:none;padding:var(--ui-_space-1) var(--ui-_space-2);margin:0;margin-block-start:var(--ui-_space-1);font-size:var(--ui-_size-xs);font-weight:var(--ui-_weight-medium);color:var(--ui-_color-text-muted);cursor:pointer;user-select:none}.ui-sidebar-nav__subgroup-label::-webkit-details-marker{display:none}.ui-sidebar-nav__item{--ui-_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));--ui-_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));--ui-_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));--ui-_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));--ui-_bg: var(--ui-sidebar-nav-item-bg, transparent);--ui-_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));display:flex;align-items:center;gap:var(--ui-_space-1);min-block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);font-size:var(--ui-_font-size);font-weight:var(--ui-_weight, normal);text-decoration:none;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_easing-default),color var(--ui-_duration-fast) var(--ui-_easing-default)}.ui-sidebar-nav__item:hover{--ui-_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted))}.ui-sidebar-nav__item:visited{color:var(--ui-_color)}.ui-sidebar-nav__item:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-0.125rem}.ui-sidebar-nav__item--active{--ui-_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));--ui-_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));--ui-_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium))}.ui-sidebar-nav__item--nested{--ui-_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));padding-inline-start:var(--ui-_padding-inline-start)}.ui-sidebar-nav__item--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed;pointer-events:none}.ui-sidebar-nav__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-_size-md);inline-size:var(--ui-_size-md)}.ui-sidebar-nav__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar-nav__badge{flex-shrink:0;margin-inline-start:auto}.ui-sidebar-nav--collapsed{--ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3))}.ui-sidebar-nav--collapsed .ui-sidebar-nav__label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,.ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label{display:none}.ui-sidebar-nav--collapsed .ui-sidebar-nav__item{justify-content:center;padding-inline:var(--ui-_space-1)}}
33
33
  @layer primitives{.ui-topbar{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_shadow-sm: var(--ui-shadow-sm);--ui-_height: var(--ui-topbar-height, var(--ui-row-3));--ui-_bg: var(--ui-topbar-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-topbar-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-topbar-border-color, var(--ui-color-border));--ui-_z: var(--ui-topbar-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-topbar__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-topbar__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-_space-2)}.ui-topbar__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-topbar--sticky{position:sticky;inset-block-start:0}.ui-topbar--fixed{position:fixed;inset-block-start:0;inset-inline:0}.ui-topbar--bordered{box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-topbar--raised{box-shadow:var(--ui-_shadow-sm)}}
34
- @layer components.tokens{.ui-button{--ui-_space-1: var(--ui-space-1, 0.5rem);--ui-_font-sans: var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);--ui-_duration-base: var(--ui-duration-base, 150ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-quarter: var(--ui-space-quarter, 0.125rem);--ui-_opacity-loading: var(--ui-opacity-loading, 0.7);--ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-_accent);--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);--ui-_color: var(--ui-button-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-button--sm{--ui-ctx-size: var(--ui-size-sm, 0.75rem);--ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));--ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-button--md{--ui-ctx-size: var(--ui-size-md, 1rem);--ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));--ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem))}.ui-button--lg{--ui-ctx-size: var(--ui-size-lg, 1.25rem);--ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));--ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));--ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-button--secondary{--ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));--ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_color: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-button--ghost{--ui-_bg: transparent;--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);--ui-_color: var(--ui-_accent)}.ui-button--outline{--ui-_bg: transparent;--ui-_bg-hover: var(--ui-_accent);--ui-_color: var(--ui-_accent);--ui-_color-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));--ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor}.ui-button--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-button--link{--ui-_bg: transparent;--ui-_bg-hover: transparent;--ui-_color: var(--ui-_accent);--ui-_color-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);--ui-_height: auto;--ui-_padding-x: 0;--ui-_radius: 0}.ui-button--icon{--ui-_padding-x: 0}.ui-button--radius-none{--ui-_radius: 0}.ui-button--radius-sm{--ui-_radius: var(--ui-radius-sm, 0.25rem)}.ui-button--radius-lg{--ui-_radius: var(--ui-radius-lg, 1rem)}.ui-button--radius-full{--ui-_radius: 624.9375rem}}
35
- @layer components.styles{.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-_space-1);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);margin:0;font-family:var(--ui-_font-sans);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border, none);border-radius:var(--ui-_radius);cursor:pointer;transition:background-color var(--ui-_duration-base) var(--ui-_ease-default),color var(--ui-_duration-base) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-button:hover,.ui-button--hover{color:var(--ui-_color-hover, var(--ui-_color));background:var(--ui-_bg-hover)}.ui-button:focus-visible,.ui-button--focus{outline:var(--ui-_border-width-md) solid var(--ui-_color-focus);outline-offset:var(--ui-_border-width-md)}.ui-button:active,.ui-button--active{transform:scale(0.98)}.ui-button:disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-button:disabled:hover{background:var(--ui-_bg);transform:none}.ui-button--icon{inline-size:var(--ui-_height)}.ui-button--block{inline-size:100%}.ui-button--link{text-decoration:underline;text-underline-offset:var(--ui-_space-quarter)}.ui-button--link:hover{text-decoration-thickness:var(--ui-_space-quarter)}.ui-button__icon{flex-shrink:0;block-size:1em;inline-size:1em}.ui-button__icon--start{order:-1}.ui-button__icon--end{order:1}.ui-button--loading{position:relative;opacity:var(--ui-_opacity-loading);pointer-events:none}.ui-button--loading::after{content:"";position:absolute;block-size:1em;inline-size:1em;border:2px solid currentcolor;border-radius:50%;animation:button-spin .6s linear infinite;border-inline-end-color:rgba(0,0,0,0)}@keyframes button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion: reduce){.ui-button--loading::after{animation:none}}}
34
+ @layer components.tokens{.ui-button{--ui-_space-1: var(--ui-space-1, 0.5rem);--ui-_font-sans: var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);--ui-_duration-base: var(--ui-duration-base, 150ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-quarter: var(--ui-space-quarter, 0.125rem);--ui-_opacity-loading: var(--ui-opacity-loading, 0.7);--ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-_accent);--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);--ui-_color: var(--ui-button-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-button--sm{--ui-ctx-size: var(--ui-size-sm, 0.75rem);--ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));--ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-button--md{--ui-ctx-size: var(--ui-size-md, 1rem);--ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));--ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem))}.ui-button--lg{--ui-ctx-size: var(--ui-size-lg, 1.25rem);--ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));--ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));--ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-button--secondary{--ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));--ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_color: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-button--ghost{--ui-_bg: transparent;--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);--ui-_color: var(--ui-_accent)}.ui-button--outline{--ui-_bg: transparent;--ui-_bg-hover: var(--ui-_accent);--ui-_color: var(--ui-_accent);--ui-_color-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));--ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor}.ui-button--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-button--link{--ui-_bg: transparent;--ui-_bg-hover: transparent;--ui-_color: var(--ui-_accent);--ui-_color-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);--ui-_height: auto;--ui-_padding-x: 0;--ui-_radius: 0}.ui-button--icon{--ui-_padding-x: 0}.ui-button--radius-none{--ui-_radius: 0}.ui-button--radius-sm{--ui-_radius: var(--ui-radius-sm, 0.25rem)}.ui-button--radius-lg{--ui-_radius: var(--ui-radius-lg, 1rem)}.ui-button--radius-full{--ui-_radius: 9999px}}
35
+ @layer components.styles{.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-_space-1);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);margin:0;font-family:var(--ui-_font-sans);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border, none);border-radius:var(--ui-_radius);cursor:pointer;transition:background-color var(--ui-_duration-base) var(--ui-_ease-default),color var(--ui-_duration-base) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-button:hover,.ui-button--hover{color:var(--ui-_color-hover, var(--ui-_color));background:var(--ui-_bg-hover)}.ui-button:focus-visible,.ui-button--focus{outline:var(--ui-_border-width-md) solid var(--ui-_color-focus);outline-offset:var(--ui-_border-width-md)}.ui-button:active,.ui-button--active{transform:scale(0.98)}.ui-button:disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-button:disabled:hover{background:var(--ui-_bg);transform:none}.ui-button--icon{inline-size:var(--ui-_height)}.ui-button--block{inline-size:100%}.ui-button--link{text-decoration:underline;text-underline-offset:var(--ui-_space-quarter)}.ui-button--link:hover{text-decoration-thickness:var(--ui-_space-quarter)}.ui-button__icon{flex-shrink:0;block-size:1em;inline-size:1em}.ui-button__icon--start{order:-1}.ui-button__icon--end{order:1}.ui-button--loading{position:relative;opacity:var(--ui-_opacity-loading);pointer-events:none}.ui-button--loading::after{content:"";position:absolute;block-size:1em;inline-size:1em;border:0.125rem solid currentcolor;border-radius:50%;animation:button-spin .6s linear infinite;border-inline-end-color:rgba(0,0,0,0)}@keyframes button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion: reduce){.ui-button--loading::after{animation:none}}}
36
36
  @layer components.tokens{.ui-button-group{--ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)))}}
37
37
  @layer components.styles{.ui-button-group{display:inline-flex}.ui-button-group>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group>.ui-button:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-button-group>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-button-group>.ui-button+.ui-button{margin-inline-start:calc(0.5rem/-8)}.ui-button-group>.ui-button:focus-visible{z-index:1}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group--vertical>.ui-button:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0}.ui-button-group--vertical>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0}.ui-button-group--vertical>.ui-button+.ui-button{border-block-start-width:0;margin-inline-start:0}.ui-button-group--attached>.ui-button{border-inline-end-width:0}.ui-button-group--attached>.ui-button:last-child{border-inline-end-width:1px}.ui-button-group--attached>.ui-button+.ui-button{margin-inline-start:0}}
38
38
  @layer components.tokens{.ui-close-button{--ui-_duration-base: var(--ui-duration-base, 150ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size: var(--ui-close-button-size, var(--ui-row-2, 2rem));--ui-_icon-size: var(--ui-close-button-icon-size, var(--ui-size-md, 1rem));--ui-_color: var(--ui-close-button-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_bg: var(--ui-close-button-bg, transparent);--ui-_hover-bg: var(--ui-close-button-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-close-button-radius, var(--ui-radius-md, 0.5rem))}.ui-close-button--sm{--ui-_size: var(--ui-close-button-size-sm, calc(0.5rem * 3));--ui-_icon-size: var(--ui-close-button-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-close-button--lg{--ui-_size: var(--ui-close-button-size-lg, var(--ui-row-3, 3rem));--ui-_icon-size: var(--ui-close-button-icon-size-lg, var(--ui-size-lg, 1.25rem))}.ui-close-button--subtle{--ui-_color: var(--ui-close-button-subtle-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_hover-bg: var(--ui-close-button-subtle-hover-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
@@ -99,16 +99,16 @@
99
99
  @layer components.styles{.ui-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-input::placeholder{color:var(--ui-_placeholder)}.ui-input:hover:not(:disabled,:focus-visible){border-color:var(--ui-_color-border-strong)}.ui-input:focus-visible,.ui-input--focus{border-color:var(--ui-_border-color-focus);outline:var(--ui-_border-width-md) solid rgba(0,0,0,0);outline-offset:var(--ui-_border-width-sm);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-input:disabled,.ui-input--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-input:read-only{background:var(--ui-_color-bg-subtle)}.ui-input--block{inline-size:100%}.ui-input-group{display:inline-flex;align-items:stretch;position:relative}.ui-input-group .ui-input{flex:1}.ui-input-group--has-prefix .ui-input{padding-inline-start:calc(var(--ui-_height) + var(--ui-_space-half))}.ui-input-group--has-suffix .ui-input{padding-inline-end:calc(var(--ui-_height) + var(--ui-_space-half))}.ui-input-group__addon{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;inline-size:var(--ui-_height, 2rem);color:var(--ui-_color-text-muted);pointer-events:none}.ui-input-group__addon--start{inset-inline-start:0}.ui-input-group__addon--end{inset-inline-end:0}.ui-input-group__addon--interactive{cursor:pointer;pointer-events:auto}}
100
100
  @layer components.tokens{.ui-label{--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_weight-normal: var(--ui-weight-normal, 400);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-label--lg{--ui-_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem))}}
101
101
  @layer components.styles{.ui-label{display:inline-flex;align-items:baseline;gap:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight-medium);line-height:var(--ui-_leading-tight-sm);color:var(--ui-_color);cursor:pointer}.ui-label[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-label__required{color:var(--ui-_required-color)}.ui-label__optional{font-weight:var(--ui-_weight-normal);color:var(--ui-_color-text-muted)}}
102
- @layer components.tokens{.ui-number-input{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size-sm: var(--ui-size-sm, 0.75rem);--ui-_height: var(--ui-number-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-number-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-number-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-number-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-number-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-number-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-number-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-number-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_button-color: var(--ui-number-input-button-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_button-bg: var(--ui-number-input-button-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_button-hover-bg: var(--ui-number-input-button-hover-bg, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-number-input--sm{--ui-_height: var(--ui-number-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-number-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-number-input--lg{--ui-_height: var(--ui-number-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-number-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-number-input-font-size-lg, var(--ui-font-size-md, 1rem))}}
103
- @layer components.styles{.ui-number-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-number-input:focus-within{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-number-input--block{inline-size:100%}.ui-number-input--disabled,.ui-number-input:has(.ui-number-input__field:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-number-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0 var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;text-align:center;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-number-input__field::-webkit-outer-spin-button,.ui-number-input__field::-webkit-inner-spin-button{margin:0;appearance:none}.ui-number-input__field[type=number]{appearance:textfield}.ui-number-input__decrement,.ui-number-input__increment{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:100%;inline-size:var(--ui-_height);padding:0;margin:0;color:var(--ui-_button-color);background:var(--ui-_button-bg);border:none;cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-number-input__decrement:hover:not(:disabled),.ui-number-input__increment:hover:not(:disabled){background:var(--ui-_button-hover-bg)}.ui-number-input__decrement:focus-visible,.ui-number-input__increment:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-2px}.ui-number-input__decrement:disabled,.ui-number-input__increment:disabled{cursor:not-allowed}.ui-number-input__decrement svg,.ui-number-input__increment svg{block-size:var(--ui-_size-sm);inline-size:var(--ui-_size-sm);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ui-number-input__decrement{border-start-start-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-end-start-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-inline-end:var(--ui-_border-width-sm) solid var(--ui-_border-color)}.ui-number-input__increment{border-start-end-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-end-end-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-inline-start:var(--ui-_border-width-sm) solid var(--ui-_border-color)}}
104
- @layer components.tokens{.ui-password-input{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_radius-sm: var(--ui-radius-sm, 0.25rem);--ui-_size-md: var(--ui-size-md, 1rem);--ui-_height: var(--ui-password-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-password-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-password-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-password-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-password-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-password-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-password-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-password-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-password-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_toggle-color: var(--ui-password-input-toggle-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_toggle-hover-bg: var(--ui-password-input-toggle-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-password-input--sm{--ui-_height: var(--ui-password-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-password-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-password-input--lg{--ui-_height: var(--ui-password-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-password-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-password-input-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-password-input--error{--ui-_border-color: var(--ui-password-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-password-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-password-input--success{--ui-_border-color: var(--ui-password-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-password-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
105
- @layer components.styles{.ui-password-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-password-input:focus-within,.ui-password-input--focus{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-password-input--block{inline-size:100%}.ui-password-input--disabled,.ui-password-input:has(.ui-password-input__field:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-password-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0;padding-inline-start:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-password-input__field::placeholder{color:var(--ui-_placeholder)}.ui-password-input__toggle{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);inline-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);margin-inline-end:calc(var(--ui-_space-half));color:var(--ui-_toggle-color);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_radius-sm);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-password-input__toggle:hover{background:var(--ui-_toggle-hover-bg)}.ui-password-input__toggle:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-2px}.ui-password-input__toggle svg{block-size:var(--ui-_size-md);inline-size:var(--ui-_size-md);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
102
+ @layer components.tokens{.ui-number-input{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size-sm: var(--ui-size-sm, 0.75rem);--ui-_height: var(--ui-number-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-number-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-number-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-number-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-number-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-number-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-number-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-number-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_button-color: var(--ui-number-input-button-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_button-bg: var(--ui-number-input-button-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_button-hover-bg: var(--ui-number-input-button-hover-bg, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-number-input--sm{--ui-_height: var(--ui-number-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-number-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-number-input--lg{--ui-_height: var(--ui-number-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-number-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-number-input-font-size-lg, var(--ui-font-size-md, 1rem))}}
103
+ @layer components.styles{.ui-number-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-number-input:focus-within{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-number-input--block{inline-size:100%}.ui-number-input--disabled,.ui-number-input:has(.ui-number-input__field:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-number-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0 var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;text-align:center;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-number-input__field::-webkit-outer-spin-button,.ui-number-input__field::-webkit-inner-spin-button{margin:0;appearance:none}.ui-number-input__field[type=number]{appearance:textfield}.ui-number-input__decrement,.ui-number-input__increment{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:100%;inline-size:var(--ui-_height);padding:0;margin:0;color:var(--ui-_button-color);background:var(--ui-_button-bg);border:none;cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-number-input__decrement:hover:not(:disabled),.ui-number-input__increment:hover:not(:disabled){background:var(--ui-_button-hover-bg)}.ui-number-input__decrement:focus-visible,.ui-number-input__increment:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-0.125rem}.ui-number-input__decrement:disabled,.ui-number-input__increment:disabled{cursor:not-allowed}.ui-number-input__decrement svg,.ui-number-input__increment svg{block-size:var(--ui-_size-sm);inline-size:var(--ui-_size-sm);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ui-number-input__decrement{border-start-start-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-end-start-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-inline-end:var(--ui-_border-width-sm) solid var(--ui-_border-color)}.ui-number-input__increment{border-start-end-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-end-end-radius:calc(var(--ui-_radius) - var(--ui-_border-width-sm));border-inline-start:var(--ui-_border-width-sm) solid var(--ui-_border-color)}}
104
+ @layer components.tokens{.ui-password-input{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_radius-sm: var(--ui-radius-sm, 0.25rem);--ui-_size-md: var(--ui-size-md, 1rem);--ui-_height: var(--ui-password-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-password-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-password-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-password-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-password-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-password-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-password-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-password-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-password-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_toggle-color: var(--ui-password-input-toggle-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_toggle-hover-bg: var(--ui-password-input-toggle-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-password-input--sm{--ui-_height: var(--ui-password-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-password-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-password-input--lg{--ui-_height: var(--ui-password-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-password-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-password-input-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-password-input--error{--ui-_border-color: var(--ui-password-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-password-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-password-input--success{--ui-_border-color: var(--ui-password-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-password-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
105
+ @layer components.styles{.ui-password-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-password-input:focus-within,.ui-password-input--focus{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-password-input--block{inline-size:100%}.ui-password-input--disabled,.ui-password-input:has(.ui-password-input__field:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-password-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0;padding-inline-start:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-password-input__field::placeholder{color:var(--ui-_placeholder)}.ui-password-input__toggle{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);inline-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);margin-inline-end:calc(var(--ui-_space-half));color:var(--ui-_toggle-color);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_radius-sm);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-password-input__toggle:hover{background:var(--ui-_toggle-hover-bg)}.ui-password-input__toggle:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-0.125rem}.ui-password-input__toggle svg{block-size:var(--ui-_size-md);inline-size:var(--ui-_size-md);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
106
106
  @layer components.tokens{.ui-radio{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_size: var(--ui-radio-size, calc(0.5rem * 2));--ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-radio--lg{--ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3))}.ui-radio--error{--ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-radio--success{--ui-_border-color: var(--ui-radio-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-radio-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
107
107
  @layer components.styles{.ui-radio{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-_size);inline-size:var(--ui-_size);margin:0;vertical-align:middle;background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:50%;cursor:pointer;appearance:none;transition:background-color var(--ui-_duration-fast) var(--ui-_ease-default),border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-radio::before{content:"";block-size:50%;inline-size:50%;background-color:var(--ui-_dot-color);border-radius:50%;opacity:0;transform:scale(0);transition:opacity var(--ui-_duration-fast) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-radio:hover:not(:disabled){border-color:var(--ui-_border-color-focus)}.ui-radio:focus-visible{border-color:var(--ui-_border-color-focus);outline:var(--ui-_border-width-md) solid rgba(0,0,0,0);outline-offset:var(--ui-_border-width-sm);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-radio:checked{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-radio:checked::before{opacity:1;transform:scale(1)}.ui-radio:disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}}
108
108
  @layer components.tokens{.ui-radio-group{--ui-_leading-tight-sm: var(--ui-leading-tight-sm, var(--ui-row-1, 1rem));--ui-_row-1: var(--ui-row-1, 1rem);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-2: var(--ui-space-2, 1rem);--ui-_spacing: var(--ui-radio-group-spacing, var(--ui-space-1, 0.5rem));--ui-_legend-size: var(--ui-radio-group-legend-size, var(--ui-font-size-sm, 0.875rem));--ui-_legend-weight: var(--ui-radio-group-legend-weight, var(--ui-weight-medium, 500));--ui-_legend-color: var(--ui-radio-group-legend-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_legend-spacing: var(--ui-radio-group-legend-spacing, var(--ui-space-1, 0.5rem));--ui-_item-gap: var(--ui-radio-group-item-gap, var(--ui-space-1, 0.5rem))}.ui-radio-group--compact{--ui-_spacing: var(--ui-radio-group-spacing-compact, 0);--ui-_legend-spacing: var(--ui-radio-group-legend-spacing-compact, 0);--ui-_item-gap: var(--ui-radio-group-item-gap-compact, 0)}.ui-radio-group--error{--ui-_legend-color: var(--ui-radio-group-error-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}
109
109
  @layer components.styles{.ui-radio-group{display:flex;flex-direction:column;gap:var(--ui-_legend-spacing);min-inline-size:0;padding:0;margin:0;border:none}.ui-radio-group__legend{padding:0;font-size:var(--ui-_legend-size);font-weight:var(--ui-_legend-weight);line-height:var(--ui-_leading-tight-sm);color:var(--ui-_legend-color)}.ui-radio-group__items{display:flex;flex-direction:column;gap:var(--ui-_spacing)}.ui-radio-group__item{display:flex;align-items:center;gap:var(--ui-_item-gap);line-height:var(--ui-_row-1);cursor:pointer}.ui-radio-group__item:has(:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-radio-group--horizontal>.ui-radio-group__items{flex-direction:row;flex-wrap:wrap;gap:var(--ui-_space-2)}.ui-radio-group:disabled,.ui-radio-group[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}}
110
- @layer components.tokens{.ui-search-input{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_radius-sm: var(--ui-radius-sm, 0.25rem);--ui-_height: var(--ui-search-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-search-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-search-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-search-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-search-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-search-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-search-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-search-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-search-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_icon-color: var(--ui-search-input-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_icon-size: var(--ui-search-input-icon-size, var(--ui-size-md, 1rem));--ui-_clear-color: var(--ui-search-input-clear-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_clear-hover-bg: var(--ui-search-input-clear-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-search-input--sm{--ui-_height: var(--ui-search-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-search-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));--ui-_icon-size: var(--ui-search-input-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-search-input--lg{--ui-_height: var(--ui-search-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-search-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-search-input-font-size-lg, var(--ui-font-size-md, 1rem));--ui-_icon-size: var(--ui-search-input-icon-size-lg, var(--ui-size-lg, 1.25rem))}}
111
- @layer components.styles{.ui-search-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-search-input:focus-within,.ui-search-input--focus{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-search-input--block{inline-size:100%}.ui-search-input--disabled,.ui-search-input:has(.ui-search-input__field:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-search-input__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;inline-size:var(--ui-_height);color:var(--ui-_icon-color);pointer-events:none}.ui-search-input__icon svg{block-size:var(--ui-_icon-size);inline-size:var(--ui-_icon-size);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ui-search-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0;padding-inline-end:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-search-input__field::placeholder{color:var(--ui-_placeholder)}.ui-search-input__field::-webkit-search-cancel-button,.ui-search-input__field::-webkit-search-decoration{appearance:none}.ui-search-input--has-clear .ui-search-input__field{padding-inline-end:0}.ui-search-input__clear{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);inline-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);margin-inline-end:calc(var(--ui-_space-half));color:var(--ui-_clear-color);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_radius-sm);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-search-input__clear:hover{background:var(--ui-_clear-hover-bg)}.ui-search-input__clear:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-2px}.ui-search-input__clear svg{block-size:var(--ui-_icon-size);inline-size:var(--ui-_icon-size);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
110
+ @layer components.tokens{.ui-search-input{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_radius-sm: var(--ui-radius-sm, 0.25rem);--ui-_height: var(--ui-search-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-search-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-search-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-search-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-search-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-search-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-search-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-search-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-search-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_icon-color: var(--ui-search-input-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_icon-size: var(--ui-search-input-icon-size, var(--ui-size-md, 1rem));--ui-_clear-color: var(--ui-search-input-clear-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_clear-hover-bg: var(--ui-search-input-clear-hover-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)))}.ui-search-input--sm{--ui-_height: var(--ui-search-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-search-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));--ui-_icon-size: var(--ui-search-input-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-search-input--lg{--ui-_height: var(--ui-search-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-search-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-search-input-font-size-lg, var(--ui-font-size-md, 1rem));--ui-_icon-size: var(--ui-search-input-icon-size-lg, var(--ui-size-lg, 1.25rem))}}
111
+ @layer components.styles{.ui-search-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-search-input:focus-within,.ui-search-input--focus{border-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-search-input--block{inline-size:100%}.ui-search-input--disabled,.ui-search-input:has(.ui-search-input__field:disabled){opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-search-input__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;inline-size:var(--ui-_height);color:var(--ui-_icon-color);pointer-events:none}.ui-search-input__icon svg{block-size:var(--ui-_icon-size);inline-size:var(--ui-_icon-size);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ui-search-input__field{flex:1;block-size:100%;min-inline-size:0;padding:0;padding-inline-end:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:rgba(0,0,0,0);border:none;outline:none}.ui-search-input__field::placeholder{color:var(--ui-_placeholder)}.ui-search-input__field::-webkit-search-cancel-button,.ui-search-input__field::-webkit-search-decoration{appearance:none}.ui-search-input--has-clear .ui-search-input__field{padding-inline-end:0}.ui-search-input__clear{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);inline-size:calc(var(--ui-_height) - var(--ui-_space-half)*2);margin-inline-end:calc(var(--ui-_space-half));color:var(--ui-_clear-color);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_radius-sm);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-search-input__clear:hover{background:var(--ui-_clear-hover-bg)}.ui-search-input__clear:focus-visible{outline:2px solid var(--ui-_color-focus);outline-offset:-0.125rem}.ui-search-input__clear svg{block-size:var(--ui-_icon-size);inline-size:var(--ui-_icon-size);fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}}
112
112
  @layer components.tokens{.ui-select{--ui-_space-half: var(--ui-space-half, 0.25rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_color-border-strong: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_height: var(--ui-select-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color: var(--ui-select-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-select--sm{--ui-_height: var(--ui-select-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-select--lg{--ui-_height: var(--ui-select-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-select--filled{--ui-_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-select--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-select--error{--ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-select--success{--ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
113
113
  @layer components.styles{.ui-select{display:inline-block;block-size:var(--ui-_height);padding-inline-start:var(--ui-_padding-x);padding-inline-end:calc(var(--ui-_height) - var(--ui-_space-half));font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_color);background-color:var(--ui-_bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);cursor:pointer;appearance:none;transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default);background-repeat:no-repeat;background-position:right var(--ui-_space-half) center;background-size:calc(var(--ui-_height)*.5)}.ui-select:hover:not(:disabled,:focus-visible){border-color:var(--ui-_color-border-strong)}.ui-select:focus-visible,.ui-select--focus{border-color:var(--ui-_border-color-focus);outline:var(--ui-_border-width-md) solid rgba(0,0,0,0);outline-offset:var(--ui-_border-width-sm);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-select:disabled,.ui-select--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-select--block{inline-size:100%}.ui-select:invalid,.ui-select--placeholder{color:var(--ui-_color-text-muted)}}
114
114
  @layer components.tokens{.ui-slider{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_height: var(--ui-slider-height, var(--ui-row-2, 2rem));--ui-_track-height: var(--ui-slider-track-height, 0.5rem);--ui-_track-bg: var(--ui-slider-track-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_track-fill: var(--ui-slider-track-fill, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_track-radius: var(--ui-slider-track-radius, var(--ui-radius-full, 9999px));--ui-_thumb-size: var(--ui-slider-thumb-size, calc(0.5rem * 2.5));--ui-_thumb-bg: var(--ui-slider-thumb-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_thumb-border-color: var(--ui-slider-thumb-border-color, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_thumb-border-width: var(--ui-slider-thumb-border-width, var(--ui-border-width-md, 0.125rem));--ui-_thumb-radius: var(--ui-slider-thumb-radius, var(--ui-radius-full, 9999px));--ui-_thumb-shadow: var(--ui-slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));--ui-_focus-ring: var(--ui-slider-focus-ring, var(--ui-color-focus, oklch(75% 0.15 250deg)))}.ui-slider--sm{--ui-_height: var(--ui-slider-height-sm, calc(1rem * 1.5));--ui-_track-height: calc(0.5rem * 0.5);--ui-_thumb-size: calc(0.5rem * 2)}.ui-slider--lg{--ui-_height: var(--ui-slider-height-lg, calc(1rem * 2.5));--ui-_track-height: calc(0.5rem * 1.5);--ui-_thumb-size: calc(0.5rem * 3)}.ui-slider--success{--ui-_track-fill: var(--ui-color-success, oklch(60% 0.18 145deg));--ui-_thumb-border-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-slider--warning{--ui-_track-fill: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_thumb-border-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-slider--danger{--ui-_track-fill: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_thumb-border-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
@@ -116,13 +116,13 @@
116
116
  @layer components.tokens{.ui-textarea{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_color-border-strong: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_color-bg-subtle: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));--ui-_min-height: var(--ui-textarea-min-height, calc(1rem * 4));--ui-_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color: var(--ui-textarea-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-textarea--sm{--ui-_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));--ui-_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-textarea--lg{--ui-_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));--ui-_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));--ui-_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-textarea--filled{--ui-_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-textarea--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-textarea--error{--ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-textarea--success{--ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
117
117
  @layer components.styles{.ui-textarea{display:block;box-sizing:border-box;inline-size:100%;min-block-size:var(--ui-_min-height);padding-block:var(--ui-_padding-y);padding-inline:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:var(--ui-_row-1);color:var(--ui-_color);background:var(--ui-_bg);border:none;border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);transition:border-color var(--ui-_duration-fast) var(--ui-_ease-default),box-shadow var(--ui-_duration-fast) var(--ui-_ease-default);outline-offset:calc(var(--ui-_border-width-sm)*-1);resize:vertical}.ui-textarea::placeholder{color:var(--ui-_placeholder)}.ui-textarea:hover:not(:disabled,:focus-visible){outline-color:var(--ui-_color-border-strong)}.ui-textarea:focus-visible,.ui-textarea--focus{outline-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-_border-width-md) var(--ui-_color-focus)}.ui-textarea:disabled,.ui-textarea--disabled{opacity:var(--ui-_opacity-disabled);cursor:not-allowed;resize:none}.ui-textarea:read-only{background:var(--ui-_color-bg-subtle);resize:none}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}@supports(field-sizing: content){.ui-textarea--auto-size{field-sizing:content;resize:none}}}
118
118
  @layer components.tokens{.ui-toggle{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-focus: var(--ui-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));--ui-_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));--ui-_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));--ui-_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));--ui-_thumb-bg: var(--ui-toggle-thumb-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4))}.ui-toggle--sm{--ui-_track-width: calc(0.5rem * 4);--ui-_track-height: calc(0.5rem * 2);--ui-_track-radius: 0.5rem;--ui-_thumb-size: calc(0.5rem * 1.5)}.ui-toggle--lg{--ui-_track-width: calc(0.5rem * 6);--ui-_track-height: calc(0.5rem * 4);--ui-_track-radius: calc(0.5rem * 2);--ui-_thumb-size: calc(0.5rem * 3.5)}}
119
- @layer components.styles{.ui-toggle{display:inline-flex;flex-shrink:0;align-items:center;position:relative;block-size:var(--ui-_track-height);inline-size:var(--ui-_track-width);background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-toggle__input{position:absolute;inset:0;block-size:100%;inline-size:100%;margin:0;opacity:0;cursor:pointer}.ui-toggle__track{position:absolute;inset:0;background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-toggle__thumb{position:absolute;inset-block-start:var(--ui-_thumb-offset);inset-inline-start:var(--ui-_thumb-offset);block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);background:var(--ui-_thumb-bg);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-toggle__input:checked~.ui-toggle__track{background:var(--ui-_track-bg-checked)}.ui-toggle__input:checked~.ui-toggle__thumb{transform:translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2))}.ui-toggle__input:focus-visible~.ui-toggle__track{outline:2px solid var(--ui-_color-focus);outline-offset:calc(0.5rem/4)}.ui-toggle__input:disabled~.ui-toggle__track,.ui-toggle__input:disabled~.ui-toggle__thumb{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-toggle:has(.ui-toggle__input:disabled){cursor:not-allowed}}
119
+ @layer components.styles{.ui-toggle{display:inline-flex;flex-shrink:0;align-items:center;position:relative;block-size:var(--ui-_track-height);inline-size:var(--ui-_track-width);background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-toggle__input{position:absolute;inset:0;block-size:100%;inline-size:100%;margin:0;opacity:0;cursor:pointer}.ui-toggle__track{position:absolute;inset:0;background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-toggle__thumb{position:absolute;inset-block-start:var(--ui-_thumb-offset);inset-inline-start:var(--ui-_thumb-offset);block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);background:var(--ui-_thumb-bg);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-toggle__input:checked~.ui-toggle__track{background:var(--ui-_track-bg-checked)}.ui-toggle__input:checked~.ui-toggle__thumb{transform:translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2))}.ui-toggle__input:focus-visible~.ui-toggle__track{outline:2px solid var(--ui-_color-focus);outline-offset:calc(0.5rem/4)}.ui-toggle__input:disabled~.ui-toggle__track,.ui-toggle__input:disabled~.ui-toggle__thumb{opacity:var(--ui-_opacity-disabled);cursor:not-allowed}.ui-toggle:has(.ui-toggle__input:disabled){cursor:not-allowed}}
120
120
  @layer components.tokens{.ui-breadcrumb{--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_breadcrumb-separator: var(--ui-breadcrumb-separator, "/");--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-primary: var(--ui-color-primary, oklch(55% 0.22 250deg));--ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));--ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));--ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}
121
121
  @layer components.styles{.ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height);padding:0;margin:0;font-size:var(--ui-_font-size-sm);line-height:1;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height)}.ui-breadcrumb__item:not(:last-child)::after{content:var(--ui-_breadcrumb-separator);color:var(--ui-_separator-color)}.ui-breadcrumb__link{text-decoration:none;color:var(--ui-_link-color);transition:color var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-breadcrumb__link:hover{text-decoration:underline;color:var(--ui-_color-primary)}.ui-breadcrumb__item:last-child .ui-breadcrumb__link,.ui-breadcrumb__current{color:var(--ui-_current-color);pointer-events:none}.ui-breadcrumb__item--hidden{display:none}.ui-breadcrumb__ellipsis{color:var(--ui-_separator-color)}}
122
- @layer components.tokens{.ui-dropdown-menu{--ui-_space-0: var(--ui-space-0, 0.25rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_z: var(--ui-dropdown-menu-z, 200);--ui-_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, 0.5rem));--ui-_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto)}}
123
- @layer components.styles{.ui-dropdown-menu{display:inline-block;position:relative}.ui-dropdown-menu__trigger{display:inline-flex;align-items:center;gap:var(--ui-_space-0)}.ui-dropdown-menu__trigger-icon{display:inline-flex;font-size:.6em;transition:transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__trigger-icon{transform:rotate(180deg)}.ui-dropdown-menu__panel{position:absolute;inset-block-start:calc(100% + var(--ui-_panel-offset));inset-inline-start:0;z-index:var(--ui-_z);min-inline-size:var(--ui-_panel-min-width);opacity:0;pointer-events:none;transform:translateY(calc(0.5rem * -1));transition:opacity var(--ui-_duration-fast) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__panel{opacity:1;pointer-events:auto;transform:translateY(0)}.ui-dropdown-menu--top .ui-dropdown-menu__panel{inset-block-start:auto;inset-block-end:calc(100% + var(--ui-_panel-offset));transform:translateY(0.5rem)}.ui-dropdown-menu--top.ui-dropdown-menu--open .ui-dropdown-menu__panel{transform:translateY(0)}.ui-dropdown-menu--align-end .ui-dropdown-menu__panel{inset-inline-start:auto;inset-inline-end:0}.ui-dropdown-menu--full-width .ui-dropdown-menu__panel{min-inline-size:100%}}
124
- @layer components.tokens{.ui-menu{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-size-xs: var(--ui-font-size-xs, 0.75rem);--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_row-1: var(--ui-row-1, 1rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_color-danger: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));--ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, 0 10px 15px hsla(220, 10%, 20%, 0.15)));--ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
125
- @layer components.styles{.ui-menu{min-inline-size:var(--ui-_min-width);max-block-size:var(--ui-_max-height);padding:var(--ui-_padding);overflow-y:auto;background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-_border-width-sm)*-1)}.ui-menu__group{padding:0;margin:0;list-style:none}.ui-menu__label{padding:var(--ui-_item-padding);font-size:var(--ui-_font-size-xs);font-weight:var(--ui-_weight-medium);line-height:var(--ui-_row-1);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-_color-text-muted)}.ui-menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--ui-_item-padding);font-size:var(--ui-_font-size-sm);line-height:var(--ui-_row-1);text-decoration:none;color:var(--ui-_color-text);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_item-radius);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-menu__item:hover,.ui-menu__item:focus-visible{background:var(--ui-_item-bg-hover);outline:none}.ui-menu__item--danger{color:var(--ui-_color-danger)}.ui-menu__item--danger:hover,.ui-menu__item--danger:focus-visible{color:var(--ui-_color-danger)}.ui-menu__item--disabled,.ui-menu__item[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);pointer-events:none}.ui-menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.ui-menu__item-shortcut{margin-inline-start:auto;font-size:var(--ui-_font-size-xs);color:var(--ui-_color-text-muted)}.ui-menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.ui-menu__separator::before{content:"";flex:1;block-size:var(--ui-_border-width-sm);background:var(--ui-_color-border)}.ui-menu__item--check,.ui-menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.ui-menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}
122
+ @layer components.tokens{.ui-dropdown-menu{--ui-_space-0: var(--ui-space-0, 0.25rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_z: var(--ui-dropdown-menu-z, 200);--ui-_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, 0.5rem));--ui-_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto)}}
123
+ @layer components.styles{.ui-dropdown-menu{display:inline-block;position:relative}.ui-dropdown-menu__trigger{display:inline-flex;align-items:center;gap:var(--ui-_space-0)}.ui-dropdown-menu__trigger-icon{display:inline-flex;font-size:0.6em;transition:transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__trigger-icon{transform:rotate(180deg)}.ui-dropdown-menu__panel{position:absolute;inset-block-start:calc(100% + var(--ui-_panel-offset));inset-inline-start:0;z-index:var(--ui-_z);min-inline-size:var(--ui-_panel-min-width);opacity:0;pointer-events:none;transform:translateY(calc(0.5rem * -1));transition:opacity var(--ui-_duration-fast) var(--ui-_ease-default),transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__panel{opacity:1;pointer-events:auto;transform:translateY(0)}.ui-dropdown-menu--top .ui-dropdown-menu__panel{inset-block-start:auto;inset-block-end:calc(100% + var(--ui-_panel-offset));transform:translateY(0.5rem)}.ui-dropdown-menu--top.ui-dropdown-menu--open .ui-dropdown-menu__panel{transform:translateY(0)}.ui-dropdown-menu--align-end .ui-dropdown-menu__panel{inset-inline-start:auto;inset-inline-end:0}.ui-dropdown-menu--full-width .ui-dropdown-menu__panel{min-inline-size:100%}}
124
+ @layer components.tokens{.ui-menu{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-size-xs: var(--ui-font-size-xs, 0.75rem);--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_row-1: var(--ui-row-1, 1rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-danger: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));--ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, 0 10px 15px hsla(220, 10%, 20%, 0.15)));--ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
125
+ @layer components.styles{.ui-menu{min-inline-size:var(--ui-_min-width);max-block-size:var(--ui-_max-height);padding:var(--ui-_padding);overflow-y:auto;background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-_border-width-sm)*-1)}.ui-menu__group{padding:0;margin:0;list-style:none}.ui-menu__label{padding:var(--ui-_item-padding);font-size:var(--ui-_font-size-xs);font-weight:var(--ui-_weight-medium);line-height:var(--ui-_row-1);letter-spacing:0.05em;text-transform:uppercase;color:var(--ui-_color-text-muted)}.ui-menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--ui-_item-padding);font-size:var(--ui-_font-size-sm);line-height:var(--ui-_row-1);text-decoration:none;color:var(--ui-_color-text);background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_item-radius);cursor:pointer;transition:background var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-menu__item:hover,.ui-menu__item:focus-visible{background:var(--ui-_item-bg-hover);outline:none}.ui-menu__item--danger{color:var(--ui-_color-danger)}.ui-menu__item--danger:hover,.ui-menu__item--danger:focus-visible{color:var(--ui-_color-danger)}.ui-menu__item--disabled,.ui-menu__item[aria-disabled=true]{opacity:var(--ui-_opacity-disabled);pointer-events:none}.ui-menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.ui-menu__item-shortcut{margin-inline-start:auto;font-size:var(--ui-_font-size-xs);color:var(--ui-_color-text-muted)}.ui-menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.ui-menu__separator::before{content:"";flex:1;block-size:var(--ui-_border-width-sm);background:var(--ui-_color-border)}.ui-menu__item--check,.ui-menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.ui-menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}
126
126
  @layer components.tokens{.ui-nav{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-sans: var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);--ui-_border-width-md: var(--ui-border-width-md, 0.125rem);--ui-_duration-base: var(--ui-duration-base, 150ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));--ui-_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));--ui-_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));--ui-_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));--ui-_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-nav--pills{--ui-_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}
127
127
  @layer components.styles{.ui-nav__list{display:flex;align-items:stretch;gap:var(--ui-_gap);box-sizing:border-box;block-size:var(--ui-_item-height);padding:0;margin:0;list-style:none;box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 var(--ui-_border-color)}.ui-nav__item{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--ui-_item-height);padding-inline:var(--ui-_item-padding-x);font-family:var(--ui-_font-sans);font-size:var(--ui-_item-font-size);font-weight:var(--ui-_item-font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_item-color);background:rgba(0,0,0,0);border:none;box-shadow:inset 0 calc(var(--ui-_border-width-md)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--ui-_duration-base) var(--ui-_ease-default),background var(--ui-_duration-base) var(--ui-_ease-default),box-shadow var(--ui-_duration-base) var(--ui-_ease-default)}.ui-nav__item:hover{color:var(--ui-_item-color-hover)}.ui-nav__item--active{color:var(--ui-_item-color-active);box-shadow:inset 0 calc(var(--ui-_border-width-md)*-1) 0 var(--ui-_item-color-active)}.ui-nav__item--disabled{opacity:var(--ui-_opacity-disabled);pointer-events:none}.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--pills .ui-nav__item{border-radius:var(--ui-_item-radius);box-shadow:none}.ui-nav--pills .ui-nav__item:hover{background:var(--ui-_item-bg-hover)}.ui-nav--pills .ui-nav__item--active{color:var(--ui-_item-color-active);background:var(--ui-_item-bg-active)}.ui-nav--vertical .ui-nav__list{flex-direction:column;align-items:stretch;block-size:auto;box-shadow:inset calc(var(--ui-_border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-nav--vertical .ui-nav__item{box-shadow:inset calc(var(--ui-_border-width-md)*-1) 0 0 rgba(0,0,0,0)}.ui-nav--vertical .ui-nav__item--active{box-shadow:inset calc(var(--ui-_border-width-md)*-1) 0 0 var(--ui-_item-color-active)}.ui-nav--vertical.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--vertical.ui-nav--pills .ui-nav__item{box-shadow:none}}
128
128
  @layer components.tokens{.ui-pagination{--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_opacity-disabled: var(--ui-opacity-disabled, 0.5);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));--ui-_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));--ui-_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg: var(--ui-pagination-item-bg, transparent);--ui-_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-pagination--sm{--ui-_item-size: calc(0.5rem * 3);--ui-_gap: calc(0.5rem * 0.25)}.ui-pagination--lg{--ui-_item-size: calc(0.5rem * 5);--ui-_gap: calc(0.5rem * 0.75)}}
@@ -152,7 +152,7 @@
152
152
  @layer components.tokens{.ui-kbd{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_space-quarter: var(--ui-space-quarter, 0.125rem);--ui-_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace));--ui-_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, 0.25rem));--ui-_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, 0.25rem));--ui-_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-kbd-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-kbd-radius, var(--ui-radius-sm, 0.25rem));--ui-_color: var(--ui-kbd-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}
153
153
  @layer components.styles{.ui-kbd{display:inline-flex;align-items:center;padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-_font-family);font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);box-shadow:0 var(--ui-_space-quarter) 0 var(--ui-_border-color)}}
154
154
  @layer components.tokens{.ui-link{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-focus: var(--ui-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color: var(--ui-link-color, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));--ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));--ui-_decoration: var(--ui-link-decoration, underline);--ui-_decoration-hover: var(--ui-link-decoration-hover, underline)}.ui-link--muted{--ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-link--subtle{--ui-_decoration: none;--ui-_decoration-hover: underline}}
155
- @layer components.styles{.ui-link{text-decoration:var(--ui-_decoration);color:var(--ui-_color);cursor:pointer;transition:color var(--ui-_duration-fast) var(--ui-_ease-default);text-underline-offset:calc(0.5rem/4)}.ui-link:hover{text-decoration:var(--ui-_decoration-hover);color:var(--ui-_color-hover)}.ui-link:focus-visible{border-radius:calc(0.5rem/4);outline:2px solid var(--ui-_color-focus);outline-offset:calc(0.5rem/4)}.ui-link:visited{color:var(--ui-_color-visited)}.ui-link--disabled,.ui-link[aria-disabled=true]{color:var(--ui-_color-text-muted);opacity:.6;cursor:not-allowed;pointer-events:none}.ui-link--external::after{content:"↗";display:inline-block;margin-inline-start:calc(0.5rem/4);font-size:.75em}}
155
+ @layer components.styles{.ui-link{text-decoration:var(--ui-_decoration);color:var(--ui-_color);cursor:pointer;transition:color var(--ui-_duration-fast) var(--ui-_ease-default);text-underline-offset:calc(0.5rem/4)}.ui-link:hover{text-decoration:var(--ui-_decoration-hover);color:var(--ui-_color-hover)}.ui-link:focus-visible{border-radius:calc(0.5rem/4);outline:2px solid var(--ui-_color-focus);outline-offset:calc(0.5rem/4)}.ui-link:visited{color:var(--ui-_color-visited)}.ui-link--disabled,.ui-link[aria-disabled=true]{color:var(--ui-_color-text-muted);opacity:0.5;cursor:not-allowed;pointer-events:none}.ui-link--external::after{content:"↗";display:inline-block;margin-inline-start:calc(0.5rem/4);font-size:0.75em}}
156
156
  @layer components.tokens{.ui-list{--ui-_spacing: var(--ui-list-spacing, 0.5rem);--ui-_marker-color: var(--ui-list-marker-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_indent: var(--ui-list-indent, var(--ui-space-3, 1.5rem));--ui-_line-height: var(--ui-list-line-height, var(--ui-leading-md, 1.5rem))}.ui-list--compact{--ui-_spacing: 0}.ui-list--loose{--ui-_spacing: calc(0.5rem * 2)}}
157
157
  @layer components.styles{.ui-list{display:flex;flex-direction:column;gap:var(--ui-_spacing);padding-inline-start:var(--ui-_indent);margin:0;line-height:var(--ui-_line-height)}.ui-list::marker,.ui-list li::marker{color:var(--ui-_marker-color)}.ui-list--unstyled{padding-inline-start:0;list-style:none}.ui-list--inline{flex-direction:row;flex-wrap:wrap;padding-inline-start:0;list-style:none}.ui-list .ui-list{margin-block-start:var(--ui-_spacing)}.ui-list__item{line-height:var(--ui-_line-height)}}
158
158
  @layer components.tokens{.ui-mark{--ui-_bg: var(--ui-mark-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));--ui-_color: var(--ui-mark-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_padding-x: var(--ui-mark-padding-x, var(--ui-space-quarter, 0.125rem));--ui-_padding-y: var(--ui-mark-padding-y, 0);--ui-_radius: var(--ui-mark-radius, var(--ui-radius-sm, 0.25rem))}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teseor/css",
3
- "version": "1.15.2",
3
+ "version": "1.15.5",
4
4
  "description": "CSS library - reset, primitives, components, utilities",
5
5
  "license": "MIT",
6
6
  "author": "letanure",
package/src/base/docs.html CHANGED
@@ -8,7 +8,7 @@ skipValidation: true
8
8
  <!-- @usage -->
9
9
  <!-- Add the .ui-root class to the html or body element to establish baseline typography and color. -->
10
10
  <div class="ui-root">
11
- <p>Text inherits font-family, size, line-height, and color from .ui-root</p>
11
+ <p>{{ t('text_inherits_from_ui_root', 'Text inherits font-family, size, line-height, and color from .ui-root') }}</p>
12
12
  </div>
13
13
  .ui-root {
14
14
  font-family: var(--ui-font-sans);
package/src/base/typography/docs.html CHANGED
@@ -9,9 +9,9 @@ skipValidation: true
9
9
  <table class="ui-table">
10
10
  <thead>
11
11
  <tr>
12
- <th>Token</th>
13
- <th>Size</th>
14
- <th>Line-height</th>
12
+ <th>{{ t('token', 'Token') }}</th>
13
+ <th>{{ t('size', 'Size') }}</th>
14
+ <th>{{ t('line_height', 'Line-height') }}</th>
15
15
  </tr>
16
16
  </thead>
17
17
  <tbody>
@@ -76,47 +76,47 @@ skipValidation: true
76
76
 
77
77
  <!-- @headings -->
78
78
  <!-- Headings use semantic tokens and adjust size at breakpoints. -->
79
- <h1>Heading 1 - 40px / 48px</h1>
80
- <h2>Heading 2 - 32px / 40px</h2>
81
- <h3>Heading 3 - 28px / 32px</h3>
82
- <h4>Heading 4 - 24px / 32px</h4>
83
- <h5>Heading 5 - 20px / 24px</h5>
79
+ <h1>{{ t('heading_1_40px_48px', 'Heading 1 - 40px / 48px') }}</h1>
80
+ <h2>{{ t('heading_2_32px_40px', 'Heading 2 - 32px / 40px') }}</h2>
81
+ <h3>{{ t('heading_3_28px_32px', 'Heading 3 - 28px / 32px') }}</h3>
82
+ <h4>{{ t('heading_4_24px_32px', 'Heading 4 - 24px / 32px') }}</h4>
83
+ <h5>{{ t('heading_5_20px_24px', 'Heading 5 - 20px / 24px') }}</h5>
84
84
 
85
85
  <!-- @body_text -->
86
86
  <!-- Default body text at 16px with 24px line-height (1.5x ratio). -->
87
87
  <p>
88
- Body text at 16px with 24px line-height. The
89
- <strong>bold text</strong>
90
- and
88
+ {{ t('body_text_at_16px_with_24px_line_height_the', 'Body text at 16px with 24px line-height. The') }}
89
+ <strong>{{ t('bold_text', 'bold text') }}</strong>
90
+ {{ t('and', 'and') }}
91
91
  <code>inline code</code>
92
- maintain the same rhythm.
92
+ {{ t('maintain_the_same_rhythm', 'maintain the same rhythm.') }}
93
93
  </p>
94
- <p class="ui-text-body-sm">Body small at 14px with 24px line-height for secondary text.</p>
94
+ <p class="ui-text-body-sm">{{ t('body_small_demo', 'Body small at 14px with 24px line-height for secondary text.') }}</p>
95
95
 
96
96
  <!-- @text_roles -->
97
97
  <!-- Semantic text styles for specific use cases. -->
98
- <p class="ui-text-lead">Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.</p>
99
- <p class="ui-text-eyebrow">Eyebrow text</p>
100
- <h2>Related Heading</h2>
101
- <p class="ui-text-caption">Caption text - 12px / 16px. Use for labels, hints, and metadata.</p>
98
+ <p class="ui-text-lead">{{ t('lead_paragraph_demo', 'Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.') }}</p>
99
+ <p class="ui-text-eyebrow">{{ t('eyebrow_text', 'Eyebrow text') }}</p>
100
+ <h2>{{ t('related_heading', 'Related Heading') }}</h2>
101
+ <p class="ui-text-caption">{{ t('caption_text_demo', 'Caption text - 12px / 16px. Use for labels, hints, and metadata.') }}</p>
102
102
 
103
103
  <!-- @font_weights -->
104
104
  <!-- Four weight levels for hierarchy. -->
105
- <p class="ui-font-normal">Normal (400) - Body text</p>
106
- <p class="ui-font-medium">Medium (500) - Labels, small headings</p>
107
- <p class="ui-font-semibold">Semibold (600) - Subheadings</p>
108
- <p class="ui-font-bold">Bold (700) - Headlines, emphasis</p>
105
+ <p class="ui-font-normal">{{ t('normal_400_body_text', 'Normal (400) - Body text') }}</p>
106
+ <p class="ui-font-medium">{{ t('medium_500_labels_small_headings', 'Medium (500) - Labels, small headings') }}</p>
107
+ <p class="ui-font-semibold">{{ t('semibold_600_subheadings', 'Semibold (600) - Subheadings') }}</p>
108
+ <p class="ui-font-bold">{{ t('bold_700_headlines_emphasis', 'Bold (700) - Headlines, emphasis') }}</p>
109
109
 
110
110
  <!-- @letter_spacing -->
111
111
  <!-- Three tracking options based on use case. -->
112
- <p class="ui-text-3xl ui-tracking-display">Display tracking (-0.02em)</p>
113
- <p>Body tracking (0) - default</p>
114
- <p class="ui-text-eyebrow">Caps tracking (+0.08em)</p>
112
+ <p class="ui-text-3xl ui-tracking-display">{{ t('display_tracking_002em', 'Display tracking (-0.02em)') }}</p>
113
+ <p>{{ t('body_tracking_0_default', 'Body tracking (0) - default') }}</p>
114
+ <p class="ui-text-eyebrow">{{ t('caps_tracking_008em', 'Caps tracking (+0.08em)') }}</p>
115
115
 
116
116
  <!-- @line_length -->
117
117
  <!-- Constrain text width for optimal readability (45-75 characters). -->
118
118
  <div class="ui-prose">
119
- <p>This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.</p>
119
+ <p>{{ t('paragraph_constrained_65ch', 'This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.') }}</p>
120
120
  </div>
121
121
 
122
122
  <!-- @responsive_behavior -->
@@ -124,33 +124,33 @@ Body text at 16px with 24px line-height. The
124
124
  <table class="ui-table">
125
125
  <thead>
126
126
  <tr>
127
- <th>Heading</th>
128
- <th>Mobile</th>
129
- <th>Default</th>
130
- <th>Desktop</th>
127
+ <th>{{ t('heading', 'Heading') }}</th>
128
+ <th>{{ t('mobile', 'Mobile') }}</th>
129
+ <th>{{ t('default', 'Default') }}</th>
130
+ <th>{{ t('desktop', 'Desktop') }}</th>
131
131
  </tr>
132
132
  </thead>
133
133
  <tbody>
134
134
  <tr>
135
- <td>h1</td>
135
+ <td>{{ t('h1', 'h1') }}</td>
136
136
  <td>28px</td>
137
137
  <td>40px</td>
138
138
  <td>48px</td>
139
139
  </tr>
140
140
  <tr>
141
- <td>h2</td>
141
+ <td>{{ t('h2', 'h2') }}</td>
142
142
  <td>24px</td>
143
143
  <td>32px</td>
144
144
  <td>40px</td>
145
145
  </tr>
146
146
  <tr>
147
- <td>h3</td>
147
+ <td>{{ t('h3', 'h3') }}</td>
148
148
  <td>20px</td>
149
149
  <td>28px</td>
150
150
  <td>28px</td>
151
151
  </tr>
152
152
  <tr>
153
- <td>h4</td>
153
+ <td>{{ t('h4', 'h4') }}</td>
154
154
  <td>18px</td>
155
155
  <td>24px</td>
156
156
  <td>24px</td>
package/src/components/actions/button/docs.html CHANGED
@@ -5,35 +5,35 @@ description: Buttons trigger actions. Use primary for main CTA, secondary for le
5
5
 
6
6
  <!-- @variants | row -->
7
7
  <!-- Button styles for different purposes and emphasis levels. -->
8
- <button class="ui-button">Primary</button>
9
- <button class="ui-button ui-button--secondary">Secondary</button>
10
- <button class="ui-button ui-button--outline">Outline</button>
11
- <button class="ui-button ui-button--ghost">Ghost</button>
12
- <button class="ui-button ui-button--danger">Danger</button>
13
- <button class="ui-button ui-button--link">Link</button>
8
+ <button class="ui-button">{{ t('primary', 'Primary') }}</button>
9
+ <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
10
+ <button class="ui-button ui-button--outline">{{ t('outline', 'Outline') }}</button>
11
+ <button class="ui-button ui-button--ghost">{{ t('ghost', 'Ghost') }}</button>
12
+ <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
13
+ <button class="ui-button ui-button--link">{{ t('link', 'Link') }}</button>
14
14
 
15
15
  <!-- @sizes | row -->
16
16
  <!-- Small for dense UIs, default for most cases, large for prominent CTAs. -->
17
- <button class="ui-button ui-button--sm">Small</button>
18
- <button class="ui-button ui-button--md">Medium</button>
19
- <button class="ui-button ui-button--lg">Large</button>
17
+ <button class="ui-button ui-button--sm">{{ t('small', 'Small') }}</button>
18
+ <button class="ui-button ui-button--md">{{ t('medium', 'Medium') }}</button>
19
+ <button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
20
20
 
21
21
  <!-- @radius | row -->
22
22
  <!-- Override border radius. Use radius-full for pill-shaped buttons. -->
23
- <button class="ui-button ui-button--radius-none">None</button>
24
- <button class="ui-button ui-button--radius-sm">Small</button>
25
- <button class="ui-button">Default</button>
26
- <button class="ui-button ui-button--radius-lg">Large</button>
27
- <button class="ui-button ui-button--radius-full">Full</button>
23
+ <button class="ui-button ui-button--radius-none">{{ t('none', 'None') }}</button>
24
+ <button class="ui-button ui-button--radius-sm">{{ t('small', 'Small') }}</button>
25
+ <button class="ui-button">{{ t('default', 'Default') }}</button>
26
+ <button class="ui-button ui-button--radius-lg">{{ t('large', 'Large') }}</button>
27
+ <button class="ui-button ui-button--radius-full">{{ t('full', 'Full') }}</button>
28
28
 
29
29
  <!-- @block -->
30
30
  <!-- Full width button for mobile or form submit. -->
31
- <button class="ui-button ui-button--block">Block Button</button>
31
+ <button class="ui-button ui-button--block">{{ t('block_button', 'Block Button') }}</button>
32
32
 
33
33
  <!-- @loading | row -->
34
34
  <!-- Shows spinner animation. Button becomes non-interactive. -->
35
- <button class="ui-button ui-button--loading">Loading</button>
36
- <button class="ui-button ui-button--secondary ui-button--loading">Loading</button>
35
+ <button class="ui-button ui-button--loading">{{ t('loading', 'Loading') }}</button>
36
+ <button class="ui-button ui-button--secondary ui-button--loading">{{ t('loading', 'Loading') }}</button>
37
37
 
38
38
  <!-- @icon_button | row -->
39
39
  <!-- Square icon-only buttons. Use with SVG icons from Lucide or similar sets. -->
@@ -63,10 +63,10 @@ description: Buttons trigger actions. Use primary for main CTA, secondary for le
63
63
  <path d="M5 12h14"></path>
64
64
  <path d="M12 5v14"></path>
65
65
  </svg>
66
- Add Item
66
+ {{ t('add_item', 'Add Item') }}
67
67
  </button>
68
68
  <button class="ui-button ui-button--secondary">
69
- Next
69
+ {{ t('next', 'Next') }}
70
70
  <svg class="ui-icon ui-button__icon ui-button__icon--end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
71
71
  <path d="m9 18 6-6-6-6"></path>
72
72
  </svg>
package/src/components/actions/button/index.scss CHANGED
@@ -118,7 +118,7 @@
118
118
  }
119
119
 
120
120
  .button--radius-full {
121
- --_radius: 624.9375rem; // large value for pill shape
121
+ --_radius: #{t.$radius-full};
122
122
  }
123
123
 
124
124
  // @modifier boolean block
@@ -214,8 +214,8 @@
214
214
  &__icon {
215
215
  flex-shrink: 0;
216
216
 
217
- block-size: 1em;
218
- inline-size: 1em;
217
+ block-size: #{t.$icon-size-inline};
218
+ inline-size: #{t.$icon-size-inline};
219
219
 
220
220
  &--start {
221
221
  order: -1;
@@ -237,10 +237,10 @@
237
237
  content: '';
238
238
  position: absolute;
239
239
 
240
- block-size: 1em;
241
- inline-size: 1em;
240
+ block-size: #{t.$icon-size-inline};
241
+ inline-size: #{t.$icon-size-inline};
242
242
 
243
- border: 2px solid currentcolor;
243
+ border: #{t.$border-width-md} solid currentcolor;
244
244
  border-radius: 50%;
245
245
 
246
246
  animation: button-spin 0.6s linear infinite;
package/src/components/actions/button-group/docs.html CHANGED
@@ -6,37 +6,37 @@ mergeInto: button
6
6
 
7
7
  <!-- @default -->
8
8
  <div class="ui-button-group" role="group">
9
- <button class="ui-button ui-button--outline">Left</button>
10
- <button class="ui-button ui-button--outline">Middle</button>
11
- <button class="ui-button ui-button--outline">Right</button>
9
+ <button class="ui-button ui-button--outline">{{ t('left', 'Left') }}</button>
10
+ <button class="ui-button ui-button--outline">{{ t('middle', 'Middle') }}</button>
11
+ <button class="ui-button ui-button--outline">{{ t('right', 'Right') }}</button>
12
12
  </div>
13
13
 
14
14
  <!-- @primary_buttons -->
15
15
  <div class="ui-button-group" role="group">
16
- <button class="ui-button">Save</button>
17
- <button class="ui-button">Save & Close</button>
16
+ <button class="ui-button">{{ t('save', 'Save') }}</button>
17
+ <button class="ui-button">{{ t('save_close', 'Save & Close') }}</button>
18
18
  </div>
19
19
 
20
20
  <!-- @vertical -->
21
21
  <div class="ui-button-group ui-button-group--vertical" role="group">
22
- <button class="ui-button ui-button--outline">Top</button>
23
- <button class="ui-button ui-button--outline">Middle</button>
24
- <button class="ui-button ui-button--outline">Bottom</button>
22
+ <button class="ui-button ui-button--outline">{{ t('top', 'Top') }}</button>
23
+ <button class="ui-button ui-button--outline">{{ t('middle', 'Middle') }}</button>
24
+ <button class="ui-button ui-button--outline">{{ t('bottom', 'Bottom') }}</button>
25
25
  </div>
26
26
 
27
27
  <!-- @with_icons -->
28
- <div class="ui-button-group" role="group" aria-label="Text formatting">
29
- <button class="ui-button ui-button--outline ui-button--icon" aria-label="Bold">
28
+ <div class="ui-button-group" role="group" aria-label="{{ t('text_formatting', 'Text formatting') }}">
29
+ <button class="ui-button ui-button--outline ui-button--icon" aria-label="{{ t('bold', 'Bold') }}">
30
30
  <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
31
31
  <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path>
32
32
  </svg>
33
33
  </button>
34
- <button class="ui-button ui-button--outline ui-button--icon" aria-label="Italic">
34
+ <button class="ui-button ui-button--outline ui-button--icon" aria-label="{{ t('italic', 'Italic') }}">
35
35
  <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
36
36
  <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path>
37
37
  </svg>
38
38
  </button>
39
- <button class="ui-button ui-button--outline ui-button--icon" aria-label="Underline">
39
+ <button class="ui-button ui-button--outline ui-button--icon" aria-label="{{ t('underline', 'Underline') }}">
40
40
  <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
41
41
  <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path>
42
42
  </svg>