@mono-lit/helper 0.0.9 → 0.1.0

package/dist/switch-utils-CTZ4id2V.js

@@ -0,0 +1,338 @@
+import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "./decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "./mono-event-CAZf0F_k.js";
+import { t as MonoFormControlCore } from "./form-control-core-CRZPZ1ru.js";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+//#region src/components/switch/switch-core.ts
+/**
+* `MonoSwitchCore` — all render-mode-agnostic logic for `mono-switch`: reactive
+* props (incl. SSR boolean coercion), hybrid aliases, camelCase attribute
+* fallbacks, the `modelValue`↔`checked` sync, class computation, change
+* interactivity (`mno-change`), `focus`/`blur`, AND the shared `render()`
+* skeleton (`<label><input role=switch><track><thumb></track><labelBlock></label>`).
+* The slot-bearing label/description region is an overridable hook
+* (`_renderLabelBlock()`) that defaults to the light build's `[data-mono-slot]`
+* placeholders; the shadow build overrides it with native `<slot>` (mirrors
+* `mono-checkbox`). SSR-safe: no `document`/`window`; `focus`/`blur` query
+* `this.renderRoot`.
+*/
+const MonoSwitchCore = (superClass) => {
+	class MonoSwitchCoreClass extends MonoFormControlCore(superClass) {
+		constructor(...args) {
+			super(...args);
+			this.size = "md";
+			this.color = "primary";
+			this.modelValue = false;
+			this.checked = false;
+			this.disabled = false;
+			this.loading = false;
+			this.label = "";
+			this.sublabel = "";
+			this.value = "";
+			this.name = "";
+			this.cssClass = {};
+			this.cssClassName = "";
+			this._hasLabelSlotState = false;
+			this._hasDescriptionSlotState = false;
+			defineHybridPropAliases(this, [
+				"modelValue",
+				"ariaLabelText",
+				"cssClass"
+			]);
+			defineHybridPropAlias(this, "description", "sublabel");
+			Object.defineProperty(this, "css-class", {
+				get: () => this.cssClass,
+				set: (value) => this._setCssClass(value),
+				configurable: true,
+				enumerable: false
+			});
+			Object.defineProperty(this, "cssclass", {
+				get: () => this.cssClass,
+				set: (value) => this._setCssClass(value),
+				configurable: true,
+				enumerable: false
+			});
+			for (const alias of [
+				"ariaLabel",
+				"aria-label",
+				"arialabel"
+			]) Object.defineProperty(this, alias, {
+				get: () => this.ariaLabelText,
+				set: (value) => {
+					this.ariaLabelText = value == null ? void 0 : String(value);
+				},
+				configurable: true,
+				enumerable: false
+			});
+		}
+		static get observedAttributes() {
+			return [
+				...super.observedAttributes ?? [],
+				"modelvalue",
+				"arialabeltext",
+				"arialabel",
+				"description",
+				"css-class",
+				"cssclass"
+			];
+		}
+		attributeChangedCallback(name, oldValue, newValue) {
+			super.attributeChangedCallback(name, oldValue, newValue);
+			if (oldValue === newValue) return;
+			if (name === "modelvalue") {
+				this.modelValue = this._toBoolean(newValue);
+				return;
+			}
+			if (name === "arialabeltext" || name === "arialabel") {
+				this.ariaLabelText = newValue ?? void 0;
+				return;
+			}
+			if (name === "description") {
+				this.sublabel = newValue ?? "";
+				return;
+			}
+			if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
+		}
+		willUpdate(changed) {
+			for (const key of [
+				"modelValue",
+				"checked",
+				"disabled",
+				"loading"
+			]) if (typeof this[key] === "string") this[key] = this._toBoolean(this[key]);
+			if (changed.has("modelValue") && this.checked !== this.modelValue) this.checked = this.modelValue;
+			if (changed.has("checked") && this.modelValue !== this.checked) this.modelValue = this.checked;
+			super.willUpdate?.(changed);
+		}
+		_toBoolean(value) {
+			if (typeof value === "boolean") return value;
+			if (typeof value === "string") {
+				const normalized = value.toLowerCase().trim();
+				return normalized === "" || normalized === "true";
+			}
+			return Boolean(value);
+		}
+		_setCssClass(value) {
+			if (value == null) {
+				this.cssClass = {};
+				this.cssClassName = "";
+				return;
+			}
+			if (typeof value === "object") {
+				this.cssClass = value;
+				return;
+			}
+			if (typeof value === "string") {
+				const trimmed = value.trim();
+				if (!trimmed) {
+					this.cssClass = {};
+					this.cssClassName = "";
+					return;
+				}
+				if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
+					this.cssClass = JSON.parse(trimmed);
+					return;
+				} catch {}
+				this.cssClassName = trimmed;
+			}
+		}
+		_cls(base, key) {
+			const extra = this.cssClass?.[key];
+			return extra ? `${base} ${extra}` : base;
+		}
+		get _wrapperClasses() {
+			return [
+				"mono-switch",
+				this.size,
+				this.color,
+				this.disabled ? "disabled" : "",
+				this.loading ? "loading" : "",
+				this.checked ? "mono-switch-checked" : "",
+				this.cssClassName,
+				this.cssClass?.root
+			].filter(Boolean).join(" ");
+		}
+		get _inputClasses() {
+			return this._cls("mono-switch-input", "input");
+		}
+		get _trackClasses() {
+			return [this._cls("mono-switch-track", "track"), this.size].filter(Boolean).join(" ");
+		}
+		get _thumbClasses() {
+			return [this._cls("mono-switch-thumb", "thumb"), this.size].filter(Boolean).join(" ");
+		}
+		_hasLabelContent() {
+			return Boolean(this.label) || this._hasLabelSlotState;
+		}
+		_hasDescriptionContent() {
+			return Boolean(this.sublabel) || this._hasDescriptionSlotState;
+		}
+		_createModelDetail(args) {
+			return {
+				modelValue: args.modelValue,
+				currentValue: args.modelValue,
+				oldValue: args.oldValue,
+				checked: args.modelValue,
+				value: this.value,
+				name: this.name,
+				sourceEvent: args.sourceEvent
+			};
+		}
+		_emitChange(detail) {
+			dispatchMonoEvent(this, "change", detail);
+		}
+		_handleChange(event) {
+			if (this.disabled || this.loading) return;
+			const input = event.currentTarget;
+			const oldValue = this.modelValue;
+			const nextValue = input.checked;
+			this.checked = nextValue;
+			this.modelValue = nextValue;
+			const detail = this._createModelDetail({
+				modelValue: nextValue,
+				oldValue,
+				sourceEvent: event
+			});
+			this._emitChange(detail);
+		}
+		/** Light-DOM label block (data-mono-slot). Shadow build overrides with `<slot>`. */
+		_renderLabelBlock() {
+			if (!this._hasLabelContent() && !this._hasDescriptionContent()) return nothing;
+			return html`
+        <span class=${this._cls("mono-switch-label", "label")} mono-label>
+          ${this._hasLabelContent() ? html`
+                <span class=${this._cls("mono-switch-label-text", "labelText")} mono-label-text>
+                  ${this._hasLabelSlotState ? html`<span data-mono-slot="label"></span>` : this.label}
+                </span>
+              ` : nothing}
+
+          ${this._hasDescriptionContent() ? html`
+                <span class=${this._cls("mono-switch-label-description", "description")} mono-description>
+                  ${this._hasDescriptionSlotState ? html`<span data-mono-slot="description"></span>` : this.sublabel}
+                </span>
+              ` : nothing}
+        </span>
+      `;
+		}
+		render() {
+			const ariaLabel = this.ariaLabelText || this.label || (this._hasLabelSlotState ? "Switch" : void 0);
+			return html`
+        <label
+          class=${this._wrapperClasses}
+          mono-switch
+          mono-size=${this.size === "md" ? nothing : this.size}
+          mono-color=${this.color === "primary" ? nothing : this.color}
+          ?mono-checked=${this.checked}
+          ?mono-disabled=${this.disabled}
+          ?mono-loading=${this.loading}
+        >
+          <input
+            class=${this._inputClasses}
+            mono-input
+            type="checkbox"
+            role="switch"
+            .checked=${this.checked}
+            .value=${this.value}
+            name=${ifDefined(this.name || void 0)}
+            ?disabled=${this.disabled || this.loading}
+            aria-checked=${String(this.checked)}
+            aria-label=${ifDefined(ariaLabel)}
+            @change=${this._handleChange}
+          />
+
+          <span class=${this._trackClasses} mono-track aria-hidden="true">
+            <span class=${this._thumbClasses} mono-thumb></span>
+          </span>
+
+          ${this._renderLabelBlock()}
+        </label>
+      `;
+		}
+		focus(options) {
+			this.renderRoot.querySelector(".mono-switch-input")?.focus(options);
+		}
+		blur() {
+			this.renderRoot.querySelector(".mono-switch-input")?.blur();
+		}
+	}
+	__decorate([property({ type: String })], MonoSwitchCoreClass.prototype, "size", void 0);
+	__decorate([property({ type: String })], MonoSwitchCoreClass.prototype, "color", void 0);
+	__decorate([property({
+		attribute: "model-value",
+		reflect: true,
+		converter: booleanStringConverter
+	})], MonoSwitchCoreClass.prototype, "modelValue", void 0);
+	__decorate([property({
+		reflect: true,
+		converter: booleanStringConverter
+	})], MonoSwitchCoreClass.prototype, "checked", void 0);
+	__decorate([property({
+		reflect: true,
+		converter: booleanStringConverter
+	})], MonoSwitchCoreClass.prototype, "disabled", void 0);
+	__decorate([property({
+		reflect: true,
+		converter: booleanStringConverter
+	})], MonoSwitchCoreClass.prototype, "loading", void 0);
+	__decorate([property({ type: String })], MonoSwitchCoreClass.prototype, "label", void 0);
+	__decorate([property({ type: String })], MonoSwitchCoreClass.prototype, "sublabel", void 0);
+	__decorate([property({ type: String })], MonoSwitchCoreClass.prototype, "value", void 0);
+	__decorate([property({ type: String })], MonoSwitchCoreClass.prototype, "name", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "aria-label"
+	})], MonoSwitchCoreClass.prototype, "ariaLabelText", void 0);
+	__decorate([property({ attribute: false })], MonoSwitchCoreClass.prototype, "cssClass", void 0);
+	__decorate([property({ attribute: false })], MonoSwitchCoreClass.prototype, "cssClassName", void 0);
+	__decorate([state()], MonoSwitchCoreClass.prototype, "_hasLabelSlotState", void 0);
+	__decorate([state()], MonoSwitchCoreClass.prototype, "_hasDescriptionSlotState", void 0);
+	return MonoSwitchCoreClass;
+};
+
+//#endregion
+//#region src/components/switch/switch-utils.ts
+/**
+* Validate switch props
+*/
+function validateSwitchProps(props) {
+	const validSizes = [
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl",
+		"xxl"
+	];
+	const validColors = [
+		"primary",
+		"secondary",
+		"success",
+		"danger",
+		"warning",
+		"info",
+		"teal",
+		"purple",
+		"neutral",
+		"dark"
+	];
+	if (props.size && !validSizes.includes(props.size)) return false;
+	if (props.color && !validColors.includes(props.color)) return false;
+	return true;
+}
+/**
+* Generate ARIA attributes for accessibility
+*/
+function generateSwitchAttributes(disabled, loading, checked, label) {
+	return {
+		"aria-disabled": disabled || loading ? "true" : void 0,
+		"aria-busy": loading ? "true" : void 0,
+		"aria-checked": String(checked),
+		"role": "switch",
+		"aria-label": label || void 0
+	};
+}
+
+//#endregion
+export { validateSwitchProps as n, MonoSwitchCore as r, generateSwitchAttributes as t };

package/dist/tabs-core-r5-B8k_N.js

@@ -0,0 +1,317 @@
+import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "./decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "./mono-event-CAZf0F_k.js";
+import { html, nothing } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { property } from "lit/decorators.js";
+
+//#region src/components/tabs/tabs-core.ts
+/**
+* Coerce any `items` input to a `TabItem[]`. Accepts an array (pass-through), a
+* JSON string (`items='[...]'` attribute, OR a string assigned to the PROPERTY —
+* which is what nuxt-ssr-lit does forwarding a Vue `:items="<json>"` binding to
+* the SSR renderer), or anything else (→ `[]`).
+*/
+function coerceTabItems(value) {
+	if (Array.isArray(value)) return value;
+	if (typeof value === "string") {
+		if (!value) return [];
+		try {
+			const parsed = JSON.parse(value);
+			return Array.isArray(parsed) ? parsed : [];
+		} catch {
+			return [];
+		}
+	}
+	return [];
+}
+/**
+* `MonoTabsCore` — all render-mode-agnostic logic for `mono-tabs`: reactive props
+* (incl. the SSR `items` string→array coercion and `disabled` string→bool
+* coercion), hybrid aliases, camelCase attribute fallbacks, the `modelValue`↔
+* `value` sync, class computation, tab selection + `mno-click` events, keyboard
+* navigation, and the `role="tablist"` `render()`. Per-tab icons render through a
+* `_renderIcon()` hook: the light build uses `data-mono-slot` placeholders, the
+* shadow build native `<slot name="icon-<id>">` (mirrors `mono-breadcrumb`).
+*
+* SSR-safe: no `document`/`window` access; `focus`/`blur` query `this.renderRoot`
+* (the host in light, the shadow root in shadow) and only matter client-side.
+*/
+const MonoTabsCore = (superClass) => {
+	class MonoTabsCoreClass extends superClass {
+		constructor(...args) {
+			super(...args);
+			this.items = [];
+			this.modelValue = "";
+			this.value = "";
+			this.size = "md";
+			this.color = "primary";
+			this.variant = "underline";
+			this.orientation = "horizontal";
+			this.disabled = false;
+			this.cssClass = {};
+			this.cssClassName = "";
+			this._rootEl = null;
+			this.bindRoot = (el) => {
+				this._rootEl = el ?? null;
+				this._applyRootAttrs(this._rootEl);
+			};
+			defineHybridPropAliases(this, ["modelValue", "cssClass"]);
+			Object.defineProperty(this, "css-class", {
+				get: () => this.cssClass,
+				set: (value) => this._setCssClass(value),
+				configurable: true,
+				enumerable: false
+			});
+			Object.defineProperty(this, "cssclass", {
+				get: () => this.cssClass,
+				set: (value) => this._setCssClass(value),
+				configurable: true,
+				enumerable: false
+			});
+		}
+		static get observedAttributes() {
+			return [
+				...super.observedAttributes ?? [],
+				"modelvalue",
+				"css-class",
+				"cssclass"
+			];
+		}
+		attributeChangedCallback(name, oldValue, newValue) {
+			super.attributeChangedCallback(name, oldValue, newValue);
+			if (oldValue === newValue) return;
+			if (name === "modelvalue") {
+				this.modelValue = newValue ?? "";
+				return;
+			}
+			if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
+		}
+		willUpdate(changed) {
+			if (typeof this.items === "string") this.items = coerceTabItems(this.items);
+			if (typeof this.disabled === "string") {
+				const normalized = this.disabled.toLowerCase().trim();
+				this.disabled = normalized === "" || normalized === "true";
+			}
+			if (changed.has("modelValue") && this.value !== this.modelValue) this.value = this.modelValue;
+			if (changed.has("value") && this.modelValue !== this.value) this.modelValue = this.value;
+			super.willUpdate?.(changed);
+		}
+		_setCssClass(value) {
+			if (value == null) {
+				this.cssClass = {};
+				this.cssClassName = "";
+				return;
+			}
+			if (typeof value === "object") {
+				this.cssClass = value;
+				return;
+			}
+			if (typeof value === "string") {
+				const trimmed = value.trim();
+				if (!trimmed) {
+					this.cssClass = {};
+					this.cssClassName = "";
+					return;
+				}
+				if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
+					this.cssClass = JSON.parse(trimmed);
+					return;
+				} catch {}
+				this.cssClassName = trimmed;
+			}
+		}
+		_cls(base, key) {
+			const extra = this.cssClass?.[key];
+			return extra ? `${base} ${extra}` : base;
+		}
+		/**
+		* The prop mirrors, each omitted at its default so `:not([mono-size])` means
+		* "md" for hand-written markup exactly as it does for the element.
+		*
+		* `aria-orientation` is ALWAYS written, and is not a `mono-` attribute:
+		* upstream styles the vertical strip from the ARIA state, and a tablist is
+		* supposed to carry it either way.
+		*/
+		_computeRootAttrs() {
+			return {
+				"mono-size": this.size === "md" ? null : this.size,
+				"mono-color": this.color === "primary" ? null : this.color,
+				"mono-variant": this.variant === "underline" ? null : this.variant,
+				"mono-disabled": this.disabled ? "" : null,
+				"aria-orientation": this.orientation === "vertical" ? "vertical" : "horizontal"
+			};
+		}
+		_applyRootAttrs(root) {
+			if (!root) return;
+			if (!root.hasAttribute("mono-tabs")) root.setAttribute("mono-tabs", "");
+			for (const [name, value] of Object.entries(this._computeRootAttrs())) if (value === null) root.removeAttribute(name);
+			else if (root.getAttribute(name) !== value) root.setAttribute(name, value);
+		}
+		updated(changed) {
+			super.updated?.(changed);
+			this._applyRootAttrs(this._rootEl);
+		}
+		get _wrapperClasses() {
+			return [
+				"mono-tabs",
+				this.size,
+				this.color,
+				`variant-${this.variant}`,
+				this.disabled ? "disabled" : "",
+				this.cssClassName,
+				this.cssClass?.root
+			].filter(Boolean).join(" ");
+		}
+		_isActive(item) {
+			return item.id === this.modelValue;
+		}
+		_tabClasses(item) {
+			const active = this._isActive(item);
+			return [
+				this._cls("mono-tabs-tab", "tab"),
+				active ? "on" : "",
+				active && this.cssClass?.tabActive ? this.cssClass.tabActive : "",
+				item.disabled ? "disabled" : "",
+				item.disabled && this.cssClass?.tabDisabled ? this.cssClass.tabDisabled : ""
+			].filter(Boolean).join(" ");
+		}
+		_emitClick(detail) {
+			dispatchMonoEvent(this, "click", detail, { alias: "change" });
+		}
+		_selectItem(item, sourceEvent) {
+			if (this.disabled || item.disabled) return;
+			if (this.modelValue === item.id) return;
+			const oldValue = this.modelValue;
+			this.modelValue = item.id;
+			this.value = item.id;
+			this._emitClick({
+				modelValue: item.id,
+				currentValue: item.id,
+				oldValue,
+				value: item.id,
+				item,
+				sourceEvent
+			});
+		}
+		_handleClick(item, event) {
+			this._selectItem(item, event);
+		}
+		select(id) {
+			const item = this.items.find((entry) => entry.id === id);
+			if (item) this._selectItem(item);
+		}
+		next() {
+			this._step(1);
+		}
+		previous() {
+			this._step(-1);
+		}
+		_step(delta) {
+			if (this.disabled || !this.items.length) return;
+			const enabled = this.items.filter((item) => !item.disabled);
+			if (!enabled.length) return;
+			const currentIndex = enabled.findIndex((item) => item.id === this.modelValue);
+			const nextIndex = currentIndex < 0 ? 0 : (currentIndex + delta + enabled.length) % enabled.length;
+			this._selectItem(enabled[nextIndex]);
+		}
+		focus() {
+			const root = this.renderRoot;
+			const tab = root.querySelector(".mono-tabs-tab.on");
+			const fallback = root.querySelector(".mono-tabs-tab");
+			(tab ?? fallback)?.focus();
+		}
+		blur() {
+			this.renderRoot.querySelector(".mono-tabs-tab:focus")?.blur();
+		}
+		/** The items to render for THIS pass. Shadow overrides for the hydration gate. */
+		_itemsForRender() {
+			return this.items;
+		}
+		/** Whether per-tab icons render through a native `<slot>` (shadow) vs `data-mono-slot` (light). */
+		_useIconSlots() {
+			return false;
+		}
+		/** Whether tab `id` has a slotted icon. Light reads its capture map; shadow its scanned set. */
+		_iconHasContent(_id) {
+			return false;
+		}
+		_renderIcon(item) {
+			if (this._useIconSlots()) return html`
+          <span
+            class=${this._cls("mono-tabs-tab-icon", "icon")}
+            mono-icon
+            aria-hidden="true"
+            ?mono-empty=${!this._iconHasContent(item.id)}
+          >
+            <slot name=${`icon-${item.id}`}></slot>
+          </span>
+        `;
+			if (!this._iconHasContent(item.id)) return nothing;
+			return html`
+        <span class=${this._cls("mono-tabs-tab-icon", "icon")} mono-icon aria-hidden="true">
+          <span data-mono-slot=${`icon-${item.id}`}></span>
+        </span>
+      `;
+		}
+		_renderBadge(item) {
+			if (item.badge === void 0 || item.badge === null || item.badge === "") return nothing;
+			return html`
+        <span class=${this._cls("mono-tabs-tab-badge", "badge")} mono-badge>
+          ${item.badge}
+        </span>
+      `;
+		}
+		render() {
+			return html`
+        <div class=${this._wrapperClasses} mono-tabs role="tablist" ${ref(this.bindRoot)}>
+          ${this._itemsForRender().map((item) => html`
+              <button
+                type="button"
+                class=${this._tabClasses(item)}
+                mono-tab
+                role="tab"
+                aria-selected=${this._isActive(item) ? "true" : "false"}
+                ?disabled=${this.disabled || item.disabled}
+                data-tab-id=${item.id}
+                @click=${(event) => this._handleClick(item, event)}
+              >
+                ${this._renderIcon(item)}
+                <span class=${this._cls("mono-tabs-tab-label", "label")} mono-label>
+                  ${item.label}
+                </span>
+                ${this._renderBadge(item)}
+              </button>
+            `)}
+        </div>
+      `;
+		}
+	}
+	__decorate([property({
+		attribute: "items",
+		converter: {
+			fromAttribute: (value) => coerceTabItems(value),
+			toAttribute: () => null
+		},
+		hasChanged: arrayHasChanged
+	})], MonoTabsCoreClass.prototype, "items", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "model-value",
+		reflect: true
+	})], MonoTabsCoreClass.prototype, "modelValue", void 0);
+	__decorate([property({ type: String })], MonoTabsCoreClass.prototype, "value", void 0);
+	__decorate([property({ type: String })], MonoTabsCoreClass.prototype, "size", void 0);
+	__decorate([property({ type: String })], MonoTabsCoreClass.prototype, "color", void 0);
+	__decorate([property({ type: String })], MonoTabsCoreClass.prototype, "variant", void 0);
+	__decorate([property({ type: String })], MonoTabsCoreClass.prototype, "orientation", void 0);
+	__decorate([property({
+		reflect: true,
+		converter: booleanStringConverter
+	})], MonoTabsCoreClass.prototype, "disabled", void 0);
+	__decorate([property({ attribute: false })], MonoTabsCoreClass.prototype, "cssClass", void 0);
+	__decorate([property({ attribute: false })], MonoTabsCoreClass.prototype, "cssClassName", void 0);
+	return MonoTabsCoreClass;
+};
+
+//#endregion
+export { coerceTabItems as n, MonoTabsCore as t };