@navecss/base-ui 0.2.0 → 0.3.0

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 (80) hide show
  1. package/README.md +69 -7
  2. package/dist/accordion/index.js +0 -1
  3. package/dist/alert-dialog/index.js +0 -1
  4. package/dist/autocomplete/index.js +0 -1
  5. package/dist/avatar/index.js +0 -1
  6. package/dist/button/index.js +0 -1
  7. package/dist/checkbox/index.js +0 -1
  8. package/dist/checkbox-group/index.js +0 -1
  9. package/dist/collapsible/index.js +0 -1
  10. package/dist/combobox/index.js +0 -1
  11. package/dist/combobox/parts.generated.d.ts +0 -2
  12. package/dist/combobox/parts.generated.js +0 -1
  13. package/dist/context-menu/index.js +0 -1
  14. package/dist/css.d.ts +1 -0
  15. package/dist/dialog/index.js +0 -1
  16. package/dist/field/index.js +0 -1
  17. package/dist/fieldset/index.js +0 -1
  18. package/dist/form/index.js +0 -1
  19. package/dist/index.js +0 -1
  20. package/dist/input/index.js +0 -1
  21. package/dist/menu/index.js +0 -1
  22. package/dist/menubar/index.js +0 -1
  23. package/dist/meter/index.js +0 -1
  24. package/dist/navigation-menu/index.js +0 -1
  25. package/dist/number-field/index.js +0 -1
  26. package/dist/part.d.ts +0 -5
  27. package/dist/popover/index.js +0 -1
  28. package/dist/preview-card/index.js +0 -1
  29. package/dist/progress/index.js +0 -1
  30. package/dist/radio/index.js +0 -1
  31. package/dist/radio-group/index.js +0 -1
  32. package/dist/registry/base-ui-accordion.json +55 -0
  33. package/dist/registry/base-ui-alert-dialog.json +55 -0
  34. package/dist/registry/base-ui-autocomplete.json +55 -0
  35. package/dist/registry/base-ui-avatar.json +55 -0
  36. package/dist/registry/base-ui-button.json +55 -0
  37. package/dist/registry/base-ui-checkbox-group.json +55 -0
  38. package/dist/registry/base-ui-checkbox.json +55 -0
  39. package/dist/registry/base-ui-collapsible.json +55 -0
  40. package/dist/registry/base-ui-combobox.json +55 -0
  41. package/dist/registry/base-ui-context-menu.json +55 -0
  42. package/dist/registry/base-ui-dialog.json +55 -0
  43. package/dist/registry/base-ui-field.json +55 -0
  44. package/dist/registry/base-ui-fieldset.json +55 -0
  45. package/dist/registry/base-ui-input.json +55 -0
  46. package/dist/registry/base-ui-menu.json +55 -0
  47. package/dist/registry/base-ui-menubar.json +55 -0
  48. package/dist/registry/base-ui-meter.json +55 -0
  49. package/dist/registry/base-ui-navigation-menu.json +55 -0
  50. package/dist/registry/base-ui-number-field.json +55 -0
  51. package/dist/registry/base-ui-popover.json +55 -0
  52. package/dist/registry/base-ui-preview-card.json +55 -0
  53. package/dist/registry/base-ui-progress.json +55 -0
  54. package/dist/registry/base-ui-radio-group.json +55 -0
  55. package/dist/registry/base-ui-radio.json +55 -0
  56. package/dist/registry/base-ui-scroll-area.json +55 -0
  57. package/dist/registry/base-ui-select.json +55 -0
  58. package/dist/registry/base-ui-separator.json +55 -0
  59. package/dist/registry/base-ui-slider.json +55 -0
  60. package/dist/registry/base-ui-switch.json +55 -0
  61. package/dist/registry/base-ui-tabs.json +55 -0
  62. package/dist/registry/base-ui-toast.json +55 -0
  63. package/dist/registry/base-ui-toggle-group.json +55 -0
  64. package/dist/registry/base-ui-toggle.json +55 -0
  65. package/dist/registry/base-ui-toolbar.json +55 -0
  66. package/dist/registry/base-ui-tooltip.json +55 -0
  67. package/dist/registry/registry.json +1757 -0
  68. package/dist/scroll-area/index.js +0 -1
  69. package/dist/select/index.js +0 -1
  70. package/dist/separator/index.js +0 -1
  71. package/dist/slider/index.js +0 -1
  72. package/dist/styles.css +28 -14
  73. package/dist/switch/index.js +0 -1
  74. package/dist/tabs/index.js +0 -1
  75. package/dist/toast/index.js +0 -1
  76. package/dist/toggle/index.js +0 -1
  77. package/dist/toggle-group/index.js +0 -1
  78. package/dist/toolbar/index.js +0 -1
  79. package/dist/tooltip/index.js +0 -1
  80. package/package.json +29 -19
package/dist/scroll-area/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as ScrollArea from "./parts.generated.js";
package/dist/select/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Select from "./parts.generated.js";
package/dist/separator/index.js CHANGED
@@ -1,3 +1,2 @@
1
- 'use client';
2
1
  /* eslint-disable import-x/export -- the named export wins over the star re-export, as TypeScript has it */
3
2
  export { Separator } from "./parts.generated.js";
package/dist/slider/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Slider from "./parts.generated.js";
package/dist/styles.css CHANGED
@@ -23,12 +23,14 @@
23
23
  } }
24
24
  .nave-base-ui-title { margin: 0; font-size: var(--nave-font-size-lg); font-weight: var(--nave-font-weight-semibold); line-height: var(--nave-line-height-tight); }
25
25
  .nave-base-ui-description { margin: 0; font-size: var(--nave-font-size-sm); line-height: var(--nave-line-height-base); color: var(--nave-color-content-secondary); }
26
- .nave-base-ui-item { display: flex; align-items: center; gap: var(--nave-spacing-control-sm); padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md); cursor: default; user-select: none; outline: none; &[aria-disabled="true"]{ color: var(--nave-color-content-disabled);
26
+ .nave-base-ui-item { display: flex; align-items: center; gap: var(--nave-spacing-control-sm); padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md); cursor: default; user-select: none; &[aria-disabled="true"]{ color: var(--nave-color-content-disabled);
27
+ } &{ outline: none;
27
28
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
28
29
  } }
29
30
  .nave-base-ui-separator { border: 0; block-size: var(--nave-border-width-sm); margin-block: var(--nave-spacing-control-xs); background-color: var(--nave-color-border-default); }
30
31
  .nave-base-ui-group-label { padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md); font-size: var(--nave-font-size-xs); font-weight: var(--nave-font-weight-medium); color: var(--nave-color-content-secondary); }
31
- .nave-base-ui-disclosure-trigger { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; padding: var(--nave-spacing-control-md) var(--nave-spacing-control-xs); border: 0; background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-md); font-weight: var(--nave-font-weight-medium); text-align: start; cursor: pointer; outline: none; &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
32
+ .nave-base-ui-disclosure-trigger { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; padding: var(--nave-spacing-control-md) var(--nave-spacing-control-xs); border: 0; background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-md); font-weight: var(--nave-font-weight-medium); text-align: start; cursor: pointer; &:disabled, &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
33
+ } &{ outline: none;
32
34
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
33
35
  } }
34
36
  .nave-base-ui-disclosure-icon {
@@ -64,13 +66,14 @@
64
66
  } }
65
67
  .nave-base-ui-tab-list { position: relative; display: flex; gap: var(--nave-spacing-control-sm); border-block-end: var(--nave-border-width-sm) solid var(--nave-color-border-default); &[aria-orientation="vertical"]{ flex-direction: column; border-block-end-style: none; border-inline-end: var(--nave-border-width-sm) solid var(--nave-color-border-default);
66
68
  } }
67
- .nave-base-ui-tab { display: inline-flex; align-items: center; justify-content: center; padding: var(--nave-spacing-control-md); border: 0; background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); white-space: nowrap; cursor: pointer; outline: none; &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
69
+ .nave-base-ui-tab { display: inline-flex; align-items: center; justify-content: center; padding: var(--nave-spacing-control-md); border: 0; background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); white-space: nowrap; cursor: pointer; &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
70
+ } &{ outline: none;
68
71
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
69
72
  } }
70
73
  .nave-base-ui-tab-indicator { position: absolute; box-sizing: content-box; left: var(--active-tab-left); top: calc(var(--active-tab-top) + var(--active-tab-height) - var(--nave-border-width-lg)); width: var(--active-tab-width); height: 0; border-bottom: var(--nave-border-width-lg) solid var(--nave-color-content-primary); &[data-orientation="vertical"]{ top: var(--active-tab-top); left: calc(var(--active-tab-left) + var(--active-tab-width) - var(--nave-border-width-lg)); width: 0; height: var(--active-tab-height); border-bottom-style: none; border-right: var(--nave-border-width-lg) solid var(--nave-color-content-primary);
71
74
  } &[data-orientation="vertical"]:dir(rtl){ left: var(--active-tab-left); border-right-style: none; border-left: var(--nave-border-width-lg) solid var(--nave-color-content-primary);
72
75
  } }
73
- .nave-base-ui-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--nave-spacing-control-sm); min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-lg); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: var(--nave-color-action-secondary); color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-tight); white-space: nowrap; cursor: pointer; user-select: none; outline: none; &[data-nave-size="sm"]{ min-block-size: var(--nave-size-control-sm); padding-inline: var(--nave-spacing-control-md);
76
+ .nave-base-ui-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--nave-spacing-control-sm); min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-lg); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: var(--nave-color-action-secondary); color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-tight); white-space: nowrap; cursor: pointer; user-select: none; &[data-nave-size="sm"]{ min-block-size: var(--nave-size-control-sm); padding-inline: var(--nave-spacing-control-md);
74
77
  } &[data-nave-variant="primary"]{ background-color: var(--nave-color-action-primary); border-color: transparent; color: var(--nave-color-on-action-primary);
75
78
  } &[data-nave-variant="primary"]:hover:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-primary-hover);
76
79
  } &[data-nave-variant="primary"]:active:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-primary-active);
@@ -79,22 +82,26 @@
79
82
  } &[data-nave-variant="ghost"]:hover:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
80
83
  } &[data-nave-variant="ghost"]:active:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
81
84
  } &[data-nave-variant="ghost"][aria-expanded="true"]:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
85
+ } &{ outline: none;
82
86
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
83
87
  } }
84
- .nave-base-ui-toggle { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--nave-spacing-control-sm); min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-lg); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: var(--nave-color-action-secondary); color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-tight); white-space: nowrap; cursor: pointer; user-select: none; position: relative; outline: none; &[data-nave-size="sm"]{ min-block-size: var(--nave-size-control-sm); padding-inline: var(--nave-spacing-control-md);
88
+ .nave-base-ui-toggle { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--nave-spacing-control-sm); min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-lg); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: var(--nave-color-action-secondary); color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-tight); white-space: nowrap; cursor: pointer; user-select: none; position: relative; &[data-nave-size="sm"]{ min-block-size: var(--nave-size-control-sm); padding-inline: var(--nave-spacing-control-md);
85
89
  } &[aria-pressed="true"]::after{ content: ""; position: absolute; inset-inline: var(--nave-spacing-control-md); inset-block-end: var(--nave-border-width-sm); border-block-end: var(--nave-border-width-lg) solid currentColor;
86
90
  } &:disabled, &[aria-disabled="true"]{ background-color: transparent; border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
91
+ } &{ outline: none;
87
92
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
88
93
  } }
89
94
  .nave-base-ui-toggle-group { display: flex; gap: var(--nave-spacing-control-xs); &[data-orientation="vertical"]{ flex-direction: column;
90
95
  } }
91
- .nave-base-ui-input { box-sizing: border-box; min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); outline: none; &::placeholder{ color: var(--nave-color-content-tertiary); opacity: 1;
96
+ .nave-base-ui-input { box-sizing: border-box; min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); &::placeholder{ color: var(--nave-color-content-tertiary); opacity: 1;
92
97
  } &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding-inline: calc(var(--nave-spacing-control-md) - var(--nave-border-width-mark) + var(--nave-border-width-sm));
93
98
  } &:disabled, &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
99
+ } &{ outline: none;
94
100
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
95
101
  } }
96
- .nave-base-ui-select-trigger { box-sizing: border-box; min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--nave-spacing-control-sm); text-align: start; cursor: pointer; outline: none; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding-inline: calc(var(--nave-spacing-control-md) - var(--nave-border-width-mark) + var(--nave-border-width-sm));
102
+ .nave-base-ui-select-trigger { box-sizing: border-box; min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); display: inline-flex; align-items: center; justify-content: space-between; gap: var(--nave-spacing-control-sm); text-align: start; cursor: pointer; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding-inline: calc(var(--nave-spacing-control-md) - var(--nave-border-width-mark) + var(--nave-border-width-sm));
97
103
  } &:disabled, &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
104
+ } &{ outline: none;
98
105
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
99
106
  } }
100
107
  .nave-base-ui-select-value {
@@ -108,23 +115,26 @@
108
115
  .nave-base-ui-field-error { font-size: var(--nave-font-size-sm); color: var(--nave-color-feedback-danger-foreground); }
109
116
  .nave-base-ui-fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--nave-spacing-content-sm); }
110
117
  .nave-base-ui-legend { padding: 0; font-size: var(--nave-font-size-md); font-weight: var(--nave-font-weight-semibold); color: var(--nave-color-content-primary); }
111
- .nave-base-ui-checkbox { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-icon-sm); block-size: var(--nave-size-icon-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-sm); background-color: transparent; color: var(--nave-color-content-primary); cursor: pointer; position: relative; outline: none; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark);
118
+ .nave-base-ui-checkbox { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-icon-sm); block-size: var(--nave-size-icon-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-sm); background-color: transparent; color: var(--nave-color-content-primary); cursor: pointer; position: relative; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark);
112
119
  } &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
113
120
  } &::before{ content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--nave-size-control-xs); block-size: var(--nave-size-control-xs); margin-block-start: calc(var(--nave-size-control-xs) / -2); margin-inline-start: calc(var(--nave-size-control-xs) / -2);
121
+ } &{ outline: none;
114
122
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
115
123
  } }
116
124
  .nave-base-ui-checkbox-indicator { box-sizing: border-box; display: block; inline-size: 0.3125rem; block-size: 0.5625rem; margin-block-start: -0.125rem; border-right: var(--nave-border-width-mark) solid currentColor; border-bottom: var(--nave-border-width-mark) solid currentColor; rotate: 45deg; [aria-checked="mixed"] > &{ inline-size: 0.5rem; block-size: 0; margin-block-start: 0; border-right-style: none; rotate: 0deg;
117
125
  } }
118
- .nave-base-ui-radio { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-icon-sm); block-size: var(--nave-size-icon-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-full); background-color: transparent; color: var(--nave-color-content-primary); cursor: pointer; position: relative; outline: none; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark);
126
+ .nave-base-ui-radio { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-icon-sm); block-size: var(--nave-size-icon-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-full); background-color: transparent; color: var(--nave-color-content-primary); cursor: pointer; position: relative; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark);
119
127
  } &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
120
128
  } &::before{ content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--nave-size-control-xs); block-size: var(--nave-size-control-xs); margin-block-start: calc(var(--nave-size-control-xs) / -2); margin-inline-start: calc(var(--nave-size-control-xs) / -2);
129
+ } &{ outline: none;
121
130
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
122
131
  } }
123
132
  .nave-base-ui-radio-indicator { box-sizing: border-box; display: block; inline-size: 0; block-size: 0; border: var(--nave-border-width-lg) solid currentColor; border-radius: var(--nave-radius-full); }
124
133
  .nave-base-ui-choice-group { display: flex; flex-direction: column; gap: var(--nave-spacing-control-sm); }
125
- .nave-base-ui-switch { box-sizing: border-box; display: inline-flex; align-items: center; flex: none; inline-size: calc(2 * var(--nave-size-icon-md)); block-size: var(--nave-size-icon-md); padding: var(--nave-border-width-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-full); background-color: transparent; color: var(--nave-color-content-primary); cursor: pointer; position: relative; outline: none; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding: calc(2 * var(--nave-border-width-sm) - var(--nave-border-width-mark));
134
+ .nave-base-ui-switch { box-sizing: border-box; display: inline-flex; align-items: center; flex: none; inline-size: calc(2 * var(--nave-size-icon-md)); block-size: var(--nave-size-icon-md); padding: var(--nave-border-width-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-full); background-color: transparent; color: var(--nave-color-content-primary); cursor: pointer; position: relative; &[aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding: calc(2 * var(--nave-border-width-sm) - var(--nave-border-width-mark));
126
135
  } &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
127
136
  } &::before{ content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: calc(2 * var(--nave-size-icon-md)); block-size: var(--nave-size-control-xs); margin-block-start: calc(var(--nave-size-control-xs) / -2); margin-inline-start: calc(-1 * var(--nave-size-icon-md));
137
+ } &{ outline: none;
128
138
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
129
139
  } }
130
140
  .nave-base-ui-switch-thumb { box-sizing: border-box; display: block; inline-size: var(--nave-size-icon-sm); block-size: var(--nave-size-icon-sm); margin-inline-start: 0; border: var(--nave-border-width-sm) solid currentColor; border-radius: var(--nave-radius-full); transition-property: margin-inline-start, border-width; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-standard); [aria-checked="true"] > &{ margin-inline-start: calc(2 * var(--nave-size-icon-md) - 4 * var(--nave-border-width-sm) - var(--nave-size-icon-sm)); border-width: calc(var(--nave-size-icon-sm) / 2);
@@ -136,7 +146,8 @@
136
146
  .nave-base-ui-number-field-group { box-sizing: border-box; display: flex; align-items: stretch; min-block-size: var(--nave-size-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); padding: calc(var(--nave-border-width-mark) - var(--nave-border-width-sm)); background-color: transparent; color: var(--nave-color-content-primary); &:has(> [aria-invalid="true"]){ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding: 0;
137
147
  } &[data-disabled]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled);
138
148
  } }
139
- .nave-base-ui-number-field-input { flex: 1; min-inline-size: 0; padding-block: 0; padding-inline: var(--nave-spacing-control-md); border: 0; background-color: transparent; color: inherit; font-family: inherit; font-size: var(--nave-font-size-sm); outline: none; &::placeholder{ color: var(--nave-color-content-tertiary); opacity: 1;
149
+ .nave-base-ui-number-field-input { flex: 1; min-inline-size: 0; padding-block: 0; padding-inline: var(--nave-spacing-control-md); border: 0; background-color: transparent; color: inherit; font-family: inherit; font-size: var(--nave-font-size-sm); &::placeholder{ color: var(--nave-color-content-tertiary); opacity: 1;
150
+ } &{ outline: none;
140
151
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
141
152
  } }
142
153
  .nave-base-ui-number-field-stepper { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-control-sm); padding: 0; border: 0; background-color: transparent; color: inherit; font-family: inherit; cursor: pointer; &:disabled, &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
@@ -220,14 +231,16 @@
220
231
  .nave-base-ui-input-group { box-sizing: border-box; display: flex; align-items: stretch; min-block-size: var(--nave-size-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); &[data-invalid]:not([data-disabled]){ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark);
221
232
  } &[data-disabled]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled);
222
233
  } }
223
- .nave-base-ui-combobox-trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-control-sm); padding: 0; border: 0; background-color: transparent; color: inherit; font-family: inherit; cursor: pointer; outline: none; &[aria-haspopup="dialog"]{ inline-size: auto; min-block-size: var(--nave-size-control-md); justify-content: space-between; gap: var(--nave-spacing-control-sm); padding-inline: var(--nave-spacing-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); color: var(--nave-color-content-primary); font-size: var(--nave-font-size-sm); text-align: start;
234
+ .nave-base-ui-combobox-trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--nave-size-control-sm); padding: 0; border: 0; background-color: transparent; color: inherit; font-family: inherit; cursor: pointer; &[aria-haspopup="dialog"]{ inline-size: auto; min-block-size: var(--nave-size-control-md); justify-content: space-between; gap: var(--nave-spacing-control-sm); padding-inline: var(--nave-spacing-control-md); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); color: var(--nave-color-content-primary); font-size: var(--nave-font-size-sm); text-align: start;
224
235
  } &[aria-haspopup="dialog"][aria-invalid="true"]{ border-color: var(--nave-color-feedback-danger); border-width: var(--nave-border-width-mark); padding-inline: calc(var(--nave-spacing-control-md) - var(--nave-border-width-mark) + var(--nave-border-width-sm));
225
236
  } &:disabled, &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
226
237
  } &[aria-haspopup="dialog"]:disabled, &[aria-haspopup="dialog"][aria-disabled="true"]{ border-color: var(--nave-color-border-disabled);
238
+ } &{ outline: none;
227
239
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
228
240
  } }
229
241
  .nave-base-ui-chips { display: flex; flex-wrap: wrap; align-items: center; flex: 1; min-inline-size: 0; gap: var(--nave-spacing-control-sm); padding: var(--nave-spacing-control-sm); }
230
- .nave-base-ui-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--nave-spacing-control-xs); min-block-size: calc(var(--nave-size-control-xs) + 2 * var(--nave-border-width-sm)); padding-inline: var(--nave-spacing-control-sm) var(--nave-spacing-control-xs); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-size: var(--nave-font-size-sm); line-height: var(--nave-line-height-tight); cursor: default; outline: none; &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled);
242
+ .nave-base-ui-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--nave-spacing-control-xs); min-block-size: calc(var(--nave-size-control-xs) + 2 * var(--nave-border-width-sm)); padding-inline: var(--nave-spacing-control-sm) var(--nave-spacing-control-xs); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-size: var(--nave-font-size-sm); line-height: var(--nave-line-height-tight); cursor: default; &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled);
243
+ } &{ outline: none;
231
244
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
232
245
  } }
233
246
  .nave-base-ui-chip-remove { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: stretch; inline-size: var(--nave-size-control-xs); padding: 0; border: 0; background-color: transparent; color: inherit; font-family: inherit; cursor: pointer; &:disabled, &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
@@ -249,7 +262,8 @@
249
262
  &[data-limited]{ display: none;
250
263
  } }
251
264
  .nave-base-ui-navigation-menu-list { display: flex; align-items: center; gap: var(--nave-spacing-control-xs); margin: 0; padding: 0; list-style: none; }
252
- .nave-base-ui-navigation-menu-trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--nave-spacing-control-sm); min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-lg); border: var(--nave-border-width-sm) solid transparent; border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-tight); white-space: nowrap; cursor: pointer; user-select: none; outline: none; &:hover:not(:disabled, [aria-disabled="true"]), &:active:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
265
+ .nave-base-ui-navigation-menu-trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--nave-spacing-control-sm); min-block-size: var(--nave-size-control-md); padding-block: 0; padding-inline: var(--nave-spacing-control-lg); border: var(--nave-border-width-sm) solid transparent; border-radius: var(--nave-radius-control); background-color: transparent; color: var(--nave-color-content-primary); font-family: inherit; font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-tight); white-space: nowrap; cursor: pointer; user-select: none; &:hover:not(:disabled, [aria-disabled="true"]), &:active:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
266
+ } &{ outline: none;
253
267
  } &:focus-visible{ outline-style: solid; outline-width: var(--nave-border-width-focus, 2px); outline-color: var(--nave-color-border-focus, currentColor); outline-offset: 2px;
254
268
  } }
255
269
  .nave-base-ui-navigation-menu-icon { display: inline-flex; flex: none; transition-property: rotate; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-standard); [aria-expanded="true"] > &{ rotate: 180deg;
package/dist/switch/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Switch from "./parts.generated.js";
package/dist/tabs/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Tabs from "./parts.generated.js";
package/dist/toast/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Toast from "./parts.generated.js";
package/dist/toggle/index.js CHANGED
@@ -1,3 +1,2 @@
1
- 'use client';
2
1
  /* eslint-disable import-x/export -- the named export wins over the star re-export, as TypeScript has it */
3
2
  export { Toggle } from "./parts.generated.js";
package/dist/toggle-group/index.js CHANGED
@@ -1,3 +1,2 @@
1
- 'use client';
2
1
  /* eslint-disable import-x/export -- the named export wins over the star re-export, as TypeScript has it */
3
2
  export { ToggleGroup } from "./parts.generated.js";
package/dist/toolbar/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Toolbar from "./parts.generated.js";
package/dist/tooltip/index.js CHANGED
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Tooltip from "./parts.generated.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navecss/base-ui",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "NaveCSS styles Base UI's components with Nave's tokens: the same parts, the same props, pre-styled.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -190,43 +190,52 @@
190
190
  "import": "./dist/separator/index.js",
191
191
  "default": "./dist/separator/index.js"
192
192
  },
193
- "./styles.css": "./dist/styles.css",
193
+ "./styles.css": {
194
+ "types": "./dist/css.d.ts",
195
+ "default": "./dist/styles.css"
196
+ },
194
197
  "./package.json": "./package.json"
195
198
  },
196
199
  "files": [
197
200
  "dist"
198
201
  ],
199
202
  "devDependencies": {
200
- "@base-ui/react": "1.8.0",
203
+ "@base-ui/react": "1.9.0",
201
204
  "@testing-library/dom": "^10.4.2",
202
- "@testing-library/user-event": "^14.6.7",
203
- "@types/node": "^26.6.4",
205
+ "@testing-library/user-event": "^14.6.8",
206
+ "@types/node": "^26.6.6",
204
207
  "@types/react": "^19.3.0",
205
208
  "@types/react-dom": "^19.3.0",
206
- "@vitest/browser": "5.0.3",
207
- "@vitest/browser-playwright": "5.0.3",
208
- "@vitest/coverage-v8": "5.0.3",
209
+ "@vitest/browser": "5.0.5",
210
+ "@vitest/browser-playwright": "5.0.5",
211
+ "@vitest/coverage-v8": "5.0.5",
209
212
  "base-ui-react-1.4.0": "npm:@base-ui/react@1.4.0",
210
213
  "base-ui-react-1.5.0": "npm:@base-ui/react@1.5.0",
211
214
  "base-ui-react-1.6.0": "npm:@base-ui/react@1.6.0",
212
215
  "base-ui-react-1.7.0": "npm:@base-ui/react@1.7.0",
216
+ "base-ui-react-1.8.0": "npm:@base-ui/react@1.8.0",
213
217
  "base-ui-react-floor": "npm:@base-ui/react@1.3.0",
214
218
  "esbuild": "^0.28.1",
215
- "jsdom": "^30.1.2",
216
- "playwright": "1.63.0",
217
- "postcss": "^8.5.28",
218
- "postcss-selector-parser": "^7.1.6",
219
+ "jsdom": "^30.1.3",
220
+ "lightningcss": "1.33.0",
221
+ "playwright": "1.64.1",
222
+ "postcss": "^8.5.32",
223
+ "postcss-selector-parser": "^7.1.7",
219
224
  "postcss-value-parser": "^4.2.0",
225
+ "prettier": "3.9.10",
220
226
  "react": "^19.3.0",
221
227
  "react-18": "npm:react@^18.3.1",
222
228
  "react-dom": "^19.3.0",
223
229
  "react-dom-18": "npm:react-dom@^18.3.1",
224
- "rolldown": "1.2.12",
230
+ "rolldown": "1.2.16",
231
+ "shadcn": "4.23.0",
225
232
  "typescript": "6.0.3",
226
- "vite": "8.3.3",
227
- "vitest": "5.0.3",
228
- "@navecss/core": "0.4.0",
229
- "@navecss/tokens": "0.4.0"
233
+ "vite": "8.3.5",
234
+ "vitest": "5.0.5",
235
+ "@navecss/core": "0.5.0",
236
+ "@navecss/stylelint-config": "0.2.0",
237
+ "@navecss/eslint-plugin": "0.2.1",
238
+ "@navecss/tokens": "0.5.0"
230
239
  },
231
240
  "engines": {
232
241
  "node": ">=22.18"
@@ -249,7 +258,7 @@
249
258
  "react-dom": "^18 || ^19"
250
259
  },
251
260
  "scripts": {
252
- "build": "node scripts/build-styles.ts && tsc -p tsconfig.build.json",
261
+ "build": "node scripts/build-styles.ts && node scripts/generate-registry.ts && tsc -p tsconfig.build.json",
253
262
  "generate": "node scripts/generate-wrappers.ts",
254
263
  "clean": "rm -rf dist",
255
264
  "typecheck": "tsc --noEmit",
@@ -257,6 +266,7 @@
257
266
  "lint:fix": "eslint src styles scripts test --fix",
258
267
  "test": "vitest run",
259
268
  "test:browser": "vitest run --config vitest.browser.config.ts",
260
- "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only --exclude-entrypoints styles.css"
269
+ "check:server-components": "node scripts/check-server-components.ts",
270
+ "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only"
261
271
  }
262
272
  }