@cube-dev/ui-kit 0.0.0-canary-dcac388 → 0.0.0-canary-c0382e7

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-dcac388 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c0382e7 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-dcac388";
-const TASTY_VERSION = "2.6.4";
+const VERSION = "0.0.0-canary-c0382e7";
+const TASTY_VERSION = "0.0.0-snapshot.93acf5b";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	const tastyVersion = TASTY_VERSION;

package/docs/tasty/dsl.md

@@ -288,11 +288,21 @@ const SimpleButton = tasty(Button, {
 | `@parent` | Parent/ancestor element states | `@parent(hovered)` |
 | `@own` | Sub-element's own state | `@own(hovered)` |
 | `@starting` | Entry animation | `@starting` |
+| `@fallback` | Negation opt-out (persistent floor) | `@fallback` |
 | `:is()` | CSS `:is()` structural pseudo-class | `:is(fieldset > label)` |
 | `:has()` | CSS `:has()` relational pseudo-class | `:has(> Icon)` |
 | `:not()` | CSS `:not()` negation (prefer `!:is()`) | `:not(:first-child)` |
 | `:where()` | CSS `:where()` (zero specificity) | `:where(Section)` |
 
+> **Specificity.** All state selectors Tasty generates (modifiers, pseudo-classes,
+> `:is()`/`:not()` groups, and `@root` / `@parent` context) are wrapped in
+> `:where(...)` so they carry **zero specificity**. The only specificity anchors
+> are the doubled component class (`.t0.t0`) and sub-element `[data-element]`
+> attributes. This means overlapping rules (e.g. an `@fallback` floor and the
+> states layered over it) resolve purely by **source order** — Tasty emits
+> lower-priority states first and higher-priority states last so the cascade
+> produces the intended winner.
+
 ### `@media(...)` — Media Queries
 
 Media queries support dimension shorthands and custom unit expansion:
@@ -374,6 +384,61 @@ display: {
 }
 ```
 
+### `@fallback` — Negation Opt-out
+
+By default Tasty makes states **mutually exclusive**: a higher-priority state
+turns the lower-priority ones off via negation, so exactly one branch applies.
+This relies on `A | !A` always being true. CSS feature/container queries break
+that assumption: `@supports(...)` and `@(...)` queries can be **unknown** (not
+just true/false), and `not(unknown)` is also unknown — so a negated default
+branch silently never applies. The classic case is `scroll-state`: a browser can
+support `container-type: scroll-state` while a specific `scroll-state(...)` query
+is unknown, leaving *no* branch active.
+
+`@fallback` solves this. Mark an entry with `@fallback` (as a top-level `&` atom
+on the key) and it **opts out of receiving negation** from higher-priority
+states: it persists as a guaranteed floor, and higher-priority states simply
+layer over it via the cascade.
+
+```jsx
+inset: {
+  '@fallback': '0 top',
+  '@supports(container-type: scroll-state) & @(scroll-state(scrolled: block-end))':
+    '-80x top',
+}
+```
+
+```css
+.t0.t0 { inset: 0 ...; }
+@container scroll-state(scrolled: block-end) {
+  @supports (container-type: scroll-state) {
+    .t0.t0 { inset: -80px ...; }
+  }
+}
+```
+
+The base is emitted as a bare rule (no negated `@supports` / container branches),
+so it always applies. When the override matches it wins because it is emitted
+later and all state selectors share the same specificity (see the note on
+`:where()` below).
+
+| Form | Meaning |
+|------|---------|
+| `'@fallback'` | Default floor (condition = always). Never negated by higher-priority states. |
+| `'@fallback & hovered'` | Conditional fallback. Applies under `hovered`; not negated by higher-priority states, but still negates lower-priority ones. |
+
+Notes:
+
+- `@fallback` only changes whether the entry **receives** negation. It still
+  **negates lower-priority entries**, so the cascade below it stays mutually
+  exclusive.
+- `@fallback` must be a top-level `&` atom. Using it inside an `|` (OR) or `^`
+  (XOR) group is ignored with a dev warning.
+- `@fallback` is reserved and cannot be redefined via `configure({ states })`
+  or a local `@name` state.
+- `@fallback(<state>)` (selective opt-out from one specific higher-priority
+  state) is reserved for future use and not implemented yet.
+
 ### `@root(...)` — Root Element States
 
 Root states generate selectors on the `:root` element. They are useful for theme modes, feature flags, and other page-level conditions:

package/docs/tasty/pipeline.md

@@ -76,7 +76,7 @@ Output: CSSRule[]
 
 **Simplification** (`simplifyCondition` in `simplify.ts`) is not a separate numbered stage. It runs inside OR expansion, exclusive building, `expandExclusiveOrs` branch cleanup, combination ANDs, merge-by-value ORs, and materialization. Every call is cached by condition unique-id, so the repetition is cheap.
 
-**Post-pass:** After `processStyles` collects rules from every handler, `runPipeline` (`index.ts:188`) filters duplicates using a key of `selector|declarations|atRules|rootPrefix|startingStyle` and then reorders rules so every `@starting-style` rule is emitted **after** all normal rules. This ordering is cascade-critical: `@starting-style` rules share specificity with their normal counterparts, and source order decides which value wins.
+**Post-pass:** After `processStyles` collects rules from every handler, `runPipeline` (`index.ts`) filters duplicates using a key of `selector|declarations|atRules|rootPrefix|startingStyle`, then **stable-sorts rules by their cascade `order` hint (ascending source priority)** so lower-priority rules come first and higher-priority rules win, and finally emits every `@starting-style` rule **after** all normal rules. The `order` hint is the highest source priority among the entries that produced each rule (threaded `ComputedRule → CSSRule`). This ordering is cascade-critical because Stage 7 equalizes specificity with `:where()`: once every state selector carries zero specificity, source order alone decides which of two overlapping rules wins — most importantly the `@fallback` floor (low order, emitted first) versus the states layered over it, and `@starting-style` versus its normal counterpart. Mutually-exclusive rules are unaffected by ordering (they never both match), so reordering them is safe.
 
 ---
 
@@ -293,6 +293,23 @@ C: C & !A & !B          (applies only when neither A nor B)
 
 Each exclusive condition is passed through `simplifyCondition`. Entries that simplify to `FALSE` (impossible) are filtered out. The default state (`''` → `TrueCondition`) is not added to the “prior” list for negation (see `buildExclusiveConditions`).
 
+### `@fallback` entries (negation opt-out)
+
+An entry flagged `fallback: true` (from the `@fallback` state-key token) is the
+one exception to the negation cascade above. A `fallback` entry **skips
+receiving `!prior`** — its exclusive condition stays its own condition (`TRUE`
+for the default `@fallback`) so it persists as a floor and a higher-priority
+state cannot turn it off. It is **still pushed into the prior list** (subject to
+the usual non-`TRUE` guard), so lower-priority entries are still negated by it
+and the cascade below it stays mutually exclusive. `fallback` entries are never
+merged with non-`fallback` entries in Stage 1 (they get their own value bucket).
+
+This exists to fix the *unknown-query hole*: CSS three-valued logic makes
+`not(unknown) = unknown`, so a negated `@supports(...)` / container-query default
+branch silently never applies. A `@fallback` floor sidesteps negation entirely
+and lets the positive override layer on top via the cascade (see Stage 7's
+`:where()` equalization and the ascending-priority post-pass).
+
 ### Why
 
 This eliminates CSS specificity wars. Instead of relying on cascade order, each CSS rule matches in exactly one scenario. Benefits:
@@ -333,17 +350,24 @@ This is the companion to **Stage 2a** (user-OR expansion). The split exists beca
 
 1. Collect top-level OR branches of `exclusiveCondition`.
 2. If there is no OR (single branch), the entry is unchanged. Pure selector ORs with no at-rule context are also left alone (materialization handles them via `:is()` / variant merging).
-3. Otherwise `sortOrBranchesForExpansion` reorders branches so at-rule-heavy branches come first. This is load-bearing for correctness (see below).
+3. Otherwise `sortOrBranchesForExpansion` reorders branches by a three-tier rank — `@supports` branches first, then other at-rule branches (media / container / starting), then pure-selector branches. This is load-bearing for correctness (see below).
 4. Each branch is made exclusive against prior branches: `branch & !prior[0] & !prior[1] & ...`, then simplified.
 5. Impossible branches are dropped; expanded entries get a synthetic `stateKey` suffix like `[or:0]`.
 
 ### Why the sort matters
 
-Consider `!A | !B` where A is an at-rule (e.g. `@supports(grid)`) and B is a modifier (e.g. `:has(foo)`):
+**At-rules before selectors.** Consider `!A | !B` where A is an at-rule (e.g. `@supports(grid)`) and B is a modifier (e.g. `:has(foo)`):
 
 - **With at-rule-first sort** (`!A`, then `!B & A`): the first branch emits "outside `@supports`", the second emits "inside `@supports` with `:not(:has(foo))`". Full coverage.
 - **Without the sort** (`!B`, then `!A & B`): the first branch emits `:not(:has(foo))` as a bare selector with no at-rule context — leaking the rule outside `@supports`. The second is incomplete.
 
+**`@supports` before other at-rules (Kleene logic).** A `@supports` feature query is special: anything ANDed with it can become *unknown* — not simply false — when the feature is unsupported. The canonical case is a feature guard over a dependent query, e.g. `@supports(container-type: scroll-state) & @(scroll-state(scrolled: block-end))` (`S & C`). The default's exclusive is `!(S & C) = !S | !C`, which `simplify` sorts alphabetically into `[!C, !S]`.
+
+- **Expanding `!C` first** emits a bare `@container (not scroll-state(...))` rule. In a browser without `scroll-state` support that query is unknown (not false), so it matches nothing and the default `inset` is never applied — a coverage hole.
+- **Expanding `!S` first** yields `!S | (S & !C)`: a bare `@supports (not (container-type: scroll-state))` fallback carrying the default, plus the dependent negation nested inside the supported scope. Full coverage, and the unsupported path never references the guarded query.
+
+Because `!S | (S & !R) ≡ !S | !R` in two-valued logic, this reordering is a no-op for cases without an `@supports` guard. The same supports-first ordering is also applied in `makeOrBranchesExclusive` (`materialize.ts`) for ORs that survive nested inside an AND (e.g. `compact & (!S | !C)`).
+
 The pre-build Stage 2a pass doesn't need this because user-authored ORs aren't produced by negation and their branches are expected to apply in each branch's own scope.
 
 ### Example (conceptual)
@@ -470,7 +494,15 @@ Converts condition trees into actual CSS selectors and at-rules.
 
 3. **Contradiction detection**: During variant merging, impossible combinations are dropped (e.g. conflicting media, root, or modifier negations).
 
-4. **`materializeComputedRule`**: Groups variants by sorted at-rules plus root-prefix key; within each group, `mergeVariantsIntoSelectorGroups` merges variants that differ only in flat modifier/pseudo parts; builds selector strings and emits one or more `CSSRule` objects.
+4. **`materializeComputedRule`**: Groups variants by sorted at-rules plus root-prefix key; within each group, `mergeVariantsIntoSelectorGroups` merges variants that differ only in flat modifier/pseudo parts; builds selector strings and emits one or more `CSSRule` objects. The rule's `order` hint (cascade priority) is propagated here for the post-pass sort.
+
+5. **`:where()` specificity equalization**: Every stateful part of the selector is wrapped in `:where(...)` so it contributes **zero specificity**:
+   - the flat root modifiers + pseudos and the root element's `:is()`/`:not()` groups are combined into one `:where(...)` (`buildSelectorFromVariant`);
+   - the sub-element (`@own`) groups are wrapped in a **separate** `:where(...)` so the sub-element's structural `[data-element="X"]` specificity is preserved while its states are zeroed;
+   - `@parent` ancestors (`parentGroupsToCSS`) become `:where(... *)` / `:where(:not(... *))`;
+   - the `@root` context prefix (`rootGroupsToCSS`) becomes `:where(:root...)` (zeroing the `:root` pseudo too).
+
+   The only specificity anchors that remain are the doubled component class (`.tXX.tXX`, added by the injector) and sub-element `[data-element]` attributes. Because Stage 2b already makes ordinary rules mutually exclusive, zeroing specificity never changes *which* rule matches — it only makes additive layering (`@fallback`, `@starting-style`) resolve deterministically by source order (see the post-pass). Canonical sorting/dedup/subsumption still run first; `:where()` is only the final wrapper, and both output paths (injector and direct-selector / SSR) consume the same wrapped fragments.
 
 ### Why
 
@@ -491,6 +523,8 @@ interface CSSRule {
   declarations: string; // CSS declarations (e.g. 'color: red;')
   atRules?: string[]; // Wrapping at-rules
   rootPrefix?: string; // Root state prefix
+  startingStyle?: boolean; // Wrap declarations in @starting-style
+  order?: number; // Internal cascade order hint (ascending source priority); stripped before injection
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-dcac388",
+  "version": "0.0.0-canary-c0382e7",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -80,7 +80,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "0.13.0",
-    "@tenphi/tasty": "2.6.4",
+    "@tenphi/tasty": "0.0.0-snapshot.93acf5b",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",