@navecss/base-ui 0.1.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 (131) hide show
  1. package/README.md +307 -15
  2. package/dist/accordion/index.js +0 -1
  3. package/dist/alert-dialog/index.d.ts +2 -0
  4. package/dist/alert-dialog/index.js +1 -0
  5. package/dist/alert-dialog/parts.generated.d.ts +55 -0
  6. package/dist/alert-dialog/parts.generated.js +14 -0
  7. package/dist/autocomplete/index.d.ts +2 -0
  8. package/dist/autocomplete/index.js +1 -0
  9. package/dist/autocomplete/parts.generated.d.ts +116 -0
  10. package/dist/autocomplete/parts.generated.js +27 -0
  11. package/dist/avatar/index.d.ts +2 -0
  12. package/dist/avatar/index.js +1 -0
  13. package/dist/avatar/parts.generated.d.ts +18 -0
  14. package/dist/avatar/parts.generated.js +6 -0
  15. package/dist/button/index.js +0 -1
  16. package/dist/checkbox/index.js +0 -1
  17. package/dist/checkbox-group/index.js +0 -1
  18. package/dist/collapsible/index.js +0 -1
  19. package/dist/combobox/index.d.ts +2 -0
  20. package/dist/combobox/index.js +1 -0
  21. package/dist/combobox/parts.generated.d.ts +138 -0
  22. package/dist/combobox/parts.generated.js +32 -0
  23. package/dist/context-menu/index.d.ts +2 -0
  24. package/dist/context-menu/index.js +1 -0
  25. package/dist/context-menu/parts.generated.d.ts +104 -0
  26. package/dist/context-menu/parts.generated.js +23 -0
  27. package/dist/css.d.ts +1 -0
  28. package/dist/dialog/index.js +0 -1
  29. package/dist/dialog/parts.generated.d.ts +1 -0
  30. package/dist/dialog/parts.generated.js +1 -1
  31. package/dist/field/index.js +0 -1
  32. package/dist/field/parts.generated.d.ts +1 -0
  33. package/dist/fieldset/index.js +0 -1
  34. package/dist/form/index.js +0 -1
  35. package/dist/index.d.ts +13 -0
  36. package/dist/index.js +13 -1
  37. package/dist/input/index.js +0 -1
  38. package/dist/menu/index.js +0 -1
  39. package/dist/menu/parts.generated.d.ts +1 -0
  40. package/dist/menu/parts.generated.js +7 -7
  41. package/dist/menubar/index.d.ts +2 -0
  42. package/dist/menubar/index.js +2 -0
  43. package/dist/menubar/parts.generated.d.ts +6 -0
  44. package/dist/menubar/parts.generated.js +5 -0
  45. package/dist/meter/index.d.ts +2 -0
  46. package/dist/meter/index.js +1 -0
  47. package/dist/meter/parts.generated.d.ts +26 -0
  48. package/dist/meter/parts.generated.js +9 -0
  49. package/dist/navigation-menu/index.d.ts +2 -0
  50. package/dist/navigation-menu/index.js +1 -0
  51. package/dist/navigation-menu/parts.generated.d.ts +69 -0
  52. package/dist/navigation-menu/parts.generated.js +17 -0
  53. package/dist/number-field/index.js +0 -1
  54. package/dist/part.d.ts +12 -1
  55. package/dist/part.js +12 -5
  56. package/dist/popover/index.js +0 -1
  57. package/dist/popover/parts.generated.d.ts +1 -0
  58. package/dist/popover/parts.generated.js +2 -2
  59. package/dist/preview-card/index.d.ts +2 -0
  60. package/dist/preview-card/index.js +1 -0
  61. package/dist/preview-card/parts.generated.d.ts +48 -0
  62. package/dist/preview-card/parts.generated.js +14 -0
  63. package/dist/progress/index.d.ts +2 -0
  64. package/dist/progress/index.js +1 -0
  65. package/dist/progress/parts.generated.d.ts +27 -0
  66. package/dist/progress/parts.generated.js +9 -0
  67. package/dist/radio/index.js +0 -1
  68. package/dist/radio-group/index.js +0 -1
  69. package/dist/registry/base-ui-accordion.json +55 -0
  70. package/dist/registry/base-ui-alert-dialog.json +55 -0
  71. package/dist/registry/base-ui-autocomplete.json +55 -0
  72. package/dist/registry/base-ui-avatar.json +55 -0
  73. package/dist/registry/base-ui-button.json +55 -0
  74. package/dist/registry/base-ui-checkbox-group.json +55 -0
  75. package/dist/registry/base-ui-checkbox.json +55 -0
  76. package/dist/registry/base-ui-collapsible.json +55 -0
  77. package/dist/registry/base-ui-combobox.json +55 -0
  78. package/dist/registry/base-ui-context-menu.json +55 -0
  79. package/dist/registry/base-ui-dialog.json +55 -0
  80. package/dist/registry/base-ui-field.json +55 -0
  81. package/dist/registry/base-ui-fieldset.json +55 -0
  82. package/dist/registry/base-ui-input.json +55 -0
  83. package/dist/registry/base-ui-menu.json +55 -0
  84. package/dist/registry/base-ui-menubar.json +55 -0
  85. package/dist/registry/base-ui-meter.json +55 -0
  86. package/dist/registry/base-ui-navigation-menu.json +55 -0
  87. package/dist/registry/base-ui-number-field.json +55 -0
  88. package/dist/registry/base-ui-popover.json +55 -0
  89. package/dist/registry/base-ui-preview-card.json +55 -0
  90. package/dist/registry/base-ui-progress.json +55 -0
  91. package/dist/registry/base-ui-radio-group.json +55 -0
  92. package/dist/registry/base-ui-radio.json +55 -0
  93. package/dist/registry/base-ui-scroll-area.json +55 -0
  94. package/dist/registry/base-ui-select.json +55 -0
  95. package/dist/registry/base-ui-separator.json +55 -0
  96. package/dist/registry/base-ui-slider.json +55 -0
  97. package/dist/registry/base-ui-switch.json +55 -0
  98. package/dist/registry/base-ui-tabs.json +55 -0
  99. package/dist/registry/base-ui-toast.json +55 -0
  100. package/dist/registry/base-ui-toggle-group.json +55 -0
  101. package/dist/registry/base-ui-toggle.json +55 -0
  102. package/dist/registry/base-ui-toolbar.json +55 -0
  103. package/dist/registry/base-ui-tooltip.json +55 -0
  104. package/dist/registry/registry.json +1757 -0
  105. package/dist/scroll-area/index.d.ts +2 -0
  106. package/dist/scroll-area/index.js +1 -0
  107. package/dist/scroll-area/parts.generated.d.ts +31 -0
  108. package/dist/scroll-area/parts.generated.js +10 -0
  109. package/dist/select/index.js +0 -1
  110. package/dist/select/parts.generated.js +3 -3
  111. package/dist/separator/index.d.ts +2 -0
  112. package/dist/separator/index.js +2 -0
  113. package/dist/separator/parts.generated.d.ts +6 -0
  114. package/dist/separator/parts.generated.js +5 -0
  115. package/dist/slider/index.js +0 -1
  116. package/dist/styles.css +154 -11
  117. package/dist/switch/index.js +0 -1
  118. package/dist/tabs/index.js +0 -1
  119. package/dist/tabs/parts.generated.js +1 -1
  120. package/dist/toast/index.d.ts +2 -0
  121. package/dist/toast/index.js +1 -0
  122. package/dist/toast/parts.generated.d.ts +61 -0
  123. package/dist/toast/parts.generated.js +16 -0
  124. package/dist/toggle/index.js +0 -1
  125. package/dist/toggle-group/index.js +0 -1
  126. package/dist/toolbar/index.js +0 -1
  127. package/dist/toolbar/parts.generated.d.ts +1 -0
  128. package/dist/tooltip/index.js +0 -1
  129. package/dist/tooltip/parts.generated.d.ts +1 -0
  130. package/dist/tooltip/parts.generated.js +2 -2
  131. package/package.json +97 -20
@@ -0,0 +1,2 @@
1
+ export * as ScrollArea from './parts.generated.ts';
2
+ export type * from '@base-ui/react/scroll-area';
@@ -0,0 +1 @@
1
+ export * as ScrollArea from "./parts.generated.js";
@@ -0,0 +1,31 @@
1
+ import { ScrollArea as Base } from '@base-ui/react/scroll-area';
2
+ export declare const Root: typeof Base.Root;
3
+ export declare namespace Root {
4
+ type State = Base.Root.State;
5
+ type Props = Base.Root.Props;
6
+ }
7
+ export declare const Viewport: typeof Base.Viewport;
8
+ export declare namespace Viewport {
9
+ type Props = Base.Viewport.Props;
10
+ type State = Base.Viewport.State;
11
+ }
12
+ export declare const Scrollbar: typeof Base.Scrollbar;
13
+ export declare namespace Scrollbar {
14
+ type State = Base.Scrollbar.State;
15
+ type Props = Base.Scrollbar.Props;
16
+ }
17
+ export declare const Content: typeof Base.Content;
18
+ export declare namespace Content {
19
+ type State = Base.Content.State;
20
+ type Props = Base.Content.Props;
21
+ }
22
+ export declare const Thumb: typeof Base.Thumb;
23
+ export declare namespace Thumb {
24
+ type State = Base.Thumb.State;
25
+ type Props = Base.Thumb.Props;
26
+ }
27
+ export declare const Corner: typeof Base.Corner;
28
+ export declare namespace Corner {
29
+ type State = Base.Corner.State;
30
+ type Props = Base.Corner.Props;
31
+ }
@@ -0,0 +1,10 @@
1
+ 'use client';
2
+ // Generated by scripts/generate-wrappers.ts: change the roster or the generator, not this file.
3
+ import { ScrollArea as Base } from '@base-ui/react/scroll-area';
4
+ import { wrapPart } from "../part.js";
5
+ export const Root = /*#__PURE__*/ (() => wrapPart(Base.Root, 'nave-base-ui-scroll-area'))();
6
+ export const Viewport = /*#__PURE__*/ (() => wrapPart(Base.Viewport, 'nave-base-ui-scroll-area-viewport'))();
7
+ export const Scrollbar = /*#__PURE__*/ (() => wrapPart(Base.Scrollbar, 'nave-base-ui-scroll-area-scrollbar'))();
8
+ export const Content = /*#__PURE__*/ (() => Base.Content)();
9
+ export const Thumb = /*#__PURE__*/ (() => wrapPart(Base.Thumb, 'nave-base-ui-scroll-area-thumb'))();
10
+ export const Corner = /*#__PURE__*/ (() => wrapPart(Base.Corner, 'nave-base-ui-scroll-area-corner'))();
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Select from "./parts.generated.js";
@@ -10,12 +10,12 @@ export const Icon = /*#__PURE__*/ (() => wrapPart(Base.Icon, 'nave-base-ui-selec
10
10
  export const Portal = /*#__PURE__*/ (() => Base.Portal)();
11
11
  export const Backdrop = /*#__PURE__*/ (() => Base.Backdrop)();
12
12
  export const Positioner = /*#__PURE__*/ (() => Base.Positioner)();
13
- export const Popup = /*#__PURE__*/ (() => wrapPart(Base.Popup, 'nave-base-ui-list-popup'))();
13
+ export const Popup = /*#__PURE__*/ (() => wrapPart(Base.Popup, 'nave-base-ui-list-popup nave-base-ui-popup-fade'))();
14
14
  export const List = /*#__PURE__*/ (() => Base.List)();
15
- export const Item = /*#__PURE__*/ (() => wrapPart(Base.Item, 'nave-base-ui-item'))();
15
+ export const Item = /*#__PURE__*/ (() => wrapPart(Base.Item, 'nave-base-ui-item nave-base-ui-item-highlight'))();
16
16
  export const ItemIndicator = /*#__PURE__*/ (() => Base.ItemIndicator)();
17
17
  export const ItemText = /*#__PURE__*/ (() => Base.ItemText)();
18
- export const Arrow = /*#__PURE__*/ (() => wrapPart(Base.Arrow, 'nave-base-ui-arrow'))();
18
+ export const Arrow = /*#__PURE__*/ (() => wrapPart(Base.Arrow, 'nave-base-ui-arrow nave-base-ui-arrow-inline'))();
19
19
  export const ScrollDownArrow = /*#__PURE__*/ (() => Base.ScrollDownArrow)();
20
20
  export const ScrollUpArrow = /*#__PURE__*/ (() => Base.ScrollUpArrow)();
21
21
  export const Group = /*#__PURE__*/ (() => Base.Group)();
@@ -0,0 +1,2 @@
1
+ export { Separator } from './parts.generated.ts';
2
+ export type * from '@base-ui/react/separator';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable import-x/export -- the named export wins over the star re-export, as TypeScript has it */
2
+ export { Separator } from "./parts.generated.js";
@@ -0,0 +1,6 @@
1
+ import { Separator as Base } from '@base-ui/react/separator';
2
+ export declare const Separator: typeof Base;
3
+ export declare namespace Separator {
4
+ type Props = Base.Props;
5
+ type State = Base.State;
6
+ }
@@ -0,0 +1,5 @@
1
+ 'use client';
2
+ // Generated by scripts/generate-wrappers.ts: change the roster or the generator, not this file.
3
+ import { Separator as Base } from '@base-ui/react/separator';
4
+ import { wrapPart } from "../part.js";
5
+ export const Separator = /*#__PURE__*/ (() => wrapPart(Base, 'nave-base-ui-toolbar-separator'))();
@@ -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,33 +66,42 @@
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);
77
80
  } &:disabled, &[aria-disabled="true"]{ background-color: transparent; border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
81
+ } &[data-nave-variant="ghost"]{ background-color: transparent; border-color: transparent;
82
+ } &[data-nave-variant="ghost"]:hover:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
83
+ } &[data-nave-variant="ghost"]:active:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
84
+ } &[data-nave-variant="ghost"][aria-expanded="true"]:not(:disabled, [aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
85
+ } &{ outline: none;
78
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;
79
87
  } }
80
- .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);
81
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;
82
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;
83
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;
84
93
  } }
85
94
  .nave-base-ui-toggle-group { display: flex; gap: var(--nave-spacing-control-xs); &[data-orientation="vertical"]{ flex-direction: column;
86
95
  } }
87
- .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;
88
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));
89
98
  } &:disabled, &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
99
+ } &{ outline: none;
90
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;
91
101
  } }
92
- .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));
93
103
  } &:disabled, &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
104
+ } &{ outline: none;
94
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;
95
106
  } }
96
107
  .nave-base-ui-select-value {
@@ -104,23 +115,26 @@
104
115
  .nave-base-ui-field-error { font-size: var(--nave-font-size-sm); color: var(--nave-color-feedback-danger-foreground); }
105
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); }
106
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); }
107
- .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);
108
119
  } &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
109
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;
110
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;
111
123
  } }
112
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;
113
125
  } }
114
- .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);
115
127
  } &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
116
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;
117
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;
118
131
  } }
119
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); }
120
133
  .nave-base-ui-choice-group { display: flex; flex-direction: column; gap: var(--nave-spacing-control-sm); }
121
- .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));
122
135
  } &[aria-disabled="true"]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled); cursor: not-allowed;
123
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;
124
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;
125
139
  } }
126
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);
@@ -132,7 +146,8 @@
132
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;
133
147
  } &[data-disabled]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled);
134
148
  } }
135
- .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;
136
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;
137
152
  } }
138
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;
@@ -158,4 +173,132 @@
158
173
  } &[data-disabled]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
159
174
  } }
160
175
  .nave-base-ui-slider-value { font-size: var(--nave-font-size-sm); font-variant-numeric: tabular-nums; color: var(--nave-color-content-secondary); }
176
+ .nave-base-ui-item-highlight { border-radius: var(--nave-radius-sm); &[data-highlighted]:not([aria-disabled="true"]){ background-color: var(--nave-color-action-highlight);
177
+ } }
178
+ .nave-base-ui-active-option { position: relative; &[data-highlighted]::before{ content: ""; position: absolute; inset: calc(-1 * (var(--nave-border-width-focus, 2px) + 2px)); border-style: solid; border-width: var(--nave-border-width-focus, 2px); border-color: var(--nave-color-border-focus, currentColor); border-radius: calc(var(--nave-radius-sm) + var(--nave-border-width-focus, 2px) + 2px); pointer-events: none;
179
+ } }
180
+ .nave-base-ui-backdrop { position: fixed; inset: 0; background-color: var(--nave-color-backdrop-modal); transition-property: opacity; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-decelerate); &[data-starting-style], &[data-ending-style]{ opacity: 0;
181
+ } &[data-ending-style]{ transition-timing-function: var(--nave-motion-easing-accelerate);
182
+ } @media (prefers-reduced-motion: reduce){
183
+
184
+ &, &[data-instant]{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
185
+ }
186
+ } }
187
+ .nave-base-ui-popup-motion { transition-property: opacity; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-decelerate); &[data-starting-style], &[data-ending-style]{ opacity: 0;
188
+ } &[data-ending-style]{ transition-timing-function: var(--nave-motion-easing-accelerate);
189
+ } &[data-instant]{ transition-duration: var(--nave-motion-duration-instant);
190
+ } @media (prefers-reduced-motion: reduce){
191
+
192
+ &, &[data-instant]{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
193
+ }
194
+ } }
195
+ .nave-base-ui-popup-fade { transition-property: opacity; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-decelerate); &[data-starting-style], &[data-ending-style]{ opacity: 0;
196
+ } &[data-ending-style]{ transition-timing-function: var(--nave-motion-easing-accelerate);
197
+ } @media (prefers-reduced-motion: reduce){
198
+
199
+ &, &[data-instant]{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
200
+ }
201
+ } }
202
+ .nave-base-ui-tooltip-motion { transition-property: opacity; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-decelerate); &[data-starting-style], &[data-ending-style]{ opacity: 0;
203
+ } &[data-ending-style]{ transition-timing-function: var(--nave-motion-easing-accelerate);
204
+ } &[data-instant]{ transition-duration: var(--nave-motion-duration-instant);
205
+ } @media (prefers-reduced-motion: reduce){
206
+
207
+ &, &[data-instant]{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
208
+ }
209
+ } }
210
+ .nave-base-ui-tab-indicator-motion { transition-property: left, top, width, height; transition-duration: var(--nave-motion-duration-base); transition-timing-function: var(--nave-motion-easing-standard); @media (prefers-reduced-motion: reduce){
211
+
212
+ &, &[data-instant]{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
213
+ }
214
+ } }
215
+ .nave-base-ui-arrow-inline {
216
+
217
+ &[data-side="inline-start"], &[data-side="inline-end"]{ position: absolute; box-sizing: border-box; inline-size: 8px; block-size: 8px; background-color: inherit; border-style: inherit; border-width: inherit; border-color: inherit; border-top-style: none; border-left-style: none;
218
+ }
219
+
220
+ &[data-side="inline-start"]{ inset-inline-end: -4px; rotate: -45deg;
221
+ }
222
+
223
+ &[data-side="inline-end"]{ inset-inline-start: -4px; rotate: 135deg;
224
+ }
225
+
226
+ &[data-side="inline-start"]:dir(rtl){ rotate: 135deg;
227
+ }
228
+
229
+ &[data-side="inline-end"]:dir(rtl){ rotate: -45deg;
230
+ } }
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);
232
+ } &[data-disabled]{ border-color: var(--nave-color-border-disabled); color: var(--nave-color-content-disabled);
233
+ } }
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;
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));
236
+ } &:disabled, &[aria-disabled="true"]{ color: var(--nave-color-content-disabled); cursor: not-allowed;
237
+ } &[aria-haspopup="dialog"]:disabled, &[aria-haspopup="dialog"][aria-disabled="true"]{ border-color: var(--nave-color-border-disabled);
238
+ } &{ outline: none;
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;
240
+ } }
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); }
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;
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;
245
+ } }
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;
247
+ } }
248
+ .nave-base-ui-list-empty { font-size: var(--nave-font-size-sm); color: var(--nave-color-content-secondary); [data-empty] > &{ padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md);
249
+ } }
250
+ .nave-base-ui-toast-viewport { display: flex; flex-direction: column; gap: var(--nave-spacing-content-sm); }
251
+ .nave-base-ui-toast-placement { position: fixed; inset-block-end: var(--nave-spacing-content-lg); inset-inline-end: var(--nave-spacing-content-lg); inline-size: 20rem; max-inline-size: calc(100% - 2 * var(--nave-spacing-content-lg)); z-index: var(--nave-layer-toast); }
252
+ .nave-base-ui-toast-root { box-sizing: border-box; background-color: var(--nave-color-surface-overlay); color: var(--nave-color-content-primary); border: var(--nave-border-width-sm) solid var(--nave-color-border-default); border-radius: var(--nave-radius-card); box-shadow: var(--nave-shadow-overlay); padding: var(--nave-spacing-content-md); font-size: var(--nave-font-size-sm); }
253
+ .nave-base-ui-toast-fade { transition-property: opacity; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-decelerate); &[data-starting-style], &[data-ending-style]:not([data-swipe-direction]){ opacity: 0;
254
+ } &[data-ending-style]{ transition-timing-function: var(--nave-motion-easing-accelerate);
255
+ } @media (prefers-reduced-motion: reduce){
256
+
257
+ &{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
258
+ }
259
+ } }
260
+ .nave-base-ui-toast-limit {
261
+
262
+ &[data-limited]{ display: none;
263
+ } }
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; }
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;
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;
268
+ } }
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;
270
+ } @media (prefers-reduced-motion: reduce){
271
+
272
+ &{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
273
+ }
274
+ } }
275
+ .nave-base-ui-navigation-menu-fade { transition-property: opacity; transition-duration: var(--nave-motion-duration-fast); transition-timing-function: var(--nave-motion-easing-decelerate); &[data-starting-style], &[data-ending-style]{ opacity: 0;
276
+ } &[data-ending-style]{ transition-property: none;
277
+ } @media (prefers-reduced-motion: reduce){
278
+
279
+ &{ transition-duration: calc(0 * var(--nave-motion-duration-fast));
280
+ }
281
+ } }
282
+ .nave-base-ui-current-link { padding-block: var(--nave-border-width-lg); &[aria-current="page"]{ text-decoration-line: underline; text-decoration-thickness: var(--nave-border-width-lg);
283
+ } }
284
+ .nave-base-ui-scroll-area { display: flex; flex-direction: column; }
285
+ .nave-base-ui-scroll-area-viewport { box-sizing: border-box; flex: 1; min-block-size: 0; padding: var(--nave-spacing-control-xs); scroll-padding: var(--nave-spacing-control-xs); &[data-has-overflow-y]{ padding-inline-end: calc(var(--nave-size-control-xs) + var(--nave-spacing-control-xs)); scroll-padding-inline-end: calc(var(--nave-size-control-xs) + var(--nave-spacing-control-xs));
286
+ } &[data-has-overflow-x]{ padding-block-end: calc(var(--nave-size-control-xs) + var(--nave-spacing-control-xs)); scroll-padding-block-end: calc(var(--nave-size-control-xs) + var(--nave-spacing-control-xs));
287
+ } }
288
+ .nave-base-ui-scroll-area-scrollbar { box-sizing: border-box; background-color: var(--nave-color-surface-base); &[data-orientation="vertical"]{ inline-size: var(--nave-size-control-xs); padding-inline: calc((var(--nave-size-control-xs) - var(--nave-border-width-lg)) / 2);
289
+ } &[data-orientation="horizontal"]{ block-size: var(--nave-size-control-xs); padding-block: calc((var(--nave-size-control-xs) - var(--nave-border-width-lg)) / 2);
290
+ } }
291
+ .nave-base-ui-scroll-area-thumb { box-sizing: border-box; border-radius: var(--nave-radius-full); &[data-orientation="vertical"]{ border-inline: calc(var(--nave-border-width-lg) / 2) solid var(--nave-color-border-control);
292
+ } &[data-orientation="horizontal"]{ block-size: 100%; border-block: calc(var(--nave-border-width-lg) / 2) solid var(--nave-color-border-control);
293
+ } }
294
+ .nave-base-ui-scroll-area-corner { background-color: var(--nave-color-surface-base); }
295
+ .nave-base-ui-value-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nave-spacing-control-xs); }
296
+ .nave-base-ui-value-bar-track { box-sizing: border-box; flex: 0 0 100%; min-block-size: calc(var(--nave-border-width-lg) + 4 * var(--nave-border-width-sm)); padding: var(--nave-border-width-sm); border: var(--nave-border-width-sm) solid var(--nave-color-border-control); border-radius: var(--nave-radius-full); display: flex; align-items: center; }
297
+ .nave-base-ui-value-bar-indicator { box-sizing: border-box; max-block-size: var(--nave-border-width-lg); border-block: calc(var(--nave-border-width-lg) / 2) solid currentColor; border-radius: var(--nave-radius-full); color: var(--nave-color-content-primary); &[data-indeterminate]{ display: none;
298
+ } }
299
+ .nave-base-ui-avatar { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; border: var(--nave-border-width-sm) solid var(--nave-color-border-default); border-radius: var(--nave-radius-full); inline-size: var(--nave-size-avatar-md); block-size: var(--nave-size-avatar-md); font-size: var(--nave-font-size-sm); font-weight: var(--nave-font-weight-medium); line-height: var(--nave-line-height-none); &[data-nave-size="sm"]{ inline-size: var(--nave-size-avatar-sm); block-size: var(--nave-size-avatar-sm); font-size: var(--nave-font-size-xs);
300
+ } &[data-nave-size="lg"]{ inline-size: var(--nave-size-avatar-lg); block-size: var(--nave-size-avatar-lg); font-size: var(--nave-font-size-xl);
301
+ } }
302
+ .nave-base-ui-avatar-image { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
303
+ .nave-base-ui-avatar-fallback { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; border-radius: inherit; background-color: var(--nave-color-surface-sunken); color: var(--nave-color-content-primary); }
161
304
  }
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Switch from "./parts.generated.js";
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Tabs from "./parts.generated.js";
@@ -4,6 +4,6 @@ import { Tabs as Base } from '@base-ui/react/tabs';
4
4
  import { wrapPart } from "../part.js";
5
5
  export const Root = /*#__PURE__*/ (() => Base.Root)();
6
6
  export const Tab = /*#__PURE__*/ (() => wrapPart(Base.Tab, 'nave-base-ui-tab'))();
7
- export const Indicator = /*#__PURE__*/ (() => wrapPart(Base.Indicator, 'nave-base-ui-tab-indicator'))();
7
+ export const Indicator = /*#__PURE__*/ (() => wrapPart(Base.Indicator, 'nave-base-ui-tab-indicator nave-base-ui-tab-indicator-motion'))();
8
8
  export const Panel = /*#__PURE__*/ (() => Base.Panel)();
9
9
  export const List = /*#__PURE__*/ (() => wrapPart(Base.List, 'nave-base-ui-tab-list'))();
@@ -0,0 +1,2 @@
1
+ export * as Toast from './parts.generated.ts';
2
+ export type * from '@base-ui/react/toast';
@@ -0,0 +1 @@
1
+ export * as Toast from "./parts.generated.js";
@@ -0,0 +1,61 @@
1
+ import type { ReactElement, RefAttributes } from 'react';
2
+ import { Toast as Base } from '@base-ui/react/toast';
3
+ import { type VariantProps } from '../part.ts';
4
+ export declare const Provider: typeof Base.Provider;
5
+ export declare namespace Provider {
6
+ type State = Base.Provider.State;
7
+ type Props = Base.Provider.Props;
8
+ }
9
+ export declare const Viewport: typeof Base.Viewport;
10
+ export declare namespace Viewport {
11
+ type State = Base.Viewport.State;
12
+ type Props = Base.Viewport.Props;
13
+ }
14
+ export declare const Root: typeof Base.Root;
15
+ export declare namespace Root {
16
+ type ToastObject<Data extends object = any> = Base.Root.ToastObject<Data>;
17
+ type State = Base.Root.State;
18
+ type Props = Base.Root.Props;
19
+ }
20
+ export declare const Content: typeof Base.Content;
21
+ export declare namespace Content {
22
+ type State = Base.Content.State;
23
+ type Props = Base.Content.Props;
24
+ }
25
+ export declare const Description: typeof Base.Description;
26
+ export declare namespace Description {
27
+ type State = Base.Description.State;
28
+ type Props = Base.Description.Props;
29
+ }
30
+ export declare const Title: typeof Base.Title;
31
+ export declare namespace Title {
32
+ type State = Base.Title.State;
33
+ type Props = Base.Title.Props;
34
+ }
35
+ export declare const Close: (props: Omit<Base.Close.Props, 'ref'> & RefAttributes<HTMLButtonElement> & VariantProps) => ReactElement;
36
+ export declare namespace Close {
37
+ type State = Base.Close.State;
38
+ type Props = Base.Close.Props & VariantProps;
39
+ }
40
+ export declare const Action: (props: Omit<Base.Action.Props, 'ref'> & RefAttributes<HTMLButtonElement> & VariantProps) => ReactElement;
41
+ export declare namespace Action {
42
+ type State = Base.Action.State;
43
+ type Props = Base.Action.Props & VariantProps;
44
+ }
45
+ export declare const Portal: typeof Base.Portal;
46
+ export declare namespace Portal {
47
+ type State = Base.Portal.State;
48
+ type Props = Base.Portal.Props;
49
+ }
50
+ export declare const Positioner: typeof Base.Positioner;
51
+ export declare namespace Positioner {
52
+ type State = Base.Positioner.State;
53
+ type Props = Base.Positioner.Props;
54
+ }
55
+ export declare const Arrow: typeof Base.Arrow;
56
+ export declare namespace Arrow {
57
+ type State = Base.Arrow.State;
58
+ type Props = Base.Arrow.Props;
59
+ }
60
+ export declare const useToastManager: typeof Base.useToastManager;
61
+ export declare const createToastManager: typeof Base.createToastManager;
@@ -0,0 +1,16 @@
1
+ 'use client';
2
+ import { Toast as Base } from '@base-ui/react/toast';
3
+ import { wrapPart, wrapVariantPart } from "../part.js";
4
+ export const Provider = /*#__PURE__*/ (() => Base.Provider)();
5
+ export const Viewport = /*#__PURE__*/ (() => wrapPart(Base.Viewport, 'nave-base-ui-toast-viewport nave-base-ui-toast-placement'))();
6
+ export const Root = /*#__PURE__*/ (() => wrapPart(Base.Root, 'nave-base-ui-toast-root nave-base-ui-toast-fade nave-base-ui-toast-limit'))();
7
+ export const Content = /*#__PURE__*/ (() => Base.Content)();
8
+ export const Description = /*#__PURE__*/ (() => wrapPart(Base.Description, 'nave-base-ui-description'))();
9
+ export const Title = /*#__PURE__*/ (() => wrapPart(Base.Title, 'nave-base-ui-title'))();
10
+ export const Close = /*#__PURE__*/ (() => wrapVariantPart(Base.Close, 'nave-base-ui-button'))();
11
+ export const Action = /*#__PURE__*/ (() => wrapVariantPart(Base.Action, 'nave-base-ui-button'))();
12
+ export const Portal = /*#__PURE__*/ (() => Base.Portal)();
13
+ export const Positioner = /*#__PURE__*/ (() => Base.Positioner)();
14
+ export const Arrow = /*#__PURE__*/ (() => wrapPart(Base.Arrow, 'nave-base-ui-arrow nave-base-ui-arrow-inline'))();
15
+ export const useToastManager = /*#__PURE__*/ (() => Base.useToastManager)();
16
+ export const createToastManager = /*#__PURE__*/ (() => Base.createToastManager)();
@@ -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";
@@ -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";
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Toolbar from "./parts.generated.js";
@@ -33,3 +33,4 @@ export declare namespace Input {
33
33
  type State = Base.Input.State;
34
34
  type Props = Base.Input.Props;
35
35
  }
36
+ export type Orientation = Base.Orientation;
@@ -1,2 +1 @@
1
- 'use client';
2
1
  export * as Tooltip from "./parts.generated.js";
@@ -10,6 +10,7 @@ export declare namespace Root {
10
10
  type ChangeEventDetails = Base.Root.ChangeEventDetails;
11
11
  }
12
12
  export declare const Trigger: <Payload>(props: Omit<Base.Trigger.Props<Payload>, 'ref'> & RefAttributes<HTMLElement> & VariantProps) => ReactElement;
13
+ export type Trigger = typeof Trigger;
13
14
  export declare namespace Trigger {
14
15
  type State = Base.Trigger.State;
15
16
  type Props<Payload = unknown> = Base.Trigger.Props<Payload> & VariantProps;
@@ -5,8 +5,8 @@ export const Root = /*#__PURE__*/ (() => Base.Root)();
5
5
  export const Trigger = /*#__PURE__*/ (() => wrapVariantPart(Base.Trigger, 'nave-base-ui-button'))();
6
6
  export const Portal = /*#__PURE__*/ (() => Base.Portal)();
7
7
  export const Positioner = /*#__PURE__*/ (() => Base.Positioner)();
8
- export const Popup = /*#__PURE__*/ (() => wrapPart(Base.Popup, 'nave-base-ui-tooltip-popup'))();
9
- export const Arrow = /*#__PURE__*/ (() => wrapPart(Base.Arrow, 'nave-base-ui-arrow'))();
8
+ export const Popup = /*#__PURE__*/ (() => wrapPart(Base.Popup, 'nave-base-ui-tooltip-popup nave-base-ui-tooltip-motion'))();
9
+ export const Arrow = /*#__PURE__*/ (() => wrapPart(Base.Arrow, 'nave-base-ui-arrow nave-base-ui-arrow-inline'))();
10
10
  export const Provider = /*#__PURE__*/ (() => Base.Provider)();
11
11
  export const Viewport = /*#__PURE__*/ (() => Base.Viewport)();
12
12
  export const createHandle = /*#__PURE__*/ (() => Base.createHandle)();