@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/progress-BPsiJ-Bl.js

@@ -0,0 +1,198 @@
+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";
+//#region source/components/progress/progress.style.ts
+var o = n`
+  /* 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);
+  }
+`, s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	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;
+		let e = this.value / this.max * 100;
+		return Math.min(100, Math.max(0, e));
+	}
+	get complete() {
+		return this.percentage >= 100 && !this.indeterminate;
+	}
+	updated(e) {
+		super.updated(e), e.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 r`
+      <div class="progress-container">
+        ${this.label || this.showValue ? r`
+                <div class="progress-header" part="header">
+                  ${this.label ? r`<span class="progress-label">${this.label}</span>` : null}
+                  ${this.showValue && !this.indeterminate ? r`<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>
+    `;
+	}
+};
+e([a({ type: Number })], s.prototype, "value", void 0), e([a({ type: Number })], s.prototype, "max", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({ type: Boolean })], s.prototype, "showValue", void 0), e([a({ type: Boolean })], s.prototype, "indeterminate", void 0), s = e([i("bp-progress")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=progress-BPsiJ-Bl.js.map

package/dist/shared/progress-BPsiJ-Bl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-BPsiJ-Bl.js","names":["_decorate","__decorate","progressStyles","BpProgress","LitElement","percent","changedProperties","property","customElement"],"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' | 'success' | 'warning' | 'error' | '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        ${\n          this.label || this.showValue\n            ? html`\n                <div class=\"progress-header\" part=\"header\">\n                  ${\n                    this.label\n                      ? html`<span class=\"progress-label\">${this.label}</span>`\n                      : null\n                  }\n                  ${\n                    this.showValue && !this.indeterminate\n                      ? html`<span class=\"progress-value\"\n                          >${Math.round(this.percentage)}%</span\n                        >`\n                      : null\n                  }\n                </div>\n              `\n            : null\n        }\n        <div\n          class=\"progress progress--${this.variant} progress--${\n            this.size\n          } ${this.indeterminate ? 'progress--indeterminate' : ''} ${\n            this.complete ? '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: ${\n              this.indeterminate ? '100%' : this.percentage + '%'\n            }\"\n          ></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-progress': BpProgress;\n  }\n}\n"],"mappings":";;;;AAEA,IAAaE,IAAiB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCYpBC,IAAN,cAAyBC,EAAW;;EAoCzB,KAAA,SAAA,CAACF,CAAc;;CAE/B,cAAc;EAQZ,AAPA,MAAM,GACN,KAAK,QAAQ,GACb,KAAK,MAAM,KACX,KAAK,UAAU,WACf,KAAK,OAAO,MACZ,KAAK,QAAQ,IACb,KAAK,YAAY,IACjB,KAAK,gBAAgB;CACvB;CAEA,IAAY,aAAqB;EAC/B,IAAI,KAAK,OAAO,GAAG,OAAO;EAC1B,IAAMG,IAAW,KAAK,QAAQ,KAAK,MAAO;EAC1C,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGA,CAAO,CAAC;CAC3C;CAEA,IAAY,WAAoB;EAC9B,OAAO,KAAK,cAAc,OAAO,CAAC,KAAK;CACzC;CAEA,QAAQ,GAAyC;EAG/C,AAFA,MAAM,QAAQC,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,KAAK,KAAK,cAAc,OACvD,KAAK,cACH,IAAI,YAAY,eAAe;GAC7B,QAAQ;IACN,OAAO,KAAK;IACZ,KAAK,KAAK;IACV,YAAY,KAAK;GACnB;GACA,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CAEJ;CAEA,SAAS;EACP,OAAO,CAAI;;UAGL,KAAK,SAAS,KAAK,YACf,CAAI;;oBAGE,KAAK,QACD,CAAI,gCAAgC,KAAK,MAAM,WAC/C,KACL;oBAEC,KAAK,aAAa,CAAC,KAAK,gBACpB,CAAI;6BACC,KAAK,MAAM,KAAK,UAAU,EAAE;6BAEjC,KACL;;kBAGL,KACL;;sCAE6B,KAAK,QAAQ,aACvC,KAAK,KACN,GAAG,KAAK,gBAAgB,4BAA4B,GAAG,GACtD,KAAK,WAAW,uBAAuB,GACxC;;;;2BAIgB,KAAK,IAAI;2BACT,KAAK,gBAAgB,KAAA,IAAY,KAAK,MAAM;wBAC/C,KAAK,SAAS,WAAW;;;;;;;4BAQnC,KAAK,gBAAgB,SAAS,KAAK,aAAa,IACjD;;;;;CAKX;AACF;AA1HGN,EAAA,CAAAO,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAJ,EAAA,WAAA,SAAA,KAAA,CAAA,GAKzBH,EAAA,CAAAO,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAJ,EAAA,WAAA,OAAA,KAAA,CAAA,GAKzBH,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,WAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAO,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAJ,EAAA,WAAA,SAAA,KAAA,CAAA,GAKzBH,EAAA,CAAAO,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAJ,EAAA,WAAA,aAAA,KAAA,CAAA,GAK1BH,EAAA,CAAAO,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAJ,EAAA,WAAA,iBAAA,KAAA,CAAA,GAnC5B,IAAAH,EAAA,CAAAQ,EAAc,aAAa,CAAA,GAAAL,CAAA"}

package/dist/shared/radio-DnuSzORk.js

@@ -0,0 +1,306 @@
+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, query as o, state as s } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { live as l } from "lit/directives/live.js";
+//#region source/components/radio/radio.style.ts
+var u = n`
+  /* 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-input-border);
+    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;
+    }
+  }
+`, d = class extends t {
+	static {
+		this.styles = [u];
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.hasFocus = !1, this.internals = null, this.handleKeyDown = (e) => {
+			(e.key === " " || e.key === "Spacebar") && (e.preventDefault(), this.select());
+		}, this.handleFocus = () => {
+			this.hasFocus = !0, this.dispatchEvent(new CustomEvent("bp-focus", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.handleBlur = () => {
+			this.hasFocus = !1, this.dispatchEvent(new CustomEvent("bp-blur", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, 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()), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "radio"), this.updateAriaAttributes(), this.updateTabIndex();
+	}
+	updateTabIndex() {
+		this.closest("bp-radio-group") || (this.tabIndex = this.disabled ? -1 : 0);
+	}
+	select() {
+		this.disabled || this.checked || (this.checked = !0, this.name && this.uncheckOtherRadios(), this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: {
+				checked: this.checked,
+				value: this.value
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	updated(e) {
+		super.updated(e), (e.has("checked") || e.has("disabled") || e.has("required") || e.has("error")) && (this.updateAriaAttributes(), this.updateFormValue()), e.has("disabled") && this.updateTabIndex();
+	}
+	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) {
+		let t = e.target;
+		this.checked = t.checked, this.checked && this.name && this.uncheckOtherRadios(), this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: {
+				checked: this.checked,
+				value: this.value
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleClick() {
+		this.disabled || this.focus();
+	}
+	uncheckOtherRadios() {
+		if (!this.name) return;
+		let e = this.getRootNode();
+		Array.from(e.querySelectorAll(`bp-radio[name="${this.name}"]`)).forEach((e) => {
+			e !== this && e.checked && !e.disabled && (e.checked = !1);
+		});
+	}
+	focus(e) {
+		HTMLElement.prototype.focus.call(this, e);
+	}
+	blur() {
+		HTMLElement.prototype.blur.call(this);
+	}
+	checkValidity() {
+		return this.input?.checkValidity() ?? !0;
+	}
+	reportValidity() {
+		return this.input?.reportValidity() ?? !0;
+	}
+	render() {
+		let e = [
+			"radio",
+			`radio--${this.size}`,
+			this.disabled ? "radio--disabled" : "",
+			this.error ? "radio--error" : "",
+			this.hasFocus ? "radio--focused" : ""
+		].filter(Boolean).join(" ");
+		return r`
+      <label class=${e} part="radio" @click=${this.handleClick}>
+        <input
+          class="radio__input"
+          part="input"
+          type="radio"
+          name=${c(this.name || void 0)}
+          value=${c(this.value || void 0)}
+          .checked=${l(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>
+    `;
+	}
+};
+e([o("input[type=\"radio\"]")], d.prototype, "input", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "checked", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "required", void 0), e([a({
+	type: String,
+	reflect: !0
+})], d.prototype, "name", void 0), e([a({ type: String })], d.prototype, "value", void 0), e([a({
+	type: String,
+	reflect: !0
+})], d.prototype, "size", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "error", void 0), e([s()], d.prototype, "hasFocus", void 0), d = e([i("bp-radio")], d);
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=radio-DnuSzORk.js.map

package/dist/shared/radio-DnuSzORk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-DnuSzORk.js","names":["_decorate","__decorate","radioStyles","BpRadio","LitElement","event","changedProperties","inputElement","root","radio","options","classes","ifDefined","live","query","property","state","customElement"],"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-input-border);\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    // The host carries role=\"radio\", so the host is what takes focus.\n    this.addEventListener('focus', this.handleFocus);\n    this.addEventListener('blur', this.handleBlur);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'radio');\n    this.updateAriaAttributes();\n    this.updateTabIndex();\n  }\n\n  /**\n   * Standalone radios are each in the tab order. Inside a\n   * <bp-radio-group> the group manages a roving tabindex instead.\n   */\n  private updateTabIndex(): void {\n    if (this.closest('bp-radio-group')) return;\n    this.tabIndex = this.disabled ? -1 : 0;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  /**\n   * Checks this radio (unchecking others with the same name) and fires\n   * bp-change, as a user selection would. Does nothing when disabled or\n   * already checked.\n   */\n  select(): void {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    if (this.name) this.uncheckOtherRadios();\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  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    if (changedProperties.has('disabled')) {\n      this.updateTabIndex();\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.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 | 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    HTMLElement.prototype.focus.call(this, options);\n  }\n\n  /**\n   * Removes focus from the radio.\n   */\n  blur(): void {\n    HTMLElement.prototype.blur.call(this);\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"],"mappings":"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"}