@well-insight/ui 0.1.9 → 0.1.11

package/dist/cascade-select/index.js

@@ -1,129 +1,196 @@
-import { n as e, t } from "../overlay-oR-5MDuE.js";
-import { c as n, o as r } from "../config-DWwce9jA.js";
-import { n as i } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t, t as n } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-CN1tuC95.js";
+import { c as ee, i as te, o as ne } from "../config-CTLkobga.js";
+import { n as re } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as a, Teleport as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, watch as w, withCtx as T } from "vue";
+import { Fragment as i, Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, nextTick as m, normalizeClass as h, normalizeStyle as ie, onBeforeUnmount as ae, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
 //#region src/components/CascadeSelect/CascadeSelect.vue?vue&type=script&setup=true&lang.ts
-var E = ["disabled", "aria-expanded"], D = { class: "wi-cascadeselect__label" }, O = [
+var C = ["for"], w = [
+	"id",
+	"disabled",
+	"aria-expanded",
+	"aria-invalid",
+	"aria-describedby"
+], T = { class: "wi-cascadeselect__label" }, E = { class: "wi-select__suffix" }, oe = ["aria-label"], se = ["id"], ce = [
 	"disabled",
 	"aria-selected",
 	"onClick"
-], k = {
-	key: 0,
-	"aria-hidden": "true"
-}, A = /* @__PURE__ */ m({
+], D = /* @__PURE__ */ p({
 	__name: "CascadeSelect",
 	props: {
 		modelValue: { default: null },
 		options: {},
+		label: {},
+		helpText: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		errorMessage: {},
+		id: {},
 		placeholder: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
 		size: {},
+		fluid: {
+			type: Boolean,
+			default: void 0
+		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
 		teleport: {
 			type: Boolean,
 			default: !0
 		},
 		appendTo: {}
 	},
-	emits: ["update:modelValue"],
-	setup(m, { emit: A }) {
-		let j = m, M = A, N = n(), P = i(), F = r("CascadeSelect", () => j.size), I = b(!1), L = b(null), R = b(null), z = b(null), B = b({}), V = b([]), H = c(() => e(j, N.value.appendTo)), U = c(() => t(j, N.value.appendTo)), W = c(() => G(j.options, j.modelValue) ?? j.placeholder ?? P.value.selectPlaceholder);
-		function G(e, t) {
+	emits: ["update:modelValue", "clear"],
+	setup(p, { emit: D }) {
+		let O = p, k = D, A = te("CascadeSelect"), j = ee(), M = re(), N = ne("CascadeSelect", () => O.size), P = _(!1), F = _(null), I = _(null), L = _(null), R = _({}), z = _([]), B = s(() => O.id ?? `wi-cascadeselect-${Math.random().toString(36).slice(2, 8)}`), V = s(() => t(O, j.value.appendTo)), H = s(() => n(O, j.value.appendTo)), U = s(() => O.clearable ?? A.value.clearable ?? !1), W = s(() => O.fluid ?? A.value.fluid ?? !1), G = s(() => O.invalid || !!O.errorMessage), K = s(() => O.errorMessage || O.helpText), le = s(() => !!O.errorMessage || G.value && !!O.helpText), q = s(() => O.modelValue != null), J = s(() => U.value && q.value && !O.disabled), ue = s(() => Y(O.options, O.modelValue) ?? O.placeholder ?? M.value.selectPlaceholder);
+		function Y(e, t) {
+			if (t == null) return null;
 			for (let n of e) {
 				if (n.value === t) return n.label;
 				if (n.children?.length) {
-					let e = G(n.children, t);
+					let e = Y(n.children, t);
 					if (e) return e;
 				}
 			}
 			return null;
 		}
-		function K() {
-			if (!R.value) return;
-			let e = R.value.getBoundingClientRect(), t = `${e.width}px`;
-			B.value = U.value ? {
-				left: `${e.left}px`,
+		function X() {
+			if (!I.value) return;
+			let e = I.value.getBoundingClientRect(), t = `${e.width}px`;
+			R.value = H.value ? r(e, "bottom-start", {
 				minWidth: t,
-				top: `${e.bottom + 8}px`,
 				width: t
-			} : {
+			}) : {
 				minWidth: t,
 				width: t
 			};
 		}
-		function q() {
-			j.disabled || (I.value = !I.value, I.value && (V.value = [j.options], h(() => K())));
+		function de() {
+			O.disabled || (P.value = !P.value, P.value && (z.value = [O.options], m(() => X())));
 		}
-		function J(e, t) {
+		function Z(e) {
+			e.stopPropagation(), e.preventDefault(), !(O.disabled || !q.value) && (k("update:modelValue", null), k("clear"), I.value?.focus({ preventScroll: !0 }));
+		}
+		function fe(e, t) {
 			if (!e.disabled) {
 				if (e.children?.length) {
-					V.value = [...V.value.slice(0, t + 1), e.children], h(() => K());
+					z.value = [...z.value.slice(0, t + 1), e.children], m(() => X());
 					return;
 				}
-				M("update:modelValue", e.value), I.value = !1;
+				k("update:modelValue", e.value), P.value = !1;
 			}
 		}
-		function Y(e) {
+		function Q(e) {
 			let t = e.target;
-			L.value?.contains(t) || z.value?.contains(t) || (I.value = !1);
+			F.value?.contains(t) || L.value?.contains(t) || (P.value = !1);
 		}
-		function X() {
-			I.value && K();
+		function $() {
+			P.value && X();
 		}
-		return w(I, (e) => {
-			e ? (document.addEventListener("click", Y), U.value && (window.addEventListener("resize", X), window.addEventListener("scroll", X, !0))) : (document.removeEventListener("click", Y), window.removeEventListener("resize", X), window.removeEventListener("scroll", X, !0));
-		}), v(() => {
-			document.removeEventListener("click", Y), window.removeEventListener("resize", X), window.removeEventListener("scroll", X, !0);
-		}), (e, t) => (y(), d("div", {
+		return x(P, (e) => {
+			e ? (document.addEventListener("click", Q), H.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), ae(() => {
+			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+		}), (t, n) => (g(), u("div", {
 			ref_key: "root",
-			ref: L,
-			class: g(["wi-cascadeselect", [`wi-cascadeselect--${C(F)}`, {
-				"wi-cascadeselect--disabled": m.disabled,
-				"wi-cascadeselect--open": I.value
+			ref: F,
+			class: h(["wi-select-field wi-cascadeselect", [`wi-cascadeselect--${b(N)}`, {
+				"wi-select-field--fluid": W.value,
+				"wi-cascadeselect--disabled": p.disabled,
+				"wi-cascadeselect--open": P.value
 			}]])
-		}, [f("button", {
-			ref_key: "trigger",
-			ref: R,
-			type: "button",
-			class: "wi-cascadeselect__trigger",
-			disabled: m.disabled,
-			"aria-expanded": I.value,
-			"aria-haspopup": "listbox",
-			onClick: q
-		}, [f("span", D, S(W.value), 1), t[0] ||= f("span", {
-			class: "wi-cascadeselect__caret",
-			"aria-hidden": "true"
-		}, "▾", -1)], 8, E), (y(), l(o, {
-			to: H.value.to,
-			disabled: H.value.disabled
-		}, [p(s, { name: "wi-scale-fade" }, {
-			default: T(() => [I.value ? (y(), d("div", {
+		}, [
+			p.label ? (g(), u("label", {
 				key: 0,
-				ref_key: "panel",
-				ref: z,
-				class: g(["wi-cascadeselect__panel", { "wi-cascadeselect__panel--teleported": U.value }]),
-				style: _(B.value),
-				role: "listbox"
-			}, [(y(!0), d(a, null, x(V.value, (e, t) => (y(), d("ul", {
-				key: t,
-				class: "wi-cascadeselect__column"
-			}, [(y(!0), d(a, null, x(e, (e) => (y(), d("li", { key: String(e.value) }, [f("button", {
+				class: "wi-select-field__label",
+				for: B.value
+			}, y(p.label), 9, C)) : l("", !0),
+			d("div", { class: h(["wi-cascadeselect__control wi-select__control", {
+				"wi-select__control--clearable": J.value,
+				"wi-select__control--open": P.value
+			}]) }, [d("button", {
+				id: B.value,
+				ref_key: "trigger",
+				ref: I,
 				type: "button",
-				class: g(["wi-cascadeselect__option", {
-					"wi-cascadeselect__option--selected": e.value === m.modelValue,
-					"wi-cascadeselect__option--parent": !!e.children?.length
+				class: h(["wi-cascadeselect__trigger", {
+					"wi-cascadeselect__trigger--invalid": G.value,
+					"wi-cascadeselect__trigger--placeholder": !q.value
 				}]),
-				disabled: e.disabled,
-				role: "option",
-				"aria-selected": e.value === m.modelValue,
-				onClick: (n) => J(e, t)
-			}, [f("span", null, S(e.label), 1), e.children?.length ? (y(), d("span", k, "›")) : u("", !0)], 10, O)]))), 128))]))), 128))], 6)) : u("", !0)]),
-			_: 1
-		})], 8, ["to", "disabled"]))], 2));
+				disabled: p.disabled,
+				"aria-expanded": P.value,
+				"aria-invalid": G.value || void 0,
+				"aria-describedby": K.value ? `${B.value}-help` : void 0,
+				"aria-haspopup": "listbox",
+				onClick: de
+			}, [d("span", T, y(ue.value), 1)], 10, w), d("div", E, [J.value ? (g(), u("button", {
+				key: 0,
+				class: "wi-select__clear",
+				type: "button",
+				"aria-label": b(M).clear,
+				onClick: Z
+			}, [f(e, {
+				name: "close",
+				size: "sm"
+			})], 8, oe)) : l("", !0), d("span", {
+				class: h(["wi-select__indicator", { "wi-select__indicator--open": P.value }]),
+				"aria-hidden": "true"
+			}, [f(e, {
+				name: "chevron-down",
+				size: "sm"
+			})], 2)])], 2),
+			K.value ? (g(), u("p", {
+				key: 1,
+				id: `${B.value}-help`,
+				class: h(["wi-select-field__help", { "wi-select-field__help--invalid": le.value }])
+			}, y(K.value), 11, se)) : l("", !0),
+			(g(), c(a, {
+				to: V.value.to,
+				disabled: V.value.disabled
+			}, [f(o, { name: "wi-scale-fade" }, {
+				default: S(() => [P.value ? (g(), u("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: L,
+					class: h(["wi-cascadeselect__panel", { "wi-cascadeselect__panel--teleported": H.value }]),
+					style: ie(R.value),
+					role: "listbox"
+				}, [(g(!0), u(i, null, v(z.value, (t, n) => (g(), u("ul", {
+					key: n,
+					class: "wi-cascadeselect__column"
+				}, [(g(!0), u(i, null, v(t, (t) => (g(), u("li", { key: String(t.value) }, [d("button", {
+					type: "button",
+					class: h(["wi-cascadeselect__option", {
+						"wi-cascadeselect__option--selected": t.value === p.modelValue,
+						"wi-cascadeselect__option--parent": !!t.children?.length
+					}]),
+					disabled: t.disabled,
+					role: "option",
+					"aria-selected": t.value === p.modelValue,
+					onClick: (e) => fe(t, n)
+				}, [d("span", null, y(t.label), 1), t.children?.length ? (g(), c(e, {
+					key: 0,
+					name: "chevron-right",
+					size: "sm",
+					"aria-hidden": "true"
+				})) : l("", !0)], 10, ce)]))), 128))]))), 128))], 6)) : l("", !0)]),
+				_: 1
+			})], 8, ["to", "disabled"]))
+		], 2));
 	}
 });
 //#endregion
-export { A as WiCascadeSelect };
+export { D as WiCascadeSelect };

package/dist/cascade-select/style.css

@@ -16,12 +16,13 @@
     --wi-control-padding-x-small: 10px;
     --wi-control-padding-x-medium: 12px;
     --wi-control-padding-x-large: 14px;
-    --wi-button-padding-x-small: 10px;
-    --wi-button-padding-x-medium: 14px;
-    --wi-button-padding-x-large: 18px;
+
     --wi-radius-control: 3px;
-    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
-    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
+    --wi-border-width: 1px;
+    --wi-focus-shadow: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
     --wi-color-success: #159570;
     --wi-color-info: #2563eb;
     --wi-color-warning: #d97706;
@@ -39,10 +40,7 @@
     --wi-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
     --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
     --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
-    --wi-terminal-bg: #111827;
-    --wi-terminal-fg: #e5e7eb;
-    --wi-terminal-prompt: #34d399;
-    --wi-terminal-border: color-mix(in srgb, #fff 12%, transparent);
+
     /* Typography scale (component text, not control-height fonts) */
     --wi-font-size-xs: 0.75rem;
     --wi-font-size-sm: 0.8125rem;
@@ -56,8 +54,7 @@
     --wi-z-dropdown: calc(var(--wi-z-base) + 50);
     --wi-z-toast: calc(var(--wi-z-base) + 100);
     --wi-z-popper: 40;
-    --wi-menu-min-width: 10rem;
-    --wi-menu-min-width-lg: 12rem;
+
     --wi-control-affix-size: 2rem;
     --wi-control-affix-gap: 2.35rem;
     --wi-control-affix-padding: 2.5rem;
@@ -118,9 +115,6 @@
     --wi-control-padding-x-small: 8px;
     --wi-control-padding-x-medium: 10px;
     --wi-control-padding-x-large: 12px;
-    --wi-button-padding-x-small: 8px;
-    --wi-button-padding-x-medium: 12px;
-    --wi-button-padding-x-large: 16px;
 }
 
 [data-wi-density="spacious"] {
@@ -139,9 +133,32 @@
     --wi-control-padding-x-small: 12px;
     --wi-control-padding-x-medium: 14px;
     --wi-control-padding-x-large: 16px;
-    --wi-button-padding-x-small: 12px;
-    --wi-button-padding-x-medium: 16px;
-    --wi-button-padding-x-large: 20px;
+}
+
+[data-wi-density="compact"] .wi-layout-header {
+    --wi-layout-header-height: 48px;
+}
+
+[data-wi-density="compact"] .wi-layout-footer {
+    --wi-layout-footer-height: 40px;
+}
+
+[data-wi-density="compact"] .wi-layout-sider {
+    --wi-layout-sider-width: 240px;
+    --wi-layout-sider-collapsed-width: 44px;
+}
+
+[data-wi-density="spacious"] .wi-layout-header {
+    --wi-layout-header-height: 64px;
+}
+
+[data-wi-density="spacious"] .wi-layout-footer {
+    --wi-layout-footer-height: 56px;
+}
+
+[data-wi-density="spacious"] .wi-layout-sider {
+    --wi-layout-sider-width: 288px;
+    --wi-layout-sider-collapsed-width: 52px;
 }
 
 [data-theme="dark"] {
@@ -152,8 +169,10 @@
     --wi-color-text-muted: #94a3b8;
     --wi-color-border: #334155;
     --wi-color-focus-ring: #93c5fd;
-    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
-    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
+    --wi-focus-shadow: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px
+        color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
     --wi-color-success: #5eead4;
     --wi-color-info: #93c5fd;
     --wi-color-warning: #fbbf24;
@@ -170,10 +189,6 @@
     --wi-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
     --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
     --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
-    --wi-terminal-bg: #020617;
-    --wi-terminal-fg: #e2e8f0;
-    --wi-terminal-prompt: #5eead4;
-    --wi-terminal-border: color-mix(in srgb, #fff 14%, transparent);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -465,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -485,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }
@@ -735,111 +749,180 @@
     line-height: 1;
 }
 
-/* —— Form: CascadeSelect —— */
-.wi-cascadeselect {
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
 }
 
-.wi-cascadeselect__trigger {
-    align-items: center;
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-control);
-    box-sizing: border-box;
-    color: var(--wi-color-text);
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
-    font-size: var(--wi-control-font-medium);
-    gap: var(--wi-space-2);
-    justify-content: space-between;
-    min-height: var(--wi-control-height-medium);
-    min-width: var(--wi-menu-min-width-lg);
-    padding: 0 var(--wi-control-padding-x-medium);
+.wi-icon svg {
+    height: 100%;
     width: 100%;
 }
 
-.wi-cascadeselect--small .wi-cascadeselect__trigger {
-    font-size: var(--wi-control-font-small);
-    min-height: var(--wi-control-height-small);
-    padding: 0 var(--wi-control-padding-x-small);
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
 }
 
-.wi-cascadeselect--large .wi-cascadeselect__trigger {
-    font-size: var(--wi-control-font-large);
-    min-height: var(--wi-control-height-large);
-    padding: 0 var(--wi-control-padding-x-large);
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
 }
 
-.wi-cascadeselect__trigger:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
 }
 
-.wi-cascadeselect--disabled .wi-cascadeselect__trigger {
-    cursor: not-allowed;
-    opacity: var(--wi-opacity-disabled);
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
 }
 
-.wi-cascadeselect__panel {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-md);
-    box-shadow: var(--wi-shadow-md);
-    box-sizing: border-box;
-    display: flex;
-    left: 0;
-    margin-top: var(--wi-space-1);
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: var(--wi-z-popper);
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.wi-cascadeselect__panel--teleported {
-    margin-top: 0;
-    position: fixed;
-    top: auto;
-    z-index: var(--wi-z-dropdown);
+/* —— Form: CascadeSelect —— */
+.wi-cascadeselect {
+    --wi-cascadeselect-min-width: 12rem;
+    --wi-cascadeselect-column-max-height: 16rem;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
 }
 
-.wi-cascadeselect__column {
-    flex: 1 1 0;
-    list-style: none;
-    margin: 0;
-    max-height: 16rem;
-    min-width: 0;
-    overflow: auto;
-    padding: var(--wi-space-1);
+.wi-cascadeselect__control {
+    display: inline-block;
+    max-width: 100%;
+    min-width: var(--wi-cascadeselect-min-width);
 }
 
-.wi-cascadeselect__column + .wi-cascadeselect__column {
-    border-left: 1px solid var(--wi-color-border);
+.wi-select-field--fluid .wi-cascadeselect__control {
+    min-width: 0;
+    width: 100%;
 }
 
-.wi-cascadeselect__option {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    font: inherit;
-    justify-content: space-between;
-    padding: var(--wi-space-2) var(--wi-space-3);
-    text-align: left;
-    width: 100%;
+.wi-cascadeselect__trigger {
+    align-items: center;
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-control);
+    box-sizing: border-box;
+    color: var(--wi-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: var(--wi-control-font-medium);
+    min-height: var(--wi-control-height-medium);
+    padding: 0 var(--wi-control-padding-x-medium);
+    padding-right: var(--wi-control-end-padding);
+    width: 100%;
 }
 
-.wi-cascadeselect__option:hover:not(:disabled),
-.wi-cascadeselect__option--selected {
-    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
+.wi-cascadeselect--small .wi-cascadeselect__trigger {
+    font-size: var(--wi-control-font-small);
+    min-height: var(--wi-control-height-small);
+    padding-left: var(--wi-control-padding-x-small);
+    padding-right: var(--wi-control-end-padding);
 }
 
-.wi-cascadeselect__option:disabled {
-    cursor: not-allowed;
-    opacity: var(--wi-opacity-disabled);
+.wi-cascadeselect--large .wi-cascadeselect__trigger {
+    font-size: var(--wi-control-font-large);
+    min-height: var(--wi-control-height-large);
+    padding-left: var(--wi-control-padding-x-large);
+    padding-right: var(--wi-control-end-padding);
+}
+
+.wi-cascadeselect__trigger:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-cascadeselect__trigger--invalid {
+    border-color: var(--wi-color-danger);
+}
+
+.wi-cascadeselect--disabled .wi-cascadeselect__trigger {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}
+
+.wi-cascadeselect__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wi-cascadeselect__trigger--placeholder .wi-cascadeselect__label {
+    color: var(--wi-color-text-muted);
+}
+
+.wi-cascadeselect__panel {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    box-shadow: var(--wi-shadow-md);
+    box-sizing: border-box;
+    display: flex;
+    left: 0;
+    margin-top: var(--wi-space-1);
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: var(--wi-z-popper);
+}
+
+.wi-cascadeselect__panel--teleported {
+    margin-top: 0;
+    position: fixed;
+    top: auto;
+    z-index: var(--wi-z-dropdown);
+}
+
+.wi-cascadeselect__column {
+    flex: 1 1 0;
+    list-style: none;
+    margin: 0;
+    max-height: var(--wi-cascadeselect-column-max-height);
+    min-width: 0;
+    overflow: auto;
+    padding: var(--wi-space-1);
+}
+
+.wi-cascadeselect__column + .wi-cascadeselect__column {
+    border-left: 1px solid var(--wi-color-border);
+}
+
+.wi-cascadeselect__option {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    justify-content: space-between;
+    padding: var(--wi-space-2) var(--wi-space-3);
+    text-align: left;
+    width: 100%;
+}
+
+.wi-cascadeselect__option:hover:not(:disabled),
+.wi-cascadeselect__option--selected {
+    background: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
+}
+
+.wi-cascadeselect__option:disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
 }

package/dist/cascade-select/style.js

@@ -1,3 +1,4 @@
 import '../theme/styles.css'
 import '../styles/base.css'
+import '../components/Icon/styles.css'
 import '../components/CascadeSelect/styles.css'