@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/alert-CZE6Ht5G.js

@@ -0,0 +1,234 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import n from "../icons/info-circle.js";
+import { checkCircleSvg as r } from "../icons/check-circle.js";
+import i from "../icons/warning-circle.js";
+import { crossCircleSvg as a } from "../icons/cross-circle.js";
+import { crossSvg as o } from "../icons/cross.js";
+import { LitElement as s, css as c, html as l } from "lit";
+import { customElement as u, property as d } from "lit/decorators.js";
+//#region source/components/alert/alert.style.ts
+var f = c`
+  /* Base styles */
+  :host {
+    display: block;
+    animation: slideIn var(--bp-transition-base) ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--bp-spacing-md)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .alert {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-md);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-relaxed);
+    border-radius: var(--bp-border-radius-md);
+    border-width: var(--bp-border-width);
+    border-style: solid;
+  }
+
+  @media (min-width: var(--bp-breakpoint-sm)) {
+    .alert {
+      padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    }
+  }
+
+  .alert-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-md);
+    flex: 1;
+  }
+
+  .alert-icon {
+    display: flex;
+    align-items: flex-start;
+    padding-top: var(--bp-spacing-0-5);
+    flex-shrink: 0;
+  }
+
+  .alert-icon svg {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+    flex-shrink: 0;
+  }
+
+  .alert-message {
+    flex: 1;
+  }
+
+  ::slotted([slot='title']) {
+    display: block;
+    font-weight: var(--bp-font-weight-semibold);
+    line-height: var(--bp-line-height-tight);
+    margin-bottom: var(--bp-spacing-xs);
+  }
+
+  .alert-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--bp-spacing-2xs);
+    border-radius: var(--bp-border-radius-sm);
+    color: inherit;
+    opacity: 0.8;
+    transition: all var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .alert-close:hover {
+    opacity: 1;
+    background-color: currentColor;
+    opacity: 0.1;
+  }
+
+  .alert-close:active {
+    opacity: 0.15;
+  }
+
+  .alert-close:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Variants */
+  .alert--info {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-info);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+  }
+
+  .alert--info .alert-icon {
+    color: var(--bp-color-info);
+  }
+
+  .alert--success {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-success);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+  }
+
+  .alert--success .alert-icon {
+    color: var(--bp-color-success);
+  }
+
+  .alert--warning {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-warning);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  .alert--warning .alert-icon {
+    color: var(--bp-color-warning);
+  }
+
+  .alert--error {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-error);
+    border-left-width: var(--bp-spacing-1);
+    color: var(--bp-color-text);
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  .alert--error .alert-icon {
+    color: var(--bp-color-error);
+  }
+`, p = {
+	info: n,
+	success: r,
+	warning: i,
+	error: a
+}, m = class extends s {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [f];
+	}
+	constructor() {
+		super(), this.variant = "info", this.dismissible = !1, this.showIcon = !1;
+	}
+	handleClose() {
+		let e = new CustomEvent("bp-close", {
+			detail: {
+				variant: this.variant,
+				timestamp: Date.now()
+			},
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		});
+		this.dispatchEvent(e), e.defaultPrevented || this.remove();
+	}
+	getVariantIconSvg() {
+		return p[this.variant];
+	}
+	render() {
+		return l`
+      <div
+        class="alert alert--${this.variant}"
+        part="alert"
+        role="alert"
+        aria-live="polite"
+      >
+        <div class="alert-content">
+          ${this.showIcon ? l`
+                  <div class="alert-icon" part="icon">
+                    <slot name="icon">
+                      <bp-icon .svg=${this.getVariantIconSvg()}></bp-icon>
+                    </slot>
+                  </div>
+                ` : null}
+          <div class="alert-message" part="message">
+            <slot name="title"></slot>
+            <slot></slot>
+          </div>
+        </div>
+        ${this.dismissible ? l`
+                <button
+                  class="alert-close"
+                  part="close-button"
+                  @click=${this.handleClose}
+                  aria-label="Close alert"
+                >
+                  <bp-icon .svg=${o}></bp-icon>
+                </button>
+              ` : null}
+      </div>
+    `;
+	}
+};
+e([d({
+	type: String,
+	reflect: !0
+})], m.prototype, "variant", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "dismissible", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "showIcon", void 0), m = e([u("bp-alert")], m);
+//#endregion
+export { m as t };
+
+//# sourceMappingURL=alert-CZE6Ht5G.js.map

package/dist/shared/alert-CZE6Ht5G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-CZE6Ht5G.js","names":["_decorate","__decorate","infoCircleSvg","warningCircleSvg","alertStyles","VARIANT_ICONS","checkCircleSvg","crossCircleSvg","BpAlert","LitElement","BpIcon","event","crossSvg","property","customElement"],"sources":["../../source/components/alert/alert.style.ts","../../source/components/alert/alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const alertStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n    animation: slideIn var(--bp-transition-base) ease-out;\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-md)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    border-radius: var(--bp-border-radius-md);\n    border-width: var(--bp-border-width);\n    border-style: solid;\n  }\n\n  @media (min-width: var(--bp-breakpoint-sm)) {\n    .alert {\n      padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    }\n  }\n\n  .alert-content {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    flex: 1;\n  }\n\n  .alert-icon {\n    display: flex;\n    align-items: flex-start;\n    padding-top: var(--bp-spacing-0-5);\n    flex-shrink: 0;\n  }\n\n  .alert-icon svg {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n    flex-shrink: 0;\n  }\n\n  .alert-message {\n    flex: 1;\n  }\n\n  ::slotted([slot='title']) {\n    display: block;\n    font-weight: var(--bp-font-weight-semibold);\n    line-height: var(--bp-line-height-tight);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .alert-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--bp-spacing-2xs);\n    border-radius: var(--bp-border-radius-sm);\n    color: inherit;\n    opacity: 0.8;\n    transition: all var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .alert-close:hover {\n    opacity: 1;\n    background-color: currentColor;\n    opacity: 0.1;\n  }\n\n  .alert-close:active {\n    opacity: 0.15;\n  }\n\n  .alert-close:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Variants */\n  .alert--info {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-info);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--info .alert-icon {\n    color: var(--bp-color-info);\n  }\n\n  .alert--success {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-success);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--success .alert-icon {\n    color: var(--bp-color-success);\n  }\n\n  .alert--warning {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-warning);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .alert--warning .alert-icon {\n    color: var(--bp-color-warning);\n  }\n\n  .alert--error {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-error);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .alert--error .alert-icon {\n    color: var(--bp-color-error);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { alertStyles } from './alert.style.js';\nimport { infoCircleSvg } from '../icon/icons/entries/info-circle.js';\nimport { checkCircleSvg } from '../icon/icons/entries/check-circle.js';\nimport { warningCircleSvg } from '../icon/icons/entries/warning-circle.js';\nimport { crossCircleSvg } from '../icon/icons/entries/cross-circle.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\nconst VARIANT_ICONS: Record<AlertVariant, string> = {\n  info: infoCircleSvg,\n  success: checkCircleSvg,\n  warning: warningCircleSvg,\n  error: crossCircleSvg,\n};\n\n/**\n * An alert component for displaying notification messages to users.\n *\n * @slot - Message content\n * @slot title - Optional title/heading for the alert\n * @slot icon - Optional custom icon (replaces default icon)\n *\n * @fires bp-close - Fired when the alert is dismissed (cancelable)\n */\n@customElement('bp-alert')\nexport class BpAlert extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /**\n   * Visual variant indicating the type of alert\n   */\n  @property({ type: String, reflect: true }) declare variant: AlertVariant;\n\n  /**\n   * Whether the alert can be dismissed by the user\n   */\n  @property({ type: Boolean, reflect: true }) declare dismissible: boolean;\n\n  /**\n   * Whether to show a default icon for the variant\n   */\n  @property({ type: Boolean, reflect: true }) declare showIcon: boolean;\n\n  static styles = [alertStyles];\n\n  constructor() {\n    super();\n    this.variant = 'info';\n    this.dismissible = false;\n    this.showIcon = false;\n  }\n\n  private handleClose() {\n    const event = new CustomEvent('bp-close', {\n      detail: {\n        variant: this.variant,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    // Only remove if event wasn't prevented\n    if (!event.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private getVariantIconSvg(): string {\n    return VARIANT_ICONS[this.variant];\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"alert alert--${this.variant}\"\n        part=\"alert\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <div class=\"alert-content\">\n          ${\n            this.showIcon\n              ? html`\n                  <div class=\"alert-icon\" part=\"icon\">\n                    <slot name=\"icon\">\n                      <bp-icon .svg=${this.getVariantIconSvg()}></bp-icon>\n                    </slot>\n                  </div>\n                `\n              : null\n          }\n          <div class=\"alert-message\" part=\"message\">\n            <slot name=\"title\"></slot>\n            <slot></slot>\n          </div>\n        </div>\n        ${\n          this.dismissible\n            ? html`\n                <button\n                  class=\"alert-close\"\n                  part=\"close-button\"\n                  @click=${this.handleClose}\n                  aria-label=\"Close alert\"\n                >\n                  <bp-icon .svg=${crossSvg}></bp-icon>\n                </button>\n              `\n            : null\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-alert': BpAlert;\n  }\n}\n"],"mappings":";;;;;;;;;;AAEA,IAAaI,IAAc,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCUxBC,IAA8C;CAClD,MAAMH;CACN,SAASI;CACT,SAASH;CACT,OAAOI;AACT,GAYaC,IAAN,cAAsBC,EAAW;;EAKhB,KAAA,eAAA,CAACC,CAAM;;;EAiBb,KAAA,SAAA,CAACN,CAAW;;CAE5B,cAAc;EAIZ,AAHA,MAAM,GACN,KAAK,UAAU,QACf,KAAK,cAAc,IACnB,KAAK,WAAW;CAClB;CAEA,cAAsB;EACpB,IAAMO,IAAQ,IAAI,YAAY,YAAY;GACxC,QAAQ;IACN,SAAS,KAAK;IACd,WAAW,KAAK,IAAI;GACtB;GACA,SAAS;GACT,UAAU;GACV,YAAY;EACd,CAAC;EAKD,AAHA,KAAK,cAAcA,CAAK,GAGnBA,EAAM,oBACT,KAAK,OAAO;CAEhB;CAEA,oBAAoC;EAClC,OAAON,EAAc,KAAK;CAC5B;CAEA,SAAS;EACP,OAAO,CAAI;;8BAEe,KAAK,QAAQ;;;;;;YAO/B,KAAK,WACD,CAAI;;;sCAGkB,KAAK,kBAAkB,EAAE;;;oBAI/C,KACL;;;;;;UAOD,KAAK,cACD,CAAI;;;;2BAIS,KAAK,YAAY;;;kCAGVO,EAAS;;kBAG7B,KACL;;;CAGP;AACF;AAtFGZ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,WAAA,KAAA,CAAA,GAKxCR,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,eAAA,KAAA,CAAA,GAKzCR,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,YAAA,KAAA,CAAA,GArB3C,IAAAR,EAAA,CAAAc,EAAc,UAAU,CAAA,GAAAN,CAAA"}

package/dist/shared/avatar-DMc878aU.js

@@ -0,0 +1,232 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import n from "../icons/users.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+//#region source/components/avatar/avatar.style.ts
+var l = i`
+  /* Base styles */
+  :host {
+    display: inline-flex;
+    position: relative;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-semibold);
+    user-select: none;
+    flex-shrink: 0;
+    box-shadow: var(--bp-shadow-sm);
+    position: relative;
+  }
+
+  /* Image avatars have different background */
+  .avatar:has(.avatar__image) {
+    background: var(--bp-color-surface);
+    color: var(--bp-color-text);
+  }
+
+  .avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .avatar__initials {
+    text-transform: uppercase;
+    line-height: 1;
+    letter-spacing: 0.02em;
+  }
+
+  .avatar__fallback {
+    opacity: 0.8;
+  }
+
+  /* Shapes */
+  .avatar--circle {
+    border-radius: var(--bp-border-radius-full);
+  }
+
+  .avatar--square {
+    border-radius: var(--bp-border-radius-sm);
+  }
+
+  /* Sizes */
+  .avatar--xs {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  .avatar--xs .avatar__initials {
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .avatar--sm {
+    width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+  }
+
+  .avatar--sm .avatar__initials {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .avatar--md {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+  }
+
+  .avatar--md .avatar__initials {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .avatar--lg {
+    width: var(--bp-spacing-12);
+    height: var(--bp-spacing-12);
+  }
+
+  .avatar--lg .avatar__initials {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .avatar--xl {
+    width: var(--bp-spacing-16);
+    height: var(--bp-spacing-16);
+  }
+
+  .avatar--xl .avatar__initials {
+    font-size: var(--bp-font-size-2xl);
+  }
+
+  /* States - Interactive */
+  :host([clickable]) .avatar {
+    cursor: pointer;
+    transition:
+      transform var(--bp-duration-fast),
+      box-shadow var(--bp-duration-fast);
+  }
+
+  :host([clickable]) .avatar:hover {
+    transform: translateY(calc(-1 * var(--bp-spacing-0-5)));
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  :host([clickable]:focus-within) .avatar {
+    outline: var(--bp-focus-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Status indicator */
+  .avatar__status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 25%;
+    height: 25%;
+    min-width: var(--bp-spacing-2);
+    min-height: var(--bp-spacing-2);
+    border-radius: var(--bp-border-radius-full);
+    border: var(--bp-focus-width) solid var(--bp-color-surface-elevated);
+  }
+
+  .avatar__status--online {
+    background: var(--bp-color-success);
+  }
+
+  .avatar__status--offline {
+    background: var(--bp-color-border-strong);
+  }
+
+  .avatar__status--busy {
+    background: var(--bp-color-error);
+  }
+
+  .avatar__status--away {
+    background: var(--bp-color-warning);
+  }
+`, u = class extends r {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.imageError = !1, this.src = "", this.alt = "", this.initials = "", this.size = "md", this.shape = "circle", this.clickable = !1, this.name = "";
+	}
+	handleImageError() {
+		this.imageError = !0;
+	}
+	render() {
+		let e = this.src.length > 0 && !this.imageError, t = this.initials.length > 0, r = this.name || this.alt;
+		return a`
+      <div
+        class="avatar avatar--${this.size} avatar--${this.shape}"
+        part="avatar"
+        title="${r}"
+      >
+        ${e ? a`
+                <img
+                  class="avatar__image"
+                  src="${this.src}"
+                  alt="${this.alt}"
+                  @error="${this.handleImageError}"
+                  part="image"
+                />
+              ` : t ? a`<span
+                  class="avatar__initials"
+                  part="initials"
+                  role="img"
+                  aria-label="${this.alt || "User avatar"}"
+                  >${this.initials}</span
+                >` : a`<bp-icon
+                  class="avatar__fallback"
+                  .svg=${n}
+                  size="${this.size === "xs" ? "xs" : this.size === "xl" ? "lg" : this.size}"
+                  part="fallback"
+                  aria-label="User avatar"
+                ></bp-icon>`}
+        ${this.status ? a`<span
+                class="avatar__status avatar__status--${this.status}"
+                part="status"
+                aria-label="${this.status}"
+              ></span>` : ""}
+      </div>
+    `;
+	}
+	updated(e) {
+		e.has("src") && (this.imageError = !1);
+	}
+};
+e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "src", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "alt", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "initials", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "shape", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "status", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "clickable", void 0), e([s({ type: String })], u.prototype, "name", void 0), e([c()], u.prototype, "imageError", void 0), u = e([o("bp-avatar")], u);
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=avatar-DMc878aU.js.map

package/dist/shared/avatar-DMc878aU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-DMc878aU.js","names":["_decorate","__decorate","usersSvg","avatarStyles","BpAvatar","LitElement","BpIcon","hasImage","hasInitials","titleText","changedProperties","property","state","customElement"],"sources":["../../source/components/avatar/avatar.style.ts","../../source/components/avatar/avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const avatarStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    position: relative;\n  }\n\n  .avatar {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-semibold);\n    user-select: none;\n    flex-shrink: 0;\n    box-shadow: var(--bp-shadow-sm);\n    position: relative;\n  }\n\n  /* Image avatars have different background */\n  .avatar:has(.avatar__image) {\n    background: var(--bp-color-surface);\n    color: var(--bp-color-text);\n  }\n\n  .avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .avatar__initials {\n    text-transform: uppercase;\n    line-height: 1;\n    letter-spacing: 0.02em;\n  }\n\n  .avatar__fallback {\n    opacity: 0.8;\n  }\n\n  /* Shapes */\n  .avatar--circle {\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  .avatar--square {\n    border-radius: var(--bp-border-radius-sm);\n  }\n\n  /* Sizes */\n  .avatar--xs {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .avatar--xs .avatar__initials {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .avatar--sm {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n\n  .avatar--sm .avatar__initials {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .avatar--md {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n\n  .avatar--md .avatar__initials {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .avatar--lg {\n    width: var(--bp-spacing-12);\n    height: var(--bp-spacing-12);\n  }\n\n  .avatar--lg .avatar__initials {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .avatar--xl {\n    width: var(--bp-spacing-16);\n    height: var(--bp-spacing-16);\n  }\n\n  .avatar--xl .avatar__initials {\n    font-size: var(--bp-font-size-2xl);\n  }\n\n  /* States - Interactive */\n  :host([clickable]) .avatar {\n    cursor: pointer;\n    transition:\n      transform var(--bp-duration-fast),\n      box-shadow var(--bp-duration-fast);\n  }\n\n  :host([clickable]) .avatar:hover {\n    transform: translateY(calc(-1 * var(--bp-spacing-0-5)));\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  :host([clickable]:focus-within) .avatar {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Status indicator */\n  .avatar__status {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 25%;\n    height: 25%;\n    min-width: var(--bp-spacing-2);\n    min-height: var(--bp-spacing-2);\n    border-radius: var(--bp-border-radius-full);\n    border: var(--bp-focus-width) solid var(--bp-color-surface-elevated);\n  }\n\n  .avatar__status--online {\n    background: var(--bp-color-success);\n  }\n\n  .avatar__status--offline {\n    background: var(--bp-color-border-strong);\n  }\n\n  .avatar__status--busy {\n    background: var(--bp-color-error);\n  }\n\n  .avatar__status--away {\n    background: var(--bp-color-warning);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { avatarStyles } from './avatar.style.js';\nimport { usersSvg } from '../icon/icons/entries/users.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\n/**\n * An avatar component that displays user profile images with fallback to initials.\n * Supports multiple sizes, shapes, status indicators, and interactive states.\n */\n@customElement('bp-avatar')\nexport class BpAvatar extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /**\n   * Image source URL for the avatar.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare src: string;\n\n  /**\n   * Alt text for the avatar image (accessibility).\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare alt: string;\n\n  /**\n   * Initials to display when no image is provided.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare initials: string;\n\n  /**\n   * Size of the avatar.\n   * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: AvatarSize;\n\n  /**\n   * Shape of the avatar.\n   * @type {'circle' | 'square'}\n   * @default 'circle'\n   */\n  @property({ type: String, reflect: true }) declare shape: AvatarShape;\n\n  /**\n   * Status indicator for the avatar.\n   * @type {'online' | 'offline' | 'busy' | 'away' | undefined}\n   * @default undefined\n   */\n  @property({ type: String, reflect: true }) declare status?: AvatarStatus;\n\n  /**\n   * Makes the avatar interactive with hover/focus states.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare clickable: boolean;\n\n  /**\n   * Name for tooltip display on hover.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String }) declare name: string;\n\n  /**\n   * Internal state to track if image failed to load.\n   * @private\n   */\n  @state() private imageError = false;\n\n  static styles = [avatarStyles];\n\n  constructor() {\n    super();\n    this.src = '';\n    this.alt = '';\n    this.initials = '';\n    this.size = 'md';\n    this.shape = 'circle';\n    this.clickable = false;\n    this.name = '';\n  }\n\n  private handleImageError() {\n    // Track image error state to show fallback\n    this.imageError = true;\n  }\n\n  render() {\n    const hasImage = this.src.length > 0 && !this.imageError;\n    const hasInitials = this.initials.length > 0;\n    const titleText = this.name || this.alt;\n\n    return html`\n      <div\n        class=\"avatar avatar--${this.size} avatar--${this.shape}\"\n        part=\"avatar\"\n        title=\"${titleText}\"\n      >\n        ${\n          hasImage\n            ? html`\n                <img\n                  class=\"avatar__image\"\n                  src=\"${this.src}\"\n                  alt=\"${this.alt}\"\n                  @error=\"${this.handleImageError}\"\n                  part=\"image\"\n                />\n              `\n            : hasInitials\n              ? html`<span\n                  class=\"avatar__initials\"\n                  part=\"initials\"\n                  role=\"img\"\n                  aria-label=\"${this.alt || 'User avatar'}\"\n                  >${this.initials}</span\n                >`\n              : html`<bp-icon\n                  class=\"avatar__fallback\"\n                  .svg=${usersSvg}\n                  size=\"${\n                    this.size === 'xs'\n                      ? 'xs'\n                      : this.size === 'xl'\n                        ? 'lg'\n                        : this.size\n                  }\"\n                  part=\"fallback\"\n                  aria-label=\"User avatar\"\n                ></bp-icon>`\n        }\n        ${\n          this.status\n            ? html`<span\n                class=\"avatar__status avatar__status--${this.status}\"\n                part=\"status\"\n                aria-label=\"${this.status}\"\n              ></span>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Reset image error state when src changes\n    if (changedProperties.has('src')) {\n      this.imageError = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-avatar': BpAvatar;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAaG,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCalBC,IAAN,cAAuBC,EAAW;;EAKjB,KAAA,eAAA,CAACC,CAAM;;;EAgEb,KAAA,SAAA,CAACH,CAAY;;CAE7B,cAAc;EAQZ,AAPA,MAAM,GALsB,KAAA,aAAA,IAM5B,KAAK,MAAM,IACX,KAAK,MAAM,IACX,KAAK,WAAW,IAChB,KAAK,OAAO,MACZ,KAAK,QAAQ,UACb,KAAK,YAAY,IACjB,KAAK,OAAO;CACd;CAEA,mBAA2B;EAEzB,KAAK,aAAa;CACpB;CAEA,SAAS;EACP,IAAMI,IAAW,KAAK,IAAI,SAAS,KAAK,CAAC,KAAK,YACxCC,IAAc,KAAK,SAAS,SAAS,GACrCC,IAAY,KAAK,QAAQ,KAAK;EAEpC,OAAO,CAAI;;gCAEiB,KAAK,KAAK,WAAW,KAAK,MAAM;;iBAE/CA,EAAU;;UAGjBF,IACI,CAAI;;;yBAGO,KAAK,IAAI;yBACT,KAAK,IAAI;4BACN,KAAK,iBAAiB;;;kBAIpCC,IACE,CAAI;;;;gCAIY,KAAK,OAAO,cAAc;qBACrC,KAAK,SAAS;qBAEnB,CAAI;;yBAEKN,EAAS;0BAEd,KAAK,SAAS,OACV,OACA,KAAK,SAAS,OACZ,OACA,KAAK,KACZ;;;6BAIV;UAEC,KAAK,SACD,CAAI;wDACsC,KAAK,OAAO;;8BAEtC,KAAK,OAAO;0BAE5B,GACL;;;CAGP;CAEA,QAAQ,GAAyC;EAE/C,AAAIQ,EAAkB,IAAI,KAAK,MAC7B,KAAK,aAAa;CAEtB;AACF;AA1IGV,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,OAAA,KAAA,CAAA,GAOxCJ,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,OAAA,KAAA,CAAA,GAOxCJ,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,YAAA,KAAA,CAAA,GAOxCJ,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCJ,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,SAAA,KAAA,CAAA,GAOxCJ,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,UAAA,KAAA,CAAA,GAOxCJ,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,aAAA,KAAA,CAAA,GAOzCJ,EAAA,CAAAW,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAP,EAAA,WAAA,QAAA,KAAA,CAAA,GAMzBJ,EAAA,CAAAY,EAAM,CAAA,GAAAR,EAAA,WAAA,cAAA,KAAA,CAAA,GApER,IAAAJ,EAAA,CAAAa,EAAc,WAAW,CAAA,GAAAT,CAAA"}

package/dist/shared/badge-Bc661ppN.js

@@ -0,0 +1,142 @@
+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 { classMap as o } from "lit/directives/class-map.js";
+//#region source/components/badge/badge.style.ts
+var s = n`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-medium);
+    line-height: 1;
+    border-radius: var(--bp-border-radius-full);
+    white-space: nowrap;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  /* Variants */
+  .badge--primary {
+    background-color: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .badge--success {
+    background-color: var(--bp-color-success);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .badge--error {
+    background-color: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .badge--warning {
+    background-color: var(--bp-color-warning);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .badge--info {
+    background-color: var(--bp-color-info);
+    color: var(--bp-color-text-inverse);
+  }
+
+  /* Neutral fill: secondary carries text-inverse at 4.5:1 in every theme
+     (checked by the theme generator); border-strong did not (3.2:1 / 2.2:1). */
+  .badge--neutral {
+    background-color: var(--bp-color-secondary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  /* Sizes */
+  .badge--sm {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-xs);
+    font-size: var(--bp-font-size-xs);
+    min-width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  .badge--md {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+    min-width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  .badge--lg {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-base);
+    min-width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+  }
+
+  /* Dot variant */
+  .badge--dot {
+    padding: 0;
+    border-radius: var(--bp-border-radius-full);
+  }
+
+  .badge--dot.badge--sm {
+    width: var(--bp-spacing-2);
+    height: var(--bp-spacing-2);
+    min-width: var(--bp-spacing-2);
+  }
+
+  .badge--dot.badge--md {
+    width: var(--bp-spacing-3);
+    height: var(--bp-spacing-3);
+    min-width: var(--bp-spacing-3);
+  }
+
+  .badge--dot.badge--lg {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    min-width: var(--bp-spacing-4);
+  }
+`, c = class extends t {
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.variant = "primary", this.size = "md", this.dot = !1;
+	}
+	render() {
+		return r`
+      <span
+        class=${o({
+			badge: !0,
+			[`badge--${this.variant}`]: !0,
+			[`badge--${this.size}`]: !0,
+			"badge--dot": this.dot
+		})}
+        part="badge"
+        role="status"
+        aria-live="polite"
+      >
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "dot", void 0), c = e([i("bp-badge")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=badge-Bc661ppN.js.map

package/dist/shared/badge-Bc661ppN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-Bc661ppN.js","names":["_decorate","__decorate","badgeStyles","BpBadge","LitElement","classMap","property","customElement"],"sources":["../../source/components/badge/badge.style.ts","../../source/components/badge/badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const badgeStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: 1;\n    border-radius: var(--bp-border-radius-full);\n    white-space: nowrap;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  /* Variants */\n  .badge--primary {\n    background-color: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .badge--success {\n    background-color: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .badge--error {\n    background-color: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .badge--warning {\n    background-color: var(--bp-color-warning);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .badge--info {\n    background-color: var(--bp-color-info);\n    color: var(--bp-color-text-inverse);\n  }\n\n  /* Neutral fill: secondary carries text-inverse at 4.5:1 in every theme\n     (checked by the theme generator); border-strong did not (3.2:1 / 2.2:1). */\n  .badge--neutral {\n    background-color: var(--bp-color-secondary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  /* Sizes */\n  .badge--sm {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-xs);\n    font-size: var(--bp-font-size-xs);\n    min-width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .badge--md {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n    min-width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .badge--lg {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n    min-width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n\n  /* Dot variant */\n  .badge--dot {\n    padding: 0;\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  .badge--dot.badge--sm {\n    width: var(--bp-spacing-2);\n    height: var(--bp-spacing-2);\n    min-width: var(--bp-spacing-2);\n  }\n\n  .badge--dot.badge--md {\n    width: var(--bp-spacing-3);\n    height: var(--bp-spacing-3);\n    min-width: var(--bp-spacing-3);\n  }\n\n  .badge--dot.badge--lg {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    min-width: var(--bp-spacing-4);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { badgeStyles } from './badge.style.js';\n\n/**\n * Badge component for displaying status indicators, counts, and labels.\n *\n * @element bp-badge\n *\n * @slot - Default slot for badge content (text or icons)\n *\n * @csspart badge - The badge container element\n *\n * @example\n * ```html\n * <bp-badge>New</bp-badge>\n * <bp-badge variant=\"success\">Active</bp-badge>\n * <bp-badge variant=\"error\" size=\"sm\">3</bp-badge>\n * ```\n */\n@customElement('bp-badge')\nexport class BpBadge extends LitElement {\n  /**\n   * Visual variant of the badge\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'}\n   * @default 'primary'\n   */\n  @property({ type: String, reflect: true }) declare variant:\n    'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\n  /**\n   * Size of the badge\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: 'sm' | 'md' | 'lg';\n\n  /**\n   * Whether the badge is a dot/pill shape (for count indicators)\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare dot: boolean;\n\n  static styles = [badgeStyles];\n\n  constructor() {\n    super();\n    this.variant = 'primary';\n    this.size = 'md';\n    this.dot = false;\n  }\n\n  render() {\n    return html`\n      <span\n        class=${classMap({\n          badge: true,\n          [`badge--${this.variant}`]: true,\n          [`badge--${this.size}`]: true,\n          'badge--dot': this.dot,\n        })}\n        part=\"badge\"\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <slot></slot>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-badge': BpBadge;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAaE,IAAc,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCoBjBC,IAAN,cAAsBC,EAAW;;EAuBtB,KAAA,SAAA,CAACF,CAAW;;CAE5B,cAAc;EAIZ,AAHA,MAAM,GACN,KAAK,UAAU,WACf,KAAK,OAAO,MACZ,KAAK,MAAM;CACb;CAEA,SAAS;EACP,OAAO,CAAI;;gBAECG,EAAS;GACf,OAAO;IACN,UAAU,KAAK,YAAY;IAC3B,UAAU,KAAK,SAAS;GACzB,cAAc,KAAK;EACrB,CAAC,EAAE;;;;;;;;CAQT;AACF;AA3CGL,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,WAAA,KAAA,CAAA,GAQxCH,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAM,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAH,EAAA,WAAA,OAAA,KAAA,CAAA,GAtB3C,IAAAH,EAAA,CAAAO,EAAc,UAAU,CAAA,GAAAJ,CAAA"}

package/dist/shared/boolean-converter-saxBDLhA.js

@@ -0,0 +1,13 @@
+//#region source/utilities/boolean-converter.ts
+var e = {
+	fromAttribute(e) {
+		return e === null || e.toLowerCase() !== "false";
+	},
+	toAttribute(e) {
+		return e ? "" : "false";
+	}
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=boolean-converter-saxBDLhA.js.map

package/dist/shared/boolean-converter-saxBDLhA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-converter-saxBDLhA.js","names":["booleanConverter","value"],"sources":["../../source/utilities/boolean-converter.ts"],"sourcesContent":["import type { ComplexAttributeConverter } from 'lit';\n\n/**\n * A custom Lit attribute converter for boolean properties that default to `true`.\n *\n * Lit's built-in `type: Boolean` follows native HTML boolean attribute semantics:\n * any attribute presence (even `=\"false\"`) is treated as `true`. This converter\n * instead parses the attribute value so `=\"false\"` correctly sets the property\n * to `false`.\n *\n * Behavior:\n * - Attribute absent → `null` (property uses its default)\n * - `attribute=\"\"` or `attribute` (no value) → `true`\n * - `attribute=\"false\"` → `false`\n * - `attribute=\"true\"` or any other value → `true`\n *\n * Usage:\n * ```ts\n * @property({ converter: booleanConverter, reflect: true })\n * declare showBackdrop: boolean;\n * ```\n */\nexport const booleanConverter: ComplexAttributeConverter<boolean> = {\n  fromAttribute(value: string | null): boolean {\n    if (value === null) {\n      return true;\n    }\n    return value.toLowerCase() !== 'false';\n  },\n  toAttribute(value: boolean): string | null {\n    return value ? '' : 'false';\n  },\n};\n"],"mappings":";AAsBA,IAAaA,IAAuD;CAClE,cAAc,GAA+B;EAI3C,OAHIC,MAAU,QAGPA,EAAM,YAAY,MAAM;CACjC;CACA,YAAY,GAA+B;EACzC,OAAOA,IAAQ,KAAK;CACtB;AACF"}