@threelight/ui 0.2.0-alpha.0 → 0.2.0-alpha.1

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.
Files changed (8) hide show
  1. package/README.md +124 -95
  2. package/css/base.css +477 -352
  3. package/dist/index.d.ts +23 -9
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +79 -30
  6. package/dist/index.js.map +1 -1
  7. package/examples/index.html +102 -43
  8. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -8,26 +8,40 @@ export declare const themeModes: readonly ["light", "dark"];
8
8
  export type ThemeMode = (typeof themeModes)[number];
9
9
  export declare const toneNames: readonly ["neutral", "primary", "info", "success", "warning", "danger"];
10
10
  export type ToneName = (typeof toneNames)[number];
11
+ export declare const stateNames: readonly ["loading", "empty", "error"];
12
+ export type StateName = (typeof stateNames)[number];
11
13
  export declare const themeAttributes: {
12
14
  readonly root: "data-tl-root";
13
15
  readonly theme: "data-tl-theme";
14
16
  readonly mode: "data-tl-mode";
15
17
  readonly tone: "data-tl-tone";
18
+ readonly state: "data-tl-state";
16
19
  };
17
20
  export declare const primitiveClasses: {
18
- readonly layout: readonly ["tl-section", "tl-stack", "tl-cluster", "tl-grid"];
19
- readonly surface: readonly ["tl-surface", "tl-card", "tl-panel"];
20
- readonly text: readonly ["tl-display", "tl-heading", "tl-body", "tl-caption", "tl-meta", "tl-label", "tl-action-text", "tl-metric", "tl-code", "tl-help"];
21
- readonly action: readonly ["tl-button"];
22
- readonly status: readonly ["tl-badge", "tl-alert"];
23
- readonly form: readonly ["tl-field", "tl-input"];
21
+ readonly component: readonly ["tl-component-button", "tl-component-card", "tl-component-panel", "tl-component-input", "tl-component-badge", "tl-component-alert", "tl-component-display", "tl-component-heading", "tl-component-body", "tl-component-caption", "tl-component-meta", "tl-component-label", "tl-component-action-text", "tl-component-metric", "tl-component-code", "tl-component-field", "tl-component-help"];
22
+ readonly pattern: readonly ["tl-pattern-page-header", "tl-pattern-empty-state"];
23
+ readonly patternPart: readonly ["tl-pattern-page-header__content", "tl-pattern-page-header__actions", "tl-pattern-empty-state__content", "tl-pattern-empty-state__actions"];
24
+ readonly layout: readonly ["tl-layout-section", "tl-layout-stack", "tl-layout-cluster", "tl-layout-grid"];
25
+ readonly utility: readonly ["tl-utility-sr-only", "tl-utility-truncate"];
24
26
  };
27
+ export declare const componentClasses: readonly ["tl-component-button", "tl-component-card", "tl-component-panel", "tl-component-input", "tl-component-badge", "tl-component-alert", "tl-component-display", "tl-component-heading", "tl-component-body", "tl-component-caption", "tl-component-meta", "tl-component-label", "tl-component-action-text", "tl-component-metric", "tl-component-code", "tl-component-field", "tl-component-help"];
28
+ export declare const patternClasses: readonly ["tl-pattern-page-header", "tl-pattern-empty-state"];
29
+ export declare const patternPartClasses: readonly ["tl-pattern-page-header__content", "tl-pattern-page-header__actions", "tl-pattern-empty-state__content", "tl-pattern-empty-state__actions"];
30
+ export declare const layoutClasses: readonly ["tl-layout-section", "tl-layout-stack", "tl-layout-cluster", "tl-layout-grid"];
31
+ export declare const utilityClasses: readonly ["tl-utility-sr-only", "tl-utility-truncate"];
25
32
  export type PrimitiveGroup = keyof typeof primitiveClasses;
26
33
  export type PrimitiveClass = (typeof primitiveClasses)[PrimitiveGroup][number];
27
- export declare const semanticTokenNames: readonly ["--tl-canvas", "--tl-surface", "--tl-layer", "--tl-content-primary", "--tl-content-secondary", "--tl-content-subtle", "--tl-border-subtle", "--tl-border-strong", "--tl-focus"];
34
+ export type ComponentClass = (typeof componentClasses)[number];
35
+ export type PatternClass = (typeof patternClasses)[number];
36
+ export type PatternPartClass = (typeof patternPartClasses)[number];
37
+ export type LayoutClass = (typeof layoutClasses)[number];
38
+ export type UtilityClass = (typeof utilityClasses)[number];
39
+ export declare const semanticTokenNames: readonly ["--tl-color-canvas", "--tl-color-surface", "--tl-color-layer", "--tl-color-content-primary", "--tl-color-content-secondary", "--tl-color-content-subtle", "--tl-color-border-subtle", "--tl-color-border-strong", "--tl-color-focus", "--tl-font-sans", "--tl-font-mono", "--tl-font-size-display", "--tl-font-size-heading", "--tl-font-size-body", "--tl-font-size-caption", "--tl-font-size-metric", "--tl-space-1", "--tl-space-2", "--tl-space-3", "--tl-space-4", "--tl-space-5", "--tl-space-6", "--tl-space-8", "--tl-space-10", "--tl-radius-sm", "--tl-radius-md", "--tl-radius-lg", "--tl-shadow-sm"];
28
40
  export type SemanticTokenName = (typeof semanticTokenNames)[number];
29
- export declare const toneTokenNames: ("--tl-primary-fill" | "--tl-info-fill" | "--tl-success-fill" | "--tl-warning-fill" | "--tl-danger-fill" | "--tl-primary-on-fill" | "--tl-info-on-fill" | "--tl-success-on-fill" | "--tl-warning-on-fill" | "--tl-danger-on-fill" | "--tl-primary-soft" | "--tl-info-soft" | "--tl-success-soft" | "--tl-warning-soft" | "--tl-danger-soft" | "--tl-primary-content" | "--tl-info-content" | "--tl-success-content" | "--tl-warning-content" | "--tl-danger-content" | "--tl-primary-border" | "--tl-info-border" | "--tl-success-border" | "--tl-warning-border" | "--tl-danger-border")[];
41
+ export declare const toneTokenNames: ("--tl-color-primary-fill" | "--tl-color-info-fill" | "--tl-color-success-fill" | "--tl-color-warning-fill" | "--tl-color-danger-fill" | "--tl-color-primary-content" | "--tl-color-info-content" | "--tl-color-success-content" | "--tl-color-warning-content" | "--tl-color-danger-content" | "--tl-color-primary-soft" | "--tl-color-info-soft" | "--tl-color-success-soft" | "--tl-color-warning-soft" | "--tl-color-danger-soft" | "--tl-color-primary-border" | "--tl-color-info-border" | "--tl-color-success-border" | "--tl-color-warning-border" | "--tl-color-danger-border")[];
30
42
  export type ToneTokenName = (typeof toneTokenNames)[number];
31
- export declare const componentTokenNames: readonly ["--tl-component-background", "--tl-component-content", "--tl-component-content-muted", "--tl-component-border", "--tl-button-background", "--tl-button-content", "--tl-button-border", "--tl-badge-background", "--tl-badge-content", "--tl-badge-border"];
43
+ export declare const componentTokenNames: readonly ["--tl-component-background", "--tl-component-content", "--tl-component-content-muted", "--tl-component-border", "--tl-button-background", "--tl-button-content", "--tl-button-border", "--tl-button-disabled-background", "--tl-button-disabled-content", "--tl-button-disabled-border", "--tl-badge-background", "--tl-badge-content", "--tl-badge-border"];
32
44
  export type ComponentTokenName = (typeof componentTokenNames)[number];
45
+ export declare const tokenNames: readonly ["--tl-color-canvas", "--tl-color-surface", "--tl-color-layer", "--tl-color-content-primary", "--tl-color-content-secondary", "--tl-color-content-subtle", "--tl-color-border-subtle", "--tl-color-border-strong", "--tl-color-focus", "--tl-font-sans", "--tl-font-mono", "--tl-font-size-display", "--tl-font-size-heading", "--tl-font-size-body", "--tl-font-size-caption", "--tl-font-size-metric", "--tl-space-1", "--tl-space-2", "--tl-space-3", "--tl-space-4", "--tl-space-5", "--tl-space-6", "--tl-space-8", "--tl-space-10", "--tl-radius-sm", "--tl-radius-md", "--tl-radius-lg", "--tl-shadow-sm", ...("--tl-color-primary-fill" | "--tl-color-info-fill" | "--tl-color-success-fill" | "--tl-color-warning-fill" | "--tl-color-danger-fill" | "--tl-color-primary-content" | "--tl-color-info-content" | "--tl-color-success-content" | "--tl-color-warning-content" | "--tl-color-danger-content" | "--tl-color-primary-soft" | "--tl-color-info-soft" | "--tl-color-success-soft" | "--tl-color-warning-soft" | "--tl-color-danger-soft" | "--tl-color-primary-border" | "--tl-color-info-border" | "--tl-color-success-border" | "--tl-color-warning-border" | "--tl-color-danger-border")[], "--tl-component-background", "--tl-component-content", "--tl-component-content-muted", "--tl-component-border", "--tl-button-background", "--tl-button-content", "--tl-button-border", "--tl-button-disabled-background", "--tl-button-disabled-content", "--tl-button-disabled-border", "--tl-badge-background", "--tl-badge-content", "--tl-badge-border"];
46
+ export type TokenName = (typeof tokenNames)[number];
33
47
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;CAGtB,CAAA;AAEV,eAAO,MAAM,aAAa,sBAAuB,CAAA;AACjD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD,eAAO,MAAM,UAAU,4BAA6B,CAAA;AACpD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,eAAO,MAAM,SAAS,yEAOZ,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAEjD,eAAO,MAAM,eAAe;;;;;CAKlB,CAAA;AAEV,eAAO,MAAM,gBAAgB;;;;;;;CAkBnB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAC1D,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,eAAO,MAAM,kBAAkB,2LAUrB,CAAA;AACV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnE,eAAO,MAAM,cAAc,6jBAUzB,CAAA;AACF,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,eAAO,MAAM,mBAAmB,sQAWtB,CAAA;AACV,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB;;;CAGtB,CAAA;AAEV,eAAO,MAAM,aAAa,sBAAuB,CAAA;AAEjD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD,eAAO,MAAM,UAAU,4BAA6B,CAAA;AAEpD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,eAAO,MAAM,SAAS,yEAOZ,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAEjD,eAAO,MAAM,UAAU,wCAAyC,CAAA;AAEhE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAA;AAEV,eAAO,MAAM,gBAAgB;;;;;;CAkCnB,CAAA;AAEV,eAAO,MAAM,gBAAgB,0YAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc,+DAA2B,CAAA;AACtD,eAAO,MAAM,kBAAkB,uJAA+B,CAAA;AAC9D,eAAO,MAAM,aAAa,0FAA0B,CAAA;AACpD,eAAO,MAAM,cAAc,wDAA2B,CAAA;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAE1D,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AACxD,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1D,eAAO,MAAM,kBAAkB,4lBA6BrB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEnE,eAAO,MAAM,cAAc,4jBASzB,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3D,eAAO,MAAM,mBAAmB,wWActB,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAErE,eAAO,MAAM,UAAU,w/CAIb,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA"}
package/dist/index.js CHANGED
@@ -12,51 +12,92 @@ export const toneNames = [
12
12
  'warning',
13
13
  'danger',
14
14
  ];
15
+ export const stateNames = ['loading', 'empty', 'error'];
15
16
  export const themeAttributes = {
16
17
  root: 'data-tl-root',
17
18
  theme: 'data-tl-theme',
18
19
  mode: 'data-tl-mode',
19
20
  tone: 'data-tl-tone',
21
+ state: 'data-tl-state',
20
22
  };
21
23
  export const primitiveClasses = {
22
- layout: ['tl-section', 'tl-stack', 'tl-cluster', 'tl-grid'],
23
- surface: ['tl-surface', 'tl-card', 'tl-panel'],
24
- text: [
25
- 'tl-display',
26
- 'tl-heading',
27
- 'tl-body',
28
- 'tl-caption',
29
- 'tl-meta',
30
- 'tl-label',
31
- 'tl-action-text',
32
- 'tl-metric',
33
- 'tl-code',
34
- 'tl-help',
24
+ component: [
25
+ 'tl-component-button',
26
+ 'tl-component-card',
27
+ 'tl-component-panel',
28
+ 'tl-component-input',
29
+ 'tl-component-badge',
30
+ 'tl-component-alert',
31
+ 'tl-component-display',
32
+ 'tl-component-heading',
33
+ 'tl-component-body',
34
+ 'tl-component-caption',
35
+ 'tl-component-meta',
36
+ 'tl-component-label',
37
+ 'tl-component-action-text',
38
+ 'tl-component-metric',
39
+ 'tl-component-code',
40
+ 'tl-component-field',
41
+ 'tl-component-help',
35
42
  ],
36
- action: ['tl-button'],
37
- status: ['tl-badge', 'tl-alert'],
38
- form: ['tl-field', 'tl-input'],
43
+ pattern: ['tl-pattern-page-header', 'tl-pattern-empty-state'],
44
+ patternPart: [
45
+ 'tl-pattern-page-header__content',
46
+ 'tl-pattern-page-header__actions',
47
+ 'tl-pattern-empty-state__content',
48
+ 'tl-pattern-empty-state__actions',
49
+ ],
50
+ layout: [
51
+ 'tl-layout-section',
52
+ 'tl-layout-stack',
53
+ 'tl-layout-cluster',
54
+ 'tl-layout-grid',
55
+ ],
56
+ utility: ['tl-utility-sr-only', 'tl-utility-truncate'],
39
57
  };
58
+ export const componentClasses = primitiveClasses.component;
59
+ export const patternClasses = primitiveClasses.pattern;
60
+ export const patternPartClasses = primitiveClasses.patternPart;
61
+ export const layoutClasses = primitiveClasses.layout;
62
+ export const utilityClasses = primitiveClasses.utility;
40
63
  export const semanticTokenNames = [
41
- '--tl-canvas',
42
- '--tl-surface',
43
- '--tl-layer',
44
- '--tl-content-primary',
45
- '--tl-content-secondary',
46
- '--tl-content-subtle',
47
- '--tl-border-subtle',
48
- '--tl-border-strong',
49
- '--tl-focus',
64
+ '--tl-color-canvas',
65
+ '--tl-color-surface',
66
+ '--tl-color-layer',
67
+ '--tl-color-content-primary',
68
+ '--tl-color-content-secondary',
69
+ '--tl-color-content-subtle',
70
+ '--tl-color-border-subtle',
71
+ '--tl-color-border-strong',
72
+ '--tl-color-focus',
73
+ '--tl-font-sans',
74
+ '--tl-font-mono',
75
+ '--tl-font-size-display',
76
+ '--tl-font-size-heading',
77
+ '--tl-font-size-body',
78
+ '--tl-font-size-caption',
79
+ '--tl-font-size-metric',
80
+ '--tl-space-1',
81
+ '--tl-space-2',
82
+ '--tl-space-3',
83
+ '--tl-space-4',
84
+ '--tl-space-5',
85
+ '--tl-space-6',
86
+ '--tl-space-8',
87
+ '--tl-space-10',
88
+ '--tl-radius-sm',
89
+ '--tl-radius-md',
90
+ '--tl-radius-lg',
91
+ '--tl-shadow-sm',
50
92
  ];
51
93
  export const toneTokenNames = toneNames.flatMap((tone) => {
52
94
  if (tone === 'neutral')
53
95
  return [];
54
96
  return [
55
- `--tl-${tone}-fill`,
56
- `--tl-${tone}-on-fill`,
57
- `--tl-${tone}-soft`,
58
- `--tl-${tone}-content`,
59
- `--tl-${tone}-border`,
97
+ `--tl-color-${tone}-fill`,
98
+ `--tl-color-${tone}-content`,
99
+ `--tl-color-${tone}-soft`,
100
+ `--tl-color-${tone}-border`,
60
101
  ];
61
102
  });
62
103
  export const componentTokenNames = [
@@ -67,8 +108,16 @@ export const componentTokenNames = [
67
108
  '--tl-button-background',
68
109
  '--tl-button-content',
69
110
  '--tl-button-border',
111
+ '--tl-button-disabled-background',
112
+ '--tl-button-disabled-content',
113
+ '--tl-button-disabled-border',
70
114
  '--tl-badge-background',
71
115
  '--tl-badge-content',
72
116
  '--tl-badge-border',
73
117
  ];
118
+ export const tokenNames = [
119
+ ...semanticTokenNames,
120
+ ...toneTokenNames,
121
+ ...componentTokenNames,
122
+ ];
74
123
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,mDAAmD;CACpD,CAAA;AAEV,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,CAAU,CAAA;AAGjD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAA;AAGpD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,SAAS;IACT,SAAS;IACT,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;CACA,CAAA;AAGV,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,cAAc;CACZ,CAAA;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,CAAC;IAC3D,OAAO,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC;IAC9C,IAAI,EAAE;QACJ,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,UAAU;QACV,gBAAgB;QAChB,WAAW;QACX,SAAS;QACT,SAAS;KACV;IACD,MAAM,EAAE,CAAC,WAAW,CAAC;IACrB,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC,IAAI,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;CACtB,CAAA;AAMV,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,aAAa;IACb,cAAc;IACd,YAAY;IACZ,sBAAsB;IACtB,wBAAwB;IACxB,qBAAqB;IACrB,oBAAoB;IACpB,oBAAoB;IACpB,YAAY;CACJ,CAAA;AAGV,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;IACvD,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,EAAE,CAAA;IAEjC,OAAO;QACL,QAAQ,IAAI,OAAO;QACnB,QAAQ,IAAI,UAAU;QACtB,QAAQ,IAAI,OAAO;QACnB,QAAQ,IAAI,UAAU;QACtB,QAAQ,IAAI,SAAS;KACb,CAAA;AACZ,CAAC,CAAC,CAAA;AAGF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,2BAA2B;IAC3B,wBAAwB;IACxB,8BAA8B;IAC9B,uBAAuB;IACvB,wBAAwB;IACxB,qBAAqB;IACrB,oBAAoB;IACpB,uBAAuB;IACvB,oBAAoB;IACpB,mBAAmB;CACX,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/examples/index.html CHANGED
@@ -3,66 +3,125 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>ThreeLight UI Example</title>
6
+ <title>ThreeLight UI core examples</title>
7
7
  <link rel="stylesheet" href="../css/base.css" />
8
- <style>
9
- body {
10
- margin: 0;
11
- }
12
-
13
- .example-shell {
14
- min-block-size: 100vh;
15
- }
16
- </style>
17
8
  </head>
18
9
  <body data-tl-root data-tl-theme="default" data-tl-mode="light">
19
- <main class="example-shell tl-section tl-stack">
20
- <header class="tl-stack">
21
- <span class="tl-badge" data-tl-tone="primary">Alpha contract</span>
22
- <h1 class="tl-display">Deployment readiness</h1>
23
- <p class="tl-body">
24
- Review release health, approvals, and generated copy before the next
25
- publish window.
26
- </p>
10
+ <main class="tl-layout-section tl-layout-stack" style="--tl-gap: 2rem">
11
+ <header class="tl-pattern-page-header">
12
+ <div class="tl-pattern-page-header__content">
13
+ <p class="tl-component-label">Normal PageHeader</p>
14
+ <h1 class="tl-component-display">Release readiness</h1>
15
+ <p class="tl-component-body">
16
+ Governed HTML/CSS foundations with readable defaults and stable
17
+ adapter-ready class names.
18
+ </p>
19
+ </div>
20
+ <div class="tl-pattern-page-header__actions">
21
+ <button class="tl-component-button" type="button">Preview</button>
22
+ <button class="tl-component-button" type="button" data-tl-tone="primary">
23
+ Approve
24
+ </button>
25
+ </div>
27
26
  </header>
28
27
 
29
- <section class="tl-grid" style="--tl-grid-min: 14rem">
30
- <article class="tl-card tl-stack" data-tl-tone="success">
31
- <span class="tl-badge" data-tl-tone="success">Passing</span>
32
- <p class="tl-metric">98%</p>
33
- <p class="tl-body">Generated labels meet the readable text floor.</p>
28
+ <section class="tl-layout-grid" style="--tl-grid-min: 14rem">
29
+ <article class="tl-component-card tl-layout-stack" data-tl-tone="success">
30
+ <span class="tl-component-badge" data-tl-tone="success">Passing</span>
31
+ <p class="tl-component-metric">98%</p>
32
+ <p class="tl-component-body">
33
+ Generated labels meet the readable text floor.
34
+ </p>
34
35
  </article>
35
36
 
36
- <article class="tl-card tl-stack" data-tl-tone="warning">
37
- <span class="tl-badge" data-tl-tone="warning">Pending</span>
38
- <p class="tl-metric">3</p>
39
- <p class="tl-body">Surface tone changes need a second review.</p>
37
+ <article class="tl-component-card tl-layout-stack" data-tl-tone="warning">
38
+ <span class="tl-component-badge" data-tl-tone="warning">Pending</span>
39
+ <p class="tl-component-metric">3</p>
40
+ <p class="tl-component-body">
41
+ Surface tone changes need a second review.
42
+ </p>
40
43
  </article>
41
44
 
42
- <article class="tl-card tl-stack" data-tl-tone="info">
43
- <span class="tl-badge" data-tl-tone="info">Quiet</span>
44
- <p class="tl-metric">0</p>
45
- <p class="tl-body">No active regressions in the release window.</p>
45
+ <article class="tl-component-card tl-layout-stack" data-tl-tone="info">
46
+ <span class="tl-component-badge" data-tl-tone="info">Quiet</span>
47
+ <p class="tl-component-metric">0</p>
48
+ <p class="tl-component-body">
49
+ No active regressions in the release window.
50
+ </p>
46
51
  </article>
47
52
  </section>
48
53
 
49
- <section class="tl-alert tl-stack" data-tl-tone="warning" role="status">
50
- <h2 class="tl-heading">Long content check</h2>
51
- <p class="tl-body">
52
- The generated release note contains a long URL:
53
- <code class="tl-code"
54
- >https://example.com/releases/2026/06/readability-window-review</code
55
- >
56
- </p>
57
- <div class="tl-cluster">
58
- <button class="tl-button" type="button" data-tl-tone="primary">
59
- Approve
54
+ <section class="tl-pattern-page-header">
55
+ <div class="tl-pattern-page-header__content">
56
+ <p class="tl-component-label">Long-text PageHeader</p>
57
+ <h2 class="tl-component-heading">
58
+ Generated release summary with Korean text, long English words,
59
+ numbers, and a URL
60
+ </h2>
61
+ <p class="tl-component-body">
62
+ 한국어문장이공백없이길게이어져도부모폭을깨지않아야합니다.
63
+ The generated identifier
64
+ supercalifragilisticexpialidocious-release-window-20260611-00000000000000000042
65
+ and URL
66
+ <code class="tl-component-code"
67
+ >https://example.com/releases/2026/06/readability-window-review?candidate=alpha-contract-update</code
68
+ >
69
+ should wrap inside the container.
70
+ </p>
71
+ </div>
72
+ <div class="tl-pattern-page-header__actions">
73
+ <button class="tl-component-button" type="button">Copy summary</button>
74
+ <button class="tl-component-button" type="button" data-tl-tone="info">
75
+ Open preview
60
76
  </button>
61
- <button class="tl-button" type="button" data-tl-tone="danger">
77
+ <button class="tl-component-button" type="button" data-tl-tone="danger">
62
78
  Request changes
63
79
  </button>
64
80
  </div>
65
81
  </section>
82
+
83
+ <section class="tl-pattern-empty-state" data-tl-state="empty">
84
+ <div class="tl-pattern-empty-state__content">
85
+ <p class="tl-component-label">EmptyState</p>
86
+ <h2 class="tl-component-heading">No reports are queued</h2>
87
+ <p class="tl-component-body">
88
+ Add a report or import a generated note. The empty state keeps the
89
+ text centered, wrapped, and readable without app-specific classes.
90
+ </p>
91
+ </div>
92
+ <div class="tl-pattern-empty-state__actions">
93
+ <button class="tl-component-button" type="button" data-tl-tone="primary">
94
+ Add report
95
+ </button>
96
+ <button class="tl-component-button" type="button">
97
+ Import generated note
98
+ </button>
99
+ </div>
100
+ </section>
101
+
102
+ <section
103
+ class="tl-component-alert tl-layout-stack"
104
+ data-tl-tone="danger"
105
+ data-tl-state="error"
106
+ role="status"
107
+ >
108
+ <h2 class="tl-component-heading">Stress case</h2>
109
+ <p class="tl-component-body">
110
+ Error copy can contain 한국어긴텍스트와VeryLongEnglishTokenWithoutSpaces,
111
+ the number 202606110000000000000000000000000000000042, and a URL:
112
+ <code class="tl-component-code"
113
+ >https://example.com/errors/readability/overflow-detection/follow-up</code
114
+ >.
115
+ </p>
116
+ <div class="tl-layout-cluster">
117
+ <button class="tl-component-button" type="button" data-tl-tone="primary">
118
+ Retry
119
+ </button>
120
+ <button class="tl-component-button" type="button">
121
+ View diagnostics
122
+ </button>
123
+ </div>
124
+ </section>
66
125
  </main>
67
126
  </body>
68
127
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threelight/ui",
3
- "version": "0.2.0-alpha.0",
3
+ "version": "0.2.0-alpha.1",
4
4
  "description": "Framework-neutral governed UI primitives for readable HTML/CSS interfaces.",
5
5
  "type": "module",
6
6
  "license": "MIT",