@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/tag-CHVTSqVW.js

@@ -0,0 +1,292 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import { crossSvg as n } from "../icons/cross.js";
+import { LitElement as r, css as i, html as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region source/components/tag/tag.style.ts
+var l = i`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-xs);
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-medium);
+    line-height: 1.5;
+    border-radius: var(--bp-border-radius-md);
+    border: var(--bp-border-width) solid transparent;
+    transition:
+      background-color var(--bp-transition-fast),
+      border-color var(--bp-transition-fast),
+      color var(--bp-transition-fast),
+      box-shadow var(--bp-transition-fast);
+    cursor: default;
+  }
+
+  .tag:focus-visible {
+    outline: var(--bp-border-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-border-width);
+  }
+
+  .tag__content {
+    flex: 1;
+  }
+
+  .tag__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .tag__close:hover {
+    opacity: 1;
+  }
+
+  .tag__close:focus-visible {
+    outline: var(--bp-border-width) solid currentColor;
+    outline-offset: var(--bp-border-width);
+    border-radius: var(--bp-border-radius-sm);
+    opacity: 1;
+  }
+
+  /* Variants - Solid */
+  .tag--solid.tag--primary {
+    background-color: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--success {
+    background-color: var(--bp-color-success);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--error {
+    background-color: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--warning {
+    background-color: var(--bp-color-warning);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .tag--solid.tag--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). */
+  .tag--solid.tag--neutral {
+    background-color: var(--bp-color-secondary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  /* Variants - Outlined */
+  .tag--outlined {
+    background-color: transparent;
+  }
+
+  .tag--outlined.tag--primary {
+    border-color: var(--bp-color-primary);
+    color: var(--bp-color-primary);
+  }
+
+  .tag--outlined.tag--success {
+    border-color: var(--bp-color-success);
+    color: var(--bp-color-success);
+  }
+
+  .tag--outlined.tag--error {
+    border-color: var(--bp-color-error);
+    color: var(--bp-color-error);
+  }
+
+  .tag--outlined.tag--warning {
+    border-color: var(--bp-color-warning);
+    color: var(--bp-color-warning);
+  }
+
+  .tag--outlined.tag--info {
+    border-color: var(--bp-color-info);
+    color: var(--bp-color-info);
+  }
+
+  .tag--outlined.tag--neutral {
+    border-color: var(--bp-color-border);
+    color: var(--bp-color-text);
+  }
+
+  /* Sizes */
+  .tag--sm {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-xs);
+    height: var(--bp-spacing-6);
+  }
+
+  .tag--sm .tag__close {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .tag--md {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-sm);
+    height: var(--bp-spacing-8);
+  }
+
+  .tag--md .tag__close {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  .tag--lg {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-base);
+    height: var(--bp-spacing-10);
+  }
+
+  .tag--lg .tag__close {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  /* States */
+  .tag--removable {
+    cursor: pointer;
+  }
+
+  .tag--removable:hover {
+    filter: brightness(0.95);
+  }
+
+  .tag--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .tag--disabled .tag__close {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Touch target size: ensure 44x44px minimum on touch devices */
+  @media (pointer: coarse) {
+    .tag__close {
+      position: relative;
+      min-width: 24px;
+      min-height: 24px;
+    }
+
+    /* Expand touch target with pseudo-element */
+    .tag__close::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+    }
+  }
+`, u = class extends r {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.variant = "solid", this.size = "md", this.color = "neutral", this.removable = !1, this.disabled = !1;
+	}
+	handleRemove(e) {
+		if (e.stopPropagation(), this.disabled) return;
+		let t = new CustomEvent("bp-remove", {
+			detail: {
+				color: this.color,
+				timestamp: Date.now()
+			},
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		});
+		this.dispatchEvent(t), t.defaultPrevented || this.remove();
+	}
+	handleKeyDown(e) {
+		if (this.disabled) return;
+		let t = e;
+		this.removable && (t.key === "Delete" || t.key === "Backspace") && (t.preventDefault(), this.handleRemove(e));
+	}
+	render() {
+		let e = {
+			tag: !0,
+			[`tag--${this.variant}`]: !0,
+			[`tag--${this.size}`]: !0,
+			[`tag--${this.color}`]: !0,
+			"tag--disabled": this.disabled,
+			"tag--removable": this.removable
+		}, t = this.size === "sm" ? "xs" : this.size === "lg" ? "sm" : "xs";
+		return a`
+      <div
+        class=${c(e)}
+        part="tag"
+        role="status"
+        aria-disabled=${this.disabled}
+        @keydown=${this.handleKeyDown}
+        tabindex=${this.removable && !this.disabled ? "0" : "-1"}
+      >
+        <span class="tag__content">
+          <slot></slot>
+        </span>
+        ${this.removable ? a`
+                <button
+                  type="button"
+                  class="tag__close"
+                  part="close-button"
+                  aria-label="Remove"
+                  ?disabled=${this.disabled}
+                  @click=${this.handleRemove}
+                  tabindex="-1"
+                >
+                  <bp-icon .svg=${n} size=${t}></bp-icon>
+                </button>
+              ` : ""}
+      </div>
+    `;
+	}
+};
+e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "variant", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "color", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "removable", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), u = e([o("bp-tag")], u);
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=tag-CHVTSqVW.js.map

package/dist/shared/tag-CHVTSqVW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-CHVTSqVW.js","names":["_decorate","__decorate","tagStyles","BpTag","LitElement","BpIcon","event","removeEvent","keyboardEvent","classes","iconSize","classMap","crossSvg","property","customElement"],"sources":["../../source/components/tag/tag.style.ts","../../source/components/tag/tag.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tagStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: 1.5;\n    border-radius: var(--bp-border-radius-md);\n    border: var(--bp-border-width) solid transparent;\n    transition:\n      background-color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n    cursor: default;\n  }\n\n  .tag:focus-visible {\n    outline: var(--bp-border-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-border-width);\n  }\n\n  .tag__content {\n    flex: 1;\n  }\n\n  .tag__close {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    margin: 0;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: inherit;\n    opacity: 0.7;\n    transition: opacity var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .tag__close:hover {\n    opacity: 1;\n  }\n\n  .tag__close:focus-visible {\n    outline: var(--bp-border-width) solid currentColor;\n    outline-offset: var(--bp-border-width);\n    border-radius: var(--bp-border-radius-sm);\n    opacity: 1;\n  }\n\n  /* Variants - Solid */\n  .tag--solid.tag--primary {\n    background-color: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--success {\n    background-color: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--error {\n    background-color: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--warning {\n    background-color: var(--bp-color-warning);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .tag--solid.tag--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  .tag--solid.tag--neutral {\n    background-color: var(--bp-color-secondary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  /* Variants - Outlined */\n  .tag--outlined {\n    background-color: transparent;\n  }\n\n  .tag--outlined.tag--primary {\n    border-color: var(--bp-color-primary);\n    color: var(--bp-color-primary);\n  }\n\n  .tag--outlined.tag--success {\n    border-color: var(--bp-color-success);\n    color: var(--bp-color-success);\n  }\n\n  .tag--outlined.tag--error {\n    border-color: var(--bp-color-error);\n    color: var(--bp-color-error);\n  }\n\n  .tag--outlined.tag--warning {\n    border-color: var(--bp-color-warning);\n    color: var(--bp-color-warning);\n  }\n\n  .tag--outlined.tag--info {\n    border-color: var(--bp-color-info);\n    color: var(--bp-color-info);\n  }\n\n  .tag--outlined.tag--neutral {\n    border-color: var(--bp-color-border);\n    color: var(--bp-color-text);\n  }\n\n  /* Sizes */\n  .tag--sm {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-xs);\n    height: var(--bp-spacing-6);\n  }\n\n  .tag--sm .tag__close {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .tag--md {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-sm);\n    height: var(--bp-spacing-8);\n  }\n\n  .tag--md .tag__close {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .tag--lg {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-base);\n    height: var(--bp-spacing-10);\n  }\n\n  .tag--lg .tag__close {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  /* States */\n  .tag--removable {\n    cursor: pointer;\n  }\n\n  .tag--removable:hover {\n    filter: brightness(0.95);\n  }\n\n  .tag--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .tag--disabled .tag__close {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .tag__close {\n      position: relative;\n      min-width: 24px;\n      min-height: 24px;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .tag__close::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 44px;\n      height: 44px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tagStyles } from './tag.style.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport { BpIcon } from '../icon/icon.js';\n\n/**\n * Tag component for displaying removable labels, chips, or category markers.\n *\n * @element bp-tag\n *\n * @slot - Default slot for tag content (text)\n *\n * @csspart tag - The tag container element\n * @csspart close-button - The close/remove button element\n *\n * @fires bp-remove - Fired when the tag is removed (cancelable)\n *\n * @example\n * ```html\n * <bp-tag>Design</bp-tag>\n * <bp-tag variant=\"outlined\" removable>TypeScript</bp-tag>\n * <bp-tag variant=\"success\" size=\"sm\">Active</bp-tag>\n * ```\n */\n@customElement('bp-tag')\nexport class BpTag 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 of the tag\n   * @type {'solid' | 'outlined'}\n   * @default 'solid'\n   */\n  @property({ type: String, reflect: true }) declare variant:\n    'solid' | 'outlined';\n\n  /**\n   * Size of the tag\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: 'sm' | 'md' | 'lg';\n\n  /**\n   * Color scheme of the tag\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'}\n   * @default 'neutral'\n   */\n  @property({ type: String, reflect: true }) declare color:\n    'primary' | 'success' | 'error' | 'warning' | 'info' | 'neutral';\n\n  /**\n   * Whether the tag can be removed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare removable: boolean;\n\n  /**\n   * Whether the tag is disabled\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [tagStyles];\n\n  constructor() {\n    super();\n    this.variant = 'solid';\n    this.size = 'md';\n    this.color = 'neutral';\n    this.removable = false;\n    this.disabled = false;\n  }\n\n  private handleRemove(event: Event) {\n    event.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    const removeEvent = new CustomEvent('bp-remove', {\n      detail: {\n        color: this.color,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(removeEvent);\n\n    // Only remove if event wasn't prevented\n    if (!removeEvent.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private handleKeyDown(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    const keyboardEvent = event as unknown as {\n      key: string;\n      preventDefault: () => void;\n    };\n\n    // Allow removing with Delete or Backspace when focused\n    if (\n      this.removable &&\n      (keyboardEvent.key === 'Delete' || keyboardEvent.key === 'Backspace')\n    ) {\n      keyboardEvent.preventDefault();\n      this.handleRemove(event);\n    }\n  }\n\n  render() {\n    const classes = {\n      tag: true,\n      [`tag--${this.variant}`]: true,\n      [`tag--${this.size}`]: true,\n      [`tag--${this.color}`]: true,\n      'tag--disabled': this.disabled,\n      'tag--removable': this.removable,\n    };\n\n    // Map tag size to icon size (icons should be smaller)\n    const iconSize =\n      this.size === 'sm' ? 'xs' : this.size === 'lg' ? 'sm' : 'xs';\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        part=\"tag\"\n        role=\"status\"\n        aria-disabled=${this.disabled}\n        @keydown=${this.handleKeyDown}\n        tabindex=${this.removable && !this.disabled ? '0' : '-1'}\n      >\n        <span class=\"tag__content\">\n          <slot></slot>\n        </span>\n        ${\n          this.removable\n            ? html`\n                <button\n                  type=\"button\"\n                  class=\"tag__close\"\n                  part=\"close-button\"\n                  aria-label=\"Remove\"\n                  ?disabled=${this.disabled}\n                  @click=${this.handleRemove}\n                  tabindex=\"-1\"\n                >\n                  <bp-icon .svg=${crossSvg} size=${iconSize}></bp-icon>\n                </button>\n              `\n            : ''\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-tag': BpTag;\n  }\n}\n"],"mappings":";;;;;;;AAEA,IAAaE,IAAY,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCyBfC,IAAN,cAAoBC,EAAW;;EAKd,KAAA,eAAA,CAACC,CAAM;;;EAuCb,KAAA,SAAA,CAACH,CAAS;;CAE1B,cAAc;EAMZ,AALA,MAAM,GACN,KAAK,UAAU,SACf,KAAK,OAAO,MACZ,KAAK,QAAQ,WACb,KAAK,YAAY,IACjB,KAAK,WAAW;CAClB;CAEA,aAAqB,GAAc;EAGjC,IAFAI,EAAM,gBAAgB,GAElB,KAAK,UACP;EAGF,IAAMC,IAAc,IAAI,YAAY,aAAa;GAC/C,QAAQ;IACN,OAAO,KAAK;IACZ,WAAW,KAAK,IAAI;GACtB;GACA,SAAS;GACT,UAAU;GACV,YAAY;EACd,CAAC;EAKD,AAHA,KAAK,cAAcA,CAAW,GAGzBA,EAAY,oBACf,KAAK,OAAO;CAEhB;CAEA,cAAsB,GAAc;EAClC,IAAI,KAAK,UACP;EAGF,IAAMC,IAAgBF;EAMtB,AACE,KAAK,cACJE,EAAc,QAAQ,YAAYA,EAAc,QAAQ,iBAEzDA,EAAc,eAAe,GAC7B,KAAK,aAAaF,CAAK;CAE3B;CAEA,SAAS;EACP,IAAMG,IAAU;GACd,KAAK;IACJ,QAAQ,KAAK,YAAY;IACzB,QAAQ,KAAK,SAAS;IACtB,QAAQ,KAAK,UAAU;GACxB,iBAAiB,KAAK;GACtB,kBAAkB,KAAK;EACzB,GAGMC,IACJ,KAAK,SAAS,OAAO,OAAO,KAAK,SAAS,OAAO,OAAO;EAE1D,OAAO,CAAI;;gBAECC,EAASF,CAAO,EAAE;;;wBAGV,KAAK,SAAS;mBACnB,KAAK,cAAc;mBACnB,KAAK,aAAa,CAAC,KAAK,WAAW,MAAM,KAAK;;;;;UAMvD,KAAK,YACD,CAAI;;;;;;8BAMY,KAAK,SAAS;2BACjB,KAAK,aAAa;;;kCAGXG,EAAS,QAAQF,EAAS;;kBAG9C,GACL;;;CAGP;AACF;AAtIGV,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAV,EAAA,WAAA,WAAA,KAAA,CAAA,GAQxCH,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAV,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAV,EAAA,WAAA,SAAA,KAAA,CAAA,GAQxCH,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAV,EAAA,WAAA,aAAA,KAAA,CAAA,GAOzCH,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAV,EAAA,WAAA,YAAA,KAAA,CAAA,GA3C3C,IAAAH,EAAA,CAAAc,EAAc,QAAQ,CAAA,GAAAX,CAAA"}

package/dist/shared/text-DpWMArti.js

@@ -0,0 +1,272 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region source/components/text/text.style.ts
+var o = n`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  :host([as='span']) {
+    display: inline;
+  }
+
+  .text {
+    margin: 0;
+    padding: 0;
+    font-family: var(--bp-font-family);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* Sizes */
+  .text--xs {
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .text--sm {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .text--base {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .text--lg {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .text--xl {
+    font-size: var(--bp-font-size-xl);
+  }
+
+  /* Font weights */
+  .text--light {
+    font-weight: var(--bp-font-weight-light);
+  }
+
+  .text--normal {
+    font-weight: var(--bp-font-weight-normal);
+  }
+
+  .text--medium {
+    font-weight: var(--bp-font-weight-medium);
+  }
+
+  .text--semibold {
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  .text--bold {
+    font-weight: var(--bp-font-weight-bold);
+  }
+
+  /* Variants */
+  .text--default {
+    color: var(--bp-color-text);
+  }
+
+  .text--muted {
+    color: var(--bp-color-text-muted);
+  }
+
+  .text--primary {
+    color: var(--bp-color-primary);
+  }
+
+  .text--success {
+    color: var(--bp-color-success);
+  }
+
+  .text--warning {
+    color: var(--bp-color-warning);
+  }
+
+  .text--error {
+    color: var(--bp-color-error);
+  }
+
+  /* Alignment */
+  .text--align-left {
+    text-align: left;
+  }
+
+  .text--align-center {
+    text-align: center;
+  }
+
+  .text--align-right {
+    text-align: right;
+  }
+
+  .text--align-justify {
+    text-align: justify;
+  }
+
+  /* Text transform */
+  .text--transform-uppercase {
+    text-transform: uppercase;
+  }
+
+  .text--transform-lowercase {
+    text-transform: lowercase;
+  }
+
+  .text--transform-capitalize {
+    text-transform: capitalize;
+  }
+
+  /* Letter spacing (tracking) */
+  .text--tracking-tighter {
+    letter-spacing: -0.05em;
+  }
+
+  .text--tracking-tight {
+    letter-spacing: -0.025em;
+  }
+
+  .text--tracking-wide {
+    letter-spacing: 0.025em;
+  }
+
+  .text--tracking-wider {
+    letter-spacing: 0.05em;
+  }
+
+  /* Line height variants */
+  .text--line-height-none {
+    line-height: var(--bp-line-height-none);
+  }
+
+  .text--line-height-tight {
+    line-height: var(--bp-line-height-tight);
+  }
+
+  .text--line-height-snug {
+    line-height: var(--bp-line-height-snug);
+  }
+
+  .text--line-height-relaxed {
+    line-height: var(--bp-line-height-relaxed);
+  }
+
+  .text--line-height-loose {
+    line-height: var(--bp-line-height-loose);
+  }
+
+  /* Multi-line clamp */
+  .text--clamp-1,
+  .text--clamp-2,
+  .text--clamp-3,
+  .text--clamp-4,
+  .text--clamp-5,
+  .text--clamp-6 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .text--clamp-1 {
+    -webkit-line-clamp: 1;
+  }
+
+  .text--clamp-2 {
+    -webkit-line-clamp: 2;
+  }
+
+  .text--clamp-3 {
+    -webkit-line-clamp: 3;
+  }
+
+  .text--clamp-4 {
+    -webkit-line-clamp: 4;
+  }
+
+  .text--clamp-5 {
+    -webkit-line-clamp: 5;
+  }
+
+  .text--clamp-6 {
+    -webkit-line-clamp: 6;
+  }
+
+  /* States */
+  .text--italic {
+    font-style: italic;
+  }
+
+  .text--truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+`, s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.as = "p", this.size = "base", this.weight = "normal", this.variant = "default", this.align = "left", this.transform = "none", this.tracking = "normal", this.lineHeight = "normal", this.clamp = 0, this.italic = !1, this.truncate = !1;
+	}
+	render() {
+		let e = [
+			"text",
+			`text--${this.size}`,
+			`text--${this.weight}`,
+			`text--${this.variant}`,
+			`text--align-${this.align}`,
+			this.transform === "none" ? "" : `text--transform-${this.transform}`,
+			this.tracking === "normal" ? "" : `text--tracking-${this.tracking}`,
+			this.lineHeight === "normal" ? "" : `text--line-height-${this.lineHeight}`,
+			this.clamp > 0 ? `text--clamp-${this.clamp}` : "",
+			this.italic ? "text--italic" : "",
+			this.truncate ? "text--truncate" : ""
+		].filter(Boolean).join(" ");
+		switch (this.as) {
+			case "span": return r`<span part="text" class="${e}"><slot></slot></span>`;
+			case "div": return r`<div part="text" class="${e}"><slot></slot></div>`;
+			default: return r`<p part="text" class="${e}"><slot></slot></p>`;
+		}
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "as", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "weight", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "align", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "transform", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "tracking", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "line-height"
+})], s.prototype, "lineHeight", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], s.prototype, "clamp", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "italic", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "truncate", void 0), s = e([i("bp-text")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=text-DpWMArti.js.map

package/dist/shared/text-DpWMArti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-DpWMArti.js","names":["_decorate","__decorate","textStyles","BpText","LitElement","classes","property","customElement"],"sources":["../../source/components/text/text.style.ts","../../source/components/text/text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const textStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  :host([as='span']) {\n    display: inline;\n  }\n\n  .text {\n    margin: 0;\n    padding: 0;\n    font-family: var(--bp-font-family);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Sizes */\n  .text--xs {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .text--sm {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .text--base {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .text--lg {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .text--xl {\n    font-size: var(--bp-font-size-xl);\n  }\n\n  /* Font weights */\n  .text--light {\n    font-weight: var(--bp-font-weight-light);\n  }\n\n  .text--normal {\n    font-weight: var(--bp-font-weight-normal);\n  }\n\n  .text--medium {\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .text--semibold {\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  .text--bold {\n    font-weight: var(--bp-font-weight-bold);\n  }\n\n  /* Variants */\n  .text--default {\n    color: var(--bp-color-text);\n  }\n\n  .text--muted {\n    color: var(--bp-color-text-muted);\n  }\n\n  .text--primary {\n    color: var(--bp-color-primary);\n  }\n\n  .text--success {\n    color: var(--bp-color-success);\n  }\n\n  .text--warning {\n    color: var(--bp-color-warning);\n  }\n\n  .text--error {\n    color: var(--bp-color-error);\n  }\n\n  /* Alignment */\n  .text--align-left {\n    text-align: left;\n  }\n\n  .text--align-center {\n    text-align: center;\n  }\n\n  .text--align-right {\n    text-align: right;\n  }\n\n  .text--align-justify {\n    text-align: justify;\n  }\n\n  /* Text transform */\n  .text--transform-uppercase {\n    text-transform: uppercase;\n  }\n\n  .text--transform-lowercase {\n    text-transform: lowercase;\n  }\n\n  .text--transform-capitalize {\n    text-transform: capitalize;\n  }\n\n  /* Letter spacing (tracking) */\n  .text--tracking-tighter {\n    letter-spacing: -0.05em;\n  }\n\n  .text--tracking-tight {\n    letter-spacing: -0.025em;\n  }\n\n  .text--tracking-wide {\n    letter-spacing: 0.025em;\n  }\n\n  .text--tracking-wider {\n    letter-spacing: 0.05em;\n  }\n\n  /* Line height variants */\n  .text--line-height-none {\n    line-height: var(--bp-line-height-none);\n  }\n\n  .text--line-height-tight {\n    line-height: var(--bp-line-height-tight);\n  }\n\n  .text--line-height-snug {\n    line-height: var(--bp-line-height-snug);\n  }\n\n  .text--line-height-relaxed {\n    line-height: var(--bp-line-height-relaxed);\n  }\n\n  .text--line-height-loose {\n    line-height: var(--bp-line-height-loose);\n  }\n\n  /* Multi-line clamp */\n  .text--clamp-1,\n  .text--clamp-2,\n  .text--clamp-3,\n  .text--clamp-4,\n  .text--clamp-5,\n  .text--clamp-6 {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  .text--clamp-1 {\n    -webkit-line-clamp: 1;\n  }\n\n  .text--clamp-2 {\n    -webkit-line-clamp: 2;\n  }\n\n  .text--clamp-3 {\n    -webkit-line-clamp: 3;\n  }\n\n  .text--clamp-4 {\n    -webkit-line-clamp: 4;\n  }\n\n  .text--clamp-5 {\n    -webkit-line-clamp: 5;\n  }\n\n  .text--clamp-6 {\n    -webkit-line-clamp: 6;\n  }\n\n  /* States */\n  .text--italic {\n    font-style: italic;\n  }\n\n  .text--truncate {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { textStyles } from './text.style.js';\n\nexport type TextElement = 'p' | 'span' | 'div';\nexport type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';\nexport type TextWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';\nexport type TextVariant =\n  'default' | 'muted' | 'primary' | 'success' | 'warning' | 'error';\nexport type TextAlign = 'left' | 'center' | 'right' | 'justify';\nexport type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';\nexport type TextTracking = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider';\nexport type TextLineHeight =\n  'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';\n\n/**\n * A typography component for body text with flexible styling options.\n *\n * @element bp-text\n *\n * @property {TextElement} as - The HTML element type to render\n * @property {TextSize} size - The size of the text\n * @property {TextWeight} weight - The font weight\n * @property {TextVariant} variant - The color variant\n * @property {TextAlign} align - Text alignment\n * @property {TextTransform} transform - Text transformation (uppercase, lowercase, capitalize)\n * @property {TextTracking} tracking - Letter spacing\n * @property {TextLineHeight} lineHeight - Line height variant\n * @property {number} clamp - Number of lines to clamp (multi-line truncation)\n * @property {boolean} italic - Whether the text is italic\n * @property {boolean} truncate - Whether to truncate with ellipsis\n *\n * @slot - The text content\n *\n * @csspart text - The text container element\n */\n@customElement('bp-text')\nexport class BpText extends LitElement {\n  /**\n   * The element type to render.\n   */\n  @property({ type: String, reflect: true }) declare as: TextElement;\n\n  /**\n   * The size of the text.\n   */\n  @property({ type: String, reflect: true }) declare size: TextSize;\n\n  /**\n   * The font weight of the text.\n   */\n  @property({ type: String, reflect: true }) declare weight: TextWeight;\n\n  /**\n   * The color variant of the text.\n   */\n  @property({ type: String, reflect: true }) declare variant: TextVariant;\n\n  /**\n   * The text alignment.\n   */\n  @property({ type: String, reflect: true }) declare align: TextAlign;\n\n  /**\n   * Text transformation.\n   */\n  @property({ type: String, reflect: true }) declare transform: TextTransform;\n\n  /**\n   * Letter spacing (tracking).\n   */\n  @property({ type: String, reflect: true }) declare tracking: TextTracking;\n\n  /**\n   * Line height variant.\n   */\n  @property({ type: String, reflect: true, attribute: 'line-height' })\n  declare lineHeight: TextLineHeight;\n\n  /**\n   * Number of lines to clamp (multi-line truncation).\n   * When set, text will be truncated to the specified number of lines.\n   */\n  @property({ type: Number, reflect: true }) declare clamp: number;\n\n  /**\n   * Whether the text should be italic.\n   */\n  @property({ type: Boolean, reflect: true }) declare italic: boolean;\n\n  /**\n   * Whether the text should be truncated with ellipsis.\n   */\n  @property({ type: Boolean, reflect: true }) declare truncate: boolean;\n\n  static styles = [textStyles];\n\n  constructor() {\n    super();\n    this.as = 'p';\n    this.size = 'base';\n    this.weight = 'normal';\n    this.variant = 'default';\n    this.align = 'left';\n    this.transform = 'none';\n    this.tracking = 'normal';\n    this.lineHeight = 'normal';\n    this.clamp = 0;\n    this.italic = false;\n    this.truncate = false;\n  }\n\n  render() {\n    const classes = [\n      'text',\n      `text--${this.size}`,\n      `text--${this.weight}`,\n      `text--${this.variant}`,\n      `text--align-${this.align}`,\n      this.transform !== 'none' ? `text--transform-${this.transform}` : '',\n      this.tracking !== 'normal' ? `text--tracking-${this.tracking}` : '',\n      this.lineHeight !== 'normal'\n        ? `text--line-height-${this.lineHeight}`\n        : '',\n      this.clamp > 0 ? `text--clamp-${this.clamp}` : '',\n      this.italic ? 'text--italic' : '',\n      this.truncate ? 'text--truncate' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Render the appropriate element based on 'as' prop\n    switch (this.as) {\n      case 'span':\n        return html`<span part=\"text\" class=\"${classes}\"><slot></slot></span>`;\n      case 'div':\n        return html`<div part=\"text\" class=\"${classes}\"><slot></slot></div>`;\n      case 'p':\n      default:\n        return html`<p part=\"text\" class=\"${classes}\"><slot></slot></p>`;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-text': BpText;\n  }\n}\n"],"mappings":"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"}