@well-insight/ui 0.1.9 → 0.1.11

package/dist/card/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);
 }

package/dist/carousel/index.js

@@ -1,15 +1,16 @@
-import { n as e } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onBeforeUnmount as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, watch as _ } from "vue";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, watch as y } from "vue";
 //#region src/components/Carousel/Carousel.vue?vue&type=script&setup=true&lang.ts
-var v = { class: "wi-carousel" }, y = ["aria-label", "disabled"], b = { class: "wi-carousel__main" }, x = { class: "wi-carousel__viewport" }, S = {
+var b = { class: "wi-carousel" }, x = ["aria-label", "disabled"], S = { class: "wi-carousel__main" }, C = { class: "wi-carousel__viewport" }, w = {
 	key: 0,
 	class: "wi-carousel__indicators"
-}, C = [
+}, T = [
 	"aria-label",
 	"aria-current",
 	"onClick"
-], w = ["aria-label", "disabled"], T = /* @__PURE__ */ s({
+], E = ["aria-label", "disabled"], D = /* @__PURE__ */ l({
 	__name: "Carousel",
 	props: {
 		value: {},
@@ -33,79 +34,85 @@ var v = { class: "wi-carousel" }, y = ["aria-label", "disabled"], b = { class: "
 		}
 	},
 	emits: ["update:page"],
-	setup(s, { emit: T }) {
-		let E = s, D = T, O = f(0), k = e(), A = null, j = n(() => Math.max(0, E.value.length - E.numVisible)), M = n(() => Array.from({ length: j.value + 1 }, (e, t) => t)), N = n(() => {
-			let e = O.value;
-			return E.value.slice(e, e + E.numVisible).map((t, n) => ({
+	setup(l, { emit: D }) {
+		let O = l, k = D, A = m(0), j = t(), M = null, N = r(() => Math.max(0, O.value.length - O.numVisible)), P = r(() => Array.from({ length: N.value + 1 }, (e, t) => t)), F = r(() => {
+			let e = A.value;
+			return O.value.slice(e, e + O.numVisible).map((t, n) => ({
 				item: t,
 				index: e + n
 			}));
 		});
-		function P(e) {
+		function I(e) {
 			let t = e;
-			if (E.circular) {
-				let n = j.value + 1;
+			if (O.circular) {
+				let n = N.value + 1;
 				t = (e % n + n) % n;
-			} else t = Math.min(j.value, Math.max(0, e));
-			O.value = t, D("update:page", t);
-		}
-		function F() {
-			P(O.value - 1);
-		}
-		function I() {
-			P(O.value + 1);
+			} else t = Math.min(N.value, Math.max(0, e));
+			A.value = t, k("update:page", t);
 		}
 		function L() {
-			A !== null && (clearInterval(A), A = null);
+			I(A.value - 1);
 		}
 		function R() {
-			L(), !(!E.autoplay || E.value.length <= E.numVisible) && (A = setInterval(() => {
-				if (!E.circular && O.value >= j.value) {
-					P(0);
+			I(A.value + 1);
+		}
+		function z() {
+			M !== null && (clearInterval(M), M = null);
+		}
+		function B() {
+			z(), !(!O.autoplay || O.value.length <= O.numVisible) && (M = setInterval(() => {
+				if (!O.circular && A.value >= N.value) {
+					I(0);
 					return;
 				}
-				I();
-			}, Math.max(400, E.interval)));
+				R();
+			}, Math.max(400, O.interval)));
 		}
-		return _(() => [
-			E.autoplay,
-			E.interval,
-			E.value.length,
-			E.numVisible
-		], () => R(), { immediate: !0 }), u(L), (e, n) => (d(), i("div", v, [
-			s.showArrows ? (d(), i("button", {
+		return y(() => [
+			O.autoplay,
+			O.interval,
+			O.value.length,
+			O.numVisible
+		], () => B(), { immediate: !0 }), f(z), (t, r) => (p(), a("div", b, [
+			l.showArrows ? (p(), a("button", {
 				key: 0,
 				type: "button",
 				class: "wi-carousel__nav wi-carousel__nav--prev",
-				"aria-label": g(k).prev,
-				disabled: !s.circular && O.value <= 0,
-				onClick: F
-			}, " ‹ ", 8, y)) : r("", !0),
-			a("div", b, [a("div", x, [(d(!0), i(t, null, p(N.value, (t) => (d(), i("div", {
-				key: t.index,
+				"aria-label": v(j).prev,
+				disabled: !l.circular && A.value <= 0,
+				onClick: L
+			}, [c(e, {
+				name: "chevron-left",
+				size: "sm"
+			})], 8, x)) : i("", !0),
+			o("div", S, [o("div", C, [(p(!0), a(n, null, h(F.value, (e) => (p(), a("div", {
+				key: e.index,
 				class: "wi-carousel__item",
-				style: l({ flex: `0 0 ${100 / s.numVisible}%` })
-			}, [m(e.$slots, "item", {
-				item: t.item,
-				index: t.index
-			}, () => [o(h(t.item), 1)])], 4))), 128))]), s.showIndicators && M.value.length > 1 ? (d(), i("div", S, [(d(!0), i(t, null, p(M.value, (e) => (d(), i("button", {
+				style: d({ flex: `0 0 ${100 / l.numVisible}%` })
+			}, [g(t.$slots, "item", {
+				item: e.item,
+				index: e.index
+			}, () => [s(_(e.item), 1)])], 4))), 128))]), l.showIndicators && P.value.length > 1 ? (p(), a("div", w, [(p(!0), a(n, null, h(P.value, (e) => (p(), a("button", {
 				key: e,
 				type: "button",
-				class: c(["wi-carousel__indicator", { "wi-carousel__indicator--active": e === O.value }]),
+				class: u(["wi-carousel__indicator", { "wi-carousel__indicator--active": e === A.value }]),
 				"aria-label": String(e + 1),
-				"aria-current": e === O.value ? "true" : void 0,
-				onClick: (t) => P(e)
-			}, null, 10, C))), 128))])) : r("", !0)]),
-			s.showArrows ? (d(), i("button", {
+				"aria-current": e === A.value ? "true" : void 0,
+				onClick: (t) => I(e)
+			}, null, 10, T))), 128))])) : i("", !0)]),
+			l.showArrows ? (p(), a("button", {
 				key: 1,
 				type: "button",
 				class: "wi-carousel__nav wi-carousel__nav--next",
-				"aria-label": g(k).next,
-				disabled: !s.circular && O.value >= j.value,
-				onClick: I
-			}, " › ", 8, w)) : r("", !0)
+				"aria-label": v(j).next,
+				disabled: !l.circular && A.value >= N.value,
+				onClick: R
+			}, [c(e, {
+				name: "chevron-right",
+				size: "sm"
+			})], 8, E)) : i("", !0)
 		]));
 	}
 });
 //#endregion
-export { T as WiCarousel };
+export { D as WiCarousel };

package/dist/carousel/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,51 +749,91 @@
     line-height: 1;
 }
 
-/* —— Media: Carousel —— */
-.wi-carousel {
-    align-items: center;
-    display: flex;
-    gap: var(--wi-space-2);
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon svg {
+    height: 100%;
     width: 100%;
 }
 
-.wi-carousel__viewport {
-    display: flex;
-    flex: 1;
-    gap: var(--wi-space-2);
-    min-width: 0;
-    overflow: hidden;
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
 }
 
-.wi-carousel__item {
-    box-sizing: border-box;
-    min-width: 0;
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
 }
 
-.wi-carousel__main {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: var(--wi-space-2);
-    min-width: 0;
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
 }
 
-.wi-carousel__indicators {
-    display: flex;
-    gap: var(--wi-space-1);
-    justify-content: center;
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
 }
 
-.wi-carousel__indicator {
-    background: color-mix(in srgb, var(--wi-color-text-muted) 40%, transparent);
-    border: 0;
-    border-radius: var(--wi-radius-full);
-    cursor: pointer;
-    height: 0.45rem;
-    padding: 0;
-    width: 0.45rem;
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-.wi-carousel__indicator--active {
-    background: var(--wi-color-primary);
+/* —— Media: Carousel —— */
+.wi-carousel {
+    --wi-carousel-indicator-size: 0.45rem;
+    align-items: center;
+    display: flex;
+    gap: var(--wi-space-2);
+    width: 100%;
+}
+
+.wi-carousel__viewport {
+    display: flex;
+    flex: 1;
+    gap: var(--wi-space-2);
+    min-width: 0;
+    overflow: hidden;
+}
+
+.wi-carousel__item {
+    box-sizing: border-box;
+    min-width: 0;
+}
+
+.wi-carousel__main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--wi-space-2);
+    min-width: 0;
+}
+
+.wi-carousel__indicators {
+    display: flex;
+    gap: var(--wi-space-1);
+    justify-content: center;
+}
+
+.wi-carousel__indicator {
+    background: color-mix(in srgb, var(--wi-color-text-muted) 40%, transparent);
+    border: 0;
+    border-radius: var(--wi-radius-full);
+    cursor: pointer;
+    height: var(--wi-carousel-indicator-size);
+    padding: 0;
+    width: var(--wi-carousel-indicator-size);
+}
+
+.wi-carousel__indicator--active {
+    background: var(--wi-color-primary);
 }

package/dist/carousel/style.js

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