@krollins/blueprint 0.1.12 → 0.1.13

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":";;AAEO,MAAMA,IAAeC;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACYrB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAiEvC,cAAc;AACZ,UAAA,GALO,KAAQ,aAAa,IAM5B,KAAK,MAAM,IACX,KAAK,MAAM,IACX,KAAK,WAAW,IAChB,KAAK,OAAO,MACZ,KAAK,QAAQ,UACb,KAAK,YAAY,IACjB,KAAK,OAAO;AAAA,EACd;AAAA,EAEQ,mBAAmB;AAEzB,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,SAAS;AACP,UAAMC,IAAW,KAAK,IAAI,SAAS,KAAK,CAAC,KAAK,YACxCC,IAAc,KAAK,SAAS,SAAS,GACrCC,IAAY,KAAK,QAAQ,KAAK;AAEpC,WAAOC;AAAA;AAAA,gCAEqB,KAAK,IAAI,YAAY,KAAK,KAAK;AAAA;AAAA,iBAE9CD,CAAS;AAAA;AAAA,UAEhBF,IACEG;AAAA;AAAA;AAAA,uBAGW,KAAK,GAAG;AAAA,uBACR,KAAK,GAAG;AAAA,0BACL,KAAK,gBAAgB;AAAA;AAAA;AAAA,gBAInCF,IACEE;AAAA;AAAA;AAAA;AAAA,8BAIgB,KAAK,OAAO,aAAa;AAAA,mBACpC,KAAK,QAAQ;AAAA,mBAElBA;AAAA;AAAA;AAAA,wBAGU,KAAK,SAAS,OAClB,OACA,KAAK,SAAS,OACZ,OACA,KAAK,IAAI;AAAA;AAAA;AAAA,0BAGL;AAAA,UAChB,KAAK,SACHA;AAAA,sDAC0C,KAAK,MAAM;AAAA;AAAA,4BAErC,KAAK,MAAM;AAAA,wBAE3B,EAAE;AAAA;AAAA;AAAA,EAGZ;AAAA,EAEA,QAAQC,GAAyC;AAE/C,IAAIA,EAAkB,IAAI,KAAK,MAC7B,KAAK,aAAa;AAAA,EAEtB;AACF;AA1IaN,EA+DJ,SAAS,CAACF,CAAY;AAzDsBS,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAMwC,WAAA,OAAA,CAAA;AAOAO,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAb9BR,EAawC,WAAA,OAAA,CAAA;AAOAO,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BR,EAoBwC,WAAA,YAAA,CAAA;AAOAO,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3B9BR,EA2BwC,WAAA,QAAA,CAAA;AAOAO,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlC9BR,EAkCwC,WAAA,SAAA,CAAA;AAOAO,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzC9BR,EAyCwC,WAAA,UAAA,CAAA;AAOCO,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhD/BR,EAgDyC,WAAA,aAAA,CAAA;AAOhBO,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvDfR,EAuDyB,WAAA,QAAA,CAAA;AAMnBO,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7DIT,EA6DM,WAAA,cAAA,CAAA;AA7DNA,IAANO,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbV,CAAA;"}

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';\r\n\r\nexport const badgeStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: inline-block;\r\n  }\r\n\r\n  .badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: var(--bp-font-family);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    line-height: 1;\r\n    border-radius: var(--bp-border-radius-full);\r\n    white-space: nowrap;\r\n    transition:\r\n      background-color var(--bp-transition-fast),\r\n      color var(--bp-transition-fast);\r\n  }\r\n\r\n  /* Variants */\r\n  .badge--primary {\r\n    background-color: var(--bp-color-primary);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .badge--success {\r\n    background-color: var(--bp-color-success);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .badge--error {\r\n    background-color: var(--bp-color-error);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .badge--warning {\r\n    background-color: var(--bp-color-warning);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .badge--info {\r\n    background-color: var(--bp-color-info);\r\n    color: var(--bp-color-text-inverse);\r\n  }\r\n\r\n  .badge--neutral {\r\n    background-color: var(--bp-color-border-strong);\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  /* Sizes */\r\n  .badge--sm {\r\n    padding: var(--bp-spacing-xs) var(--bp-spacing-xs);\r\n    font-size: var(--bp-font-size-xs);\r\n    min-width: var(--bp-spacing-5);\r\n    height: var(--bp-spacing-5);\r\n  }\r\n\r\n  .badge--md {\r\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\r\n    font-size: var(--bp-font-size-sm);\r\n    min-width: var(--bp-spacing-6);\r\n    height: var(--bp-spacing-6);\r\n  }\r\n\r\n  .badge--lg {\r\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\r\n    font-size: var(--bp-font-size-base);\r\n    min-width: var(--bp-spacing-8);\r\n    height: var(--bp-spacing-8);\r\n  }\r\n\r\n  /* Dot variant */\r\n  .badge--dot {\r\n    padding: 0;\r\n    border-radius: var(--bp-border-radius-full);\r\n  }\r\n\r\n  .badge--dot.badge--sm {\r\n    width: var(--bp-spacing-2);\r\n    height: var(--bp-spacing-2);\r\n    min-width: var(--bp-spacing-2);\r\n  }\r\n\r\n  .badge--dot.badge--md {\r\n    width: var(--bp-spacing-3);\r\n    height: var(--bp-spacing-3);\r\n    min-width: var(--bp-spacing-3);\r\n  }\r\n\r\n  .badge--dot.badge--lg {\r\n    width: var(--bp-spacing-4);\r\n    height: var(--bp-spacing-4);\r\n    min-width: var(--bp-spacing-4);\r\n  }\r\n`;\r\n","import { LitElement, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { badgeStyles } from './badge.style.js';\r\n\r\n/**\r\n * Badge component for displaying status indicators, counts, and labels.\r\n *\r\n * @element bp-badge\r\n *\r\n * @slot - Default slot for badge content (text or icons)\r\n *\r\n * @csspart badge - The badge container element\r\n *\r\n * @example\r\n * ```html\r\n * <bp-badge>New</bp-badge>\r\n * <bp-badge variant=\"success\">Active</bp-badge>\r\n * <bp-badge variant=\"error\" size=\"sm\">3</bp-badge>\r\n * ```\r\n */\r\n@customElement('bp-badge')\r\nexport class BpBadge extends LitElement {\r\n  /**\r\n   * Visual variant of the badge\r\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'}\r\n   * @default 'primary'\r\n   */\r\n  @property({ type: String, reflect: true }) declare variant:\r\n    | 'primary'\r\n    | 'success'\r\n    | 'error'\r\n    | 'warning'\r\n    | 'info'\r\n    | 'neutral';\r\n\r\n  /**\r\n   * Size of the badge\r\n   * @type {'sm' | 'md' | 'lg'}\r\n   * @default 'md'\r\n   */\r\n  @property({ type: String, reflect: true }) declare size:\r\n    | 'sm'\r\n    | 'md'\r\n    | 'lg';\r\n\r\n  /**\r\n   * Whether the badge is a dot/pill shape (for count indicators)\r\n   * @type {boolean}\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) declare dot: boolean;\r\n\r\n  static styles = [badgeStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.variant = 'primary';\r\n    this.size = 'md';\r\n    this.dot = false;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <span\r\n        class=${classMap({\r\n          badge: true,\r\n          [`badge--${this.variant}`]: true,\r\n          [`badge--${this.size}`]: true,\r\n          'badge--dot': this.dot,\r\n        })}\r\n        part=\"badge\"\r\n        role=\"status\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <slot></slot>\r\n      </span>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-badge': BpBadge;\r\n  }\r\n}\r\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,EAiCtC,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;AAzDaH,EA+BJ,SAAS,CAACF,CAAW;AAzBuBM,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;AAUCI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7B/BL,EA6ByC,WAAA,OAAA,CAAA;AA7BzCA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,CAAA;"}