@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/icon-button-BQJ44FGd.js

@@ -0,0 +1,230 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region source/components/icon-button/icon-button.style.ts
+var s = r`
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .button {
+    appearance: none;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: var(--bp-border-width) solid transparent;
+    border-radius: var(--bp-border-radius);
+    background: transparent;
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast),
+      border-color var(--bp-transition-fast);
+  }
+
+  :host([shape='circle']) .button {
+    border-radius: var(--bp-border-radius-full);
+  }
+
+  /* Sizes: square, on the 4px grid */
+  .button--sm {
+    width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+  }
+  .button--md {
+    width: var(--bp-spacing-10);
+    height: var(--bp-spacing-10);
+  }
+  .button--lg {
+    width: var(--bp-spacing-12);
+    height: var(--bp-spacing-12);
+  }
+
+  .icon-slot {
+    display: inline-flex;
+  }
+  .button--sm .icon-slot ::slotted(svg) {
+    width: var(--bp-icon-size-sm);
+    height: var(--bp-icon-size-sm);
+  }
+  .button--md .icon-slot ::slotted(svg) {
+    width: var(--bp-icon-size-md);
+    height: var(--bp-icon-size-md);
+  }
+  .button--lg .icon-slot ::slotted(svg) {
+    width: var(--bp-icon-size-lg);
+    height: var(--bp-icon-size-lg);
+  }
+
+  /* Ghost: no fill until hovered */
+  .button--ghost:hover:not(:disabled) {
+    color: var(--bp-color-text);
+    background-image: linear-gradient(
+      var(--bp-color-hover-overlay),
+      var(--bp-color-hover-overlay)
+    );
+  }
+  .button--ghost:active:not(:disabled) {
+    background-image: linear-gradient(
+      var(--bp-color-active-overlay),
+      var(--bp-color-active-overlay)
+    );
+  }
+
+  /* Secondary: outlined surface */
+  .button--secondary {
+    background-color: var(--bp-color-surface-elevated);
+    border-color: var(--bp-color-border-strong);
+    color: var(--bp-color-text);
+  }
+  .button--secondary:hover:not(:disabled) {
+    background-image: linear-gradient(
+      var(--bp-color-hover-overlay),
+      var(--bp-color-hover-overlay)
+    );
+  }
+  .button--secondary:active:not(:disabled) {
+    background-image: linear-gradient(
+      var(--bp-color-active-overlay),
+      var(--bp-color-active-overlay)
+    );
+  }
+
+  /* Filled */
+  .button--primary,
+  .button--success,
+  .button--error,
+  .button--warning,
+  .button--info {
+    color: var(--bp-color-text-inverse);
+  }
+  .button--primary {
+    background-color: var(--bp-color-primary);
+  }
+  .button--primary:hover:not(:disabled) {
+    background-color: var(--bp-color-primary-hover);
+  }
+  .button--primary:active:not(:disabled) {
+    background-color: var(--bp-color-primary-active);
+  }
+  .button--success {
+    background-color: var(--bp-color-success);
+  }
+  .button--success:hover:not(:disabled) {
+    background-color: var(--bp-color-success-hover);
+  }
+  .button--error {
+    background-color: var(--bp-color-error);
+  }
+  .button--error:hover:not(:disabled) {
+    background-color: var(--bp-color-error-hover);
+  }
+  .button--warning {
+    background-color: var(--bp-color-warning);
+  }
+  .button--warning:hover:not(:disabled) {
+    background-color: var(--bp-color-warning-hover);
+  }
+  .button--info {
+    background-color: var(--bp-color-info);
+  }
+  .button--info:hover:not(:disabled) {
+    background-color: var(--bp-color-info-hover);
+  }
+
+  .button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .button:disabled {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+  }
+`, c = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+}, l = class extends n {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.warnedMissingLabel = !1, this.icon = "", this.label = "", this.variant = "ghost", this.size = "md", this.shape = "square", this.disabled = !1, this.type = "button";
+	}
+	updated(e) {
+		super.updated(e), !this.label.trim() && !this.warnedMissingLabel && (this.warnedMissingLabel = !0, console.warn("<bp-icon-button> needs a `label`: it is the only accessible name an icon-only button has.", this));
+	}
+	focus(e) {
+		this.shadowRoot?.querySelector("button")?.focus(e);
+	}
+	blur() {
+		this.shadowRoot?.querySelector("button")?.blur();
+	}
+	handleClick(e) {
+		if (this.disabled) {
+			e.preventDefault(), e.stopPropagation();
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("bp-click", {
+			detail: { originalEvent: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		return i`
+      <button
+        part="button"
+        class="button button--${this.variant} button--${this.size}"
+        type=${this.type}
+        aria-label=${this.label}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        ${this.icon ? i`<bp-icon
+                part="icon"
+                name=${this.icon}
+                size=${c[this.size] ?? "md"}
+                aria-hidden="true"
+              ></bp-icon>` : i`<span class="icon-slot" part="icon" aria-hidden="true"
+                ><slot></slot
+              ></span>`}
+      </button>
+    `;
+	}
+};
+e([o({ type: String })], l.prototype, "icon", void 0), e([o({ type: String })], l.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "shape", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), e([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "type", void 0), l = e([a("bp-icon-button")], l);
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=icon-button-BQJ44FGd.js.map

package/dist/shared/icon-button-BQJ44FGd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-BQJ44FGd.js","names":["_decorate","__decorate","iconButtonStyles","ICON_SIZE","BpIconButton","LitElement","BpIcon","changed","options","property","customElement"],"sources":["../../source/components/icon-button/icon-button.style.ts","../../source/components/icon-button/icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const iconButtonStyles = css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .button {\n    appearance: none;\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0;\n    padding: 0;\n    border: var(--bp-border-width) solid transparent;\n    border-radius: var(--bp-border-radius);\n    background: transparent;\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast);\n  }\n\n  :host([shape='circle']) .button {\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  /* Sizes: square, on the 4px grid */\n  .button--sm {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n  .button--md {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n  .button--lg {\n    width: var(--bp-spacing-12);\n    height: var(--bp-spacing-12);\n  }\n\n  .icon-slot {\n    display: inline-flex;\n  }\n  .button--sm .icon-slot ::slotted(svg) {\n    width: var(--bp-icon-size-sm);\n    height: var(--bp-icon-size-sm);\n  }\n  .button--md .icon-slot ::slotted(svg) {\n    width: var(--bp-icon-size-md);\n    height: var(--bp-icon-size-md);\n  }\n  .button--lg .icon-slot ::slotted(svg) {\n    width: var(--bp-icon-size-lg);\n    height: var(--bp-icon-size-lg);\n  }\n\n  /* Ghost: no fill until hovered */\n  .button--ghost:hover:not(:disabled) {\n    color: var(--bp-color-text);\n    background-image: linear-gradient(\n      var(--bp-color-hover-overlay),\n      var(--bp-color-hover-overlay)\n    );\n  }\n  .button--ghost:active:not(:disabled) {\n    background-image: linear-gradient(\n      var(--bp-color-active-overlay),\n      var(--bp-color-active-overlay)\n    );\n  }\n\n  /* Secondary: outlined surface */\n  .button--secondary {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-border-strong);\n    color: var(--bp-color-text);\n  }\n  .button--secondary:hover:not(:disabled) {\n    background-image: linear-gradient(\n      var(--bp-color-hover-overlay),\n      var(--bp-color-hover-overlay)\n    );\n  }\n  .button--secondary:active:not(:disabled) {\n    background-image: linear-gradient(\n      var(--bp-color-active-overlay),\n      var(--bp-color-active-overlay)\n    );\n  }\n\n  /* Filled */\n  .button--primary,\n  .button--success,\n  .button--error,\n  .button--warning,\n  .button--info {\n    color: var(--bp-color-text-inverse);\n  }\n  .button--primary {\n    background-color: var(--bp-color-primary);\n  }\n  .button--primary:hover:not(:disabled) {\n    background-color: var(--bp-color-primary-hover);\n  }\n  .button--primary:active:not(:disabled) {\n    background-color: var(--bp-color-primary-active);\n  }\n  .button--success {\n    background-color: var(--bp-color-success);\n  }\n  .button--success:hover:not(:disabled) {\n    background-color: var(--bp-color-success-hover);\n  }\n  .button--error {\n    background-color: var(--bp-color-error);\n  }\n  .button--error:hover:not(:disabled) {\n    background-color: var(--bp-color-error-hover);\n  }\n  .button--warning {\n    background-color: var(--bp-color-warning);\n  }\n  .button--warning:hover:not(:disabled) {\n    background-color: var(--bp-color-warning-hover);\n  }\n  .button--info {\n    background-color: var(--bp-color-info);\n  }\n  .button--info:hover:not(:disabled) {\n    background-color: var(--bp-color-info-hover);\n  }\n\n  .button:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .button:disabled {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { iconButtonStyles } from './icon-button.style.js';\nimport { BpIcon, type IconSize } from '../icon/icon.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\n\nexport type IconButtonVariant =\n  'ghost' | 'secondary' | 'primary' | 'success' | 'error' | 'warning' | 'info';\nexport type IconButtonSize = 'sm' | 'md' | 'lg';\nexport type IconButtonShape = 'square' | 'circle';\n\nconst ICON_SIZE: Record<IconButtonSize, IconSize> = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n};\n\n/**\n * A square button that shows only an icon. Because there is no visible\n * text, `label` is required: it becomes the button's accessible name.\n *\n * @element bp-icon-button\n *\n * @fires bp-click - The button was activated (not fired while disabled). `detail.originalEvent` is the click\n *\n * @slot - A custom icon (an `<svg>` or `<bp-icon>`), used when `icon` is not set\n *\n * @csspart button - The native button\n * @csspart icon - The icon\n */\n@customElement('bp-icon-button')\nexport class BpIconButton extends LitElement {\n  static dependencies = [BpIcon];\n\n  /** Name of a built-in icon */\n  @property({ type: String }) declare icon: IconName | '';\n\n  /** Accessible name, e.g. \"Close\" or \"Delete row\". Required */\n  @property({ type: String }) declare label: string;\n\n  /** Visual style. `ghost` (the default) has no fill or border until hovered */\n  @property({ type: String, reflect: true }) declare variant: IconButtonVariant;\n\n  /** `sm` 32px, `md` 40px, `lg` 48px square */\n  @property({ type: String, reflect: true }) declare size: IconButtonSize;\n\n  /** Corner shape */\n  @property({ type: String, reflect: true }) declare shape: IconButtonShape;\n\n  /** Whether the button is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Native button type */\n  @property({ type: String, reflect: true }) declare type:\n    'button' | 'submit' | 'reset';\n\n  static styles = [iconButtonStyles];\n\n  private warnedMissingLabel = false;\n\n  constructor() {\n    super();\n    this.icon = '';\n    this.label = '';\n    this.variant = 'ghost';\n    this.size = 'md';\n    this.shape = 'square';\n    this.disabled = false;\n    this.type = 'button';\n  }\n\n  protected updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (!this.label.trim() && !this.warnedMissingLabel) {\n      this.warnedMissingLabel = true;\n      console.warn(\n        '<bp-icon-button> needs a `label`: it is the only accessible name an icon-only button has.',\n        this\n      );\n    }\n  }\n\n  /** Move focus to the button */\n  focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  /** Remove focus from the button */\n  blur(): void {\n    this.shadowRoot?.querySelector('button')?.blur();\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent('bp-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"button\"\n        class=\"button button--${this.variant} button--${this.size}\"\n        type=${this.type}\n        aria-label=${this.label}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n      >\n        ${\n          this.icon\n            ? html`<bp-icon\n                part=\"icon\"\n                name=${this.icon}\n                size=${ICON_SIZE[this.size] ?? 'md'}\n                aria-hidden=\"true\"\n              ></bp-icon>`\n            : html`<span class=\"icon-slot\" part=\"icon\" aria-hidden=\"true\"\n                ><slot></slot\n              ></span>`\n        }\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-icon-button': BpIconButton;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAaE,IAAmB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCS7BC,IAA8C;CAClD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAgBaC,IAAN,cAA2BC,EAAW;;EACrB,KAAA,eAAA,CAACC,CAAM;;;EAwBb,KAAA,SAAA,CAACJ,CAAgB;;CAIjC,cAAc;EAQZ,AAPA,MAAM,GAHqB,KAAA,qBAAA,IAI3B,KAAK,OAAO,IACZ,KAAK,QAAQ,IACb,KAAK,UAAU,SACf,KAAK,OAAO,MACZ,KAAK,QAAQ,UACb,KAAK,WAAW,IAChB,KAAK,OAAO;CACd;CAEA,QAAkB,GAA+B;EAE/C,AADA,MAAM,QAAQK,CAAO,GACjB,CAAC,KAAK,MAAM,KAAK,KAAK,CAAC,KAAK,uBAC9B,KAAK,qBAAqB,IAC1B,QAAQ,KACN,6FACA,IACF;CAEJ;CAGA,MAAM,GAA8B;EAClC,KAAK,YAAY,cAAc,QAAQ,CAAC,EAAE,MAAMC,CAAO;CACzD;CAGA,OAAa;EACX,KAAK,YAAY,cAAc,QAAQ,CAAC,EAAE,KAAK;CACjD;CAEA,YAAoB,GAAe;EACjC,IAAI,KAAK,UAAU;GAEjB,AADA,EAAE,eAAe,GACjB,EAAE,gBAAgB;GAClB;EACF;EACA,KAAK,cACH,IAAI,YAAY,YAAY;GAC1B,QAAQ,EAAE,eAAe,EAAE;GAC3B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,SAAS;EACP,OAAO,CAAI;;;gCAGiB,KAAK,QAAQ,WAAW,KAAK,KAAK;eACnD,KAAK,KAAK;qBACJ,KAAK,MAAM;oBACZ,KAAK,SAAS;iBACjB,KAAK,YAAY;;UAGxB,KAAK,OACD,CAAI;;uBAEK,KAAK,KAAK;uBACVL,EAAU,KAAK,SAAS,KAAK;;6BAGtC,CAAI;;wBAGT;;;CAGP;AACF;AAjGGH,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzBJ,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAL,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzBJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,WAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA,GAvB1C,IAAAJ,EAAA,CAAAU,EAAc,gBAAgB,CAAA,GAAAN,CAAA"}

package/dist/shared/input-nV6RvTZq.js

@@ -0,0 +1,329 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./debounce-BOon6N4f.js";
+import { t as n } from "./form-control-CBEBNz12.js";
+import { a as r, i, r as a } from "./field-message-CPXPLd6z.js";
+import { LitElement as o, css as s, html as c, nothing as l } from "lit";
+import { customElement as u, property as d, query as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { live as m } from "lit/directives/live.js";
+//#region source/components/input/input.style.ts
+var h = s`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-xs);
+  }
+
+  .input-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);
+  }
+
+  .input-required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .input {
+    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-input-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;
+  }
+
+  .input::placeholder {
+    color: var(--bp-color-text-muted);
+    opacity: var(--bp-opacity-subtle);
+  }
+
+  /* Variants */
+  .input--default {
+    border-color: var(--bp-color-input-border);
+  }
+
+  .input--success {
+    border-color: var(--bp-color-success);
+  }
+
+  .input--error {
+    border-color: var(--bp-color-error);
+  }
+
+  .input--warning {
+    border-color: var(--bp-color-warning);
+  }
+
+  .input--info {
+    border-color: var(--bp-color-info);
+  }
+
+  /* Sizes */
+  .input--sm {
+    font-size: var(--bp-font-size-sm);
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+  }
+
+  .input--md {
+    font-size: var(--bp-font-size-base);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+  }
+
+  .input--lg {
+    font-size: var(--bp-font-size-lg);
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+  }
+
+  /* States */
+  .input:hover:not(:disabled):not(:focus) {
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-focus);
+  }
+
+  .input:focus-visible {
+    outline: none;
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-focus);
+  }
+
+  .input:disabled {
+    opacity: var(--bp-opacity-disabled);
+    cursor: not-allowed;
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  .input:read-only {
+    background-color: var(--bp-color-surface);
+    cursor: default;
+  }
+
+  /* Variant-specific focus states */
+  .input--success:focus,
+  .input--success:focus-visible {
+    border-color: var(--bp-color-success);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-success);
+  }
+
+  .input--error:focus,
+  .input--error:focus-visible {
+    border-color: var(--bp-color-error);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-error);
+  }
+
+  .input--warning:focus,
+  .input--warning:focus-visible {
+    border-color: var(--bp-color-warning);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-warning);
+  }
+
+  .input--info:focus,
+  .input--info:focus-visible {
+    border-color: var(--bp-color-info);
+    box-shadow: 0 0 0 var(--bp-focus-offset) var(--bp-color-info);
+  }
+
+  /* Help and error text: spaced by the wrapper's gap */
+  .field-message {
+    margin-top: 0;
+  }
+
+  /* iOS zoom prevention: ensure 16px minimum on touch devices */
+  @media (max-width: 768px) {
+    .input--sm {
+      font-size: 16px;
+    }
+  }
+`, g = class extends n(o) {
+	constructor(...e) {
+		super(...e), this.variant = "default", this.size = "md", this.type = "text", this.value = "", this.disabled = !1, this.required = !1, this.readonly = !1, this.debouncedDispatchInput = t((e, t) => {
+			this.dispatchEvent(new CustomEvent("bp-input", {
+				detail: {
+					value: e,
+					originalEvent: t
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, 150);
+	}
+	getValidityTarget() {
+		return this.inputElement ?? null;
+	}
+	static {
+		this.styles = [i, h];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.debouncedDispatchInput.cancel();
+	}
+	handleInput(e) {
+		let t = e.target;
+		this.value = t.value, this.debouncedDispatchInput(this.value, e);
+	}
+	handleChange(e) {
+		let t = e.target;
+		this.value = t.value, this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: {
+				value: this.value,
+				originalEvent: e
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleFocus(e) {
+		this.dispatchEvent(new CustomEvent("bp-focus", {
+			detail: { originalEvent: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleBlur(e) {
+		this.debouncedDispatchInput.flush(), this.dispatchEvent(new CustomEvent("bp-blur", {
+			detail: { originalEvent: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	focus() {
+		this.inputElement?.focus();
+	}
+	blur() {
+		this.inputElement?.blur();
+	}
+	select() {
+		this.inputElement?.select();
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: this.variant === "error"
+		}, { invalid: t, describedBy: n } = a(e), i = t ? "error" : this.variant;
+		return c`
+      <div class="input-wrapper">
+        ${this.label ? c`
+                <label class="input-label" for="input">
+                  ${this.label}
+                  ${this.required ? c`<span class="input-required">*</span>` : ""}
+                </label>
+              ` : ""}
+
+        <input
+          part="input"
+          id="input"
+          class="input input--${i} input--${this.size}"
+          type=${this.type}
+          .value=${m(this.value)}
+          placeholder=${p(this.placeholder)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          name=${p(this.name)}
+          autocomplete=${p(this.autocomplete)}
+          minlength=${p(this.minlength)}
+          maxlength=${p(this.maxlength)}
+          pattern=${p(this.pattern)}
+          step=${p(this.step)}
+          min=${p(this.min)}
+          max=${p(this.max)}
+          inputmode=${p(this.inputmode)}
+          aria-invalid=${t ? "true" : "false"}
+          aria-describedby=${n ?? l}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+
+        ${r(e)}
+      </div>
+    `;
+	}
+};
+e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "variant", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "size", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "type", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "value", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "placeholder", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "label", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "helperText", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "errorMessage", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "required", void 0), e([d({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "readonly", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "name", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "autocomplete", void 0), e([d({
+	type: Number,
+	reflect: !0
+})], g.prototype, "minlength", void 0), e([d({
+	type: Number,
+	reflect: !0
+})], g.prototype, "maxlength", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "pattern", void 0), e([d({
+	type: Number,
+	reflect: !0
+})], g.prototype, "step", void 0), e([d({
+	type: Number,
+	reflect: !0
+})], g.prototype, "min", void 0), e([d({
+	type: Number,
+	reflect: !0
+})], g.prototype, "max", void 0), e([d({
+	type: String,
+	reflect: !0
+})], g.prototype, "inputmode", void 0), e([f("input")], g.prototype, "inputElement", void 0), g = e([u("bp-input")], g);
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=input-nV6RvTZq.js.map

package/dist/shared/input-nV6RvTZq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-nV6RvTZq.js","names":["_decorate","__decorate","FormControlMixin","renderFieldMessage","fieldMessageState","inputStyles","BpInput","LitElement","_args","debounce","fieldMessageStyles","target","message","variant","invalid","live","ifDefined","describedBy","nothing","property","query","customElement"],"sources":["../../source/components/input/input.style.ts","../../source/components/input/input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const inputStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .input-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-xs);\n  }\n\n  .input-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  .input-required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .input {\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-input-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  }\n\n  .input::placeholder {\n    color: var(--bp-color-text-muted);\n    opacity: var(--bp-opacity-subtle);\n  }\n\n  /* Variants */\n  .input--default {\n    border-color: var(--bp-color-input-border);\n  }\n\n  .input--success {\n    border-color: var(--bp-color-success);\n  }\n\n  .input--error {\n    border-color: var(--bp-color-error);\n  }\n\n  .input--warning {\n    border-color: var(--bp-color-warning);\n  }\n\n  .input--info {\n    border-color: var(--bp-color-info);\n  }\n\n  /* Sizes */\n  .input--sm {\n    font-size: var(--bp-font-size-sm);\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n  }\n\n  .input--md {\n    font-size: var(--bp-font-size-base);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n  }\n\n  .input--lg {\n    font-size: var(--bp-font-size-lg);\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n  }\n\n  /* States */\n  .input:hover:not(:disabled):not(:focus) {\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .input: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  .input: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  .input:disabled {\n    opacity: var(--bp-opacity-disabled);\n    cursor: not-allowed;\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  .input:read-only {\n    background-color: var(--bp-color-surface);\n    cursor: default;\n  }\n\n  /* Variant-specific focus states */\n  .input--success:focus,\n  .input--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  .input--error:focus,\n  .input--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  .input--warning:focus,\n  .input--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  .input--info:focus,\n  .input--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  /* Help and error text: spaced by the wrapper's gap */\n  .field-message {\n    margin-top: 0;\n  }\n\n  /* iOS zoom prevention: ensure 16px minimum on touch devices */\n  @media (max-width: 768px) {\n    .input--sm {\n      font-size: 16px;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { inputStyles } from './input.style.js';\nimport { debounce } from '../../utilities/debounce.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\n\nexport type InputVariant = 'default' | 'success' | 'error' | 'warning' | 'info';\nexport type InputSize = 'sm' | 'md' | 'lg';\nexport type InputType =\n  'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';\n\nexport type InputModeType =\n  'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';\n\nexport type AutocompleteType =\n  | 'on'\n  | 'off'\n  | 'name'\n  | 'email'\n  | 'username'\n  | 'new-password'\n  | 'current-password'\n  | 'tel'\n  | 'url'\n  | 'street-address'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'address-level1'\n  | 'address-level2'\n  | 'address-level3'\n  | 'address-level4'\n  | 'country'\n  | 'country-name'\n  | 'postal-code'\n  | 'cc-name'\n  | 'cc-given-name'\n  | 'cc-additional-name'\n  | 'cc-family-name'\n  | 'cc-number'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-csc'\n  | 'cc-type'\n  | 'transaction-currency'\n  | 'transaction-amount'\n  | 'language'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'sex'\n  | 'tel-country-code'\n  | 'tel-national'\n  | 'tel-area-code'\n  | 'tel-local'\n  | 'tel-extension'\n  | 'organization'\n  | 'organization-title';\n\n@customElement('bp-input')\nexport class BpInput extends FormControlMixin(LitElement) {\n  @property({ type: String, reflect: true }) variant: InputVariant = 'default';\n  @property({ type: String, reflect: true }) size: InputSize = 'md';\n  @property({ type: String, reflect: true }) type: InputType = 'text';\n  @property({ type: String, reflect: true }) value: string = '';\n  @property({ type: String, reflect: true }) placeholder?: string;\n  @property({ type: String, reflect: true }) label?: string;\n  /** Helper text displayed below the input */\n  @property({ type: String, reflect: true }) helperText?: string;\n  /**\n   * Error text. When set, the input is invalid: the message replaces the\n   * helper text, is announced, and the border turns to the error color.\n   */\n  @property({ type: String, reflect: true }) errorMessage?: string;\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false;\n  @property({ type: Boolean, reflect: true }) required: boolean = false;\n  @property({ type: Boolean, reflect: true }) readonly: boolean = false;\n  @property({ type: String, reflect: true }) name?: string;\n  @property({ type: String, reflect: true }) autocomplete?: AutocompleteType;\n  @property({ type: Number, reflect: true }) minlength?: number;\n  @property({ type: Number, reflect: true }) maxlength?: number;\n  @property({ type: String, reflect: true }) pattern?: string;\n  @property({ type: Number, reflect: true }) step?: number;\n  @property({ type: Number, reflect: true }) min?: number;\n  @property({ type: Number, reflect: true }) max?: number;\n  @property({ type: String, reflect: true }) inputmode?: InputModeType;\n\n  @query('input') private inputElement?: HTMLInputElement;\n\n  /** Mirror the native input's constraint validation (required, pattern, min/max...). */\n  getValidityTarget(): HTMLInputElement | null {\n    return this.inputElement ?? null;\n  }\n\n  private debouncedDispatchInput = debounce(\n    (value: string, originalEvent: InputEvent) => {\n      this.dispatchEvent(\n        new CustomEvent('bp-input', {\n          detail: { value, originalEvent },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    },\n    150\n  );\n\n  static styles = [fieldMessageStyles, inputStyles];\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.debouncedDispatchInput.cancel();\n  }\n\n  private handleInput(e: InputEvent) {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this.debouncedDispatchInput(this.value, e);\n  }\n\n  private handleChange(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { value: this.value, originalEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleFocus(e: FocusEvent) {\n    this.dispatchEvent(\n      new CustomEvent('bp-focus', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleBlur(e: FocusEvent) {\n    this.debouncedDispatchInput.flush();\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Focuses the input element\n   */\n  public focus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Blurs the input element\n   */\n  public blur() {\n    this.inputElement?.blur();\n  }\n\n  /**\n   * Selects the text in the input\n   */\n  public select() {\n    this.inputElement?.select();\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: this.variant === 'error',\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const variant = invalid ? 'error' : this.variant;\n\n    return html`\n      <div class=\"input-wrapper\">\n        ${\n          this.label\n            ? html`\n                <label class=\"input-label\" for=\"input\">\n                  ${this.label}\n                  ${\n                    this.required\n                      ? html`<span class=\"input-required\">*</span>`\n                      : ''\n                  }\n                </label>\n              `\n            : ''\n        }\n\n        <input\n          part=\"input\"\n          id=\"input\"\n          class=\"input input--${variant} input--${this.size}\"\n          type=${this.type}\n          .value=${live(this.value)}\n          placeholder=${ifDefined(this.placeholder)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          ?readonly=${this.readonly}\n          name=${ifDefined(this.name)}\n          autocomplete=${ifDefined(this.autocomplete)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          pattern=${ifDefined(this.pattern)}\n          step=${ifDefined(this.step)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          inputmode=${ifDefined(this.inputmode)}\n          aria-invalid=${invalid ? 'true' : 'false'}\n          aria-describedby=${describedBy ?? nothing}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n\n        ${renderFieldMessage(message)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-input': BpInput;\n  }\n}\n"],"mappings":"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"}