@nonoun/native-tokens 0.4.1 → 0.5.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/dist/build-tokens.d.ts +69 -1
- package/dist/build-tokens.d.ts.map +1 -1
- package/dist/foundation.css +1981 -0
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/native-tokens.css +33 -9
- package/dist/native-tokens.js +304 -158
- package/dist/tokens-element.d.ts +22 -5
- package/dist/tokens-element.d.ts.map +1 -1
- package/dist/tokens-panel-element.d.ts +28 -0
- package/dist/tokens-panel-element.d.ts.map +1 -0
- package/package.json +5 -4
package/dist/tokens-element.d.ts
CHANGED
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
import type { TokenSchema } from './build-tokens.ts';
|
|
2
3
|
/**
|
|
3
|
-
*
|
|
4
|
+
* Design system token inspector — renders token sections from a schema.
|
|
4
5
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
6
|
+
* - `schema` property — JSON-serializable `TokenSchema` describing what to
|
|
7
|
+
* render. Falls back to `createDefaultSchema()` when unset.
|
|
8
|
+
* - `family` attribute — filters visible sections ("all" or a family name).
|
|
9
|
+
* - `native-tokens-theme-change` event (document-level) — syncs variable sliders.
|
|
7
10
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
11
|
+
* Minimal usage (default schema, host provides layout):
|
|
12
|
+
* ```html
|
|
13
|
+
* <native-tokens></native-tokens>
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* Custom schema (host decides what to show):
|
|
17
|
+
* ```js
|
|
18
|
+
* const el = document.querySelector('native-tokens');
|
|
19
|
+
* el.schema = myCustomSchema;
|
|
20
|
+
* ```
|
|
10
21
|
*/
|
|
11
22
|
export declare class NTokens extends NativeElement {
|
|
23
|
+
#private;
|
|
24
|
+
static observedAttributes: string[];
|
|
25
|
+
/** JSON-serializable schema describing what to render. */
|
|
26
|
+
get schema(): TokenSchema | undefined;
|
|
27
|
+
set schema(val: TokenSchema | undefined);
|
|
28
|
+
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
12
29
|
setup(): void;
|
|
13
30
|
teardown(): void;
|
|
14
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens-element.d.ts","sourceRoot":"","sources":["../src/tokens-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
import type { TokenSchema } from './build-tokens.ts';
|
|
3
|
+
/**
|
|
4
|
+
* Stamped panel for the design token inspector.
|
|
5
|
+
*
|
|
6
|
+
* Creates `<n-header>` (icon, title, theme selector, family filter) and
|
|
7
|
+
* `<n-body>` containing `<native-tokens>` directly as children.
|
|
8
|
+
* The host element itself is the panel surface — style via CSS.
|
|
9
|
+
*
|
|
10
|
+
* Usage:
|
|
11
|
+
* ```html
|
|
12
|
+
* <native-tokens-panel></native-tokens-panel>
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* The host can also set a custom schema:
|
|
16
|
+
* ```js
|
|
17
|
+
* panel.schema = customSchema;
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare class NTokensPanel extends NativeElement {
|
|
21
|
+
#private;
|
|
22
|
+
/** Pass-through to the inner `<native-tokens>` schema. */
|
|
23
|
+
get schema(): TokenSchema | undefined;
|
|
24
|
+
set schema(val: TokenSchema | undefined);
|
|
25
|
+
setup(): void;
|
|
26
|
+
teardown(): void;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=tokens-panel-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nonoun/native-tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "OKLCH color token inspector for @nonoun/native-ui",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"types": "./dist/index.d.ts",
|
|
13
13
|
"default": "./dist/native-tokens.js"
|
|
14
14
|
},
|
|
15
|
-
"./css": "./dist/native-tokens.css"
|
|
15
|
+
"./css": "./dist/native-tokens.css",
|
|
16
|
+
"./css/foundation": "./dist/foundation.css"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"dist"
|
|
@@ -21,12 +22,12 @@
|
|
|
21
22
|
"./dist/native-tokens.js"
|
|
22
23
|
],
|
|
23
24
|
"peerDependencies": {
|
|
24
|
-
"@nonoun/native-ui": ">=0.
|
|
25
|
+
"@nonoun/native-ui": ">=0.6.0"
|
|
25
26
|
},
|
|
26
27
|
"scripts": {
|
|
27
28
|
"build": "npm run build:js && npm run build:css && npm run build:types",
|
|
28
29
|
"build:js": "vite build",
|
|
29
|
-
"build:css": "
|
|
30
|
+
"build:css": "node scripts/build-css.mjs",
|
|
30
31
|
"build:types": "tsc -p tsconfig.build.json"
|
|
31
32
|
},
|
|
32
33
|
"publishConfig": {
|