@cfasim-ui/components 0.6.0 → 0.6.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.
@@ -1,4 +1,4 @@
1
- import { i as e, n as t, r as n, t as r } from "./SelectBox-Bqsx-5ZB.js";
1
+ import { i as e, n as t, r as n, t as r } from "./SelectBox-Bg7Qhmy7.js";
2
2
  import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, h as f, inject as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, onUnmounted as _, openBlock as v, ref as y, shallowRef as b, toDisplayString as x, toRaw as S, unref as ee, useTemplateRef as te, watch as ne, withCtx as re } from "vue";
3
3
  //#region ../../node_modules/.pnpm/@marijn+find-cluster-break@1.0.2/node_modules/@marijn/find-cluster-break/src/index.js
4
4
  var C = [], ie = [];
@@ -8,6 +8,8 @@ type __VLS_Props = {
8
8
  ariaLabel?: string;
9
9
  options: SelectOption[];
10
10
  placeholder?: string;
11
+ /** Turn the field into a filterable single-select autocomplete (combobox). */
12
+ autocomplete?: boolean;
11
13
  };
12
14
  type __VLS_PublicProps = {
13
15
  modelValue?: string;
@@ -0,0 +1,219 @@
1
+ import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
2
+ import { ComboboxAnchor as v, ComboboxContent as y, ComboboxEmpty as b, ComboboxInput as x, ComboboxItem as S, ComboboxItemIndicator as C, ComboboxPortal as w, ComboboxRoot as T, ComboboxTrigger as E, ComboboxViewport as D, Primitive as O, SelectContent as k, SelectItem as A, SelectItemIndicator as j, SelectItemText as M, SelectPortal as N, SelectRoot as P, SelectTrigger as F, SelectValue as I, SelectViewport as L, useId as R } from "reka-ui";
3
+ //#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
4
+ var z = ["role"], B = /* @__PURE__ */ s({
5
+ __name: "Box",
6
+ props: {
7
+ variant: {},
8
+ bgColor: {},
9
+ textColor: {},
10
+ role: {}
11
+ },
12
+ setup(e) {
13
+ return (t, n) => (d(), r("div", {
14
+ class: l(["box", e.variant ? `box-${e.variant}` : void 0]),
15
+ style: u({
16
+ backgroundColor: e.bgColor,
17
+ color: e.textColor
18
+ }),
19
+ role: e.role
20
+ }, [p(t.$slots, "default", {}, void 0, !0)], 14, z));
21
+ }
22
+ }), V = (e, t) => {
23
+ let n = e.__vccOpts || e;
24
+ for (let [e, r] of t) n[e] = r;
25
+ return n;
26
+ }, H = /* @__PURE__ */ V(B, [["__scopeId", "data-v-d7342c02"]]), U = /* @__PURE__ */ V(/* @__PURE__ */ s({
27
+ __name: "Button",
28
+ props: {
29
+ label: {},
30
+ variant: { default: "primary" },
31
+ asChild: { type: Boolean },
32
+ as: { default: "button" }
33
+ },
34
+ emits: ["click"],
35
+ setup(e) {
36
+ return (n, r) => (d(), t(h(O), {
37
+ class: "button",
38
+ "data-variant": e.variant,
39
+ as: e.as,
40
+ "as-child": e.asChild,
41
+ onClick: r[0] ||= (e) => n.$emit("click", e)
42
+ }, {
43
+ default: _(() => [p(n.$slots, "default", {}, () => [a(m(e.label), 1)], !0)]),
44
+ _: 3
45
+ }, 8, [
46
+ "data-variant",
47
+ "as",
48
+ "as-child"
49
+ ]));
50
+ }
51
+ }), [["__scopeId", "data-v-250eab18"]]), W = { class: "select-box" }, G = ["id", "for"], K = /* @__PURE__ */ V(/* @__PURE__ */ s({
52
+ __name: "SelectBox",
53
+ props: /* @__PURE__ */ c({
54
+ label: {},
55
+ hideLabel: { type: Boolean },
56
+ ariaLabel: {},
57
+ options: {},
58
+ placeholder: {},
59
+ autocomplete: { type: Boolean }
60
+ }, {
61
+ modelValue: {},
62
+ modelModifiers: {}
63
+ }),
64
+ emits: ["update:modelValue"],
65
+ setup(s) {
66
+ let c = g(s, "modelValue"), u = s, p = R();
67
+ function O(e) {
68
+ return u.options.find((t) => t.value === e)?.label ?? "";
69
+ }
70
+ return (g, R) => (d(), r("div", W, [s.label ? (d(), r("label", {
71
+ key: 0,
72
+ id: `${h(p)}-label`,
73
+ for: s.autocomplete ? `${h(p)}-input` : void 0,
74
+ class: l(["select-label", { "visually-hidden": s.hideLabel }])
75
+ }, m(s.label), 11, G)) : n("", !0), s.autocomplete ? (d(), t(h(T), {
76
+ key: 1,
77
+ modelValue: c.value,
78
+ "onUpdate:modelValue": R[0] ||= (e) => c.value = e,
79
+ "open-on-click": "",
80
+ class: "select-combobox-root"
81
+ }, {
82
+ default: _(() => [o(h(v), { class: "select-anchor" }, {
83
+ default: _(() => [o(h(x), {
84
+ id: `${h(p)}-input`,
85
+ class: "select-input",
86
+ "display-value": O,
87
+ placeholder: s.placeholder,
88
+ "aria-labelledby": u.label ? `${h(p)}-label` : void 0,
89
+ "aria-label": u.label ? void 0 : u.ariaLabel
90
+ }, null, 8, [
91
+ "id",
92
+ "placeholder",
93
+ "aria-labelledby",
94
+ "aria-label"
95
+ ]), o(h(E), {
96
+ class: "select-icon-button",
97
+ "aria-label": "Toggle options"
98
+ }, {
99
+ default: _(() => [...R[2] ||= [i("span", {
100
+ class: "select-icon",
101
+ "aria-hidden": "true"
102
+ }, [i("svg", {
103
+ width: "12",
104
+ height: "12",
105
+ viewBox: "0 0 12 12",
106
+ fill: "none",
107
+ stroke: "currentColor",
108
+ "stroke-width": "2",
109
+ "stroke-linecap": "round",
110
+ "stroke-linejoin": "round"
111
+ }, [i("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]]),
112
+ _: 1
113
+ })]),
114
+ _: 1
115
+ }), o(h(w), null, {
116
+ default: _(() => [o(h(y), {
117
+ class: "select-content select-content-autocomplete",
118
+ position: "popper",
119
+ "side-offset": 4,
120
+ "body-lock": !1
121
+ }, {
122
+ default: _(() => [o(h(D), { class: "select-viewport" }, {
123
+ default: _(() => [o(h(b), { class: "select-empty" }, {
124
+ default: _(() => [...R[3] ||= [a("No matches", -1)]]),
125
+ _: 1
126
+ }), (d(!0), r(e, null, f(s.options, (e) => (d(), t(h(S), {
127
+ key: e.value,
128
+ value: e.value,
129
+ class: "select-item"
130
+ }, {
131
+ default: _(() => [i("span", null, m(e.label), 1), o(h(C), { class: "select-indicator" }, {
132
+ default: _(() => [...R[4] ||= [i("svg", {
133
+ width: "12",
134
+ height: "12",
135
+ viewBox: "0 0 12 12",
136
+ fill: "none",
137
+ stroke: "currentColor",
138
+ "stroke-width": "2",
139
+ "stroke-linecap": "round",
140
+ "stroke-linejoin": "round"
141
+ }, [i("path", { d: "M2 6L5 9L10 3" })], -1)]]),
142
+ _: 1
143
+ })]),
144
+ _: 2
145
+ }, 1032, ["value"]))), 128))]),
146
+ _: 1
147
+ })]),
148
+ _: 1
149
+ })]),
150
+ _: 1
151
+ })]),
152
+ _: 1
153
+ }, 8, ["modelValue"])) : (d(), t(h(P), {
154
+ key: 2,
155
+ modelValue: c.value,
156
+ "onUpdate:modelValue": R[1] ||= (e) => c.value = e
157
+ }, {
158
+ default: _(() => [o(h(F), {
159
+ class: "select-trigger",
160
+ "aria-labelledby": u.label ? `${h(p)}-label` : void 0,
161
+ "aria-label": u.label ? void 0 : u.ariaLabel
162
+ }, {
163
+ default: _(() => [o(h(I), { placeholder: s.placeholder }, null, 8, ["placeholder"]), R[5] ||= i("span", {
164
+ class: "select-icon",
165
+ "aria-hidden": "true"
166
+ }, [i("svg", {
167
+ width: "12",
168
+ height: "12",
169
+ viewBox: "0 0 12 12",
170
+ fill: "none",
171
+ stroke: "currentColor",
172
+ "stroke-width": "2",
173
+ "stroke-linecap": "round",
174
+ "stroke-linejoin": "round"
175
+ }, [i("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
176
+ _: 1
177
+ }, 8, ["aria-labelledby", "aria-label"]), o(h(N), null, {
178
+ default: _(() => [o(h(k), {
179
+ class: "select-content",
180
+ position: "popper",
181
+ "side-offset": 4,
182
+ "body-lock": !1
183
+ }, {
184
+ default: _(() => [o(h(L), { class: "select-viewport" }, {
185
+ default: _(() => [(d(!0), r(e, null, f(s.options, (e) => (d(), t(h(A), {
186
+ key: e.value,
187
+ value: e.value,
188
+ class: "select-item"
189
+ }, {
190
+ default: _(() => [o(h(M), null, {
191
+ default: _(() => [a(m(e.label), 1)]),
192
+ _: 2
193
+ }, 1024), o(h(j), { class: "select-indicator" }, {
194
+ default: _(() => [...R[6] ||= [i("svg", {
195
+ width: "12",
196
+ height: "12",
197
+ viewBox: "0 0 12 12",
198
+ fill: "none",
199
+ stroke: "currentColor",
200
+ "stroke-width": "2",
201
+ "stroke-linecap": "round",
202
+ "stroke-linejoin": "round"
203
+ }, [i("path", { d: "M2 6L5 9L10 3" })], -1)]]),
204
+ _: 1
205
+ })]),
206
+ _: 2
207
+ }, 1032, ["value"]))), 128))]),
208
+ _: 1
209
+ })]),
210
+ _: 1
211
+ })]),
212
+ _: 1
213
+ })]),
214
+ _: 1
215
+ }, 8, ["modelValue"]))]));
216
+ }
217
+ }), [["__scopeId", "data-v-6210bde2"]]);
218
+ //#endregion
219
+ export { V as i, U as n, H as r, K as t };
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- .box[data-v-d7342c02]{font-size:var(--font-size-sm);border-radius:.375em;padding:.75em 1.25em}.box-info[data-v-d7342c02]{background-color:var(--color-box-info-bg);color:var(--color-box-info-text)}.box-success[data-v-d7342c02]{background-color:var(--color-box-success-bg);color:var(--color-box-success-text)}.box-warning[data-v-d7342c02]{background-color:var(--color-box-warning-bg);color:var(--color-box-warning-text)}.box-error[data-v-d7342c02]{background-color:var(--color-box-error-bg);color:var(--color-box-error-text)}.button[data-v-250eab18]{min-height:2.5em;font-size:var(--font-size-sm);background-color:var(--color-primary);color:var(--color-text-on-primary);border:none;border-radius:.375em;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;padding:0 1em;font-weight:500;display:inline-flex}.button[data-v-250eab18]:hover{cursor:pointer;background-color:var(--color-primary-hover)}.button[data-v-250eab18]:active{background-color:var(--color-primary-active)}.button[data-v-250eab18]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.button[data-v-250eab18]:disabled{opacity:.5;cursor:not-allowed}.button[data-variant=secondary][data-v-250eab18]{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000}.button[data-variant=secondary][data-v-250eab18]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.button[data-variant=secondary][data-v-250eab18]:active{background-color:color-mix(in srgb, var(--color-primary) 15%, transparent)}.select-box[data-v-63876437]{flex-direction:column;gap:.25em;display:flex}.select-label[data-v-63876437]{font-size:var(--font-size-sm)}.select-trigger[data-v-63876437]{font-size:var(--font-size-sm);border:1px solid var(--color-border);background:var(--color-bg-0);cursor:pointer;width:auto;height:2.5em;color:inherit;border-radius:.375em;justify-content:space-between;align-items:center;gap:.5em;padding:0 .75em;font-family:inherit;line-height:1.4;display:inline-flex}.select-trigger[data-v-63876437]:hover{border-color:var(--color-border-hover)}.select-trigger[data-v-63876437]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.select-trigger[data-placeholder][data-v-63876437]{color:var(--color-text-secondary)}.select-icon[data-v-63876437]{flex-shrink:0;align-items:center;display:flex}.select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);min-width:var(--reka-select-trigger-width);max-height:var(--reka-select-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.select-viewport{padding:.25em}.select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.select-item[data-highlighted]{background:var(--color-primary);color:#fff}.select-item[data-state=checked]{font-weight:600}.select-indicator{flex-shrink:0;align-items:center;display:flex}.button-group[data-v-f3bd45a3]{display:inline-flex}.button-group[data-orientation=vertical][data-v-f3bd45a3]{flex-direction:column}.button-group[data-v-f3bd45a3]>*{border-radius:0;align-self:stretch}.button-group[data-orientation=horizontal][data-v-f3bd45a3]>:not(:first-child){margin-left:-1px}.button-group[data-orientation=vertical][data-v-f3bd45a3]>:not(:first-child){margin-top:-1px}.button-group[data-v-f3bd45a3]>:hover,.button-group[data-v-f3bd45a3]>:focus-visible,.button-group[data-v-f3bd45a3]>:focus{z-index:1;position:relative}.button-group[data-orientation=horizontal][data-v-f3bd45a3] .button[data-variant=primary]+.button[data-variant=primary]{border-left:1px solid color-mix(in srgb, var(--color-text-on-primary) 35%, transparent)}.button-group[data-orientation=vertical][data-v-f3bd45a3] .button[data-variant=primary]+.button[data-variant=primary]{border-top:1px solid color-mix(in srgb, var(--color-text-on-primary) 35%, transparent)}.button-group[data-orientation=horizontal][data-v-f3bd45a3]>:first-child{border-top-left-radius:.375em;border-bottom-left-radius:.375em}.button-group[data-orientation=horizontal][data-v-f3bd45a3]>:last-child{border-top-right-radius:.375em;border-bottom-right-radius:.375em}.button-group[data-orientation=vertical][data-v-f3bd45a3]>:first-child{border-top-left-radius:.375em;border-top-right-radius:.375em}.button-group[data-orientation=vertical][data-v-f3bd45a3]>:last-child{border-bottom-right-radius:.375em;border-bottom-left-radius:.375em}.container[data-v-bff01edb]{flex-direction:column;min-width:0;display:flex}.container-horizontal[data-v-bff01edb]{flex-flow:wrap;align-items:center}.container-border[data-v-bff01edb]{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md)}.container-scrollable[data-v-bff01edb]{overflow:auto}.expander-trigger[data-v-39e4acd0]{cursor:pointer;width:100%;font:inherit;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:0 0;border:none;align-items:center;gap:.5em;padding:.5em 0;font-weight:600;display:flex}.expander-trigger[data-v-39e4acd0]:hover{color:var(--color-text)}.expander-caret[data-v-39e4acd0]{border-top:.3em solid #0000;border-bottom:.3em solid #0000;border-left:.35em solid;width:0;height:0;transition:transform .15s;display:inline-block}.expander-caret.open[data-v-39e4acd0]{transform:rotate(90deg)}.expander-content[data-v-39e4acd0]{flex-direction:column;gap:.75em;display:flex;overflow:hidden}.expander-content[data-state=open][data-v-39e4acd0]{animation:.2s ease-out slideDown-39e4acd0}.expander-content[data-state=closed][data-v-39e4acd0]{animation:.2s ease-out slideUp-39e4acd0}@keyframes slideDown-39e4acd0{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes slideUp-39e4acd0{0%{height:var(--reka-collapsible-content-height)}to{height:0}}.grid-wrapper[data-v-7ae87f0f]{width:100%;min-width:0;container-type:inline-size}.grid[data-v-7ae87f0f]{min-width:0;display:grid}.grid[data-v-7ae87f0f]>*{min-width:0}.Icon{width:24px;height:24px;color:inherit;flex:none;justify-content:center;align-items:center;display:inline-flex}.Icon svg{fill:currentColor;width:100%;height:100%;display:block}.Icon[data-size=sm]{width:20px;height:20px}.Icon[data-size=md]{width:24px;height:24px}.Icon[data-size=lg]{width:28px;height:28px}.Icon[data-size=xl]{width:32px;height:32px}.Icon[data-inline=true]{vertical-align:-.125em;width:1em;height:1em}.HintTrigger[data-v-9dbf1c25]{width:1.25em;height:1.25em;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.HintTrigger[data-v-9dbf1c25]:hover{color:var(--color-text)}.HintTrigger[data-v-9dbf1c25]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.HintContent{max-width:15rem;font-size:var(--font-size-xs);color:var(--color-bg-0);background-color:var(--color-text);box-shadow:var(--shadow-md);z-index:100;border-radius:.25em;padding:.5em .75em;line-height:1.4}.HintArrow{fill:var(--color-text)}.light-dark-toggle[data-v-4c423498]{border:1px solid var(--color-border);background:var(--color-bg-0);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:.25em;justify-content:center;align-items:center;display:flex}.light-dark-toggle[data-v-4c423498]:hover{color:var(--color-text);background:var(--color-bg-1)}.multi-select[data-v-14e1dc47]{flex-direction:column;gap:.25em;display:flex}.multi-select-label[data-v-14e1dc47]{font-size:var(--font-size-sm);justify-content:space-between;align-items:center;display:flex}.multi-select-anchor[data-v-14e1dc47]{min-height:2.5em;font-size:var(--font-size-sm);background:var(--color-bg-0);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;align-items:center;gap:.25em;padding:.25em .5em;display:flex}.multi-select-anchor[data-v-14e1dc47]:hover{border-color:var(--color-border-hover)}.multi-select-anchor[data-v-14e1dc47]:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}.multi-select-field[data-v-14e1dc47]{flex-wrap:wrap;flex:1;align-items:center;gap:.25em;min-width:0;display:flex}.multi-select-chips[data-v-14e1dc47]{margin:0;padding:0;list-style:none;display:contents}.multi-select-chip[data-v-14e1dc47]{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:.25em;align-items:center;gap:.25em;margin:0;padding:.125em .25em .125em .5em;line-height:1.4;display:inline-flex}.multi-select-chip-remove[data-v-14e1dc47]{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:.25em;align-items:center;padding:0;display:inline-flex}.multi-select-chip-remove[data-v-14e1dc47]:hover{color:var(--color-text)}.multi-select-chip-remove[data-v-14e1dc47]:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.multi-select-input[data-v-14e1dc47]{min-width:3em;height:1.75em;color:var(--color-text);font:inherit;background:0 0;border:none;flex:1;padding:0}.multi-select-input[data-v-14e1dc47]:focus{outline:none}.multi-select-input[data-v-14e1dc47]::placeholder{color:var(--color-text-tertiary)}.multi-select-trigger[data-v-14e1dc47]{color:inherit;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.multi-select-icon[data-v-14e1dc47]{align-items:center;display:flex}.multi-select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);width:var(--reka-combobox-trigger-width);max-height:var(--reka-combobox-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.multi-select-viewport{padding:.25em}.multi-select-empty{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;padding:.5em}.multi-select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.multi-select-item[data-highlighted]{background:var(--color-primary);color:#fff}.multi-select-item[data-state=checked]{font-weight:600}.multi-select-indicator{flex-shrink:0;align-items:center;display:flex}.input-label[data-v-b123853e]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-b123853e]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-b123853e]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-b123853e]{flex:1;min-width:0}input[data-v-b123853e]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-b123853e]:hover{border-color:var(--color-border-hover)}input[data-v-b123853e]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-b123853e]{border-color:var(--color-error)}input[aria-invalid=true][data-v-b123853e]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-b123853e]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-b123853e]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-b123853e]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-b123853e]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-b123853e]{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.slider-root[data-v-b123853e]{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:1.5em;display:flex;position:relative}.slider-track[data-v-b123853e]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-b123853e]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-b123853e]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-b123853e]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-b123853e]:active,.slider-thumb[data-v-b123853e]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-b123853e]{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;margin-top:-.5em;display:flex}.Spinner{vertical-align:middle;border:2px solid;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite cfa-spin;display:inline-block}.Spinner[data-size=sm]{width:14px;height:14px}.Spinner[data-size=md]{width:20px;height:20px}.Spinner[data-size=lg]{border-width:3px;width:28px;height:28px}@keyframes cfa-spin{to{transform:rotate(360deg)}}.SidebarLayout[data-v-6d59601d]{--bar-height:3rem;background-color:var(--color-bg-0);height:100dvh;color:var(--color-text);font-family:var(--font-family);display:flex;position:relative}.SidebarRail[data-v-6d59601d]{width:var(--sidebar-width);height:100%;transition:width var(--transition-normal);flex-shrink:0;position:relative;overflow:hidden}@media (width>=768px){.SidebarLayout[data-collapsed=true] .SidebarRail[data-v-6d59601d]{width:var(--toggle-size);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm)}}.Sidebar[data-v-6d59601d]{font-size:var(--font-size-sm);width:var(--sidebar-width);height:100%;transition:transform var(--transition-normal);display:flex;transform:translate(0)}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-6d59601d]{transform:translate(-100%)}.SidebarScroll[data-v-6d59601d]{min-width:0;padding:var(--space-4);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm);scrollbar-width:thin;scrollbar-color:transparent transparent;gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.SidebarScroll[data-v-6d59601d]:hover{scrollbar-color:var(--color-border) transparent}.SidebarScroll[data-v-6d59601d] h2{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-2);font-weight:600}.SidebarScroll[data-v-6d59601d]>h2:first-child{margin-top:0}.Toggle[data-v-6d59601d]{width:var(--toggle-size);height:var(--toggle-size);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Toggle[data-v-6d59601d]:hover{color:var(--color-text);background-color:var(--color-bg-2)}.Toggle[data-v-6d59601d]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.SidebarHeader[data-v-6d59601d]{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));justify-content:flex-end;display:flex}.Toggle--expand[data-v-6d59601d]{opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:0;left:50%;transform:translate(-50%)}.SidebarLayout[data-collapsed=true] .Toggle--expand[data-v-6d59601d]{opacity:1;pointer-events:auto}.Main[data-v-6d59601d]{background-color:var(--color-bg-0);min-width:0;font-size:var(--font-size-md);flex-direction:column;flex:1;display:flex;overflow:hidden;container-type:inline-size}.Topbar[data-v-6d59601d]{min-height:var(--bar-height);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TopbarEnd[data-v-6d59601d]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}@container (width>=768px){.Topbar[data-v-6d59601d]{padding:0 var(--space-4) 0 var(--space-20)}}.MainScroll[data-v-6d59601d]{min-height:0;padding:var(--space-6) 0;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;overflow:hidden auto}.MainScroll[data-v-6d59601d]:hover{scrollbar-color:var(--color-border) transparent}.MainContent[data-v-6d59601d]{max-width:1024px;padding:0 var(--space-4)}@container (width>=768px){.MainContent[data-v-6d59601d]{padding:0 var(--space-4) 0 var(--space-20)}}@media (width<=767px){.SidebarLayout[data-v-6d59601d]{transition:transform var(--transition-normal)}.SidebarLayout[data-collapsed=true][data-v-6d59601d]{transform:translateX(calc(-1 * var(--sidebar-width)))}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-6d59601d]{transform:translate(0)}.SidebarRail[data-v-6d59601d]{min-width:var(--sidebar-width)}.Main[data-v-6d59601d]{min-width:100vw}.Toggle--expand[data-v-6d59601d]{display:none}}.TabsLayout[data-v-6d59601d]{flex-direction:column;flex:1;min-height:0;display:flex}.TabsBar[data-v-6d59601d]{min-height:var(--bar-height);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TabsBarEnd[data-v-6d59601d]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}.TabsList[data-v-6d59601d]{gap:var(--space-1);align-self:stretch;display:flex;position:relative}.TabsTrigger[data-v-6d59601d]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0;background:0 0;border:none;font-family:inherit;font-weight:500;position:relative}.TabsTrigger[data-v-6d59601d]:hover{color:var(--color-text);background-color:var(--color-bg-1)}.TabsTrigger[data-state=active][data-v-6d59601d]{color:var(--color-text)}.TabsTrigger[data-v-6d59601d]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.TabsIndicator[data-v-6d59601d]{background-color:var(--color-text);height:2px;transition:width var(--transition-fast), left var(--transition-fast);position:absolute;bottom:0}.input-label[data-v-3f3d20cc]{font-size:var(--font-size-sm);flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-3f3d20cc]{justify-content:space-between;align-items:center;display:flex}input[data-v-3f3d20cc]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-3f3d20cc]:hover{border-color:var(--color-border-hover)}input[data-v-3f3d20cc]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[data-v-3f3d20cc]::placeholder{color:var(--color-text-tertiary)}.toggle[data-v-9916c71e]{align-items:center;gap:.5em;display:flex}.toggle label[data-v-9916c71e]{-webkit-user-select:none;user-select:none}.switch[data-v-9916c71e]{--switch-w:2.25em;--switch-h:1.25em;--thumb-size:1em;--thumb-offset:.125em;width:var(--switch-w);height:var(--switch-h);background:var(--color-border-hover);border-radius:var(--switch-h);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background .15s;position:relative}.switch[data-state=checked][data-v-9916c71e]{background:var(--color-primary)}.switch[data-disabled][data-v-9916c71e]{opacity:.5;cursor:not-allowed}.thumb[data-v-9916c71e]{width:var(--thumb-size);height:var(--thumb-size);top:var(--thumb-offset);left:var(--thumb-offset);background:#fff;border-radius:50%;transition:transform .15s;display:block;position:absolute}.switch[data-state=checked] .thumb[data-v-9916c71e]{transform:translateX(calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2))}.toggle-group-field[data-v-efb7da4d]{flex-direction:column;align-items:flex-start;gap:.25em;display:flex}.toggle-group-label[data-v-efb7da4d]{font-size:var(--font-size-sm);align-items:center;gap:.25em;display:flex}.toggle-group[data-v-efb7da4d]{background:var(--color-border);border:1px solid var(--color-border);border-radius:.375em;gap:1px;display:inline-flex;overflow:hidden}.toggle-group--vertical[data-v-efb7da4d]{flex-direction:column}.toggle-group-item[data-v-efb7da4d]{appearance:none;background:var(--color-bg-0);min-height:2.5em;color:var(--color-text);font:inherit;font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);border:none;justify-content:center;align-items:center;margin:0;padding:0 1em;font-weight:500;display:inline-flex}.toggle-group-item[data-v-efb7da4d]:hover:not([data-disabled]){background:var(--color-bg-2)}.toggle-group-item[data-state=on][data-v-efb7da4d]{background:var(--color-primary);color:var(--color-text-on-primary)}.toggle-group-item[data-state=on][data-v-efb7da4d]:hover:not([data-disabled]){background:var(--color-primary-hover)}.toggle-group-item[data-v-efb7da4d]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:1}.toggle-group-item[data-disabled][data-v-efb7da4d]{opacity:.5;cursor:not-allowed}.param-editor[data-v-e824be07]{flex-direction:column;gap:.5em;min-width:0;display:flex}.param-editor-toolbar[data-v-e824be07]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5em;display:flex}.param-editor-actions[data-v-e824be07]{gap:.25em;display:flex}.param-editor-file-input[data-v-e824be07]{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.param-editor-cm[data-v-e824be07]{border:1px solid var(--color-border);border-radius:.375em;overflow:hidden}.param-editor-cm[data-v-e824be07] .cm-editor{outline:none;height:100%}.param-editor-cm[data-v-e824be07] .cm-editor.cm-focused{outline:none}.param-editor-cm[data-v-e824be07] .cm-scroller{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.param-editor-error[data-v-e824be07]{white-space:pre-wrap;word-break:break-word}.param-editor-shortcut-hint[data-v-e824be07]{font-size:var(--font-size-xs,.75em);color:var(--color-text-secondary,#666);margin:0}.param-editor-shortcut-hint kbd[data-v-e824be07]{border:1px solid var(--color-border);background:var(--color-bg-1,transparent);border-radius:.25em;padding:.1em .35em;font-family:inherit;font-size:.95em}
1
+ .box[data-v-d7342c02]{font-size:var(--font-size-sm);border-radius:.375em;padding:.75em 1.25em}.box-info[data-v-d7342c02]{background-color:var(--color-box-info-bg);color:var(--color-box-info-text)}.box-success[data-v-d7342c02]{background-color:var(--color-box-success-bg);color:var(--color-box-success-text)}.box-warning[data-v-d7342c02]{background-color:var(--color-box-warning-bg);color:var(--color-box-warning-text)}.box-error[data-v-d7342c02]{background-color:var(--color-box-error-bg);color:var(--color-box-error-text)}.button[data-v-250eab18]{min-height:2.5em;font-size:var(--font-size-sm);background-color:var(--color-primary);color:var(--color-text-on-primary);border:none;border-radius:.375em;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;padding:0 1em;font-weight:500;display:inline-flex}.button[data-v-250eab18]:hover{cursor:pointer;background-color:var(--color-primary-hover)}.button[data-v-250eab18]:active{background-color:var(--color-primary-active)}.button[data-v-250eab18]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.button[data-v-250eab18]:disabled{opacity:.5;cursor:not-allowed}.button[data-variant=secondary][data-v-250eab18]{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000}.button[data-variant=secondary][data-v-250eab18]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.button[data-variant=secondary][data-v-250eab18]:active{background-color:color-mix(in srgb, var(--color-primary) 15%, transparent)}.select-box[data-v-6210bde2]{flex-direction:column;gap:.25em;display:flex}.select-label[data-v-6210bde2]{font-size:var(--font-size-sm)}.select-trigger[data-v-6210bde2]{font-size:var(--font-size-sm);border:1px solid var(--color-border);background:var(--color-bg-0);cursor:pointer;width:auto;height:2.5em;color:inherit;border-radius:.375em;justify-content:space-between;align-items:center;gap:.5em;padding:0 .75em;font-family:inherit;line-height:1.4;display:inline-flex}.select-trigger[data-v-6210bde2]:hover{border-color:var(--color-border-hover)}.select-trigger[data-v-6210bde2]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.select-trigger[data-placeholder][data-v-6210bde2]{color:var(--color-text-secondary)}.select-anchor[data-v-6210bde2]{height:2.5em;font-size:var(--font-size-sm);background:var(--color-bg-0);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;align-items:center;gap:.5em;padding:0 .5em 0 .75em;display:flex}.select-anchor[data-v-6210bde2]:hover{border-color:var(--color-border-hover)}.select-anchor[data-v-6210bde2]:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}.select-input[data-v-6210bde2]{min-width:0;height:100%;color:inherit;font:inherit;background:0 0;border:none;flex:1;padding:0}.select-input[data-v-6210bde2]:focus{outline:none}.select-input[data-v-6210bde2]::placeholder{color:var(--color-text-secondary)}.select-icon-button[data-v-6210bde2]{color:inherit;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.select-icon[data-v-6210bde2]{flex-shrink:0;align-items:center;display:flex}.select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);min-width:var(--reka-select-trigger-width);max-height:var(--reka-select-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.select-content-autocomplete{width:var(--reka-combobox-trigger-width);max-height:var(--reka-combobox-content-available-height)}.select-viewport{padding:.25em}.select-empty{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;padding:.5em}.select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.select-item[data-highlighted]{background:var(--color-primary);color:#fff}.select-item[data-state=checked]{font-weight:600}.select-indicator{flex-shrink:0;align-items:center;display:flex}.button-group[data-v-f3bd45a3]{display:inline-flex}.button-group[data-orientation=vertical][data-v-f3bd45a3]{flex-direction:column}.button-group[data-v-f3bd45a3]>*{border-radius:0;align-self:stretch}.button-group[data-orientation=horizontal][data-v-f3bd45a3]>:not(:first-child){margin-left:-1px}.button-group[data-orientation=vertical][data-v-f3bd45a3]>:not(:first-child){margin-top:-1px}.button-group[data-v-f3bd45a3]>:hover,.button-group[data-v-f3bd45a3]>:focus-visible,.button-group[data-v-f3bd45a3]>:focus{z-index:1;position:relative}.button-group[data-orientation=horizontal][data-v-f3bd45a3] .button[data-variant=primary]+.button[data-variant=primary]{border-left:1px solid color-mix(in srgb, var(--color-text-on-primary) 35%, transparent)}.button-group[data-orientation=vertical][data-v-f3bd45a3] .button[data-variant=primary]+.button[data-variant=primary]{border-top:1px solid color-mix(in srgb, var(--color-text-on-primary) 35%, transparent)}.button-group[data-orientation=horizontal][data-v-f3bd45a3]>:first-child{border-top-left-radius:.375em;border-bottom-left-radius:.375em}.button-group[data-orientation=horizontal][data-v-f3bd45a3]>:last-child{border-top-right-radius:.375em;border-bottom-right-radius:.375em}.button-group[data-orientation=vertical][data-v-f3bd45a3]>:first-child{border-top-left-radius:.375em;border-top-right-radius:.375em}.button-group[data-orientation=vertical][data-v-f3bd45a3]>:last-child{border-bottom-right-radius:.375em;border-bottom-left-radius:.375em}.container[data-v-bff01edb]{flex-direction:column;min-width:0;display:flex}.container-horizontal[data-v-bff01edb]{flex-flow:wrap;align-items:center}.container-border[data-v-bff01edb]{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md)}.container-scrollable[data-v-bff01edb]{overflow:auto}.expander-trigger[data-v-39e4acd0]{cursor:pointer;width:100%;font:inherit;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:0 0;border:none;align-items:center;gap:.5em;padding:.5em 0;font-weight:600;display:flex}.expander-trigger[data-v-39e4acd0]:hover{color:var(--color-text)}.expander-caret[data-v-39e4acd0]{border-top:.3em solid #0000;border-bottom:.3em solid #0000;border-left:.35em solid;width:0;height:0;transition:transform .15s;display:inline-block}.expander-caret.open[data-v-39e4acd0]{transform:rotate(90deg)}.expander-content[data-v-39e4acd0]{flex-direction:column;gap:.75em;display:flex;overflow:hidden}.expander-content[data-state=open][data-v-39e4acd0]{animation:.2s ease-out slideDown-39e4acd0}.expander-content[data-state=closed][data-v-39e4acd0]{animation:.2s ease-out slideUp-39e4acd0}@keyframes slideDown-39e4acd0{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes slideUp-39e4acd0{0%{height:var(--reka-collapsible-content-height)}to{height:0}}.grid-wrapper[data-v-7ae87f0f]{width:100%;min-width:0;container-type:inline-size}.grid[data-v-7ae87f0f]{min-width:0;display:grid}.grid[data-v-7ae87f0f]>*{min-width:0}.Icon{width:24px;height:24px;color:inherit;flex:none;justify-content:center;align-items:center;display:inline-flex}.Icon svg{fill:currentColor;width:100%;height:100%;display:block}.Icon[data-size=sm]{width:20px;height:20px}.Icon[data-size=md]{width:24px;height:24px}.Icon[data-size=lg]{width:28px;height:28px}.Icon[data-size=xl]{width:32px;height:32px}.Icon[data-inline=true]{vertical-align:-.125em;width:1em;height:1em}.HintTrigger[data-v-9dbf1c25]{width:1.25em;height:1.25em;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.HintTrigger[data-v-9dbf1c25]:hover{color:var(--color-text)}.HintTrigger[data-v-9dbf1c25]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.HintContent{max-width:15rem;font-size:var(--font-size-xs);color:var(--color-bg-0);background-color:var(--color-text);box-shadow:var(--shadow-md);z-index:100;border-radius:.25em;padding:.5em .75em;line-height:1.4}.HintArrow{fill:var(--color-text)}.light-dark-toggle[data-v-4c423498]{border:1px solid var(--color-border);background:var(--color-bg-0);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:.25em;justify-content:center;align-items:center;display:flex}.light-dark-toggle[data-v-4c423498]:hover{color:var(--color-text);background:var(--color-bg-1)}.multi-select[data-v-14e1dc47]{flex-direction:column;gap:.25em;display:flex}.multi-select-label[data-v-14e1dc47]{font-size:var(--font-size-sm);justify-content:space-between;align-items:center;display:flex}.multi-select-anchor[data-v-14e1dc47]{min-height:2.5em;font-size:var(--font-size-sm);background:var(--color-bg-0);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;align-items:center;gap:.25em;padding:.25em .5em;display:flex}.multi-select-anchor[data-v-14e1dc47]:hover{border-color:var(--color-border-hover)}.multi-select-anchor[data-v-14e1dc47]:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}.multi-select-field[data-v-14e1dc47]{flex-wrap:wrap;flex:1;align-items:center;gap:.25em;min-width:0;display:flex}.multi-select-chips[data-v-14e1dc47]{margin:0;padding:0;list-style:none;display:contents}.multi-select-chip[data-v-14e1dc47]{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:.25em;align-items:center;gap:.25em;margin:0;padding:.125em .25em .125em .5em;line-height:1.4;display:inline-flex}.multi-select-chip-remove[data-v-14e1dc47]{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:.25em;align-items:center;padding:0;display:inline-flex}.multi-select-chip-remove[data-v-14e1dc47]:hover{color:var(--color-text)}.multi-select-chip-remove[data-v-14e1dc47]:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.multi-select-input[data-v-14e1dc47]{min-width:3em;height:1.75em;color:var(--color-text);font:inherit;background:0 0;border:none;flex:1;padding:0}.multi-select-input[data-v-14e1dc47]:focus{outline:none}.multi-select-input[data-v-14e1dc47]::placeholder{color:var(--color-text-tertiary)}.multi-select-trigger[data-v-14e1dc47]{color:inherit;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.multi-select-icon[data-v-14e1dc47]{align-items:center;display:flex}.multi-select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);width:var(--reka-combobox-trigger-width);max-height:var(--reka-combobox-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.multi-select-viewport{padding:.25em}.multi-select-empty{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;padding:.5em}.multi-select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.multi-select-item[data-highlighted]{background:var(--color-primary);color:#fff}.multi-select-item[data-state=checked]{font-weight:600}.multi-select-indicator{flex-shrink:0;align-items:center;display:flex}.input-label[data-v-b123853e]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-b123853e]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-b123853e]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-b123853e]{flex:1;min-width:0}input[data-v-b123853e]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-b123853e]:hover{border-color:var(--color-border-hover)}input[data-v-b123853e]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-b123853e]{border-color:var(--color-error)}input[aria-invalid=true][data-v-b123853e]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-b123853e]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-b123853e]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-b123853e]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-b123853e]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-b123853e]{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.slider-root[data-v-b123853e]{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:1.5em;display:flex;position:relative}.slider-track[data-v-b123853e]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-b123853e]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-b123853e]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-b123853e]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-b123853e]:active,.slider-thumb[data-v-b123853e]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-b123853e]{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;margin-top:-.5em;display:flex}.Spinner{vertical-align:middle;border:2px solid;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite cfa-spin;display:inline-block}.Spinner[data-size=sm]{width:14px;height:14px}.Spinner[data-size=md]{width:20px;height:20px}.Spinner[data-size=lg]{border-width:3px;width:28px;height:28px}@keyframes cfa-spin{to{transform:rotate(360deg)}}.SidebarLayout[data-v-6d59601d]{--bar-height:3rem;background-color:var(--color-bg-0);height:100dvh;color:var(--color-text);font-family:var(--font-family);display:flex;position:relative}.SidebarRail[data-v-6d59601d]{width:var(--sidebar-width);height:100%;transition:width var(--transition-normal);flex-shrink:0;position:relative;overflow:hidden}@media (width>=768px){.SidebarLayout[data-collapsed=true] .SidebarRail[data-v-6d59601d]{width:var(--toggle-size);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm)}}.Sidebar[data-v-6d59601d]{font-size:var(--font-size-sm);width:var(--sidebar-width);height:100%;transition:transform var(--transition-normal);display:flex;transform:translate(0)}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-6d59601d]{transform:translate(-100%)}.SidebarScroll[data-v-6d59601d]{min-width:0;padding:var(--space-4);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm);scrollbar-width:thin;scrollbar-color:transparent transparent;gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.SidebarScroll[data-v-6d59601d]:hover{scrollbar-color:var(--color-border) transparent}.SidebarScroll[data-v-6d59601d] h2{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-2);font-weight:600}.SidebarScroll[data-v-6d59601d]>h2:first-child{margin-top:0}.Toggle[data-v-6d59601d]{width:var(--toggle-size);height:var(--toggle-size);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Toggle[data-v-6d59601d]:hover{color:var(--color-text);background-color:var(--color-bg-2)}.Toggle[data-v-6d59601d]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.SidebarHeader[data-v-6d59601d]{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));justify-content:flex-end;display:flex}.Toggle--expand[data-v-6d59601d]{opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:0;left:50%;transform:translate(-50%)}.SidebarLayout[data-collapsed=true] .Toggle--expand[data-v-6d59601d]{opacity:1;pointer-events:auto}.Main[data-v-6d59601d]{background-color:var(--color-bg-0);min-width:0;font-size:var(--font-size-md);flex-direction:column;flex:1;display:flex;overflow:hidden;container-type:inline-size}.Topbar[data-v-6d59601d]{min-height:var(--bar-height);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TopbarEnd[data-v-6d59601d]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}@container (width>=768px){.Topbar[data-v-6d59601d]{padding:0 var(--space-4) 0 var(--space-20)}}.MainScroll[data-v-6d59601d]{min-height:0;padding:var(--space-6) 0;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;overflow:hidden auto}.MainScroll[data-v-6d59601d]:hover{scrollbar-color:var(--color-border) transparent}.MainContent[data-v-6d59601d]{max-width:1024px;padding:0 var(--space-4)}@container (width>=768px){.MainContent[data-v-6d59601d]{padding:0 var(--space-4) 0 var(--space-20)}}@media (width<=767px){.SidebarLayout[data-v-6d59601d]{transition:transform var(--transition-normal)}.SidebarLayout[data-collapsed=true][data-v-6d59601d]{transform:translateX(calc(-1 * var(--sidebar-width)))}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-6d59601d]{transform:translate(0)}.SidebarRail[data-v-6d59601d]{min-width:var(--sidebar-width)}.Main[data-v-6d59601d]{min-width:100vw}.Toggle--expand[data-v-6d59601d]{display:none}}.TabsLayout[data-v-6d59601d]{flex-direction:column;flex:1;min-height:0;display:flex}.TabsBar[data-v-6d59601d]{min-height:var(--bar-height);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TabsBarEnd[data-v-6d59601d]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}.TabsList[data-v-6d59601d]{gap:var(--space-1);align-self:stretch;display:flex;position:relative}.TabsTrigger[data-v-6d59601d]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0;background:0 0;border:none;font-family:inherit;font-weight:500;position:relative}.TabsTrigger[data-v-6d59601d]:hover{color:var(--color-text);background-color:var(--color-bg-1)}.TabsTrigger[data-state=active][data-v-6d59601d]{color:var(--color-text)}.TabsTrigger[data-v-6d59601d]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.TabsIndicator[data-v-6d59601d]{background-color:var(--color-text);height:2px;transition:width var(--transition-fast), left var(--transition-fast);position:absolute;bottom:0}.input-label[data-v-3f3d20cc]{font-size:var(--font-size-sm);flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-3f3d20cc]{justify-content:space-between;align-items:center;display:flex}input[data-v-3f3d20cc]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-3f3d20cc]:hover{border-color:var(--color-border-hover)}input[data-v-3f3d20cc]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[data-v-3f3d20cc]::placeholder{color:var(--color-text-tertiary)}.toggle[data-v-9916c71e]{align-items:center;gap:.5em;display:flex}.toggle label[data-v-9916c71e]{-webkit-user-select:none;user-select:none}.switch[data-v-9916c71e]{--switch-w:2.25em;--switch-h:1.25em;--thumb-size:1em;--thumb-offset:.125em;width:var(--switch-w);height:var(--switch-h);background:var(--color-border-hover);border-radius:var(--switch-h);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background .15s;position:relative}.switch[data-state=checked][data-v-9916c71e]{background:var(--color-primary)}.switch[data-disabled][data-v-9916c71e]{opacity:.5;cursor:not-allowed}.thumb[data-v-9916c71e]{width:var(--thumb-size);height:var(--thumb-size);top:var(--thumb-offset);left:var(--thumb-offset);background:#fff;border-radius:50%;transition:transform .15s;display:block;position:absolute}.switch[data-state=checked] .thumb[data-v-9916c71e]{transform:translateX(calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2))}.toggle-group-field[data-v-efb7da4d]{flex-direction:column;align-items:flex-start;gap:.25em;display:flex}.toggle-group-label[data-v-efb7da4d]{font-size:var(--font-size-sm);align-items:center;gap:.25em;display:flex}.toggle-group[data-v-efb7da4d]{background:var(--color-border);border:1px solid var(--color-border);border-radius:.375em;gap:1px;display:inline-flex;overflow:hidden}.toggle-group--vertical[data-v-efb7da4d]{flex-direction:column}.toggle-group-item[data-v-efb7da4d]{appearance:none;background:var(--color-bg-0);min-height:2.5em;color:var(--color-text);font:inherit;font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);border:none;justify-content:center;align-items:center;margin:0;padding:0 1em;font-weight:500;display:inline-flex}.toggle-group-item[data-v-efb7da4d]:hover:not([data-disabled]){background:var(--color-bg-2)}.toggle-group-item[data-state=on][data-v-efb7da4d]{background:var(--color-primary);color:var(--color-text-on-primary)}.toggle-group-item[data-state=on][data-v-efb7da4d]:hover:not([data-disabled]){background:var(--color-primary-hover)}.toggle-group-item[data-v-efb7da4d]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:1}.toggle-group-item[data-disabled][data-v-efb7da4d]{opacity:.5;cursor:not-allowed}.param-editor[data-v-e824be07]{flex-direction:column;gap:.5em;min-width:0;display:flex}.param-editor-toolbar[data-v-e824be07]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5em;display:flex}.param-editor-actions[data-v-e824be07]{gap:.25em;display:flex}.param-editor-file-input[data-v-e824be07]{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.param-editor-cm[data-v-e824be07]{border:1px solid var(--color-border);border-radius:.375em;overflow:hidden}.param-editor-cm[data-v-e824be07] .cm-editor{outline:none;height:100%}.param-editor-cm[data-v-e824be07] .cm-editor.cm-focused{outline:none}.param-editor-cm[data-v-e824be07] .cm-scroller{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.param-editor-error[data-v-e824be07]{white-space:pre-wrap;word-break:break-word}.param-editor-shortcut-hint[data-v-e824be07]{font-size:var(--font-size-xs,.75em);color:var(--color-text-secondary,#666);margin:0}.param-editor-shortcut-hint kbd[data-v-e824be07]{border:1px solid var(--color-border);background:var(--color-bg-1,transparent);border-radius:.25em;padding:.1em .35em;font-family:inherit;font-size:.95em}
2
2
  /*$vite$:1*/
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { i as e, n as t, r as n, t as r } from "./SelectBox-Bqsx-5ZB.js";
1
+ import { i as e, n as t, r as n, t as r } from "./SelectBox-Bg7Qhmy7.js";
2
2
  import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineAsyncComponent as f, defineComponent as p, getCurrentInstance as m, mergeModels as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onMounted as ee, onUnmounted as y, openBlock as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useModel as D, vModelText as O, watch as k, withCtx as A, withDirectives as te, withKeys as j, withModifiers as M } from "vue";
3
3
  import { CollapsibleContent as ne, CollapsibleRoot as re, CollapsibleTrigger as ie, ComboboxAnchor as N, ComboboxContent as P, ComboboxEmpty as F, ComboboxInput as ae, ComboboxItem as I, ComboboxItemIndicator as L, ComboboxPortal as R, ComboboxRoot as oe, ComboboxTrigger as se, ComboboxViewport as z, SliderRange as ce, SliderRoot as le, SliderThumb as ue, SliderTrack as de, SwitchRoot as B, SwitchThumb as fe, TabsIndicator as V, TabsList as H, TabsRoot as U, TabsTrigger as W, ToggleGroupItem as G, ToggleGroupRoot as pe, TooltipArrow as me, TooltipContent as he, TooltipPortal as K, TooltipProvider as ge, TooltipRoot as _e, TooltipTrigger as q, useId as J } from "reka-ui";
4
4
  //#region \0rolldown/runtime.js
@@ -1117,7 +1117,7 @@ var An = {
1117
1117
  emits: ["apply"],
1118
1118
  setup(e) {
1119
1119
  let t = f({
1120
- loader: () => import("./ParamEditorImpl-BLZRogrw.js"),
1120
+ loader: () => import("./ParamEditorImpl-BD3kPsrQ.js"),
1121
1121
  loadingComponent: zn,
1122
1122
  delay: 100
1123
1123
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfasim-ui/components",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "type": "module",
5
5
  "description": "Vue 3 UI components for cfasim-ui",
6
6
  "license": "Apache-2.0",
@@ -38,7 +38,7 @@
38
38
  "smol-toml": "^1.6.1",
39
39
  "vue-codemirror": "^6.1.1",
40
40
  "yaml": "^2.9.0",
41
- "@cfasim-ui/shared": "0.6.0"
41
+ "@cfasim-ui/shared": "0.6.1"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "vue": "^3.5.0"
@@ -1,135 +0,0 @@
1
- import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
2
- import { Primitive as v, SelectContent as y, SelectItem as b, SelectItemIndicator as x, SelectItemText as S, SelectPortal as C, SelectRoot as w, SelectTrigger as T, SelectValue as E, SelectViewport as D, useId as O } from "reka-ui";
3
- //#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
4
- var k = ["role"], A = /* @__PURE__ */ s({
5
- __name: "Box",
6
- props: {
7
- variant: {},
8
- bgColor: {},
9
- textColor: {},
10
- role: {}
11
- },
12
- setup(e) {
13
- return (t, n) => (d(), r("div", {
14
- class: l(["box", e.variant ? `box-${e.variant}` : void 0]),
15
- style: u({
16
- backgroundColor: e.bgColor,
17
- color: e.textColor
18
- }),
19
- role: e.role
20
- }, [p(t.$slots, "default", {}, void 0, !0)], 14, k));
21
- }
22
- }), j = (e, t) => {
23
- let n = e.__vccOpts || e;
24
- for (let [e, r] of t) n[e] = r;
25
- return n;
26
- }, M = /* @__PURE__ */ j(A, [["__scopeId", "data-v-d7342c02"]]), N = /* @__PURE__ */ j(/* @__PURE__ */ s({
27
- __name: "Button",
28
- props: {
29
- label: {},
30
- variant: { default: "primary" },
31
- asChild: { type: Boolean },
32
- as: { default: "button" }
33
- },
34
- emits: ["click"],
35
- setup(e) {
36
- return (n, r) => (d(), t(h(v), {
37
- class: "button",
38
- "data-variant": e.variant,
39
- as: e.as,
40
- "as-child": e.asChild,
41
- onClick: r[0] ||= (e) => n.$emit("click", e)
42
- }, {
43
- default: _(() => [p(n.$slots, "default", {}, () => [a(m(e.label), 1)], !0)]),
44
- _: 3
45
- }, 8, [
46
- "data-variant",
47
- "as",
48
- "as-child"
49
- ]));
50
- }
51
- }), [["__scopeId", "data-v-250eab18"]]), P = { class: "select-box" }, F = ["id"], I = /* @__PURE__ */ j(/* @__PURE__ */ s({
52
- __name: "SelectBox",
53
- props: /* @__PURE__ */ c({
54
- label: {},
55
- hideLabel: { type: Boolean },
56
- ariaLabel: {},
57
- options: {},
58
- placeholder: {}
59
- }, {
60
- modelValue: {},
61
- modelModifiers: {}
62
- }),
63
- emits: ["update:modelValue"],
64
- setup(s) {
65
- let c = g(s, "modelValue"), u = s, p = O();
66
- return (g, v) => (d(), r("div", P, [s.label ? (d(), r("label", {
67
- key: 0,
68
- id: `${h(p)}-label`,
69
- class: l(["select-label", { "visually-hidden": s.hideLabel }])
70
- }, m(s.label), 11, F)) : n("", !0), o(h(w), {
71
- modelValue: c.value,
72
- "onUpdate:modelValue": v[0] ||= (e) => c.value = e
73
- }, {
74
- default: _(() => [o(h(T), {
75
- class: "select-trigger",
76
- "aria-labelledby": u.label ? `${h(p)}-label` : void 0,
77
- "aria-label": u.label ? void 0 : u.ariaLabel
78
- }, {
79
- default: _(() => [o(h(E), { placeholder: s.placeholder }, null, 8, ["placeholder"]), v[1] ||= i("span", {
80
- class: "select-icon",
81
- "aria-hidden": "true"
82
- }, [i("svg", {
83
- width: "12",
84
- height: "12",
85
- viewBox: "0 0 12 12",
86
- fill: "none",
87
- stroke: "currentColor",
88
- "stroke-width": "2",
89
- "stroke-linecap": "round",
90
- "stroke-linejoin": "round"
91
- }, [i("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
92
- _: 1
93
- }, 8, ["aria-labelledby", "aria-label"]), o(h(C), null, {
94
- default: _(() => [o(h(y), {
95
- class: "select-content",
96
- position: "popper",
97
- "side-offset": 4,
98
- "body-lock": !1
99
- }, {
100
- default: _(() => [o(h(D), { class: "select-viewport" }, {
101
- default: _(() => [(d(!0), r(e, null, f(s.options, (e) => (d(), t(h(b), {
102
- key: e.value,
103
- value: e.value,
104
- class: "select-item"
105
- }, {
106
- default: _(() => [o(h(S), null, {
107
- default: _(() => [a(m(e.label), 1)]),
108
- _: 2
109
- }, 1024), o(h(x), { class: "select-indicator" }, {
110
- default: _(() => [...v[2] ||= [i("svg", {
111
- width: "12",
112
- height: "12",
113
- viewBox: "0 0 12 12",
114
- fill: "none",
115
- stroke: "currentColor",
116
- "stroke-width": "2",
117
- "stroke-linecap": "round",
118
- "stroke-linejoin": "round"
119
- }, [i("path", { d: "M2 6L5 9L10 3" })], -1)]]),
120
- _: 1
121
- })]),
122
- _: 2
123
- }, 1032, ["value"]))), 128))]),
124
- _: 1
125
- })]),
126
- _: 1
127
- })]),
128
- _: 1
129
- })]),
130
- _: 1
131
- }, 8, ["modelValue"])]));
132
- }
133
- }), [["__scopeId", "data-v-63876437"]]);
134
- //#endregion
135
- export { j as i, N as n, M as r, I as t };