@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/skeleton.js

@@ -0,0 +1,240 @@
+import { css as c, LitElement as u, nothing as h, html as d } from "lit";
+import { property as a, customElement as k } from "lit/decorators.js";
+import { b as m } from "../shared/boolean-converter-XDGfS9LC.js";
+const g = c`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .skeleton {
+    background-color: var(--bp-color-surface-subdued);
+    overflow: hidden;
+    position: relative;
+    width: var(--skeleton-width, auto);
+    height: var(--skeleton-height, auto);
+  }
+
+  /* Animation */
+  .skeleton--animated::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.6) 50%,
+      transparent 100%
+    );
+    animation: skeleton-shimmer 1.5s infinite linear;
+    transform: translateX(-100%);
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  /* Respect user motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton--animated::after {
+      animation: none;
+      opacity: 0.7;
+    }
+  }
+
+  /* Variants */
+  .skeleton--text {
+    border-radius: var(--bp-border-radius-sm);
+    width: 100%;
+  }
+
+  .skeleton--circular {
+    border-radius: var(--bp-border-radius-full);
+  }
+
+  .skeleton--rectangular {
+    border-radius: 2px;
+  }
+
+  .skeleton--rounded {
+    border-radius: var(--bp-border-radius-lg);
+  }
+
+  /* Sizes for text variant */
+  .skeleton--text.skeleton--sm {
+    height: var(--bp-spacing-3);
+  }
+
+  .skeleton--text.skeleton--md {
+    height: var(--bp-spacing-4);
+  }
+
+  .skeleton--text.skeleton--lg {
+    height: var(--bp-spacing-6);
+  }
+
+  /* Sizes for circular variant */
+  .skeleton--circular.skeleton--sm {
+    width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+  }
+
+  .skeleton--circular.skeleton--md {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+  }
+
+  .skeleton--circular.skeleton--lg {
+    width: var(--bp-spacing-12);
+    height: var(--bp-spacing-12);
+  }
+
+  /* Sizes for rectangular/rounded variants */
+  .skeleton--rectangular.skeleton--sm,
+  .skeleton--rounded.skeleton--sm {
+    height: var(--bp-spacing-10);
+  }
+
+  .skeleton--rectangular.skeleton--md,
+  .skeleton--rounded.skeleton--md {
+    height: var(--bp-spacing-16);
+  }
+
+  .skeleton--rectangular.skeleton--lg,
+  .skeleton--rounded.skeleton--lg {
+    height: var(--bp-spacing-24);
+  }
+
+  /* Text lines container */
+  .skeleton__lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-3);
+  }
+
+  /* Last line in multi-line text is shorter */
+  .skeleton--last-line {
+    width: 75%;
+  }
+
+  /* Static state (no animation) */
+  :host([animated='false']) .skeleton::after,
+  .skeleton:not(.skeleton--animated)::after {
+    display: none;
+  }
+
+  :host([animated='false']) .skeleton,
+  .skeleton:not(.skeleton--animated) {
+    opacity: 0.6;
+  }
+`;
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, t, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? b(t, r) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (s = (o ? p(t, r, s) : p(s)) || s);
+  return o && s && v(t, r, s), s;
+};
+let n = class extends u {
+  constructor() {
+    super(), this.variant = "text", this.width = "", this.height = "", this.animated = !0, this.lines = 1, this.size = "md";
+  }
+  /**
+   * Generates CSS custom properties for width and height.
+   * Uses custom properties instead of inline styles for CSP compliance.
+   * @returns CSS string with custom property declarations
+   */
+  getCustomProperties() {
+    const e = [];
+    return this.width && e.push(`--skeleton-width: ${this.width}`), this.height && e.push(`--skeleton-height: ${this.height}`), e.join("; ");
+  }
+  /**
+   * Renders a single skeleton element with appropriate classes and styles.
+   * @returns Template result for a single skeleton
+   */
+  renderSingleSkeleton() {
+    const e = [
+      "skeleton",
+      `skeleton--${this.variant}`,
+      `skeleton--${this.size}`,
+      this.animated ? "skeleton--animated" : ""
+    ].filter(Boolean).join(" "), t = this.getCustomProperties();
+    return d`
+      <div class=${e} part="base" style=${t || h}>
+        <slot></slot>
+      </div>
+    `;
+  }
+  /**
+   * Renders text skeleton lines.
+   * If variant is text and lines > 1, renders multiple lines with a container.
+   * Otherwise delegates to renderSingleSkeleton.
+   * @returns Template result for text lines or single skeleton
+   */
+  renderTextLines() {
+    if (this.variant !== "text" || this.lines <= 1)
+      return this.renderSingleSkeleton();
+    const e = this.getCustomProperties(), t = [];
+    for (let r = 0; r < this.lines; r++) {
+      const o = r === this.lines - 1, s = [
+        "skeleton",
+        "skeleton--text",
+        `skeleton--${this.size}`,
+        this.animated ? "skeleton--animated" : "",
+        o ? "skeleton--last-line" : ""
+      ].filter(Boolean).join(" ");
+      t.push(
+        d`<div
+          class=${s}
+          part="base"
+          style=${e || h}
+        ></div>`
+      );
+    }
+    return d`<div class="skeleton__lines">${t}</div>`;
+  }
+  render() {
+    return this.renderTextLines();
+  }
+};
+n.styles = [g];
+i([
+  a({
+    type: String,
+    reflect: !0,
+    converter: {
+      fromAttribute: (e) => e && ["text", "circular", "rectangular", "rounded"].includes(e) ? e : "text"
+    }
+  })
+], n.prototype, "variant", 2);
+i([
+  a({ type: String })
+], n.prototype, "width", 2);
+i([
+  a({ type: String })
+], n.prototype, "height", 2);
+i([
+  a({ converter: m, reflect: !0 })
+], n.prototype, "animated", 2);
+i([
+  a({
+    type: Number,
+    converter: (e) => {
+      const t = Number(e);
+      return t > 0 ? t : 1;
+    }
+  })
+], n.prototype, "lines", 2);
+i([
+  a({ type: String })
+], n.prototype, "size", 2);
+n = i([
+  k("bp-skeleton")
+], n);
+export {
+  n as BpSkeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../source/components/skeleton/skeleton.style.ts","../../source/components/skeleton/skeleton.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const skeletonStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: block;\r\n  }\r\n\r\n  .skeleton {\r\n    background-color: var(--bp-color-surface-subdued);\r\n    overflow: hidden;\r\n    position: relative;\r\n    width: var(--skeleton-width, auto);\r\n    height: var(--skeleton-height, auto);\r\n  }\r\n\r\n  /* Animation */\r\n  .skeleton--animated::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(\r\n      90deg,\r\n      transparent 0%,\r\n      rgba(255, 255, 255, 0.6) 50%,\r\n      transparent 100%\r\n    );\r\n    animation: skeleton-shimmer 1.5s infinite linear;\r\n    transform: translateX(-100%);\r\n  }\r\n\r\n  @keyframes skeleton-shimmer {\r\n    0% {\r\n      transform: translateX(-100%);\r\n    }\r\n    100% {\r\n      transform: translateX(100%);\r\n    }\r\n  }\r\n\r\n  /* Respect user motion preferences */\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .skeleton--animated::after {\r\n      animation: none;\r\n      opacity: 0.7;\r\n    }\r\n  }\r\n\r\n  /* Variants */\r\n  .skeleton--text {\r\n    border-radius: var(--bp-border-radius-sm);\r\n    width: 100%;\r\n  }\r\n\r\n  .skeleton--circular {\r\n    border-radius: var(--bp-border-radius-full);\r\n  }\r\n\r\n  .skeleton--rectangular {\r\n    border-radius: 2px;\r\n  }\r\n\r\n  .skeleton--rounded {\r\n    border-radius: var(--bp-border-radius-lg);\r\n  }\r\n\r\n  /* Sizes for text variant */\r\n  .skeleton--text.skeleton--sm {\r\n    height: var(--bp-spacing-3);\r\n  }\r\n\r\n  .skeleton--text.skeleton--md {\r\n    height: var(--bp-spacing-4);\r\n  }\r\n\r\n  .skeleton--text.skeleton--lg {\r\n    height: var(--bp-spacing-6);\r\n  }\r\n\r\n  /* Sizes for circular variant */\r\n  .skeleton--circular.skeleton--sm {\r\n    width: var(--bp-spacing-8);\r\n    height: var(--bp-spacing-8);\r\n  }\r\n\r\n  .skeleton--circular.skeleton--md {\r\n    width: var(--bp-spacing-10);\r\n    height: var(--bp-spacing-10);\r\n  }\r\n\r\n  .skeleton--circular.skeleton--lg {\r\n    width: var(--bp-spacing-12);\r\n    height: var(--bp-spacing-12);\r\n  }\r\n\r\n  /* Sizes for rectangular/rounded variants */\r\n  .skeleton--rectangular.skeleton--sm,\r\n  .skeleton--rounded.skeleton--sm {\r\n    height: var(--bp-spacing-10);\r\n  }\r\n\r\n  .skeleton--rectangular.skeleton--md,\r\n  .skeleton--rounded.skeleton--md {\r\n    height: var(--bp-spacing-16);\r\n  }\r\n\r\n  .skeleton--rectangular.skeleton--lg,\r\n  .skeleton--rounded.skeleton--lg {\r\n    height: var(--bp-spacing-24);\r\n  }\r\n\r\n  /* Text lines container */\r\n  .skeleton__lines {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--bp-spacing-3);\r\n  }\r\n\r\n  /* Last line in multi-line text is shorter */\r\n  .skeleton--last-line {\r\n    width: 75%;\r\n  }\r\n\r\n  /* Static state (no animation) */\r\n  :host([animated='false']) .skeleton::after,\r\n  .skeleton:not(.skeleton--animated)::after {\r\n    display: none;\r\n  }\r\n\r\n  :host([animated='false']) .skeleton,\r\n  .skeleton:not(.skeleton--animated) {\r\n    opacity: 0.6;\r\n  }\r\n`;\r\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { skeletonStyles } from './skeleton.style.js';\r\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\r\n\r\n/**\r\n * A skeleton loading placeholder that indicates content is loading.\r\n * Use skeletons to reduce perceived loading time and provide visual feedback.\r\n *\r\n * @slot - Optional slot for custom skeleton content\r\n *\r\n * @csspart base - The skeleton container element\r\n */\r\n@customElement('bp-skeleton')\r\nexport class BpSkeleton extends LitElement {\r\n  /** The visual variant of the skeleton */\r\n  @property({\r\n    type: String,\r\n    reflect: true,\r\n    converter: {\r\n      fromAttribute: (value: string | null) => {\r\n        const valid = ['text', 'circular', 'rectangular', 'rounded'];\r\n        return value && valid.includes(value) ? value : 'text';\r\n      },\r\n    },\r\n  })\r\n  declare variant: 'text' | 'circular' | 'rectangular' | 'rounded';\r\n\r\n  /** Width of the skeleton. Can be any valid CSS value. */\r\n  @property({ type: String }) declare width: string;\r\n\r\n  /** Height of the skeleton. Can be any valid CSS value. */\r\n  @property({ type: String }) declare height: string;\r\n\r\n  /** Whether to animate the skeleton with a shimmer effect */\r\n  @property({ converter: booleanConverter, reflect: true })\r\n  declare animated: boolean;\r\n\r\n  /** Number of lines to display (only for text variant) */\r\n  @property({\r\n    type: Number,\r\n    converter: (value: string | null) => {\r\n      const num = Number(value);\r\n      return num > 0 ? num : 1;\r\n    },\r\n  })\r\n  declare lines: number;\r\n\r\n  /** The size preset (affects default dimensions) */\r\n  @property({ type: String }) declare size: 'sm' | 'md' | 'lg';\r\n\r\n  static styles = [skeletonStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.variant = 'text';\r\n    this.width = '';\r\n    this.height = '';\r\n    this.animated = true;\r\n    this.lines = 1;\r\n    this.size = 'md';\r\n  }\r\n\r\n  /**\r\n   * Generates CSS custom properties for width and height.\r\n   * Uses custom properties instead of inline styles for CSP compliance.\r\n   * @returns CSS string with custom property declarations\r\n   */\r\n  private getCustomProperties(): string {\r\n    const props: string[] = [];\r\n\r\n    if (this.width) {\r\n      props.push(`--skeleton-width: ${this.width}`);\r\n    }\r\n\r\n    if (this.height) {\r\n      props.push(`--skeleton-height: ${this.height}`);\r\n    }\r\n\r\n    return props.join('; ');\r\n  }\r\n\r\n  /**\r\n   * Renders a single skeleton element with appropriate classes and styles.\r\n   * @returns Template result for a single skeleton\r\n   */\r\n  private renderSingleSkeleton() {\r\n    const classes = [\r\n      'skeleton',\r\n      `skeleton--${this.variant}`,\r\n      `skeleton--${this.size}`,\r\n      this.animated ? 'skeleton--animated' : '',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    const customProps = this.getCustomProperties();\r\n\r\n    return html`\r\n      <div class=${classes} part=\"base\" style=${customProps || nothing}>\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Renders text skeleton lines.\r\n   * If variant is text and lines > 1, renders multiple lines with a container.\r\n   * Otherwise delegates to renderSingleSkeleton.\r\n   * @returns Template result for text lines or single skeleton\r\n   */\r\n  private renderTextLines() {\r\n    if (this.variant !== 'text' || this.lines <= 1) {\r\n      return this.renderSingleSkeleton();\r\n    }\r\n\r\n    const customProps = this.getCustomProperties();\r\n    const lineElements = [];\r\n    for (let i = 0; i < this.lines; i++) {\r\n      const isLastLine = i === this.lines - 1;\r\n      const classes = [\r\n        'skeleton',\r\n        'skeleton--text',\r\n        `skeleton--${this.size}`,\r\n        this.animated ? 'skeleton--animated' : '',\r\n        isLastLine ? 'skeleton--last-line' : '',\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ');\r\n\r\n      lineElements.push(\r\n        html`<div\r\n          class=${classes}\r\n          part=\"base\"\r\n          style=${customProps || nothing}\r\n        ></div>`\r\n      );\r\n    }\r\n\r\n    return html`<div class=\"skeleton__lines\">${lineElements}</div>`;\r\n  }\r\n\r\n  render() {\r\n    return this.renderTextLines();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-skeleton': BpSkeleton;\r\n  }\r\n}\r\n"],"names":["skeletonStyles","css","BpSkeleton","LitElement","props","classes","customProps","html","nothing","lineElements","i","isLastLine","__decorateClass","property","value","booleanConverter","num","customElement"],"mappings":";;;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACYvB,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAuCzC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,QACf,KAAK,QAAQ,IACb,KAAK,SAAS,IACd,KAAK,WAAW,IAChB,KAAK,QAAQ,GACb,KAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,sBAA8B;AACpC,UAAMC,IAAkB,CAAA;AAExB,WAAI,KAAK,SACPA,EAAM,KAAK,qBAAqB,KAAK,KAAK,EAAE,GAG1C,KAAK,UACPA,EAAM,KAAK,sBAAsB,KAAK,MAAM,EAAE,GAGzCA,EAAM,KAAK,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,uBAAuB;AAC7B,UAAMC,IAAU;AAAA,MACd;AAAA,MACA,aAAa,KAAK,OAAO;AAAA,MACzB,aAAa,KAAK,IAAI;AAAA,MACtB,KAAK,WAAW,uBAAuB;AAAA,IAAA,EAEtC,OAAO,OAAO,EACd,KAAK,GAAG,GAELC,IAAc,KAAK,oBAAA;AAEzB,WAAOC;AAAA,mBACQF,CAAO,sBAAsBC,KAAeE,CAAO;AAAA;AAAA;AAAA;AAAA,EAIpE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,kBAAkB;AACxB,QAAI,KAAK,YAAY,UAAU,KAAK,SAAS;AAC3C,aAAO,KAAK,qBAAA;AAGd,UAAMF,IAAc,KAAK,oBAAA,GACnBG,IAAe,CAAA;AACrB,aAASC,IAAI,GAAGA,IAAI,KAAK,OAAOA,KAAK;AACnC,YAAMC,IAAaD,MAAM,KAAK,QAAQ,GAChCL,IAAU;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAa,KAAK,IAAI;AAAA,QACtB,KAAK,WAAW,uBAAuB;AAAA,QACvCM,IAAa,wBAAwB;AAAA,MAAA,EAEpC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,MAAAF,EAAa;AAAA,QACXF;AAAA,kBACUF,CAAO;AAAA;AAAA,kBAEPC,KAAeE,CAAO;AAAA;AAAA,MAAA;AAAA,IAGpC;AAEA,WAAOD,iCAAoCE,CAAY;AAAA,EACzD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,gBAAA;AAAA,EACd;AACF;AAnIaP,EAqCJ,SAAS,CAACF,CAAc;AAzBvBY,EAAA;AAAA,EAVPC,EAAS;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,MACT,eAAe,CAACC,MAEPA,KADO,CAAC,QAAQ,YAAY,eAAe,SAAS,EACrC,SAASA,CAAK,IAAIA,IAAQ;AAAA,IAClD;AAAA,EACF,CACD;AAAA,GAXUZ,EAYH,WAAA,WAAA,CAAA;AAG4BU,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAffX,EAeyB,WAAA,SAAA,CAAA;AAGAU,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBfX,EAkByB,WAAA,UAAA,CAAA;AAI5BU,EAAA;AAAA,EADPC,EAAS,EAAE,WAAWE,GAAkB,SAAS,IAAM;AAAA,GArB7Cb,EAsBH,WAAA,YAAA,CAAA;AAUAU,EAAA;AAAA,EAPPC,EAAS;AAAA,IACR,MAAM;AAAA,IACN,WAAW,CAACC,MAAyB;AACnC,YAAME,IAAM,OAAOF,CAAK;AACxB,aAAOE,IAAM,IAAIA,IAAM;AAAA,IACzB;AAAA,EAAA,CACD;AAAA,GA/BUd,EAgCH,WAAA,SAAA,CAAA;AAG4BU,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnCfX,EAmCyB,WAAA,QAAA,CAAA;AAnCzBA,IAANU,EAAA;AAAA,EADNK,EAAc,aAAa;AAAA,GACff,CAAA;"}

package/dist/components/slider.js

@@ -0,0 +1,9 @@
+import "lit";
+import "lit/decorators.js";
+import "lit/directives/class-map.js";
+import "lit/directives/repeat.js";
+import { B as e } from "../shared/slider-BNt5TITl.js";
+export {
+  e as BpSlider
+};
+//# sourceMappingURL=slider.js.map

package/dist/components/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/spinner.js

@@ -0,0 +1,133 @@
+import { css as l, LitElement as b, html as d } from "lit";
+import { property as a, customElement as v } from "lit/decorators.js";
+const m = l`
+  /* Base styles */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner__circle {
+    border-radius: var(--bp-border-radius-full);
+    border-style: solid;
+    border-color: transparent;
+    animation: bp-spinner-rotate var(--bp-ease-linear) infinite;
+    will-change: transform;
+  }
+
+  /* Variants */
+  .spinner--primary .spinner__circle {
+    border-top-color: var(--bp-color-primary);
+    border-right-color: var(--bp-color-primary);
+  }
+
+  .spinner--success .spinner__circle {
+    border-top-color: var(--bp-color-success);
+    border-right-color: var(--bp-color-success);
+  }
+
+  .spinner--error .spinner__circle {
+    border-top-color: var(--bp-color-error);
+    border-right-color: var(--bp-color-error);
+  }
+
+  .spinner--warning .spinner__circle {
+    border-top-color: var(--bp-color-warning);
+    border-right-color: var(--bp-color-warning);
+  }
+
+  .spinner--inverse .spinner__circle {
+    border-top-color: var(--bp-color-text-inverse);
+    border-right-color: var(--bp-color-text-inverse);
+  }
+
+  .spinner--neutral .spinner__circle {
+    border-top-color: var(--bp-color-text-muted);
+    border-right-color: var(--bp-color-text-muted);
+  }
+
+  /* Sizes */
+  .spinner--sm .spinner__circle {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    border-width: var(--bp-spacing-xs);
+    animation-duration: var(--bp-duration-normal);
+  }
+
+  .spinner--md .spinner__circle {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+    border-width: var(--bp-spacing-xs);
+    animation-duration: var(--bp-duration-slow);
+  }
+
+  .spinner--lg .spinner__circle {
+    width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+    border-width: var(--bp-spacing-xs);
+    animation-duration: 600ms;
+  }
+
+  /* Animation */
+  @keyframes bp-spinner-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Respect user's motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .spinner__circle {
+      animation-duration: 2s;
+    }
+  }
+`;
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (c, i, t, n) => {
+  for (var r = n > 1 ? void 0 : n ? u(i, t) : i, s = c.length - 1, p; s >= 0; s--)
+    (p = c[s]) && (r = (n ? p(i, t, r) : p(r)) || r);
+  return n && r && g(i, t, r), r;
+};
+let e = class extends b {
+  constructor() {
+    super(), this.size = "md", this.variant = "primary", this.label = "Loading...";
+  }
+  render() {
+    return d`
+      <div
+        class="spinner spinner--${this.size} spinner--${this.variant}"
+        role="status"
+        aria-label="${this.label}"
+        part="spinner"
+      >
+        <div class="spinner__circle" part="circle"></div>
+      </div>
+    `;
+  }
+};
+e.styles = [m];
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+o([
+  a({ type: String, reflect: !0 })
+], e.prototype, "label", 2);
+e = o([
+  v("bp-spinner")
+], e);
+export {
+  e as BpSpinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../source/components/spinner/spinner.style.ts","../../source/components/spinner/spinner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const spinnerStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner__circle {\n    border-radius: var(--bp-border-radius-full);\n    border-style: solid;\n    border-color: transparent;\n    animation: bp-spinner-rotate var(--bp-ease-linear) infinite;\n    will-change: transform;\n  }\n\n  /* Variants */\n  .spinner--primary .spinner__circle {\n    border-top-color: var(--bp-color-primary);\n    border-right-color: var(--bp-color-primary);\n  }\n\n  .spinner--success .spinner__circle {\n    border-top-color: var(--bp-color-success);\n    border-right-color: var(--bp-color-success);\n  }\n\n  .spinner--error .spinner__circle {\n    border-top-color: var(--bp-color-error);\n    border-right-color: var(--bp-color-error);\n  }\n\n  .spinner--warning .spinner__circle {\n    border-top-color: var(--bp-color-warning);\n    border-right-color: var(--bp-color-warning);\n  }\n\n  .spinner--inverse .spinner__circle {\n    border-top-color: var(--bp-color-text-inverse);\n    border-right-color: var(--bp-color-text-inverse);\n  }\n\n  .spinner--neutral .spinner__circle {\n    border-top-color: var(--bp-color-text-muted);\n    border-right-color: var(--bp-color-text-muted);\n  }\n\n  /* Sizes */\n  .spinner--sm .spinner__circle {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: var(--bp-duration-normal);\n  }\n\n  .spinner--md .spinner__circle {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: var(--bp-duration-slow);\n  }\n\n  .spinner--lg .spinner__circle {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: 600ms;\n  }\n\n  /* Animation */\n  @keyframes bp-spinner-rotate {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* Respect user's motion preferences */\n  @media (prefers-reduced-motion: reduce) {\n    .spinner__circle {\n      animation-duration: 2s;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { spinnerStyles } from './spinner.style.js';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg';\nexport type SpinnerVariant =\n  | 'primary'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'inverse'\n  | 'neutral';\n\n/**\n * A loading spinner component that indicates content is being loaded or processed.\n * Supports multiple sizes, variants, and an optional label for accessibility.\n */\n@customElement('bp-spinner')\nexport class BpSpinner extends LitElement {\n  /**\n   * Size of the spinner.\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: SpinnerSize;\n\n  /**\n   * Visual variant of the spinner.\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'inverse' | 'neutral'}\n   * @default 'primary'\n   */\n  @property({ type: String, reflect: true }) declare variant: SpinnerVariant;\n\n  /**\n   * Accessible label for screen readers.\n   * @type {string}\n   * @default 'Loading...'\n   */\n  @property({ type: String, reflect: true }) declare label: string;\n\n  static styles = [spinnerStyles];\n\n  constructor() {\n    super();\n    this.size = 'md';\n    this.variant = 'primary';\n    this.label = 'Loading...';\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"spinner spinner--${this.size} spinner--${this.variant}\"\n        role=\"status\"\n        aria-label=\"${this.label}\"\n        part=\"spinner\"\n      >\n        <div class=\"spinner__circle\" part=\"circle\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-spinner': BpSpinner;\n  }\n}\n"],"names":["spinnerStyles","css","BpSpinner","LitElement","html","__decorateClass","property","customElement"],"mappings":";;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgBtB,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAwBxC,cAAc;AACZ,UAAA,GACA,KAAK,OAAO,MACZ,KAAK,UAAU,WACf,KAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,kCAEuB,KAAK,IAAI,aAAa,KAAK,OAAO;AAAA;AAAA,sBAE9C,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9B;AACF;AA3CaF,EAsBJ,SAAS,CAACF,CAAa;AAhBqBK,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BJ,EAMwC,WAAA,QAAA,CAAA;AAOAG,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAb9BJ,EAawC,WAAA,WAAA,CAAA;AAOAG,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BJ,EAoBwC,WAAA,SAAA,CAAA;AApBxCA,IAANG,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdL,CAAA;"}