@verbb/plugin-kit-web 2.0.9 → 2.0.10

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

@@ -1,12 +1,12 @@
 import { d as registerDismissible, f as unregisterDismissible, n as uniqueId, u as isTopDismissible } from "../../chunks/pk-a11y-CjB4-U-R.js";
 import { c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, u as t } from "../../chunks/lit-Dnn7gEi2.js";
 import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
-import { r as buttonGroupCornerRoleStyles } from "../../chunks/button-group-item.styles-BNc-ksl1.js";
-import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "../../chunks/overlay-lifecycle-BG4QMRLw.js";
-import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "../../chunks/popup-placement-animation-BPjq650B.js";
-import { t as popupContentAnimationStyles } from "../../chunks/popup-content-animation.styles-C9ffC35f.js";
-import { n as resolveElementById } from "../../chunks/pk-popup-BYFbKaHH.js";
-import { n as isPointerInsideOverlay } from "../../chunks/popup-pointer-BTS3Y6LE.js";
+import { r as buttonGroupCornerRoleStyles } from "../../chunks/button-group-item.styles-Dwakbyx5.js";
+import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "../../chunks/overlay-lifecycle-C3tSQ3UR.js";
+import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "../../chunks/popup-placement-animation-WlEXnS85.js";
+import { t as popupContentAnimationStyles } from "../../chunks/popup-content-animation.styles-S6CK-zPp.js";
+import { n as resolveElementById } from "../../chunks/pk-popup-Cfj3YNEC.js";
+import { n as isPointerInsideOverlay } from "../../chunks/popup-pointer-caPc8kwB.js";
 //#region src/components/popover/pk-popover.styles.ts
 var pkPopoverStyles = [
 	buttonGroupCornerRoleStyles(),

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

@@ -1,2 +1,2 @@
-import { t as PkPopup } from "../../chunks/pk-popup-BYFbKaHH.js";
+import { t as PkPopup } from "../../chunks/pk-popup-Cfj3YNEC.js";
 export { PkPopup };

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

@@ -1,8 +1,8 @@
 import { c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, 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 RequiredValidator } from "../../chunks/required-validator-DXqqPVeW.js";
-import { t as HasSlotController } from "../../chunks/has-slot-BZDcCpf9.js";
-import { n as readLegacyInstructions, t as hasInstructionContent } from "../../chunks/field-labels-Vo3wHq49.js";
+import { t as RequiredValidator } from "../../chunks/required-validator-0XwZtX9k.js";
+import { t as HasSlotController } from "../../chunks/has-slot-BGJeJdHr.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "../../chunks/field-labels-D3lKQ2nq.js";
 //#region src/components/radio-group/pk-radio-group.styles.ts
 var pkRadioGroupStyles = i`
     @layer pk-component {

package/dist-loader/components/select/option.js

@@ -1,2 +1,2 @@
-import { t as PkOption } from "../../chunks/pk-option-DL4rxbo2.js";
+import { t as PkOption } from "../../chunks/pk-option-DN_AHNmh.js";
 export { PkOption };

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

@@ -1,2 +1,2 @@
-import { t as PkSelect } from "../../chunks/pk-select-D0Ia0Mz3.js";
+import { t as PkSelect } from "../../chunks/pk-select-BzTTYknK.js";
 export { PkSelect };

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

@@ -1,89 +1,2 @@
-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";
-//#region src/components/status/pk-status.styles.ts
-var pkStatusStyles = i`
-    @layer pk-component {
-        :host {
-            display: inline-block;
-            flex-shrink: 0;
-            width: 0.75rem;
-            height: 0.75rem;
-            border-radius: 9999px;
-            vertical-align: middle;
-        }
-
-        .status {
-            display: block;
-            width: 100%;
-            height: 100%;
-            border-radius: inherit;
-        }
-
-        :host([status='all']) .status { background: linear-gradient(60deg, #184cef, #e5422b); }
-        :host([status='on']) .status,
-        :host([status='live']) .status,
-        :host([status='active']) .status,
-        :host([status='enabled']) .status,
-        :host([status='teal']) .status,
-        :host([status='turquoise']) .status { background: var(--pk-color-teal-550); }
-        :host([status='off']) .status,
-        :host([status='suspended']) .status,
-        :host([status='expired']) .status,
-        :host([status='red']) .status { background: var(--pk-color-red-600); }
-        :host([status='warning']) .status { background: var(--pk-color-amber-100); }
-        :host([status='pending']) .status,
-        :host([status='orange']) .status { background: var(--pk-color-orange-400); }
-        :host([status='amber']) .status { background: var(--pk-color-amber-500); }
-        :host([status='yellow']) .status { background: var(--pk-color-yellow-500); }
-        :host([status='lime']) .status { background: var(--pk-color-lime-500); }
-        :host([status='green']) .status { background: var(--pk-color-green-600); }
-        :host([status='emerald']) .status { background: var(--pk-color-emerald-500); }
-        :host([status='cyan']) .status { background: var(--pk-color-cyan-500); }
-        :host([status='sky']) .status { background: var(--pk-color-sky-500); }
-        :host([status='blue']) .status { background: var(--pk-color-blue-600); }
-        :host([status='indigo']) .status { background: var(--pk-color-indigo-500); }
-        :host([status='violet']) .status { background: var(--pk-color-violet-500); }
-        :host([status='purple']) .status { background: var(--pk-color-purple-500); }
-        :host([status='fuchsia']) .status { background: var(--pk-color-fuchsia-500); }
-        :host([status='pink']) .status { background: var(--pk-color-pink-500); }
-        :host([status='rose']) .status { background: var(--pk-color-rose-500); }
-        :host([status='light']) .status { background: var(--pk-color-gray-100); }
-        :host([status='gray']) .status,
-        :host([status='grey']) .status { background: var(--pk-color-gray-300); }
-        :host([status='white']) .status { background: var(--pk-color-white); }
-        :host([status='black']) .status { background: var(--pk-color-gray-800); }
-        :host([status='disabled']) .status,
-        :host([status='inactive']) .status {
-            /* Ring color is overridable for inverted / selected surfaces. */
-            background: transparent;
-            box-shadow: inset 0 0 0 2px var(--pk-status-ring, var(--pk-color-gray-500));
-        }
-    }
-`;
-//#endregion
-//#region src/components/status/pk-status.ts
-var PkStatus = class PkStatus extends PkElement {
-	constructor(..._args) {
-		super(..._args);
-		this.status = "on";
-		this.ariaLabel = null;
-	}
-	static {
-		this.styles = pkStatusStyles;
-	}
-	render() {
-		return b`
-            <span
-                part="base"
-                class="status"
-                role="status"
-                aria-label=${this.ariaLabel ?? A}
-            ></span>
-        `;
-	}
-};
-__decorate([n({ reflect: true })], PkStatus.prototype, "status", void 0);
-__decorate([n({ attribute: "aria-label" })], PkStatus.prototype, "ariaLabel", void 0);
-PkStatus = __decorate([t("pk-status")], PkStatus);
-//#endregion
+import { t as PkStatus } from "../../chunks/pk-status-BFpjCym0.js";
 export { PkStatus };

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

@@ -1,2 +1,2 @@
-import { t as PkTextarea } from "../../chunks/pk-textarea-LC_CPUav.js";
+import { t as PkTextarea } from "../../chunks/pk-textarea-BrRPLWsG.js";
 export { PkTextarea };

package/dist-loader/components/time-picker/time-picker.js

@@ -1,2 +1,2 @@
-import { t as PkTimePicker } from "../../chunks/pk-time-picker-CesVpPiv.js";
+import { t as PkTimePicker } from "../../chunks/pk-time-picker-DpRBAHVK.js";
 export { PkTimePicker };

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

@@ -1,7 +1,7 @@
 import { l as n, m as i, p as b, s as e, u as t } from "../../chunks/lit-Dnn7gEi2.js";
 import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
-import { k as Editor } from "../../chunks/tiptap-_LAjdgeV.js";
-import { A as createTiptapExtensions, i as createVariableTagDomNodeView, k as valueToContent, t as tiptapContentProseMirrorStyles } from "../../chunks/tiptap.styles-gpE_nQ_B.js";
+import { k as Editor } from "../../chunks/tiptap-Db7MTUH1.js";
+import { A as createTiptapExtensions, i as createVariableTagDomNodeView, k as valueToContent, t as tiptapContentProseMirrorStyles } from "../../chunks/tiptap.styles-mxwZHY1l.js";
 //#region src/components/tiptap/pk-tiptap-content.styles.ts
 var pkTiptapContentStyles = i`
     @layer pk-component {

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

@@ -2,19 +2,19 @@ import { n as uniqueId } from "../../chunks/pk-a11y-CjB4-U-R.js";
 import { a as o, c as r, f as A, 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 { A as heading, D as h4, E as h3, F as link, G as table, H as strikethrough, I as listOl, J as underline, K as textSlash, L as listUl, N as italic, O as h5, R as minus, T as h2, U as subscript, V as quoteRight, W as superscript, a as alignRight, c as arrowRotateRight, d as bold, f as bracketsCurly, h as chevronDown, i as alignLeft, j as highlighter, k as h6, n as alignCenter, q as triangleExclamation, r as alignJustify, s as arrowRotateLeft, w as h1, x as fileDashedLine, y as code, z as paragraph } from "../../chunks/svg-_Mtb7CHx.js";
-import "../../chunks/pk-button-Qg2Tot_-.js";
-import { t as MirrorValidator } from "../../chunks/mirror-validator-DEz3BsbN.js";
-import "../../chunks/pk-checkbox-CoDX2G3J.js";
-import "../../chunks/pk-input-88DVgoVz.js";
-import { M as posToDOMRect, j as getMarkRange, k as Editor } from "../../chunks/tiptap-_LAjdgeV.js";
-import { A as createTiptapExtensions, D as getFatalTiptapContentError, O as normalizeContentArray, S as openCraftElementLinkSelector, _ as getLinkOpenInNewTab, a as getToolbarGroupDefaultIcon, b as getCraftLinkOptions, c as isFormattingToolbarPreset, d as parseToolbarConfig, f as runToolbarButton, g as getLinkEditState, h as applyLinkToEditor, i as createVariableTagDomNodeView, k as valueToContent, l as isHeadingsOnlyToolbarPreset, m as isTiptapButtonActive, o as getToolbarGroupMenuItems, p as toolbarIncludesButton, r as tiptapProseMirrorStyles, s as getToolbarGroupTriggerState, u as isToolbarButtonActive, v as getSelectedText, x as getLinkOptionsElementSiteId, y as unsetLinkFromEditor } from "../../chunks/tiptap.styles-gpE_nQ_B.js";
-import { n as renderIconHtml } from "../../chunks/render-B_9MG170.js";
-import "../../chunks/pk-field-CmPZQ86w.js";
-import "../../chunks/pk-dialog-DPn2BXOq.js";
-import "../../chunks/pk-dropdown-item-CdBLgJoh.js";
-import "../../chunks/pk-dropdown-menu-BX4lGvGe.js";
+import "../../chunks/pk-button-BiR9aCRh.js";
+import { t as MirrorValidator } from "../../chunks/mirror-validator-C5XrXPaq.js";
+import "../../chunks/pk-checkbox-hJCj8In8.js";
+import "../../chunks/pk-input-BupRMhK1.js";
+import { M as posToDOMRect, j as getMarkRange, k as Editor } from "../../chunks/tiptap-Db7MTUH1.js";
+import { A as createTiptapExtensions, D as getFatalTiptapContentError, O as normalizeContentArray, S as openCraftElementLinkSelector, _ as getLinkOpenInNewTab, a as getToolbarGroupDefaultIcon, b as getCraftLinkOptions, c as isFormattingToolbarPreset, d as parseToolbarConfig, f as runToolbarButton, g as getLinkEditState, h as applyLinkToEditor, i as createVariableTagDomNodeView, k as valueToContent, l as isHeadingsOnlyToolbarPreset, m as isTiptapButtonActive, o as getToolbarGroupMenuItems, p as toolbarIncludesButton, r as tiptapProseMirrorStyles, s as getToolbarGroupTriggerState, u as isToolbarButtonActive, v as getSelectedText, x as getLinkOptionsElementSiteId, y as unsetLinkFromEditor } from "../../chunks/tiptap.styles-mxwZHY1l.js";
+import { n as renderIconHtml } from "../../chunks/render-Niz5wYRa.js";
+import "../../chunks/pk-field-BU3DkBLi.js";
+import "../../chunks/pk-dialog-CyUKChc9.js";
+import "../../chunks/pk-dropdown-item-D2X2L4nu.js";
+import "../../chunks/pk-dropdown-menu-yOOPMVOg.js";
 import "../dropdown-menu/dropdown-separator.js";
-import "../../chunks/pk-tooltip-DRU95AZ6.js";
+import "../../chunks/pk-tooltip-D6Slr-A6.js";
 //#region src/components/tiptap/tiptap-editor-host.ts
 function serializeTiptapDocumentContent(content) {
 	return JSON.stringify(normalizeContentArray(content));

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

@@ -1,8 +1,8 @@
 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-DEz3BsbN.js";
-import { k as Editor } from "../../chunks/tiptap-_LAjdgeV.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-gpE_nQ_B.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-mxwZHY1l.js";
 //#region src/components/tiptap/pk-tiptap-input.styles.ts
 var pkTiptapInputStyles = i`
     @layer pk-component {

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

@@ -1,6 +1,6 @@
 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-BNc-ksl1.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(),

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

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

package/dist-loader/plugin-kit.css

@@ -460,6 +460,8 @@ html.pk-scroll-lock {
         pk-combobox,
         pk-time-picker,
         pk-copy-button,
+        pk-connect,
+        pk-connect-oauth,
         pk-editable-table
     ):not(:defined) {
         animation: 2s step-end pk-fouce;

package/dist-loader/plugin-kit.loader.js

@@ -55,6 +55,8 @@ var COMPONENT_MODULE_PATHS = {
 	"pk-combobox": "components/combobox/combobox.js",
 	"pk-time-picker": "components/time-picker/time-picker.js",
 	"pk-copy-button": "components/copy-button/copy-button.js",
+	"pk-connect": "components/connect/connect.js",
+	"pk-connect-oauth": "components/connect/connect-oauth.js",
 	"pk-editable-table": "components/editable-table/editable-table.js"
 };
 /** Vite loader-build entries: output key → source module. */
@@ -109,6 +111,8 @@ var LOADER_COMPONENT_ENTRIES = {
 	"components/combobox/combobox": "src/components/combobox/pk-combobox.ts",
 	"components/time-picker/time-picker": "src/components/time-picker/pk-time-picker.ts",
 	"components/copy-button/copy-button": "src/components/copy-button/pk-copy-button.ts",
+	"components/connect/connect": "src/components/connect/pk-connect.ts",
+	"components/connect/connect-oauth": "src/components/connect/pk-connect-oauth.ts",
 	"components/editable-table/editable-table": "src/components/editable-table/pk-editable-table.ts"
 };
 /** Loader-only shims → real element modules for the bundler dist graph. */

package/dist-loader/styles/connect/pk-connect.css

@@ -0,0 +1,231 @@
+/*
+ * Document-scoped connect styles (light DOM — not shadow-piercing).
+ *
+ * Row layout lives here — canonical for CP. Lit `:host` rules in `pk-connect.styles.ts`
+ * are a secondary copy; light-DOM WCs do not always receive adopted `:host` styles.
+ */
+
+/* Lift the connect row above CP chrome while the error dialog is open. */
+.pk-connect-field.pk-connect-field--modal-open {
+    position: relative;
+    z-index: 2147482999;
+    isolation: isolate;
+}
+
+/*
+ * Connect row layout — CP meta lightswitch row (status/label left, action right).
+ * Twig mounts `<pk-connect>` / `<pk-connect-oauth>` inside `.pk-connect-field`.
+ */
+.pk-connect-field > pk-connect,
+.pk-connect-field > pk-connect-oauth {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    flex: 1 1 100%;
+    min-width: 0;
+    min-height: 2.75rem;
+}
+
+.pk-connect-field > :is(pk-connect, pk-connect-oauth) > .heading {
+    display: flex;
+    align-items: center;
+    gap: var(--pk-connect-status-gap, 15px);
+    margin: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+    line-height: 1.125rem;
+    padding-block: 0.75rem;
+    padding-inline: var(--pk-connect-heading-padding-inline, var(--m, 1rem) var(--s, 0.75rem));
+    color: var(--pk-connect-heading-color, var(--gray-600, #515f6c));
+}
+
+.pk-connect-field > :is(pk-connect, pk-connect-oauth) > .heading:only-child {
+    flex: 1 1 100%;
+}
+
+.pk-connect-field > :is(pk-connect, pk-connect-oauth) > .input {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    padding-block: var(--pk-connect-input-padding-block, var(--s, 0.75rem));
+    padding-inline: var(--pk-connect-input-padding-inline, 10px var(--m, 1rem));
+}
+
+.pk-connect-field > :is(pk-connect, pk-connect-oauth) > .heading .light {
+    color: var(--pk-connect-muted-color, var(--gray-500, #606d7b));
+}
+
+.pk-connect-field > :is(pk-connect, pk-connect-oauth) > .heading pk-status.pk-connect__status-icon {
+    display: block;
+    flex-shrink: 0;
+    width: 0.75rem;
+    height: 0.75rem;
+    --pk-status-ring: var(--gray-500);
+}
+
+.pk-connect-field > :is(pk-connect, pk-connect-oauth) > .heading .warning.with-icon::before {
+    margin-inline-end: 7px;
+}
+
+/*
+ * Connection error dialog — full-viewport on small screens, ~66% on md+.
+ * Tokens pierce into pk-dialog's shadow panel; host Tailwind never reaches .dialog.
+ */
+pk-dialog.pk-connect-dialog {
+    --pk-dialog-width: calc(100vw - 24px);
+    --pk-dialog-max-width: calc(100vw - 24px);
+    --pk-dialog-height: calc(100dvh - 24px);
+    --pk-dialog-max-height: calc(100dvh - 24px);
+    --pk-dialog-min-width: 0;
+    --pk-dialog-min-height: 0;
+}
+
+@media (min-width: 768px) {
+    pk-dialog.pk-connect-dialog {
+        --pk-dialog-width: 66%;
+        --pk-dialog-max-width: 66%;
+        --pk-dialog-height: 66%;
+        --pk-dialog-max-height: calc(100dvh - 24px);
+        --pk-dialog-min-width: 600px;
+        --pk-dialog-min-height: 400px;
+    }
+}
+
+pk-dialog.pk-connect-dialog::part(body) {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+pk-button.pk-connect-dialog__close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1;
+    opacity: 0.7;
+    color: var(--pk-color-gray-600, #515f6c);
+    --pk-btn-height: 1.125rem;
+    --pk-btn-icon-size: 1.125rem;
+    --pk-btn-padding-inline: 0;
+}
+
+pk-button.pk-connect-dialog__close:hover:not([disabled]) {
+    opacity: 1;
+}
+
+pk-button.pk-connect-dialog__close::part(base) {
+    width: 1.125rem;
+    min-width: 1.125rem;
+    height: 1.125rem;
+    min-height: 1.125rem;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+.pk-connection-error {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+    color: var(--pk-color-rose-600, #e11d48);
+}
+
+.pk-connection-error__stack {
+    display: flex;
+    width: 100%;
+    max-width: 680px;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: inherit;
+}
+
+.pk-connection-error__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pk-color-rose-600, #e11d48);
+}
+
+.pk-connection-error__icon pk-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 2.5rem;
+    color: inherit;
+}
+
+.pk-connection-error__heading {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25;
+    color: inherit;
+}
+
+.pk-connection-error__message {
+    margin: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: inherit;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.pk-connection-error__details {
+    width: 100%;
+}
+
+.pk-connection-error__details.hidden {
+    display: none;
+}
+
+.pk-connection-error__details-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    margin: 0.25rem auto 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-size: 0.75rem;
+    line-height: 1.25;
+}
+
+.pk-connection-error__details-toggle pk-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    font-size: 0.75rem;
+    transition: transform 0.15s ease;
+}
+
+.pk-connection-error__details-toggle pk-icon.is-open {
+    transform: rotate(90deg);
+}
+
+.pk-connection-error__trace {
+    margin-top: 0.75rem;
+    max-height: 180px;
+    overflow: auto;
+    border-radius: 0.375rem;
+    background: var(--pk-color-gray-50, #f3f7fc);
+    padding: 0.75rem;
+    text-align: left;
+    font-size: 0.75rem;
+    color: var(--pk-color-gray-700, #3f4d5a);
+}
+
+.pk-connection-error__trace.hidden {
+    display: none;
+}

package/dist-loader/utilities/fouce.css

@@ -53,6 +53,8 @@
         pk-combobox,
         pk-time-picker,
         pk-copy-button,
+        pk-connect,
+        pk-connect-oauth,
         pk-editable-table
     ):not(:defined) {
         animation: 2s step-end pk-fouce;

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@verbb/plugin-kit-web",
-    "version": "2.0.9",
+    "version": "2.0.10",
     "description": "Plugin Kit web components (shadow DOM, Craft design system)",
     "type": "module",
     "types": "dist/index.d.ts",
     "sideEffects": [
         "**/*.css",
         "./src/components/**/*.ts",
+        "./src/connect/**/*.ts",
         "./dist/register.js",
+        "./dist/connect/**/*.js",
         "./dist/components/**/*.js",
         "./dist/chunks/**/*.js",
         "./dist-loader/**/*.js"
@@ -54,6 +56,19 @@
             "style": "./dist/styles/overlay-content.css",
             "default": "./dist/styles/overlay-content.css"
         },
+        "./styles/connect/pk-connect.css": {
+            "style": "./dist/styles/connect/pk-connect.css",
+            "default": "./dist/styles/connect/pk-connect.css"
+        },
+        "./connect/register-cp-connect": {
+            "types": "./dist/connect/register-cp-connect.d.ts",
+            "import": "./dist/connect/register-cp-connect.js"
+        },
+        "./connect/register-cp-connect.js": {
+            "types": "./dist/connect/register-cp-connect.d.ts",
+            "import": "./dist/connect/register-cp-connect.js",
+            "default": "./dist/connect/register-cp-connect.js"
+        },
         "./tokens.css": {
             "style": "./dist/tokens.css",
             "default": "./dist/tokens.css"
@@ -163,6 +178,26 @@
             "import": "./dist/components/combobox/pk-combobox.js",
             "default": "./dist/components/combobox/pk-combobox.js"
         },
+        "./components/connect/pk-connect.js": {
+            "types": "./dist/components/connect/pk-connect.d.ts",
+            "import": "./dist/components/connect/pk-connect.js",
+            "default": "./dist/components/connect/pk-connect.js"
+        },
+        "./components/connect/pk-connect": {
+            "types": "./dist/components/connect/pk-connect.d.ts",
+            "import": "./dist/components/connect/pk-connect.js",
+            "default": "./dist/components/connect/pk-connect.js"
+        },
+        "./components/connect/pk-connect-oauth.js": {
+            "types": "./dist/components/connect/pk-connect-oauth.d.ts",
+            "import": "./dist/components/connect/pk-connect-oauth.js",
+            "default": "./dist/components/connect/pk-connect-oauth.js"
+        },
+        "./components/connect/pk-connect-oauth": {
+            "types": "./dist/components/connect/pk-connect-oauth.d.ts",
+            "import": "./dist/components/connect/pk-connect-oauth.js",
+            "default": "./dist/components/connect/pk-connect-oauth.js"
+        },
         "./components/copy-button/pk-copy-button.js": {
             "types": "./dist/components/copy-button/pk-copy-button.d.ts",
             "import": "./dist/components/copy-button/pk-copy-button.js",
@@ -653,6 +688,16 @@
             "import": "./dist/components/combobox.js",
             "default": "./dist/components/combobox.js"
         },
+        "./components/connect.js": {
+            "types": "./dist/components/connect.d.ts",
+            "import": "./dist/components/connect.js",
+            "default": "./dist/components/connect.js"
+        },
+        "./components/connect": {
+            "types": "./dist/components/connect.d.ts",
+            "import": "./dist/components/connect.js",
+            "default": "./dist/components/connect.js"
+        },
         "./components/copy-button.js": {
             "types": "./dist/components/copy-button.d.ts",
             "import": "./dist/components/copy-button.js",
@@ -937,18 +982,18 @@
     },
     "peerDependencies": {
         "@floating-ui/dom": "^1.7.3",
-        "@verbb/plugin-kit-core": "^2.0.9",
-        "@verbb/plugin-kit-icons": "^2.0.9",
+        "@verbb/plugin-kit-core": "^2.0.10",
+        "@verbb/plugin-kit-icons": "^2.0.10",
         "lit": "^3.3.0"
     },
     "license": "MIT",
     "dependencies": {
         "@floating-ui/dom": "^1.7.3",
         "@tiptap/core": "^3.22.4",
-        "@verbb/plugin-kit-codemirror-core": "2.0.9",
-        "@verbb/plugin-kit-core": "^2.0.9",
-        "@verbb/plugin-kit-icons": "^2.0.9",
-        "@verbb/plugin-kit-tiptap-core": "^2.0.9",
+        "@verbb/plugin-kit-codemirror-core": "2.0.10",
+        "@verbb/plugin-kit-core": "^2.0.10",
+        "@verbb/plugin-kit-icons": "^2.0.10",
+        "@verbb/plugin-kit-tiptap-core": "^2.0.10",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.3.0"
     },

package/dist/chunks/component-registry-BOlxFlou.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-registry-BOlxFlou.js","names":[],"sources":["../../src/component-registry.ts"],"sourcesContent":["/**\n * Canonical tag → loader module path mapping for the autoloader.\n * Module paths are relative to the directory that contains plugin-kit.loader.js.\n */\nexport const COMPONENT_MODULE_PATHS: Record<string, string> = {\n    'pk-spinner': 'components/spinner/spinner.js',\n    'pk-icon': 'components/icon/icon.js',\n    'pk-button': 'components/button/button.js',\n    'pk-checkbox': 'components/checkbox/checkbox.js',\n    'pk-checkbox-select': 'components/checkbox-select/checkbox-select.js',\n    'pk-color-input': 'components/color-input/color-input.js',\n    'pk-code-editor': 'components/code-editor/code-editor.js',\n    'pk-input': 'components/input/input.js',\n    'pk-input-group': 'components/input-group/input-group.js',\n    'pk-input-group-addon': 'components/input-group/input-group-addon.js',\n    'pk-input-group-button': 'components/input-group/input-group-button.js',\n    'pk-input-group-input': 'components/input-group/input-group-input.js',\n    'pk-input-group-text': 'components/input-group/input-group-text.js',\n    'pk-input-group-textarea': 'components/input-group/input-group-textarea.js',\n    'pk-textarea': 'components/textarea/textarea.js',\n    'pk-tiptap-editor': 'components/tiptap/tiptap-editor.js',\n    'pk-tiptap-input': 'components/tiptap/tiptap-input.js',\n    'pk-tiptap-content': 'components/tiptap/tiptap-content.js',\n    'pk-field': 'components/field/field.js',\n    'pk-separator': 'components/separator/separator.js',\n    'pk-status': 'components/status/status.js',\n    'pk-toggle': 'components/toggle/toggle.js',\n    'pk-toggle-group': 'components/toggle-group/toggle-group.js',\n    'pk-lightswitch': 'components/lightswitch/lightswitch.js',\n    'pk-button-group': 'components/button-group/button-group.js',\n    'pk-button-group-separator': 'components/button-group/button-group-separator.js',\n    'pk-button-group-text': 'components/button-group/button-group-text.js',\n    'pk-dialog': 'components/dialog/dialog.js',\n    'pk-popup': 'components/popup/popup.js',\n    'pk-dropdown-label': 'components/dropdown-menu/dropdown-label.js',\n    'pk-dropdown-item': 'components/dropdown-menu/dropdown-item.js',\n    'pk-dropdown-separator': 'components/dropdown-menu/dropdown-separator.js',\n    'pk-dropdown-menu': 'components/dropdown-menu/dropdown-menu.js',\n    'pk-popover': 'components/popover/popover.js',\n    'pk-tooltip': 'components/tooltip/tooltip.js',\n    'pk-radio': 'components/radio-group/radio.js',\n    'pk-radio-group': 'components/radio-group/radio-group.js',\n    'pk-tab': 'components/tabs/tab.js',\n    'pk-tab-heading': 'components/tabs/tab-heading.js',\n    'pk-tab-panel': 'components/tabs/tab-panel.js',\n    'pk-tabs': 'components/tabs/tabs.js',\n    'pk-scroll-area': 'components/scroll-area/scroll-area.js',\n    'pk-option': 'components/select/option.js',\n    'pk-option-group': 'components/select/option-group.js',\n    'pk-select': 'components/select/select.js',\n    'pk-calendar': 'components/calendar/calendar.js',\n    'pk-date-picker': 'components/date-picker/date-picker.js',\n    'pk-combobox': 'components/combobox/combobox.js',\n    'pk-time-picker': 'components/time-picker/time-picker.js',\n    'pk-copy-button': 'components/copy-button/copy-button.js',\n    'pk-editable-table': 'components/editable-table/editable-table.js',\n};\n\n/**\n * Canonical list of every `pk-*` custom element tag.\n * Single source of truth for FOUCE CSS generation and any tag enumeration.\n */\nexport const PK_COMPONENT_TAGS: readonly string[] = Object.keys(COMPONENT_MODULE_PATHS);\n\n/** Vite loader-build entries: output key → source module. */\nexport const LOADER_COMPONENT_ENTRIES: Record<string, string> = {\n    'components/spinner/spinner': 'src/components/spinner/pk-spinner.ts',\n    // Loader ships the full icon set; bundler family `components/icon.js` stays opt-in.\n    'components/icon/icon': 'src/components/icon/pk-icon-loader.ts',\n    'components/button/button': 'src/components/button/pk-button.ts',\n    'components/checkbox/checkbox': 'src/components/checkbox/pk-checkbox.ts',\n    'components/checkbox-select/checkbox-select': 'src/components/checkbox-select/pk-checkbox-select.ts',\n    'components/color-input/color-input': 'src/components/color-input/pk-color-input.ts',\n    'components/code-editor/code-editor': 'src/components/code-editor/pk-code-editor.ts',\n    'components/input/input': 'src/components/input/pk-input.ts',\n    'components/input-group/input-group': 'src/components/input-group/pk-input-group.ts',\n    'components/input-group/input-group-addon': 'src/components/input-group/pk-input-group-addon.ts',\n    'components/input-group/input-group-button': 'src/components/input-group/pk-input-group-button.ts',\n    'components/input-group/input-group-input': 'src/components/input-group/pk-input-group-input.ts',\n    'components/input-group/input-group-text': 'src/components/input-group/pk-input-group-text.ts',\n    'components/input-group/input-group-textarea': 'src/components/input-group/pk-input-group-textarea.ts',\n    'components/textarea/textarea': 'src/components/textarea/pk-textarea.ts',\n    'components/tiptap/tiptap-editor': 'src/components/tiptap/pk-tiptap-editor.ts',\n    'components/tiptap/tiptap-input': 'src/components/tiptap/pk-tiptap-input.ts',\n    'components/tiptap/tiptap-content': 'src/components/tiptap/pk-tiptap-content.ts',\n    'components/field/field': 'src/components/field/pk-field.ts',\n    'components/separator/separator': 'src/components/separator/pk-separator.ts',\n    'components/status/status': 'src/components/status/pk-status.ts',\n    'components/toggle/toggle': 'src/components/toggle/pk-toggle.ts',\n    'components/toggle-group/toggle-group': 'src/components/toggle-group/pk-toggle-group.ts',\n    'components/lightswitch/lightswitch': 'src/components/lightswitch/pk-lightswitch.ts',\n    'components/button-group/button-group': 'src/components/button-group/pk-button-group.ts',\n    'components/button-group/button-group-separator': 'src/components/button-group/pk-button-group-separator.ts',\n    'components/button-group/button-group-text': 'src/components/button-group/pk-button-group-text.ts',\n    'components/dialog/dialog': 'src/components/dialog/pk-dialog.ts',\n    'components/popup/popup': 'src/components/popup/pk-popup.ts',\n    'components/dropdown-menu/dropdown-label': 'src/components/dropdown-menu/pk-dropdown-label.ts',\n    'components/dropdown-menu/dropdown-item': 'src/components/dropdown-menu/pk-dropdown-item.ts',\n    'components/dropdown-menu/dropdown-separator': 'src/components/dropdown-menu/pk-dropdown-separator.ts',\n    'components/dropdown-menu/dropdown-menu': 'src/components/dropdown-menu/pk-dropdown-menu.ts',\n    'components/popover/popover': 'src/components/popover/pk-popover.ts',\n    'components/tooltip/tooltip': 'src/components/tooltip/pk-tooltip.ts',\n    'components/radio-group/radio': 'src/components/radio-group/pk-radio.ts',\n    'components/radio-group/radio-group': 'src/components/radio-group/pk-radio-group.ts',\n    'components/tabs/tab': 'src/components/tabs/pk-tab.ts',\n    'components/tabs/tab-heading': 'src/components/tabs/pk-tab-heading.ts',\n    'components/tabs/tab-panel': 'src/components/tabs/pk-tab-panel.ts',\n    'components/tabs/tabs': 'src/components/tabs/pk-tabs.ts',\n    'components/scroll-area/scroll-area': 'src/components/scroll-area/pk-scroll-area.ts',\n    'components/select/option': 'src/components/select/pk-option.ts',\n    'components/select/option-group': 'src/components/select/pk-option-group.ts',\n    'components/select/select': 'src/components/select/pk-select.ts',\n    'components/calendar/calendar': 'src/components/calendar/pk-calendar.ts',\n    'components/date-picker/date-picker': 'src/components/date-picker/pk-date-picker.ts',\n    'components/combobox/combobox': 'src/components/combobox/pk-combobox.ts',\n    'components/time-picker/time-picker': 'src/components/time-picker/pk-time-picker.ts',\n    'components/copy-button/copy-button': 'src/components/copy-button/pk-copy-button.ts',\n    'components/editable-table/editable-table': 'src/components/editable-table/pk-editable-table.ts',\n};\n\n/** Loader-only shims → real element modules for the bundler dist graph. */\nconst BUNDLER_SRC_OVERRIDES: Record<string, string> = {\n    'src/components/icon/pk-icon-loader.ts': 'src/components/icon/pk-icon.ts',\n};\n\n/**\n * Vite `dist/` build entries for bundler cherry-picking.\n * Output paths mirror source layout, e.g. `dist/components/button/pk-button.js`.\n */\nexport const BUNDLER_COMPONENT_ENTRIES: Record<string, string> = Object.fromEntries(\n    Object.values(LOADER_COMPONENT_ENTRIES).map((srcRel) => {\n        const bundlerSrc = BUNDLER_SRC_OVERRIDES[srcRel] ?? srcRel;\n        const key = bundlerSrc.replace(/^src\\//, '').replace(/\\.ts$/, '');\n        return [key, bundlerSrc];\n    }),\n);\n\n/** Tag → bundler dist subpath (relative to package root, no `./` prefix). */\nexport const BUNDLER_TAG_IMPORT_PATHS: Record<string, string> = Object.fromEntries(\n    Object.keys(BUNDLER_COMPONENT_ENTRIES).map((key) => {\n        const tag = key.split('/').pop()!;\n        return [tag, `${key}.js`];\n    }),\n);\n\nexport type PkComponentTag = keyof typeof BUNDLER_TAG_IMPORT_PATHS;\n\n/**\n * Short consumer entries published as `@verbb/plugin-kit-web/components/{key}.js`.\n * Each module side-effect-registers its family (compound folders register every tag).\n *\n * TipTap stays split — importing one surface must not pull the other two.\n */\nexport const COMPONENT_FAMILY_ENTRIES: Record<string, string> = {\n    'button': 'src/components/button/index.ts',\n    'button-group': 'src/components/button-group/index.ts',\n    'calendar': 'src/components/calendar/index.ts',\n    'checkbox': 'src/components/checkbox/index.ts',\n    'checkbox-select': 'src/components/checkbox-select/index.ts',\n    'code-editor': 'src/components/code-editor/index.ts',\n    'color-input': 'src/components/color-input/index.ts',\n    'combobox': 'src/components/combobox/index.ts',\n    'copy-button': 'src/components/copy-button/index.ts',\n    'date-picker': 'src/components/date-picker/index.ts',\n    'dialog': 'src/components/dialog/index.ts',\n    'dropdown-menu': 'src/components/dropdown-menu/index.ts',\n    'editable-table': 'src/components/editable-table/index.ts',\n    'field': 'src/components/field/index.ts',\n    'icon': 'src/components/icon/index.ts',\n    'input': 'src/components/input/index.ts',\n    'input-group': 'src/components/input-group/index.ts',\n    'lightswitch': 'src/components/lightswitch/index.ts',\n    'popover': 'src/components/popover/index.ts',\n    'popup': 'src/components/popup/index.ts',\n    'radio-group': 'src/components/radio-group/index.ts',\n    'scroll-area': 'src/components/scroll-area/index.ts',\n    'select': 'src/components/select/index.ts',\n    'separator': 'src/components/separator/index.ts',\n    'spinner': 'src/components/spinner/index.ts',\n    'status': 'src/components/status/index.ts',\n    'tabs': 'src/components/tabs/index.ts',\n    'textarea': 'src/components/textarea/index.ts',\n    'time-picker': 'src/components/time-picker/index.ts',\n    'tiptap-content': 'src/components/tiptap/pk-tiptap-content.ts',\n    'tiptap-editor': 'src/components/tiptap/pk-tiptap-editor.ts',\n    'tiptap-input': 'src/components/tiptap/pk-tiptap-input.ts',\n    'toggle': 'src/components/toggle/index.ts',\n    'toggle-group': 'src/components/toggle-group/index.ts',\n    'tooltip': 'src/components/tooltip/index.ts',\n};\n"],"mappings":";;;;;AAIA,IAAa,yBAAiD;CAC1D,cAAc;CACd,WAAW;CACX,aAAa;CACb,eAAe;CACf,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CAClB,YAAY;CACZ,kBAAkB;CAClB,wBAAwB;CACxB,yBAAyB;CACzB,wBAAwB;CACxB,uBAAuB;CACvB,2BAA2B;CAC3B,eAAe;CACf,oBAAoB;CACpB,mBAAmB;CACnB,qBAAqB;CACrB,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,kBAAkB;CAClB,mBAAmB;CACnB,6BAA6B;CAC7B,wBAAwB;CACxB,aAAa;CACb,YAAY;CACZ,qBAAqB;CACrB,oBAAoB;CACpB,yBAAyB;CACzB,oBAAoB;CACpB,cAAc;CACd,cAAc;CACd,YAAY;CACZ,kBAAkB;CAClB,UAAU;CACV,kBAAkB;CAClB,gBAAgB;CAChB,WAAW;CACX,kBAAkB;CAClB,aAAa;CACb,mBAAmB;CACnB,aAAa;CACb,eAAe;CACf,kBAAkB;CAClB,eAAe;CACf,kBAAkB;CAClB,kBAAkB;CAClB,qBAAqB;CACxB;;AASD,IAAa,2BAAmD;CAC5D,8BAA8B;CAE9B,wBAAwB;CACxB,4BAA4B;CAC5B,gCAAgC;CAChC,8CAA8C;CAC9C,sCAAsC;CACtC,sCAAsC;CACtC,0BAA0B;CAC1B,sCAAsC;CACtC,4CAA4C;CAC5C,6CAA6C;CAC7C,4CAA4C;CAC5C,2CAA2C;CAC3C,+CAA+C;CAC/C,gCAAgC;CAChC,mCAAmC;CACnC,kCAAkC;CAClC,oCAAoC;CACpC,0BAA0B;CAC1B,kCAAkC;CAClC,4BAA4B;CAC5B,4BAA4B;CAC5B,wCAAwC;CACxC,sCAAsC;CACtC,wCAAwC;CACxC,kDAAkD;CAClD,6CAA6C;CAC7C,4BAA4B;CAC5B,0BAA0B;CAC1B,2CAA2C;CAC3C,0CAA0C;CAC1C,+CAA+C;CAC/C,0CAA0C;CAC1C,8BAA8B;CAC9B,8BAA8B;CAC9B,gCAAgC;CAChC,sCAAsC;CACtC,uBAAuB;CACvB,+BAA+B;CAC/B,6BAA6B;CAC7B,wBAAwB;CACxB,sCAAsC;CACtC,4BAA4B;CAC5B,kCAAkC;CAClC,4BAA4B;CAC5B,gCAAgC;CAChC,sCAAsC;CACtC,gCAAgC;CAChC,sCAAsC;CACtC,sCAAsC;CACtC,4CAA4C;CAC/C;;AAGD,IAAM,wBAAgD,EAClD,yCAAyC,kCAC5C;;;;;AAMD,IAAa,4BAAoD,OAAO,YACpE,OAAO,OAAO,yBAAyB,CAAC,KAAK,WAAW;CACpD,MAAM,aAAa,sBAAsB,WAAW;AAEpD,QAAO,CADK,WAAW,QAAQ,UAAU,GAAG,CAAC,QAAQ,SAAS,GACtD,EAAK,WAAW;EAC1B,CACL;;AAGD,IAAa,2BAAmD,OAAO,YACnE,OAAO,KAAK,0BAA0B,CAAC,KAAK,QAAQ;AAEhD,QAAO,CADK,IAAI,MAAM,IAAI,CAAC,KACnB,EAAK,GAAG,IAAI,KAAK;EAC3B,CACL"}