@navecss/base-ui 0.3.0 → 0.4.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.
- package/README.md +2 -2
- package/dist/registry/base-ui-accordion.json +3 -3
- package/dist/registry/base-ui-alert-dialog.json +4 -4
- package/dist/registry/base-ui-autocomplete.json +3 -3
- package/dist/registry/base-ui-avatar.json +3 -3
- package/dist/registry/base-ui-button.json +4 -4
- package/dist/registry/base-ui-checkbox-group.json +3 -3
- package/dist/registry/base-ui-checkbox.json +3 -3
- package/dist/registry/base-ui-collapsible.json +3 -3
- package/dist/registry/base-ui-combobox.json +3 -3
- package/dist/registry/base-ui-context-menu.json +3 -3
- package/dist/registry/base-ui-dialog.json +4 -4
- package/dist/registry/base-ui-field.json +3 -3
- package/dist/registry/base-ui-fieldset.json +3 -3
- package/dist/registry/base-ui-input.json +3 -3
- package/dist/registry/base-ui-menu.json +4 -4
- package/dist/registry/base-ui-menubar.json +3 -3
- package/dist/registry/base-ui-meter.json +3 -3
- package/dist/registry/base-ui-navigation-menu.json +3 -3
- package/dist/registry/base-ui-number-field.json +3 -3
- package/dist/registry/base-ui-popover.json +4 -4
- package/dist/registry/base-ui-preview-card.json +3 -3
- package/dist/registry/base-ui-progress.json +3 -3
- package/dist/registry/base-ui-radio-group.json +3 -3
- package/dist/registry/base-ui-radio.json +3 -3
- package/dist/registry/base-ui-scroll-area.json +3 -3
- package/dist/registry/base-ui-select.json +3 -3
- package/dist/registry/base-ui-separator.json +3 -3
- package/dist/registry/base-ui-slider.json +3 -3
- package/dist/registry/base-ui-switch.json +3 -3
- package/dist/registry/base-ui-tabs.json +3 -3
- package/dist/registry/base-ui-toast.json +4 -4
- package/dist/registry/base-ui-toggle-group.json +3 -3
- package/dist/registry/base-ui-toggle.json +4 -4
- package/dist/registry/base-ui-toolbar.json +4 -4
- package/dist/registry/base-ui-tooltip.json +4 -4
- package/dist/registry/registry.json +105 -105
- package/dist/styles.css +5 -1
- package/package.json +13 -12
package/README.md
CHANGED
|
@@ -104,7 +104,7 @@ export default function SaveButton() {
|
|
|
104
104
|
There are four steps, from the lightest:
|
|
105
105
|
|
|
106
106
|
1. **Tokens.** Re-theme with Nave's tokens and every part follows. Nothing else is needed for a different palette, radius or spacing.
|
|
107
|
-
2. **`className`.** Pass a class to any part, as a string or as Base UI's function of the part's state. Put its rules in `@layer components.consumer`: that layer comes after Nave's, so your class wins in every state, whatever the specificity of Nave's rule. It also means that restyling a property restyles it in every state: set `background-color` on a Button and your colour replaces
|
|
107
|
+
2. **`className`.** Pass a class to any part, as a string or as Base UI's function of the part's state. Put its rules in `@layer components.consumer`: that layer comes after Nave's, so your class wins in every state, whatever the specificity of Nave's rule. It also means that restyling a property restyles it in every state: set `background-color` on a Button, on a trigger or close that Nave styles as a button, or on a Toggle, and your colour replaces its hover and active colours in every variant and a disabled one's too, so write the states you want yourself.
|
|
108
108
|
3. **A copy of the component.** To change Nave's rules for a component rather than override them, copy its files into your project with shadcn's CLI and change the copy: see [Copy a component into your project](#copy-a-component-into-your-project).
|
|
109
109
|
4. **The raw Base UI part.** Import the part from `@base-ui/react/<component>` and style it from scratch. It mixes freely with wrapped parts.
|
|
110
110
|
|
|
@@ -182,7 +182,7 @@ A component added this way keeps its rules in `@layer components.consumer`, the
|
|
|
182
182
|
|
|
183
183
|
No later release of `@navecss/base-ui` changes the copied files. To take a later release's version of a component, upgrade the package and run `add` again, or use that release's address. `add` asks before it replaces a copied file whose content differs from the new one, whether you changed it or the release did, and `--overwrite` replaces them without asking. In a run with no terminal to answer, such as an agent or a CI job, it stops at the first such file and still exits with success, so that file and the ones after it stay as they were. The exit status does not show that it stopped, but the output does: it ends with the question about that file.
|
|
184
184
|
|
|
185
|
-
The registry names no versions for the packages a copy depends on, so `add` leaves the versions in your `package.json` as they are, and installs the latest version of any that is missing. A copy needs `@base-ui/react` 1.3 or later in the 1.x line, `@navecss/tokens` 0.
|
|
185
|
+
The registry names no versions for the packages a copy depends on, so `add` leaves the versions in your `package.json` as they are, and installs the latest version of any that is missing. A copy needs `@base-ui/react` 1.3 or later in the 1.x line, `@navecss/tokens` 0.5.0 or later before 1.0, and React 18 or 19.
|
|
186
186
|
|
|
187
187
|
## What is styled
|
|
188
188
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Accordion, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Accordion } from the nave-accordion file just written, not from @navecss/base-ui/accordion.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Accordion } from the nave-accordion file just written, not from @navecss/base-ui/accordion.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Accordion from './nave-accordion.parts'\nexport type * from '@base-ui/react/accordion'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-accordion",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Accordion",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Alert Dialog, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { AlertDialog } from the nave-alert-dialog file just written, not from @navecss/base-ui/alert-dialog.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { AlertDialog } from the nave-alert-dialog file just written, not from @navecss/base-ui/alert-dialog.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as AlertDialog from './nave-alert-dialog.parts'\nexport type * from '@base-ui/react/alert-dialog'\n",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": "registry:file"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .dialogPopup {\n box-sizing: border-box;\n position: fixed;\n inset: 0;\n margin: auto;\n block-size: fit-content;\n inline-size: 32rem;\n max-inline-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n max-block-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n overflow-y: auto;\n scroll-padding: var(--nave-spacing-content-lg);\n background-color: var(--nave-color-surface-overlay);\n color: var(--nave-color-content-primary);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-default);\n border-radius: var(--nave-radius-overlay);\n box-shadow: var(--nave-shadow-modal);\n padding: var(--nave-spacing-content-lg);\n }\n .title {\n margin: 0;\n font-size: var(--nave-font-size-lg);\n font-weight: var(--nave-font-weight-semibold);\n line-height: var(--nave-line-height-tight);\n }\n .description {\n margin: 0;\n font-size: var(--nave-font-size-sm);\n line-height: var(--nave-line-height-base);\n color: var(--nave-color-content-secondary);\n }\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-
|
|
31
|
+
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .dialogPopup {\n box-sizing: border-box;\n position: fixed;\n inset: 0;\n margin: auto;\n block-size: fit-content;\n inline-size: 32rem;\n max-inline-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n max-block-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n overflow-y: auto;\n scroll-padding: var(--nave-spacing-content-lg);\n background-color: var(--nave-color-surface-overlay);\n color: var(--nave-color-content-primary);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-default);\n border-radius: var(--nave-radius-overlay);\n box-shadow: var(--nave-shadow-modal);\n padding: var(--nave-spacing-content-lg);\n }\n .title {\n margin: 0;\n font-size: var(--nave-font-size-lg);\n font-weight: var(--nave-font-weight-semibold);\n line-height: var(--nave-line-height-tight);\n }\n .description {\n margin: 0;\n font-size: var(--nave-font-size-sm);\n line-height: var(--nave-line-height-base);\n color: var(--nave-color-content-secondary);\n }\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:is(\n [aria-haspopup=\"menu\"],\n [aria-haspopup=\"true\"],\n [aria-haspopup=\"dialog\"]\n ):not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &:not([data-nave-variant=\"primary\"], [data-nave-variant=\"ghost\"]):hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-secondary-hover);\n }\n &:not(\n [data-nave-variant=\"primary\"],\n [data-nave-variant=\"ghost\"]\n ):active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-secondary-active);\n }\n & {\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the outline the &:focus-visible rule for this class draws replaces the browser's default focus indicator; keep that rule while this declaration stays. */\n outline: none;\n }\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--nave-border-width-focus, 2px);\n outline-color: var(--nave-color-border-focus, currentColor);\n outline-offset: 2px;\n }\n }\n .backdrop {\n position: fixed;\n inset: 0;\n background-color: var(--nave-color-backdrop-modal);\n transition-property: opacity;\n transition-duration: var(--nave-motion-duration-fast);\n transition-timing-function: var(--nave-motion-easing-decelerate);\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n &[data-ending-style] {\n transition-timing-function: var(--nave-motion-easing-accelerate);\n }\n @media (prefers-reduced-motion: reduce) {\n &,\n &[data-instant] {\n transition-duration: calc(0 * var(--nave-motion-duration-fast));\n }\n }\n }\n .popupFade {\n transition-property: opacity;\n transition-duration: var(--nave-motion-duration-fast);\n transition-timing-function: var(--nave-motion-easing-decelerate);\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n &[data-ending-style] {\n transition-timing-function: var(--nave-motion-easing-accelerate);\n }\n @media (prefers-reduced-motion: reduce) {\n &,\n &[data-instant] {\n transition-duration: calc(0 * var(--nave-motion-duration-fast));\n }\n }\n }\n}\n",
|
|
32
32
|
"path": "registry/nave/nave-alert-dialog.module.css",
|
|
33
33
|
"target": "components/nave/nave-alert-dialog.module.css",
|
|
34
34
|
"type": "registry:file"
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-alert-dialog",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Alert Dialog",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Autocomplete, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Autocomplete } from the nave-autocomplete file just written, not from @navecss/base-ui/autocomplete.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Autocomplete } from the nave-autocomplete file just written, not from @navecss/base-ui/autocomplete.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Autocomplete from './nave-autocomplete.parts'\nexport type * from '@base-ui/react/autocomplete'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-autocomplete",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Autocomplete",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Avatar, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Avatar } from the nave-avatar file just written, not from @navecss/base-ui/avatar.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Avatar } from the nave-avatar file just written, not from @navecss/base-ui/avatar.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Avatar from './nave-avatar.parts'\nexport type * from '@base-ui/react/avatar'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-avatar",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Avatar",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Button, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Button } from the nave-button file just written, not from @navecss/base-ui/button.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Button } from the nave-button file just written, not from @navecss/base-ui/button.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport { Button } from './nave-button.parts'\nexport type * from '@base-ui/react/button'\n",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": "registry:file"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-
|
|
31
|
+
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:is(\n [aria-haspopup=\"menu\"],\n [aria-haspopup=\"true\"],\n [aria-haspopup=\"dialog\"]\n ):not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &:not([data-nave-variant=\"primary\"], [data-nave-variant=\"ghost\"]):hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-secondary-hover);\n }\n &:not(\n [data-nave-variant=\"primary\"],\n [data-nave-variant=\"ghost\"]\n ):active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-secondary-active);\n }\n & {\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the outline the &:focus-visible rule for this class draws replaces the browser's default focus indicator; keep that rule while this declaration stays. */\n outline: none;\n }\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--nave-border-width-focus, 2px);\n outline-color: var(--nave-color-border-focus, currentColor);\n outline-offset: 2px;\n }\n }\n}\n",
|
|
32
32
|
"path": "registry/nave/nave-button.module.css",
|
|
33
33
|
"target": "components/nave/nave-button.module.css",
|
|
34
34
|
"type": "registry:file"
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-button",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Button",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Checkbox Group, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { CheckboxGroup } from the nave-checkbox-group file just written, not from @navecss/base-ui/checkbox-group.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { CheckboxGroup } from the nave-checkbox-group file just written, not from @navecss/base-ui/checkbox-group.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport { CheckboxGroup } from './nave-checkbox-group.parts'\nexport type * from '@base-ui/react/checkbox-group'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-checkbox-group",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Checkbox Group",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Checkbox, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Checkbox } from the nave-checkbox file just written, not from @navecss/base-ui/checkbox.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Checkbox } from the nave-checkbox file just written, not from @navecss/base-ui/checkbox.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Checkbox from './nave-checkbox.parts'\nexport type * from '@base-ui/react/checkbox'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-checkbox",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Checkbox",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Collapsible, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Collapsible } from the nave-collapsible file just written, not from @navecss/base-ui/collapsible.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Collapsible } from the nave-collapsible file just written, not from @navecss/base-ui/collapsible.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Collapsible from './nave-collapsible.parts'\nexport type * from '@base-ui/react/collapsible'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-collapsible",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Collapsible",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Combobox, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Combobox } from the nave-combobox file just written, not from @navecss/base-ui/combobox.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Combobox } from the nave-combobox file just written, not from @navecss/base-ui/combobox.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Combobox from './nave-combobox.parts'\nexport type * from '@base-ui/react/combobox'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-combobox",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Combobox",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Context Menu, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { ContextMenu } from the nave-context-menu file just written, not from @navecss/base-ui/context-menu.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { ContextMenu } from the nave-context-menu file just written, not from @navecss/base-ui/context-menu.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as ContextMenu from './nave-context-menu.parts'\nexport type * from '@base-ui/react/context-menu'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-context-menu",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Context Menu",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Dialog, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Dialog } from the nave-dialog file just written, not from @navecss/base-ui/dialog.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Dialog } from the nave-dialog file just written, not from @navecss/base-ui/dialog.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Dialog from './nave-dialog.parts'\nexport type * from '@base-ui/react/dialog'\n",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": "registry:file"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .dialogPopup {\n box-sizing: border-box;\n position: fixed;\n inset: 0;\n margin: auto;\n block-size: fit-content;\n inline-size: 32rem;\n max-inline-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n max-block-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n overflow-y: auto;\n scroll-padding: var(--nave-spacing-content-lg);\n background-color: var(--nave-color-surface-overlay);\n color: var(--nave-color-content-primary);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-default);\n border-radius: var(--nave-radius-overlay);\n box-shadow: var(--nave-shadow-modal);\n padding: var(--nave-spacing-content-lg);\n }\n .title {\n margin: 0;\n font-size: var(--nave-font-size-lg);\n font-weight: var(--nave-font-weight-semibold);\n line-height: var(--nave-line-height-tight);\n }\n .description {\n margin: 0;\n font-size: var(--nave-font-size-sm);\n line-height: var(--nave-line-height-base);\n color: var(--nave-color-content-secondary);\n }\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-
|
|
31
|
+
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .dialogPopup {\n box-sizing: border-box;\n position: fixed;\n inset: 0;\n margin: auto;\n block-size: fit-content;\n inline-size: 32rem;\n max-inline-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n max-block-size: calc(100% - 2 * var(--nave-spacing-content-lg));\n overflow-y: auto;\n scroll-padding: var(--nave-spacing-content-lg);\n background-color: var(--nave-color-surface-overlay);\n color: var(--nave-color-content-primary);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-default);\n border-radius: var(--nave-radius-overlay);\n box-shadow: var(--nave-shadow-modal);\n padding: var(--nave-spacing-content-lg);\n }\n .title {\n margin: 0;\n font-size: var(--nave-font-size-lg);\n font-weight: var(--nave-font-weight-semibold);\n line-height: var(--nave-line-height-tight);\n }\n .description {\n margin: 0;\n font-size: var(--nave-font-size-sm);\n line-height: var(--nave-line-height-base);\n color: var(--nave-color-content-secondary);\n }\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:is(\n [aria-haspopup=\"menu\"],\n [aria-haspopup=\"true\"],\n [aria-haspopup=\"dialog\"]\n ):not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &:not([data-nave-variant=\"primary\"], [data-nave-variant=\"ghost\"]):hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-secondary-hover);\n }\n &:not(\n [data-nave-variant=\"primary\"],\n [data-nave-variant=\"ghost\"]\n ):active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-secondary-active);\n }\n & {\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the outline the &:focus-visible rule for this class draws replaces the browser's default focus indicator; keep that rule while this declaration stays. */\n outline: none;\n }\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--nave-border-width-focus, 2px);\n outline-color: var(--nave-color-border-focus, currentColor);\n outline-offset: 2px;\n }\n }\n .popupFade {\n transition-property: opacity;\n transition-duration: var(--nave-motion-duration-fast);\n transition-timing-function: var(--nave-motion-easing-decelerate);\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n &[data-ending-style] {\n transition-timing-function: var(--nave-motion-easing-accelerate);\n }\n @media (prefers-reduced-motion: reduce) {\n &,\n &[data-instant] {\n transition-duration: calc(0 * var(--nave-motion-duration-fast));\n }\n }\n }\n}\n",
|
|
32
32
|
"path": "registry/nave/nave-dialog.module.css",
|
|
33
33
|
"target": "components/nave/nave-dialog.module.css",
|
|
34
34
|
"type": "registry:file"
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-dialog",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Dialog",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Field, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Field } from the nave-field file just written, not from @navecss/base-ui/field.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Field } from the nave-field file just written, not from @navecss/base-ui/field.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Field from './nave-field.parts'\nexport type * from '@base-ui/react/field'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-field",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Field",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Fieldset, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Fieldset } from the nave-fieldset file just written, not from @navecss/base-ui/fieldset.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Fieldset } from the nave-fieldset file just written, not from @navecss/base-ui/fieldset.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Fieldset from './nave-fieldset.parts'\nexport type * from '@base-ui/react/fieldset'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-fieldset",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Fieldset",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Input, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Input } from the nave-input file just written, not from @navecss/base-ui/input.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Input } from the nave-input file just written, not from @navecss/base-ui/input.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport { Input } from './nave-input.parts'\nexport type * from '@base-ui/react/input'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-input",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Input",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Menu, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Menu } from the nave-menu file just written, not from @navecss/base-ui/menu.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Menu } from the nave-menu file just written, not from @navecss/base-ui/menu.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Menu from './nave-menu.parts'\nexport type * from '@base-ui/react/menu'\n",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": "registry:file"
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
|
-
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .listPopup {\n box-sizing: border-box;\n background-color: var(--nave-color-surface-overlay);\n color: var(--nave-color-content-primary);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-default);\n border-radius: var(--nave-radius-control);\n box-shadow: var(--nave-shadow-overlay);\n padding: var(--nave-spacing-control-sm);\n font-size: var(--nave-font-size-sm);\n min-inline-size: var(--anchor-width);\n max-block-size: var(--available-height);\n overflow-y: auto;\n scroll-padding: var(--nave-spacing-control-sm);\n }\n .arrow {\n &[data-side=\"top\"],\n &[data-side=\"bottom\"],\n &[data-side=\"left\"],\n &[data-side=\"right\"] {\n position: absolute;\n box-sizing: border-box;\n inline-size: 8px;\n block-size: 8px;\n background-color: inherit;\n border-style: inherit;\n border-width: inherit;\n border-color: inherit;\n border-top-style: none;\n border-left-style: none;\n }\n\n &[data-side=\"top\"] {\n bottom: -4px;\n rotate: 45deg;\n }\n\n &[data-side=\"bottom\"] {\n top: -4px;\n rotate: 225deg;\n }\n\n &[data-side=\"left\"] {\n right: -4px;\n rotate: -45deg;\n }\n\n &[data-side=\"right\"] {\n left: -4px;\n rotate: 135deg;\n }\n }\n .item {\n display: flex;\n align-items: center;\n gap: var(--nave-spacing-control-sm);\n padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md);\n cursor: default;\n user-select: none;\n &[aria-disabled=\"true\"] {\n color: var(--nave-color-content-disabled);\n }\n & {\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the outline the &:focus-visible rule for this class draws replaces the browser's default focus indicator; keep that rule while this declaration stays. */\n outline: none;\n }\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--nave-border-width-focus, 2px);\n outline-color: var(--nave-color-border-focus, currentColor);\n outline-offset: 2px;\n }\n }\n .separator {\n border: 0;\n block-size: var(--nave-border-width-sm);\n margin-block: var(--nave-spacing-control-xs);\n background-color: var(--nave-color-border-default);\n }\n .groupLabel {\n padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md);\n font-size: var(--nave-font-size-xs);\n font-weight: var(--nave-font-weight-medium);\n color: var(--nave-color-content-secondary);\n }\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-
|
|
31
|
+
"content": "/* SPDX-License-Identifier: MIT */\n/* Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE. */\n@layer tokens.defaults, tokens.presets, reset, atomic, components.nave, components.consumer, overrides;\n\n@layer components.consumer {\n .listPopup {\n box-sizing: border-box;\n background-color: var(--nave-color-surface-overlay);\n color: var(--nave-color-content-primary);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-default);\n border-radius: var(--nave-radius-control);\n box-shadow: var(--nave-shadow-overlay);\n padding: var(--nave-spacing-control-sm);\n font-size: var(--nave-font-size-sm);\n min-inline-size: var(--anchor-width);\n max-block-size: var(--available-height);\n overflow-y: auto;\n scroll-padding: var(--nave-spacing-control-sm);\n }\n .arrow {\n &[data-side=\"top\"],\n &[data-side=\"bottom\"],\n &[data-side=\"left\"],\n &[data-side=\"right\"] {\n position: absolute;\n box-sizing: border-box;\n inline-size: 8px;\n block-size: 8px;\n background-color: inherit;\n border-style: inherit;\n border-width: inherit;\n border-color: inherit;\n border-top-style: none;\n border-left-style: none;\n }\n\n &[data-side=\"top\"] {\n bottom: -4px;\n rotate: 45deg;\n }\n\n &[data-side=\"bottom\"] {\n top: -4px;\n rotate: 225deg;\n }\n\n &[data-side=\"left\"] {\n right: -4px;\n rotate: -45deg;\n }\n\n &[data-side=\"right\"] {\n left: -4px;\n rotate: 135deg;\n }\n }\n .item {\n display: flex;\n align-items: center;\n gap: var(--nave-spacing-control-sm);\n padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md);\n cursor: default;\n user-select: none;\n &[aria-disabled=\"true\"] {\n color: var(--nave-color-content-disabled);\n }\n & {\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the outline the &:focus-visible rule for this class draws replaces the browser's default focus indicator; keep that rule while this declaration stays. */\n outline: none;\n }\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--nave-border-width-focus, 2px);\n outline-color: var(--nave-color-border-focus, currentColor);\n outline-offset: 2px;\n }\n }\n .separator {\n border: 0;\n block-size: var(--nave-border-width-sm);\n margin-block: var(--nave-spacing-control-xs);\n background-color: var(--nave-color-border-default);\n }\n .groupLabel {\n padding: var(--nave-spacing-control-sm) var(--nave-spacing-control-md);\n font-size: var(--nave-font-size-xs);\n font-weight: var(--nave-font-weight-medium);\n color: var(--nave-color-content-secondary);\n }\n .button {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--nave-spacing-control-sm);\n min-block-size: var(--nave-size-control-md);\n padding-block: 0;\n padding-inline: var(--nave-spacing-control-lg);\n border: var(--nave-border-width-sm) solid var(--nave-color-border-control);\n border-radius: var(--nave-radius-control);\n background-color: var(--nave-color-action-secondary);\n color: var(--nave-color-content-primary);\n font-family: inherit;\n font-size: var(--nave-font-size-sm);\n font-weight: var(--nave-font-weight-medium);\n line-height: var(--nave-line-height-tight);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n &[data-nave-size=\"sm\"] {\n min-block-size: var(--nave-size-control-sm);\n padding-inline: var(--nave-spacing-control-md);\n }\n &[data-nave-variant=\"primary\"] {\n background-color: var(--nave-color-action-primary);\n border-color: transparent;\n color: var(--nave-color-on-action-primary);\n }\n &[data-nave-variant=\"primary\"]:hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-hover);\n }\n &[data-nave-variant=\"primary\"]:active:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-primary-active);\n }\n &:disabled,\n &[aria-disabled=\"true\"] {\n background-color: transparent;\n border-color: var(--nave-color-border-disabled);\n color: var(--nave-color-content-disabled);\n cursor: not-allowed;\n }\n &[data-nave-variant=\"ghost\"] {\n background-color: transparent;\n border-color: transparent;\n }\n &[data-nave-variant=\"ghost\"]:hover:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"]:active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &[data-nave-variant=\"ghost\"][aria-expanded=\"true\"]:is(\n [aria-haspopup=\"menu\"],\n [aria-haspopup=\"true\"],\n [aria-haspopup=\"dialog\"]\n ):not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n &:not([data-nave-variant=\"primary\"], [data-nave-variant=\"ghost\"]):hover:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background-color: var(--nave-color-action-secondary-hover);\n }\n &:not(\n [data-nave-variant=\"primary\"],\n [data-nave-variant=\"ghost\"]\n ):active:not(:disabled, [aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-secondary-active);\n }\n & {\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the outline the &:focus-visible rule for this class draws replaces the browser's default focus indicator; keep that rule while this declaration stays. */\n outline: none;\n }\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--nave-border-width-focus, 2px);\n outline-color: var(--nave-color-border-focus, currentColor);\n outline-offset: 2px;\n }\n }\n .itemHighlight {\n border-radius: var(--nave-radius-sm);\n &[data-highlighted]:not([aria-disabled=\"true\"]) {\n background-color: var(--nave-color-action-highlight);\n }\n }\n .popupMotion {\n transition-property: opacity;\n transition-duration: var(--nave-motion-duration-fast);\n transition-timing-function: var(--nave-motion-easing-decelerate);\n &[data-starting-style],\n &[data-ending-style] {\n opacity: 0;\n }\n &[data-ending-style] {\n transition-timing-function: var(--nave-motion-easing-accelerate);\n }\n &[data-instant] {\n transition-duration: var(--nave-motion-duration-instant);\n }\n @media (prefers-reduced-motion: reduce) {\n &,\n &[data-instant] {\n transition-duration: calc(0 * var(--nave-motion-duration-fast));\n }\n }\n }\n .arrowInline {\n &[data-side=\"inline-start\"],\n &[data-side=\"inline-end\"] {\n position: absolute;\n box-sizing: border-box;\n inline-size: 8px;\n block-size: 8px;\n background-color: inherit;\n border-style: inherit;\n border-width: inherit;\n border-color: inherit;\n border-top-style: none;\n border-left-style: none;\n }\n\n &[data-side=\"inline-start\"] {\n inset-inline-end: -4px;\n rotate: -45deg;\n }\n\n &[data-side=\"inline-end\"] {\n inset-inline-start: -4px;\n rotate: 135deg;\n }\n\n &[data-side=\"inline-start\"]:dir(rtl) {\n rotate: 135deg;\n }\n\n &[data-side=\"inline-end\"]:dir(rtl) {\n rotate: -45deg;\n }\n }\n}\n",
|
|
32
32
|
"path": "registry/nave/nave-menu.module.css",
|
|
33
33
|
"target": "components/nave/nave-menu.module.css",
|
|
34
34
|
"type": "registry:file"
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-menu",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Menu",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Menubar, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Menubar } from the nave-menubar file just written, not from @navecss/base-ui/menubar.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Menubar } from the nave-menubar file just written, not from @navecss/base-ui/menubar.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport { Menubar } from './nave-menubar.parts'\nexport type * from '@base-ui/react/menubar'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-menubar",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Menubar",
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"react-dom"
|
|
8
8
|
],
|
|
9
9
|
"description": "NaveCSS's styling of the Base UI Meter, as files copied into your project: Base UI's parts from @base-ui/react, which Base UI's maintainers publish, with Nave's classes from a CSS Module that reads Nave's tokens.",
|
|
10
|
-
"docs": "Import { Meter } from the nave-meter file just written, not from @navecss/base-ui/meter.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.
|
|
10
|
+
"docs": "Import { Meter } from the nave-meter file just written, not from @navecss/base-ui/meter.\nKeep @navecss/tokens/css imported: the copied rules read Nave's tokens. They sit in a CSS Module, so your build needs CSS Modules.\nThe copy needs @base-ui/react 1.3 or later in the 1.x line, @navecss/tokens 0.5.0 or later before 1.0, and React 18 or 19. A version already in your package.json is kept; a missing package is installed at its latest version.\nGenerated from @navecss/base-ui 0.4.0. No later release changes these files.",
|
|
11
11
|
"files": [
|
|
12
12
|
{
|
|
13
13
|
"content": "// SPDX-License-Identifier: MIT\n// Copyright (c) 2026 Nave Contributors. From NaveCSS (https://github.com/navecss/navecss), under the MIT License; the full text is in NAVECSS-LICENSE.\n\nexport * as Meter from './nave-meter.parts'\nexport type * from '@base-ui/react/meter'\n",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"meta": {
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@base-ui/react": "^1.3.0",
|
|
46
|
-
"@navecss/tokens": ">=0.
|
|
46
|
+
"@navecss/tokens": ">=0.5.0 <1.0.0",
|
|
47
47
|
"react": "^18 || ^19",
|
|
48
48
|
"react-dom": "^18 || ^19"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.
|
|
50
|
+
"version": "0.4.0"
|
|
51
51
|
},
|
|
52
52
|
"name": "base-ui-meter",
|
|
53
53
|
"title": "NaveCSS styling of Base UI Meter",
|