@viasat/beam-web-components 2.69.0 → 2.70.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/Alert/Alert.d.ts +1 -1
  2. package/Breadcrumbs/Breadcrumbs.js +1 -1
  3. package/Breadcrumbs/BreadcrumbsItem.js +2 -2
  4. package/Breadcrumbs/index.js +1 -1
  5. package/SegmentedControl/SegmentedControlItem.js +1 -1
  6. package/{wip/TextArea → TextArea}/TextArea.d.ts +37 -6
  7. package/{wip/TextArea → TextArea}/TextArea.js +185 -131
  8. package/TextField/TextField.d.ts +10 -4
  9. package/TextField/TextField.js +71 -65
  10. package/Tooltip/Tooltip.js +1 -1
  11. package/chunks/{BreadcrumbsItem.xWwSJgcO.js → BreadcrumbsItem.kovG2GHz.js} +1 -1
  12. package/chunks/{helpers.C43UgSdK.js → helpers.Ds5YZETV.js} +4 -4
  13. package/custom-elements.json +3963 -3205
  14. package/local/{wip/TextArea → TextArea}/TextArea.js +183 -128
  15. package/local/TextField/TextField.js +71 -65
  16. package/local/wip/Form/Form.decorator.js +119 -63
  17. package/local/wip/NativeSelect/NativeSelect.js +79 -82
  18. package/package.json +6 -6
  19. package/vscode.html-custom-data.json +361 -316
  20. package/wip/Form/Form.decorator.d.ts +19 -2
  21. package/wip/Form/Form.decorator.js +119 -63
  22. package/wip/NativeSelect/NativeSelect.d.ts +0 -4
  23. package/wip/NativeSelect/NativeSelect.js +75 -78
  24. /package/{wip/TextArea → TextArea}/index.d.ts +0 -0
  25. /package/{local/wip/TextArea → TextArea}/index.js +0 -0
  26. /package/{wip → local}/TextArea/index.js +0 -0
package/Alert/Alert.d.ts CHANGED
@@ -54,7 +54,7 @@ export declare class BmAlert extends LitElement {
54
54
  disconnectedCallback(): void;
55
55
  firstUpdated(): void;
56
56
  updated(changed: PropertyValues<this>): void;
57
- render(): typeof nothing | import('lit').TemplateResult<1>;
57
+ render(): import('lit').TemplateResult<1> | typeof nothing;
58
58
  }
59
59
  declare global {
60
60
  interface HTMLElementTagNameMap {
package/Breadcrumbs/Breadcrumbs.js CHANGED
@@ -5,7 +5,7 @@ import N from "clsx";
5
5
  import { g as k } from "../chunks/classNames.m6VYRyOu.js";
6
6
  import { t as $ } from "../chunks/constants.ZIKMMCJH.js";
7
7
  import { f as I } from "../chunks/dom.CroF8n1N.js";
8
- import { b as L } from "../chunks/BreadcrumbsItem.xWwSJgcO.js";
8
+ import { b as L } from "../chunks/BreadcrumbsItem.kovG2GHz.js";
9
9
  import { c as O } from "../chunks/register-custom-element.D_kw6JXe.js";
10
10
  import { BreadcrumbGroupCtx as T } from "./Breadcrumbs.context.js";
11
11
  var q = Object.defineProperty, D = Object.getOwnPropertyDescriptor, A = (t) => {
package/Breadcrumbs/BreadcrumbsItem.js CHANGED
@@ -2,10 +2,10 @@ import "@lit/context";
2
2
  import "lit";
3
3
  import "lit/decorators.js";
4
4
  import "lit/directives/unsafe-svg.js";
5
- import { B as c } from "../chunks/BreadcrumbsItem.xWwSJgcO.js";
5
+ import { B as c } from "../chunks/BreadcrumbsItem.kovG2GHz.js";
6
6
  import "../chunks/classNames.m6VYRyOu.js";
7
7
  import "../chunks/register-custom-element.D_kw6JXe.js";
8
- import "../chunks/helpers.C43UgSdK.js";
8
+ import "../chunks/helpers.Ds5YZETV.js";
9
9
  import "./Breadcrumbs.context.js";
10
10
  import "../Link/Link.js";
11
11
  export {
package/Breadcrumbs/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BmBreadcrumbs as e } from "./Breadcrumbs.js";
2
- import { B as o } from "../chunks/BreadcrumbsItem.xWwSJgcO.js";
2
+ import { B as o } from "../chunks/BreadcrumbsItem.kovG2GHz.js";
3
3
  export {
4
4
  e as BmBreadcrumbs,
5
5
  o as BmBreadcrumbsItem
package/SegmentedControl/SegmentedControlItem.js CHANGED
@@ -7,7 +7,7 @@ import { b as T } from "../chunks/constants.ZIKMMCJH.js";
7
7
  import { r as E } from "../chunks/dom.CroF8n1N.js";
8
8
  import { s as $ } from "../chunks/segmentedControl.module.DUw6nBfH.js";
9
9
  import { f as S, c as A } from "../chunks/register-custom-element.D_kw6JXe.js";
10
- import { a as I } from "../chunks/helpers.C43UgSdK.js";
10
+ import { a as I } from "../chunks/helpers.Ds5YZETV.js";
11
11
  import "../Tooltip/Tooltip.js";
12
12
  import { stateLayerStyles as D, stateLayerClassName as N } from "../StateLayer/StateLayer.js";
13
13
  import { segmentedControlContext as k } from "./SegmentedControl.context.js";
package/{wip/TextArea → TextArea}/TextArea.d.ts RENAMED
@@ -1,7 +1,7 @@
1
1
  import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
2
2
  import { Optional } from '@viasat/beam-shared/utils/types';
3
- import { NullableTemplate, FinalizeAssociatedResult } from '../../../utils/mixins/types';
4
- import { FormField } from '../Form/Form.decorator';
3
+ import { NullableTemplate, FinalizeAssociatedResult } from '../../utils/mixins/types';
4
+ import { FormField } from '../wip/Form/Form.decorator';
5
5
  /**
6
6
  * @summary `bm-text-area`
7
7
  *
@@ -32,10 +32,6 @@ export declare class BmTextArea extends FormField {
32
32
  * @default false
33
33
  */
34
34
  hideRequiredMarker: boolean;
35
- /**
36
- * Specify error text and display error state of a TextArea
37
- */
38
- error: Optional<string>;
39
35
  /**
40
36
  * Specify if TextArea displays in a read-only state
41
37
  * @default false
@@ -73,10 +69,45 @@ export declare class BmTextArea extends FormField {
73
69
  * Specify the theme of the TextArea. By default it inherits the theme from the parent
74
70
  */
75
71
  theme: Optional<ThemeTypes>;
72
+ /**
73
+ * Specify the maximum number of characters allowed by the native
74
+ * `<textarea>`. Takes precedence over `maxCount` for the `maxlength`
75
+ * attribute; use `maxCount` to also display the character counter.
76
+ */
77
+ maxLength: Optional<number>;
78
+ /**
79
+ * Specify the minimum number of characters required by the `<textarea>`
80
+ */
81
+ minLength: Optional<number>;
82
+ /**
83
+ * Specify how the `<textarea>` wraps text on form submission (`soft` or `hard`)
84
+ */
85
+ wrap: Optional<string>;
86
+ /**
87
+ * Specify the autocomplete hint for the `<textarea>`
88
+ */
89
+ autocomplete: Optional<string>;
90
+ /**
91
+ * Specify the virtual keyboard type for mobile browsers (e.g. numeric, tel, url)
92
+ */
93
+ inputMode: string;
94
+ /**
95
+ * Specify if the `<textarea>` should receive focus on connect
96
+ * @default false
97
+ */
98
+ autofocus: boolean;
99
+ /**
100
+ * Specify whether the browser checks spelling in the `<textarea>`
101
+ * @default true
102
+ */
103
+ spellcheck: boolean;
76
104
  static styles: import('lit').CSSResult;
77
105
  formFieldCounterRef: import('lit/directives/ref.js').Ref<HTMLSpanElement>;
106
+ protected counterId: string;
78
107
  private _textAreaLabel;
79
108
  private _textAreaHelperText;
109
+ private _hasLabel;
110
+ private _hasHelperText;
80
111
  updated(cP: Map<string, unknown>): void;
81
112
  finalizeAssociatedCallback(value: string): FinalizeAssociatedResult;
82
113
  render(): NullableTemplate;
package/{wip/TextArea → TextArea}/TextArea.js RENAMED
@@ -1,193 +1,247 @@
1
- import { unsafeCSS as R, html as _, nothing as D } from "lit";
2
- import { property as a, queryAssignedElements as j } from "lit/decorators.js";
3
- import { createRef as L, ref as N } from "lit/directives/ref.js";
4
- import I from "clsx";
5
- import { g as W } from "../../chunks/classNames.m6VYRyOu.js";
6
- import { t as V } from "../../chunks/constants.ZIKMMCJH.js";
7
- import { p as b, e as C, c as G } from "../../chunks/register-custom-element.D_kw6JXe.js";
8
- import { r as B } from "../../chunks/delegate.baxDQosr.js";
9
- import { FormField as H } from "../Form/Form.decorator.js";
10
- const k = /* @__PURE__ */ new WeakMap();
11
- async function Z(e) {
12
- const r = e.offsetHeight, i = e.clientHeight, s = r - i;
13
- e.style.overflow = "hidden", e.scrollHeight === i && (e.style.height = "0");
1
+ import { unsafeCSS as V, nothing as s, html as C } from "lit";
2
+ import { property as a, queryAssignedElements as Y, state as E } from "lit/decorators.js";
3
+ import { createRef as G, ref as k } from "lit/directives/ref.js";
4
+ import j from "clsx";
5
+ import { g as B } from "../chunks/classNames.m6VYRyOu.js";
6
+ import { t as Z } from "../chunks/constants.ZIKMMCJH.js";
7
+ import { p as h, e as S, c as A } from "../chunks/register-custom-element.D_kw6JXe.js";
8
+ import { r as O } from "../chunks/delegate.baxDQosr.js";
9
+ import { b as q, s as $ } from "../chunks/helpers.Ds5YZETV.js";
10
+ import { FormField as U } from "../wip/Form/Form.decorator.js";
11
+ import { createId as X } from "../wip/Form/Form.utils.js";
12
+ const T = /* @__PURE__ */ new WeakMap();
13
+ function F(e) {
14
+ const r = e.offsetHeight, m = e.clientHeight, p = r - m;
15
+ e.style.overflow = "hidden", e.scrollHeight === m && (e.style.height = "0");
14
16
  const c = e.scrollHeight;
15
- e.style.height = `${c + s}px`;
17
+ e.style.height = `${c + p}px`;
16
18
  }
17
- const A = (e, r) => {
18
- const i = k.get(e);
19
- if (k.set(e, r), !r) {
20
- i && (e.style.height = "unset", e.style.overflow = "visible");
19
+ const K = (e, r) => {
20
+ const m = T.get(e);
21
+ if (T.set(e, r), !r) {
22
+ m && (e.style.height = "", e.style.overflow = "");
21
23
  return;
22
24
  }
23
- Z(e);
24
- }, O = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-text-area{--bm-label-cursor: pointer;max-width:var(--bm-comp-input-size-field-width);--bm-label-space-bottom: var(--bm-comp-label-space-bottom);--bm-helper-text-space-top: var(--bm-comp-helper-text-space-top)}.bm-text-area--disabled{--bm-label-cursor: not-allowed;--bm-label-pointer-events: auto;--bm-text-field-cursor: not-allowed;--bm-text-field-input-cursor: not-allowed}.bm-text-area--error .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--error .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text);border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg);outline-offset:calc(0px - var(--bm-comp-input-border-width-field-error));outline:var(--bm-comp-input-border-width-field-error) solid var(--bm-comp-input-color-border-error)}.bm-text-area--error .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--read-only .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--read-only .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text);border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-area--read-only .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--disabled .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-disabled)}.bm-text-area--disabled .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text-disabled);border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-area--disabled .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-area--fluid{max-width:100%}@-moz-document url-prefix(){.bm-text-area__field:after{display:none}}.bm-text-area--hide-resize .bm-text-area__field:after{display:none}.bm-text-area--hide-resize .bm-text-area__field .bm-text-area__input{resize:none}.bm-text-area--cols-width{max-width:fit-content}.bm-text-area--cols-width .bm-text-area__field .bm-text-area__input{width:auto}.bm-text-area__header{display:flex;gap:var(--bm-sem-space-50)}.bm-text-area__header .bm-text-area__counter{margin-block-end:auto;margin-inline-start:auto;font:var(--bm-comp-input-typo-character-count);color:var(--bm-comp-input-color-text-placeholder);padding-block-end:var(--bm-comp-label-space-bottom)}.bm-text-area__field{position:relative;cursor:var(--bm-text-field-cursor, default)}.bm-text-area__field:dir(rtl){--bm-resize-icon-flip: -1}.bm-text-area__field:after{content:"";position:absolute;pointer-events:none;width:var(--bm-sem-space-125);height:var(--bm-sem-space-125);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=);-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=);mask-size:cover;mask-position:center;mask-repeat:no-repeat;inset-block-end:var(--bm-sem-space-12);inset-inline-end:var(--bm-sem-space-12);transform:scaleX(var(--bm-resize-icon-flip, 1));background-color:var(--bm-sem-color-icon-secondary)}.bm-text-area__field .bm-text-area__input{width:100%;display:block;resize:vertical;box-sizing:border-box;border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-field);border-width:var(--bm-comp-input-border-width-field-default);color:var(--bm-comp-input-color-text);font:var(--bm-comp-input-typo-md);cursor:var(--bm-text-field-input-cursor, text);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);min-height:var(--bm-comp-input-size-field-text-area-height);padding:var(--bm-comp-input-space-field-y-md) var(--bm-comp-input-space-field-x-md);transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0))}.bm-text-area__field .bm-text-area__input::-webkit-resizer{display:none}.bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area__field .bm-text-area__input:focus{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}';
25
- var q = Object.defineProperty, U = Object.getOwnPropertyDescriptor, S = (e) => {
25
+ F(e);
26
+ }, J = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-alias-color-brand-primary-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-sm: var( --bm-sem-typo-compact-body-sm, 400 .875rem/1rem "Source Sans Pro" );--bm-comp-input-typo-md: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-lg: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);--bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, .25rem);--bm-comp-input-space-field-y-md: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, .75rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);--bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-text-area{--bm-label-cursor: pointer;max-width:var(--bm-comp-input-size-field-width);--bm-label-space-bottom: var(--bm-comp-label-space-bottom);--bm-helper-text-space-top: var(--bm-comp-helper-text-space-top)}.bm-text-area--disabled{--bm-label-cursor: not-allowed;--bm-label-pointer-events: auto;--bm-text-field-cursor: not-allowed;--bm-text-field-input-cursor: not-allowed}.bm-text-area--error .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--error .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text);border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg);outline-offset:calc(0px - var(--bm-comp-input-border-width-field-error));outline:var(--bm-comp-input-border-width-field-error) solid var(--bm-comp-input-color-border-error)}.bm-text-area--error .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--read-only .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--read-only .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text);border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-area--read-only .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area--disabled .bm-text-area__header .bm-text-area__counter{color:var(--bm-comp-input-color-text-disabled)}.bm-text-area--disabled .bm-text-area__field .bm-text-area__input{color:var(--bm-comp-input-color-text-disabled);border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-area--disabled .bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-area--fluid{max-width:100%}@-moz-document url-prefix(){.bm-text-area__field:after{display:none}}.bm-text-area--hide-resize .bm-text-area__field:after{display:none}.bm-text-area--hide-resize .bm-text-area__field .bm-text-area__input{resize:none}.bm-text-area--cols-width{max-width:fit-content}.bm-text-area--cols-width .bm-text-area__field .bm-text-area__input{width:auto}.bm-text-area__header{display:flex;gap:var(--bm-sem-space-50)}.bm-text-area__header .bm-text-area__counter{margin-block-end:auto;margin-inline-start:auto;font:var(--bm-comp-input-typo-character-count);color:var(--bm-comp-input-color-text-placeholder);padding-block-end:var(--bm-comp-label-space-bottom)}.bm-text-area__field{position:relative;cursor:var(--bm-text-field-cursor, default)}.bm-text-area__field:dir(rtl){--bm-resize-icon-flip: -1}.bm-text-area__field:after{content:"";position:absolute;pointer-events:none;width:var(--bm-sem-space-125);height:var(--bm-sem-space-125);-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=);-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=);mask-size:cover;mask-position:center;mask-repeat:no-repeat;inset-block-end:var(--bm-sem-space-12);inset-inline-end:var(--bm-sem-space-12);transform:scaleX(var(--bm-resize-icon-flip, 1));background-color:var(--bm-sem-color-icon-secondary)}.bm-text-area__field .bm-text-area__input{width:100%;display:block;resize:vertical;box-sizing:border-box;border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-field);border-width:var(--bm-comp-input-border-width-field-default);color:var(--bm-comp-input-color-text);font:var(--bm-comp-input-typo-md);cursor:var(--bm-text-field-input-cursor, text);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);min-height:var(--bm-comp-input-size-field-text-area-height);padding:var(--bm-comp-input-space-field-y-md) var(--bm-comp-input-space-field-x-md);transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0))}.bm-text-area__field .bm-text-area__input::-webkit-resizer{display:none}.bm-text-area__field .bm-text-area__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-area__field .bm-text-area__input:focus{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}';
27
+ var Q = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, L = (e) => {
26
28
  throw TypeError(e);
27
- }, m = (e, r, i, s) => {
28
- for (var c = s > 1 ? void 0 : s ? U(r, i) : r, n = e.length - 1, u; n >= 0; n--)
29
- (u = e[n]) && (c = (s ? u(r, i, c) : u(c)) || c);
30
- return s && c && q(r, i, c), c;
31
- }, X = (e, r, i) => r.has(e) || S("Cannot " + i), o = (e, r, i) => (X(e, r, "read from private field"), i ? i.call(e) : r.get(e)), p = (e, r, i) => r.has(e) ? S("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, i), l, h, z, v, M, f, g, y, w;
32
- const { baseClassNamePrefix: F, subElementClassPrefix: x, classModifierPrefix: d } = W("text-area");
33
- let t = class extends H {
29
+ }, i = (e, r, m, p) => {
30
+ for (var c = p > 1 ? void 0 : p ? ee(r, m) : r, b = e.length - 1, d; b >= 0; b--)
31
+ (d = e[b]) && (c = (p ? d(r, m, c) : d(c)) || c);
32
+ return p && c && Q(r, m, c), c;
33
+ }, re = (e, r, m) => r.has(e) || L("Cannot " + m), t = (e, r, m) => (re(e, r, "read from private field"), m ? m.call(e) : r.get(e)), l = (e, r, m) => r.has(e) ? L("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, m), n, f, M, v, y, _, w, g, x, N, I;
34
+ const { baseClassNamePrefix: oe, subElementClassPrefix: z, classModifierPrefix: u } = B("text-area");
35
+ let o = class extends U {
34
36
  constructor() {
35
- super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.hideResize = !1, this.autoResize = !1, this.formFieldCounterRef = L(), p(this, l, () => {
37
+ super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.hideResize = !1, this.autoResize = !1, this.inputMode = "text", this.autofocus = !1, this.spellcheck = !0, this.formFieldCounterRef = G(), this.counterId = X(), this._hasLabel = !1, this._hasHelperText = !1, l(this, n, () => {
36
38
  var e;
37
39
  return !!(this.disabled || (e = this.formContext) != null && e.disabled);
38
- }), p(this, h, () => {
40
+ }), l(this, f, () => {
39
41
  var e;
40
42
  return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
41
- }), p(this, z, () => {
43
+ }), l(this, M, () => {
42
44
  var e;
43
45
  return !!(this.required || (e = this.formContext) != null && e.required);
44
- }), p(this, v, () => !!this.autoResize), p(this, M, () => o(this, v).call(this) || !!this.hideResize), p(this, f, () => {
46
+ }), l(this, v, () => !!this.autoResize), l(this, y, () => t(this, v).call(this) || !!this.hideResize), l(this, _, ({ target: e }) => {
47
+ this._hasLabel = $(e);
48
+ }), l(this, w, ({ target: e }) => {
49
+ this._hasHelperText = $(e);
50
+ }), l(this, g, () => {
45
51
  const { value: e } = this.formFieldCounterRef;
46
52
  if (!e) return;
47
53
  const { value: r } = this.formFieldRef, {
48
- value: { length: i }
54
+ value: { length: m }
49
55
  } = r;
50
- e.textContent = `${i}`;
51
- }), p(this, g, () => {
56
+ e.textContent = `${m}`;
57
+ }), l(this, x, () => {
52
58
  const { value: e } = this.formFieldRef;
53
- A(e, o(this, v).call(this));
54
- }), p(this, y, (e) => {
55
- o(this, f).call(this), o(this, g).call(this), this.validateFieldOnChange(e);
56
- }), p(this, w, (e) => e ? _`
57
- <div class="${x}counter">
58
- <span ${N(this.formFieldCounterRef)}></span>/<span>${e}</span>
59
+ K(e, t(this, v).call(this));
60
+ }), l(this, N, (e) => {
61
+ t(this, g).call(this), t(this, x).call(this), this.validateFieldOnChange(e);
62
+ }), l(this, I, (e) => e ? C`
63
+ <div class="${z}counter" id="${this.counterId}">
64
+ <span ${k(this.formFieldCounterRef)}></span>/<span>${e}</span>
59
65
  </div>
60
- ` : D);
66
+ ` : s);
61
67
  }
62
68
  updated(e) {
63
- const [r] = this._textAreaLabel, [i] = this._textAreaHelperText, { decorate: s } = C(r), { decorate: c } = C(i), n = b(e, ["value"]), u = b(e, ["maxCount"]), T = b(e, ["autoResize"]), Y = b(e, ["validationRules"]), P = b(e, ["formContext", "disabled"]), E = b(e, [
69
+ super.updated(e);
70
+ const [r] = this._textAreaLabel, [m] = this._textAreaHelperText, { decorate: p } = S(r), { decorate: c } = S(m), b = h(e, ["value"]), d = h(e, ["maxCount"]), P = h(e, ["autoResize"]), R = h(e, ["validationRules"]), W = h(e, ["formContext", "disabled"]), D = h(e, [
64
71
  "formContext",
65
72
  "required",
66
73
  "hideRequiredMarker"
67
- ]), $ = b(e, ["formContext"]) && this.contextInitialsChanged();
68
- (n || $) && this.setContextValue(), P && (s({ disabled: o(this, l).call(this) }), c({ disabled: o(this, l).call(this) })), u && o(this, f).call(this), T && o(this, g).call(this), Y && this.setContextValidation(), E && s({ required: o(this, z).call(this) && !this.hideRequiredMarker });
74
+ ]), H = h(e, ["formContext"]) && this.contextInitialsChanged();
75
+ (b || H) && this.setContextValue(), W && (p({ disabled: t(this, n).call(this) }), c({ disabled: t(this, n).call(this) })), d && t(this, g).call(this), P && t(this, x).call(this), R && this.setContextValidation(), D && p({ required: t(this, M).call(this) && !this.hideRequiredMarker });
69
76
  }
70
77
  finalizeAssociatedCallback(e) {
71
- return {
72
- ctxValue: e.slice(0, this.maxCount),
78
+ let r = e.slice(0, this.maxLength ?? this.maxCount);
79
+ const m = r.charCodeAt(r.length - 1);
80
+ return m >= 55296 && m <= 56319 && (r = r.slice(0, -1)), {
81
+ ctxValue: r,
73
82
  finalizeCallback: () => {
74
- o(this, f).call(this), o(this, g).call(this);
83
+ t(this, g).call(this), t(this, x).call(this);
75
84
  }
76
85
  };
77
86
  }
78
87
  render() {
79
- const { ariaInvalid: e } = this, { length: r } = this.validationErrors(), i = typeof this.error == "string" || !!r, s = I(
80
- this.helperTextId,
81
- this.error && this.errorId,
88
+ const { ariaInvalid: e } = this, { length: r } = this.validationErrors(), { invalid: m, errorMessage: p } = this.resolveError(), c = m || !!r, b = j(
89
+ !!this.maxCount && this.counterId,
90
+ this._hasHelperText && this.helperTextId,
91
+ !!p && this.errorId,
82
92
  this.validationErrorShown() && this.validationErrorsId
83
- ), c = I(
84
- F,
85
- i && `${d}error`,
86
- this.theme && V(this.theme),
87
- this.fluid && `${d}fluid`,
88
- this.cols && `${d}cols-width`,
89
- o(this, l).call(this) && `${d}disabled`,
90
- o(this, h).call(this) && `${d}read-only`,
91
- o(this, M).call(this) && `${d}hide-resize`,
92
- o(this, v).call(this) && `${d}auto-resize`
93
+ ), d = j(
94
+ oe,
95
+ c && `${u}error`,
96
+ this.theme && Z(this.theme),
97
+ this.fluid && `${u}fluid`,
98
+ this.cols && `${u}cols-width`,
99
+ t(this, n).call(this) && `${u}disabled`,
100
+ t(this, f).call(this) && `${u}read-only`,
101
+ t(this, y).call(this) && `${u}hide-resize`,
102
+ t(this, v).call(this) && `${u}auto-resize`
93
103
  );
94
- return _`
95
- <div class="${c}" style="max-width: ${this.width}">
96
- <div class="${x}header">
97
- <slot name="label" id="${this.labelId}"></slot>
98
- ${o(this, w).call(this, this.maxCount)}
104
+ return C`
105
+ <div
106
+ class="${d}"
107
+ style="${this.width ? `max-width: ${this.width}` : s}"
108
+ >
109
+ <div class="${z}header">
110
+ <slot
111
+ name="label"
112
+ id="${this.labelId}"
113
+ @slotchange="${t(this, _)}"
114
+ ></slot>
115
+ ${t(this, I).call(this, this.maxCount)}
99
116
  </div>
100
- <div class="${x}field">
117
+ <div class="${z}field">
101
118
  <textarea
102
119
  id="${this.id}"
103
120
  name="${this.name}"
104
- rows="${this.rows}"
105
- cols="${this.cols}"
106
- ${N(this.formFieldRef)}
107
- maxlength="${this.maxCount}"
108
- @input="${o(this, y)}"
109
- ?required="${o(this, z).call(this)}"
110
- ?readonly="${o(this, h).call(this)}"
111
- ?disabled="${o(this, l).call(this)}"
112
- placeholder="${this.placeholder}"
113
- aria-labelledby="${this.labelId}"
114
- aria-label="${this.inputAriaLabel}"
121
+ rows="${this.rows ?? s}"
122
+ cols="${this.cols ?? s}"
123
+ wrap="${this.wrap ?? s}"
124
+ ${k(this.formFieldRef)}
125
+ minlength="${this.minLength ?? s}"
126
+ maxlength="${this.maxLength ?? this.maxCount ?? s}"
127
+ autocomplete="${this.autocomplete ?? s}"
128
+ inputmode="${this.inputMode}"
129
+ ?autofocus="${this.autofocus}"
130
+ spellcheck="${this.spellcheck}"
131
+ @input="${t(this, N)}"
132
+ ?required="${t(this, M).call(this)}"
133
+ ?readonly="${t(this, f).call(this)}"
134
+ ?disabled="${t(this, n).call(this)}"
135
+ placeholder="${this.placeholder ?? s}"
136
+ aria-labelledby="${this._hasLabel ? this.labelId : s}"
137
+ aria-label="${this.inputAriaLabel ?? s}"
115
138
  @blur="${this.validateFieldOnBlur}"
116
- aria-describedby="${s}"
117
- class="${x}input"
118
- aria-invalid="${e || i}"
119
- aria-disabled="${o(this, l).call(this) || o(this, h).call(this)}"
139
+ aria-describedby="${b || s}"
140
+ class="${z}input"
141
+ aria-invalid="${c || e || s}"
142
+ aria-readonly="${t(this, f).call(this)}"
143
+ aria-disabled="${t(this, n).call(this)}"
120
144
  ></textarea>
121
145
  </div>
122
- <slot name="helper-text" id="${this.helperTextId}"></slot>
123
- ${this.renderError(this.error, o(this, l).call(this))}
146
+ <slot
147
+ name="helper-text"
148
+ id="${this.helperTextId}"
149
+ @slotchange="${t(this, w)}"
150
+ ></slot>
151
+ ${this.renderError(p, t(this, n).call(this))}
124
152
  ${this.renderValidationErrors()}
125
153
  </div>
126
154
  `;
127
155
  }
128
156
  };
129
- l = /* @__PURE__ */ new WeakMap();
130
- h = /* @__PURE__ */ new WeakMap();
131
- z = /* @__PURE__ */ new WeakMap();
132
- v = /* @__PURE__ */ new WeakMap();
133
- M = /* @__PURE__ */ new WeakMap();
157
+ n = /* @__PURE__ */ new WeakMap();
134
158
  f = /* @__PURE__ */ new WeakMap();
135
- g = /* @__PURE__ */ new WeakMap();
159
+ M = /* @__PURE__ */ new WeakMap();
160
+ v = /* @__PURE__ */ new WeakMap();
136
161
  y = /* @__PURE__ */ new WeakMap();
162
+ _ = /* @__PURE__ */ new WeakMap();
137
163
  w = /* @__PURE__ */ new WeakMap();
138
- B(t);
139
- t.styles = R(O);
140
- m([
164
+ g = /* @__PURE__ */ new WeakMap();
165
+ x = /* @__PURE__ */ new WeakMap();
166
+ N = /* @__PURE__ */ new WeakMap();
167
+ I = /* @__PURE__ */ new WeakMap();
168
+ O(o);
169
+ o.styles = V(J);
170
+ i([
141
171
  a({ type: Number })
142
- ], t.prototype, "rows", 2);
143
- m([
172
+ ], o.prototype, "rows", 2);
173
+ i([
144
174
  a({ type: Number })
145
- ], t.prototype, "cols", 2);
146
- m([
175
+ ], o.prototype, "cols", 2);
176
+ i([
147
177
  a({ type: String })
148
- ], t.prototype, "placeholder", 2);
149
- m([
178
+ ], o.prototype, "placeholder", 2);
179
+ i([
150
180
  a({ type: Boolean })
151
- ], t.prototype, "required", 2);
152
- m([
181
+ ], o.prototype, "required", 2);
182
+ i([
153
183
  a({ type: Boolean })
154
- ], t.prototype, "hideRequiredMarker", 2);
155
- m([
156
- a({ type: String })
157
- ], t.prototype, "error", 2);
158
- m([
184
+ ], o.prototype, "hideRequiredMarker", 2);
185
+ i([
159
186
  a({ type: Boolean })
160
- ], t.prototype, "readOnly", 2);
161
- m([
187
+ ], o.prototype, "readOnly", 2);
188
+ i([
162
189
  a({ type: Boolean })
163
- ], t.prototype, "disabled", 2);
164
- m([
190
+ ], o.prototype, "disabled", 2);
191
+ i([
165
192
  a({ type: Boolean })
166
- ], t.prototype, "fluid", 2);
167
- m([
193
+ ], o.prototype, "fluid", 2);
194
+ i([
168
195
  a({ type: String })
169
- ], t.prototype, "width", 2);
170
- m([
196
+ ], o.prototype, "width", 2);
197
+ i([
171
198
  a({ type: Boolean })
172
- ], t.prototype, "hideResize", 2);
173
- m([
199
+ ], o.prototype, "hideResize", 2);
200
+ i([
174
201
  a({ type: Number })
175
- ], t.prototype, "maxCount", 2);
176
- m([
202
+ ], o.prototype, "maxCount", 2);
203
+ i([
177
204
  a({ type: Boolean })
178
- ], t.prototype, "autoResize", 2);
179
- m([
205
+ ], o.prototype, "autoResize", 2);
206
+ i([
180
207
  a({ type: String })
181
- ], t.prototype, "theme", 2);
182
- m([
183
- j({ slot: "label" })
184
- ], t.prototype, "_textAreaLabel", 2);
185
- m([
186
- j({ slot: "helper-text" })
187
- ], t.prototype, "_textAreaHelperText", 2);
188
- t = m([
189
- G("bm-text-area")
190
- ], t);
208
+ ], o.prototype, "theme", 2);
209
+ i([
210
+ a({ type: Number })
211
+ ], o.prototype, "maxLength", 2);
212
+ i([
213
+ a({ type: Number })
214
+ ], o.prototype, "minLength", 2);
215
+ i([
216
+ a({ type: String })
217
+ ], o.prototype, "wrap", 2);
218
+ i([
219
+ a({ type: String })
220
+ ], o.prototype, "autocomplete", 2);
221
+ i([
222
+ a({ type: String })
223
+ ], o.prototype, "inputMode", 2);
224
+ i([
225
+ a({ type: Boolean })
226
+ ], o.prototype, "autofocus", 2);
227
+ i([
228
+ a({ type: Boolean, converter: q })
229
+ ], o.prototype, "spellcheck", 2);
230
+ i([
231
+ Y({ slot: "label" })
232
+ ], o.prototype, "_textAreaLabel", 2);
233
+ i([
234
+ Y({ slot: "helper-text" })
235
+ ], o.prototype, "_textAreaHelperText", 2);
236
+ i([
237
+ E()
238
+ ], o.prototype, "_hasLabel", 2);
239
+ i([
240
+ E()
241
+ ], o.prototype, "_hasHelperText", 2);
242
+ o = i([
243
+ A("bm-text-area")
244
+ ], o);
191
245
  export {
192
- t as BmTextArea
246
+ o as BmTextArea
193
247
  };
package/TextField/TextField.d.ts CHANGED
@@ -25,10 +25,6 @@ export declare class BmTextField extends FormField {
25
25
  * Specify if the TextField displays with an asterisk
26
26
  */
27
27
  hideRequiredMarker: boolean;
28
- /**
29
- * Specify error text and display error state of a TextField
30
- */
31
- error: Optional<string>;
32
28
  /**
33
29
  * Specify if TextField displays in a read-only state
34
30
  */
@@ -65,6 +61,16 @@ export declare class BmTextField extends FormField {
65
61
  * Specify the virtual keyboard type for mobile browsers (e.g. numeric, tel, url)
66
62
  */
67
63
  inputMode: string;
64
+ /**
65
+ * Specify if the `<input>` should receive focus on connect
66
+ * @default false
67
+ */
68
+ autofocus: boolean;
69
+ /**
70
+ * Specify whether the browser checks spelling in the `<input>`
71
+ * @default true
72
+ */
73
+ spellcheck: boolean;
68
74
  static styles: import('lit').CSSResult;
69
75
  private _textFieldLabel;
70
76
  private _textFieldHelperText;