@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","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'\n  | 'muted'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | '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'\n  | 'tight'\n  | 'snug'\n  | 'normal'\n  | 'relaxed'\n  | '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"],"names":["textStyles","css","BpText","LitElement","classes","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/textarea.js

@@ -0,0 +1,380 @@
+import { css as u, LitElement as d, nothing as h, html as l } from "lit";
+import { property as a, query as f, customElement as v } from "lit/decorators.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import { live as m } from "lit/directives/live.js";
+import { d as x } from "../shared/debounce-BckY30Sf.js";
+import { b as g } from "../shared/boolean-converter-XDGfS9LC.js";
+const y = u`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-xs);
+  }
+
+  .textarea-label {
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .textarea-required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .textarea {
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text);
+    background-color: var(--bp-color-background);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.05);
+    transition:
+      border-color var(--bp-transition-fast),
+      box-shadow var(--bp-transition-fast);
+    width: 100%;
+    box-sizing: border-box;
+    min-height: var(--bp-spacing-20);
+  }
+
+  .textarea::placeholder {
+    color: var(--bp-color-text-muted);
+    opacity: var(--bp-opacity-subtle);
+  }
+
+  /* Variants */
+  .textarea--default {
+    border-color: var(--bp-color-border);
+  }
+
+  .textarea--success {
+    border-color: var(--bp-color-success);
+  }
+
+  .textarea--error {
+    border-color: var(--bp-color-error);
+  }
+
+  .textarea--warning {
+    border-color: var(--bp-color-warning);
+  }
+
+  .textarea--info {
+    border-color: var(--bp-color-info);
+  }
+
+  /* Sizes */
+  .textarea--sm {
+    font-size: var(--bp-font-size-sm);
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    min-height: var(--bp-spacing-16);
+  }
+
+  .textarea--md {
+    font-size: var(--bp-font-size-base);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    min-height: var(--bp-spacing-20);
+  }
+
+  .textarea--lg {
+    font-size: var(--bp-font-size-lg);
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    min-height: var(--bp-spacing-24);
+  }
+
+  /* Resize variants */
+  .textarea--resize-none {
+    resize: none;
+  }
+
+  .textarea--resize-both {
+    resize: both;
+  }
+
+  .textarea--resize-horizontal {
+    resize: horizontal;
+  }
+
+  .textarea--resize-vertical {
+    resize: vertical;
+  }
+
+  /* States */
+  .textarea:hover:not(:disabled):not(:focus) {
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .textarea:focus {
+    outline: none;
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-focus);
+  }
+
+  .textarea:focus-visible {
+    outline: none;
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-focus);
+  }
+
+  .textarea:disabled {
+    opacity: var(--bp-opacity-disabled);
+    cursor: not-allowed;
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  .textarea:read-only {
+    background-color: var(--bp-color-surface);
+    cursor: default;
+  }
+
+  /* Variant-specific focus states */
+  .textarea--success:focus,
+  .textarea--success:focus-visible {
+    border-color: var(--bp-color-success);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-success);
+  }
+
+  .textarea--error:focus,
+  .textarea--error:focus-visible {
+    border-color: var(--bp-color-error);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-error);
+  }
+
+  .textarea--warning:focus,
+  .textarea--warning:focus-visible {
+    border-color: var(--bp-color-warning);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-warning);
+  }
+
+  .textarea--info:focus,
+  .textarea--info:focus-visible {
+    border-color: var(--bp-color-info);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-info);
+  }
+
+  /* Messages */
+  .textarea-message {
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text-muted);
+  }
+
+  .textarea-message--error {
+    color: var(--bp-color-error);
+  }
+
+  /* iOS zoom prevention: ensure 16px minimum on touch devices */
+  @media (max-width: 768px) {
+    .textarea--sm {
+      font-size: 16px;
+    }
+  }
+`;
+var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (t, o, n, p) => {
+  for (var i = p > 1 ? void 0 : p ? z(o, n) : o, c = t.length - 1, b; c >= 0; c--)
+    (b = t[c]) && (i = (p ? b(o, n, i) : b(i)) || i);
+  return p && i && w(o, n, i), i;
+};
+let e = class extends d {
+  constructor() {
+    super(), this.debouncedDispatchInput = x(
+      (t, o) => {
+        this.dispatchEvent(
+          new CustomEvent("bp-input", {
+            detail: { value: t, originalEvent: o },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      },
+      150
+    ), this.variant = "default", this.size = "md", this.value = "", this.disabled = !1, this.required = !1, this.readonly = !1, this.resize = "vertical", this.spellcheck = !0;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.debouncedDispatchInput.cancel();
+  }
+  handleInput(t) {
+    const o = t.target;
+    this.value = o.value, this.debouncedDispatchInput(this.value, t);
+  }
+  handleChange(t) {
+    const o = t.target;
+    this.value = o.value, this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: { value: this.value, originalEvent: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleFocus(t) {
+    this.dispatchEvent(
+      new CustomEvent("bp-focus", {
+        detail: { originalEvent: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleBlur(t) {
+    this.debouncedDispatchInput.flush(), this.dispatchEvent(
+      new CustomEvent("bp-blur", {
+        detail: { originalEvent: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Focuses the textarea element
+   */
+  focus() {
+    this.textareaElement?.focus();
+  }
+  /**
+   * Blurs the textarea element
+   */
+  blur() {
+    this.textareaElement?.blur();
+  }
+  /**
+   * Selects the text in the textarea
+   */
+  select() {
+    this.textareaElement?.select();
+  }
+  get messageId() {
+    const t = this.variant === "error" && this.errorMessage, o = this.helperText && !t;
+    return t ? "error-message" : o ? "helper-text" : "";
+  }
+  render() {
+    const t = this.variant === "error" && this.errorMessage, o = this.helperText && !t;
+    return l`
+      <div class="textarea-wrapper">
+        ${this.label ? l`
+              <label class="textarea-label" for="textarea">
+                ${this.label}
+                ${this.required ? l`<span class="textarea-required">*</span>` : ""}
+              </label>
+            ` : ""}
+
+        <textarea
+          part="textarea"
+          id="textarea"
+          class="textarea textarea--${this.variant} textarea--${this.size} textarea--resize-${this.resize}"
+          .value=${m(this.value)}
+          placeholder=${s(this.placeholder)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          name=${s(this.name)}
+          rows=${s(this.rows)}
+          cols=${s(this.cols)}
+          maxlength=${s(this.maxlength)}
+          minlength=${s(this.minlength)}
+          autocomplete=${s(this.autocomplete)}
+          ?spellcheck=${this.spellcheck}
+          wrap=${s(this.wrap)}
+          aria-invalid=${this.variant === "error" ? "true" : "false"}
+          aria-describedby=${this.messageId || h}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        ></textarea>
+
+        ${t ? l`
+              <div
+                id="error-message"
+                class="textarea-message textarea-message--error"
+                role="alert"
+              >
+                ${this.errorMessage}
+              </div>
+            ` : ""}
+        ${o ? l`<div id="helper-text" class="textarea-message">
+              ${this.helperText}
+            </div>` : ""}
+      </div>
+    `;
+  }
+};
+e.styles = [y];
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "value", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "placeholder", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "label", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "helperText", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "errorMessage", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "readonly", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "name", 2);
+r([
+  a({ type: Number, reflect: !0 })
+], e.prototype, "rows", 2);
+r([
+  a({ type: Number, reflect: !0 })
+], e.prototype, "cols", 2);
+r([
+  a({ type: Number, reflect: !0 })
+], e.prototype, "maxlength", 2);
+r([
+  a({ type: Number, reflect: !0 })
+], e.prototype, "minlength", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "resize", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "autocomplete", 2);
+r([
+  a({ converter: g, reflect: !0 })
+], e.prototype, "spellcheck", 2);
+r([
+  a({ type: String, reflect: !0 })
+], e.prototype, "wrap", 2);
+r([
+  f("textarea")
+], e.prototype, "textareaElement", 2);
+e = r([
+  v("bp-textarea")
+], e);
+export {
+  e as BpTextarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../source/components/textarea/textarea.style.ts","../../source/components/textarea/textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const textareaStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-xs);\n  }\n\n  .textarea-label {\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .textarea-required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .textarea {\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    background-color: var(--bp-color-background);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.05);\n    transition:\n      border-color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n    width: 100%;\n    box-sizing: border-box;\n    min-height: var(--bp-spacing-20);\n  }\n\n  .textarea::placeholder {\n    color: var(--bp-color-text-muted);\n    opacity: var(--bp-opacity-subtle);\n  }\n\n  /* Variants */\n  .textarea--default {\n    border-color: var(--bp-color-border);\n  }\n\n  .textarea--success {\n    border-color: var(--bp-color-success);\n  }\n\n  .textarea--error {\n    border-color: var(--bp-color-error);\n  }\n\n  .textarea--warning {\n    border-color: var(--bp-color-warning);\n  }\n\n  .textarea--info {\n    border-color: var(--bp-color-info);\n  }\n\n  /* Sizes */\n  .textarea--sm {\n    font-size: var(--bp-font-size-sm);\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    min-height: var(--bp-spacing-16);\n  }\n\n  .textarea--md {\n    font-size: var(--bp-font-size-base);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    min-height: var(--bp-spacing-20);\n  }\n\n  .textarea--lg {\n    font-size: var(--bp-font-size-lg);\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    min-height: var(--bp-spacing-24);\n  }\n\n  /* Resize variants */\n  .textarea--resize-none {\n    resize: none;\n  }\n\n  .textarea--resize-both {\n    resize: both;\n  }\n\n  .textarea--resize-horizontal {\n    resize: horizontal;\n  }\n\n  .textarea--resize-vertical {\n    resize: vertical;\n  }\n\n  /* States */\n  .textarea:hover:not(:disabled):not(:focus) {\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .textarea:focus {\n    outline: none;\n    border-color: var(--bp-color-focus);\n    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-focus);\n  }\n\n  .textarea:focus-visible {\n    outline: none;\n    border-color: var(--bp-color-focus);\n    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-focus);\n  }\n\n  .textarea:disabled {\n    opacity: var(--bp-opacity-disabled);\n    cursor: not-allowed;\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  .textarea:read-only {\n    background-color: var(--bp-color-surface);\n    cursor: default;\n  }\n\n  /* Variant-specific focus states */\n  .textarea--success:focus,\n  .textarea--success:focus-visible {\n    border-color: var(--bp-color-success);\n    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-success);\n  }\n\n  .textarea--error:focus,\n  .textarea--error:focus-visible {\n    border-color: var(--bp-color-error);\n    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-error);\n  }\n\n  .textarea--warning:focus,\n  .textarea--warning:focus-visible {\n    border-color: var(--bp-color-warning);\n    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-warning);\n  }\n\n  .textarea--info:focus,\n  .textarea--info:focus-visible {\n    border-color: var(--bp-color-info);\n    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-info);\n  }\n\n  /* Messages */\n  .textarea-message {\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text-muted);\n  }\n\n  .textarea-message--error {\n    color: var(--bp-color-error);\n  }\n\n  /* iOS zoom prevention: ensure 16px minimum on touch devices */\n  @media (max-width: 768px) {\n    .textarea--sm {\n      font-size: 16px;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { live } from 'lit/directives/live.js';\r\nimport { textareaStyles } from './textarea.style.js';\r\nimport { debounce } from '../../utilities/debounce.js';\r\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\r\n\r\n/**\r\n * Visual variant that affects the textarea border color and validation state\r\n */\r\nexport type TextareaVariant =\r\n  | 'default'\r\n  | 'success'\r\n  | 'error'\r\n  | 'warning'\r\n  | 'info';\r\n\r\n/**\r\n * Size of the textarea affecting padding, font size, and minimum height\r\n */\r\nexport type TextareaSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * Resize mode determining how users can resize the textarea\r\n */\r\nexport type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';\r\n\r\n/**\r\n * Valid autocomplete values for textarea elements\r\n */\r\nexport type TextareaAutocomplete =\r\n  | 'off'\r\n  | 'on'\r\n  | 'name'\r\n  | 'email'\r\n  | 'username'\r\n  | 'street-address'\r\n  | 'address-line1'\r\n  | 'address-line2'\r\n  | 'address-line3'\r\n  | 'address-level1'\r\n  | 'address-level2'\r\n  | 'address-level3'\r\n  | 'address-level4'\r\n  | 'country'\r\n  | 'country-name'\r\n  | 'postal-code'\r\n  | 'organization'\r\n  | 'organization-title';\r\n\r\n/**\r\n * A multi-line text input component with support for various states and configurations.\r\n *\r\n * @fires bp-input - Dispatched when the textarea value changes (on every keystroke)\r\n * @fires bp-change - Dispatched when the textarea loses focus after being changed\r\n * @fires bp-focus - Dispatched when the textarea receives focus\r\n * @fires bp-blur - Dispatched when the textarea loses focus\r\n */\r\n@customElement('bp-textarea')\r\nexport class BpTextarea extends LitElement {\r\n  /** Visual variant of the textarea */\r\n  @property({ type: String, reflect: true }) declare variant: TextareaVariant;\r\n\r\n  /** Size of the textarea */\r\n  @property({ type: String, reflect: true }) declare size: TextareaSize;\r\n\r\n  /** Current value of the textarea */\r\n  @property({ type: String, reflect: true }) declare value: string;\r\n\r\n  /** Placeholder text shown when textarea is empty */\r\n  @property({ type: String, reflect: true }) declare placeholder:\r\n    | string\r\n    | undefined;\r\n\r\n  /** Label text displayed above the textarea */\r\n  @property({ type: String, reflect: true }) declare label: string | undefined;\r\n\r\n  /** Helper text displayed below the textarea */\r\n  @property({ type: String, reflect: true }) declare helperText:\r\n    | string\r\n    | undefined;\r\n\r\n  /** Error message displayed when variant is 'error' */\r\n  @property({ type: String, reflect: true }) declare errorMessage:\r\n    | string\r\n    | undefined;\r\n\r\n  /** Whether the textarea is disabled */\r\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n\r\n  /** Whether the textarea is required */\r\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\r\n\r\n  /** Whether the textarea is readonly */\r\n  @property({ type: Boolean, reflect: true }) declare readonly: boolean;\r\n\r\n  /** Name attribute for form submission */\r\n  @property({ type: String, reflect: true }) declare name: string | undefined;\r\n\r\n  /** Number of visible text rows */\r\n  @property({ type: Number, reflect: true }) declare rows: number | undefined;\r\n\r\n  /** Number of visible text columns */\r\n  @property({ type: Number, reflect: true }) declare cols: number | undefined;\r\n\r\n  /** Maximum number of characters allowed */\r\n  @property({ type: Number, reflect: true }) declare maxlength:\r\n    | number\r\n    | undefined;\r\n\r\n  /** Minimum number of characters required */\r\n  @property({ type: Number, reflect: true }) declare minlength:\r\n    | number\r\n    | undefined;\r\n\r\n  /** How the textarea can be resized by the user */\r\n  @property({ type: String, reflect: true }) declare resize: TextareaResize;\r\n\r\n  /** Autocomplete attribute for browser suggestions */\r\n  @property({ type: String, reflect: true }) declare autocomplete:\r\n    | TextareaAutocomplete\r\n    | undefined;\r\n\r\n  /** Whether to enable spellcheck */\r\n  @property({ converter: booleanConverter, reflect: true })\r\n  declare spellcheck: boolean;\r\n\r\n  /** Wrap attribute for text wrapping behavior */\r\n  @property({ type: String, reflect: true }) declare wrap:\r\n    | 'soft'\r\n    | 'hard'\r\n    | undefined;\r\n\r\n  @query('textarea') private textareaElement?: HTMLTextAreaElement;\r\n\r\n  private debouncedDispatchInput = debounce(\r\n    (value: string, originalEvent: InputEvent) => {\r\n      this.dispatchEvent(\r\n        new CustomEvent('bp-input', {\r\n          detail: { value, originalEvent },\r\n          bubbles: true,\r\n          composed: true,\r\n        })\r\n      );\r\n    },\r\n    150\r\n  );\r\n\r\n  static styles = [textareaStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.variant = 'default';\r\n    this.size = 'md';\r\n    this.value = '';\r\n    this.disabled = false;\r\n    this.required = false;\r\n    this.readonly = false;\r\n    this.resize = 'vertical';\r\n    this.spellcheck = true;\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this.debouncedDispatchInput.cancel();\r\n  }\r\n\r\n  private handleInput(event: InputEvent): void {\r\n    const target = event.target as HTMLTextAreaElement;\r\n    this.value = target.value;\r\n    this.debouncedDispatchInput(this.value, event);\r\n  }\r\n\r\n  private handleChange(event: Event): void {\r\n    const target = event.target as HTMLTextAreaElement;\r\n    this.value = target.value;\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-change', {\r\n        detail: { value: this.value, originalEvent: event },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private handleFocus(event: FocusEvent): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-focus', {\r\n        detail: { originalEvent: event },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private handleBlur(event: FocusEvent): void {\r\n    this.debouncedDispatchInput.flush();\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-blur', {\r\n        detail: { originalEvent: event },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Focuses the textarea element\r\n   */\r\n  public focus(): void {\r\n    this.textareaElement?.focus();\r\n  }\r\n\r\n  /**\r\n   * Blurs the textarea element\r\n   */\r\n  public blur(): void {\r\n    this.textareaElement?.blur();\r\n  }\r\n\r\n  /**\r\n   * Selects the text in the textarea\r\n   */\r\n  public select(): void {\r\n    this.textareaElement?.select();\r\n  }\r\n\r\n  private get messageId(): string {\r\n    const showError = this.variant === 'error' && this.errorMessage;\r\n    const showHelper = this.helperText && !showError;\r\n    if (showError) return 'error-message';\r\n    if (showHelper) return 'helper-text';\r\n    return '';\r\n  }\r\n\r\n  render() {\r\n    const showError = this.variant === 'error' && this.errorMessage;\r\n    const showHelper = this.helperText && !showError;\r\n\r\n    return html`\r\n      <div class=\"textarea-wrapper\">\r\n        ${this.label\r\n          ? html`\r\n              <label class=\"textarea-label\" for=\"textarea\">\r\n                ${this.label}\r\n                ${this.required\r\n                  ? html`<span class=\"textarea-required\">*</span>`\r\n                  : ''}\r\n              </label>\r\n            `\r\n          : ''}\r\n\r\n        <textarea\r\n          part=\"textarea\"\r\n          id=\"textarea\"\r\n          class=\"textarea textarea--${this.variant} textarea--${this\r\n            .size} textarea--resize-${this.resize}\"\r\n          .value=${live(this.value)}\r\n          placeholder=${ifDefined(this.placeholder)}\r\n          ?disabled=${this.disabled}\r\n          ?required=${this.required}\r\n          ?readonly=${this.readonly}\r\n          name=${ifDefined(this.name)}\r\n          rows=${ifDefined(this.rows)}\r\n          cols=${ifDefined(this.cols)}\r\n          maxlength=${ifDefined(this.maxlength)}\r\n          minlength=${ifDefined(this.minlength)}\r\n          autocomplete=${ifDefined(this.autocomplete)}\r\n          ?spellcheck=${this.spellcheck}\r\n          wrap=${ifDefined(this.wrap)}\r\n          aria-invalid=${this.variant === 'error' ? 'true' : 'false'}\r\n          aria-describedby=${this.messageId || nothing}\r\n          @input=${this.handleInput}\r\n          @change=${this.handleChange}\r\n          @focus=${this.handleFocus}\r\n          @blur=${this.handleBlur}\r\n        ></textarea>\r\n\r\n        ${showError\r\n          ? html`\r\n              <div\r\n                id=\"error-message\"\r\n                class=\"textarea-message textarea-message--error\"\r\n                role=\"alert\"\r\n              >\r\n                ${this.errorMessage}\r\n              </div>\r\n            `\r\n          : ''}\r\n        ${showHelper\r\n          ? html`<div id=\"helper-text\" class=\"textarea-message\">\r\n              ${this.helperText}\r\n            </div>`\r\n          : ''}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-textarea': BpTextarea;\r\n  }\r\n}\r\n"],"names":["textareaStyles","css","BpTextarea","LitElement","debounce","value","originalEvent","event","target","showError","showHelper","html","live","ifDefined","nothing","__decorateClass","property","booleanConverter","query","customElement"],"mappings":"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"}