@pathscale/ui 2.11.8 → 2.11.9

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 (26) hide show
  1. package/dist/components/color-wheel/ColorWheel.generated.js +4 -1
  2. package/dist/components/color-wheel/ComplexColorWheel.css +1 -1
  3. package/dist/components/color-wheel/ComplexColorWheel.generated.js +180 -173
  4. package/dist/components/color-wheel-flower/ColorWheelFlower.css +84 -3
  5. package/dist/components/color-wheel-flower/ColorWheelFlower.generated.d.ts +2 -0
  6. package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js +18 -247
  7. package/dist/components/dropdown/Dropdown.generated.js +5 -3
  8. package/dist/components/inline-edit/InlineEdit.generated.js +19 -15
  9. package/dist/components/language-switcher/LanguageSwitcher.generated.d.ts +2 -0
  10. package/dist/components/panel-toggle/PanelToggle.css +72 -0
  11. package/dist/components/panel-toggle/PanelToggle.generated.d.ts +18 -0
  12. package/dist/components/panel-toggle/PanelToggle.generated.js +41 -0
  13. package/dist/components/panel-toggle/PanelToggle.recipe.d.ts +21 -0
  14. package/dist/components/panel-toggle/PanelToggle.recipe.js +45 -0
  15. package/dist/components/panel-toggle/index.d.ts +2 -0
  16. package/dist/components/panel-toggle/index.js +2 -0
  17. package/dist/components/select/Select.generated.js +116 -88
  18. package/dist/components/slider/Slider.generated.js +11 -4
  19. package/dist/components/tabs/Tabs.css +5 -0
  20. package/dist/components/tabs/Tabs.generated.js +4 -3
  21. package/dist/index.d.ts +1 -0
  22. package/dist/index.js +1 -0
  23. package/dist/layouts.manifest.json +4 -1
  24. package/dist/motion/engine.js +11 -5
  25. package/dist/purge-manifest.json +106 -8
  26. package/package.json +5 -4
package/dist/components/color-wheel/ColorWheel.generated.js CHANGED
@@ -1,4 +1,4 @@
1
- import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
1
+ import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
2
2
  import { defineComponent } from "solid-layouts/solid-2/application-boundary";
3
3
  import "./ColorWheel.css";
4
4
  import { createMemo, omit } from "solid-js";
@@ -32,6 +32,9 @@ const __solidLayoutColorWheelLayout = (_stable, p)=>{
32
32
  },
33
33
  get children () {
34
34
  return createComponent(ColorWheelFlower, {
35
+ get id () {
36
+ return memo(()=>!!p.id)() ? `${p.id}-flower` : void 0;
37
+ },
35
38
  get ["class"] () {
36
39
  return p.wheelClass;
37
40
  },
package/dist/components/color-wheel/ComplexColorWheel.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .complex-color-wheel {
2
2
  display: flex;
3
- align-items: flex-start;
3
+ align-items: center;
4
4
  gap: 1rem;
5
5
  padding: 0.875rem;
6
6
  /*
package/dist/components/color-wheel/ComplexColorWheel.generated.js CHANGED
@@ -8,192 +8,199 @@ import card from "../card/index.js";
8
8
  import slider from "../slider/index.js";
9
9
  import { ColorWheelLayout } from "./ColorWheel.generated.js";
10
10
  import { complexColorWheel } from "./ComplexColorWheel.recipe.js";
11
- var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<div><div><span></span><span></span></div><div>");
12
- const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card, mergeProps(()=>_stable.slot.root, {
11
+ var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<div><div><span></span><span></span></div><div>");
12
+ const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card, {
13
13
  get material () {
14
14
  return p.material ?? "glass";
15
15
  },
16
+ padding: "none",
16
17
  get children () {
17
- return [
18
- createComponent(ColorWheelLayout, {
19
- get value () {
20
- return p.value;
21
- },
22
- get onChange () {
23
- return p.onChange;
24
- },
25
- get mode () {
26
- return p.mode;
27
- },
28
- get palette () {
29
- return p.palette;
30
- },
31
- get isDisabled () {
32
- return p.isDisabled;
33
- },
34
- get ["class"] () {
35
- return p.class;
36
- },
37
- get wheelClass () {
38
- return p.wheelClass;
39
- },
40
- get ["aria-label"] () {
41
- return p["aria-label"];
42
- }
43
- }),
44
- (()=>{
45
- var _el$ = _tmpl$2(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling;
46
- spread(_el$, mergeProps(()=>_stable.slot.adjustments, {
47
- get ["class"] () {
48
- return twMerge(_stable.slot.adjustments.class, p.adjustmentsClass);
49
- }
50
- }), true);
51
- insert(_el$, createComponent(Show, {
52
- get when () {
53
- return p.action;
54
- },
55
- get children () {
56
- var _el$2 = _tmpl$();
57
- spread(_el$2, mergeProps(()=>_stable.slot.action), true);
58
- insert(_el$2, ()=>p.action);
59
- return _el$2;
60
- }
61
- }), _el$3);
62
- insert(_el$, createComponent(For, {
63
- get each () {
64
- return p.adjustments;
65
- },
66
- keyed: false,
67
- children: (adjustment)=>(()=>{
68
- var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling;
69
- spread(_el$5, mergeProps(()=>_stable.slot.axis, {
70
- get ["data-axis"] () {
71
- return adjustment().id;
72
- }
73
- }), true);
74
- spread(_el$6, mergeProps(()=>_stable.slot.axisHeading), true);
75
- insert(_el$7, ()=>adjustment().label);
76
- insert(_el$8, ()=>adjustment().formatValue?.(adjustment().value) ?? adjustment().value);
77
- spread(_el$9, mergeProps(()=>_stable.slot.axisControl), true);
78
- insert(_el$9, createComponent(Show, {
79
- get when () {
80
- return memo(()=>!!adjustment().stops?.length)() ? adjustment().stops : void 0;
81
- },
82
- get fallback () {
83
- return [
84
- createComponent(Show, {
85
- get when () {
86
- return adjustment().preview;
87
- },
88
- get children () {
89
- var _el$1 = _tmpl$3();
90
- spread(_el$1, mergeProps(()=>_stable.slot.preview, {
91
- "aria-hidden": "true",
92
- get style () {
93
- return {
94
- "background-color": adjustment().preview?.(adjustment().value, p.value)
95
- };
96
- }
97
- }), false);
98
- return _el$1;
18
+ var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.nextSibling;
19
+ spread(_el$, mergeProps(()=>_stable.slot.root), true);
20
+ insert(_el$, createComponent(ColorWheelLayout, {
21
+ get id () {
22
+ return p.id;
23
+ },
24
+ get value () {
25
+ return p.value;
26
+ },
27
+ get onChange () {
28
+ return p.onChange;
29
+ },
30
+ get mode () {
31
+ return p.mode;
32
+ },
33
+ get palette () {
34
+ return p.palette;
35
+ },
36
+ get isDisabled () {
37
+ return p.isDisabled;
38
+ },
39
+ get ["class"] () {
40
+ return p.class;
41
+ },
42
+ get wheelClass () {
43
+ return p.wheelClass;
44
+ },
45
+ get ["aria-label"] () {
46
+ return p["aria-label"];
47
+ }
48
+ }), _el$2);
49
+ spread(_el$2, mergeProps(()=>_stable.slot.adjustments, {
50
+ get ["class"] () {
51
+ return twMerge(_stable.slot.adjustments.class, p.adjustmentsClass);
52
+ }
53
+ }), true);
54
+ insert(_el$2, createComponent(Show, {
55
+ get when () {
56
+ return p.action;
57
+ },
58
+ get children () {
59
+ var _el$3 = _tmpl$();
60
+ spread(_el$3, mergeProps(()=>_stable.slot.action), true);
61
+ insert(_el$3, ()=>p.action);
62
+ return _el$3;
63
+ }
64
+ }), _el$4);
65
+ insert(_el$2, createComponent(For, {
66
+ get each () {
67
+ return p.adjustments;
68
+ },
69
+ keyed: false,
70
+ children: (adjustment)=>(()=>{
71
+ var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$7.nextSibling;
72
+ spread(_el$6, mergeProps(()=>_stable.slot.axis, {
73
+ get ["data-axis"] () {
74
+ return adjustment().id;
75
+ }
76
+ }), true);
77
+ spread(_el$7, mergeProps(()=>_stable.slot.axisHeading), true);
78
+ insert(_el$8, ()=>adjustment().label);
79
+ insert(_el$9, ()=>adjustment().formatValue?.(adjustment().value) ?? adjustment().value);
80
+ spread(_el$0, mergeProps(()=>_stable.slot.axisControl), true);
81
+ insert(_el$0, createComponent(Show, {
82
+ get when () {
83
+ return memo(()=>!!adjustment().stops?.length)() ? adjustment().stops : void 0;
84
+ },
85
+ get fallback () {
86
+ return [
87
+ createComponent(Show, {
88
+ get when () {
89
+ return adjustment().preview;
90
+ },
91
+ get children () {
92
+ var _el$10 = _tmpl$3();
93
+ spread(_el$10, mergeProps(()=>_stable.slot.preview, {
94
+ "aria-hidden": "true",
95
+ get style () {
96
+ return {
97
+ "background-color": adjustment().preview?.(adjustment().value, p.value)
98
+ };
99
99
  }
100
- }),
101
- createComponent(slider, {
102
- get label () {
103
- return adjustment().label;
104
- },
105
- get value () {
106
- return adjustment().value;
107
- },
108
- get min () {
109
- return adjustment().min ?? 0;
100
+ }), false);
101
+ return _el$10;
102
+ }
103
+ }),
104
+ createComponent(slider, {
105
+ get id () {
106
+ return memo(()=>!!p.id)() ? `${p.id}-${adjustment().id}` : void 0;
107
+ },
108
+ get label () {
109
+ return adjustment().label;
110
+ },
111
+ get value () {
112
+ return adjustment().value;
113
+ },
114
+ get min () {
115
+ return adjustment().min ?? 0;
116
+ },
117
+ get max () {
118
+ return adjustment().max ?? 100;
119
+ },
120
+ get step () {
121
+ return adjustment().step;
122
+ },
123
+ get disabled () {
124
+ return p.isDisabled;
125
+ },
126
+ get onChange () {
127
+ return adjustment().onChange;
128
+ },
129
+ get onChangeEnd () {
130
+ return adjustment().onChangeEnd;
131
+ },
132
+ get formatValue () {
133
+ return adjustment().formatValue;
134
+ },
135
+ size: "sm"
136
+ })
137
+ ];
138
+ },
139
+ children: (stops)=>(()=>{
140
+ var _el$11 = _tmpl$();
141
+ spread(_el$11, mergeProps(()=>_stable.slot.stops), true);
142
+ insert(_el$11, createComponent(For, {
143
+ get each () {
144
+ return stops();
145
+ },
146
+ children: (stop, stopIndex)=>createComponent(button_0, mergeProps(()=>_stable.slot.stop, {
147
+ get id () {
148
+ return memo(()=>!!p.id)() ? `${p.id}-${adjustment().id}-${stopIndex()}` : void 0;
110
149
  },
111
- get max () {
112
- return adjustment().max ?? 100;
150
+ type: "button",
151
+ size: "sm",
152
+ variant: "ghost",
153
+ get ["aria-label"] () {
154
+ return `${adjustment().label} ${adjustment().formatValue?.(stop) ?? stop}`;
113
155
  },
114
- get step () {
115
- return adjustment().step;
156
+ get ["aria-pressed"] () {
157
+ return Math.abs(adjustment().value - stop) < 0.001 ? "true" : "false";
116
158
  },
117
159
  get disabled () {
118
160
  return p.isDisabled;
119
161
  },
120
- get onChange () {
121
- return adjustment().onChange;
122
- },
123
- get onChangeEnd () {
124
- return adjustment().onChangeEnd;
125
- },
126
- get formatValue () {
127
- return adjustment().formatValue;
128
- },
129
- size: "sm"
130
- })
131
- ];
132
- },
133
- children: (stops)=>(()=>{
134
- var _el$10 = _tmpl$();
135
- spread(_el$10, mergeProps(()=>_stable.slot.stops), true);
136
- insert(_el$10, createComponent(For, {
137
- get each () {
138
- return stops();
139
- },
140
- children: (stop)=>createComponent(button_0, mergeProps(()=>_stable.slot.stop, {
141
- type: "button",
142
- size: "sm",
143
- variant: "ghost",
144
- get ["aria-label"] () {
145
- return `${adjustment().label} ${adjustment().formatValue?.(stop) ?? stop}`;
146
- },
147
- get ["aria-pressed"] () {
148
- return Math.abs(adjustment().value - stop) < 0.001 ? "true" : "false";
149
- },
150
- get disabled () {
151
- return p.isDisabled;
152
- },
153
- onClick: ()=>adjustment().onChange(stop),
154
- get children () {
155
- var _el$11 = _tmpl$3();
156
- spread(_el$11, mergeProps(()=>_stable.slot.stopPreview, {
157
- "aria-hidden": "true",
158
- get style () {
159
- return {
160
- "background-color": adjustment().preview?.(stop, p.value),
161
- color: adjustment().ink?.(stop, p.value)
162
- };
163
- }
164
- }), true);
165
- insert(_el$11, createComponent(Show, {
166
- get when () {
167
- return adjustment().ink;
168
- },
169
- children: "A"
170
- }));
171
- return _el$11;
162
+ onClick: ()=>adjustment().onChange(stop),
163
+ get children () {
164
+ var _el$12 = _tmpl$3();
165
+ spread(_el$12, mergeProps(()=>_stable.slot.stopPreview, {
166
+ "aria-hidden": "true",
167
+ get style () {
168
+ return {
169
+ "background-color": adjustment().preview?.(stop, p.value),
170
+ color: adjustment().ink?.(stop, p.value)
171
+ };
172
172
  }
173
- }))
174
- }));
175
- return _el$10;
176
- })()
177
- }));
178
- insert(_el$5, createComponent(Show, {
179
- get when () {
180
- return adjustment().hint;
181
- },
182
- get children () {
183
- var _el$0 = _tmpl$3();
184
- spread(_el$0, mergeProps(()=>_stable.slot.hint), true);
185
- insert(_el$0, ()=>adjustment().hint);
186
- return _el$0;
187
- }
188
- }), null);
189
- return _el$5;
190
- })()
191
- }), _el$4);
192
- return _el$;
193
- })()
194
- ];
173
+ }), true);
174
+ insert(_el$12, createComponent(Show, {
175
+ get when () {
176
+ return adjustment().ink;
177
+ },
178
+ children: "A"
179
+ }));
180
+ return _el$12;
181
+ }
182
+ }))
183
+ }));
184
+ return _el$11;
185
+ })()
186
+ }));
187
+ insert(_el$6, createComponent(Show, {
188
+ get when () {
189
+ return adjustment().hint;
190
+ },
191
+ get children () {
192
+ var _el$1 = _tmpl$3();
193
+ spread(_el$1, mergeProps(()=>_stable.slot.hint), true);
194
+ insert(_el$1, ()=>adjustment().hint);
195
+ return _el$1;
196
+ }
197
+ }), null);
198
+ return _el$6;
199
+ })()
200
+ }), _el$5);
201
+ return _el$;
195
202
  }
196
- }));
203
+ });
197
204
  const ComplexColorWheelLayout = defineComponent({
198
205
  recipe: complexColorWheel,
199
206
  layout: __solidLayoutComplexColorWheelLayout,
package/dist/components/color-wheel-flower/ColorWheelFlower.css CHANGED
@@ -49,20 +49,55 @@
49
49
 
50
50
  .color-wheel-flower__dot {
51
51
  position: absolute;
52
- transform: translate(-50%, -50%);
52
+ z-index: 1;
53
+ }
54
+
55
+ .color-wheel-flower__dot--pulsing {
56
+ z-index: 20;
57
+ }
58
+
59
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
60
+ .color-wheel-flower__dot:hover,
61
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
62
+ .color-wheel-flower__dot:focus-within {
63
+ z-index: 30;
53
64
  }
54
65
 
55
66
  .color-wheel-flower__dot-frame {
56
67
  position: relative;
57
68
  width: 32px;
58
69
  height: 32px;
70
+ margin-top: -16px;
71
+ margin-left: -16px;
59
72
  }
60
73
 
61
74
  .color-wheel-flower__dot-motion {
62
75
  position: relative;
63
76
  width: 100%;
64
77
  height: 100%;
65
- will-change: transform, opacity;
78
+ opacity: 1;
79
+ transform: translate(0, 0) scale(1);
80
+ transform-origin: center;
81
+ transition: transform 100ms ease-out;
82
+ }
83
+
84
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
85
+ .color-wheel-flower__dot:hover
86
+ .color-wheel-flower__dot-motion,
87
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
88
+ .color-wheel-flower__dot:focus-within
89
+ .color-wheel-flower__dot-motion {
90
+ transform: translate(0, 0) scale(1.1);
91
+ }
92
+
93
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
94
+ .color-wheel-flower__dot:active
95
+ .color-wheel-flower__dot-motion {
96
+ transform: translate(0, 0) scale(1.04);
97
+ }
98
+
99
+ .color-wheel-flower__dot--pulsing .color-wheel-flower__dot-motion {
100
+ animation: color-wheel-flower-pulse 220ms ease-out;
66
101
  }
67
102
 
68
103
  .color-wheel-flower__halo {
@@ -73,11 +108,26 @@
73
108
  bottom: -5px;
74
109
  border-radius: var(--radius-pill, 9999px);
75
110
  pointer-events: none;
111
+ opacity: 0;
76
112
  background: radial-gradient(
77
113
  circle,
78
114
  rgb(255 255 255 / 25%) 0%,
79
115
  rgb(255 255 255 / 0%) 70%
80
116
  );
117
+ transition: opacity 100ms ease-out;
118
+ }
119
+
120
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
121
+ .color-wheel-flower__dot:hover
122
+ .color-wheel-flower__halo,
123
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
124
+ .color-wheel-flower__dot:focus-within
125
+ .color-wheel-flower__halo {
126
+ opacity: 0.6;
127
+ }
128
+
129
+ .color-wheel-flower__dot--pulsing .color-wheel-flower__halo {
130
+ opacity: 0.35;
81
131
  }
82
132
 
83
133
  .color-wheel-flower__swatch {
@@ -85,6 +135,8 @@
85
135
  z-index: 10;
86
136
  width: 100% !important;
87
137
  height: 100% !important;
138
+ border: 1px solid
139
+ color-mix(in srgb, var(--color-base-content) 72%, transparent) !important;
88
140
  border-radius: var(--radius-pill, 9999px) !important;
89
141
  background: var(--color-swatch-current) !important;
90
142
  transform: none !important;
@@ -120,6 +172,7 @@
120
172
 
121
173
  .color-wheel-flower__highlight {
122
174
  position: absolute;
175
+ z-index: 11;
123
176
  inset: 0;
124
177
  border-radius: var(--radius-pill, 9999px);
125
178
  border: 2px solid rgb(255 255 255 / 100%);
@@ -131,13 +184,41 @@
131
184
  box-shadow 300ms ease-out;
132
185
  }
133
186
 
134
- .color-wheel-flower__highlight--hovered {
187
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
188
+ .color-wheel-flower__dot:hover
189
+ .color-wheel-flower__highlight,
190
+ .color-wheel-flower:not(.color-wheel-flower--disabled)
191
+ .color-wheel-flower__dot:focus-within
192
+ .color-wheel-flower__highlight {
135
193
  opacity: 0.75;
136
194
  box-shadow: 0 0 6px rgb(255 255 255 / 45%);
195
+ transition: none;
137
196
  }
138
197
 
139
198
  .color-wheel-flower__highlight--pulsing {
140
199
  opacity: 0.45;
141
200
  box-shadow: 0 0 4px rgb(255 255 255 / 35%);
142
201
  }
202
+
203
+ @keyframes color-wheel-flower-pulse {
204
+ 0%,
205
+ 100% {
206
+ transform: translate(0, 0) scale(1);
207
+ }
208
+ 55% {
209
+ transform: translate(0, 0) scale(1.12);
210
+ }
211
+ }
212
+
213
+ @media (prefers-reduced-motion: reduce) {
214
+ .color-wheel-flower__dot-motion,
215
+ .color-wheel-flower__halo,
216
+ .color-wheel-flower__highlight {
217
+ transition: none;
218
+ }
219
+
220
+ .color-wheel-flower__dot--pulsing .color-wheel-flower__dot-motion {
221
+ animation: none;
222
+ }
223
+ }
143
224
  }
package/dist/components/color-wheel-flower/ColorWheelFlower.generated.d.ts CHANGED
@@ -2,6 +2,8 @@ import type { Component as __LayoutComponent } from "solid-js";
2
2
  import "./ColorWheelFlower.css";
3
3
  import { type ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
4
4
  export interface ColorWheelFlowerProps {
5
+ /** Stable base for the flower and each interactive petal. */
6
+ id?: string;
5
7
  class?: string;
6
8
  /** Explicit mode. Omit to follow the root `data-theme` attribute. */
7
9
  mode?: ColorWheelFlowerMode;