@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-button-Cilu5WAT.js

@@ -0,0 +1,840 @@
+import { n as PkElement, r as hostDisplayInlineBlock, t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as resolveSpinnerVariant, t as getButtonSpinnerSize } from "./spinner-utils-CDfHypTv.js";
+import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
+import { i as buttonGroupIndentStyles, n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-DYmBR28a.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+import { chevronDown, iconToSvg } from "@verbb/plugin-kit-icons";
+//#region src/components/button/pk-button.styles.ts
+var pkButtonStyles = [
+	hostDisplayInlineBlock,
+	iconStyles,
+	buttonGroupCornerRoleStyles(),
+	buttonGroupCornerRadiusStyles(".button"),
+	buttonGroupIndentStyles(),
+	buttonGroupBorderJoinStyles(".button"),
+	css`
+        @layer pk-component {
+            :host {
+                font-family: var(--pk-font-family);
+                font-size: var(--pk-font-size-base);
+                line-height: var(--pk-line-height);
+                cursor: pointer;
+                --pk-btn-height: var(--pk-btn-height-default);
+                --pk-btn-font: var(--pk-btn-font-default);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-default);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-default);
+                --pk-btn-radius: var(--pk-btn-radius-default);
+            }
+
+            :host([disabled]) {
+                cursor: not-allowed;
+                pointer-events: none;
+            }
+
+            :host([loading]):not([disabled]) {
+                pointer-events: none;
+            }
+
+            .button {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: var(--pk-btn-icon-gap);
+                box-sizing: border-box;
+                width: auto;
+                margin: 0;
+                /* Every button carries a 1px border (transparent for fill/plain variants) so the box
+                 * model is identical across variants and states. Prevents width shift when swapping a
+                 * button between filled and outline/dashed, or toggling states. Matches Bootstrap
+                 * (transparent baseline) and  (border always present, only color changes).
+                 */
+                border: 1px solid transparent;
+                border-radius: var(--pk-btn-radius);
+                font: inherit;
+                font-size: var(--pk-btn-font);
+                font-weight: 400;
+                line-height: 1.2;
+                text-decoration: none;
+                white-space: nowrap;
+                /* Inherit host cursor so className/style (e.g. cursor-move) pierce shadow. */
+                cursor: inherit;
+                user-select: none;
+                vertical-align: middle;
+                appearance: none;
+                background: var(--pk-btn-fill, var(--pk-action-fill));
+                color: var(--pk-btn-on, var(--pk-action-on));
+                height: var(--pk-btn-height);
+                min-height: var(--pk-btn-height);
+                /* Block padding defaults to 0 (height tokens center content). Override for nav rows. */
+                padding-block: var(--pk-btn-padding-block, 0);
+                padding-inline: var(--pk-btn-padding-inline);
+                transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
+            }
+
+            .button:disabled {
+                opacity: 0.5;
+            }
+
+            .icon-slot {
+                display: none;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+                line-height: 0;
+            }
+
+            .icon-slot--has-content {
+                display: inline-flex;
+            }
+
+            /* Fixed token sizes for all icons (labeled or icon-only) — matches plugin-kit-react Button. */
+            .icon-slot slot::slotted(svg),
+            slot[name='start']::slotted(svg),
+            slot[name='end']::slotted(svg) {
+                display: block;
+                width: var(--pk-btn-icon-size);
+                height: var(--pk-btn-icon-size);
+                flex-shrink: 0;
+                pointer-events: none;
+            }
+
+            .icon-slot slot::slotted(img),
+            slot[name='start']::slotted(img),
+            slot[name='end']::slotted(img) {
+                display: block;
+                width: var(--pk-btn-icon-size);
+                height: var(--pk-btn-icon-size);
+                object-fit: contain;
+                flex-shrink: 0;
+                pointer-events: none;
+            }
+
+            /* pk-icon sizes itself from font-size (1em), so scale it to the
+             * icon token. This keeps the idiomatic slotted pk-icon usage in
+             * sync with raw slotted svg. Set width/height explicitly — %/size-full
+             * collapses when the icon-slot has no definite box.
+             */
+            .icon-slot slot::slotted(pk-icon),
+            slot[name='start']::slotted(pk-icon),
+            slot[name='end']::slotted(pk-icon) {
+                font-size: var(--pk-btn-icon-size);
+                width: var(--pk-btn-icon-size);
+                height: var(--pk-btn-icon-size);
+                /* Kill pk-icon's text-baseline nudge (-0.125em) — flex slots center optically. */
+                vertical-align: 0;
+                flex-shrink: 0;
+                pointer-events: none;
+            }
+
+            .label {
+                display: inline-flex;
+                align-items: center;
+                min-width: 0;
+                line-height: 1.2;
+            }
+
+            /* Trailing slot (status): grow + clip the label so end sits at the far edge
+             * and long titles truncate instead of colliding with the indicator.
+             */
+            .button:has(.icon-slot--end.icon-slot--has-content) .label:not(.is-empty) {
+                flex: 1 1 auto;
+                overflow: hidden;
+            }
+
+            .label.is-empty {
+                display: none;
+            }
+
+            /* Icon-only (no label): square hit box = size height. Button owns the target;
+             * glyph size comes from --pk-btn-icon-size. Do not Tailwind-size the Icon.
+             * Opt out with icon (compact), size=none, or group-trigger (narrow disclosure cap).
+             */
+            :host(:not([icon]):not([size='none']):not([group-trigger])) .button:not(.has-label) {
+                width: var(--pk-btn-height);
+                min-width: var(--pk-btn-height);
+                padding-inline: 0;
+            }
+
+            /* Compact density (icon attr): padless box that hugs the glyph.
+             * size still drives --pk-btn-icon-size; height/width tiers do not apply.
+             * Use for dense x / ellipsis in cells — not for table action rows (prefer square above).
+             * line-height: 0 collapses whitespace flex-struts so the glyph sits dead-center.
+             */
+            :host([icon]) {
+                display: inline-flex;
+                line-height: 0;
+                vertical-align: middle;
+            }
+
+            :host([icon]) .button {
+                display: flex;
+                width: auto;
+                min-width: 0;
+                height: auto;
+                min-height: 0;
+                padding-inline: 0.25rem;
+                padding-block: 0;
+                line-height: 0;
+                align-items: center;
+                justify-content: center;
+            }
+
+            /* Keep label space while loading even before slotchange runs. */
+            .button.loading .label.is-empty {
+                display: inline-flex;
+                visibility: hidden;
+            }
+
+            /* Sizes — token-driven scale (see tokens.css) */
+            :host([size='xxs']) {
+                --pk-btn-height: var(--pk-btn-height-xxs);
+                --pk-btn-font: var(--pk-btn-font-xxs);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-xxs);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-xxs);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-xxs);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-xxs);
+                --pk-btn-radius: var(--pk-btn-radius-xxs);
+            }
+
+            :host([size='xs']) {
+                --pk-btn-height: var(--pk-btn-height-xs);
+                --pk-btn-font: var(--pk-btn-font-xs);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-xs);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-xs);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-xs);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-xs);
+                --pk-btn-radius: var(--pk-btn-radius-xs);
+            }
+
+            :host([size='sm']) {
+                --pk-btn-height: var(--pk-btn-height-sm);
+                --pk-btn-font: var(--pk-btn-font-sm);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-sm);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-sm);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-sm);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-sm);
+                --pk-btn-radius: var(--pk-btn-radius-sm);
+            }
+
+            :host([size='default']) {
+                --pk-btn-height: var(--pk-btn-height-default);
+                --pk-btn-font: var(--pk-btn-font-default);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-default);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-default);
+                --pk-btn-radius: var(--pk-btn-radius-default);
+            }
+
+            :host([size='lg']) {
+                --pk-btn-height: var(--pk-btn-height-lg);
+                --pk-btn-font: var(--pk-btn-font-lg);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-lg);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-lg);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-lg);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-lg);
+                --pk-btn-radius: var(--pk-btn-radius-lg);
+            }
+
+            :host([size='xl']) {
+                --pk-btn-height: var(--pk-btn-height-xl);
+                --pk-btn-font: var(--pk-btn-font-xl);
+                --pk-btn-padding-inline: var(--pk-btn-padding-inline-xl);
+                --pk-btn-icon-size: var(--pk-btn-icon-size-xl);
+                --pk-btn-icon-gap: var(--pk-btn-icon-gap-xl);
+                --pk-btn-caret-size: var(--pk-btn-caret-size-xl);
+                --pk-btn-radius: var(--pk-btn-radius-xl);
+            }
+
+            /* No preset scale — size to content or set --pk-btn-* on the host for one-off dimensions
+             * (height, padding, font, icon, radius) without fighting a named size tier.
+             * Pair with icon for a padless glyph host, or set --pk-btn-padding-inline / --pk-btn-height yourself.
+             */
+            :host([size='none']) {
+                --pk-btn-height: auto;
+                --pk-btn-font: inherit;
+                --pk-btn-padding-inline: 0px;
+                --pk-btn-padding-block: 0px;
+                --pk-btn-icon-size: 1em;
+                --pk-btn-icon-gap: 0px;
+                --pk-btn-caret-size: 1em;
+                --pk-btn-radius: 0px;
+            }
+
+            :host([size='none']) .button {
+                height: auto;
+                min-height: auto;
+                width: 100%;
+            }
+
+            /* Variants */
+            :host([variant='default']) {
+                --pk-btn-fill: var(--pk-action-fill);
+                --pk-btn-fill-hover: var(--pk-action-fill-hover);
+                --pk-btn-fill-active: var(--pk-action-fill-active);
+                --pk-btn-on: var(--pk-action-on);
+            }
+
+            :host([variant='primary']) {
+                --pk-btn-fill: var(--pk-action-primary-fill);
+                --pk-btn-fill-hover: var(--pk-action-primary-fill-hover);
+                --pk-btn-fill-active: var(--pk-action-primary-fill-active);
+                --pk-btn-on: var(--pk-action-primary-on);
+            }
+
+            :host([variant='primary']) .button,
+            :host([variant='secondary']) .button {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+            }
+
+            :host([variant='secondary']) {
+                --pk-btn-fill: var(--pk-color-gray-500);
+                --pk-btn-fill-hover: var(--pk-color-gray-550);
+                --pk-btn-fill-active: var(--pk-color-gray-600);
+                --pk-btn-on: var(--pk-color-white);
+            }
+
+            :host([variant='outline']) .button {
+                background: transparent;
+                border-color: var(--pk-color-slate-400);
+                color: var(--pk-color-gray-700);
+            }
+
+            :host([variant='transparent']) .button {
+                background: transparent;
+                color: var(--pk-color-gray-700);
+            }
+
+            /* link/none opt out of the shared transparent 1px border: they never render a border, so
+             * carrying one only pads the box by 2px inline (and 2px block at size='none', where height
+             * is auto). These are the "inline text" / "no chrome" variants — content-sized is the point,
+             * and neither participates in button-group border joins. Other variants keep the stable box.
+             */
+            /*
+             * Craft CP sets --link-color on :root (inherits into shadow). Prefer that,
+             * then kit --pk-color-link — not sky-700 (reads as a different “CP blue”).
+             * Color on :host so consumer utilities (e.g. text-[var(--link-color)]) can override.
+             * Height must be content-sized — default --pk-btn-height (34px) bloated table rows.
+             */
+            :host([variant='link']) {
+                color: var(--link-color, var(--pk-color-link));
+                --pk-btn-height: auto;
+                --pk-btn-padding-inline: 0;
+                --pk-btn-padding-block: 0;
+            }
+
+            :host([variant='link']) .button {
+                background: transparent;
+                border-width: 0;
+                border-radius: 0;
+                color: inherit;
+                width: auto;
+                height: auto;
+                min-height: 0;
+                padding: 0;
+                text-underline-offset: 2px;
+            }
+
+            :host([variant='dashed']) .button {
+                background: transparent;
+                border-style: dashed;
+                border-color: var(--pk-color-slate-500);
+                color: var(--pk-color-gray-700);
+            }
+
+            :host([variant='none']) .button {
+                border-width: 0;
+                border-radius: 0;
+                background: transparent;
+                color: inherit;
+            }
+
+            /* Interaction — pseudo-classes only; playground matrices use dev/pk-button-demo-states.css */
+            .button:hover:not(:disabled) {
+                background: var(--pk-btn-fill-hover, var(--pk-btn-fill));
+            }
+
+            :host([variant='outline']) .button:hover:not(:disabled),
+            :host([variant='transparent']) .button:hover:not(:disabled),
+            :host([variant='dashed']) .button:hover:not(:disabled) {
+                background: var(--pk-color-slate-150);
+            }
+
+            :host([variant='link']) .button:hover:not(:disabled) {
+                background: transparent;
+                text-decoration: underline;
+            }
+
+            :host([variant='none']) .button:hover:not(:disabled) {
+                background: transparent;
+            }
+
+            .button:active:not(:disabled) {
+                background: var(--pk-btn-fill-active, var(--pk-btn-fill-hover, var(--pk-btn-fill)));
+            }
+
+            :host([variant='outline']) .button:active:not(:disabled),
+            :host([variant='transparent']) .button:active:not(:disabled),
+            :host([variant='dashed']) .button:active:not(:disabled) {
+                background: var(--pk-color-slate-200);
+            }
+
+            :host([variant='link']) .button:active:not(:disabled),
+            :host([variant='none']) .button:active:not(:disabled) {
+                background: transparent;
+            }
+
+            .button:focus {
+                outline: none;
+            }
+
+            .button:focus-visible {
+                box-shadow: var(--pk-shadow-focus);
+            }
+
+            /* Bordered variants: fold the button's own border into the focus ring by recoloring it to
+             * the accent (and solidifying dashed) so focus reads as one cohesive ring instead of a
+             * doubled border. The ring is thinned to 1px here because the recolored 1px border already
+             * supplies the other half — total 2px, matching the filled variants' ring weight.
+             */
+            :host([variant='outline']) .button:focus-visible,
+            :host([variant='dashed']) .button:focus-visible {
+                border-color: var(--pk-color-sky-600);
+                box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 5px 1px hsl(from var(--pk-color-sky-600) h s l / 0.7);
+            }
+
+            :host([variant='dashed']) .button:focus-visible {
+                border-style: solid;
+            }
+
+            :host(.pk-dialog__close) .button:focus-visible {
+                box-shadow: 0 0 0 2px var(--pk-color-gray-600);
+            }
+
+            :host-context(pk-button-group) {
+                position: relative;
+            }
+
+            :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;
+            }
+
+            :host-context(pk-button-group:focus-visible) {
+                z-index: 2;
+            }
+
+            /* Bordered variants — matching border divider (filled uses margin gap via buttonGroupIndentStyles) */
+
+            :host([variant='primary']) .button:focus-visible,
+            :host([variant='secondary']) .button:focus-visible {
+                box-shadow: var(--pk-shadow-focus-inset);
+            }
+
+            :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button {
+                background: var(--pk-color-gray-500);
+                color: var(--pk-color-white);
+            }
+
+            :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:hover:not(:disabled) {
+                background: var(--pk-color-gray-550);
+            }
+
+            :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:active:not(:disabled) {
+                background: var(--pk-color-gray-600);
+            }
+
+            :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:focus-visible {
+                box-shadow: var(--pk-shadow-focus);
+            }
+
+            :host([variant='link']) .button:focus-visible {
+                box-shadow: none;
+                text-decoration: underline;
+            }
+
+            .button.loading {
+                position: relative;
+                cursor: default;
+                pointer-events: none;
+            }
+
+            .label.loading {
+                visibility: hidden;
+            }
+
+            .button.loading .icon-slot,
+            .button.loading slot[name='start']::slotted(*),
+            .button.loading slot[name='end']::slotted(*) {
+                visibility: hidden;
+            }
+
+            .button.caret .icon-slot--end.icon-slot--has-content {
+                display: none;
+            }
+
+            /* Scope to the caret span — the button host also gets class caret when
+               with-caret is set; an unscoped .caret rule was adding 2px margin
+               to the whole button and shifting dropdown anchors left. */
+            .button > .caret {
+                display: inline-flex;
+                align-self: center;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+                line-height: 0;
+                /* Sits slightly further from the label than the flex gap alone. */
+                margin-inline-start: 2px;
+            }
+
+            /* Caret has its own per-size token (--pk-btn-caret-size), kept deliberately smaller than
+             * --pk-btn-icon-size so it reads as a subordinate dropdown affordance next to real icons.
+             */
+            .button > .caret svg {
+                display: block;
+                width: var(--pk-btn-caret-size);
+                height: var(--pk-btn-caret-size);
+            }
+
+            :host([group-trigger]) .button {
+                padding-inline: 6px;
+            }
+
+            /* Compact disclosure cap — hide content, keep only the shared SVG caret (centered). */
+            :host([group-trigger]) .label,
+            :host([group-trigger]) .icon-slot {
+                display: none;
+            }
+
+            :host([group-trigger]) .button > .caret {
+                margin-inline-start: 0;
+            }
+
+            :host([size='sm'][group-trigger]) .button,
+            :host([size='xs'][group-trigger]) .button,
+            :host([size='xxs'][group-trigger]) .button {
+                padding-inline: 6px;
+            }
+
+            :host([size='lg'][group-trigger]) .button {
+                padding-inline: 10px;
+            }
+
+            :host([size='xl'][group-trigger]) .button {
+                padding-inline: 12px;
+            }
+
+            :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,
+            :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,
+            :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {
+                border-left-width: 0;
+            }
+
+            :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,
+            :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,
+            :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {
+                border-top-width: 0;
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {
+                border-left-width: 0;
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,
+            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,
+            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {
+                border-top-width: 0;
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button {
+                box-shadow: none;
+                border-left-width: 1px;
+                border-left-style: solid;
+                border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button {
+                box-shadow: none;
+                border-top-width: 1px;
+                border-top-style: solid;
+                border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button {
+                box-shadow: none;
+                border-left-width: 1px;
+                border-left-style: dashed;
+                border-left-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button {
+                box-shadow: none;
+                border-top-width: 1px;
+                border-top-style: dashed;
+                border-top-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button:focus-visible,
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button:focus-visible {
+                box-shadow: var(--pk-shadow-focus);
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button:focus-visible,
+            :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button:focus-visible {
+                box-shadow: var(--pk-shadow-focus);
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='outline']) .button,
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='dashed']) .button {
+                border-right-width: 0;
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='outline']) .button,
+            :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='dashed']) .button {
+                border-bottom-width: 0;
+            }
+        }
+    `
+];
+//#endregion
+//#region src/components/button/pk-button.ts
+var CARET_ICON = iconToSvg(chevronDown);
+var PkButton = class PkButton extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "default";
+		this.size = "default";
+		this.disabled = false;
+		this.loading = false;
+		this.withCaret = false;
+		this.groupTrigger = false;
+		this.icon = false;
+		this.title = "";
+		this.type = "button";
+		this.hasDefaultSlotContent = false;
+		this.hasStartSlotContent = false;
+		this.hasEndSlotContent = false;
+		this.startSlotChanged = (event) => {
+			this.iconSlotChanged(event, "start");
+		};
+		this.endSlotChanged = (event) => {
+			this.iconSlotChanged(event, "end");
+		};
+		this.handleHostClick = (event) => {
+			if (this.disabled || this.loading || this.href) return;
+			if (this.type !== "submit" && this.type !== "reset") return;
+			const form = this.resolveAssociatedForm();
+			if (!form) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (this.type === "reset") {
+				form.reset();
+				return;
+			}
+			if (typeof form.requestSubmit === "function") {
+				form.requestSubmit();
+				return;
+			}
+			form.dispatchEvent(new Event("submit", {
+				bubbles: true,
+				cancelable: true
+			}));
+		};
+	}
+	static {
+		this.shadowRootOptions = {
+			mode: "open",
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = pkButtonStyles;
+	}
+	defaultSlotChanged(event) {
+		const slot = event.target;
+		this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {
+			if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim();
+			return node.nodeType === Node.ELEMENT_NODE;
+		});
+	}
+	iconSlotChanged(event, which) {
+		const hasContent = event.target.assignedNodes({ flatten: true }).some((node) => {
+			if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim();
+			return node.nodeType === Node.ELEMENT_NODE;
+		});
+		if (which === "start") this.hasStartSlotContent = hasContent;
+		else this.hasEndSlotContent = hasContent;
+	}
+	buttonClasses() {
+		return classMap({
+			button: true,
+			"has-label": this.hasDefaultSlotContent,
+			loading: this.loading,
+			caret: this.withCaret,
+			"group-trigger": this.groupTrigger
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("data-slot", "button");
+		this.addEventListener("click", this.handleHostClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.handleHostClick);
+		super.disconnectedCallback();
+	}
+	/**
+	* Resolve the light-DOM form for submit/reset.
+	* Prefer `form` id (dialog footer submitters), then ancestor `<form>`.
+	* Never target Craft’s `#main` shell.
+	*/
+	resolveAssociatedForm() {
+		const byId = (this.form || this.getAttribute("form") || "").trim();
+		if (byId) {
+			const el = this.ownerDocument?.getElementById(byId);
+			if (el instanceof HTMLFormElement && el.id !== "main") return el;
+		}
+		const closest = this.closest("form");
+		if (closest && closest.id !== "main") return closest;
+		return null;
+	}
+	render() {
+		const spinnerSize = this.spinnerSize || getButtonSpinnerSize(this.size);
+		const spinnerVariant = resolveSpinnerVariant(this.variant, this.spinnerVariant);
+		return html`
+            ${Boolean(this.href) ? html`
+                    <a
+                        part="base"
+                        class=${this.buttonClasses()}
+                        href=${this.href}
+                        target=${this.target ?? nothing}
+                        rel=${this.rel ?? nothing}
+                        title=${this.title || nothing}
+                    >
+                        ${this.renderInner(spinnerSize, spinnerVariant)}
+                    </a>
+                ` : html`
+                    <button
+                        part="base"
+                        class=${this.buttonClasses()}
+                        type=${this.type}
+                        ?disabled=${this.disabled}
+                        aria-disabled=${this.disabled ? "true" : nothing}
+                        aria-busy=${this.loading ? "true" : nothing}
+                        name=${this.name ?? nothing}
+                        value=${this.value ?? nothing}
+                        title=${this.title || nothing}
+                    >
+                        ${this.renderInner(spinnerSize, spinnerVariant)}
+                    </button>
+                `}
+        `;
+	}
+	renderInner(spinnerSize, spinnerVariant) {
+		return html`
+            <span
+                class=${classMap({
+			"icon-slot": true,
+			"icon-slot--start": true,
+			"icon-slot--has-content": this.hasStartSlotContent
+		})}
+            >
+                <slot name="start" @slotchange=${this.startSlotChanged}></slot>
+            </span>
+            ${this.loading ? html`
+                    <pk-spinner
+                        variant=${spinnerVariant}
+                        size=${spinnerSize}
+                        tone=${this.spinnerTone ?? nothing}
+                        centered
+                    ></pk-spinner>
+                ` : nothing}
+            <span
+                class=${classMap({
+			label: true,
+			"is-empty": !this.hasDefaultSlotContent,
+			loading: this.loading
+		})}
+            >
+                <slot @slotchange=${this.defaultSlotChanged}></slot>
+            </span>
+            <span
+                class=${classMap({
+			"icon-slot": true,
+			"icon-slot--end": true,
+			"icon-slot--has-content": this.hasEndSlotContent
+		})}
+            >
+                <slot name="end" @slotchange=${this.endSlotChanged}></slot>
+            </span>
+            ${this.withCaret || this.groupTrigger ? html`<span part="caret" class="caret">${unsafeSVG(CARET_ICON)}</span>` : nothing}
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkButton.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], PkButton.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkButton.prototype, "loading", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "spinner-size"
+})], PkButton.prototype, "spinnerSize", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "spinner-variant"
+})], PkButton.prototype, "spinnerVariant", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "spinner-tone"
+})], PkButton.prototype, "spinnerTone", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "with-caret"
+})], PkButton.prototype, "withCaret", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "group-trigger"
+})], PkButton.prototype, "groupTrigger", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkButton.prototype, "icon", void 0);
+__decorate([property()], PkButton.prototype, "href", void 0);
+__decorate([property()], PkButton.prototype, "target", void 0);
+__decorate([property()], PkButton.prototype, "rel", void 0);
+__decorate([property()], PkButton.prototype, "name", void 0);
+__decorate([property()], PkButton.prototype, "value", void 0);
+__decorate([property()], PkButton.prototype, "title", void 0);
+__decorate([property()], PkButton.prototype, "type", void 0);
+__decorate([property({ reflect: true })], PkButton.prototype, "form", void 0);
+__decorate([state()], PkButton.prototype, "hasDefaultSlotContent", void 0);
+__decorate([state()], PkButton.prototype, "hasStartSlotContent", void 0);
+__decorate([state()], PkButton.prototype, "hasEndSlotContent", void 0);
+PkButton = __decorate([customElement("pk-button")], PkButton);
+//#endregion
+export { PkButton as t };
+
+//# sourceMappingURL=pk-button-Cilu5WAT.js.map