@techsio/ui-kit 0.47.0 → 0.49.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.
Files changed (45) hide show
  1. package/dist/atoms/numeric-input.js +3 -0
  2. package/dist/internal/molecules/vertical-navigation.context.js +15 -0
  3. package/dist/internal/molecules/vertical-navigation.styles.js +68 -0
  4. package/dist/molecules/form-checkbox.js +12 -2
  5. package/dist/molecules/form-error-summary.js +59 -0
  6. package/dist/molecules/form-input.js +10 -1
  7. package/dist/molecules/form-numeric-input.js +9 -1
  8. package/dist/molecules/form-textarea.js +10 -1
  9. package/dist/molecules/vertical-navigation.js +228 -0
  10. package/dist/src/atoms/numeric-input.d.ts +1 -1
  11. package/dist/src/atoms/numeric-input.d.ts.map +1 -1
  12. package/dist/src/internal/molecules/vertical-navigation.context.d.ts +25 -0
  13. package/dist/src/internal/molecules/vertical-navigation.context.d.ts.map +1 -0
  14. package/dist/src/internal/molecules/vertical-navigation.styles.d.ts +143 -0
  15. package/dist/src/internal/molecules/vertical-navigation.styles.d.ts.map +1 -0
  16. package/dist/src/molecules/form-checkbox.d.ts +2 -1
  17. package/dist/src/molecules/form-checkbox.d.ts.map +1 -1
  18. package/dist/src/molecules/form-error-summary.d.ts +29 -0
  19. package/dist/src/molecules/form-error-summary.d.ts.map +1 -0
  20. package/dist/src/molecules/form-input.d.ts +3 -3
  21. package/dist/src/molecules/form-input.d.ts.map +1 -1
  22. package/dist/src/molecules/form-numeric-input.d.ts +3 -3
  23. package/dist/src/molecules/form-numeric-input.d.ts.map +1 -1
  24. package/dist/src/molecules/form-textarea.d.ts +3 -3
  25. package/dist/src/molecules/form-textarea.d.ts.map +1 -1
  26. package/dist/src/molecules/vertical-navigation.d.ts +44 -0
  27. package/dist/src/molecules/vertical-navigation.d.ts.map +1 -0
  28. package/dist/src/templates/numeric-input.d.ts +1 -1
  29. package/dist/src/types/zag.d.ts +1 -0
  30. package/dist/src/types/zag.d.ts.map +1 -1
  31. package/dist/stories/changelog/changelog.stories.d.ts.map +1 -1
  32. package/dist/stories/molecules/form-error-summary.stories.d.ts +11 -0
  33. package/dist/stories/molecules/form-error-summary.stories.d.ts.map +1 -0
  34. package/dist/stories/molecules/vertical-navigation.stories.d.ts +75 -0
  35. package/dist/stories/molecules/vertical-navigation.stories.d.ts.map +1 -0
  36. package/dist/test/form-error-summary.ids.test.d.ts +2 -0
  37. package/dist/test/form-error-summary.ids.test.d.ts.map +1 -0
  38. package/dist/test/vertical-navigation.behavior.spec.d.ts +2 -0
  39. package/dist/test/vertical-navigation.behavior.spec.d.ts.map +1 -0
  40. package/dist/test/vertical-navigation.playwright.config.d.ts +4 -0
  41. package/dist/test/vertical-navigation.playwright.config.d.ts.map +1 -0
  42. package/package.json +2 -1
  43. package/src/tokens/components/components.css +2 -0
  44. package/src/tokens/components/molecules/_form-error-summary.css +20 -0
  45. package/src/tokens/components/molecules/_vertical-navigation.css +155 -0
package/src/tokens/components/molecules/_vertical-navigation.css ADDED
@@ -0,0 +1,155 @@
1
+ @theme static {
2
+ /* BASE COLOR MAPPING */
3
+ --color-vertical-navigation-surface: var(--color-fill-surface);
4
+ --color-vertical-navigation-foreground: var(--color-fg-primary);
5
+ --color-vertical-navigation-accent: var(--color-bg-primary-base);
6
+ --color-vertical-navigation-secondary: var(--color-bg-secondary-base);
7
+ --color-vertical-navigation-accent-light: color-mix(
8
+ in oklab,
9
+ var(--color-vertical-navigation-accent) 15%,
10
+ var(--color-vertical-navigation-surface)
11
+ );
12
+
13
+ /* DERIVED COLORS */
14
+ --color-vertical-navigation-fg: var(--color-vertical-navigation-foreground);
15
+ --color-vertical-navigation-item-bg: transparent;
16
+ --color-vertical-navigation-label-fg: var(
17
+ --color-vertical-navigation-foreground
18
+ );
19
+ --color-vertical-navigation-guide-border: var(--color-border-primary);
20
+ --color-vertical-navigation-separator-bg: var(--color-border-primary);
21
+
22
+ /* STATE VARIATIONS */
23
+ --color-vertical-navigation-item-bg-hover: var(--color-fill-hover);
24
+ --color-vertical-navigation-indicator-fg-hover: color-mix(
25
+ in oklab,
26
+ var(--color-fg-accent-primary) 60%,
27
+ var(--color-vertical-navigation-foreground)
28
+ );
29
+ --color-vertical-navigation-item-bg-current: color-mix(
30
+ in oklab,
31
+ var(--color-vertical-navigation-accent) 30%,
32
+ var(--color-vertical-navigation-surface)
33
+ );
34
+ --color-vertical-navigation-item-fg-current: var(
35
+ --color-vertical-navigation-foreground
36
+ );
37
+
38
+ /* COMPONENT VARIANTS */
39
+ --color-vertical-navigation-group-bg-plain: transparent;
40
+ --color-vertical-navigation-group-fg-plain: var(
41
+ --color-vertical-navigation-foreground
42
+ );
43
+ --color-vertical-navigation-group-bg-subtle: var(
44
+ --color-vertical-navigation-surface
45
+ );
46
+ --color-vertical-navigation-group-fg-subtle: var(
47
+ --color-vertical-navigation-foreground
48
+ );
49
+ --color-vertical-navigation-group-bg-accent: var(
50
+ --color-vertical-navigation-accent-light
51
+ );
52
+ --color-vertical-navigation-group-fg-accent: var(
53
+ --color-vertical-navigation-foreground
54
+ );
55
+
56
+ --color-vertical-navigation-group-bg-secondary: color-mix(
57
+ in oklab,
58
+ var(--color-vertical-navigation-secondary) 15%,
59
+ var(--color-vertical-navigation-surface)
60
+ );
61
+ --color-vertical-navigation-group-fg-secondary: var(
62
+ --color-vertical-navigation-foreground
63
+ );
64
+
65
+ /* DISABLED STATES */
66
+ --color-vertical-navigation-item-fg-disabled: var(--color-fg-disabled);
67
+
68
+ /* SPACING */
69
+ --spacing-vertical-navigation-list: var(--dimension-2);
70
+ --spacing-vertical-navigation-row: var(--spacing-50);
71
+ --spacing-vertical-navigation-group: var(--spacing-100);
72
+ --spacing-vertical-navigation-indent: var(--dimension-12);
73
+ --spacing-vertical-navigation-label: var(--dimension-8);
74
+ --spacing-vertical-navigation-item-sm: var(--height-form-control-sm);
75
+ --spacing-vertical-navigation-item-md: var(--dimension-36);
76
+ --spacing-vertical-navigation-separator: var(--border-width-sm);
77
+ --padding-vertical-navigation-item-x-sm: var(--padding-popup-item-x-sm);
78
+ --padding-vertical-navigation-item-x-md: var(--padding-popup-item-x-md);
79
+ --padding-vertical-navigation-item-y-sm: var(--padding-popup-item-y-sm);
80
+ --padding-vertical-navigation-item-y-md: var(--padding-popup-item-y-md);
81
+ --padding-vertical-navigation-group: var(--dimension-0);
82
+
83
+ /* TYPOGRAPHY */
84
+ --text-vertical-navigation-sm: var(--text-sm);
85
+ --text-vertical-navigation-md: var(--text-base);
86
+ --text-vertical-navigation-label-sm: var(--text-xs);
87
+ --text-vertical-navigation-icon-sm: var(--text-icon-control-sm);
88
+ --text-vertical-navigation-icon-md: var(--text-icon-control-md);
89
+ --font-weight-vertical-navigation-current: var(--font-weight-semibold);
90
+ --font-weight-vertical-navigation-label: var(--font-weight-semibold);
91
+ --font-weight-vertical-navigation-path: var(--font-weight-medium);
92
+
93
+ /* BORDERS & RADIUS */
94
+ --border-width-vertical-navigation: var(--border-width-sm);
95
+ --radius-vertical-navigation-item: var(--radius-sm);
96
+ --radius-vertical-navigation-group: var(--radius-none);
97
+
98
+ /* FOCUS RINGS */
99
+ --color-vertical-navigation-focus-border: var(--color-ring);
100
+ }
101
+
102
+ @utility vertical-navigation-focus {
103
+ outline-style: var(--default-ring-style);
104
+ outline-width: var(--default-ring-width);
105
+ outline-color: var(--color-vertical-navigation-focus-border);
106
+ outline-offset: var(--default-ring-offset);
107
+ }
108
+
109
+ @utility vertical-navigation-guide {
110
+ border-inline-start: var(--border-width-vertical-navigation) solid
111
+ var(--color-vertical-navigation-guide-border);
112
+ }
113
+
114
+ @utility vertical-navigation-row {
115
+ & > [data-part="link"],
116
+ & > [data-part="branch-trigger"] {
117
+ &,
118
+ &:hover,
119
+ &[data-current] {
120
+ background-color: transparent;
121
+ }
122
+ }
123
+
124
+ & > [data-part="branch-trigger"] {
125
+ width: auto;
126
+ flex-shrink: 0;
127
+ }
128
+
129
+ @media (hover: hover) {
130
+ &:hover:not(:has(> [data-part="link"][data-current])):has(
131
+ > [data-part="link"]:not([data-disabled]),
132
+ > [data-part="branch-trigger"]:not(:disabled)
133
+ ) {
134
+ background-color: var(--color-vertical-navigation-item-bg-hover);
135
+ }
136
+
137
+ &
138
+ > [data-part="branch-trigger"]:not(:disabled):hover
139
+ > [data-part="branch-indicator"] {
140
+ color: var(--color-vertical-navigation-indicator-fg-hover);
141
+ }
142
+ }
143
+
144
+ &:has(> [data-part="link"][data-current]) {
145
+ background-color: var(--color-vertical-navigation-item-bg-current);
146
+ }
147
+ }
148
+
149
+ @utility vertical-navigation-control {
150
+ overflow-wrap: anywhere;
151
+ }
152
+
153
+ @utility token-icon-vertical-navigation-chevron {
154
+ @apply token-icon-chevron-down;
155
+ }