@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/button-BBmxCyz-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-BBmxCyz-.js","names":["_decorate","__decorate","buttonStyles","BpButton","LitElement","property","customElement"],"sources":["../../source/components/button/button.style.ts","../../source/components/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .button {\n    /* Reset */\n    appearance: none;\n    border: none;\n    margin: 0;\n\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    user-select: none;\n\n    /* Typography */\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    text-decoration: none;\n    white-space: nowrap;\n\n    /* Visual */\n    border-radius: var(--bp-border-radius-md);\n    transition: all var(--bp-duration-fast);\n\n    /* Accessibility */\n    outline: none;\n  }\n\n  /* Variants */\n  .button--primary {\n    background: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--success {\n    background: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--error {\n    background: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--warning {\n    background: var(--bp-color-warning);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--info {\n    background: var(--bp-color-info);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--secondary {\n    background: var(--bp-color-surface-elevated);\n    color: var(--bp-color-text);\n    border: var(--bp-border-width) solid var(--bp-color-border-strong);\n  }\n\n  /* Sizes */\n  .button--sm {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-tight);\n  }\n\n  .button--md {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .button--lg {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* States */\n  .button:hover:not(:disabled) {\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  .button--primary:hover:not(:disabled) {\n    background: var(--bp-color-primary-hover);\n  }\n\n  .button--success:hover:not(:disabled) {\n    background: var(--bp-color-success-hover);\n  }\n\n  .button--error:hover:not(:disabled) {\n    background: var(--bp-color-error-hover);\n  }\n\n  .button--warning:hover:not(:disabled) {\n    background: var(--bp-color-warning-hover);\n  }\n\n  .button--info:hover:not(:disabled) {\n    background: var(--bp-color-info-hover);\n  }\n\n  .button--secondary:hover:not(:disabled) {\n    background: var(--bp-color-surface);\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .button:active:not(:disabled) {\n    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.15);\n  }\n\n  .button--primary:active:not(:disabled) {\n    background: var(--bp-color-primary-active);\n  }\n\n  .button:disabled {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  .button:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { buttonStyles } from './button.style.js';\n\nexport type ButtonVariant =\n  'primary' | 'success' | 'error' | 'warning' | 'info' | 'secondary';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\n@customElement('bp-button')\nexport class BpButton extends LitElement {\n  @property({ type: String, reflect: true }) declare variant: ButtonVariant;\n  @property({ type: String, reflect: true }) declare size: ButtonSize;\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n  @property({ type: String, reflect: true }) declare type:\n    'button' | 'submit' | 'reset';\n\n  static styles = [buttonStyles];\n\n  constructor() {\n    super();\n    this.variant = 'primary';\n    this.size = 'md';\n    this.disabled = false;\n    this.type = 'button';\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"button\"\n        class=\"button button--${this.variant} button--${this.size}\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-button': BpButton;\n  }\n}\n"],"mappings":";;;;AAEA,IAAaE,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCOlBC,IAAN,cAAuBC,EAAW;;EAOvB,KAAA,SAAA,CAACF,CAAY;;CAE7B,cAAc;EAKZ,AAJA,MAAM,GACN,KAAK,UAAU,WACf,KAAK,OAAO,MACZ,KAAK,WAAW,IAChB,KAAK,OAAO;CACd;CAEA,YAAoB,GAAe;EACjC,IAAI,KAAK,UAAU;GAEjB,AADA,EAAE,eAAe,GACjB,EAAE,gBAAgB;GAClB;EACF;EAEA,KAAK,cACH,IAAI,YAAY,YAAY;GAC1B,QAAQ,EAAE,eAAe,EAAE;GAC3B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,SAAS;EACP,OAAO,CAAI;;;gCAGiB,KAAK,QAAQ,WAAW,KAAK,KAAK;eACnD,KAAK,KAAK;oBACL,KAAK,SAAS;iBACjB,KAAK,YAAY;wBACV,KAAK,WAAW,SAAS,QAAQ;;;;;CAKvD;AACF;AA9CGF,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,WAAA,KAAA,CAAA,GACxCH,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,QAAA,KAAA,CAAA,GACxCH,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,YAAA,KAAA,CAAA,GACzCH,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,QAAA,KAAA,CAAA,GAL1C,IAAAH,EAAA,CAAAM,EAAc,WAAW,CAAA,GAAAH,CAAA"}

package/dist/shared/card-Cm0X0KrG.js

@@ -0,0 +1,216 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+//#region source/components/card/card.style.ts
+var s = n`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .card {
+    font-family: var(--bp-font-family);
+    background-color: var(--bp-color-surface-elevated);
+    border-radius: var(--bp-border-radius-lg);
+    overflow: hidden;
+    transition:
+      box-shadow var(--bp-transition-fast),
+      transform var(--bp-transition-base),
+      border-color var(--bp-transition-fast);
+  }
+
+  /* Content layout (media + body wrapper) */
+  .card-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-content--horizontal {
+    flex-direction: row;
+  }
+
+  .card-content--horizontal ::slotted([slot='media']) {
+    width: auto;
+    max-width: 50%;
+    flex-shrink: 0;
+  }
+
+  .card-body {
+    padding: var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-relaxed);
+    color: var(--bp-color-text);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .card-body--no-padding {
+    padding: 0;
+  }
+
+  /* Header and footer container styles */
+  .card-header {
+    padding: var(--bp-spacing-lg);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    font-weight: var(--bp-font-weight-semibold);
+    font-size: var(--bp-font-size-lg);
+    line-height: 1.4;
+    color: var(--bp-color-text-strong);
+  }
+
+  .card-footer {
+    padding: var(--bp-spacing-lg);
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Media slot styles */
+  ::slotted([slot='media']) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  /* Variants */
+  .card--default {
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  .card--outlined {
+    border: var(--bp-border-width) solid var(--bp-color-border-strong);
+    box-shadow: none;
+  }
+
+  .card--elevated {
+    border: none;
+    box-shadow: var(--bp-shadow-lg);
+  }
+
+  /* States */
+  .card--default.card--hoverable:hover,
+  .card--default.card--clickable:hover {
+    box-shadow: var(--bp-shadow-md);
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .card--outlined.card--hoverable:hover,
+  .card--outlined.card--clickable:hover {
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  .card--elevated.card--hoverable:hover,
+  .card--elevated.card--clickable:hover {
+    box-shadow: var(--bp-shadow-xl);
+  }
+
+  .card--clickable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .card--clickable:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .card--clickable:active {
+    box-shadow: var(--bp-shadow-sm);
+  }
+`, c = class extends t {
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.hasHeader = !1, this.hasFooter = !1, this.handleHeaderSlotChange = (e) => {
+			let t = e.target;
+			this.hasHeader = t.assignedNodes({ flatten: !0 }).length > 0;
+		}, this.handleFooterSlotChange = (e) => {
+			let t = e.target;
+			this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0;
+		}, this.variant = "default", this.hoverable = !1, this.clickable = !1, this.noPadding = !1, this.direction = "vertical";
+	}
+	handleClick(e) {
+		this.clickable && (e.target.closest("a, button, input, select, textarea") || e.preventDefault(), this.dispatchEvent(new CustomEvent("bp-click", {
+			detail: { originalEvent: e },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		return r`
+      <div
+        class="card card--${this.variant} ${this.hoverable || this.clickable ? "card--hoverable" : ""} ${this.clickable ? "card--clickable" : ""}"
+        part="card"
+        @click=${this.handleClick}
+        role=${this.clickable ? "button" : "article"}
+        tabindex=${o(this.clickable ? "0" : void 0)}
+        @keydown=${this.clickable ? this.handleKeydown : void 0}
+      >
+        ${this.hasHeader ? r`<div class="card-header" part="header">
+                <slot
+                  name="header"
+                  @slotchange=${this.handleHeaderSlotChange}
+                ></slot>
+              </div>` : r`<slot
+                name="header"
+                @slotchange=${this.handleHeaderSlotChange}
+              ></slot>`}
+        <div
+          class="card-content ${this.direction === "horizontal" ? "card-content--horizontal" : ""}"
+          part="content"
+        >
+          <slot name="media" part="media"></slot>
+          <div
+            class="card-body ${this.noPadding ? "card-body--no-padding" : ""}"
+            part="body"
+          >
+            <slot></slot>
+          </div>
+        </div>
+        ${this.hasFooter ? r`<div class="card-footer" part="footer">
+                <slot
+                  name="footer"
+                  @slotchange=${this.handleFooterSlotChange}
+                ></slot>
+              </div>` : r`<slot
+                name="footer"
+                @slotchange=${this.handleFooterSlotChange}
+              ></slot>`}
+      </div>
+    `;
+	}
+	handleKeydown(e) {
+		let t = e;
+		(t.key === "Enter" || t.key === " ") && (e.preventDefault(), this.handleClick(e));
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "hoverable", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "clickable", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "noPadding", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "direction", void 0), e([a({
+	type: Boolean,
+	attribute: !1
+})], c.prototype, "hasHeader", void 0), e([a({
+	type: Boolean,
+	attribute: !1
+})], c.prototype, "hasFooter", void 0), c = e([i("bp-card")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=card-Cm0X0KrG.js.map

package/dist/shared/card-Cm0X0KrG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-Cm0X0KrG.js","names":["_decorate","__decorate","cardStyles","BpCard","LitElement","slot","event","ifDefined","keyboardEvent","property","customElement"],"sources":["../../source/components/card/card.style.ts","../../source/components/card/card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const cardStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .card {\n    font-family: var(--bp-font-family);\n    background-color: var(--bp-color-surface-elevated);\n    border-radius: var(--bp-border-radius-lg);\n    overflow: hidden;\n    transition:\n      box-shadow var(--bp-transition-fast),\n      transform var(--bp-transition-base),\n      border-color var(--bp-transition-fast);\n  }\n\n  /* Content layout (media + body wrapper) */\n  .card-content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .card-content--horizontal {\n    flex-direction: row;\n  }\n\n  .card-content--horizontal ::slotted([slot='media']) {\n    width: auto;\n    max-width: 50%;\n    flex-shrink: 0;\n  }\n\n  .card-body {\n    padding: var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    color: var(--bp-color-text);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .card-body--no-padding {\n    padding: 0;\n  }\n\n  /* Header and footer container styles */\n  .card-header {\n    padding: var(--bp-spacing-lg);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    font-weight: var(--bp-font-weight-semibold);\n    font-size: var(--bp-font-size-lg);\n    line-height: 1.4;\n    color: var(--bp-color-text-strong);\n  }\n\n  .card-footer {\n    padding: var(--bp-spacing-lg);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Media slot styles */\n  ::slotted([slot='media']) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n  }\n\n  /* Variants */\n  .card--default {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .card--outlined {\n    border: var(--bp-border-width) solid var(--bp-color-border-strong);\n    box-shadow: none;\n  }\n\n  .card--elevated {\n    border: none;\n    box-shadow: var(--bp-shadow-lg);\n  }\n\n  /* States */\n  .card--default.card--hoverable:hover,\n  .card--default.card--clickable:hover {\n    box-shadow: var(--bp-shadow-md);\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .card--outlined.card--hoverable:hover,\n  .card--outlined.card--clickable:hover {\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  .card--elevated.card--hoverable:hover,\n  .card--elevated.card--clickable:hover {\n    box-shadow: var(--bp-shadow-xl);\n  }\n\n  .card--clickable {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .card--clickable:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .card--clickable:active {\n    box-shadow: var(--bp-shadow-sm);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { cardStyles } from './card.style.js';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\nexport type CardDirection = 'vertical' | 'horizontal';\n/**\n * A versatile card component for organizing and displaying content.\n *\n * @slot - Default slot for card body content\n * @slot header - Optional header section\n * @slot footer - Optional footer section\n * @slot media - Optional media section (images, illustrations, etc.)\n *\n * @fires bp-click - Fired when clickable card is clicked\n */\n@customElement('bp-card')\nexport class BpCard extends LitElement {\n  /**\n   * Visual variant of the card\n   */\n  @property({ type: String, reflect: true }) declare variant: CardVariant;\n\n  /**\n   * Whether the card should display a hover effect\n   */\n  @property({ type: Boolean, reflect: true }) declare hoverable: boolean;\n\n  /**\n   * Whether the card is clickable (shows pointer cursor and emits click events)\n   */\n  @property({ type: Boolean, reflect: true }) declare clickable: boolean;\n\n  /**\n   * Whether to remove default padding from the card body\n   */\n  @property({ type: Boolean, reflect: true }) declare noPadding: boolean;\n\n  /**\n   * Layout direction for the card content (media + body area).\n   * 'vertical' stacks media above body, 'horizontal' places them side by side.\n   * Header and footer are unaffected and remain full-width.\n   */\n  @property({ type: String, reflect: true }) declare direction: CardDirection;\n\n  /** Whether the header slot has assigned content */\n  @property({ type: Boolean, attribute: false })\n  private hasHeader = false;\n\n  /** Whether the footer slot has assigned content */\n  @property({ type: Boolean, attribute: false })\n  private hasFooter = false;\n\n  static styles = [cardStyles];\n\n  constructor() {\n    super();\n    this.variant = 'default';\n    this.hoverable = false;\n    this.clickable = false;\n    this.noPadding = false;\n    this.direction = 'vertical';\n  }\n\n  /**\n   * Handles slot change events for the header slot.\n   * Updates hasHeader state to control header visibility.\n   */\n  private handleHeaderSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  /**\n   * Handles slot change events for the footer slot.\n   * Updates hasFooter state to control footer visibility.\n   */\n  private handleFooterSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private handleClick(event: MouseEvent) {\n    if (!this.clickable) return;\n\n    // Only prevent default if not clicking on interactive elements\n    const target = event.target as HTMLElement;\n    if (!target.closest('a, button, input, select, textarea')) {\n      event.preventDefault();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-click', {\n        detail: { originalEvent: event },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"card card--${this.variant} ${\n          this.hoverable || this.clickable ? 'card--hoverable' : ''\n        } ${this.clickable ? 'card--clickable' : ''}\"\n        part=\"card\"\n        @click=${this.handleClick}\n        role=${this.clickable ? 'button' : 'article'}\n        tabindex=${ifDefined(this.clickable ? '0' : undefined)}\n        @keydown=${this.clickable ? this.handleKeydown : undefined}\n      >\n        ${\n          this.hasHeader\n            ? html`<div class=\"card-header\" part=\"header\">\n                <slot\n                  name=\"header\"\n                  @slotchange=${this.handleHeaderSlotChange}\n                ></slot>\n              </div>`\n            : html`<slot\n                name=\"header\"\n                @slotchange=${this.handleHeaderSlotChange}\n              ></slot>`\n        }\n        <div\n          class=\"card-content ${\n            this.direction === 'horizontal' ? 'card-content--horizontal' : ''\n          }\"\n          part=\"content\"\n        >\n          <slot name=\"media\" part=\"media\"></slot>\n          <div\n            class=\"card-body ${this.noPadding ? 'card-body--no-padding' : ''}\"\n            part=\"body\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n        ${\n          this.hasFooter\n            ? html`<div class=\"card-footer\" part=\"footer\">\n                <slot\n                  name=\"footer\"\n                  @slotchange=${this.handleFooterSlotChange}\n                ></slot>\n              </div>`\n            : html`<slot\n                name=\"footer\"\n                @slotchange=${this.handleFooterSlotChange}\n              ></slot>`\n        }\n      </div>\n    `;\n  }\n\n  private handleKeydown(event: Event) {\n    const keyboardEvent = event as typeof window.KeyboardEvent.prototype;\n    if (keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ') {\n      event.preventDefault();\n      this.handleClick(event as unknown as MouseEvent);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-card': BpCard;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAaE,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCgBhBC,IAAN,cAAqBC,EAAW;;EAoCrB,KAAA,SAAA,CAACF,CAAU;;CAE3B,cAAc;EAMZ,AALA,MAAM,GATY,KAAA,YAAA,IAIA,KAAA,YAAA,IAiBc,KAAA,0BAAA,MAAuB;GACvD,IAAMG,IAAOC,EAAM;GAGnB,KAAK,YAAYD,EAAK,cAAc,EAAE,SAAS,GAAK,CAAC,CAAC,CAAC,SAAS;EAClE,GAMkC,KAAA,0BAAA,MAAuB;GACvD,IAAMA,IAAOC,EAAM;GAGnB,KAAK,YAAYD,EAAK,cAAc,EAAE,SAAS,GAAK,CAAC,CAAC,CAAC,SAAS;EAClE,GA3BE,KAAK,UAAU,WACf,KAAK,YAAY,IACjB,KAAK,YAAY,IACjB,KAAK,YAAY,IACjB,KAAK,YAAY;CACnB;CAwBA,YAAoB,GAAmB;EACrC,AAAK,KAAK,cAGKC,EAAM,OACT,QAAQ,oCAAoC,KACtDA,EAAM,eAAe,GAGvB,KAAK,cACH,IAAI,YAAY,YAAY;GAC1B,QAAQ,EAAE,eAAeA,EAAM;GAC/B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,SAAS;EACP,OAAO,CAAI;;4BAEa,KAAK,QAAQ,GAC/B,KAAK,aAAa,KAAK,YAAY,oBAAoB,GACxD,GAAG,KAAK,YAAY,oBAAoB,GAAG;;iBAEnC,KAAK,YAAY;eACnB,KAAK,YAAY,WAAW,UAAU;mBAClCC,EAAU,KAAK,YAAY,MAAM,KAAA,CAAS,EAAE;mBAC5C,KAAK,YAAY,KAAK,gBAAgB,KAAA,EAAU;;UAGzD,KAAK,YACD,CAAI;;;gCAGc,KAAK,uBAAuB;;wBAG9C,CAAI;;8BAEY,KAAK,uBAAuB;wBAEjD;;gCAGG,KAAK,cAAc,eAAe,6BAA6B,GAChE;;;;;+BAKoB,KAAK,YAAY,0BAA0B,GAAG;;;;;;UAOnE,KAAK,YACD,CAAI;;;gCAGc,KAAK,uBAAuB;;wBAG9C,CAAI;;8BAEY,KAAK,uBAAuB;wBAEjD;;;CAGP;CAEA,cAAsB,GAAc;EAClC,IAAMC,IAAgBF;EACtB,CAAIE,EAAc,QAAQ,WAAWA,EAAc,QAAQ,SACzDF,EAAM,eAAe,GACrB,KAAK,YAAYA,CAA8B;CAEnD;AACF;AAlJGN,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,WAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAKzCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAKzCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAOzCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,WAAW;AAAM,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAI5CH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,WAAW;AAAM,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAlC9C,IAAAH,EAAA,CAAAU,EAAc,SAAS,CAAA,GAAAP,CAAA"}

package/dist/shared/checkbox-DVNGkHj-.js

@@ -0,0 +1,322 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { r as t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { live as m } from "lit/directives/live.js";
+//#region source/components/checkbox/checkbox.style.ts
+var h = o`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    cursor: pointer;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+    user-select: none;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .checkbox__checkmark {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: var(--bp-border-width) solid var(--bp-color-input-border);
+    border-radius: var(--bp-border-radius-sm);
+    background-color: var(--bp-color-surface);
+    transition: all var(--bp-transition-fast);
+  }
+
+  .checkbox__checkmark svg {
+    width: 100%;
+    height: 100%;
+    color: var(--bp-color-text-inverse);
+    opacity: 0;
+    transform: scale(0);
+    transition:
+      opacity var(--bp-duration-fast) var(--bp-ease-out),
+      transform var(--bp-duration-fast) var(--bp-ease-bounce);
+  }
+
+  .checkbox__label {
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Sizes */
+  .checkbox--sm .checkbox__checkmark {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .checkbox--sm .checkbox__label {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .checkbox--md .checkbox__checkmark {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  .checkbox--md .checkbox__label {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .checkbox--lg .checkbox__checkmark {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  .checkbox--lg .checkbox__label {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* States - Checked */
+  .checkbox--checked .checkbox__checkmark {
+    background-color: var(--bp-color-primary);
+    border-color: var(--bp-color-primary);
+  }
+
+  .checkbox--checked .checkbox__checkmark svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* States - Indeterminate */
+  .checkbox--indeterminate .checkbox__checkmark {
+    background-color: var(--bp-color-primary);
+    border-color: var(--bp-color-primary);
+  }
+
+  .checkbox--indeterminate .checkbox__checkmark svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* States - Hover */
+  .checkbox:hover:not(.checkbox--disabled):not(.checkbox--checked):not(
+      .checkbox--indeterminate
+    )
+    .checkbox__checkmark {
+    border-color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .checkbox--checked:hover:not(.checkbox--disabled) .checkbox__checkmark,
+  .checkbox--indeterminate:hover:not(.checkbox--disabled) .checkbox__checkmark {
+    background-color: var(--bp-color-primary-hover);
+    border-color: var(--bp-color-primary-hover);
+  }
+
+  /* States - Active */
+  .checkbox:active:not(.checkbox--disabled) .checkbox__checkmark {
+    transform: scale(0.95);
+  }
+
+  /* States - Focused */
+  .checkbox--focused .checkbox__checkmark {
+    outline: var(--bp-focus-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* States - Disabled */
+  .checkbox--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* States - Error */
+  .checkbox--error .checkbox__checkmark {
+    border-color: var(--bp-color-error);
+  }
+
+  .checkbox--error.checkbox--checked .checkbox__checkmark,
+  .checkbox--error.checkbox--indeterminate .checkbox__checkmark {
+    background-color: var(--bp-color-error);
+    border-color: var(--bp-color-error);
+  }
+
+  /* Touch target size: ensure 44x44px minimum on touch devices */
+  @media (pointer: coarse) {
+    .checkbox {
+      min-height: 44px;
+      padding: var(--bp-spacing-xs) 0;
+    }
+
+    .checkbox__checkmark {
+      position: relative;
+    }
+
+    /* Expand touch target with pseudo-element */
+    .checkbox__checkmark::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+    }
+  }
+`, g = class extends a {
+	static {
+		this.styles = [r, h];
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.hasFocus = !1, this.internals = null, this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.size = "md", this.error = !1, this.helperText = "", this.errorMessage = "", typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.updateFormValue();
+	}
+	updated(e) {
+		e.has("checked") && (this.updateFormValue(), this.input && (this.input.checked = this.checked)), e.has("indeterminate") && this.input && (this.input.indeterminate = this.indeterminate), (e.has("errorMessage") || e.has("disabled")) && t(this.internals, this.errorMessage, this.disabled, this.input);
+	}
+	updateFormValue() {
+		let e = this.checked ? this.value : null;
+		this.internals?.setFormValue(e);
+	}
+	handleChange(e) {
+		let t = e.target;
+		this.checked = t.checked, this.indeterminate = !1, this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: { checked: this.checked },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleFocus() {
+		this.hasFocus = !0, this.dispatchEvent(new CustomEvent("bp-focus", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleBlur() {
+		this.hasFocus = !1, this.dispatchEvent(new CustomEvent("bp-blur", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	focus(e) {
+		this.input?.focus(e);
+	}
+	blur() {
+		this.input?.blur();
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: this.error
+		}, { invalid: t, describedBy: r } = i(e), a = [
+			"checkbox",
+			`checkbox--${this.size}`,
+			this.checked ? "checkbox--checked" : "",
+			this.indeterminate ? "checkbox--indeterminate" : "",
+			this.disabled ? "checkbox--disabled" : "",
+			t ? "checkbox--error" : "",
+			this.hasFocus ? "checkbox--focused" : ""
+		].filter(Boolean).join(" ");
+		return s`
+      <label part="checkbox" class="${a}">
+        <input
+          part="input"
+          type="checkbox"
+          class="checkbox__input"
+          .checked=${m(this.checked)}
+          .indeterminate=${m(this.indeterminate)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          name=${p(this.name || void 0)}
+          value=${this.value}
+          aria-checked=${this.indeterminate ? "mixed" : this.checked}
+          aria-invalid=${t ? "true" : c}
+          aria-describedby=${r ?? c}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <span part="checkmark" class="checkbox__checkmark">
+          ${this.indeterminate ? s`<svg
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <line
+                    x1="4"
+                    y1="8"
+                    x2="12"
+                    y2="8"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
+                </svg>` : s`<svg
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 4L6 11L3 8"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>`}
+        </span>
+        <span part="label" class="checkbox__label">
+          <slot></slot>
+        </span>
+      </label>
+      ${n(e)}
+    `;
+	}
+};
+e([d("input[type=\"checkbox\"]")], g.prototype, "input", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "checked", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "indeterminate", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "required", void 0), e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "name", void 0), e([u({ type: String })], g.prototype, "value", void 0), e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "size", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "error", void 0), e([u({ type: String })], g.prototype, "helperText", void 0), e([u({ type: String })], g.prototype, "errorMessage", void 0), e([f()], g.prototype, "hasFocus", void 0), g = e([l("bp-checkbox")], g);
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=checkbox-DVNGkHj-.js.map

package/dist/shared/checkbox-DVNGkHj-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-DVNGkHj-.js","names":["_decorate","__decorate","syncCustomValidity","renderFieldMessage","fieldMessageStyles","fieldMessageState","checkboxStyles","BpCheckbox","LitElement","changedProperties","value","target","event","options","message","classes","invalid","live","ifDefined","nothing","describedBy","query","property","state","customElement"],"sources":["../../source/components/checkbox/checkbox.style.ts","../../source/components/checkbox/checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const checkboxStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    user-select: none;\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .checkbox__checkmark {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--bp-border-width) solid var(--bp-color-input-border);\n    border-radius: var(--bp-border-radius-sm);\n    background-color: var(--bp-color-surface);\n    transition: all var(--bp-transition-fast);\n  }\n\n  .checkbox__checkmark svg {\n    width: 100%;\n    height: 100%;\n    color: var(--bp-color-text-inverse);\n    opacity: 0;\n    transform: scale(0);\n    transition:\n      opacity var(--bp-duration-fast) var(--bp-ease-out),\n      transform var(--bp-duration-fast) var(--bp-ease-bounce);\n  }\n\n  .checkbox__label {\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Sizes */\n  .checkbox--sm .checkbox__checkmark {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .checkbox--sm .checkbox__label {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .checkbox--md .checkbox__checkmark {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .checkbox--md .checkbox__label {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .checkbox--lg .checkbox__checkmark {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .checkbox--lg .checkbox__label {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* States - Checked */\n  .checkbox--checked .checkbox__checkmark {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n  }\n\n  .checkbox--checked .checkbox__checkmark svg {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* States - Indeterminate */\n  .checkbox--indeterminate .checkbox__checkmark {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n  }\n\n  .checkbox--indeterminate .checkbox__checkmark svg {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* States - Hover */\n  .checkbox:hover:not(.checkbox--disabled):not(.checkbox--checked):not(\n      .checkbox--indeterminate\n    )\n    .checkbox__checkmark {\n    border-color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .checkbox--checked:hover:not(.checkbox--disabled) .checkbox__checkmark,\n  .checkbox--indeterminate:hover:not(.checkbox--disabled) .checkbox__checkmark {\n    background-color: var(--bp-color-primary-hover);\n    border-color: var(--bp-color-primary-hover);\n  }\n\n  /* States - Active */\n  .checkbox:active:not(.checkbox--disabled) .checkbox__checkmark {\n    transform: scale(0.95);\n  }\n\n  /* States - Focused */\n  .checkbox--focused .checkbox__checkmark {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* States - Disabled */\n  .checkbox--disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* States - Error */\n  .checkbox--error .checkbox__checkmark {\n    border-color: var(--bp-color-error);\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__checkmark,\n  .checkbox--error.checkbox--indeterminate .checkbox__checkmark {\n    background-color: var(--bp-color-error);\n    border-color: var(--bp-color-error);\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .checkbox {\n      min-height: 44px;\n      padding: var(--bp-spacing-xs) 0;\n    }\n\n    .checkbox__checkmark {\n      position: relative;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .checkbox__checkmark::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 44px;\n      height: 44px;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { checkboxStyles } from './checkbox.style.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\nimport { syncCustomValidity } from '../../utilities/form-control.js';\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg';\n\n/**\n * A form checkbox input with label support and multiple states.\n *\n * @element bp-checkbox\n *\n * @property {boolean} checked - Whether the checkbox is checked\n * @property {boolean} indeterminate - Indeterminate state (partial selection)\n * @property {boolean} disabled - Whether the checkbox is disabled\n * @property {boolean} required - Whether the checkbox is required\n * @property {string} name - The name for form submission\n * @property {string} value - The value for form submission\n * @property {CheckboxSize} size - The size of the checkbox\n * @property {boolean} error - Whether the checkbox has an error state\n *\n * @slot - The checkbox label text\n *\n * @fires bp-change - Fired when the checked state changes\n * @fires bp-focus - Fired when the checkbox receives focus\n * @fires bp-blur - Fired when the checkbox loses focus\n *\n * @csspart checkbox - The checkbox container\n * @csspart input - The native checkbox input element\n * @csspart checkmark - The visual checkmark indicator\n * @csspart label - The label text container\n */\n@customElement('bp-checkbox')\nexport class BpCheckbox extends LitElement {\n  @query('input[type=\"checkbox\"]') declare input: HTMLInputElement;\n\n  /**\n   * Whether the checkbox is checked.\n   */\n  @property({ type: Boolean, reflect: true }) declare checked: boolean;\n\n  /**\n   * Whether the checkbox is in an indeterminate state.\n   * This is a visual-only state for \"partially checked\" appearance.\n   */\n  @property({ type: Boolean, reflect: true }) declare indeterminate: boolean;\n\n  /**\n   * Whether the checkbox is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Whether the checkbox is required.\n   */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /**\n   * The name of the checkbox for form submission.\n   */\n  @property({ type: String, reflect: true }) declare name: string;\n\n  /**\n   * The value of the checkbox for form submission.\n   */\n  @property({ type: String }) declare value: string;\n\n  /**\n   * The size of the checkbox.\n   */\n  @property({ type: String, reflect: true }) declare size: CheckboxSize;\n\n  /**\n   * Whether the checkbox has an error state.\n   */\n  @property({ type: Boolean, reflect: true }) declare error: boolean;\n\n  /** Helper text displayed below the checkbox */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the checkbox is invalid: the message replaces the\n   * helper text, is announced, and the control turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  @state() private hasFocus = false;\n\n  static styles = [fieldMessageStyles, checkboxStyles];\n\n  static formAssociated = true;\n\n  private internals: ElementInternals | null = null;\n\n  constructor() {\n    super();\n    this.checked = false;\n    this.indeterminate = false;\n    this.disabled = false;\n    this.required = false;\n    this.name = '';\n    this.value = 'on';\n    this.size = 'md';\n    this.error = false;\n    this.helperText = '';\n    this.errorMessage = '';\n\n    // attachInternals may not be available in all environments (e.g., test)\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateFormValue();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('checked')) {\n      this.updateFormValue();\n      if (this.input) {\n        this.input.checked = this.checked;\n      }\n    }\n\n    if (changedProperties.has('indeterminate') && this.input) {\n      this.input.indeterminate = this.indeterminate;\n    }\n\n    // errorMessage marks the checkbox invalid for its form until cleared\n    if (\n      changedProperties.has('errorMessage') ||\n      changedProperties.has('disabled')\n    ) {\n      syncCustomValidity(\n        this.internals,\n        this.errorMessage,\n        this.disabled,\n        this.input\n      );\n    }\n  }\n\n  private updateFormValue() {\n    const value = this.checked ? this.value : null;\n    this.internals?.setFormValue(value);\n  }\n\n  private handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = false;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { checked: this.checked },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-focus', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n\n  focus(options?: FocusOptions) {\n    this.input?.focus(options);\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  blur() {\n    this.input?.blur();\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: this.error,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const classes = [\n      'checkbox',\n      `checkbox--${this.size}`,\n      this.checked ? 'checkbox--checked' : '',\n      this.indeterminate ? 'checkbox--indeterminate' : '',\n      this.disabled ? 'checkbox--disabled' : '',\n      invalid ? 'checkbox--error' : '',\n      this.hasFocus ? 'checkbox--focused' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <label part=\"checkbox\" class=\"${classes}\">\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          class=\"checkbox__input\"\n          .checked=${live(this.checked)}\n          .indeterminate=${live(this.indeterminate)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name || undefined)}\n          value=${this.value}\n          aria-checked=${this.indeterminate ? 'mixed' : this.checked}\n          aria-invalid=${invalid ? 'true' : nothing}\n          aria-describedby=${describedBy ?? nothing}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <span part=\"checkmark\" class=\"checkbox__checkmark\">\n          ${\n            this.indeterminate\n              ? html`<svg\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <line\n                    x1=\"4\"\n                    y1=\"8\"\n                    x2=\"12\"\n                    y2=\"8\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>`\n              : html`<svg\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M13 4L6 11L3 8\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>`\n          }\n        </span>\n        <span part=\"label\" class=\"checkbox__label\">\n          <slot></slot>\n        </span>\n      </label>\n      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-checkbox': BpCheckbox;\n  }\n}\n"],"mappings":"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"}