@verbb/plugin-kit-web 2.0.0

package/dist-loader/components/tiptap/tiptap-input.js

@@ -0,0 +1,244 @@
+import { c as r, l as n, m as i, p as b, s as e, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "../../chunks/pk-base-BlxAYXJD.js";
+import { t as MirrorValidator } from "../../chunks/mirror-validator-C5XrXPaq.js";
+import { k as Editor } from "../../chunks/tiptap-Db7MTUH1.js";
+import { C as contentToValue, E as valueToContent, T as flattenVariableOptions, i as createVariableTagDomNodeView, j as createTiptapInputExtensions, n as tiptapInputProseMirrorStyles, w as dedupeVariableOptions } from "../../chunks/tiptap.styles-DAH_90Fi.js";
+//#region src/components/tiptap/pk-tiptap-input.styles.ts
+var pkTiptapInputStyles = i`
+    @layer pk-component {
+        :host {
+            display: block;
+            width: 100%;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: 1.4;
+        }
+
+        /* Same chrome as pk-input .input — border/radius live on the shell. */
+        .shell {
+            box-sizing: border-box;
+            border: var(--pk-input-border);
+            border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));
+            background: var(--pk-input-bg);
+            overflow: hidden;
+        }
+
+        :host([invalid]) .shell,
+        :host(:state(user-invalid)) .shell {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        /* Editable-table cells (v1): flush TipTap shell — chips sit in the row, not a boxed field. */
+        :host([fit-cell]),
+        :host([data-editable-table-input]) {
+            display: block;
+            height: 100%;
+            min-height: 100%;
+            box-sizing: border-box;
+        }
+
+        :host([fit-cell]) .shell,
+        :host([data-editable-table-input]) .shell {
+            border: none;
+            border-radius: 0;
+            background: transparent;
+            box-shadow: none;
+            height: 100%;
+            min-height: 100%;
+        }
+
+        /* Read-only display (lists, picker cards): v1 skipped input chrome when readOnly. */
+        :host([readonly]) .shell {
+            border: none;
+            border-radius: 0;
+            background: transparent;
+            box-shadow: none;
+            overflow: visible;
+        }
+
+        :host([fit-cell][invalid]) .shell,
+        :host([fit-cell]:state(user-invalid)) .shell,
+        :host([data-editable-table-input][invalid]) .shell,
+        :host([data-editable-table-input]:state(user-invalid)) .shell {
+            border: none;
+            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);
+        }
+
+        .editor-mount {
+            display: block;
+            min-width: 0;
+        }
+
+        .mirror-input {
+            display: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/tiptap/pk-tiptap-input.ts
+var PkTiptapInput = class PkTiptapInput extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["blur", "input"];
+		this.editor = null;
+		this.lastEmitted = null;
+		this.suppressUpdateEmission = false;
+		this._value = null;
+		this.variableCategories = {};
+		this.variableTagConfigure = null;
+		this.readonly = false;
+		this.invalid = false;
+		this.fitCell = false;
+		this.defaultValue = "";
+	}
+	static {
+		this.styles = [
+			formControlStyles,
+			pkTiptapInputStyles,
+			tiptapInputProseMirrorStyles
+		];
+	}
+	static get validators() {
+		return [...super.validators, MirrorValidator()];
+	}
+	get value() {
+		if (this.valueHasChanged) return this._value ?? "";
+		return this._value ?? this.defaultValue ?? "";
+	}
+	set value(val) {
+		const next = val ?? "";
+		if (this._value === next) return;
+		this.valueHasChanged = true;
+		this._value = next;
+	}
+	get editorInstance() {
+		return this.editor;
+	}
+	resolveVariableLists() {
+		const topLevel = dedupeVariableOptions(Object.values(this.variableCategories ?? {}).flatMap((items) => {
+			return Array.isArray(items) ? items : [];
+		}));
+		return {
+			topLevel,
+			all: flattenVariableOptions(topLevel)
+		};
+	}
+	resolveEditorContent() {
+		const { topLevel, all } = this.resolveVariableLists();
+		return valueToContent(this.value, topLevel, all);
+	}
+	syncFormValue() {
+		this.setValue(this.value || "");
+		if (this.input) this.input.value = this.value || "";
+	}
+	resetToDefaultValue() {
+		this.valueHasChanged = false;
+		this._value = null;
+		this.syncEditorContent(true);
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") {
+			this.value = state;
+			this.syncEditorContent(true);
+		}
+	}
+	disconnectedCallback() {
+		this.editor?.destroy();
+		this.editor = null;
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") && !changed.has("defaultValue")) this.syncEditorContent();
+		if (changed.has("defaultValue") && !this.valueHasChanged) this.syncEditorContent();
+		if (changed.has("variableCategories") && this.editor) this.syncEditorContent(true);
+		if (changed.has("disabled") || changed.has("readonly")) this.editor?.setEditable(!this.disabled && !this.readonly);
+		super.updated(changed);
+	}
+	firstUpdated() {
+		this.mountEditor();
+		this.syncFormValue();
+	}
+	mountEditor() {
+		const content = this.resolveEditorContent();
+		this.editor = new Editor({
+			element: this.editorMount,
+			extensions: createTiptapInputExtensions({ variableTagNodeView: createVariableTagDomNodeView() }),
+			content,
+			editable: !this.disabled && !this.readonly,
+			onUpdate: ({ editor }) => {
+				const nextValue = contentToValue(editor.getJSON().content);
+				this.lastEmitted = nextValue;
+				if (this.suppressUpdateEmission) return;
+				this.value = nextValue;
+				if (this.input) this.input.value = nextValue;
+				this.syncFormValue();
+				this.emitValueChange(nextValue);
+			}
+		});
+	}
+	syncEditorContent(force = false) {
+		if (!this.editor) return;
+		if (!force && !this.readonly && this.editor.isFocused) return;
+		const nextContent = this.resolveEditorContent();
+		const currentContent = this.editor.getJSON();
+		if (JSON.stringify(nextContent) === JSON.stringify(currentContent)) return;
+		if (!force && this.lastEmitted === this.value) return;
+		this.suppressUpdateEmission = true;
+		try {
+			this.editor.commands.setContent(nextContent ?? {
+				type: "doc",
+				content: []
+			});
+		} finally {
+			this.suppressUpdateEmission = false;
+		}
+	}
+	emitValueChange(value) {
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return b`
+            <div class="shell" part="shell">
+                <div class="editor-mount" part="editor"></div>
+                <input class="mirror-input" type="text" .value=${this.value} readonly tabindex="-1" aria-hidden="true" />
+            </div>
+        `;
+	}
+};
+__decorate([e(".editor-mount")], PkTiptapInput.prototype, "editorMount", void 0);
+__decorate([e(".mirror-input")], PkTiptapInput.prototype, "input", void 0);
+__decorate([n({ attribute: false })], PkTiptapInput.prototype, "variableCategories", void 0);
+__decorate([n({ attribute: false })], PkTiptapInput.prototype, "variableTagConfigure", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkTiptapInput.prototype, "readonly", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkTiptapInput.prototype, "invalid", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true,
+	attribute: "fit-cell"
+})], PkTiptapInput.prototype, "fitCell", void 0);
+__decorate([r()], PkTiptapInput.prototype, "value", null);
+__decorate([n({
+	attribute: "value",
+	reflect: true
+})], PkTiptapInput.prototype, "defaultValue", void 0);
+PkTiptapInput = __decorate([t("pk-tiptap-input")], PkTiptapInput);
+//#endregion
+export { PkTiptapInput };

package/dist-loader/components/toggle/toggle.js

@@ -0,0 +1,253 @@
+import { f as A, l as n, m as i, p as b, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+import { i as buttonGroupIndentStyles, n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "../../chunks/button-group-item.styles-Dwakbyx5.js";
+//#region src/components/toggle/pk-toggle.styles.ts
+var pkToggleStyles = [
+	buttonGroupCornerRoleStyles(),
+	buttonGroupCornerRadiusStyles(".button"),
+	buttonGroupIndentStyles(),
+	buttonGroupBorderJoinStyles(".button"),
+	i`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.25rem;
+            min-width: 2rem;
+            height: 2rem;
+            margin: 0;
+            padding: 0 0.5rem;
+            border: 0;
+            border-radius: var(--pk-radius-lg);
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            line-height: 1.4;
+            white-space: nowrap;
+            cursor: pointer;
+            user-select: none;
+            appearance: none;
+            transition: background-color 0.12s ease, box-shadow 0.12s ease;
+        }
+
+        .button:focus {
+            outline: none;
+        }
+
+        .button:focus-visible {
+            box-shadow: var(--pk-shadow-focus);
+        }
+
+        .button[aria-pressed='true'],
+        .button[data-state='on'] {
+            background: var(--pk-color-slate-250);
+        }
+
+        .button:hover:not(:disabled) {
+            background: var(--pk-color-slate-250);
+        }
+
+        .button:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        :host([variant='outline']) .button {
+            border: 1px solid var(--pk-color-slate-300);
+            background: transparent;
+            color: var(--pk-color-gray-700);
+        }
+
+        :host([variant='outline']) .button:hover:not(:disabled),
+        :host([variant='outline']) .button[aria-pressed='true'],
+        :host([variant='outline']) .button[data-state='on'],
+        :host([variant='outline'][pressed]) .button {
+            background: var(--pk-color-slate-250);
+        }
+
+        :host([size='sm']) .button {
+            min-width: 1.75rem;
+            height: 1.75rem;
+            padding-inline: 0.375rem;
+            font-size: 0.8rem;
+            border-radius: min(var(--pk-radius-md), 12px);
+        }
+
+        :host([size='lg']) .button {
+            min-width: 2.25rem;
+            height: 2.25rem;
+            padding-inline: 0.625rem;
+        }
+
+        .button ::slotted(svg) {
+            width: 1rem;
+            height: 1rem;
+            flex-shrink: 0;
+            pointer-events: none;
+        }
+
+        :host([data-pk-group-join]) .button:focus-visible {
+            z-index: 1;
+            position: relative;
+        }
+
+        :host([data-pk-group-join][size='sm'][data-pk-group-item-first][data-pk-group-orientation='horizontal']) .button {
+            border-top-left-radius: min(var(--pk-radius-md), 12px);
+            border-bottom-left-radius: min(var(--pk-radius-md), 12px);
+        }
+
+        :host([data-pk-group-join][size='sm'][data-pk-group-item-last][data-pk-group-orientation='horizontal']) .button {
+            border-top-right-radius: min(var(--pk-radius-md), 12px);
+            border-bottom-right-radius: min(var(--pk-radius-md), 12px);
+        }
+
+        :host([data-pk-group-join][size='sm'][data-pk-group-item-first][data-pk-group-orientation='vertical']) .button {
+            border-top-left-radius: min(var(--pk-radius-md), 12px);
+            border-top-right-radius: min(var(--pk-radius-md), 12px);
+        }
+
+        :host([data-pk-group-join][size='sm'][data-pk-group-item-last][data-pk-group-orientation='vertical']) .button {
+            border-bottom-left-radius: min(var(--pk-radius-md), 12px);
+            border-bottom-right-radius: min(var(--pk-radius-md), 12px);
+        }
+
+        :host([data-tg-orientation='vertical']) {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        :host([data-tg-orientation='vertical']) .button {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        :host([data-pk-group-orientation='vertical']) {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        :host([data-pk-group-orientation='vertical']) .button {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        :host-context(pk-button-group[exclusive]):host([pressed]) .button:focus-visible {
+            box-shadow: var(--pk-shadow-focus-outset, var(--pk-shadow-focus));
+        }
+
+        :host-context(pk-button-group[exclusive]):host([variant='outline']:not([pressed])) .button {
+            background: var(--pk-action-fill);
+            border-color: transparent;
+        }
+
+        :host-context(pk-button-group[exclusive]):host([variant='outline'][pressed]) .button {
+            border-color: transparent;
+        }
+
+        :host-context(pk-button-group[exclusive]):host([variant='outline']) .button {
+            border-radius: 0;
+        }
+
+        :host-context(pk-button-group[orientation='vertical']) {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        :host-context(pk-button-group[orientation='vertical']) .button {
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+    `,
+	i`
+        :host([data-pk-group-join][data-pk-group-item-first][data-pk-group-orientation='horizontal'][variant='outline']) .button {
+            border-left: 1px solid var(--pk-color-slate-300);
+        }
+
+        :host([data-pk-group-join][data-pk-group-item-first][data-pk-group-orientation='vertical'][variant='outline']) .button {
+            border-top: 1px solid var(--pk-color-slate-300);
+        }
+    `
+];
+//#endregion
+//#region src/components/toggle/pk-toggle.ts
+var PkToggle = class PkToggle extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.pressed = false;
+		this.disabled = false;
+		this.variant = "default";
+		this.size = "default";
+		this.value = "";
+		this.ariaLabel = null;
+	}
+	static {
+		this.shadowRootOptions = {
+			mode: "open",
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = pkToggleStyles;
+	}
+	handleClick() {
+		if (this.disabled || this.closest("pk-toggle-group")) return;
+		this.pressed = !this.pressed;
+		this.dispatchEvent(new CustomEvent("pk-pressed-change", {
+			detail: { pressed: this.pressed },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return b`
+            <button
+                part="base"
+                class="button"
+                type="button"
+                ?disabled=${this.disabled}
+                aria-pressed=${this.pressed ? "true" : "false"}
+                aria-label=${this.ariaLabel ?? A}
+                data-state=${this.pressed ? "on" : "off"}
+                @click=${this.handleClick}
+            >
+                <slot></slot>
+            </button>
+        `;
+	}
+};
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkToggle.prototype, "pressed", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkToggle.prototype, "disabled", void 0);
+__decorate([n({ reflect: true })], PkToggle.prototype, "variant", void 0);
+__decorate([n({ reflect: true })], PkToggle.prototype, "size", void 0);
+__decorate([n({ attribute: "data-value" })], PkToggle.prototype, "value", void 0);
+__decorate([n({ attribute: "aria-label" })], PkToggle.prototype, "ariaLabel", void 0);
+PkToggle = __decorate([t("pk-toggle")], PkToggle);
+//#endregion
+export { PkToggle };

package/dist-loader/components/toggle-group/toggle-group.js

@@ -0,0 +1,172 @@
+import { c as r, l as n, m as i, p as b, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+//#region src/components/toggle-group/pk-toggle-group.styles.ts
+var pkToggleGroupStyles = i`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .group {
+            display: inline-flex;
+            width: fit-content;
+            align-items: center;
+            border-radius: var(--pk-radius-lg);
+            gap: calc(var(--pk-toggle-group-spacing, 0) * 0.25rem);
+        }
+
+        :host([size='sm']) .group {
+            border-radius: min(var(--pk-radius-md), 10px);
+        }
+
+        :host([orientation='vertical']) .group {
+            flex-direction: column;
+            align-items: stretch;
+        }
+    }
+`;
+//#endregion
+//#region src/components/toggle-group/pk-toggle-group.ts
+var GROUP_JOIN_ATTR = "data-pk-group-join";
+var GROUP_ITEM_FIRST = "data-pk-group-item-first";
+var GROUP_ITEM_LAST = "data-pk-group-item-last";
+var GROUP_ORIENTATION_ATTR = "data-pk-group-orientation";
+var TOGGLE_ORIENTATION_ATTR = "data-tg-orientation";
+var PkToggleGroup = class PkToggleGroup extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "horizontal";
+		this.variant = "default";
+		this.size = "default";
+		this.spacing = 0;
+		this.joined = true;
+		this.multiple = false;
+		this.value = [];
+		this.items = [];
+		this.syncItems = () => {
+			const slot = this.shadowRoot?.querySelector("slot");
+			if (!slot) return;
+			this.items = slot.assignedElements({ flatten: true });
+			this.applyGroupProps();
+			this.syncGroupLayout();
+			this.applySelection();
+		};
+		this.handleClick = (event) => {
+			const target = event.target.closest("[data-value]");
+			if (!target || !this.items.includes(target) || this.isItemDisabled(target)) return;
+			event.preventDefault();
+			const itemValue = this.getItemValue(target);
+			if (!itemValue) return;
+			if (this.multiple) this.value = this.value.includes(itemValue) ? this.value.filter((v) => v !== itemValue) : [...this.value, itemValue];
+			else this.value = this.value.includes(itemValue) ? [] : [itemValue];
+			this.applySelection();
+			this.dispatchEvent(new CustomEvent("pk-value-change", {
+				detail: { value: [...this.value] },
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = pkToggleGroupStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncJoinedFromSpacing();
+		this.addEventListener("click", this.handleClick);
+		this.addEventListener("slotchange", this.syncItems);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleClick);
+		this.removeEventListener("slotchange", this.syncItems);
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("spacing")) this.syncJoinedFromSpacing();
+		if (changed.has("joined") && !changed.has("spacing")) this.spacing = this.joined ? 0 : 2;
+		if (changed.has("variant") || changed.has("size") || changed.has("spacing") || changed.has("orientation")) this.syncGroupLayout();
+		if (changed.has("value") && this.items.length) this.applySelection();
+	}
+	clearLayoutAttrs(item) {
+		item.removeAttribute(GROUP_JOIN_ATTR);
+		item.removeAttribute(GROUP_ITEM_FIRST);
+		item.removeAttribute(GROUP_ITEM_LAST);
+		item.removeAttribute(GROUP_ORIENTATION_ATTR);
+		item.removeAttribute(TOGGLE_ORIENTATION_ATTR);
+	}
+	syncGroupLayout() {
+		for (const item of this.items) this.clearLayoutAttrs(item);
+		for (const item of this.items) if (this.orientation !== "horizontal") item.setAttribute(TOGGLE_ORIENTATION_ATTR, this.orientation);
+		if (this.spacing !== 0) return;
+		for (let index = 0; index < this.items.length; index++) {
+			const item = this.items[index];
+			item.setAttribute(GROUP_ORIENTATION_ATTR, this.orientation);
+			item.setAttribute(GROUP_JOIN_ATTR, "");
+			if (index === 0) item.setAttribute(GROUP_ITEM_FIRST, "");
+			if (index === this.items.length - 1) item.setAttribute(GROUP_ITEM_LAST, "");
+		}
+	}
+	syncJoinedFromSpacing() {
+		this.joined = this.spacing === 0;
+	}
+	applyGroupProps() {
+		for (const item of this.items) {
+			if (item.tagName !== "PK-TOGGLE") continue;
+			item.setAttribute("variant", this.variant);
+			item.setAttribute("size", this.size);
+		}
+	}
+	getItemValue(item) {
+		return item.getAttribute("data-value") ?? item.dataset.value ?? null;
+	}
+	isItemDisabled(item) {
+		return item.hasAttribute("disabled") || item.matches(":disabled");
+	}
+	applySelection() {
+		for (const item of this.items) {
+			const itemValue = this.getItemValue(item);
+			if (!itemValue) continue;
+			const selected = this.value.includes(itemValue);
+			item.setAttribute("aria-pressed", selected ? "true" : "false");
+			if (item.tagName === "PK-TOGGLE") if (selected) item.setAttribute("pressed", "");
+			else item.removeAttribute("pressed");
+		}
+	}
+	render() {
+		return b`
+            <div
+                part="base"
+                class="group"
+                role="group"
+                style=${`--pk-toggle-group-spacing: ${this.spacing}`}
+                @slotchange=${this.syncItems}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+__decorate([n({ reflect: true })], PkToggleGroup.prototype, "orientation", void 0);
+__decorate([n({ reflect: true })], PkToggleGroup.prototype, "variant", void 0);
+__decorate([n({ reflect: true })], PkToggleGroup.prototype, "size", void 0);
+__decorate([n({
+	type: Number,
+	reflect: true
+})], PkToggleGroup.prototype, "spacing", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkToggleGroup.prototype, "joined", void 0);
+__decorate([n({ type: Boolean })], PkToggleGroup.prototype, "multiple", void 0);
+__decorate([n({
+	type: Array,
+	attribute: false
+})], PkToggleGroup.prototype, "value", void 0);
+__decorate([r()], PkToggleGroup.prototype, "items", void 0);
+PkToggleGroup = __decorate([t("pk-toggle-group")], PkToggleGroup);
+//#endregion
+export { PkToggleGroup };

package/dist-loader/components/tooltip/tooltip.js

@@ -0,0 +1,2 @@
+import { t as PkTooltip } from "../../chunks/pk-tooltip-JJRxVXYD.js";
+export { PkTooltip };