@cube-dev/ui-kit 0.199.0 → 0.199.2

package/docs/components/content/Layout.md

@@ -394,14 +394,14 @@ A variant of Layout that enables CSS Grid for the content area.
 <GridLayout
   height="100dvh"
   columns="repeat(2, 1fr)"
-  rows="auto 1fr"
+  rows="auto auto 1fr"
   gap="2x"
   padding="2x"
 >
-  <Layout.Header title="Grid Dashboard" />
-  <div style={{ gridColumn: '1 / -1' }}>Full-width card</div>
-  <div>Left card</div>
-  <div>Right card</div>
+  <Layout.Header gridColumn="1 / 3" title="Grid Dashboard" />
+  <Card gridColumn="1 / 3">Full-width card</Card>
+  <Card>Left card</Card>
+  <Card>Right card</Card>
 </GridLayout>
 ```
 
@@ -709,7 +709,7 @@ function StickyPanelExample() {
 In `overlay` mode, a semi-transparent backdrop appears behind the panel. The panel is dismissed (when `isDismissable` is true, which is the default) when:
 
 - Clicking the backdrop overlay
-- Pressing Escape anywhere in the Layout
+- Pressing Escape anywhere in the Layout, unless a control inside already handled it (prevented its default), as a code editor does when it closes its autocomplete
 - Moving focus to the main content area
 
 Focus closes the panel only when it enters the main content from outside it, for example with a programmatic `focus()`, `Tab` from a control before the Layout, or `Shift+Tab` out of the panel when no other panel comes before it; moving between controls of the main content does not. Panels come after the main content in tab order, so `Tab` from the panel's last control leaves the Layout and keeps the panel open. Focus moving inside the panel, into a popover, menu or dialog opened from it, or into another `Layout.Panel` of the same Layout keeps it open. Other panels of the same Layout can sit under the backdrop; a click on them then closes the overlay panel, but `Tab` still reaches their controls. Opening the panel moves focus to its first control, unless focus already moved elsewhere as it opened (for example to a field with `autoFocus` inside it), so a menu or dialog that opened it can close without handing focus back to the main content. A panel already open when its Layout first renders leaves page focus alone. Closing the panel returns focus to the element that had it when the panel opened, if focus is still in the panel or was lost with it; focus moved elsewhere, by the user or in `onOpenChange`, stays there. If that element is gone by then, as a menu item is, move focus yourself in `onOpenChange`.
@@ -764,9 +764,9 @@ To prevent dismissing the overlay by clicking, pressing Escape or moving focus t
   <Layout.Header title="Tiny Scrollbar" />
   <Layout.Content scrollbar="tiny">
     {Array.from({ length: 20 }, (_, i) => (
-      <div key={i} style={{ padding: '8px' }}>
+      <Block key={i} padding="1x">
         <Text>Line {i + 1}: Hover to reveal scrollbar indicator.</Text>
-      </div>
+      </Block>
     ))}
   </Layout.Content>
 </Layout>
@@ -868,7 +868,7 @@ function ApplicationShell() {
 ### Keyboard Navigation
 
 - `Tab` - Navigate between interactive elements
-- An overlay panel closes on Escape or when focus enters the main content from outside it; focus moving inside it or into another panel of the same Layout keeps it open
+- An overlay panel closes on an Escape no control inside has handled (prevented its default), or when focus enters the main content from outside it; focus moving inside it or into another panel of the same Layout keeps it open. A handled Escape stops at the Layout, so an enclosing dialog stays open too
 - Panels come after the main content in tab order, so `Tab` from a panel's last control leaves the Layout
 - An overlay panel moves focus to its first control when it opens and returns it to the opener when it closes; in `dialog` mode the dialog manages focus, and other modes leave focus alone
 - Resize handlers can be focused and resized using arrow keys:

package/docs/components/content/Text.md

@@ -51,7 +51,7 @@ These properties allow direct style application without using the `styles` prop:
 ```jsx
 <Text>Inline text</Text>
 
-<Text ellipsis style={{ maxWidth: 200 }}>
+<Text ellipsis styles={{ maxWidth: '25x' }}>
   Long text that will be truncated with ellipsis
 </Text>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.199.0",
+  "version": "0.199.2",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -97,7 +97,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.8.0",
+    "@tenphi/eslint-plugin-tasty": "^1.8.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/tasty.config.ts

@@ -56,8 +56,17 @@ export default {
     '#surface-2-text-soft',
     '#surface-3-text',
     '#surface-3-text-soft',
-    // Fixed-mode surface emitted by the special palette theme.
+    // Fixed-mode tokens emitted by the special palette theme.
     '#special-surface',
+    '#special-accent-disabled-surface',
+    '#special-accent-disabled-surface-text',
+    '#special-accent-surface',
+    '#special-accent-surface-2',
+    '#special-accent-surface-3',
+    '#special-accent-surface-border',
+    '#special-accent-surface-hover',
+    '#special-accent-surface-text',
+    '#special-accent-text',
 
     // ---- Glaze: accent system (default theme) ----
     '#accent-surface',
@@ -65,11 +74,13 @@ export default {
     '#accent-surface-3',
     '#accent-surface-hover',
     '#accent-surface-text',
+    '#accent-selected-fill',
     '#accent-text',
     '#accent-text-soft',
     '#accent-icon',
     '#accent-disabled-surface',
     '#accent-disabled-surface-text',
+    '#accent-disabled-text',
 
     // ---- Glaze: per-theme primary / purple (purple is alias of primary) ----
     '#primary',
@@ -82,18 +93,24 @@ export default {
     '#primary-desaturated',
     '#primary-surface',
     '#primary-surface-text',
+    '#primary-surface-text-soft',
+    '#primary-surface-text-soft-2',
     '#primary-accent-surface',
     '#primary-accent-surface-2',
     '#primary-accent-surface-3',
     '#primary-accent-surface-hover',
     '#primary-accent-surface-text',
+    '#primary-accent-selected-fill',
+    '#primary-accent-surface-border',
     '#primary-accent-text',
     '#primary-accent-text-soft',
     '#primary-accent-icon',
     '#primary-accent-disabled-surface',
     '#primary-accent-disabled-surface-text',
+    '#primary-accent-disabled-text',
     '#purple',
     '#purple-bg',
+    '#purple-border',
     '#purple-text',
     '#purple-text-soft',
     '#purple-icon',
@@ -101,16 +118,21 @@ export default {
     '#purple-disabled',
     '#purple-surface',
     '#purple-surface-text',
+    '#purple-surface-text-soft',
+    '#purple-surface-text-soft-2',
     '#purple-accent-surface',
     '#purple-accent-surface-2',
     '#purple-accent-surface-3',
     '#purple-accent-surface-hover',
     '#purple-accent-surface-text',
+    '#purple-accent-selected-fill',
+    '#purple-accent-surface-border',
     '#purple-accent-text',
     '#purple-accent-text-soft',
     '#purple-accent-icon',
     '#purple-accent-disabled-surface',
     '#purple-accent-disabled-surface-text',
+    '#purple-accent-disabled-text',
 
     // ---- Glaze: per-theme danger ----
     '#danger',
@@ -123,6 +145,8 @@ export default {
     '#danger-desaturated',
     '#danger-surface',
     '#danger-surface-text',
+    '#danger-surface-text-soft',
+    '#danger-surface-text-soft-2',
     '#danger-alert-surface',
     '#danger-alert-border',
     '#danger-accent-surface',
@@ -130,11 +154,14 @@ export default {
     '#danger-accent-surface-3',
     '#danger-accent-surface-hover',
     '#danger-accent-surface-text',
+    '#danger-accent-selected-fill',
+    '#danger-accent-surface-border',
     '#danger-accent-text',
     '#danger-accent-text-soft',
     '#danger-accent-icon',
     '#danger-accent-disabled-surface',
     '#danger-accent-disabled-surface-text',
+    '#danger-accent-disabled-text',
 
     // ---- Glaze: per-theme success ----
     '#success',
@@ -147,6 +174,8 @@ export default {
     '#success-desaturated',
     '#success-surface',
     '#success-surface-text',
+    '#success-surface-text-soft',
+    '#success-surface-text-soft-2',
     '#success-alert-surface',
     '#success-alert-border',
     '#success-accent-surface',
@@ -154,11 +183,14 @@ export default {
     '#success-accent-surface-3',
     '#success-accent-surface-hover',
     '#success-accent-surface-text',
+    '#success-accent-selected-fill',
+    '#success-accent-surface-border',
     '#success-accent-text',
     '#success-accent-text-soft',
     '#success-accent-icon',
     '#success-accent-disabled-surface',
     '#success-accent-disabled-surface-text',
+    '#success-accent-disabled-text',
 
     // ---- Glaze: per-theme warning ----
     '#warning',
@@ -171,6 +203,8 @@ export default {
     '#warning-desaturated',
     '#warning-surface',
     '#warning-surface-text',
+    '#warning-surface-text-soft',
+    '#warning-surface-text-soft-2',
     '#warning-alert-surface',
     '#warning-alert-border',
     '#warning-accent-surface',
@@ -178,11 +212,14 @@ export default {
     '#warning-accent-surface-3',
     '#warning-accent-surface-hover',
     '#warning-accent-surface-text',
+    '#warning-accent-selected-fill',
+    '#warning-accent-surface-border',
     '#warning-accent-text',
     '#warning-accent-text-soft',
     '#warning-accent-icon',
     '#warning-accent-disabled-surface',
     '#warning-accent-disabled-surface-text',
+    '#warning-accent-disabled-text',
 
     // ---- Glaze: per-theme note ----
     '#note',
@@ -195,6 +232,8 @@ export default {
     '#note-desaturated',
     '#note-surface',
     '#note-surface-text',
+    '#note-surface-text-soft',
+    '#note-surface-text-soft-2',
     '#note-alert-surface',
     '#note-alert-border',
     '#note-accent-surface',
@@ -202,11 +241,14 @@ export default {
     '#note-accent-surface-3',
     '#note-accent-surface-hover',
     '#note-accent-surface-text',
+    '#note-accent-selected-fill',
+    '#note-accent-surface-border',
     '#note-accent-text',
     '#note-accent-text-soft',
     '#note-accent-icon',
     '#note-accent-disabled-surface',
     '#note-accent-disabled-surface-text',
+    '#note-accent-disabled-text',
 
     // ---- Glaze: PrismCode syntax palette ----
     '#code-comment',
@@ -253,6 +295,11 @@ export default {
     '#disabled-surface-text',
     '#disabled-surface',
     '#disabled-opacity',
+    '#fixed-dark',
+    '#fixed-primary-text',
+
+    // ---- Context hooks (src/tokens/colors.ts) ----
+    '#current-fill',
 
     // ---- Component-local custom tokens ----
     '#scrollbar-thumb',
@@ -264,10 +311,10 @@ export default {
     '#slider-thumb',
     '#slider-thumb-hovered',
     // ColorPicker: the color being edited, and the black/white that reads on
-    // top of it. Both are set as inline custom properties per render.
+    // top of it. Both are passed through the `tokens` prop per render.
     '#color-picker',
     '#color-picker-contrast',
-    // ColorSwatchGroup: the color of an individual swatch, set inline per option.
+    // ColorSwatchGroup: the color of an individual swatch, a `tokens` value per option.
     '#color-swatch',
 
     // Custom Property Tokens (from src/tokens/base.ts)
@@ -287,6 +334,8 @@ export default {
     '$disclosure-transition',
     '$tab-transition',
     '$fade-transition',
+    '$overlay-transition',
+    '$scrollbar-transition',
     '$scrollbar-width',
     '$scrollbar-outline-width',
     '$scrollbar-radius',
@@ -340,7 +389,7 @@ export default {
    * State alias names for autocomplete.
    * These are predefined responsive and theme states.
    */
-  states: ['@mobile', '@compact'],
+  states: ['@mobile', '@compact', '@dark', '@hc'],
 
   /**
    * Valid preset names for the `preset` style property.