npm - @verbb/plugin-kit-web - Versions diffs - 2.0.21 → 2.0.23 - Mend

@verbb/plugin-kit-web 2.0.21 → 2.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (419) hide show

package/dist/chunks/{pk-button-BrH4u4Qr.js.map → pk-button-DCtNLEPr.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-button-BrH4u4Qr.js","names":[],"sources":["../../src/components/button/pk-button.styles.ts","../../src/components/button/pk-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { hostDisplayInlineBlock } from '../../base/styles.js';\nimport { iconStyles } from '../../base/icon.styles.js';\nimport {\n buttonGroupBorderJoinStyles,\n buttonGroupCornerRadiusStyles,\n buttonGroupCornerRoleStyles,\n buttonGroupIndentStyles,\n} from '../button-group/button-group-item.styles.js';\n\nexport const pkButtonStyles = [\n hostDisplayInlineBlock,\n iconStyles,\n buttonGroupCornerRoleStyles(),\n buttonGroupCornerRadiusStyles('.button'),\n buttonGroupIndentStyles(),\n buttonGroupBorderJoinStyles('.button'),\n css`\n @layer pk-component {\n :host {\n font-family: var(--pk-font-family);\n cursor: pointer;\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n /\n Slotted labels inherit from the host — pin the size-token font\n * (and button line-height) so Craft CP / Tailwind hosts match.\n /\n font-size: var(--pk-btn-font);\n line-height: 1.2;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([loading]):not([disabled]) {\n pointer-events: none;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pk-btn-icon-gap);\n box-sizing: border-box;\n width: auto;\n margin: 0;\n / Every button carries a 1px border (transparent for fill/plain variants) so the box\n * model is identical across variants and states. Prevents width shift when swapping a\n * button between filled and outline/dashed, or toggling states. Matches Bootstrap\n * (transparent baseline) and (border always present, only color changes).\n /\n border: 1px solid transparent;\n border-radius: var(--pk-btn-radius);\n font: inherit;\n font-size: var(--pk-btn-font);\n font-weight: 400;\n line-height: 1.2;\n text-decoration: none;\n white-space: nowrap;\n / Inherit host cursor so className/style (e.g. cursor-move) pierce shadow. /\n cursor: inherit;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n background: var(--pk-btn-fill, var(--pk-action-fill));\n color: var(--pk-btn-on, var(--pk-action-on));\n height: var(--pk-btn-height);\n min-height: var(--pk-btn-height);\n / Block padding defaults to 0 (height tokens center content). Override for nav rows. /\n padding-block: var(--pk-btn-padding-block, 0);\n padding-inline: var(--pk-btn-padding-inline);\n transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;\n }\n\n .button:disabled {\n opacity: 0.5;\n }\n\n .icon-slot {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n }\n\n .icon-slot--has-content {\n display: inline-flex;\n }\n\n / Fixed token sizes for all icons (labeled or icon-only) — matches plugin-kit-react Button. /\n .icon-slot slot::slotted(svg),\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .icon-slot slot::slotted(img),\n slot[name='start']::slotted(img),\n slot[name='end']::slotted(img) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n object-fit: contain;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n / pk-icon sizes itself from font-size (1em), so scale it to the\n * icon token. This keeps the idiomatic slotted pk-icon usage in\n * sync with raw slotted svg. Set width/height explicitly — %/size-full\n * collapses when the icon-slot has no definite box.\n /\n .icon-slot slot::slotted(pk-icon),\n slot[name='start']::slotted(pk-icon),\n slot[name='end']::slotted(pk-icon) {\n font-size: var(--pk-btn-icon-size);\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n / Kill pk-icon's text-baseline nudge (-0.125em) — flex slots center optically. /\n vertical-align: 0;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .label {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n line-height: 1.2;\n }\n\n / Trailing slot (status): grow + clip the label so end sits at the far edge\n * and long titles truncate instead of colliding with the indicator.\n /\n .button:has(.icon-slot--end.icon-slot--has-content) .label:not(.is-empty) {\n flex: 1 1 auto;\n overflow: hidden;\n }\n\n .label.is-empty {\n display: none;\n }\n\n / Icon-only (no label): square hit box = size height. Button owns the target;\n * glyph size comes from --pk-btn-icon-size. Do not Tailwind-size the Icon.\n * Opt out with icon (compact), size=none, or group-trigger (narrow disclosure cap).\n /\n :host(:not([icon]):not([size='none']):not([group-trigger])) .button:not(.has-label) {\n width: var(--pk-btn-height);\n min-width: var(--pk-btn-height);\n padding-inline: 0;\n }\n\n / Compact density (icon attr): padless box that hugs the glyph.\n * size still drives --pk-btn-icon-size; height/width tiers do not apply.\n * Use for dense x / ellipsis in cells — not for table action rows (prefer square above).\n * line-height: 0 collapses whitespace flex-struts so the glyph sits dead-center.\n /\n :host([icon]) {\n display: inline-flex;\n line-height: 0;\n vertical-align: middle;\n }\n\n :host([icon]) .button {\n display: flex;\n width: auto;\n min-width: 0;\n height: auto;\n min-height: 0;\n padding-inline: 0.25rem;\n padding-block: 0;\n line-height: 0;\n align-items: center;\n justify-content: center;\n }\n\n / Keep label space while loading even before slotchange runs. /\n .button.loading .label.is-empty {\n display: inline-flex;\n visibility: hidden;\n }\n\n / Sizes — token-driven scale (see tokens.css) /\n :host([size='xxs']) {\n --pk-btn-height: var(--pk-btn-height-xxs);\n --pk-btn-font: var(--pk-btn-font-xxs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xxs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xxs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xxs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xxs);\n --pk-btn-radius: var(--pk-btn-radius-xxs);\n }\n\n :host([size='xs']) {\n --pk-btn-height: var(--pk-btn-height-xs);\n --pk-btn-font: var(--pk-btn-font-xs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xs);\n --pk-btn-radius: var(--pk-btn-radius-xs);\n }\n\n :host([size='sm']) {\n --pk-btn-height: var(--pk-btn-height-sm);\n --pk-btn-font: var(--pk-btn-font-sm);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-sm);\n --pk-btn-icon-size: var(--pk-btn-icon-size-sm);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-sm);\n --pk-btn-caret-size: var(--pk-btn-caret-size-sm);\n --pk-btn-radius: var(--pk-btn-radius-sm);\n }\n\n :host([size='default']) {\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n }\n\n :host([size='lg']) {\n --pk-btn-height: var(--pk-btn-height-lg);\n --pk-btn-font: var(--pk-btn-font-lg);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-lg);\n --pk-btn-icon-size: var(--pk-btn-icon-size-lg);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-lg);\n --pk-btn-caret-size: var(--pk-btn-caret-size-lg);\n --pk-btn-radius: var(--pk-btn-radius-lg);\n }\n\n :host([size='xl']) {\n --pk-btn-height: var(--pk-btn-height-xl);\n --pk-btn-font: var(--pk-btn-font-xl);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xl);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xl);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xl);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xl);\n --pk-btn-radius: var(--pk-btn-radius-xl);\n }\n\n / No preset scale — size to content or set --pk-btn-* on the host for one-off dimensions\n * (height, padding, font, icon, radius) without fighting a named size tier.\n * Pair with icon for a padless glyph host, or set --pk-btn-padding-inline / --pk-btn-height yourself.\n /\n :host([size='none']) {\n --pk-btn-height: auto;\n --pk-btn-font: inherit;\n --pk-btn-padding-inline: 0px;\n --pk-btn-padding-block: 0px;\n --pk-btn-icon-size: 1em;\n --pk-btn-icon-gap: 0px;\n --pk-btn-caret-size: 1em;\n --pk-btn-radius: 0px;\n }\n\n :host([size='none']) .button {\n height: auto;\n min-height: auto;\n width: 100%;\n }\n\n / Variants /\n :host([variant='default']) {\n --pk-btn-fill: var(--pk-action-fill);\n --pk-btn-fill-hover: var(--pk-action-fill-hover);\n --pk-btn-fill-active: var(--pk-action-fill-active);\n --pk-btn-on: var(--pk-action-on);\n }\n\n :host([variant='primary']) {\n --pk-btn-fill: var(--pk-action-primary-fill);\n --pk-btn-fill-hover: var(--pk-action-primary-fill-hover);\n --pk-btn-fill-active: var(--pk-action-primary-fill-active);\n --pk-btn-on: var(--pk-action-primary-on);\n }\n\n :host([variant='primary']) .button,\n :host([variant='secondary']) .button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n :host([variant='secondary']) {\n --pk-btn-fill: var(--pk-color-gray-500);\n --pk-btn-fill-hover: var(--pk-color-gray-550);\n --pk-btn-fill-active: var(--pk-color-gray-600);\n --pk-btn-on: var(--pk-color-white);\n }\n\n :host([variant='outline']) .button {\n background: transparent;\n border-color: var(--pk-color-slate-400);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='transparent']) .button {\n background: transparent;\n color: var(--pk-color-gray-700);\n }\n\n / link/none opt out of the shared transparent 1px border: they never render a border, so\n * carrying one only pads the box by 2px inline (and 2px block at size='none', where height\n * is auto). These are the \"inline text\" / \"no chrome\" variants — content-sized is the point,\n * and neither participates in button-group border joins. Other variants keep the stable box.\n /\n /\n * Craft CP sets --link-color on :root (inherits into shadow). Prefer that,\n * then kit --pk-color-link — not sky-700 (reads as a different “CP blue”).\n * Color on :host so consumer utilities (e.g. text-[var(--link-color)]) can override.\n * Height must be content-sized — default --pk-btn-height (34px) bloated table rows.\n /\n :host([variant='link']) {\n color: var(--link-color, var(--pk-color-link));\n --pk-btn-height: auto;\n --pk-btn-padding-inline: 0;\n --pk-btn-padding-block: 0;\n }\n\n :host([variant='link']) .button {\n background: transparent;\n border-width: 0;\n border-radius: 0;\n color: inherit;\n width: auto;\n height: auto;\n min-height: 0;\n padding: 0;\n text-underline-offset: 2px;\n }\n\n :host([variant='dashed']) .button {\n background: transparent;\n border-style: dashed;\n border-color: var(--pk-color-slate-500);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='none']) .button {\n border-width: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n }\n\n / Interaction — pseudo-classes only; playground matrices use dev/pk-button-demo-states.css /\n .button:hover:not(:disabled) {\n background: var(--pk-btn-fill-hover, var(--pk-btn-fill));\n }\n\n :host([variant='outline']) .button:hover:not(:disabled),\n :host([variant='transparent']) .button:hover:not(:disabled),\n :host([variant='dashed']) .button:hover:not(:disabled) {\n background: var(--pk-color-slate-150);\n }\n\n :host([variant='link']) .button:hover:not(:disabled) {\n background: transparent;\n text-decoration: underline;\n }\n\n :host([variant='none']) .button:hover:not(:disabled) {\n background: transparent;\n }\n\n .button:active:not(:disabled) {\n background: var(--pk-btn-fill-active, var(--pk-btn-fill-hover, var(--pk-btn-fill)));\n }\n\n :host([variant='outline']) .button:active:not(:disabled),\n :host([variant='transparent']) .button:active:not(:disabled),\n :host([variant='dashed']) .button:active:not(:disabled) {\n background: var(--pk-color-slate-200);\n }\n\n :host([variant='link']) .button:active:not(:disabled),\n :host([variant='none']) .button:active:not(:disabled) {\n background: transparent;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n / Bordered variants: fold the button's own border into the focus ring by recoloring it to\n * the accent (and solidifying dashed) so focus reads as one cohesive ring instead of a\n * doubled border. The ring is thinned to 1px here because the recolored 1px border already\n * supplies the other half — total 2px, matching the filled variants' ring weight.\n /\n :host([variant='outline']) .button:focus-visible,\n :host([variant='dashed']) .button:focus-visible {\n border-color: var(--pk-color-sky-600);\n 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);\n }\n\n :host([variant='dashed']) .button:focus-visible {\n border-style: solid;\n }\n\n :host(.pk-dialog__close) .button:focus-visible {\n box-shadow: 0 0 0 2px var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group) {\n position: relative;\n }\n\n :host-context(pk-button-group[orientation='vertical']) {\n display: block;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group[orientation='vertical']) .button {\n width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group:focus-visible) {\n z-index: 2;\n }\n\n / Bordered variants — matching border divider (filled uses margin gap via buttonGroupIndentStyles) /\n\n :host([variant='primary']) .button:focus-visible,\n :host([variant='secondary']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus-inset);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button {\n background: var(--pk-color-gray-500);\n color: var(--pk-color-white);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:hover:not(:disabled) {\n background: var(--pk-color-gray-550);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:active:not(:disabled) {\n background: var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([variant='link']) .button:focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n\n .button.loading {\n position: relative;\n cursor: default;\n pointer-events: none;\n }\n\n .label.loading {\n visibility: hidden;\n }\n\n .button.loading .icon-slot,\n .button.loading slot[name='start']::slotted(),\n .button.loading slot[name='end']::slotted() {\n visibility: hidden;\n }\n\n .button.caret .icon-slot--end.icon-slot--has-content {\n display: none;\n }\n\n / Scope to the caret span — the button host also gets class caret when\n with-caret is set; an unscoped .caret rule was adding 2px margin\n to the whole button and shifting dropdown anchors left. /\n .button > .caret {\n display: inline-flex;\n align-self: center;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n / Sits slightly further from the label than the flex gap alone. /\n margin-inline-start: 2px;\n }\n\n / Caret has its own per-size token (--pk-btn-caret-size), kept deliberately smaller than\n * --pk-btn-icon-size so it reads as a subordinate dropdown affordance next to real icons.\n /\n .button > .caret svg {\n display: block;\n width: var(--pk-btn-caret-size);\n height: var(--pk-btn-caret-size);\n }\n\n :host([group-trigger]) .button {\n padding-inline: 6px;\n }\n\n / Compact disclosure cap — hide content, keep only the shared SVG caret (centered). /\n :host([group-trigger]) .label,\n :host([group-trigger]) .icon-slot {\n display: none;\n }\n\n :host([group-trigger]) .button > .caret {\n margin-inline-start: 0;\n }\n\n :host([size='sm'][group-trigger]) .button,\n :host([size='xs'][group-trigger]) .button,\n :host([size='xxs'][group-trigger]) .button {\n padding-inline: 6px;\n }\n\n :host([size='lg'][group-trigger]) .button {\n padding-inline: 10px;\n }\n\n :host([size='xl'][group-trigger]) .button {\n padding-inline: 12px;\n }\n\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\n border-top-width: 1px;\n border-top-style: solid;\n border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-left-width: 1px;\n border-left-style: dashed;\n border-left-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-top-width: 1px;\n border-top-style: dashed;\n border-top-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-right-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-bottom-width: 0;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevronDown, iconToSvg } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { getButtonSpinnerSize, resolveSpinnerVariant } from '../spinner/spinner-utils.js';\nimport type { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '../spinner/pk-spinner.js';\n\nexport type { PkSpinnerSize };\nimport '../spinner/pk-spinner.js';\nimport { pkButtonStyles } from './pk-button.styles.js';\n\nexport type PkButtonVariant =\n \| 'default'\n \| 'primary'\n \| 'secondary'\n \| 'outline'\n \| 'transparent'\n \| 'link'\n \| 'dashed'\n \| 'none';\n\nexport type PkButtonSize = 'default' \| 'xxs' \| 'xs' \| 'sm' \| 'lg' \| 'xl' \| 'none';\n\nconst CARET_ICON = iconToSvg(chevronDown);\n\n/\n Craft-aligned action button.\n \n @slot - Button label\n * @slot start - Leading icon or prefix\n * @slot end - Trailing icon or suffix\n \n @csspart base - The native button / link element\n \n @cssproperty [--pk-btn-height=var(--pk-btn-height-default)] - Control height (also min-height).\n * @cssproperty [--pk-btn-font=var(--pk-btn-font-default)] - Label font size.\n * @cssproperty [--pk-btn-padding-inline=var(--pk-btn-padding-inline-default)] - Horizontal padding.\n * @cssproperty [--pk-btn-padding-block=0] - Vertical padding override.\n * @cssproperty [--pk-btn-icon-size=var(--pk-btn-icon-size-default)] - Start/end slot glyph size.\n * @cssproperty [--pk-btn-icon-gap=var(--pk-btn-icon-gap-default)] - Gap between icons and label.\n * @cssproperty [--pk-btn-caret-size=var(--pk-btn-caret-size-default)] - Built-in caret glyph size.\n * @cssproperty [--pk-btn-radius=var(--pk-btn-radius-default)] - Border radius.\n * @cssproperty [--pk-btn-fill] - Background fill (filled variants).\n * @cssproperty [--pk-btn-fill-hover] - Hover fill.\n * @cssproperty [--pk-btn-fill-active] - Active / pressed fill.\n * @cssproperty [--pk-btn-on] - Foreground color on filled variants.\n \n @dependency pk-spinner - Loading indicator rendered while `loading` is set.\n /\n@customElement('pk-button')\nexport class PkButton extends PkElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = pkButtonStyles;\n\n /* Visual treatment — filled, outline, link, etc. /\n @property({ reflect: true })\n variant: PkButtonVariant = 'default';\n\n /* Shared CP size scale (`xxs` … `xl`); `none` skips presets for host token overrides. /\n @property({ reflect: true })\n size: PkButtonSize = 'default';\n\n /* Disables the control and blocks activation. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Shows an inline spinner and prevents activation while busy. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /\n Override loading spinner size. When unset, derived from `size` via\n * `getButtonSpinnerSize` — same defaults as v1 Button (xxs/xs → xxs, lg/xl → sm, else xs).\n * Formie New Form passes `xs` on `size=\"lg\"` so the ring stays size-4 (1rem), not sm (1.5rem).\n /\n @property({ reflect: true, attribute: 'spinner-size' })\n spinnerSize?: PkSpinnerSize;\n\n /* Loading spinner visual style. Defaults from the button variant when unset. /\n @property({ reflect: true, attribute: 'spinner-variant' })\n spinnerVariant?: PkSpinnerVariant;\n\n /* Loading spinner tone. Defaults from the button variant when unset. /\n @property({ reflect: true, attribute: 'spinner-tone' })\n spinnerTone?: PkSpinnerTone;\n\n /* Shows a disclosure caret after the label. /\n @property({ type: Boolean, reflect: true, attribute: 'with-caret' })\n withCaret = false;\n\n /\n Compact chevron-only trigger for grouped split actions — Craft `.menubtn`.\n \n Not a variant or size: set this boolean on the disclosure end-cap in a split group.\n * Hides label/icons and draws a CSS `::after` chevron (0.4375rem, 2px borders).\n * Inherits `variant`/`size` from sibling buttons; inline padding narrows to 8px.\n * Do not pass a chevron icon — use `icon` + a start-slot icon for a padless square control.\n /\n @property({ type: Boolean, reflect: true, attribute: 'group-trigger' })\n groupTrigger = false;\n\n /\n Compact icon density: padless box that hugs the glyph (no square hit target).\n \n Prefer default icon-only usage for action rows — without this flag, icon-only\n * buttons are square (`width`/`height` = size height) with the glyph from\n * `--pk-btn-icon-size`. Use `icon` for dense × / ⋯ in cells.\n * For one-off dimensions use `size=\"none\"` and set `--pk-btn-` on the host.\n /\n @property({ type: Boolean, reflect: true })\n icon = false;\n\n /** When set, renders as an anchor instead of a button. /\n @property()\n href?: string;\n\n /* Anchor `target` when `href` is set. /\n @property()\n target?: string;\n\n /* Anchor `rel` when `href` is set. /\n @property()\n rel?: string;\n\n /* Native `name` when used as a submit/reset control. /\n @property()\n name?: string;\n\n /* Native `value` when used as a submit control. /\n @property()\n value?: string;\n\n /\n Accessible name for icon-only / unlabeled controls.\n * Applied as `aria-label` — never as HTML `title` (no native hover tooltip).\n * Prefer the `aria-label` attribute when setting from markup; `title` remains\n * as a concise alias for the same accessible name.\n /\n @property()\n title = '';\n\n /* Accessible name — wins over {@link title} when both are set. /\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Native button type — ignored when `href` is set. /\n @property()\n type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n HTML form owner id — same as native `<button form=\"…\">`.\n * Needed when the submit control lives outside the `<form>` (e.g. dialog footer).\n /\n @property({ reflect: true })\n form?: string;\n\n @state()\n private hasDefaultSlotContent = false;\n\n @state()\n private hasStartSlotContent = false;\n\n @state()\n private hasEndSlotContent = false;\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private iconSlotChanged(event: Event, which: 'start' \| 'end'): void {\n const slot = event.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n\n if (which === 'start') {\n this.hasStartSlotContent = hasContent;\n } else {\n this.hasEndSlotContent = hasContent;\n }\n }\n\n private startSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'start');\n };\n\n private endSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'end');\n };\n\n private buttonClasses() {\n return classMap({\n button: true,\n 'has-label': this.hasDefaultSlotContent,\n loading: this.loading,\n caret: this.withCaret,\n 'group-trigger': this.groupTrigger,\n });\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('data-slot', 'button');\n this.addEventListener('click', this.handleHostClick);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('click', this.handleHostClick);\n super.disconnectedCallback();\n }\n\n /\n Resolve the light-DOM form for submit/reset.\n * Prefer `form` id (dialog footer submitters), then ancestor `<form>`.\n * Never target Craft’s `#main` shell.\n /\n private resolveAssociatedForm(): HTMLFormElement \| null {\n const byId = (this.form \|\| this.getAttribute('form') \|\| '').trim();\n\n if (byId) {\n const el = this.ownerDocument?.getElementById(byId);\n\n if (el instanceof HTMLFormElement && el.id !== 'main') {\n return el;\n }\n }\n\n const closest = this.closest('form');\n\n if (closest && closest.id !== 'main') {\n return closest;\n }\n\n return null;\n }\n\n /\n Shadow inner `<button type=\"submit\|reset\">` is not a form owner for an\n * ancestor light-DOM `<form>` — bridge click → `requestSubmit` / `reset`.\n * Skip Craft’s `#main` shell form (same guard as implicit Enter submit).\n */\n private handleHostClick = (event: MouseEvent): void => {\n if (this.disabled \|\| this.loading \|\| this.href) {\n return;\n }\n\n if (this.type !== 'submit' && this.type !== 'reset') {\n return;\n }\n\n const form = this.resolveAssociatedForm();\n\n if (!form) {\n return;\n }\n\n // Stop the inner shadow button’s non-associated default; we own submit/reset.\n event.preventDefault();\n event.stopPropagation();\n\n if (this.type === 'reset') {\n form.reset();\n return;\n }\n\n if (typeof form.requestSubmit === 'function') {\n form.requestSubmit();\n return;\n }\n\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n };\n\n override render() {\n // Explicit spinner-size wins (v1 Button `spinnerSize`); else map from button size.\n const spinnerSize = this.spinnerSize \|\| getButtonSpinnerSize(this.size);\n const spinnerVariant = resolveSpinnerVariant(this.variant, this.spinnerVariant);\n const isLink = Boolean(this.href);\n // Accessible name only — never HTML title (native tooltips get in the way).\n const accessibleName = this.ariaLabel \|\| this.title \|\| '';\n\n return html`\n ${isLink\n ? html`\n <a\n part=\"base\"\n class=${this.buttonClasses()}\n href=${this.href!}\n target=${this.target ?? nothing}\n rel=${this.rel ?? nothing}\n aria-label=${accessibleName \|\| nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </a>\n `\n : html`\n <button\n part=\"base\"\n class=${this.buttonClasses()}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n aria-label=${accessibleName \|\| nothing}\n name=${this.name ?? nothing}\n value=${this.value ?? nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </button>\n `}\n `;\n }\n\n private renderInner(spinnerSize: PkSpinnerSize, spinnerVariant: PkSpinnerVariant) {\n return html`\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--start': true,\n 'icon-slot--has-content': this.hasStartSlotContent,\n })}\n >\n <slot name=\"start\" @slotchange=${this.startSlotChanged}></slot>\n </span>\n ${this.loading\n ? html`\n <pk-spinner\n variant=${spinnerVariant}\n size=${spinnerSize}\n tone=${this.spinnerTone ?? nothing}\n centered\n ></pk-spinner>\n `\n : nothing}\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n loading: this.loading,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--end': true,\n 'icon-slot--has-content': this.hasEndSlotContent,\n })}\n >\n <slot name=\"end\" @slotchange=${this.endSlotChanged}></slot>\n </span>\n ${this.withCaret \|\| this.groupTrigger\n ? html`<span part=\"caret\" class=\"caret\">${unsafeSVG(CARET_ICON)}</span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button': PkButton;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-button-DCtNLEPr.js","names":[],"sources":["../../src/components/button/pk-button.styles.ts","../../src/components/button/pk-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { hostDisplayInlineBlock } from '../../base/styles.js';\nimport { iconStyles } from '../../base/icon.styles.js';\nimport {\n buttonGroupBorderJoinStyles,\n buttonGroupCornerRadiusStyles,\n buttonGroupCornerRoleStyles,\n buttonGroupIndentStyles,\n} from '../button-group/button-group-item.styles.js';\n\nexport const pkButtonStyles = [\n hostDisplayInlineBlock,\n iconStyles,\n buttonGroupCornerRoleStyles(),\n buttonGroupCornerRadiusStyles('.button'),\n buttonGroupIndentStyles(),\n buttonGroupBorderJoinStyles('.button'),\n css`\n @layer pk-component {\n :host {\n font-family: var(--pk-font-family);\n cursor: pointer;\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n /\n Slotted labels inherit from the host — pin the size-token font\n * (and button line-height) so Craft CP / Tailwind hosts match.\n /\n font-size: var(--pk-btn-font);\n line-height: 1.2;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([loading]):not([disabled]) {\n pointer-events: none;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pk-btn-icon-gap);\n box-sizing: border-box;\n width: auto;\n margin: 0;\n / Every button carries a 1px border (transparent for fill/plain variants) so the box\n * model is identical across variants and states. Prevents width shift when swapping a\n * button between filled and outline/dashed, or toggling states. Matches Bootstrap\n * (transparent baseline) and (border always present, only color changes).\n /\n border: 1px solid transparent;\n border-radius: var(--pk-btn-radius);\n font: inherit;\n font-size: var(--pk-btn-font);\n font-weight: 400;\n line-height: 1.2;\n text-decoration: none;\n white-space: nowrap;\n / Inherit host cursor so className/style (e.g. cursor-move) pierce shadow. /\n cursor: inherit;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n background: var(--pk-btn-fill, var(--pk-action-fill));\n color: var(--pk-btn-on, var(--pk-action-on));\n height: var(--pk-btn-height);\n min-height: var(--pk-btn-height);\n / Block padding defaults to 0 (height tokens center content). Override for nav rows. /\n padding-block: var(--pk-btn-padding-block, 0);\n padding-inline: var(--pk-btn-padding-inline);\n transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;\n }\n\n .button:disabled {\n opacity: 0.5;\n }\n\n .icon-slot {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n }\n\n .icon-slot--has-content {\n display: inline-flex;\n }\n\n / Fixed token sizes for all icons (labeled or icon-only) — matches plugin-kit-react Button. /\n .icon-slot slot::slotted(svg),\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .icon-slot slot::slotted(img),\n slot[name='start']::slotted(img),\n slot[name='end']::slotted(img) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n object-fit: contain;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n / pk-icon sizes itself from font-size (1em), so scale it to the\n * icon token. This keeps the idiomatic slotted pk-icon usage in\n * sync with raw slotted svg. Set width/height explicitly — %/size-full\n * collapses when the icon-slot has no definite box.\n /\n .icon-slot slot::slotted(pk-icon),\n slot[name='start']::slotted(pk-icon),\n slot[name='end']::slotted(pk-icon) {\n font-size: var(--pk-btn-icon-size);\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n / Kill pk-icon's text-baseline nudge (-0.125em) — flex slots center optically. /\n vertical-align: 0;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .label {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n line-height: 1.2;\n }\n\n / Trailing slot (status): grow + clip the label so end sits at the far edge\n * and long titles truncate instead of colliding with the indicator.\n /\n .button:has(.icon-slot--end.icon-slot--has-content) .label:not(.is-empty) {\n flex: 1 1 auto;\n overflow: hidden;\n }\n\n .label.is-empty {\n display: none;\n }\n\n / Icon-only (no label): square hit box = size height. Button owns the target;\n * glyph size comes from --pk-btn-icon-size. Do not Tailwind-size the Icon.\n * Opt out with icon (compact), size=none, or group-trigger (narrow disclosure cap).\n /\n :host(:not([icon]):not([size='none']):not([group-trigger])) .button:not(.has-label) {\n width: var(--pk-btn-height);\n min-width: var(--pk-btn-height);\n padding-inline: 0;\n }\n\n / Compact density (icon attr): padless box that hugs the glyph.\n * size still drives --pk-btn-icon-size; height/width tiers do not apply.\n * Use for dense x / ellipsis in cells — not for table action rows (prefer square above).\n * line-height: 0 collapses whitespace flex-struts so the glyph sits dead-center.\n /\n :host([icon]) {\n display: inline-flex;\n line-height: 0;\n vertical-align: middle;\n }\n\n :host([icon]) .button {\n display: flex;\n width: auto;\n min-width: 0;\n height: auto;\n min-height: 0;\n padding-inline: 0.25rem;\n padding-block: 0;\n line-height: 0;\n align-items: center;\n justify-content: center;\n }\n\n / Keep label space while loading even before slotchange runs. /\n .button.loading .label.is-empty {\n display: inline-flex;\n visibility: hidden;\n }\n\n / Sizes — token-driven scale (see tokens.css) /\n :host([size='xxs']) {\n --pk-btn-height: var(--pk-btn-height-xxs);\n --pk-btn-font: var(--pk-btn-font-xxs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xxs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xxs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xxs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xxs);\n --pk-btn-radius: var(--pk-btn-radius-xxs);\n }\n\n :host([size='xs']) {\n --pk-btn-height: var(--pk-btn-height-xs);\n --pk-btn-font: var(--pk-btn-font-xs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xs);\n --pk-btn-radius: var(--pk-btn-radius-xs);\n }\n\n :host([size='sm']) {\n --pk-btn-height: var(--pk-btn-height-sm);\n --pk-btn-font: var(--pk-btn-font-sm);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-sm);\n --pk-btn-icon-size: var(--pk-btn-icon-size-sm);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-sm);\n --pk-btn-caret-size: var(--pk-btn-caret-size-sm);\n --pk-btn-radius: var(--pk-btn-radius-sm);\n }\n\n :host([size='default']) {\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n }\n\n :host([size='lg']) {\n --pk-btn-height: var(--pk-btn-height-lg);\n --pk-btn-font: var(--pk-btn-font-lg);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-lg);\n --pk-btn-icon-size: var(--pk-btn-icon-size-lg);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-lg);\n --pk-btn-caret-size: var(--pk-btn-caret-size-lg);\n --pk-btn-radius: var(--pk-btn-radius-lg);\n }\n\n :host([size='xl']) {\n --pk-btn-height: var(--pk-btn-height-xl);\n --pk-btn-font: var(--pk-btn-font-xl);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xl);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xl);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xl);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xl);\n --pk-btn-radius: var(--pk-btn-radius-xl);\n }\n\n / No preset scale — size to content or set --pk-btn-* on the host for one-off dimensions\n * (height, padding, font, icon, radius) without fighting a named size tier.\n * Pair with icon for a padless glyph host, or set --pk-btn-padding-inline / --pk-btn-height yourself.\n /\n :host([size='none']) {\n --pk-btn-height: auto;\n --pk-btn-font: inherit;\n --pk-btn-padding-inline: 0px;\n --pk-btn-padding-block: 0px;\n --pk-btn-icon-size: 1em;\n --pk-btn-icon-gap: 0px;\n --pk-btn-caret-size: 1em;\n --pk-btn-radius: 0px;\n }\n\n :host([size='none']) .button {\n height: auto;\n min-height: auto;\n width: 100%;\n }\n\n / Variants /\n :host([variant='default']) {\n --pk-btn-fill: var(--pk-action-fill);\n --pk-btn-fill-hover: var(--pk-action-fill-hover);\n --pk-btn-fill-active: var(--pk-action-fill-active);\n --pk-btn-on: var(--pk-action-on);\n }\n\n :host([variant='primary']) {\n --pk-btn-fill: var(--pk-action-primary-fill);\n --pk-btn-fill-hover: var(--pk-action-primary-fill-hover);\n --pk-btn-fill-active: var(--pk-action-primary-fill-active);\n --pk-btn-on: var(--pk-action-primary-on);\n }\n\n :host([variant='primary']) .button,\n :host([variant='secondary']) .button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n :host([variant='secondary']) {\n --pk-btn-fill: var(--pk-color-gray-500);\n --pk-btn-fill-hover: var(--pk-color-gray-550);\n --pk-btn-fill-active: var(--pk-color-gray-600);\n --pk-btn-on: var(--pk-color-white);\n }\n\n :host([variant='outline']) .button {\n background: transparent;\n border-color: var(--pk-color-slate-400);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='transparent']) .button {\n background: transparent;\n color: var(--pk-color-gray-700);\n }\n\n / link/none opt out of the shared transparent 1px border: they never render a border, so\n * carrying one only pads the box by 2px inline (and 2px block at size='none', where height\n * is auto). These are the \"inline text\" / \"no chrome\" variants — content-sized is the point,\n * and neither participates in button-group border joins. Other variants keep the stable box.\n /\n /\n * Craft CP sets --link-color on :root (inherits into shadow). Prefer that,\n * then kit --pk-color-link — not sky-700 (reads as a different “CP blue”).\n * Color on :host so consumer utilities (e.g. text-[var(--link-color)]) can override.\n * Height must be content-sized — default --pk-btn-height (34px) bloated table rows.\n /\n :host([variant='link']) {\n color: var(--link-color, var(--pk-color-link));\n --pk-btn-height: auto;\n --pk-btn-padding-inline: 0;\n --pk-btn-padding-block: 0;\n }\n\n :host([variant='link']) .button {\n background: transparent;\n border-width: 0;\n border-radius: 0;\n color: inherit;\n width: auto;\n height: auto;\n min-height: 0;\n padding: 0;\n text-underline-offset: 2px;\n }\n\n :host([variant='dashed']) .button {\n background: transparent;\n border-style: dashed;\n border-color: var(--pk-color-slate-500);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='none']) .button {\n border-width: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n }\n\n / Interaction — pseudo-classes only; playground matrices use dev/pk-button-demo-states.css /\n .button:hover:not(:disabled) {\n background: var(--pk-btn-fill-hover, var(--pk-btn-fill));\n }\n\n :host([variant='outline']) .button:hover:not(:disabled),\n :host([variant='transparent']) .button:hover:not(:disabled),\n :host([variant='dashed']) .button:hover:not(:disabled) {\n background: var(--pk-color-slate-150);\n }\n\n :host([variant='link']) .button:hover:not(:disabled) {\n background: transparent;\n text-decoration: underline;\n }\n\n :host([variant='none']) .button:hover:not(:disabled) {\n background: transparent;\n }\n\n .button:active:not(:disabled) {\n background: var(--pk-btn-fill-active, var(--pk-btn-fill-hover, var(--pk-btn-fill)));\n }\n\n :host([variant='outline']) .button:active:not(:disabled),\n :host([variant='transparent']) .button:active:not(:disabled),\n :host([variant='dashed']) .button:active:not(:disabled) {\n background: var(--pk-color-slate-200);\n }\n\n :host([variant='link']) .button:active:not(:disabled),\n :host([variant='none']) .button:active:not(:disabled) {\n background: transparent;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n / Bordered variants: fold the button's own border into the focus ring by recoloring it to\n * the accent (and solidifying dashed) so focus reads as one cohesive ring instead of a\n * doubled border. The ring is thinned to 1px here because the recolored 1px border already\n * supplies the other half — total 2px, matching the filled variants' ring weight.\n /\n :host([variant='outline']) .button:focus-visible,\n :host([variant='dashed']) .button:focus-visible {\n border-color: var(--pk-color-sky-600);\n 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);\n }\n\n :host([variant='dashed']) .button:focus-visible {\n border-style: solid;\n }\n\n :host(.pk-dialog__close) .button:focus-visible {\n box-shadow: 0 0 0 2px var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group) {\n position: relative;\n }\n\n :host-context(pk-button-group[orientation='vertical']) {\n display: block;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group[orientation='vertical']) .button {\n width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group:focus-visible) {\n z-index: 2;\n }\n\n / Bordered variants — matching border divider (filled uses margin gap via buttonGroupIndentStyles) /\n\n :host([variant='primary']) .button:focus-visible,\n :host([variant='secondary']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus-inset);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button {\n background: var(--pk-color-gray-500);\n color: var(--pk-color-white);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:hover:not(:disabled) {\n background: var(--pk-color-gray-550);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:active:not(:disabled) {\n background: var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([variant='link']) .button:focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n\n .button.loading {\n position: relative;\n cursor: default;\n pointer-events: none;\n }\n\n .label.loading {\n visibility: hidden;\n }\n\n .button.loading .icon-slot,\n .button.loading slot[name='start']::slotted(),\n .button.loading slot[name='end']::slotted() {\n visibility: hidden;\n }\n\n .button.caret .icon-slot--end.icon-slot--has-content {\n display: none;\n }\n\n / Scope to the caret span — the button host also gets class caret when\n with-caret is set; an unscoped .caret rule was adding 2px margin\n to the whole button and shifting dropdown anchors left. /\n .button > .caret {\n display: inline-flex;\n align-self: center;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n / Sits slightly further from the label than the flex gap alone. /\n margin-inline-start: 2px;\n }\n\n / Caret has its own per-size token (--pk-btn-caret-size), kept deliberately smaller than\n * --pk-btn-icon-size so it reads as a subordinate dropdown affordance next to real icons.\n /\n .button > .caret svg {\n display: block;\n width: var(--pk-btn-caret-size);\n height: var(--pk-btn-caret-size);\n }\n\n :host([group-trigger]) .button {\n padding-inline: 6px;\n }\n\n / Compact disclosure cap — hide content, keep only the shared SVG caret (centered). /\n :host([group-trigger]) .label,\n :host([group-trigger]) .icon-slot {\n display: none;\n }\n\n :host([group-trigger]) .button > .caret {\n margin-inline-start: 0;\n }\n\n :host([size='sm'][group-trigger]) .button,\n :host([size='xs'][group-trigger]) .button,\n :host([size='xxs'][group-trigger]) .button {\n padding-inline: 6px;\n }\n\n :host([size='lg'][group-trigger]) .button {\n padding-inline: 10px;\n }\n\n :host([size='xl'][group-trigger]) .button {\n padding-inline: 12px;\n }\n\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\n border-top-width: 1px;\n border-top-style: solid;\n border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-left-width: 1px;\n border-left-style: dashed;\n border-left-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-top-width: 1px;\n border-top-style: dashed;\n border-top-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-right-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-bottom-width: 0;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevronDown, iconToSvg } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { getButtonSpinnerSize, resolveSpinnerVariant } from '../spinner/spinner-utils.js';\nimport type { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '../spinner/pk-spinner.js';\n\nexport type { PkSpinnerSize };\nimport '../spinner/pk-spinner.js';\nimport { pkButtonStyles } from './pk-button.styles.js';\n\nexport type PkButtonVariant =\n \| 'default'\n \| 'primary'\n \| 'secondary'\n \| 'outline'\n \| 'transparent'\n \| 'link'\n \| 'dashed'\n \| 'none';\n\nexport type PkButtonSize = 'default' \| 'xxs' \| 'xs' \| 'sm' \| 'lg' \| 'xl' \| 'none';\n\nconst CARET_ICON = iconToSvg(chevronDown);\n\n/\n Craft-aligned action button.\n \n @slot - Button label\n * @slot start - Leading icon or prefix\n * @slot end - Trailing icon or suffix\n \n @csspart base - The native button / link element\n \n @cssproperty [--pk-btn-height=var(--pk-btn-height-default)] - Control height (also min-height).\n * @cssproperty [--pk-btn-font=var(--pk-btn-font-default)] - Label font size.\n * @cssproperty [--pk-btn-padding-inline=var(--pk-btn-padding-inline-default)] - Horizontal padding.\n * @cssproperty [--pk-btn-padding-block=0] - Vertical padding override.\n * @cssproperty [--pk-btn-icon-size=var(--pk-btn-icon-size-default)] - Start/end slot glyph size.\n * @cssproperty [--pk-btn-icon-gap=var(--pk-btn-icon-gap-default)] - Gap between icons and label.\n * @cssproperty [--pk-btn-caret-size=var(--pk-btn-caret-size-default)] - Built-in caret glyph size.\n * @cssproperty [--pk-btn-radius=var(--pk-btn-radius-default)] - Border radius.\n * @cssproperty [--pk-btn-fill] - Background fill (filled variants).\n * @cssproperty [--pk-btn-fill-hover] - Hover fill.\n * @cssproperty [--pk-btn-fill-active] - Active / pressed fill.\n * @cssproperty [--pk-btn-on] - Foreground color on filled variants.\n \n @dependency pk-spinner - Loading indicator rendered while `loading` is set.\n /\n@customElement('pk-button')\nexport class PkButton extends PkElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = pkButtonStyles;\n\n /* Visual treatment — filled, outline, link, etc. /\n @property({ reflect: true })\n variant: PkButtonVariant = 'default';\n\n /* Shared CP size scale (`xxs` … `xl`); `none` skips presets for host token overrides. /\n @property({ reflect: true })\n size: PkButtonSize = 'default';\n\n /* Disables the control and blocks activation. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Shows an inline spinner and prevents activation while busy. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /\n Override loading spinner size. When unset, derived from `size` via\n * `getButtonSpinnerSize` — same defaults as v1 Button (xxs/xs → xxs, lg/xl → sm, else xs).\n * Formie New Form passes `xs` on `size=\"lg\"` so the ring stays size-4 (1rem), not sm (1.5rem).\n /\n @property({ reflect: true, attribute: 'spinner-size' })\n spinnerSize?: PkSpinnerSize;\n\n /* Loading spinner visual style. Defaults from the button variant when unset. /\n @property({ reflect: true, attribute: 'spinner-variant' })\n spinnerVariant?: PkSpinnerVariant;\n\n /* Loading spinner tone. Defaults from the button variant when unset. /\n @property({ reflect: true, attribute: 'spinner-tone' })\n spinnerTone?: PkSpinnerTone;\n\n /* Shows a disclosure caret after the label. /\n @property({ type: Boolean, reflect: true, attribute: 'with-caret' })\n withCaret = false;\n\n /\n Compact chevron-only trigger for grouped split actions — Craft `.menubtn`.\n \n Not a variant or size: set this boolean on the disclosure end-cap in a split group.\n * Hides label/icons and draws a CSS `::after` chevron (0.4375rem, 2px borders).\n * Inherits `variant`/`size` from sibling buttons; inline padding narrows to 8px.\n * Do not pass a chevron icon — use `icon` + a start-slot icon for a padless square control.\n /\n @property({ type: Boolean, reflect: true, attribute: 'group-trigger' })\n groupTrigger = false;\n\n /\n Compact icon density: padless box that hugs the glyph (no square hit target).\n \n Prefer default icon-only usage for action rows — without this flag, icon-only\n * buttons are square (`width`/`height` = size height) with the glyph from\n * `--pk-btn-icon-size`. Use `icon` for dense × / ⋯ in cells.\n * For one-off dimensions use `size=\"none\"` and set `--pk-btn-` on the host.\n /\n @property({ type: Boolean, reflect: true })\n icon = false;\n\n /** When set, renders as an anchor instead of a button. /\n @property()\n href?: string;\n\n /* Anchor `target` when `href` is set. /\n @property()\n target?: string;\n\n /* Anchor `rel` when `href` is set. /\n @property()\n rel?: string;\n\n /* Native `name` when used as a submit/reset control. /\n @property()\n name?: string;\n\n /* Native `value` when used as a submit control. /\n @property()\n value?: string;\n\n /\n Accessible name for icon-only / unlabeled controls.\n * Applied as `aria-label` — never as HTML `title` (no native hover tooltip).\n * Prefer the `aria-label` attribute when setting from markup; `title` remains\n * as a concise alias for the same accessible name.\n /\n @property()\n title = '';\n\n /* Accessible name — wins over {@link title} when both are set. /\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Native button type — ignored when `href` is set. /\n @property()\n type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n HTML form owner id — same as native `<button form=\"…\">`.\n * Needed when the submit control lives outside the `<form>` (e.g. dialog footer).\n /\n @property({ reflect: true })\n form?: string;\n\n @state()\n private hasDefaultSlotContent = false;\n\n @state()\n private hasStartSlotContent = false;\n\n @state()\n private hasEndSlotContent = false;\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private iconSlotChanged(event: Event, which: 'start' \| 'end'): void {\n const slot = event.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n\n if (which === 'start') {\n this.hasStartSlotContent = hasContent;\n } else {\n this.hasEndSlotContent = hasContent;\n }\n }\n\n private startSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'start');\n };\n\n private endSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'end');\n };\n\n private buttonClasses() {\n return classMap({\n button: true,\n 'has-label': this.hasDefaultSlotContent,\n loading: this.loading,\n caret: this.withCaret,\n 'group-trigger': this.groupTrigger,\n });\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('data-slot', 'button');\n this.addEventListener('click', this.handleHostClick);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('click', this.handleHostClick);\n super.disconnectedCallback();\n }\n\n /\n Resolve the light-DOM form for submit/reset.\n * Prefer `form` id (dialog footer submitters), then ancestor `<form>`.\n * Never target Craft’s `#main` shell.\n /\n private resolveAssociatedForm(): HTMLFormElement \| null {\n const byId = (this.form \|\| this.getAttribute('form') \|\| '').trim();\n\n if (byId) {\n const el = this.ownerDocument?.getElementById(byId);\n\n if (el instanceof HTMLFormElement && el.id !== 'main') {\n return el;\n }\n }\n\n const closest = this.closest('form');\n\n if (closest && closest.id !== 'main') {\n return closest;\n }\n\n return null;\n }\n\n /\n Shadow inner `<button type=\"submit\|reset\">` is not a form owner for an\n * ancestor light-DOM `<form>` — bridge click → `requestSubmit` / `reset`.\n * Skip Craft’s `#main` shell form (same guard as implicit Enter submit).\n */\n private handleHostClick = (event: MouseEvent): void => {\n if (this.disabled \|\| this.loading \|\| this.href) {\n return;\n }\n\n if (this.type !== 'submit' && this.type !== 'reset') {\n return;\n }\n\n const form = this.resolveAssociatedForm();\n\n if (!form) {\n return;\n }\n\n // Stop the inner shadow button’s non-associated default; we own submit/reset.\n event.preventDefault();\n event.stopPropagation();\n\n if (this.type === 'reset') {\n form.reset();\n return;\n }\n\n if (typeof form.requestSubmit === 'function') {\n form.requestSubmit();\n return;\n }\n\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n };\n\n override render() {\n // Explicit spinner-size wins (v1 Button `spinnerSize`); else map from button size.\n const spinnerSize = this.spinnerSize \|\| getButtonSpinnerSize(this.size);\n const spinnerVariant = resolveSpinnerVariant(this.variant, this.spinnerVariant);\n const isLink = Boolean(this.href);\n // Accessible name only — never HTML title (native tooltips get in the way).\n const accessibleName = this.ariaLabel \|\| this.title \|\| '';\n\n return html`\n ${isLink\n ? html`\n <a\n part=\"base\"\n class=${this.buttonClasses()}\n href=${this.href!}\n target=${this.target ?? nothing}\n rel=${this.rel ?? nothing}\n aria-label=${accessibleName \|\| nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </a>\n `\n : html`\n <button\n part=\"base\"\n class=${this.buttonClasses()}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n aria-label=${accessibleName \|\| nothing}\n name=${this.name ?? nothing}\n value=${this.value ?? nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </button>\n `}\n `;\n }\n\n private renderInner(spinnerSize: PkSpinnerSize, spinnerVariant: PkSpinnerVariant) {\n return html`\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--start': true,\n 'icon-slot--has-content': this.hasStartSlotContent,\n })}\n >\n <slot name=\"start\" @slotchange=${this.startSlotChanged}></slot>\n </span>\n ${this.loading\n ? html`\n <pk-spinner\n variant=${spinnerVariant}\n size=${spinnerSize}\n tone=${this.spinnerTone ?? nothing}\n centered\n ></pk-spinner>\n `\n : nothing}\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n loading: this.loading,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--end': true,\n 'icon-slot--has-content': this.hasEndSlotContent,\n })}\n >\n <slot name=\"end\" @slotchange=${this.endSlotChanged}></slot>\n </span>\n ${this.withCaret \|\| this.groupTrigger\n ? html`<span part=\"caret\" class=\"caret\">${unsafeSVG(CARET_ICON)}</span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button': PkButton;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-button-group-BSz5T5iS.js → pk-button-group-DBdKK_2_.js} RENAMED Viewed

@@ -418,4 +418,4 @@ PkButtonGroup = __decorate([customElement("pk-button-group")], PkButtonGroup);
 //#endregion
 export { PkButtonGroup as t };
-//# sourceMappingURL=pk-button-group-BSz5T5iS.js.map
+//# sourceMappingURL=pk-button-group-DBdKK_2_.js.map

package/dist/chunks/{pk-button-group-BSz5T5iS.js.map → pk-button-group-DBdKK_2_.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-button-group-BSz5T5iS.js","names":[],"sources":["../../src/components/button-group/pk-button-group.styles.ts","../../src/components/button-group/pk-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkButtonGroupStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n width: fit-content;\n vertical-align: middle;\n }\n\n .group {\n display: flex;\n position: relative;\n isolation: isolate;\n flex-wrap: nowrap;\n gap: 0;\n width: fit-content;\n max-width: 100%;\n align-items: stretch;\n }\n\n :host([orientation='horizontal']) .group {\n flex-direction: row;\n }\n\n :host([orientation='vertical']) .group {\n flex-direction: column;\n align-items: stretch;\n }\n\n :host([orientation='vertical']) ::slotted(pk-button),\n :host([orientation='vertical']) ::slotted(pk-toggle),\n :host([orientation='vertical']) ::slotted(pk-input),\n :host([orientation='vertical']) ::slotted(pk-input-group),\n :host([orientation='vertical']) ::slotted(.button-group-text),\n :host([orientation='vertical']) ::slotted(select.button-group-select) {\n align-self: stretch;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n @media (hover: hover) {\n .group > :hover,\n ::slotted(:hover) {\n z-index: 1;\n }\n }\n\n .group > :focus-visible,\n ::slotted(:focus-visible),\n ::slotted(:focus-within),\n ::slotted([aria-checked='true']),\n ::slotted([checked]) {\n position: relative;\n z-index: 2;\n }\n\n /* Flush join: filled controls sit edge-to-edge; outlined controls overlap 1px to collapse borders /\n :host([orientation='horizontal']) {\n --pk-bg-horizontal-indent: 0;\n --pk-bg-horizontal-indent-outlined: -1px;\n --pk-btn-group-gap: 1px;\n --pk-btn-group-divider-color-outline: var(--pk-color-slate-400);\n --pk-btn-group-divider-color-dashed: var(--pk-color-slate-500);\n }\n\n :host([orientation='vertical']) {\n --pk-bg-vertical-indent: 0;\n --pk-bg-vertical-indent-outlined: -1px;\n --pk-btn-group-gap: 1px;\n --pk-btn-group-divider-color-outline: var(--pk-color-slate-400);\n --pk-btn-group-divider-color-dashed: var(--pk-color-slate-500);\n }\n\n :host([separators][orientation='horizontal']) {\n --pk-bg-horizontal-indent: 0;\n }\n\n :host([separators][orientation='vertical']) {\n --pk-bg-vertical-indent: 0;\n }\n\n ::slotted([data-pk-group-orientation='horizontal']:not([data-pk-group-item-first]):not([data-pk-group-item-last])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-start-end-radius: 0;\n --pk-bg-end-start-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-item-first]:not([data-pk-group-item-last])) {\n --pk-bg-start-end-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-item-last]:not([data-pk-group-item-first])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-end-start-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='vertical']:not([data-pk-group-item-first]):not([data-pk-group-item-last])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-start-end-radius: 0;\n --pk-bg-end-start-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='vertical'][data-pk-group-item-first]:not([data-pk-group-item-last])) {\n --pk-bg-end-start-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='vertical'][data-pk-group-item-last]:not([data-pk-group-item-first])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-start-end-radius: 0;\n }\n\n :host([exclusive]) ::slotted(pk-button[aria-pressed='true']) {\n --pk-btn-fill: var(--pk-color-gray-500);\n --pk-btn-fill-hover: var(--pk-color-gray-550);\n --pk-btn-fill-active: var(--pk-color-gray-600);\n --pk-btn-on: var(--pk-color-white);\n }\n\n :host:has(::slotted(pk-button-group-separator)) {\n --pk-btn-group-separator-color: transparent;\n }\n\n ::slotted(pk-input),\n ::slotted(pk-input-group) {\n width: auto;\n flex: 0 1 auto;\n align-self: stretch;\n }\n\n ::slotted(pk-popover),\n ::slotted(pk-dropdown-menu) {\n display: inline-flex;\n align-self: auto;\n flex: 0 0 auto;\n }\n\n ::slotted(.button-group-text) {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-height: var(--pk-btn-height-default);\n padding: 0 0.625rem;\n border-width: 1px;\n border-style: solid;\n border-color: var(--pk-color-slate-400);\n background: var(--pk-color-gray-100);\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n font-weight: 500;\n line-height: var(--pk-line-height);\n box-sizing: border-box;\n white-space: nowrap;\n border-top-left-radius: var(--pk-bg-start-start-radius, var(--pk-radius-lg));\n border-top-right-radius: var(--pk-bg-start-end-radius, var(--pk-radius-lg));\n border-bottom-left-radius: var(--pk-bg-end-start-radius, var(--pk-radius-lg));\n border-bottom-right-radius: var(--pk-bg-end-end-radius, var(--pk-radius-lg));\n }\n\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider]).button-group-text),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])select.button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])pk-input-group) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n border-left-width: 0;\n }\n\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider]).button-group-text),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])select.button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])pk-input-group) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n border-top-width: 0;\n }\n\n ::slotted(select.button-group-select) {\n display: block;\n margin: 0;\n padding: 0 10px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--pk-color-slate-400);\n background: var(--pk-color-white);\n color: var(--pk-color-gray-900);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n align-self: stretch;\n min-height: var(--pk-btn-height-default);\n height: var(--pk-btn-height-default);\n border-top-left-radius: var(--pk-bg-start-start-radius, var(--pk-radius-lg));\n border-top-right-radius: var(--pk-bg-start-end-radius, var(--pk-radius-lg));\n border-bottom-left-radius: var(--pk-bg-end-start-radius, var(--pk-radius-lg));\n border-bottom-right-radius: var(--pk-bg-end-end-radius, var(--pk-radius-lg));\n }\n\n ::slotted(pk-separator) {\n align-self: stretch;\n }\n\n ::slotted(pk-separator[orientation='vertical']),\n ::slotted(pk-button-group-separator) {\n height: auto;\n flex-shrink: 0;\n }\n\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join].button-group-text),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]select.button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]pk-input-group) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n }\n\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join].button-group-text),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]select.button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]pk-input-group) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n :host([orientation='horizontal']) ::slotted(.button-group-text[data-pk-group-divider]),\n :host([orientation='horizontal']) ::slotted(select.button-group-select[data-pk-group-divider]),\n :host([orientation='horizontal']) ::slotted(pk-input-group[data-pk-group-divider]) {\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n box-shadow: none;\n }\n\n :host([orientation='vertical']) ::slotted(.button-group-text[data-pk-group-divider]),\n :host([orientation='vertical']) ::slotted(select.button-group-select[data-pk-group-divider]),\n :host([orientation='vertical']) ::slotted(pk-input-group[data-pk-group-divider]) {\n border-top-width: 1px;\n border-top-style: solid;\n border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n box-shadow: none;\n }\n\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail].button-group-text),\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail].button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail]select.button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail]pk-input-group) {\n border-right-width: 0;\n }\n\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail].button-group-text),\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail].button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail]select.button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail]pk-input-group) {\n border-bottom-width: 0;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupStyles } from './pk-button-group.styles.js';\n\nexport type PkButtonGroupOrientation = 'horizontal' \| 'vertical';\n\nconst GROUP_JOIN_ATTR = 'data-pk-group-join';\nconst GROUP_DIVIDER_ATTR = 'data-pk-group-divider';\nconst GROUP_ITEM_FIRST = 'data-pk-group-item-first';\nconst GROUP_ITEM_LAST = 'data-pk-group-item-last';\nconst GROUP_INTERNAL_TRAIL = 'data-pk-group-internal-trail';\nconst GROUP_BTN_LAST = 'data-pk-group-btn-last';\nconst GROUP_ORIENTATION_ATTR = 'data-pk-group-orientation';\nconst GROUP_SEPARATOR_TAGS = new Set(['PK-SEPARATOR', 'PK-BUTTON-GROUP-SEPARATOR']);\nconst OVERLAY_WRAPPER_TAGS = new Set(['PK-POPOVER', 'PK-DROPDOWN-MENU']);\n\n/* Boolean attribute defaulting to true — absent means on; `separators=\"false\"` opts out. /\nconst separatorsConverter = {\n fromAttribute(value: string \| null): boolean {\n if (value === null) {\n return true;\n }\n\n return value !== 'false';\n },\n toAttribute(value: boolean): string \| null {\n if (value) {\n return '';\n }\n\n return 'false';\n },\n};\n\nfunction isGroupSeparator(element: Element): boolean {\n return GROUP_SEPARATOR_TAGS.has(element.tagName);\n}\n\nfunction getLayoutTarget(element: Element): Element {\n if (OVERLAY_WRAPPER_TAGS.has(element.tagName)) {\n return element.querySelector('[slot=\"trigger\"]') ?? element;\n }\n\n return element;\n}\n\nfunction getLayoutTargets(element: Element): Element[] {\n if (OVERLAY_WRAPPER_TAGS.has(element.tagName)) {\n const trigger = getLayoutTarget(element);\n\n return trigger === element ? [element] : [element, trigger];\n }\n\n return [element];\n}\n\nfunction getCornerTargets(element: Element, surface: Element): Element[] {\n return element === surface ? [element] : [element, surface];\n}\n\nfunction collectSyncTargets(element: Element): Element[] {\n const surface = getLayoutTarget(element);\n\n return [...new Set([...getLayoutTargets(element), ...getCornerTargets(element, surface)])];\n}\n\nfunction clearLayoutAttrs(element: Element): void {\n for (const target of collectSyncTargets(element)) {\n target.removeAttribute(GROUP_JOIN_ATTR);\n target.removeAttribute(GROUP_DIVIDER_ATTR);\n target.removeAttribute(GROUP_ITEM_FIRST);\n target.removeAttribute(GROUP_ITEM_LAST);\n target.removeAttribute(GROUP_INTERNAL_TRAIL);\n target.removeAttribute(GROUP_BTN_LAST);\n target.removeAttribute(GROUP_ORIENTATION_ATTR);\n }\n}\n\nfunction isGroupTrigger(element: Element): boolean {\n const target = getLayoutTarget(element);\n\n return target.hasAttribute('group-trigger')\n \|\| element.hasAttribute('group-trigger');\n}\n\nfunction splitSegments(items: Element[]): Element[][] {\n const segments: Element[][] = [];\n let current: Element[] = [];\n\n for (const item of items) {\n if (isGroupSeparator(item)) {\n if (current.length) {\n segments.push(current);\n }\n\n current = [];\n continue;\n }\n\n current.push(item);\n }\n\n if (current.length) {\n segments.push(current);\n }\n\n return segments;\n}\n\n/\n Visually groups related buttons — `pk-button-group` pattern (CSS var join, no JS).\n \n @slot - Buttons, toolbars, and overlay triggers\n \n @csspart base - Group container\n /\n@customElement('pk-button-group')\nexport class PkButtonGroup extends PkElement {\n static override styles = pkButtonGroupStyles;\n\n @property({ reflect: true })\n orientation: PkButtonGroupOrientation = 'horizontal';\n\n /\n Draw 1px dividers between adjacent controls (Craft default).\n * Set `separators=\"false\"` for flush join. Explicit `pk-button-group-separator` elements always work for segment splits.\n /\n @property({ type: Boolean, reflect: true, converter: separatorsConverter })\n separators = true;\n\n /\n Exclusive icon/text toggle styling — Craft `.btngroup--exclusive`.\n * Use with `pk-toggle` items for view-mode pickers.\n /\n @property({ type: Boolean, reflect: true })\n exclusive = false;\n\n /* Accessible label for the group — `pk-button-group.label`. /\n @property()\n label = '';\n\n @query('slot:not([name])')\n private defaultSlot!: HTMLSlotElement;\n\n override firstUpdated(): void {\n this.scheduleSyncGroupLayout();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('orientation')) {\n this.setAttribute('aria-orientation', this.orientation);\n this.scheduleSyncGroupLayout();\n }\n\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n\n if (changed.has('separators') \|\| changed.has('exclusive')) {\n this.scheduleSyncGroupLayout();\n }\n }\n\n private scheduleSyncGroupLayout(): void {\n this.syncGroupLayout();\n queueMicrotask(() => this.syncGroupLayout());\n }\n\n private handleSlotChange(): void {\n this.scheduleSyncGroupLayout();\n }\n\n /* Overlap-join adjacent items within each segment; 1px divider between joins when `separators` is on. */\n private syncGroupLayout(): void {\n const items = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];\n const segments = splitSegments(items);\n\n for (const element of items) {\n clearLayoutAttrs(element);\n }\n\n for (const element of items) {\n for (const target of collectSyncTargets(element)) {\n target.setAttribute(GROUP_ORIENTATION_ATTR, this.orientation);\n }\n }\n\n for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {\n const segment = segments[segmentIndex];\n const isFirstSegment = segmentIndex === 0;\n const isLastSegment = segmentIndex === segments.length - 1;\n\n for (let index = 0; index < segment.length; index++) {\n const element = segment[index];\n const surface = getLayoutTarget(element);\n const cornerTargets = getCornerTargets(element, surface);\n const isOnly = segment.length === 1;\n const isFirst = index === 0;\n const isLast = index === segment.length - 1;\n\n for (const target of cornerTargets) {\n if (isOnly) {\n if (isFirstSegment) {\n target.setAttribute(GROUP_ITEM_FIRST, '');\n }\n\n if (isLastSegment) {\n target.setAttribute(GROUP_ITEM_LAST, '');\n }\n } else {\n if (isFirst) {\n target.setAttribute(GROUP_ITEM_FIRST, '');\n }\n\n if (isLast) {\n target.setAttribute(GROUP_ITEM_LAST, '');\n }\n }\n }\n\n if (isFirst) {\n if (this.separators && !isLast) {\n for (const target of getLayoutTargets(element)) {\n target.setAttribute(GROUP_INTERNAL_TRAIL, '');\n }\n }\n\n continue;\n }\n\n for (const target of getLayoutTargets(element)) {\n target.setAttribute(GROUP_JOIN_ATTR, '');\n\n if (this.separators) {\n target.setAttribute(GROUP_DIVIDER_ATTR, '');\n }\n }\n\n if (this.separators && !isLast) {\n for (const target of getLayoutTargets(element)) {\n target.setAttribute(GROUP_INTERNAL_TRAIL, '');\n }\n }\n\n if (isGroupTrigger(element)) {\n surface.setAttribute(GROUP_BTN_LAST, '');\n }\n }\n }\n }\n\n override render() {\n return html`\n <div part=\"base\" class=\"group\" role=\"group\" aria-label=${this.label \|\| nothing}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button-group': PkButtonGroup;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-button-group-DBdKK_2_.js","names":[],"sources":["../../src/components/button-group/pk-button-group.styles.ts","../../src/components/button-group/pk-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkButtonGroupStyles = css`\n @layer pk-component {\n :host {\n display: inline-flex;\n width: fit-content;\n vertical-align: middle;\n }\n\n .group {\n display: flex;\n position: relative;\n isolation: isolate;\n flex-wrap: nowrap;\n gap: 0;\n width: fit-content;\n max-width: 100%;\n align-items: stretch;\n }\n\n :host([orientation='horizontal']) .group {\n flex-direction: row;\n }\n\n :host([orientation='vertical']) .group {\n flex-direction: column;\n align-items: stretch;\n }\n\n :host([orientation='vertical']) ::slotted(pk-button),\n :host([orientation='vertical']) ::slotted(pk-toggle),\n :host([orientation='vertical']) ::slotted(pk-input),\n :host([orientation='vertical']) ::slotted(pk-input-group),\n :host([orientation='vertical']) ::slotted(.button-group-text),\n :host([orientation='vertical']) ::slotted(select.button-group-select) {\n align-self: stretch;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n @media (hover: hover) {\n .group > :hover,\n ::slotted(:hover) {\n z-index: 1;\n }\n }\n\n .group > :focus-visible,\n ::slotted(:focus-visible),\n ::slotted(:focus-within),\n ::slotted([aria-checked='true']),\n ::slotted([checked]) {\n position: relative;\n z-index: 2;\n }\n\n /* Flush join: filled controls sit edge-to-edge; outlined controls overlap 1px to collapse borders /\n :host([orientation='horizontal']) {\n --pk-bg-horizontal-indent: 0;\n --pk-bg-horizontal-indent-outlined: -1px;\n --pk-btn-group-gap: 1px;\n --pk-btn-group-divider-color-outline: var(--pk-color-slate-400);\n --pk-btn-group-divider-color-dashed: var(--pk-color-slate-500);\n }\n\n :host([orientation='vertical']) {\n --pk-bg-vertical-indent: 0;\n --pk-bg-vertical-indent-outlined: -1px;\n --pk-btn-group-gap: 1px;\n --pk-btn-group-divider-color-outline: var(--pk-color-slate-400);\n --pk-btn-group-divider-color-dashed: var(--pk-color-slate-500);\n }\n\n :host([separators][orientation='horizontal']) {\n --pk-bg-horizontal-indent: 0;\n }\n\n :host([separators][orientation='vertical']) {\n --pk-bg-vertical-indent: 0;\n }\n\n ::slotted([data-pk-group-orientation='horizontal']:not([data-pk-group-item-first]):not([data-pk-group-item-last])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-start-end-radius: 0;\n --pk-bg-end-start-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-item-first]:not([data-pk-group-item-last])) {\n --pk-bg-start-end-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-item-last]:not([data-pk-group-item-first])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-end-start-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='vertical']:not([data-pk-group-item-first]):not([data-pk-group-item-last])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-start-end-radius: 0;\n --pk-bg-end-start-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='vertical'][data-pk-group-item-first]:not([data-pk-group-item-last])) {\n --pk-bg-end-start-radius: 0;\n --pk-bg-end-end-radius: 0;\n }\n\n ::slotted([data-pk-group-orientation='vertical'][data-pk-group-item-last]:not([data-pk-group-item-first])) {\n --pk-bg-start-start-radius: 0;\n --pk-bg-start-end-radius: 0;\n }\n\n :host([exclusive]) ::slotted(pk-button[aria-pressed='true']) {\n --pk-btn-fill: var(--pk-color-gray-500);\n --pk-btn-fill-hover: var(--pk-color-gray-550);\n --pk-btn-fill-active: var(--pk-color-gray-600);\n --pk-btn-on: var(--pk-color-white);\n }\n\n :host:has(::slotted(pk-button-group-separator)) {\n --pk-btn-group-separator-color: transparent;\n }\n\n ::slotted(pk-input),\n ::slotted(pk-input-group) {\n width: auto;\n flex: 0 1 auto;\n align-self: stretch;\n }\n\n ::slotted(pk-popover),\n ::slotted(pk-dropdown-menu) {\n display: inline-flex;\n align-self: auto;\n flex: 0 0 auto;\n }\n\n ::slotted(.button-group-text) {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n min-height: var(--pk-btn-height-default);\n padding: 0 0.625rem;\n border-width: 1px;\n border-style: solid;\n border-color: var(--pk-color-slate-400);\n background: var(--pk-color-gray-100);\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n font-weight: 500;\n line-height: var(--pk-line-height);\n box-sizing: border-box;\n white-space: nowrap;\n border-top-left-radius: var(--pk-bg-start-start-radius, var(--pk-radius-lg));\n border-top-right-radius: var(--pk-bg-start-end-radius, var(--pk-radius-lg));\n border-bottom-left-radius: var(--pk-bg-end-start-radius, var(--pk-radius-lg));\n border-bottom-right-radius: var(--pk-bg-end-end-radius, var(--pk-radius-lg));\n }\n\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider]).button-group-text),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])select.button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])pk-input-group) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n border-left-width: 0;\n }\n\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider]).button-group-text),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])select.button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])pk-input-group) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n border-top-width: 0;\n }\n\n ::slotted(select.button-group-select) {\n display: block;\n margin: 0;\n padding: 0 10px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--pk-color-slate-400);\n background: var(--pk-color-white);\n color: var(--pk-color-gray-900);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-base);\n line-height: 1.4;\n appearance: none;\n box-sizing: border-box;\n align-self: stretch;\n min-height: var(--pk-btn-height-default);\n height: var(--pk-btn-height-default);\n border-top-left-radius: var(--pk-bg-start-start-radius, var(--pk-radius-lg));\n border-top-right-radius: var(--pk-bg-start-end-radius, var(--pk-radius-lg));\n border-bottom-left-radius: var(--pk-bg-end-start-radius, var(--pk-radius-lg));\n border-bottom-right-radius: var(--pk-bg-end-end-radius, var(--pk-radius-lg));\n }\n\n ::slotted(pk-separator) {\n align-self: stretch;\n }\n\n ::slotted(pk-separator[orientation='vertical']),\n ::slotted(pk-button-group-separator) {\n height: auto;\n flex-shrink: 0;\n }\n\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join].button-group-text),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]select.button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]pk-input-group) {\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n }\n\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join].button-group-text),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]select.button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]pk-input-group) {\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n :host([orientation='horizontal']) ::slotted(.button-group-text[data-pk-group-divider]),\n :host([orientation='horizontal']) ::slotted(select.button-group-select[data-pk-group-divider]),\n :host([orientation='horizontal']) ::slotted(pk-input-group[data-pk-group-divider]) {\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n box-shadow: none;\n }\n\n :host([orientation='vertical']) ::slotted(.button-group-text[data-pk-group-divider]),\n :host([orientation='vertical']) ::slotted(select.button-group-select[data-pk-group-divider]),\n :host([orientation='vertical']) ::slotted(pk-input-group[data-pk-group-divider]) {\n border-top-width: 1px;\n border-top-style: solid;\n border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n box-shadow: none;\n }\n\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail].button-group-text),\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail].button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail]select.button-group-select),\n :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail]pk-input-group) {\n border-right-width: 0;\n }\n\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail].button-group-text),\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail].button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail]select.button-group-select),\n :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail]pk-input-group) {\n border-bottom-width: 0;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupStyles } from './pk-button-group.styles.js';\n\nexport type PkButtonGroupOrientation = 'horizontal' \| 'vertical';\n\nconst GROUP_JOIN_ATTR = 'data-pk-group-join';\nconst GROUP_DIVIDER_ATTR = 'data-pk-group-divider';\nconst GROUP_ITEM_FIRST = 'data-pk-group-item-first';\nconst GROUP_ITEM_LAST = 'data-pk-group-item-last';\nconst GROUP_INTERNAL_TRAIL = 'data-pk-group-internal-trail';\nconst GROUP_BTN_LAST = 'data-pk-group-btn-last';\nconst GROUP_ORIENTATION_ATTR = 'data-pk-group-orientation';\nconst GROUP_SEPARATOR_TAGS = new Set(['PK-SEPARATOR', 'PK-BUTTON-GROUP-SEPARATOR']);\nconst OVERLAY_WRAPPER_TAGS = new Set(['PK-POPOVER', 'PK-DROPDOWN-MENU']);\n\n/* Boolean attribute defaulting to true — absent means on; `separators=\"false\"` opts out. /\nconst separatorsConverter = {\n fromAttribute(value: string \| null): boolean {\n if (value === null) {\n return true;\n }\n\n return value !== 'false';\n },\n toAttribute(value: boolean): string \| null {\n if (value) {\n return '';\n }\n\n return 'false';\n },\n};\n\nfunction isGroupSeparator(element: Element): boolean {\n return GROUP_SEPARATOR_TAGS.has(element.tagName);\n}\n\nfunction getLayoutTarget(element: Element): Element {\n if (OVERLAY_WRAPPER_TAGS.has(element.tagName)) {\n return element.querySelector('[slot=\"trigger\"]') ?? element;\n }\n\n return element;\n}\n\nfunction getLayoutTargets(element: Element): Element[] {\n if (OVERLAY_WRAPPER_TAGS.has(element.tagName)) {\n const trigger = getLayoutTarget(element);\n\n return trigger === element ? [element] : [element, trigger];\n }\n\n return [element];\n}\n\nfunction getCornerTargets(element: Element, surface: Element): Element[] {\n return element === surface ? [element] : [element, surface];\n}\n\nfunction collectSyncTargets(element: Element): Element[] {\n const surface = getLayoutTarget(element);\n\n return [...new Set([...getLayoutTargets(element), ...getCornerTargets(element, surface)])];\n}\n\nfunction clearLayoutAttrs(element: Element): void {\n for (const target of collectSyncTargets(element)) {\n target.removeAttribute(GROUP_JOIN_ATTR);\n target.removeAttribute(GROUP_DIVIDER_ATTR);\n target.removeAttribute(GROUP_ITEM_FIRST);\n target.removeAttribute(GROUP_ITEM_LAST);\n target.removeAttribute(GROUP_INTERNAL_TRAIL);\n target.removeAttribute(GROUP_BTN_LAST);\n target.removeAttribute(GROUP_ORIENTATION_ATTR);\n }\n}\n\nfunction isGroupTrigger(element: Element): boolean {\n const target = getLayoutTarget(element);\n\n return target.hasAttribute('group-trigger')\n \|\| element.hasAttribute('group-trigger');\n}\n\nfunction splitSegments(items: Element[]): Element[][] {\n const segments: Element[][] = [];\n let current: Element[] = [];\n\n for (const item of items) {\n if (isGroupSeparator(item)) {\n if (current.length) {\n segments.push(current);\n }\n\n current = [];\n continue;\n }\n\n current.push(item);\n }\n\n if (current.length) {\n segments.push(current);\n }\n\n return segments;\n}\n\n/\n Visually groups related buttons — `pk-button-group` pattern (CSS var join, no JS).\n \n @slot - Buttons, toolbars, and overlay triggers\n \n @csspart base - Group container\n /\n@customElement('pk-button-group')\nexport class PkButtonGroup extends PkElement {\n static override styles = pkButtonGroupStyles;\n\n @property({ reflect: true })\n orientation: PkButtonGroupOrientation = 'horizontal';\n\n /\n Draw 1px dividers between adjacent controls (Craft default).\n * Set `separators=\"false\"` for flush join. Explicit `pk-button-group-separator` elements always work for segment splits.\n /\n @property({ type: Boolean, reflect: true, converter: separatorsConverter })\n separators = true;\n\n /\n Exclusive icon/text toggle styling — Craft `.btngroup--exclusive`.\n * Use with `pk-toggle` items for view-mode pickers.\n /\n @property({ type: Boolean, reflect: true })\n exclusive = false;\n\n /* Accessible label for the group — `pk-button-group.label`. /\n @property()\n label = '';\n\n @query('slot:not([name])')\n private defaultSlot!: HTMLSlotElement;\n\n override firstUpdated(): void {\n this.scheduleSyncGroupLayout();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('orientation')) {\n this.setAttribute('aria-orientation', this.orientation);\n this.scheduleSyncGroupLayout();\n }\n\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n\n if (changed.has('separators') \|\| changed.has('exclusive')) {\n this.scheduleSyncGroupLayout();\n }\n }\n\n private scheduleSyncGroupLayout(): void {\n this.syncGroupLayout();\n queueMicrotask(() => this.syncGroupLayout());\n }\n\n private handleSlotChange(): void {\n this.scheduleSyncGroupLayout();\n }\n\n /* Overlap-join adjacent items within each segment; 1px divider between joins when `separators` is on. */\n private syncGroupLayout(): void {\n const items = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];\n const segments = splitSegments(items);\n\n for (const element of items) {\n clearLayoutAttrs(element);\n }\n\n for (const element of items) {\n for (const target of collectSyncTargets(element)) {\n target.setAttribute(GROUP_ORIENTATION_ATTR, this.orientation);\n }\n }\n\n for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {\n const segment = segments[segmentIndex];\n const isFirstSegment = segmentIndex === 0;\n const isLastSegment = segmentIndex === segments.length - 1;\n\n for (let index = 0; index < segment.length; index++) {\n const element = segment[index];\n const surface = getLayoutTarget(element);\n const cornerTargets = getCornerTargets(element, surface);\n const isOnly = segment.length === 1;\n const isFirst = index === 0;\n const isLast = index === segment.length - 1;\n\n for (const target of cornerTargets) {\n if (isOnly) {\n if (isFirstSegment) {\n target.setAttribute(GROUP_ITEM_FIRST, '');\n }\n\n if (isLastSegment) {\n target.setAttribute(GROUP_ITEM_LAST, '');\n }\n } else {\n if (isFirst) {\n target.setAttribute(GROUP_ITEM_FIRST, '');\n }\n\n if (isLast) {\n target.setAttribute(GROUP_ITEM_LAST, '');\n }\n }\n }\n\n if (isFirst) {\n if (this.separators && !isLast) {\n for (const target of getLayoutTargets(element)) {\n target.setAttribute(GROUP_INTERNAL_TRAIL, '');\n }\n }\n\n continue;\n }\n\n for (const target of getLayoutTargets(element)) {\n target.setAttribute(GROUP_JOIN_ATTR, '');\n\n if (this.separators) {\n target.setAttribute(GROUP_DIVIDER_ATTR, '');\n }\n }\n\n if (this.separators && !isLast) {\n for (const target of getLayoutTargets(element)) {\n target.setAttribute(GROUP_INTERNAL_TRAIL, '');\n }\n }\n\n if (isGroupTrigger(element)) {\n surface.setAttribute(GROUP_BTN_LAST, '');\n }\n }\n }\n }\n\n override render() {\n return html`\n <div part=\"base\" class=\"group\" role=\"group\" aria-label=${this.label \|\| nothing}>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button-group': PkButtonGroup;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-button-group-separator-DH3Rl24b.js → pk-button-group-separator-D0Aa0a0f.js} RENAMED Viewed

@@ -57,4 +57,4 @@ PkButtonGroupSeparator = __decorate([customElement("pk-button-group-separator")]
 //#endregion
 export { PkButtonGroupSeparator as t };
-//# sourceMappingURL=pk-button-group-separator-DH3Rl24b.js.map
+//# sourceMappingURL=pk-button-group-separator-D0Aa0a0f.js.map

package/dist/chunks/{pk-button-group-separator-DH3Rl24b.js.map → pk-button-group-separator-D0Aa0a0f.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-button-group-separator-~~DH3Rl24b~~.js","names":[],"sources":["../../src/components/button-group/pk-button-group-separator.styles.ts","../../src/components/button-group/pk-button-group-separator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkButtonGroupSeparatorStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n align-self: stretch;\n flex-shrink: 0;\n }\n\n .separator {\n display: block;\n width: 1px;\n height: 100%;\n margin-block: 1px;\n background: var(--pk-btn-group-separator-color, transparent);\n }\n\n :host-context(pk-button-group[orientation='vertical']) {\n display: block;\n width: 100%;\n height: auto;\n }\n\n :host-context(pk-button-group[orientation='vertical']) .separator {\n width: 100%;\n height: 1px;\n margin-block: 1px;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupSeparatorStyles } from './pk-button-group-separator.styles.js';\n\nexport type PkButtonGroupSeparatorOrientation = 'horizontal' \| 'vertical';\n\n/*\n Vertical separator for button groups.\n \n @csspart base - Separator element\n */\n@customElement('pk-button-group-separator')\nexport class PkButtonGroupSeparator extends PkElement {\n static override styles = pkButtonGroupSeparatorStyles;\n\n @property({ reflect: true })\n orientation: PkButtonGroupSeparatorOrientation = 'vertical';\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=\"separator pk-btn-group__separator\"\n role=\"separator\"\n aria-orientation=${this.orientation}\n data-orientation=${this.orientation}\n ></div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button-group-separator': PkButtonGroupSeparator;\n }\n}\n"],"mappings":";;;AAEA,IAAa,+BAA+B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYxC,IAAA,yBAAA,MAAM,+BAA+B,UAAU;;;qBAID;;;gBAHxB;;CAKzB,SAAkB;AACd,SAAO,IAAI;;;;;mCAKgB,KAAK,YAAY;mCACjB,KAAK,YAAY;;;;;YAV/C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;qCAJ/B,cAAc,4BAA4B,CAAA,EAAA,uBAAA"}
1	+ {"version":3,"file":"pk-button-group-separator-D0Aa0a0f.js","names":[],"sources":["../../src/components/button-group/pk-button-group-separator.styles.ts","../../src/components/button-group/pk-button-group-separator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkButtonGroupSeparatorStyles = css`\n @layer pk-component {\n :host {\n display: inline-block;\n align-self: stretch;\n flex-shrink: 0;\n }\n\n .separator {\n display: block;\n width: 1px;\n height: 100%;\n margin-block: 1px;\n background: var(--pk-btn-group-separator-color, transparent);\n }\n\n :host-context(pk-button-group[orientation='vertical']) {\n display: block;\n width: 100%;\n height: auto;\n }\n\n :host-context(pk-button-group[orientation='vertical']) .separator {\n width: 100%;\n height: 1px;\n margin-block: 1px;\n }\n }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupSeparatorStyles } from './pk-button-group-separator.styles.js';\n\nexport type PkButtonGroupSeparatorOrientation = 'horizontal' \| 'vertical';\n\n/*\n Vertical separator for button groups.\n \n @csspart base - Separator element\n */\n@customElement('pk-button-group-separator')\nexport class PkButtonGroupSeparator extends PkElement {\n static override styles = pkButtonGroupSeparatorStyles;\n\n @property({ reflect: true })\n orientation: PkButtonGroupSeparatorOrientation = 'vertical';\n\n override render() {\n return html`\n <div\n part=\"base\"\n class=\"separator pk-btn-group__separator\"\n role=\"separator\"\n aria-orientation=${this.orientation}\n data-orientation=${this.orientation}\n ></div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button-group-separator': PkButtonGroupSeparator;\n }\n}\n"],"mappings":";;;AAEA,IAAa,+BAA+B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYxC,IAAA,yBAAA,MAAM,+BAA+B,UAAU;;;qBAID;;;gBAHxB;;CAKzB,SAAkB;AACd,SAAO,IAAI;;;;;mCAKgB,KAAK,YAAY;mCACjB,KAAK,YAAY;;;;;YAV/C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;qCAJ/B,cAAc,4BAA4B,CAAA,EAAA,uBAAA"}

package/dist/chunks/{pk-button-group-text-Qro_KmZb.js → pk-button-group-text-BsqEM-dB.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { n as buttonGroupCornerRadiusStyles } from "./button-group-item.styles-DYmBR28a.js";
+import { n as buttonGroupCornerRadiusStyles } from "./button-group-item.styles-G05d0DNI.js";
 import { css, html } from "lit";
 //#region src/components/button-group/pk-button-group-text.styles.ts
 var pkButtonGroupTextStyles = [buttonGroupCornerRadiusStyles(".text", "var(--pk-radius-lg)"), css`
@@ -45,4 +45,4 @@ PkButtonGroupText = __decorate([customElement("pk-button-group-text")], PkButton
 //#endregion
 export { PkButtonGroupText as t };
-//# sourceMappingURL=pk-button-group-text-Qro_KmZb.js.map
+//# sourceMappingURL=pk-button-group-text-BsqEM-dB.js.map

package/dist/chunks/{pk-button-group-text-Qro_KmZb.js.map → pk-button-group-text-BsqEM-dB.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-button-group-text-~~Qro_KmZb~~.js","names":[],"sources":["../../src/components/button-group/pk-button-group-text.styles.ts","../../src/components/button-group/pk-button-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRadiusStyles } from './button-group-item.styles.js';\n\nexport const pkButtonGroupTextStyles = [\n buttonGroupCornerRadiusStyles('.text', 'var(--pk-radius-lg)'),\n css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n .text {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.625rem;\n border: 1px solid var(--pk-color-slate-400);\n background: var(--pk-color-gray-100);\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n font-weight: 500;\n line-height: var(--pk-line-height);\n white-space: nowrap;\n }\n }\n `,\n];\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupTextStyles } from './pk-button-group-text.styles.js';\n\n/*\n Prefix text span for URL / compound button groups.\n \n @slot - Prefix text content\n \n @csspart base - Text container\n */\n@customElement('pk-button-group-text')\nexport class PkButtonGroupText extends PkElement {\n static override styles = pkButtonGroupTextStyles;\n\n override render() {\n return html`\n <span part=\"base\" class=\"text pk-btn-group__text\">\n <slot></slot>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button-group-text': PkButtonGroupText;\n }\n}\n"],"mappings":";;;;AAIA,IAAa,0BAA0B,CACnC,8BAA8B,SAAS,sBAAsB,EAC7D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;MAyBN;;;ACjBM,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;gBACpB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;gCALlB,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}
1	+ {"version":3,"file":"pk-button-group-text-BsqEM-dB.js","names":[],"sources":["../../src/components/button-group/pk-button-group-text.styles.ts","../../src/components/button-group/pk-button-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRadiusStyles } from './button-group-item.styles.js';\n\nexport const pkButtonGroupTextStyles = [\n buttonGroupCornerRadiusStyles('.text', 'var(--pk-radius-lg)'),\n css`\n @layer pk-component {\n :host {\n display: inline-flex;\n vertical-align: middle;\n margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n }\n\n .text {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.625rem;\n border: 1px solid var(--pk-color-slate-400);\n background: var(--pk-color-gray-100);\n color: var(--pk-color-gray-700);\n font-family: var(--pk-font-family);\n font-size: var(--pk-font-size-sm);\n font-weight: 500;\n line-height: var(--pk-line-height);\n white-space: nowrap;\n }\n }\n `,\n];\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupTextStyles } from './pk-button-group-text.styles.js';\n\n/*\n Prefix text span for URL / compound button groups.\n \n @slot - Prefix text content\n \n @csspart base - Text container\n */\n@customElement('pk-button-group-text')\nexport class PkButtonGroupText extends PkElement {\n static override styles = pkButtonGroupTextStyles;\n\n override render() {\n return html`\n <span part=\"base\" class=\"text pk-btn-group__text\">\n <slot></slot>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button-group-text': PkButtonGroupText;\n }\n}\n"],"mappings":";;;;AAIA,IAAa,0BAA0B,CACnC,8BAA8B,SAAS,sBAAsB,EAC7D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;MAyBN;;;ACjBM,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;gBACpB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;gCALlB,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}

package/dist/chunks/{pk-calendar-Z7Y0PjeY.js → pk-calendar-hBz1MnOu.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { t as icons_exports } from "./icons-BR8JcQj2.js";
+import { t as icons_exports } from "./icons-B8siZLOe.js";
 import { i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
-import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
-import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
+import { n as renderIconHtml } from "./render-BKGW1a68.js";
+import { t as HasSlotController } from "./has-slot-9zjTXvea.js";
+import { t as iconStyles } from "./icon.styles-pNyUmVtP.js";
 import { css, html, nothing } from "lit";
-import { classMap } from "lit/directives/class-map.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { classMap } from "lit/directives/class-map.js";
 //#region src/utils/date.ts
 /** ISO date helpers — ported from  `date-picker/internal/iso`. */
 var ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
@@ -1461,4 +1461,4 @@ PkCalendar = __decorate([customElement("pk-calendar")], PkCalendar);
 //#endregion
 export { parseIsoDate as a, parseDateList as i, coerceToDate as n, parseRange as o, formatIsoDate as r, PkCalendar as t };
-//# sourceMappingURL=pk-calendar-Z7Y0PjeY.js.map
+//# sourceMappingURL=pk-calendar-hBz1MnOu.js.map