@navecss/base-ui 0.3.0 → 0.4.0

package/dist/registry/base-ui-tooltip.json

@@ -7,7 +7,7 @@
     "react-dom"
   ],
   "description": "NaveCSS's styling of the Base UI Tooltip, 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.",
-  "docs": "Import { Tooltip } from the nave-tooltip file just written, not from @navecss/base-ui/tooltip.\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.4.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.3.0. No later release changes these files.",
+  "docs": "Import { Tooltip } from the nave-tooltip file just written, not from @navecss/base-ui/tooltip.\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.",
   "files": [
     {
       "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 Tooltip from './nave-tooltip.parts'\nexport type * from '@base-ui/react/tooltip'\n",
@@ -28,7 +28,7 @@
       "type": "registry:file"
     },
     {
-      "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  .tooltipPopup {\n    box-sizing: border-box;\n    background-color: var(--nave-color-surface-inverse);\n    color: var(--nave-color-content-inverse);\n    border: var(--nave-border-width-sm) solid transparent;\n    border-radius: var(--nave-radius-sm);\n    padding: var(--nave-spacing-control-xs) var(--nave-spacing-control-sm);\n    font-size: var(--nave-font-size-xs);\n    line-height: var(--nave-line-height-snug);\n    max-inline-size: 20rem;\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  .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-highlight);\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  .tooltipMotion {\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",
+      "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  .tooltipPopup {\n    box-sizing: border-box;\n    background-color: var(--nave-color-surface-inverse);\n    color: var(--nave-color-content-inverse);\n    border: var(--nave-border-width-sm) solid transparent;\n    border-radius: var(--nave-radius-sm);\n    padding: var(--nave-spacing-control-xs) var(--nave-spacing-control-sm);\n    font-size: var(--nave-font-size-xs);\n    line-height: var(--nave-line-height-snug);\n    max-inline-size: 20rem;\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  .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  .tooltipMotion {\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",
       "path": "registry/nave/nave-tooltip.module.css",
       "target": "components/nave/nave-tooltip.module.css",
       "type": "registry:file"
@@ -43,11 +43,11 @@
   "meta": {
     "peerDependencies": {
       "@base-ui/react": "^1.3.0",
-      "@navecss/tokens": ">=0.4.0 <1.0.0",
+      "@navecss/tokens": ">=0.5.0 <1.0.0",
       "react": "^18 || ^19",
       "react-dom": "^18 || ^19"
     },
-    "version": "0.3.0"
+    "version": "0.4.0"
   },
   "name": "base-ui-tooltip",
   "title": "NaveCSS styling of Base UI Tooltip",