@lmvz-ds/components 0.36.0 → 0.36.1

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 (139) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/cjs/aria.constants-DPK5mQEL.js +65 -0
  3. package/cjs/{stencil.util-TjS8_DoU.js → async.util-Dnl6c82X.js} +1 -13
  4. package/cjs/{directional-focus-controller-3uDoin45.js → directional-focus-controller-8Xd_7MHT.js} +1 -1
  5. package/cjs/{element-activation-controller-BWtUKzu2.js → element-activation-controller-DzTUocEO.js} +1 -1
  6. package/cjs/{element.util-CctmBvUY.js → element.util-BlhcwmfR.js} +2 -62
  7. package/cjs/lmvz-action-list.cjs.entry.js +3 -2
  8. package/cjs/lmvz-button-group.cjs.entry.js +2 -1
  9. package/cjs/lmvz-button_2.cjs.entry.js +3 -2
  10. package/cjs/lmvz-checkbox.cjs.entry.js +38 -4
  11. package/cjs/lmvz-components.cjs.js +1 -1
  12. package/cjs/lmvz-datepicker.cjs.entry.js +10 -3
  13. package/cjs/lmvz-header_2.cjs.entry.js +4 -3
  14. package/cjs/lmvz-input.cjs.entry.js +242 -0
  15. package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
  16. package/cjs/lmvz-modal.cjs.entry.js +2 -1
  17. package/cjs/{lmvz-input_2.cjs.entry.js → lmvz-popover.cjs.entry.js} +24 -228
  18. package/cjs/lmvz-radio.cjs.entry.js +61 -3
  19. package/cjs/lmvz-select.cjs.entry.js +423 -16
  20. package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
  21. package/cjs/lmvz-spinner.cjs.entry.js +1 -1
  22. package/cjs/lmvz-tab.cjs.entry.js +1 -1
  23. package/cjs/lmvz-tabs.cjs.entry.js +4 -3
  24. package/cjs/lmvz-toggle.cjs.entry.js +7 -3
  25. package/cjs/loader.cjs.js +1 -1
  26. package/cjs/stencil.util-CBrPLd-F.js +17 -0
  27. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +4 -2
  28. package/collection/components/lmvz-checkbox/lmvz-checkbox.js +68 -8
  29. package/collection/components/lmvz-datepicker/lmvz-datepicker.css +0 -5
  30. package/collection/components/lmvz-datepicker/lmvz-datepicker.js +17 -3
  31. package/collection/components/lmvz-input/lmvz-input.css +1 -1
  32. package/collection/components/lmvz-input/lmvz-input.js +47 -12
  33. package/collection/components/lmvz-popover/lmvz-popover.css +1 -1
  34. package/collection/components/lmvz-popover/lmvz-popover.js +45 -5
  35. package/collection/components/lmvz-radio/lmvz-radio.js +77 -9
  36. package/collection/components/lmvz-select/lmvz-select.css +96 -34
  37. package/collection/components/lmvz-select/lmvz-select.js +412 -21
  38. package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
  39. package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
  40. package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
  41. package/collection/components/lmvz-tabs/lmvz-tabs.js +1 -1
  42. package/collection/components/lmvz-toggle/lmvz-toggle.js +21 -1
  43. package/collection/integration/header-integration/header-integration.js +1 -1
  44. package/collection/styles/fragments/_focus-within.css +2 -2
  45. package/collection/utils/aria/listbox-controller.js +154 -0
  46. package/collection/utils/radio/radio-group-controller.js +17 -0
  47. package/components/lmvz-checkbox.js +1 -1
  48. package/components/lmvz-datepicker.js +1 -1
  49. package/components/lmvz-input.js +1 -1
  50. package/components/lmvz-popover.js +1 -1
  51. package/components/lmvz-radio.js +1 -1
  52. package/components/lmvz-select.js +1 -1
  53. package/components/lmvz-snackbar.js +1 -1
  54. package/components/lmvz-spinner.js +1 -1
  55. package/components/lmvz-tab.js +1 -1
  56. package/components/lmvz-tabs.js +1 -1
  57. package/components/lmvz-toggle.js +1 -1
  58. package/components/p-BApwCp0R.js +1 -0
  59. package/components/p-C5gRiLRR.js +1 -0
  60. package/esm/aria.constants-DIyiticz.js +62 -0
  61. package/esm/{stencil.util-C3QOYC8E.js → async.util-DZj20TV1.js} +1 -13
  62. package/esm/{directional-focus-controller-Bhu7RqYE.js → directional-focus-controller-QukTTWBE.js} +1 -1
  63. package/esm/{element-activation-controller-BuwyVq4A.js → element-activation-controller-dxJZKMag.js} +1 -1
  64. package/esm/{element.util-Bd9JyKJZ.js → element.util-3ydVsxUW.js} +2 -61
  65. package/esm/lmvz-action-list.entry.js +3 -2
  66. package/esm/lmvz-button-group.entry.js +2 -1
  67. package/esm/lmvz-button_2.entry.js +3 -2
  68. package/esm/lmvz-checkbox.entry.js +38 -4
  69. package/esm/lmvz-components.js +1 -1
  70. package/esm/lmvz-datepicker.entry.js +10 -3
  71. package/esm/lmvz-header_2.entry.js +4 -3
  72. package/esm/lmvz-input.entry.js +240 -0
  73. package/esm/lmvz-menuitem.entry.js +3 -2
  74. package/esm/lmvz-modal.entry.js +2 -1
  75. package/esm/{lmvz-input_2.entry.js → lmvz-popover.entry.js} +23 -226
  76. package/esm/lmvz-radio.entry.js +61 -3
  77. package/esm/lmvz-select.entry.js +423 -16
  78. package/esm/lmvz-snackbar.entry.js +1 -1
  79. package/esm/lmvz-spinner.entry.js +1 -1
  80. package/esm/lmvz-tab.entry.js +1 -1
  81. package/esm/lmvz-tabs.entry.js +4 -3
  82. package/esm/lmvz-toggle.entry.js +7 -3
  83. package/esm/loader.js +1 -1
  84. package/esm/stencil.util-D2-5rsN3.js +15 -0
  85. package/hydrate/index.js +625 -68
  86. package/hydrate/index.mjs +625 -68
  87. package/lmvz-components/lmvz-components.esm.js +1 -1
  88. package/lmvz-components/{p-544e3ccb.entry.js → p-0f65d001.entry.js} +1 -1
  89. package/lmvz-components/p-137b1fe1.entry.js +1 -0
  90. package/lmvz-components/p-26dd9684.entry.js +1 -0
  91. package/lmvz-components/p-36f44108.entry.js +1 -0
  92. package/lmvz-components/p-398b5cf4.entry.js +1 -0
  93. package/lmvz-components/p-3a396fc8.entry.js +1 -0
  94. package/lmvz-components/p-40716828.entry.js +1 -0
  95. package/lmvz-components/p-70f1e31a.entry.js +1 -0
  96. package/lmvz-components/p-71d06d1d.entry.js +1 -0
  97. package/lmvz-components/{p-d280d21a.entry.js → p-88661c50.entry.js} +1 -1
  98. package/lmvz-components/p-91eb71bb.entry.js +1 -0
  99. package/lmvz-components/p-BA3wizqg.js +1 -0
  100. package/lmvz-components/{p-GGkwaiT6.js → p-CHxiS3ja.js} +1 -1
  101. package/lmvz-components/{p-UhNgD4L3.js → p-CPSyM_e-.js} +1 -1
  102. package/lmvz-components/p-DIyiticz.js +1 -0
  103. package/lmvz-components/p-DZj20TV1.js +1 -0
  104. package/lmvz-components/p-a680a7b2.entry.js +1 -0
  105. package/lmvz-components/{p-d48203f9.entry.js → p-a6fe9b61.entry.js} +1 -1
  106. package/lmvz-components/{p-dbfbcb74.entry.js → p-a99acb02.entry.js} +1 -1
  107. package/lmvz-components/p-bh9cItsP.js +1 -0
  108. package/lmvz-components/p-f16a19fc.entry.js +1 -0
  109. package/lmvz-components/p-f3f0ed49.entry.js +1 -0
  110. package/lmvz-components/p-f516a949.entry.js +1 -0
  111. package/manifest.json +366 -30
  112. package/package.json +1 -1
  113. package/types/api/ds.types.d.ts +1 -0
  114. package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +9 -1
  115. package/types/components/lmvz-datepicker/lmvz-datepicker.d.ts +2 -0
  116. package/types/components/lmvz-input/lmvz-input.d.ts +3 -0
  117. package/types/components/lmvz-popover/lmvz-popover.d.ts +2 -0
  118. package/types/components/lmvz-radio/lmvz-radio.d.ts +12 -2
  119. package/types/components/lmvz-select/lmvz-select.d.ts +53 -4
  120. package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -0
  121. package/types/components.d.ts +96 -12
  122. package/types/utils/aria/listbox-controller.d.ts +42 -0
  123. package/types/utils/radio/radio-group-controller.d.ts +3 -0
  124. package/components/p-CPuI0_r_.js +0 -1
  125. package/components/p-CWpl0WaZ.js +0 -1
  126. package/lmvz-components/p-63f6a596.entry.js +0 -1
  127. package/lmvz-components/p-8022c6dc.entry.js +0 -1
  128. package/lmvz-components/p-Bd9JyKJZ.js +0 -1
  129. package/lmvz-components/p-C3QOYC8E.js +0 -1
  130. package/lmvz-components/p-a611c110.entry.js +0 -1
  131. package/lmvz-components/p-b1bb4393.entry.js +0 -1
  132. package/lmvz-components/p-b50b1cb5.entry.js +0 -1
  133. package/lmvz-components/p-b932cf91.entry.js +0 -1
  134. package/lmvz-components/p-bff115d4.entry.js +0 -1
  135. package/lmvz-components/p-d9aede81.entry.js +0 -1
  136. package/lmvz-components/p-f0e28f3a.entry.js +0 -1
  137. package/lmvz-components/p-f853faae.entry.js +0 -1
  138. package/lmvz-components/p-fa2efc42.entry.js +0 -1
  139. package/lmvz-components/p-fe6f5bdc.entry.js +0 -1
@@ -0,0 +1,242 @@
1
+ 'use strict';
2
+
3
+ var index = require('./index-BgvZ4y-3.js');
4
+ var index$1 = require('./index-Bp6Dd2i1.js');
5
+ var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
6
+ var aria_constants = require('./aria.constants-DPK5mQEL.js');
7
+ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
8
+ var stencil_util = require('./stencil.util-CBrPLd-F.js');
9
+ require('./aria-loader-DWUVcapD.js');
10
+ require('./async.util-Dnl6c82X.js');
11
+
12
+ const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .sc-lmvz-input-h:has(:focus-visible) .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
13
+
14
+ let inputIdCounter = 0;
15
+ const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
16
+ get el() { return index.getElement(this); }
17
+ get validationEl() {
18
+ return this.el;
19
+ }
20
+ lmvzInput;
21
+ internals;
22
+ inputValidityActive = false;
23
+ nativeInputElement;
24
+ inputId = `lmvz-input-${inputIdCounter++}`;
25
+ initialValue = '';
26
+ ariaHostMirrorObserver;
27
+ nativeError = false;
28
+ errorFromProp = false;
29
+ get helperId() {
30
+ return this.helperText ? `${this.inputId}-helper` : undefined;
31
+ }
32
+ get showErrorMessage() {
33
+ return this.error && Boolean(this.errorMessage);
34
+ }
35
+ get errorId() {
36
+ return `${this.inputId}-error`;
37
+ }
38
+ get describedBy() {
39
+ const ids = [];
40
+ if (this.helperId)
41
+ ids.push(this.helperId);
42
+ if (this.showErrorMessage)
43
+ ids.push(this.errorId);
44
+ return ids.length > 0 ? ids.join(' ') : undefined;
45
+ }
46
+ value;
47
+ label;
48
+ helperText;
49
+ placeholder;
50
+ disabled = false;
51
+ readonly = false;
52
+ required = false;
53
+ name;
54
+ type = 'text';
55
+ errorMessage;
56
+ autocomplete;
57
+ inputmode;
58
+ autocorrect;
59
+ autocapitalize;
60
+ spellcheck;
61
+ autofocus = false;
62
+ minlength;
63
+ maxlength;
64
+ pattern;
65
+ min;
66
+ max;
67
+ step;
68
+ form;
69
+ size = 'md';
70
+ get error() {
71
+ return this.errorFromProp || this.nativeError;
72
+ }
73
+ set error(value) {
74
+ this.errorFromProp = value;
75
+ }
76
+ async setValue(newValue) {
77
+ const input = this.nativeInputElement;
78
+ const val = newValue ?? '';
79
+ if (input && input.value !== val) {
80
+ input.value = val;
81
+ }
82
+ this.value = val;
83
+ this.internals.setFormValue?.(val);
84
+ this.lmvzInput.emit(val);
85
+ }
86
+ async focusInput() {
87
+ this.nativeInputElement?.focus();
88
+ }
89
+ async blurInput() {
90
+ this.nativeInputElement?.blur();
91
+ }
92
+ async select() {
93
+ this.nativeInputElement?.select();
94
+ }
95
+ async checkValidity() {
96
+ return this.nativeInputElement?.checkValidity?.() ?? false;
97
+ }
98
+ async reportValidity() {
99
+ return this.nativeInputElement?.reportValidity?.() ?? false;
100
+ }
101
+ async getValidationMessage() {
102
+ return this.nativeInputElement?.validationMessage ?? '';
103
+ }
104
+ async getInputElement() {
105
+ if (!this.nativeInputElement) {
106
+ await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
107
+ }
108
+ return Promise.resolve(this.nativeInputElement);
109
+ }
110
+ constructor(hostRef) {
111
+ super();
112
+ index.registerInstance(this, hostRef);
113
+ this.lmvzInput = index.createEvent(this, "lmvzInput", 7);
114
+ if (hostRef.$hostElement$["s-ei"]) {
115
+ this.internals = hostRef.$hostElement$["s-ei"];
116
+ }
117
+ else {
118
+ this.internals = hostRef.$hostElement$.attachInternals();
119
+ hostRef.$hostElement$["s-ei"] = this.internals;
120
+ }
121
+ this.addController(new ariaValidationController.AriaValidationController(this, {
122
+ reValidateOnPropChanges: true,
123
+ }));
124
+ }
125
+ componentWillLoad() {
126
+ this.initialValue = this.value ?? '';
127
+ super.componentWillLoad();
128
+ }
129
+ connectedCallback() {
130
+ super.connectedCallback();
131
+ this.ariaHostMirrorObserver = new MutationObserver((mutations) => {
132
+ for (const mutation of mutations) {
133
+ this.mirrorHostAriaAttribute(mutation.attributeName);
134
+ }
135
+ });
136
+ this.ariaHostMirrorObserver.observe(this.el, {
137
+ attributes: true,
138
+ attributeFilter: [...aria_constants.ariaHostMirrorAttributes],
139
+ });
140
+ }
141
+ disconnectedCallback() {
142
+ super.disconnectedCallback();
143
+ this.ariaHostMirrorObserver?.disconnect();
144
+ this.ariaHostMirrorObserver = undefined;
145
+ }
146
+ componentDidLoad() {
147
+ super.componentDidLoad();
148
+ for (const attr of aria_constants.ariaHostMirrorAttributes) {
149
+ this.mirrorHostAriaAttribute(attr);
150
+ }
151
+ }
152
+ mirrorHostAriaAttribute(attr) {
153
+ if (!attr || !this.nativeInputElement)
154
+ return;
155
+ if (this.el.hasAttribute(attr)) {
156
+ const value = this.el.getAttribute(attr);
157
+ if (value !== null) {
158
+ this.nativeInputElement.setAttribute(attr, value);
159
+ }
160
+ }
161
+ else {
162
+ this.nativeInputElement.removeAttribute(attr);
163
+ }
164
+ }
165
+ formAssociatedCallback(form) {
166
+ if (!form)
167
+ return;
168
+ this.internals.setFormValue?.(this.value ?? '');
169
+ }
170
+ formResetCallback() {
171
+ this.inputValidityActive = false;
172
+ this.internals.setValidity({});
173
+ this.setValue(this.initialValue);
174
+ if (this.nativeInputElement?.checkValidity?.()) {
175
+ this.nativeError = false;
176
+ }
177
+ }
178
+ formStateRestoreCallback(state) {
179
+ this.setValue(state);
180
+ }
181
+ handleValueChange(newValue) {
182
+ if (!this.nativeInputElement)
183
+ return;
184
+ const isInternalChange = this.nativeInputElement.value === newValue;
185
+ if (isInternalChange)
186
+ return;
187
+ this.setValue(newValue);
188
+ }
189
+ handleDisabledChange(disabled) {
190
+ if (!this.nativeInputElement)
191
+ return;
192
+ if (disabled) {
193
+ this.nativeInputElement.blur();
194
+ }
195
+ else {
196
+ this.inputValidityActive = false;
197
+ }
198
+ }
199
+ handleInput = (event) => {
200
+ const input = event.target;
201
+ this.setValue(input.value);
202
+ if (!this.inputValidityActive)
203
+ return;
204
+ this.updateNativeError('input');
205
+ };
206
+ handleChange = (event) => {
207
+ };
208
+ handleFocus = () => { };
209
+ handleInvalid = () => this.updateNativeError('invalid');
210
+ handleBlur = () => {
211
+ this.inputValidityActive = true;
212
+ this.updateNativeError('blur');
213
+ };
214
+ updateNativeError(sourceEvent) {
215
+ const input = this.nativeInputElement;
216
+ if (!input)
217
+ return;
218
+ const newState = sourceEvent === 'invalid' ? true : !(input.checkValidity?.() ?? true);
219
+ if (this.nativeError === newState)
220
+ return;
221
+ this.nativeError = newState;
222
+ }
223
+ render() {
224
+ const hasValue = Boolean(this.value);
225
+ const shouldFloatLabel = hasValue || Boolean(this.placeholder);
226
+ return (index.h("div", { key: '626697f00e9ba3ad46e6304d06b04df0f27bb2c2', class: index$1.classNames('input-container', {
227
+ 'interaction-filled': hasValue,
228
+ }) }, index.h("div", { key: '25ec1f448b689ff80defded1323f321d95d6b197', class: "input-wrapper" }, index.h("slot", { key: '1d5f301e0327b4cd1714f403615f94658a754466', name: "before-input" }), index.h("div", { key: 'ef553e6e8f6b74a5bb7cddef003d3b51650c7c9d', class: "label-input-group" }, index.h("label", { key: '17d92ff7c65598739e8a379680580561936e21dc', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: 'cd40da3c85cc6cea49d7d8d270bba317534779f5', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: '3ede0644d383c2a3f702230de2aac6fbcb2c7a06', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), index.h("slot", { key: 'b282c5d9553b72af7fd05ed0f872af0d7b8a5689', name: "after-input" })), index.h("div", { key: 'da6008e798cb5ee29fa7d1ba3208057c1845a217', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '5e7717a2d0dd32c53dd7ba6e170152239f3bfae9', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
229
+ }
230
+ static get formAssociated() { return true; }
231
+ static get watchers() { return {
232
+ "value": [{
233
+ "handleValueChange": 0
234
+ }],
235
+ "disabled": [{
236
+ "handleDisabledChange": 0
237
+ }]
238
+ }; }
239
+ };
240
+ LmvzInput.style = lmvzInputCss();
241
+
242
+ exports.lmvz_input = LmvzInput;
@@ -2,10 +2,11 @@
2
2
 
3
3
  var index = require('./index-BgvZ4y-3.js');
4
4
  var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
5
- var elementActivationController = require('./element-activation-controller-BWtUKzu2.js');
5
+ var elementActivationController = require('./element-activation-controller-DzTUocEO.js');
6
6
  var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
7
7
  require('./aria-loader-DWUVcapD.js');
8
- require('./element.util-CctmBvUY.js');
8
+ require('./element.util-BlhcwmfR.js');
9
+ require('./aria.constants-DPK5mQEL.js');
9
10
 
10
11
  const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-menuitem-h { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); cursor: pointer; --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); background: var(--lmvz-menuitem-background); color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active { --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible { z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h { --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe); --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
11
12
 
@@ -4,10 +4,11 @@ var index = require('./index-BgvZ4y-3.js');
4
4
  var closeSm = require('./close-sm-CATLoxxd.js');
5
5
  var svg = require('./svg-CysxzZw7.js');
6
6
  var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
7
- var element_util = require('./element.util-CctmBvUY.js');
7
+ var element_util = require('./element.util-BlhcwmfR.js');
8
8
  var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
9
9
  require('./logger-NBdKPSou.js');
10
10
  require('./aria-loader-DWUVcapD.js');
11
+ require('./aria.constants-DPK5mQEL.js');
11
12
 
12
13
  const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-20-16, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
13
14
 
@@ -1,226 +1,13 @@
1
1
  'use strict';
2
2
 
3
3
  var index = require('./index-BgvZ4y-3.js');
4
- var index$1 = require('./index-Bp6Dd2i1.js');
5
- var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
6
- var element_util = require('./element.util-CctmBvUY.js');
7
- var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
8
- var stencil_util = require('./stencil.util-TjS8_DoU.js');
9
4
  var ariaLoader = require('./aria-loader-DWUVcapD.js');
10
- var directionalFocusController = require('./directional-focus-controller-3uDoin45.js');
11
- var elementActivationController = require('./element-activation-controller-BWtUKzu2.js');
12
-
13
- const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)); --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
14
-
15
- let inputIdCounter = 0;
16
- const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
17
- get el() { return index.getElement(this); }
18
- get validationEl() {
19
- return this.el;
20
- }
21
- lmvzInput;
22
- internals;
23
- nativeInputElement;
24
- inputId = `lmvz-input-${inputIdCounter++}`;
25
- initialValue = '';
26
- ariaHostMirrorObserver;
27
- nativeError = false;
28
- errorFromProp = false;
29
- get helperId() {
30
- return this.helperText ? `${this.inputId}-helper` : undefined;
31
- }
32
- get showErrorMessage() {
33
- return this.error && Boolean(this.errorMessage);
34
- }
35
- get errorId() {
36
- return `${this.inputId}-error`;
37
- }
38
- get describedBy() {
39
- const ids = [];
40
- if (this.helperId)
41
- ids.push(this.helperId);
42
- if (this.showErrorMessage)
43
- ids.push(this.errorId);
44
- return ids.length > 0 ? ids.join(' ') : undefined;
45
- }
46
- value;
47
- label;
48
- helperText;
49
- placeholder;
50
- disabled = false;
51
- readonly = false;
52
- required = false;
53
- name;
54
- type = 'text';
55
- errorMessage;
56
- autocomplete;
57
- inputmode;
58
- autocorrect;
59
- autocapitalize;
60
- spellcheck;
61
- autofocus = false;
62
- minlength;
63
- maxlength;
64
- pattern;
65
- min;
66
- max;
67
- step;
68
- form;
69
- size = 'md';
70
- get error() {
71
- return this.errorFromProp || this.nativeError;
72
- }
73
- set error(value) {
74
- this.errorFromProp = value;
75
- }
76
- async setValue(newValue) {
77
- const input = this.nativeInputElement;
78
- const val = newValue ?? '';
79
- if (input) {
80
- input.value = val;
81
- }
82
- this.value = val;
83
- this.internals.setFormValue?.(val);
84
- this.lmvzInput.emit(val);
85
- }
86
- async focusInput() {
87
- this.nativeInputElement?.focus();
88
- }
89
- async blurInput() {
90
- this.nativeInputElement?.blur();
91
- }
92
- async select() {
93
- this.nativeInputElement?.select();
94
- }
95
- async checkValidity() {
96
- return this.nativeInputElement?.checkValidity?.() ?? false;
97
- }
98
- async reportValidity() {
99
- return this.nativeInputElement?.reportValidity?.() ?? false;
100
- }
101
- async getInputElement() {
102
- if (!this.nativeInputElement) {
103
- await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
104
- }
105
- return Promise.resolve(this.nativeInputElement);
106
- }
107
- constructor(hostRef) {
108
- super();
109
- index.registerInstance(this, hostRef);
110
- this.lmvzInput = index.createEvent(this, "lmvzInput", 7);
111
- if (hostRef.$hostElement$["s-ei"]) {
112
- this.internals = hostRef.$hostElement$["s-ei"];
113
- }
114
- else {
115
- this.internals = hostRef.$hostElement$.attachInternals();
116
- hostRef.$hostElement$["s-ei"] = this.internals;
117
- }
118
- this.addController(new ariaValidationController.AriaValidationController(this, {
119
- reValidateOnPropChanges: true,
120
- }));
121
- }
122
- componentWillLoad() {
123
- this.initialValue = this.value ?? '';
124
- super.componentWillLoad();
125
- }
126
- connectedCallback() {
127
- super.connectedCallback();
128
- this.ariaHostMirrorObserver = new MutationObserver((mutations) => {
129
- for (const mutation of mutations) {
130
- this.mirrorHostAriaAttribute(mutation.attributeName);
131
- }
132
- });
133
- this.ariaHostMirrorObserver.observe(this.el, {
134
- attributes: true,
135
- attributeFilter: [...element_util.ariaHostMirrorAttributes],
136
- });
137
- }
138
- disconnectedCallback() {
139
- super.disconnectedCallback();
140
- this.ariaHostMirrorObserver?.disconnect();
141
- this.ariaHostMirrorObserver = undefined;
142
- }
143
- componentDidLoad() {
144
- super.componentDidLoad();
145
- for (const attr of element_util.ariaHostMirrorAttributes) {
146
- this.mirrorHostAriaAttribute(attr);
147
- }
148
- }
149
- mirrorHostAriaAttribute(attr) {
150
- if (!attr || !this.nativeInputElement)
151
- return;
152
- if (this.el.hasAttribute(attr)) {
153
- const value = this.el.getAttribute(attr);
154
- if (value !== null) {
155
- this.nativeInputElement.setAttribute(attr, value);
156
- }
157
- }
158
- else {
159
- this.nativeInputElement.removeAttribute(attr);
160
- }
161
- }
162
- formAssociatedCallback(form) {
163
- if (!form)
164
- return;
165
- this.internals.setFormValue?.(this.value ?? '');
166
- }
167
- formResetCallback() {
168
- this.internals.setValidity({});
169
- this.setValue(this.initialValue);
170
- }
171
- formStateRestoreCallback(state) {
172
- this.setValue(state);
173
- }
174
- handleValueChange(newValue) {
175
- if (!this.nativeInputElement)
176
- return;
177
- const isInternalChange = this.nativeInputElement.value === newValue;
178
- if (isInternalChange)
179
- return;
180
- this.setValue(newValue);
181
- }
182
- handleDisabledChange(disabled) {
183
- if (disabled && this.nativeInputElement) {
184
- this.nativeInputElement.blur();
185
- }
186
- }
187
- handleInput = (event) => {
188
- const input = event.target;
189
- this.setValue(input.value);
190
- };
191
- handleChange = (event) => {
192
- const input = event.target ?? this.nativeInputElement;
193
- this.updateNativeError(input);
194
- };
195
- handleFocus = () => { };
196
- handleBlur = (event) => {
197
- const input = event.target;
198
- input.checkValidity?.();
199
- };
200
- updateNativeError(fromEvent) {
201
- const input = fromEvent ?? this.nativeInputElement;
202
- if (!input)
203
- return;
204
- this.nativeError = !(input.checkValidity?.() ?? true);
205
- }
206
- render() {
207
- const hasValue = Boolean(this.value);
208
- const shouldFloatLabel = hasValue || Boolean(this.placeholder);
209
- return (index.h("div", { key: 'b7e432c7dbc598189d85040252455c5163fe6395', class: index$1.classNames('input-container', {
210
- 'interaction-filled': hasValue,
211
- }) }, index.h("div", { key: 'a912a49f4372423d06c7a4856fb5101cb0afd0c5', class: "input-wrapper" }, index.h("slot", { key: '88e4ee4518de0bfeef9e30a254e0d2ec6693048c', name: "before-input" }), index.h("div", { key: 'a413a7b7e8f6510f1c09fd0052889c8fad1653f1', class: "label-input-group" }, index.h("label", { key: '9639713adff74afcf4fb1eab0e74b7447d02b986', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: '28c1069908a2f1905008f1decce9077e9ef1538a', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: '421fd9bb50de8ba189a59578373060593e1a9aab', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("slot", { key: '09557e1d84bb4ab2456caf391a177c8f80063ab9', name: "after-input" })), index.h("div", { key: '34162f744f8584991e4493ebcdb6a2f75a1f8990', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: 'a3c3bffbb439f9127278cedbfefa5e1986e68f23', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
212
- }
213
- static get formAssociated() { return true; }
214
- static get watchers() { return {
215
- "value": [{
216
- "handleValueChange": 0
217
- }],
218
- "disabled": [{
219
- "handleDisabledChange": 0
220
- }]
221
- }; }
222
- };
223
- LmvzInput.style = lmvzInputCss();
5
+ var directionalFocusController = require('./directional-focus-controller-8Xd_7MHT.js');
6
+ var elementActivationController = require('./element-activation-controller-DzTUocEO.js');
7
+ var async_util = require('./async.util-Dnl6c82X.js');
8
+ var element_util = require('./element.util-BlhcwmfR.js');
9
+ require('./reactive-controller-host-Bc6B_T45.js');
10
+ require('./aria.constants-DPK5mQEL.js');
224
11
 
225
12
  /**
226
13
  * Custom positioning reference element.
@@ -1579,7 +1366,7 @@ const computePosition = (reference, floating, options) => {
1579
1366
  });
1580
1367
  };
1581
1368
 
1582
- const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 1);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
1369
+ const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 100);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
1583
1370
 
1584
1371
  const LmvzPopover = class {
1585
1372
  constructor(hostRef) {
@@ -1600,6 +1387,7 @@ const LmvzPopover = class {
1600
1387
  placement = 'bottom-start';
1601
1388
  size = 'sm';
1602
1389
  autoFocus = true;
1390
+ containerRole = 'dialog';
1603
1391
  label;
1604
1392
  lmvzOpen;
1605
1393
  lmvzClose;
@@ -1620,6 +1408,7 @@ const LmvzPopover = class {
1620
1408
  }
1621
1409
  componentDidLoad() {
1622
1410
  autoAssignId(this.el);
1411
+ this.syncContainerId();
1623
1412
  }
1624
1413
  handleOpenChange(isOpen) {
1625
1414
  if (isOpen) {
@@ -1635,7 +1424,7 @@ const LmvzPopover = class {
1635
1424
  this.anchor = undefined;
1636
1425
  return;
1637
1426
  }
1638
- await stencil_util.wait();
1427
+ await async_util.wait();
1639
1428
  this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
1640
1429
  this.setupAnchorEl();
1641
1430
  if (!this.open)
@@ -1646,16 +1435,23 @@ const LmvzPopover = class {
1646
1435
  this.removeCloseHandlers();
1647
1436
  this.extEventController.abort();
1648
1437
  }
1438
+ syncContainerId() {
1439
+ const hostId = this.el.getAttribute('id');
1440
+ if (!hostId || !this.containerEl)
1441
+ return;
1442
+ this.containerEl.id = hostId;
1443
+ }
1649
1444
  setupAnchorEl() {
1650
1445
  const { anchorEl } = this;
1651
1446
  if (!anchorEl) {
1652
1447
  console.warn('no anchor element set for', this);
1653
1448
  return;
1654
1449
  }
1450
+ this.syncContainerId();
1655
1451
  if (!anchorEl.hasAttribute('aria-haspopup')) {
1656
- anchorEl.setAttribute('aria-haspopup', 'dialog');
1452
+ anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
1657
1453
  }
1658
- anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
1454
+ anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
1659
1455
  if (!anchorEl.hasAttribute('aria-expanded')) {
1660
1456
  anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
1661
1457
  }
@@ -1680,13 +1476,14 @@ const LmvzPopover = class {
1680
1476
  async onOpen() {
1681
1477
  this.previouslyFocusedElement = element_util.getDeepActiveElement(document);
1682
1478
  this.setupCloseHandlers();
1683
- await stencil_util.waitFrame();
1479
+ await async_util.waitFrame();
1684
1480
  await this.updatePosition();
1685
1481
  autoAssignId(this.el);
1482
+ this.syncContainerId();
1686
1483
  this.applyAnchorAriaOpen();
1687
1484
  this.lmvzOpen.emit();
1688
- await stencil_util.waitFrame();
1689
- if (this.autoFocus) {
1485
+ await async_util.waitFrame();
1486
+ if (this.autoFocus && this.containerRole === 'dialog') {
1690
1487
  this.focusFirst();
1691
1488
  }
1692
1489
  }
@@ -1761,7 +1558,7 @@ const LmvzPopover = class {
1761
1558
  this.closureController?.abort();
1762
1559
  }
1763
1560
  render() {
1764
- return (index.h(index.Host, { key: 'f996d0a561b8f6d00913b0e2e84ac9711b878f84' }, index.h("div", { key: 'f7fff89cf470a96b0d3d2adce43a92069d754861', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '2263710272a745d74f118fab6d22f0d05319fc74', ref: (el) => (this.slotEl = el) }))));
1561
+ return (index.h(index.Host, { key: '8dadcc766deebc03ea744fd1002078b382bfd48d' }, index.h("div", { key: 'd332714964212db6f5446afb1b8f38ff031a87b9', role: this.containerRole, part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '0fa1d214c8c48942751cbd4759ebc992eacc8f72', ref: (el) => (this.slotEl = el) }))));
1765
1562
  }
1766
1563
  static get watchers() { return {
1767
1564
  "open": [{
@@ -1805,5 +1602,4 @@ function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
1805
1602
  }
1806
1603
  LmvzPopover.style = lmvzPopoverCss();
1807
1604
 
1808
- exports.lmvz_input = LmvzInput;
1809
1605
  exports.lmvz_popover = LmvzPopover;