@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","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--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--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--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","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { alertStyles } from './alert.style.js';\nimport { type IconName } from '../icon/icons/registry.generated.js';\nimport '../icon/icon.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\ninterface IconMap {\n  info: IconName;\n  success: IconName;\n  warning: IconName;\n  error: IconName;\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   * 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 getIconName(): IconName {\n    const iconMap: IconMap = {\n      info: 'info-circle',\n      success: 'check-circle',\n      warning: 'warning-circle',\n      error: 'cross-circle',\n    };\n    return iconMap[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          ${this.showIcon\n            ? html`\n                <div class=\"alert-icon\" part=\"icon\">\n                  <slot name=\"icon\">\n                    <bp-icon name=${this.getIconName()}></bp-icon>\n                  </slot>\n                </div>\n              `\n            : null}\n          <div class=\"alert-message\" part=\"message\">\n            <slot name=\"title\"></slot>\n            <slot></slot>\n          </div>\n        </div>\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 name=\"cross\"></bp-icon>\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-alert': BpAlert;\n  }\n}\n"],"names":["alertStyles","css","BpAlert","LitElement","event","html","__decorateClass","property","customElement"],"mappings":";;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACsBpB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAkBtC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,QACf,KAAK,cAAc,IACnB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,UAAMC,IAAQ,IAAI,YAAY,YAAY;AAAA,MACxC,QAAQ;AAAA,QACN,SAAS,KAAK;AAAA,QACd,WAAW,KAAK,IAAA;AAAA,MAAI;AAAA,MAEtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA,CACb;AAED,SAAK,cAAcA,CAAK,GAGnBA,EAAM,oBACT,KAAK,OAAA;AAAA,EAET;AAAA,EAEQ,cAAwB;AAO9B,WANyB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,EAEM,KAAK,OAAO;AAAA,EAC7B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,8BAEmB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,KAAK,WACHA;AAAA;AAAA;AAAA,oCAGsB,KAAK,aAAa;AAAA;AAAA;AAAA,kBAIxC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMR,KAAK,cACHA;AAAA;AAAA;AAAA;AAAA,yBAIa,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,gBAM7B,IAAI;AAAA;AAAA;AAAA,EAGd;AACF;AA5FaH,EAgBJ,SAAS,CAACF,CAAW;AAZuBM,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BL,EAIwC,WAAA,WAAA,CAAA;AAKCI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BL,EASyC,WAAA,eAAA,CAAA;AAKAI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BL,EAcyC,WAAA,YAAA,CAAA;AAdzCA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,CAAA;"}

package/dist/components/avatar.js

@@ -0,0 +1,237 @@
+import { css as v, LitElement as h, html as l } from "lit";
+import { property as r, state as b, customElement as f } from "lit/decorators.js";
+const g = v`
+  /* 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);
+  }
+`;
+var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, t = (i, e, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? d(e, o) : e, p = i.length - 1, c; p >= 0; p--)
+    (c = i[p]) && (s = (n ? c(e, o, s) : c(s)) || s);
+  return n && s && u(e, o, s), s;
+};
+let a = class extends h {
+  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() {
+    const i = this.src.length > 0 && !this.imageError, e = this.initials.length > 0, o = this.name || this.alt;
+    return l`
+      <div
+        class="avatar avatar--${this.size} avatar--${this.shape}"
+        part="avatar"
+        title="${o}"
+      >
+        ${i ? l`
+              <img
+                class="avatar__image"
+                src="${this.src}"
+                alt="${this.alt}"
+                @error="${this.handleImageError}"
+                part="image"
+              />
+            ` : e ? l`<span
+                class="avatar__initials"
+                part="initials"
+                role="img"
+                aria-label="${this.alt || "User avatar"}"
+                >${this.initials}</span
+              >` : l`<bp-icon
+                class="avatar__fallback"
+                name="users"
+                size="${this.size === "xs" ? "xs" : this.size === "xl" ? "lg" : this.size}"
+                part="fallback"
+                aria-label="User avatar"
+              ></bp-icon>`}
+        ${this.status ? l`<span
+              class="avatar__status avatar__status--${this.status}"
+              part="status"
+              aria-label="${this.status}"
+            ></span>` : ""}
+      </div>
+    `;
+  }
+  updated(i) {
+    i.has("src") && (this.imageError = !1);
+  }
+};
+a.styles = [g];
+t([
+  r({ type: String, reflect: !0 })
+], a.prototype, "src", 2);
+t([
+  r({ type: String, reflect: !0 })
+], a.prototype, "alt", 2);
+t([
+  r({ type: String, reflect: !0 })
+], a.prototype, "initials", 2);
+t([
+  r({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+t([
+  r({ type: String, reflect: !0 })
+], a.prototype, "shape", 2);
+t([
+  r({ type: String, reflect: !0 })
+], a.prototype, "status", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "clickable", 2);
+t([
+  r({ type: String })
+], a.prototype, "name", 2);
+t([
+  b()
+], a.prototype, "imageError", 2);
+a = t([
+  f("bp-avatar")
+], a);
+export {
+  a as BpAvatar
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","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 '../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   * 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        ${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                name=\"users\"\n                size=\"${this.size === 'xs'\n                  ? 'xs'\n                  : this.size === 'xl'\n                    ? 'lg'\n                    : this.size}\"\n                part=\"fallback\"\n                aria-label=\"User avatar\"\n              ></bp-icon>`}\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      </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"],"names":["avatarStyles","css","BpAvatar","LitElement","hasImage","hasInitials","titleText","html","changedProperties","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../source/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;;;;;;;;;;;;GAeG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC;;;;OAIG;IACgD,OAAO,EACtD,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,CAAC;IAEd;;;;OAIG;IACgD,IAAI,EACnD,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC;IAET;;;;OAIG;IACiD,GAAG,EAAE,OAAO,CAAC;IAEjE,MAAM,CAAC,MAAM,4BAAiB;;IAS9B,MAAM;CAiBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../source/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;;;;;;;;;;;;GAeG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC;;;;OAIG;IACgD,OAAO,EACtD,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,CAAC;IAEd;;;;OAIG;IACgD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE5E;;;;OAIG;IACiD,GAAG,EAAE,OAAO,CAAC;IAEjE,MAAM,CAAC,MAAM,4BAAiB;;IAS9B,MAAM;CAiBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/badge.js

@@ -0,0 +1,144 @@
+import { css as c, LitElement as g, html as d } from "lit";
+import { property as n, customElement as l } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+const h = c`
+  /* 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);
+  }
+
+  .badge--neutral {
+    background-color: var(--bp-color-border-strong);
+    color: var(--bp-color-text);
+  }
+
+  /* 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);
+  }
+`;
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (b, e, i, t) => {
+  for (var r = t > 1 ? void 0 : t ? f(e, i) : e, s = b.length - 1, p; s >= 0; s--)
+    (p = b[s]) && (r = (t ? p(e, i, r) : p(r)) || r);
+  return t && r && m(e, i, r), r;
+};
+let a = class extends g {
+  constructor() {
+    super(), this.variant = "primary", this.size = "md", this.dot = !1;
+  }
+  render() {
+    return d`
+      <span
+        class=${v({
+      badge: !0,
+      [`badge--${this.variant}`]: !0,
+      [`badge--${this.size}`]: !0,
+      "badge--dot": this.dot
+    })}
+        part="badge"
+        role="status"
+        aria-live="polite"
+      >
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+a.styles = [h];
+o([
+  n({ type: String, reflect: !0 })
+], a.prototype, "variant", 2);
+o([
+  n({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "dot", 2);
+a = o([
+  l("bp-badge")
+], a);
+export {
+  a as BpBadge
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","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  .badge--neutral {\n    background-color: var(--bp-color-border-strong);\n    color: var(--bp-color-text);\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'\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | '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"],"names":["badgeStyles","css","BpBadge","LitElement","html","classMap","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACoBpB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EA8BtC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,WACf,KAAK,OAAO,MACZ,KAAK,MAAM;AAAA,EACb;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,gBAEKC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,CAAC,UAAU,KAAK,OAAO,EAAE,GAAG;AAAA,MAC5B,CAAC,UAAU,KAAK,IAAI,EAAE,GAAG;AAAA,MACzB,cAAc,KAAK;AAAA,IAAA,CACpB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR;AACF;AAtDaH,EA4BJ,SAAS,CAACF,CAAW;AAtBuBM,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BL,EAMwC,WAAA,WAAA,CAAA;AAaAI,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnB9BL,EAmBwC,WAAA,QAAA,CAAA;AAOCI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1B/BL,EA0ByC,WAAA,OAAA,CAAA;AA1BzCA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,CAAA;"}