@nonoun/native-tokens 0.5.13 → 0.5.15

package/dist/foundation.css

@@ -813,24 +813,24 @@
     --n-body-active-neutral: var(--n-color-neutral-brighter);
     --n-body-disabled-neutral: var(--n-color-neutral-base);
 
-    --n-panel-neutral: var(--n-color-neutral-bright);
+    --n-panel-neutral: var(--n-color-neutral-base);
     --n-panel-hover-neutral: var(--n-color-neutral-brighter);
-    --n-panel-active-neutral: var(--n-color-neutral-brightest);
-    --n-panel-disabled-neutral: var(--n-color-neutral-base);
+    --n-panel-active-neutral: var(--n-color-neutral-bright);
+    --n-panel-disabled-neutral: var(--n-color-neutral-low);
 
     --n-control-neutral: var(--n-color-neutral-base);
     --n-control-hover-neutral: var(--n-color-neutral-bright);
     --n-control-active-neutral: var(--n-color-neutral-brighter);
     --n-control-disabled-neutral: var(--n-color-neutral-base);
 
-    --n-button-neutral: var(--n-color-neutral-higher);
-    --n-button-hover-neutral: var(--n-color-neutral-highest);
-    --n-button-active-neutral: var(--n-color-neutral-highest);
+    --n-button-neutral: var(--n-color-neutral-base);
+    --n-button-hover-neutral: var(--n-color-neutral-higher);
+    --n-button-active-neutral: var(--n-color-neutral-high);
     --n-button-disabled-neutral: var(--n-color-neutral-base);
 
-    --n-card-neutral: var(--n-color-neutral-brighter);
+    --n-card-neutral: var(--n-color-neutral-higher);
     --n-card-hover-neutral: var(--n-color-neutral-brightest);
-    --n-card-active-neutral: var(--n-color-neutral-brightest);
+    --n-card-active-neutral: var(--n-color-neutral-brighter);
     --n-card-disabled-neutral: var(--n-color-neutral-base);
 
     --n-modal-neutral: var(--n-color-neutral-brightest);
@@ -1265,6 +1265,31 @@
     display: none;
   }
 
+  /* ── Control Text Selection ── */
+  /* WHY: Interactive and display components should not have selectable text.
+     Real specificity (0,0,1+) ensures this beats :where() component defaults.
+     Opt in with [user-selectable] on any element that needs text selection. */
+
+  :where(
+    n-button, n-select, n-combobox, n-command,
+    n-checkbox, n-radio, n-switch, n-range,
+    n-segmented-control, n-tabs, n-tab,
+    n-listbox, n-option, n-option-group, n-option-group-header,
+    n-badge, n-kbd, n-avatar,
+    n-breadcrumb, n-pagination, n-pagination-dots,
+    n-accordion, n-calendar, n-tree,
+    n-icon, n-tooltip,
+    n-field, n-input-otp,
+    n-sidebar-nav, n-sidebar-nav-item, n-sidebar-group-header,
+    n-header, n-footer, n-toolbar
+  ) {
+    user-select: none;
+  }
+
+  [user-selectable] {
+    user-select: text;
+  }
+
   /* ── Document Defaults ── */
 
   :where(native-app-spa),
@@ -1588,8 +1613,8 @@
     --n-control-active: var(--n-control-active-neutral);
     --n-control-disabled: var(--n-control-disabled-neutral);
 
-    --n-widget: var(--n-color-neutral-higher);
-    --n-widget-hover: var(--n-control-hover-neutral);
+    --n-widget: var(--n-color-neutral-base);
+    --n-widget-hover: var(--n-control-hover-higher);
     --n-widget-active: var(--n-control-active-neutral);
     --n-widget-disabled: var(--n-control-disabled-neutral);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-tokens",
-  "version": "0.5.13",
+  "version": "0.5.15",
   "description": "OKLCH color token inspector for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",

package/dist/build-tokens.d.ts

@@ -1,70 +0,0 @@
-/** A variable slider: name, CSS custom property, default value, and range. */
-export interface TokenVariable {
-    type: 'variable';
-    name: string;
-    token: string;
-    value: number;
-    step?: number;
-    min?: number;
-    max?: number;
-}
-/** A labeled row of color swatches. */
-export interface TokenStrip {
-    type: 'strip';
-    label: string;
-    colors: Array<{
-        name: string;
-        token: string;
-    }>;
-}
-/** One item inside a section — either a slider or a color strip. */
-export type TokenSectionItem = TokenVariable | TokenStrip;
-/** A titled group of items, optionally tagged with a family for filtering. */
-export interface TokenSection {
-    title: string;
-    family?: string;
-    items: TokenSectionItem[];
-}
-/** Top-level schema describing the full token inspector content. */
-export interface TokenSchema {
-    sections: TokenSection[];
-}
-/** Available theme presets. */
-export declare const themes: readonly [{
-    readonly name: "Default";
-    readonly value: "";
-}, {
-    readonly name: "Forest";
-    readonly value: "forest";
-}, {
-    readonly name: "Rose";
-    readonly value: "rose";
-}, {
-    readonly name: "Zinc";
-    readonly value: "zinc";
-}];
-/** Color family names. */
-export declare const families: readonly ["neutral", "accent", "info", "success", "warning", "danger"];
-/** Pre-built options for a family filter `<n-select>`. */
-export declare const familyFilterOptions: {
-    value: string;
-    label: string;
-}[];
-/**
- * Returns the default token schema — all env params + all 6 color families
- * with their full ramp of surfaces, solids, semantics, and scrims.
- *
- * Hosts can call this, mutate the result (drop sections, reorder, add custom
- * tokens), and pass the modified schema to `<native-tokens>`.
- */
-export declare function createDefaultSchema(): TokenSchema;
-/**
- * Stamps token sections into `container` from the given schema.
- * Falls back to `createDefaultSchema()` when no schema is provided.
- *
- * This is a pure renderer — no header, filter, or theme controls.
- * The host provides those and wires them to the `<native-tokens>` element's
- * `family` attribute and the `native-tokens-theme-change` event.
- */
-export declare function buildTokens(container: HTMLElement, schema?: TokenSchema): void;
-//# sourceMappingURL=build-tokens.d.ts.map

package/dist/build-tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"build-tokens.d.ts","sourceRoot":"","sources":["../src/build-tokens.ts"],"names":[],"mappings":"AAEA,8EAA8E;AAC9E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,uCAAuC;AACvC,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChD;AAED,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,UAAU,CAAC;AAE1D,8EAA8E;AAC9E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,oEAAoE;AACpE,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC1B;AAID,+BAA+B;AAC/B,eAAO,MAAM,MAAM;;;;;;;;;;;;EAKT,CAAC;AAEX,0BAA0B;AAC1B,eAAO,MAAM,QAAQ,wEAAyE,CAAC;AAE/F,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB;;;GAG/B,CAAC;AA+DF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,IAAI,WAAW,CAWjD;AA4CD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAiB9E"}

package/dist/index.d.ts

@@ -1,13 +0,0 @@
-import { NTokensVariable } from './tokens-variable-element.ts';
-import { NTokensColors } from './tokens-colors-element.ts';
-import { NTokensColorSwatch } from './tokens-color-swatch-element.ts';
-import { NTokensThemes } from './tokens-themes-element.ts';
-import { NTokens } from './tokens-element.ts';
-import { NTokensPanel } from './tokens-panel-element.ts';
-import { buildTokens, createDefaultSchema, themes, families, familyFilterOptions } from './build-tokens.ts';
-export { NTokens, NTokensPanel, NTokensVariable, NTokensColors, NTokensColorSwatch, NTokensThemes, buildTokens, createDefaultSchema, themes, families, familyFilterOptions, };
-export type { TokenSchema, TokenSection, TokenSectionItem, TokenVariable, TokenStrip } from './build-tokens.ts';
-export type { NTokensVariableData } from './tokens-variable-element.ts';
-export type { NTokensColorEntry } from './tokens-colors-element.ts';
-export type { NTokensThemeEntry } from './tokens-themes-element.ts';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AA0B5G,OAAO,EACL,OAAO,EACP,YAAY,EACZ,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,mBAAmB,GACpB,CAAC;AACF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAChH,YAAY,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/tokens-color-swatch-element.d.ts

@@ -1,15 +0,0 @@
-import { NativeElement } from '@nonoun/native-ui';
-export declare class NTokensColorSwatch extends NativeElement {
-    #private;
-    static observedAttributes: string[];
-    get token(): string;
-    set token(val: string);
-    get name(): string;
-    set name(val: string);
-    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
-    setup(): void;
-    teardown(): void;
-    /** Refresh background and contrast from current token value. */
-    refresh(): void;
-}
-//# sourceMappingURL=tokens-color-swatch-element.d.ts.map

package/dist/tokens-color-swatch-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-color-swatch-element.d.ts","sourceRoot":"","sources":["../src/tokens-color-swatch-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AA8IvD,qBAAa,kBAAmB,SAAQ,aAAa;;IACnD,MAAM,CAAC,kBAAkB,WAAqB;IAM9C,IAAI,KAAK,IAAI,MAAM,CAA6C;IAChE,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAsC;IAE3D,IAAI,IAAI,IAAI,MAAM,CAA4C;IAC9D,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAAqC;IAEzD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAapF,KAAK,IAAI,IAAI;IAqCb,QAAQ,IAAI,IAAI;IAUhB,gEAAgE;IAChE,OAAO,IAAI,IAAI;CAsEhB"}

package/dist/tokens-colors-element.d.ts

@@ -1,14 +0,0 @@
-import { NativeElement } from '@nonoun/native-ui';
-export interface NTokensColorEntry {
-    name: string;
-    token: string;
-}
-export declare class NTokensColors extends NativeElement {
-    #private;
-    static observedAttributes: string[];
-    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
-    setup(): void;
-    teardown(): void;
-    refresh(): void;
-}
-//# sourceMappingURL=tokens-colors-element.d.ts.map

package/dist/tokens-colors-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-colors-element.d.ts","sourceRoot":"","sources":["../src/tokens-colors-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAab,QAAQ,IAAI,IAAI;IAWhB,OAAO,IAAI,IAAI;CAuBhB"}

package/dist/tokens-element.d.ts

@@ -1,32 +0,0 @@
-import { NativeElement } from '@nonoun/native-ui';
-import type { TokenSchema } from './build-tokens.ts';
-/**
- * Design system token inspector — renders token sections from a schema.
- *
- * - `schema` property — JSON-serializable `TokenSchema` describing what to
- *   render.  Falls back to `createDefaultSchema()` when unset.
- * - `family` attribute — filters visible sections ("all" or a family name).
- * - `native-tokens-theme-change` event (document-level) — syncs variable sliders.
- *
- * Minimal usage (default schema, host provides layout):
- * ```html
- * <native-tokens></native-tokens>
- * ```
- *
- * Custom schema (host decides what to show):
- * ```js
- * const el = document.querySelector('native-tokens');
- * el.schema = myCustomSchema;
- * ```
- */
-export declare class NTokens extends NativeElement {
-    #private;
-    static observedAttributes: string[];
-    /** JSON-serializable schema describing what to render. */
-    get schema(): TokenSchema | undefined;
-    set schema(val: TokenSchema | undefined);
-    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
-    setup(): void;
-    teardown(): void;
-}
-//# sourceMappingURL=tokens-element.d.ts.map

package/dist/tokens-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-element.d.ts","sourceRoot":"","sources":["../src/tokens-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;;IACxC,MAAM,CAAC,kBAAkB,WAAc;IAIvC,0DAA0D;IAC1D,IAAI,MAAM,IAAI,WAAW,GAAG,SAAS,CAAyB;IAC9D,IAAI,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,EAGtC;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAKpF,KAAK,IAAI,IAAI;IAYb,QAAQ,IAAI,IAAI;CAwCjB"}

package/dist/tokens-panel-element.d.ts

@@ -1,28 +0,0 @@
-import { NativeElement } from '@nonoun/native-ui';
-import type { TokenSchema } from './build-tokens.ts';
-/**
- * Stamped panel for the design token inspector.
- *
- * Creates `<n-header>` (icon, title, theme selector, family filter) and
- * `<n-body>` containing `<native-tokens>` directly as children.
- * The host element itself is the panel surface — style via CSS.
- *
- * Usage:
- * ```html
- * <native-tokens-panel></native-tokens-panel>
- * ```
- *
- * The host can also set a custom schema:
- * ```js
- * panel.schema = customSchema;
- * ```
- */
-export declare class NTokensPanel extends NativeElement {
-    #private;
-    /** Pass-through to the inner `<native-tokens>` schema. */
-    get schema(): TokenSchema | undefined;
-    set schema(val: TokenSchema | undefined);
-    setup(): void;
-    teardown(): void;
-}
-//# sourceMappingURL=tokens-panel-element.d.ts.map

package/dist/tokens-panel-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-panel-element.d.ts","sourceRoot":"","sources":["../src/tokens-panel-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,YAAa,SAAQ,aAAa;;IAI7C,0DAA0D;IAC1D,IAAI,MAAM,IAAI,WAAW,GAAG,SAAS,CAAyB;IAC9D,IAAI,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,EAGtC;IAED,KAAK,IAAI,IAAI;IAmDb,QAAQ,IAAI,IAAI;CAKjB"}

package/dist/tokens-themes-element.d.ts

@@ -1,13 +0,0 @@
-import { NativeElement } from '@nonoun/native-ui';
-export interface NTokensThemeEntry {
-    name: string;
-    value: string;
-}
-export declare class NTokensThemes extends NativeElement {
-    #private;
-    static observedAttributes: string[];
-    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
-    setup(): void;
-    teardown(): void;
-}
-//# sourceMappingURL=tokens-themes-element.d.ts.map

package/dist/tokens-themes-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-themes-element.d.ts","sourceRoot":"","sources":["../src/tokens-themes-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAeD,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CA8CjB"}

package/dist/tokens-variable-element.d.ts

@@ -1,19 +0,0 @@
-import { NativeElement } from '@nonoun/native-ui';
-export interface NTokensVariableData {
-    name: string;
-    type: 'number';
-    token: string;
-    value: number;
-    step?: number;
-    min?: number;
-    max?: number;
-}
-export declare class NTokensVariable extends NativeElement {
-    #private;
-    static observedAttributes: string[];
-    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
-    setup(): void;
-    teardown(): void;
-    sync(): void;
-}
-//# sourceMappingURL=tokens-variable-element.d.ts.map

package/dist/tokens-variable-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-variable-element.d.ts","sourceRoot":"","sources":["../src/tokens-variable-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,eAAgB,SAAQ,aAAa;;IAChD,MAAM,CAAC,kBAAkB,WAAY;IAMrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAWb,QAAQ,IAAI,IAAI;IAYhB,IAAI,IAAI,IAAI;CA8Db"}