@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/progress.js

@@ -0,0 +1,219 @@
+import { css as g, LitElement as b, html as p } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
+const u = g`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .progress-container {
+    width: 100%;
+  }
+
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--bp-spacing-sm);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text);
+  }
+
+  .progress-label {
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .progress-value {
+    color: var(--bp-color-text);
+    opacity: 0.85;
+    font-feature-settings: 'tnum';
+    font-variant-numeric: tabular-nums;
+  }
+
+  .progress {
+    position: relative;
+    width: 100%;
+    background-color: var(--bp-color-border);
+    opacity: 0.3;
+    border-radius: var(--bp-border-radius-full);
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    border-radius: var(--bp-border-radius-full);
+    transition:
+      width var(--bp-transition-base),
+      background-color var(--bp-transition-base);
+    opacity: 1;
+  }
+
+  /* Sizes */
+  .progress--sm {
+    height: var(--bp-spacing-2);
+  }
+
+  .progress--md {
+    height: var(--bp-spacing-3);
+  }
+
+  .progress--lg {
+    height: var(--bp-spacing-4);
+  }
+
+  /* Variants */
+  .progress--primary .progress-bar {
+    background-color: var(--bp-color-primary);
+  }
+
+  .progress--success .progress-bar {
+    background-color: var(--bp-color-success);
+  }
+
+  .progress--warning .progress-bar {
+    background-color: var(--bp-color-warning);
+  }
+
+  .progress--error .progress-bar {
+    background-color: var(--bp-color-error);
+  }
+
+  .progress--info .progress-bar {
+    background-color: var(--bp-color-info);
+  }
+
+  /* Indeterminate state */
+  .progress--indeterminate .progress-bar {
+    width: 40%;
+    animation: indeterminate 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    transform-origin: 0 0;
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-100%) scaleX(1);
+    }
+    40% {
+      transform: translateX(-10%) scaleX(1.5);
+    }
+    100% {
+      transform: translateX(250%) scaleX(0.5);
+    }
+  }
+
+  /* States */
+  .progress:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .progress--complete .progress-bar {
+    animation: complete-pulse 600ms ease-out;
+  }
+
+  @keyframes complete-pulse {
+    0%,
+    100% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(1.15);
+    }
+  }
+
+  .progress--complete.progress--primary .progress-bar {
+    background-color: var(--bp-color-success);
+  }
+`;
+var h = Object.defineProperty, d = Object.getOwnPropertyDescriptor, e = (s, o, n, i) => {
+  for (var t = i > 1 ? void 0 : i ? d(o, n) : o, l = s.length - 1, c; l >= 0; l--)
+    (c = s[l]) && (t = (i ? c(o, n, t) : c(t)) || t);
+  return i && t && h(o, n, t), t;
+};
+let r = class extends b {
+  constructor() {
+    super(), this.value = 0, this.max = 100, this.variant = "primary", this.size = "md", this.label = "", this.showValue = !1, this.indeterminate = !1;
+  }
+  get percentage() {
+    if (this.max <= 0) return 0;
+    const s = this.value / this.max * 100;
+    return Math.min(100, Math.max(0, s));
+  }
+  get complete() {
+    return this.percentage >= 100 && !this.indeterminate;
+  }
+  updated(s) {
+    super.updated(s), s.has("value") && this.percentage >= 100 && this.dispatchEvent(
+      new CustomEvent("bp-complete", {
+        detail: {
+          value: this.value,
+          max: this.max,
+          percentage: this.percentage
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return p`
+      <div class="progress-container">
+        ${this.label || this.showValue ? p`
+              <div class="progress-header" part="header">
+                ${this.label ? p`<span class="progress-label">${this.label}</span>` : null}
+                ${this.showValue && !this.indeterminate ? p`<span class="progress-value"
+                      >${Math.round(this.percentage)}%</span
+                    >` : null}
+              </div>
+            ` : null}
+        <div
+          class="progress progress--${this.variant} progress--${this.size} ${this.indeterminate ? "progress--indeterminate" : ""} ${this.complete ? "progress--complete" : ""}"
+          part="track"
+          role="progressbar"
+          aria-valuemin="0"
+          aria-valuemax="${this.max}"
+          aria-valuenow="${this.indeterminate ? void 0 : this.value}"
+          aria-label="${this.label || "Progress"}"
+          aria-live="polite"
+          aria-atomic="false"
+        >
+          <div
+            class="progress-bar"
+            part="bar"
+            style="width: ${this.indeterminate ? "100%" : this.percentage + "%"}"
+          ></div>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [u];
+e([
+  a({ type: Number })
+], r.prototype, "value", 2);
+e([
+  a({ type: Number })
+], r.prototype, "max", 2);
+e([
+  a({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+e([
+  a({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+e([
+  a({ type: String })
+], r.prototype, "label", 2);
+e([
+  a({ type: Boolean })
+], r.prototype, "showValue", 2);
+e([
+  a({ type: Boolean })
+], r.prototype, "indeterminate", 2);
+r = e([
+  m("bp-progress")
+], r);
+export {
+  r as BpProgress
+};
+//# sourceMappingURL=progress.js.map

package/dist/components/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":["../../source/components/progress/progress.style.ts","../../source/components/progress/progress.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const progressStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .progress-container {\n    width: 100%;\n  }\n\n  .progress-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: var(--bp-spacing-sm);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text);\n  }\n\n  .progress-label {\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .progress-value {\n    color: var(--bp-color-text);\n    opacity: 0.85;\n    font-feature-settings: 'tnum';\n    font-variant-numeric: tabular-nums;\n  }\n\n  .progress {\n    position: relative;\n    width: 100%;\n    background-color: var(--bp-color-border);\n    opacity: 0.3;\n    border-radius: var(--bp-border-radius-full);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    border-radius: var(--bp-border-radius-full);\n    transition:\n      width var(--bp-transition-base),\n      background-color var(--bp-transition-base);\n    opacity: 1;\n  }\n\n  /* Sizes */\n  .progress--sm {\n    height: var(--bp-spacing-2);\n  }\n\n  .progress--md {\n    height: var(--bp-spacing-3);\n  }\n\n  .progress--lg {\n    height: var(--bp-spacing-4);\n  }\n\n  /* Variants */\n  .progress--primary .progress-bar {\n    background-color: var(--bp-color-primary);\n  }\n\n  .progress--success .progress-bar {\n    background-color: var(--bp-color-success);\n  }\n\n  .progress--warning .progress-bar {\n    background-color: var(--bp-color-warning);\n  }\n\n  .progress--error .progress-bar {\n    background-color: var(--bp-color-error);\n  }\n\n  .progress--info .progress-bar {\n    background-color: var(--bp-color-info);\n  }\n\n  /* Indeterminate state */\n  .progress--indeterminate .progress-bar {\n    width: 40%;\n    animation: indeterminate 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    transform-origin: 0 0;\n  }\n\n  @keyframes indeterminate {\n    0% {\n      transform: translateX(-100%) scaleX(1);\n    }\n    40% {\n      transform: translateX(-10%) scaleX(1.5);\n    }\n    100% {\n      transform: translateX(250%) scaleX(0.5);\n    }\n  }\n\n  /* States */\n  .progress:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .progress--complete .progress-bar {\n    animation: complete-pulse 600ms ease-out;\n  }\n\n  @keyframes complete-pulse {\n    0%,\n    100% {\n      transform: scaleY(1);\n    }\n    50% {\n      transform: scaleY(1.15);\n    }\n  }\n\n  .progress--complete.progress--primary .progress-bar {\n    background-color: var(--bp-color-success);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { progressStyles } from './progress.style.js';\n\nexport type ProgressVariant =\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'info';\nexport type ProgressSize = 'sm' | 'md' | 'lg';\n\n/**\n * A progress bar component for displaying task completion or loading status.\n *\n * @fires bp-complete - Fired when progress reaches 100%\n */\n@customElement('bp-progress')\nexport class BpProgress extends LitElement {\n  /**\n   * Current progress value\n   */\n  @property({ type: Number }) declare value: number;\n\n  /**\n   * Maximum value for progress (value will be clamped to 0-max)\n   */\n  @property({ type: Number }) declare max: number;\n\n  /**\n   * Visual variant of the progress bar\n   */\n  @property({ type: String, reflect: true }) declare variant: ProgressVariant;\n\n  /**\n   * Size of the progress bar\n   */\n  @property({ type: String, reflect: true }) declare size: ProgressSize;\n\n  /**\n   * Optional label text displayed above the progress bar\n   */\n  @property({ type: String }) declare label: string;\n\n  /**\n   * Whether to show percentage text\n   */\n  @property({ type: Boolean }) declare showValue: boolean;\n\n  /**\n   * Whether the progress bar is indeterminate (loading state)\n   */\n  @property({ type: Boolean }) declare indeterminate: boolean;\n\n  static styles = [progressStyles];\n\n  constructor() {\n    super();\n    this.value = 0;\n    this.max = 100;\n    this.variant = 'primary';\n    this.size = 'md';\n    this.label = '';\n    this.showValue = false;\n    this.indeterminate = false;\n  }\n\n  private get percentage(): number {\n    if (this.max <= 0) return 0;\n    const percent = (this.value / this.max) * 100;\n    return Math.min(100, Math.max(0, percent));\n  }\n\n  private get complete(): boolean {\n    return this.percentage >= 100 && !this.indeterminate;\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value') && this.percentage >= 100) {\n      this.dispatchEvent(\n        new CustomEvent('bp-complete', {\n          detail: {\n            value: this.value,\n            max: this.max,\n            percentage: this.percentage,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"progress-container\">\n        ${this.label || this.showValue\n          ? html`\n              <div class=\"progress-header\" part=\"header\">\n                ${this.label\n                  ? html`<span class=\"progress-label\">${this.label}</span>`\n                  : null}\n                ${this.showValue && !this.indeterminate\n                  ? html`<span class=\"progress-value\"\n                      >${Math.round(this.percentage)}%</span\n                    >`\n                  : null}\n              </div>\n            `\n          : null}\n        <div\n          class=\"progress progress--${this.variant} progress--${this\n            .size} ${this.indeterminate ? 'progress--indeterminate' : ''} ${this\n            .complete\n            ? 'progress--complete'\n            : ''}\"\n          part=\"track\"\n          role=\"progressbar\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"${this.max}\"\n          aria-valuenow=\"${this.indeterminate ? undefined : this.value}\"\n          aria-label=\"${this.label || 'Progress'}\"\n          aria-live=\"polite\"\n          aria-atomic=\"false\"\n        >\n          <div\n            class=\"progress-bar\"\n            part=\"bar\"\n            style=\"width: ${this.indeterminate\n              ? '100%'\n              : this.percentage + '%'}\"\n          ></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-progress': BpProgress;\n  }\n}\n"],"names":["progressStyles","css","BpProgress","LitElement","percent","changedProperties","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/radio.js

@@ -0,0 +1,321 @@
+import { css as p, LitElement as h, html as u } from "lit";
+import { query as b, property as s, state as f, customElement as v } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import { live as m } from "lit/directives/live.js";
+const _ = p`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .radio {
+    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;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .radio__circle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: var(--bp-border-width) solid var(--bp-color-border-strong);
+    border-radius: 50%;
+    background-color: var(--bp-color-surface);
+    transition: all var(--bp-transition-fast);
+  }
+
+  .radio__circle-inner {
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background-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);
+  }
+
+  .radio__label {
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Sizes */
+  .radio--sm .radio__circle {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .radio--sm .radio__label {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .radio--md .radio__circle {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  .radio--md .radio__label {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .radio--lg .radio__circle {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  .radio--lg .radio__label {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* States - Checked */
+  .radio__input:checked ~ .radio__circle {
+    background-color: var(--bp-color-primary);
+    border-color: var(--bp-color-primary);
+  }
+
+  .radio__input:checked ~ .radio__circle .radio__circle-inner {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* States - Focus */
+  .radio--focused .radio__circle {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+    z-index: 1;
+  }
+
+  /* States - Hover */
+  .radio:hover:not(.radio--disabled) .radio__circle {
+    border-color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .radio:hover:not(.radio--disabled) .radio__input:checked ~ .radio__circle {
+    background-color: var(--bp-color-primary-hover);
+    border-color: var(--bp-color-primary-hover);
+  }
+
+  /* States - Active */
+  .radio:active:not(.radio--disabled) .radio__circle {
+    transform: scale(0.95);
+  }
+
+  /* States - Error */
+  .radio--error .radio__circle {
+    border-color: var(--bp-color-error);
+  }
+
+  .radio--error.radio--focused .radio__circle {
+    outline-color: var(--bp-color-error);
+  }
+
+  .radio--error .radio__input:checked ~ .radio__circle {
+    background-color: var(--bp-color-error);
+    border-color: var(--bp-color-error);
+  }
+
+  /* States - Disabled */
+  .radio--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Touch target size: ensure 44x44px minimum on touch devices */
+  @media (pointer: coarse) {
+    .radio {
+      min-height: 44px;
+      padding: var(--bp-spacing-xs) 0;
+    }
+
+    .radio__circle {
+      position: relative;
+    }
+
+    /* Expand touch target with pseudo-element */
+    .radio__circle::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+    }
+  }
+`;
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, a, i, l) => {
+  for (var o = l > 1 ? void 0 : l ? g(a, i) : a, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (o = (l ? d(a, i, o) : d(o)) || o);
+  return l && o && y(a, i, o), o;
+};
+let r = class extends h {
+  constructor() {
+    super(), this.hasFocus = !1, this.internals = null, this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "", this.size = "md", this.error = !1, "attachInternals" in this && (this.internals = this.attachInternals());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "radio"), this.updateAriaAttributes();
+  }
+  updated(e) {
+    super.updated(e), (e.has("checked") || e.has("disabled") || e.has("required") || e.has("error")) && (this.updateAriaAttributes(), this.updateFormValue());
+  }
+  updateAriaAttributes() {
+    this.setAttribute("aria-checked", this.checked.toString()), this.setAttribute("aria-disabled", this.disabled.toString()), this.required ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required"), this.error ? this.setAttribute("aria-invalid", "true") : this.removeAttribute("aria-invalid");
+  }
+  updateFormValue() {
+    this.internals && (this.checked ? this.internals.setFormValue(this.value || "on") : this.internals.setFormValue(null));
+  }
+  handleChange(e) {
+    const a = e.target;
+    this.checked = a.checked, this.checked && this.name && this.uncheckOtherRadios(), this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { checked: this.checked, value: this.value },
+        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
+      })
+    );
+  }
+  handleClick() {
+    this.disabled || this.input?.focus();
+  }
+  uncheckOtherRadios() {
+    if (!this.name) return;
+    const e = this.getRootNode();
+    Array.from(
+      e.querySelectorAll(`bp-radio[name="${this.name}"]`)
+    ).forEach((i) => {
+      i !== this && i.checked && !i.disabled && (i.checked = !1);
+    });
+  }
+  /**
+   * Sets focus on the radio.
+   */
+  focus(e) {
+    this.input?.focus(e);
+  }
+  /**
+   * Removes focus from the radio.
+   */
+  blur() {
+    this.input?.blur();
+  }
+  /**
+   * Checks if the radio satisfies its required constraint.
+   */
+  checkValidity() {
+    return this.input?.checkValidity() ?? !0;
+  }
+  /**
+   * Checks validity and shows validation message if invalid.
+   */
+  reportValidity() {
+    return this.input?.reportValidity() ?? !0;
+  }
+  render() {
+    const e = [
+      "radio",
+      `radio--${this.size}`,
+      this.disabled ? "radio--disabled" : "",
+      this.error ? "radio--error" : "",
+      this.hasFocus ? "radio--focused" : ""
+    ].filter(Boolean).join(" ");
+    return u`
+      <label class=${e} part="radio" @click=${this.handleClick}>
+        <input
+          class="radio__input"
+          part="input"
+          type="radio"
+          name=${n(this.name || void 0)}
+          value=${n(this.value || void 0)}
+          .checked=${m(this.checked)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          aria-hidden="true"
+          tabindex="-1"
+        />
+        <span class="radio__circle" part="circle">
+          <span class="radio__circle-inner"></span>
+        </span>
+        <span class="radio__label" part="label">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+  }
+};
+r.styles = [_];
+r.formAssociated = !0;
+t([
+  b('input[type="radio"]')
+], r.prototype, "input", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "checked", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+t([
+  s({ type: String, reflect: !0 })
+], r.prototype, "name", 2);
+t([
+  s({ type: String })
+], r.prototype, "value", 2);
+t([
+  s({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+t([
+  f()
+], r.prototype, "hasFocus", 2);
+r = t([
+  v("bp-radio")
+], r);
+export {
+  r as BpRadio
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../source/components/radio/radio.style.ts","../../source/components/radio/radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radioStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .radio {\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  .radio__input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .radio__circle {\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-border-strong);\n    border-radius: 50%;\n    background-color: var(--bp-color-surface);\n    transition: all var(--bp-transition-fast);\n  }\n\n  .radio__circle-inner {\n    width: 50%;\n    height: 50%;\n    border-radius: 50%;\n    background-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  .radio__label {\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Sizes */\n  .radio--sm .radio__circle {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .radio--sm .radio__label {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .radio--md .radio__circle {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .radio--md .radio__label {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .radio--lg .radio__circle {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .radio--lg .radio__label {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* States - Checked */\n  .radio__input:checked ~ .radio__circle {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n  }\n\n  .radio__input:checked ~ .radio__circle .radio__circle-inner {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* States - Focus */\n  .radio--focused .radio__circle {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    z-index: 1;\n  }\n\n  /* States - Hover */\n  .radio:hover:not(.radio--disabled) .radio__circle {\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  .radio:hover:not(.radio--disabled) .radio__input:checked ~ .radio__circle {\n    background-color: var(--bp-color-primary-hover);\n    border-color: var(--bp-color-primary-hover);\n  }\n\n  /* States - Active */\n  .radio:active:not(.radio--disabled) .radio__circle {\n    transform: scale(0.95);\n  }\n\n  /* States - Error */\n  .radio--error .radio__circle {\n    border-color: var(--bp-color-error);\n  }\n\n  .radio--error.radio--focused .radio__circle {\n    outline-color: var(--bp-color-error);\n  }\n\n  .radio--error .radio__input:checked ~ .radio__circle {\n    background-color: var(--bp-color-error);\n    border-color: var(--bp-color-error);\n  }\n\n  /* States - Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .radio {\n      min-height: 44px;\n      padding: var(--bp-spacing-xs) 0;\n    }\n\n    .radio__circle {\n      position: relative;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .radio__circle::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 } 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 { radioStyles } from './radio.style.js';\n\nexport type RadioSize = 'sm' | 'md' | 'lg';\n\n/**\n * A form radio input with label support and group functionality.\n *\n * @element bp-radio\n *\n * @property {boolean} checked - Whether the radio is checked\n * @property {boolean} disabled - Whether the radio is disabled\n * @property {boolean} required - Whether the radio is required\n * @property {string} name - The name of the radio for form submission and grouping\n * @property {string} value - The value of the radio for form submission\n * @property {RadioSize} size - The size of the radio\n * @property {boolean} error - Whether the radio has an error state\n *\n * @slot - The radio label text\n *\n * @fires bp-change - Fired when the checked state changes\n * @fires bp-focus - Fired when the radio receives focus\n * @fires bp-blur - Fired when the radio loses focus\n *\n * @csspart radio - The radio container\n * @csspart input - The native radio input element\n * @csspart circle - The visual circle indicator\n * @csspart label - The label text container\n */\n@customElement('bp-radio')\nexport class BpRadio extends LitElement {\n  @query('input[type=\"radio\"]') declare input: HTMLInputElement;\n\n  /**\n   * Whether the radio is checked.\n   */\n  @property({ type: Boolean, reflect: true }) declare checked: boolean;\n\n  /**\n   * Whether the radio is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Whether the radio is required.\n   */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /**\n   * The name of the radio for form submission and grouping.\n   * Radios with the same name form a group where only one can be selected.\n   */\n  @property({ type: String, reflect: true }) declare name: string;\n\n  /**\n   * The value of the radio for form submission.\n   */\n  @property({ type: String }) declare value: string;\n\n  /**\n   * The size of the radio.\n   */\n  @property({ type: String, reflect: true }) declare size: RadioSize;\n\n  /**\n   * Whether the radio has an error state.\n   */\n  @property({ type: Boolean, reflect: true }) declare error: boolean;\n\n  @state() private hasFocus = false;\n\n  static styles = [radioStyles];\n\n  static formAssociated = true;\n  private internals: globalThis.ElementInternals | null = null;\n\n  constructor() {\n    super();\n    this.checked = false;\n    this.disabled = false;\n    this.required = false;\n    this.name = '';\n    this.value = '';\n    this.size = 'md';\n    this.error = false;\n\n    if ('attachInternals' in this) {\n      this.internals = (this as HTMLElement).attachInternals();\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'radio');\n    this.updateAriaAttributes();\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('checked') ||\n      changedProperties.has('disabled') ||\n      changedProperties.has('required') ||\n      changedProperties.has('error')\n    ) {\n      this.updateAriaAttributes();\n      this.updateFormValue();\n    }\n  }\n\n  private updateAriaAttributes(): void {\n    this.setAttribute('aria-checked', this.checked.toString());\n    this.setAttribute('aria-disabled', this.disabled.toString());\n\n    if (this.required) {\n      this.setAttribute('aria-required', 'true');\n    } else {\n      this.removeAttribute('aria-required');\n    }\n\n    if (this.error) {\n      this.setAttribute('aria-invalid', 'true');\n    } else {\n      this.removeAttribute('aria-invalid');\n    }\n  }\n\n  private updateFormValue(): void {\n    if (!this.internals) return;\n\n    if (this.checked) {\n      this.internals.setFormValue(this.value || 'on');\n    } else {\n      this.internals.setFormValue(null);\n    }\n  }\n\n  private handleChange(event: Event): void {\n    const inputElement = event.target as HTMLInputElement;\n    this.checked = inputElement.checked;\n\n    // Uncheck other radios in the same group\n    if (this.checked && this.name) {\n      this.uncheckOtherRadios();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { checked: this.checked, value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleFocus(): void {\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(): void {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.input?.focus();\n    }\n  }\n\n  private uncheckOtherRadios(): void {\n    if (!this.name) return;\n\n    // Find all radios with the same name in the document\n    const root = this.getRootNode() as\n      | globalThis.Document\n      | globalThis.ShadowRoot;\n    const radios = Array.from(\n      root.querySelectorAll(`bp-radio[name=\"${this.name}\"]`)\n    ) as BpRadio[];\n\n    radios.forEach((radio) => {\n      if (radio !== this && radio.checked && !radio.disabled) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  /**\n   * Sets focus on the radio.\n   */\n  focus(options?: globalThis.FocusOptions): void {\n    this.input?.focus(options);\n  }\n\n  /**\n   * Removes focus from the radio.\n   */\n  blur(): void {\n    this.input?.blur();\n  }\n\n  /**\n   * Checks if the radio satisfies its required constraint.\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity() ?? true;\n  }\n\n  /**\n   * Checks validity and shows validation message if invalid.\n   */\n  reportValidity(): boolean {\n    return this.input?.reportValidity() ?? true;\n  }\n\n  render() {\n    const classes = [\n      'radio',\n      `radio--${this.size}`,\n      this.disabled ? 'radio--disabled' : '',\n      this.error ? 'radio--error' : '',\n      this.hasFocus ? 'radio--focused' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <label class=${classes} part=\"radio\" @click=${this.handleClick}>\n        <input\n          class=\"radio__input\"\n          part=\"input\"\n          type=\"radio\"\n          name=${ifDefined(this.name || undefined)}\n          value=${ifDefined(this.value || undefined)}\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n        />\n        <span class=\"radio__circle\" part=\"circle\">\n          <span class=\"radio__circle-inner\"></span>\n        </span>\n        <span class=\"radio__label\" part=\"label\">\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-radio': BpRadio;\n  }\n}\n"],"names":["radioStyles","css","BpRadio","LitElement","changedProperties","event","inputElement","root","radio","options","classes","html","ifDefined","live","__decorateClass","query","property","state","customElement"],"mappings":"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"}