@vialiq/web-components 0.5.0 → 0.6.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.
- package/button/index.js +1 -0
- package/checkbox/vi-checkbox.d.ts.map +1 -1
- package/checkbox/vi-checkbox.js +18 -2
- package/if-non-empty-DX8UGa-B.js +64 -0
- package/index.d.ts +3 -1
- package/index.js +1 -0
- package/input/index.js +1 -0
- package/input/vi-input.d.ts.map +1 -1
- package/input/vi-input.js +5 -64
- package/package.json +19 -3
- package/radio/vi-radio-group.d.ts.map +1 -1
- package/radio/vi-radio-group.js +21 -2
- package/radio/vi-radio.js +1 -1
package/button/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ViButton } from './vi-button.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IACvD,OAAO,CAAC,eAAe,CAAS;IAEhC,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"vi-checkbox.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/checkbox/vi-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAErD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAAwC;IACtE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IACvD,OAAO,CAAC,eAAe,CAAS;IAEhC,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,qBAAqB;IACuB,QAAQ,CAAC,OAAO,UAAS;IAErE,qCAAqC;IACO,QAAQ,CAAC,aAAa,UAAS;IAE3E,0DAA0D;IACf,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAQ;IAE9E,0CAA0C;IAC9B,QAAQ,CAAC,KAAK,SAAQ;IAElC,uBAAuB;IACX,QAAQ,CAAC,IAAI,SAAM;IAE/B,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAItE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA0B7C,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,SAAS;IAmBR,MAAM,IAAI,cAAc;CA0ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/checkbox/vi-checkbox.js
CHANGED
|
@@ -535,8 +535,24 @@ new class extends _identity {
|
|
|
535
535
|
}
|
|
536
536
|
// ── ValidityMixin hook ───────────────────────────────────────────────────
|
|
537
537
|
_testValidity() {
|
|
538
|
-
|
|
539
|
-
|
|
538
|
+
const input = this._focusableElement;
|
|
539
|
+
if (input) {
|
|
540
|
+
if (input.checked !== this.checked) {
|
|
541
|
+
input.checked = this.checked;
|
|
542
|
+
}
|
|
543
|
+
const validity = input.validity;
|
|
544
|
+
if (!validity.valid) {
|
|
545
|
+
this.validityMessage = input.validationMessage;
|
|
546
|
+
return {
|
|
547
|
+
valueMissing: validity.valueMissing,
|
|
548
|
+
customError: validity.customError
|
|
549
|
+
};
|
|
550
|
+
}
|
|
551
|
+
} else if (this.required && !this.checked) {
|
|
552
|
+
const temp = document.createElement('input');
|
|
553
|
+
temp.type = 'checkbox';
|
|
554
|
+
temp.required = true;
|
|
555
|
+
this.validityMessage = temp.validationMessage;
|
|
540
556
|
return {
|
|
541
557
|
valueMissing: true
|
|
542
558
|
};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* ifNonEmpty — conditional attribute directive
|
|
5
|
+
*
|
|
6
|
+
* A wrapper around Lit's `ifDefined` that additionally removes the attribute
|
|
7
|
+
* when the value is an empty string. Use this for every optional string
|
|
8
|
+
* attribute on inner native elements where `""` and "absent" have different
|
|
9
|
+
* meaning for browsers and screen readers.
|
|
10
|
+
*
|
|
11
|
+
* Problem with raw `ifDefined`:
|
|
12
|
+
* - `ifDefined(undefined)` → removes the attribute ✅
|
|
13
|
+
* - `ifDefined(null)` → removes the attribute ✅
|
|
14
|
+
* - `ifDefined('')` → sets attribute to "" ❌
|
|
15
|
+
*
|
|
16
|
+
* With `ifNonEmpty`:
|
|
17
|
+
* - `ifNonEmpty(undefined)` → removes the attribute ✅
|
|
18
|
+
* - `ifNonEmpty(null)` → removes the attribute ✅
|
|
19
|
+
* - `ifNonEmpty('')` → removes the attribute ✅
|
|
20
|
+
* - `ifNonEmpty('hello')` → sets attribute to "hello" ✅
|
|
21
|
+
*
|
|
22
|
+
* Why it matters — real screen reader / browser bugs caused by `=""`:
|
|
23
|
+
* - `placeholder=""` → JAWS/NVDA still announce it as an empty placeholder
|
|
24
|
+
* - `aria-label=""` → NVDA reads "blank" instead of deriving the name elsewhere
|
|
25
|
+
* - `aria-describedby=""`→ browsers may still look for id="" element
|
|
26
|
+
* - `title=""` → browsers show an empty tooltip on hover in some engines
|
|
27
|
+
*
|
|
28
|
+
* ---
|
|
29
|
+
*
|
|
30
|
+
* USAGE
|
|
31
|
+
*
|
|
32
|
+
* Import in any shadow template that has optional string attributes:
|
|
33
|
+
*
|
|
34
|
+
* import { ifNonEmpty } from '../base/if-non-empty.js';
|
|
35
|
+
*
|
|
36
|
+
* In the template:
|
|
37
|
+
*
|
|
38
|
+
* // ✅ Use ifNonEmpty for optional string attributes on inner native elements
|
|
39
|
+
* <input
|
|
40
|
+
* placeholder=${ifNonEmpty(this.placeholder)}
|
|
41
|
+
* aria-label=${ifNonEmpty(this.label)}
|
|
42
|
+
* aria-describedby=${ifNonEmpty(this._descriptionId)}
|
|
43
|
+
* />
|
|
44
|
+
*
|
|
45
|
+
* // ❌ Do NOT use for boolean attributes — Lit has ?attr=${bool} for that
|
|
46
|
+
* // ❌ Do NOT use for property bindings — Lit has .prop=${val} for that
|
|
47
|
+
* // ❌ Do NOT use for event bindings — Lit has @event=${handler} for that
|
|
48
|
+
*
|
|
49
|
+
* ---
|
|
50
|
+
*
|
|
51
|
+
* WHEN TO USE vs NOT USE
|
|
52
|
+
*
|
|
53
|
+
* Use ifNonEmpty when:
|
|
54
|
+
* - The attribute is optional (component has a prop that defaults to '')
|
|
55
|
+
* - The inner native element is a standard HTML element (input, button, a, etc.)
|
|
56
|
+
* - The attribute has accessibility or UI meaning when absent vs present
|
|
57
|
+
*
|
|
58
|
+
* Skip ifNonEmpty when:
|
|
59
|
+
* - The attribute is always required (e.g. type="button" is never absent)
|
|
60
|
+
* - You need the attribute to literally be "" (rare, document when intentional)
|
|
61
|
+
* - The binding is to a custom element property — use .prop=${val} instead
|
|
62
|
+
*/ const ifNonEmpty = (value)=>ifDefined(value === '' ? undefined : value ?? undefined);
|
|
63
|
+
|
|
64
|
+
export { ifNonEmpty as i };
|
package/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { ViElement } from './base/vi-element.js';
|
|
|
2
2
|
export type { ViSize, ViStatus } from './base/vi-element.js';
|
|
3
3
|
export type { ControlStatus } from './base/validity-mixin.js';
|
|
4
4
|
export { ViButton } from './button/vi-button.js';
|
|
5
|
-
export type { ButtonVariant, ButtonSize, ButtonIconPlacement } from './button/vi-button.js';
|
|
5
|
+
export type { ButtonVariant, ButtonSize, ButtonIconPlacement, } from './button/vi-button.js';
|
|
6
6
|
export { ViInput } from './input/vi-input.js';
|
|
7
7
|
export type { InputType, InputSize } from './input/vi-input.js';
|
|
8
8
|
export { ViIcon } from './icons/vi-icon.js';
|
|
@@ -16,4 +16,6 @@ export { ViCheckbox } from './checkbox/vi-checkbox.js';
|
|
|
16
16
|
export type { CheckboxSize } from './checkbox/vi-checkbox.js';
|
|
17
17
|
export { ViTooltip } from './tooltip/vi-tooltip.js';
|
|
18
18
|
export type { TooltipPlacement, TooltipTrigger } from './tooltip/vi-tooltip.js';
|
|
19
|
+
export { ViTextarea } from './textarea/vi-textarea.js';
|
|
20
|
+
export type { TextareaResize } from './textarea/vi-textarea.js';
|
|
19
21
|
//# sourceMappingURL=index.d.ts.map
|
package/index.js
CHANGED
|
@@ -7,3 +7,4 @@ export { ViRadio } from './radio/vi-radio.js';
|
|
|
7
7
|
export { ViRadioGroup } from './radio/vi-radio-group.js';
|
|
8
8
|
export { ViCheckbox } from './checkbox/vi-checkbox.js';
|
|
9
9
|
export { ViTooltip } from './tooltip/vi-tooltip.js';
|
|
10
|
+
export { ViTextarea } from './textarea/vi-textarea.js';
|
package/input/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ViInput } from './vi-input.js';
|
package/input/vi-input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAEtE,+BAA+B;IACQ,QAAQ,CAAC,SAAS,SAAM;IAE/D,uDAAuD;IACX,QAAQ,CAAC,cAAc,SAAM;IAOzE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAEtE,+BAA+B;IACQ,QAAQ,CAAC,SAAS,SAAM;IAE/D,uDAAuD;IACX,QAAQ,CAAC,cAAc,SAAM;IAOzE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAqC7C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAU/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAMzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAejB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,kBAAkB,GAgB7B;IAEQ,MAAM,IAAI,cAAc;CAoClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
package/input/vi-input.js
CHANGED
|
@@ -3,70 +3,9 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
3
3
|
import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
|
|
4
4
|
import { V as ValidityMixin } from '../validity-mixin-BjmXwgWk.js';
|
|
5
5
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
6
|
-
import {
|
|
6
|
+
import { i as ifNonEmpty } from '../if-non-empty-DX8UGa-B.js';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
* ifNonEmpty — conditional attribute directive
|
|
10
|
-
*
|
|
11
|
-
* A wrapper around Lit's `ifDefined` that additionally removes the attribute
|
|
12
|
-
* when the value is an empty string. Use this for every optional string
|
|
13
|
-
* attribute on inner native elements where `""` and "absent" have different
|
|
14
|
-
* meaning for browsers and screen readers.
|
|
15
|
-
*
|
|
16
|
-
* Problem with raw `ifDefined`:
|
|
17
|
-
* - `ifDefined(undefined)` → removes the attribute ✅
|
|
18
|
-
* - `ifDefined(null)` → removes the attribute ✅
|
|
19
|
-
* - `ifDefined('')` → sets attribute to "" ❌
|
|
20
|
-
*
|
|
21
|
-
* With `ifNonEmpty`:
|
|
22
|
-
* - `ifNonEmpty(undefined)` → removes the attribute ✅
|
|
23
|
-
* - `ifNonEmpty(null)` → removes the attribute ✅
|
|
24
|
-
* - `ifNonEmpty('')` → removes the attribute ✅
|
|
25
|
-
* - `ifNonEmpty('hello')` → sets attribute to "hello" ✅
|
|
26
|
-
*
|
|
27
|
-
* Why it matters — real screen reader / browser bugs caused by `=""`:
|
|
28
|
-
* - `placeholder=""` → JAWS/NVDA still announce it as an empty placeholder
|
|
29
|
-
* - `aria-label=""` → NVDA reads "blank" instead of deriving the name elsewhere
|
|
30
|
-
* - `aria-describedby=""`→ browsers may still look for id="" element
|
|
31
|
-
* - `title=""` → browsers show an empty tooltip on hover in some engines
|
|
32
|
-
*
|
|
33
|
-
* ---
|
|
34
|
-
*
|
|
35
|
-
* USAGE
|
|
36
|
-
*
|
|
37
|
-
* Import in any shadow template that has optional string attributes:
|
|
38
|
-
*
|
|
39
|
-
* import { ifNonEmpty } from '../base/if-non-empty.js';
|
|
40
|
-
*
|
|
41
|
-
* In the template:
|
|
42
|
-
*
|
|
43
|
-
* // ✅ Use ifNonEmpty for optional string attributes on inner native elements
|
|
44
|
-
* <input
|
|
45
|
-
* placeholder=${ifNonEmpty(this.placeholder)}
|
|
46
|
-
* aria-label=${ifNonEmpty(this.label)}
|
|
47
|
-
* aria-describedby=${ifNonEmpty(this._descriptionId)}
|
|
48
|
-
* />
|
|
49
|
-
*
|
|
50
|
-
* // ❌ Do NOT use for boolean attributes — Lit has ?attr=${bool} for that
|
|
51
|
-
* // ❌ Do NOT use for property bindings — Lit has .prop=${val} for that
|
|
52
|
-
* // ❌ Do NOT use for event bindings — Lit has @event=${handler} for that
|
|
53
|
-
*
|
|
54
|
-
* ---
|
|
55
|
-
*
|
|
56
|
-
* WHEN TO USE vs NOT USE
|
|
57
|
-
*
|
|
58
|
-
* Use ifNonEmpty when:
|
|
59
|
-
* - The attribute is optional (component has a prop that defaults to '')
|
|
60
|
-
* - The inner native element is a standard HTML element (input, button, a, etc.)
|
|
61
|
-
* - The attribute has accessibility or UI meaning when absent vs present
|
|
62
|
-
*
|
|
63
|
-
* Skip ifNonEmpty when:
|
|
64
|
-
* - The attribute is always required (e.g. type="button" is never absent)
|
|
65
|
-
* - You need the attribute to literally be "" (rare, document when intentional)
|
|
66
|
-
* - The binding is to a custom element property — use .prop=${val} instead
|
|
67
|
-
*/ const ifNonEmpty = (value)=>ifDefined(value === '' ? undefined : value ?? undefined);
|
|
68
|
-
|
|
69
|
-
const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-color-grey-300, #e0e0e0));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-color-foreground, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-color-grey-500, #9e9e9e))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-error, #ef4444);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-success, #489167);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}:host([size=xs]){--vi-input-spacing-padding-block: 2px;--vi-input-spacing-padding-inline: 8px;--vi-input-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-input-spacing-padding-block: 4px;--vi-input-spacing-padding-inline: 12px;--vi-input-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-input-spacing-padding-block: 12px;--vi-input-spacing-padding-inline: 20px;--vi-input-typography-font-size: var(--vi-font-size-lg, 18px)}";
|
|
8
|
+
const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-color-grey-300, #e0e0e0));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-color-foreground, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-color-grey-500, #9e9e9e))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-error, #ef4444);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-success, #489167);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-text-helper, #9e9e9e))}:host([size=xs]){--vi-input-spacing-padding-block: 2px;--vi-input-spacing-padding-inline: 8px;--vi-input-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-input-spacing-padding-block: 4px;--vi-input-spacing-padding-inline: 12px;--vi-input-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-input-spacing-padding-block: 12px;--vi-input-spacing-padding-inline: 20px;--vi-input-typography-font-size: var(--vi-font-size-lg, 18px)}";
|
|
70
9
|
|
|
71
10
|
function applyDecs2203RFactory() {
|
|
72
11
|
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
@@ -665,7 +604,9 @@ new class extends _identity {
|
|
|
665
604
|
};
|
|
666
605
|
}
|
|
667
606
|
} else if (this.required && !this.value) {
|
|
668
|
-
|
|
607
|
+
const temp = document.createElement('input');
|
|
608
|
+
temp.required = true;
|
|
609
|
+
this.validityMessage = temp.validationMessage;
|
|
669
610
|
return {
|
|
670
611
|
valueMissing: true
|
|
671
612
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vialiq/web-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
"default": "./index.js"
|
|
22
22
|
},
|
|
23
23
|
"./button": {
|
|
24
|
+
"types": "./button/index.d.ts",
|
|
25
|
+
"default": "./button/index.js"
|
|
26
|
+
},
|
|
27
|
+
"./button/vi-button": {
|
|
24
28
|
"types": "./button/vi-button.d.ts",
|
|
25
29
|
"default": "./button/vi-button.js"
|
|
26
30
|
},
|
|
@@ -33,6 +37,10 @@
|
|
|
33
37
|
"default": "./icons/registry.js"
|
|
34
38
|
},
|
|
35
39
|
"./input": {
|
|
40
|
+
"types": "./input/index.d.ts",
|
|
41
|
+
"default": "./input/index.js"
|
|
42
|
+
},
|
|
43
|
+
"./input/vi-input": {
|
|
36
44
|
"types": "./input/vi-input.d.ts",
|
|
37
45
|
"default": "./input/vi-input.js"
|
|
38
46
|
},
|
|
@@ -56,6 +64,14 @@
|
|
|
56
64
|
"types": "./checkbox/vi-checkbox.d.ts",
|
|
57
65
|
"default": "./checkbox/vi-checkbox.js"
|
|
58
66
|
},
|
|
67
|
+
"./textarea": {
|
|
68
|
+
"types": "./textarea/index.d.ts",
|
|
69
|
+
"default": "./textarea/index.js"
|
|
70
|
+
},
|
|
71
|
+
"./textarea/vi-textarea": {
|
|
72
|
+
"types": "./textarea/vi-textarea.d.ts",
|
|
73
|
+
"default": "./textarea/vi-textarea.js"
|
|
74
|
+
},
|
|
59
75
|
"./tooltip": {
|
|
60
76
|
"types": "./tooltip/index.d.ts",
|
|
61
77
|
"default": "./tooltip/index.js"
|
|
@@ -67,8 +83,8 @@
|
|
|
67
83
|
},
|
|
68
84
|
"peerDependencies": {
|
|
69
85
|
"@floating-ui/dom": ">=1.0.0",
|
|
70
|
-
"@vialiq/flux-ui": "^0.
|
|
71
|
-
"@vialiq/icons": ">=0.0.
|
|
86
|
+
"@vialiq/flux-ui": "^0.5.0",
|
|
87
|
+
"@vialiq/icons": ">=0.0.3 <0.1.0",
|
|
72
88
|
"lit": "^3.0.0"
|
|
73
89
|
},
|
|
74
90
|
"keywords": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vi-radio-group.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/radio/vi-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,CAAC;;AAE9D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,YAAa,SAAQ,iBAAwB;IACxD,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAI1B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IACzB,QAAQ,CAAC,eAAe,SAAM;IAI3E,wCAAwC;IACX,QAAQ,CAAC,KAAK,SAAM;IAEjD,wCAAwC;IAC5B,QAAQ,CAAC,IAAI,SAAM;IAE/B,iCAAiC;IACW,QAAQ,CAAC,QAAQ,UAAS;IAEtE,2CAA2C;IACd,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAc;IAEtF,oEAAoE;IACzB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,iEAAiE;IAEjE,QAAQ,CAAC,kBAAkB,UAAS;IAEpC,OAAO,CAAC,SAAS,CAAC,CAAmB;IAErC,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAsBzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAkB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,0EAA0E;IAC1E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAI1B,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"vi-radio-group.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/radio/vi-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,CAAC;;AAE9D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,YAAa,SAAQ,iBAAwB;IACxD,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAI1B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IACzB,QAAQ,CAAC,eAAe,SAAM;IAI3E,wCAAwC;IACX,QAAQ,CAAC,KAAK,SAAM;IAEjD,wCAAwC;IAC5B,QAAQ,CAAC,IAAI,SAAM;IAE/B,iCAAiC;IACW,QAAQ,CAAC,QAAQ,UAAS;IAEtE,2CAA2C;IACd,QAAQ,CAAC,WAAW,EAAE,qBAAqB,CAAc;IAEtF,oEAAoE;IACzB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,iEAAiE;IAEjE,QAAQ,CAAC,kBAAkB,UAAS;IAEpC,OAAO,CAAC,SAAS,CAAC,CAAmB;IAErC,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAsBzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAkB/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAOzB,0EAA0E;IAC1E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAI1B,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IA4B/D,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IA0CrB,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,UAAU;IA0DlB,OAAO,CAAC,WAAW,CAqBjB;IAIF,OAAO,KAAK,kBAAkB,GAmB7B;IAEQ,MAAM,IAAI,cAAc;CA+BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
package/radio/vi-radio-group.js
CHANGED
|
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
3
3
|
import { V as ValidityMixin } from '../validity-mixin-BjmXwgWk.js';
|
|
4
4
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
5
5
|
|
|
6
|
-
const radioGroupStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.radio-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vi-radio-group-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.radio-group-legend{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-label-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-semibold, 600);color:var(--vi-radio-group-label-color, var(--vi-color-foreground, #111827));padding:0;margin:0;margin-block-end:var(--vi-radio-group-legend-margin-bottom, var(--vi-spacing-xs, 8px))}.radio-group-items{display:flex;gap:var(--vi-radio-group-gap, 8px)}.radio-group-items[orientation=vertical]{flex-direction:column}.radio-group-items[orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--vi-radio-group-gap-horizontal, 24px)}.radio-group-helper{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-helper-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-helper-color, var(--vi-text-
|
|
6
|
+
const radioGroupStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.radio-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vi-radio-group-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.radio-group-legend{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-label-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-semibold, 600);color:var(--vi-radio-group-label-color, var(--vi-color-foreground, #111827));padding:0;margin:0;margin-block-end:var(--vi-radio-group-legend-margin-bottom, var(--vi-spacing-xs, 8px))}.radio-group-items{display:flex;gap:var(--vi-radio-group-gap, 8px)}.radio-group-items[orientation=vertical]{flex-direction:column}.radio-group-items[orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--vi-radio-group-gap-horizontal, 24px)}.radio-group-helper{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-helper-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-helper-color, var(--vi-text-helper, #9e9e9e))}.radio-group-validation{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-validation-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-validation-color, var(--vi-text-helper, #9e9e9e));margin-block-start:var(--vi-radio-group-validation-margin-top, var(--vi-spacing-xs, 8px))}.radio-group-validation.radio-group-validation--invalid{color:var(--vi-radio-group-error-color, var(--vi-color-error, #ef4444))}.radio-group-validation.radio-group-validation--valid{color:var(--vi-radio-group-success-color, var(--vi-color-success, #489167))}.radio-wrapper{display:inline-flex;align-items:center;gap:var(--vi-radio-label-gap, 8px);cursor:pointer;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-label-font-size, var(--vi-font-size-base, 16px));line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-radio-label-color, var(--vi-color-foreground, #111827));position:relative;-webkit-user-select:none;user-select:none}.radio-input{position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}.radio-circle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--vi-radio-size, 18px);height:var(--vi-radio-size, 18px);border:var(--vi-border-width-base, 2px) solid var(--vi-radio-border-color, var(--vi-border-04, #bdbdbd));border-radius:50%;background-color:var(--vi-radio-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease;flex-shrink:0}.radio-dot{box-sizing:border-box;width:var(--vi-radio-dot-size, 8px);height:var(--vi-radio-dot-size, 8px);border-radius:50%;background-color:var(--vi-radio-dot-color, var(--vi-color-primary, #3676d0));transform:scale(0);opacity:0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s ease}.radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked, var(--vi-color-primary, #3676d0))}.radio-input:checked+.radio-circle .radio-dot{transform:scale(1);opacity:1}.radio-input:focus-visible+.radio-circle{outline:var(--vi-border-width-base, 2px) solid var(--vi-radio-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:2px;box-shadow:0 0 0 3px var(--vi-radio-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-circle{border-color:var(--vi-radio-border-color-hover, var(--vi-border-inverse-03, #757575))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked-hover, var(--vi-color-primary, #3676d0))}.radio-wrapper--disabled{cursor:not-allowed;opacity:var(--vi-radio-disabled-opacity, .5)}.radio-wrapper--disabled .radio-circle{background-color:var(--vi-layer-disabled, #f3f4f6);border-color:var(--vi-border-02, #eeeeee)}.radio-wrapper--disabled .radio-dot{background-color:var(--vi-text-disabled, #9e9e9e)}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}}:host{display:block;outline:none}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-radio-group-label-color: var(--vi-color-error, #ef4444)}::slotted(*){font-family:inherit;font-size:inherit;color:inherit}:host([size=xs]){--vi-radio-group-label-font-size: var(--vi-font-size-xs, 12px);--vi-radio-group-legend-margin-bottom: 4px}:host([size=sm]){--vi-radio-group-label-font-size: var(--vi-font-size-sm, 14px);--vi-radio-group-legend-margin-bottom: 6px}:host([size=lg]){--vi-radio-group-label-font-size: var(--vi-font-size-lg, 18px);--vi-radio-group-legend-margin-bottom: 10px}";
|
|
7
7
|
|
|
8
8
|
function applyDecs2203RFactory() {
|
|
9
9
|
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
@@ -580,7 +580,26 @@ new class extends _identity {
|
|
|
580
580
|
}
|
|
581
581
|
_testValidity() {
|
|
582
582
|
if (this.required && !this.value) {
|
|
583
|
-
|
|
583
|
+
const radios = this._getRadios();
|
|
584
|
+
if (radios.length > 0) {
|
|
585
|
+
const firstInput = radios[0].shadowRoot?.querySelector('input');
|
|
586
|
+
if (firstInput) {
|
|
587
|
+
const wasRequired = firstInput.required;
|
|
588
|
+
firstInput.required = true;
|
|
589
|
+
this.validityMessage = firstInput.validationMessage;
|
|
590
|
+
firstInput.required = wasRequired;
|
|
591
|
+
return {
|
|
592
|
+
valueMissing: true
|
|
593
|
+
};
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
const temp = document.createElement('input');
|
|
597
|
+
temp.type = 'radio';
|
|
598
|
+
temp.name = 'temp-radio-group';
|
|
599
|
+
temp.required = true;
|
|
600
|
+
this.appendChild(temp);
|
|
601
|
+
this.validityMessage = temp.validationMessage;
|
|
602
|
+
this.removeChild(temp);
|
|
584
603
|
return {
|
|
585
604
|
valueMissing: true
|
|
586
605
|
};
|
package/radio/vi-radio.js
CHANGED
|
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
3
3
|
import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
|
|
4
4
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
5
5
|
|
|
6
|
-
const radioStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.radio-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vi-radio-group-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.radio-group-legend{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-label-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-semibold, 600);color:var(--vi-radio-group-label-color, var(--vi-color-foreground, #111827));padding:0;margin:0;margin-block-end:var(--vi-radio-group-legend-margin-bottom, var(--vi-spacing-xs, 8px))}.radio-group-items{display:flex;gap:var(--vi-radio-group-gap, 8px)}.radio-group-items[orientation=vertical]{flex-direction:column}.radio-group-items[orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--vi-radio-group-gap-horizontal, 24px)}.radio-group-helper{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-helper-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-helper-color, var(--vi-text-
|
|
6
|
+
const radioStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.radio-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--vi-radio-group-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.radio-group-legend{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-label-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-semibold, 600);color:var(--vi-radio-group-label-color, var(--vi-color-foreground, #111827));padding:0;margin:0;margin-block-end:var(--vi-radio-group-legend-margin-bottom, var(--vi-spacing-xs, 8px))}.radio-group-items{display:flex;gap:var(--vi-radio-group-gap, 8px)}.radio-group-items[orientation=vertical]{flex-direction:column}.radio-group-items[orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--vi-radio-group-gap-horizontal, 24px)}.radio-group-helper{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-helper-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-helper-color, var(--vi-text-helper, #9e9e9e))}.radio-group-validation{display:block;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-group-validation-font-size, var(--vi-font-size-xs, 12px));color:var(--vi-radio-group-validation-color, var(--vi-text-helper, #9e9e9e));margin-block-start:var(--vi-radio-group-validation-margin-top, var(--vi-spacing-xs, 8px))}.radio-group-validation.radio-group-validation--invalid{color:var(--vi-radio-group-error-color, var(--vi-color-error, #ef4444))}.radio-group-validation.radio-group-validation--valid{color:var(--vi-radio-group-success-color, var(--vi-color-success, #489167))}.radio-wrapper{display:inline-flex;align-items:center;gap:var(--vi-radio-label-gap, 8px);cursor:pointer;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-radio-label-font-size, var(--vi-font-size-base, 16px));line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-radio-label-color, var(--vi-color-foreground, #111827));position:relative;-webkit-user-select:none;user-select:none}.radio-input{position:absolute!important;clip-path:inset(50%)!important;overflow:hidden!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;white-space:nowrap!important}.radio-circle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--vi-radio-size, 18px);height:var(--vi-radio-size, 18px);border:var(--vi-border-width-base, 2px) solid var(--vi-radio-border-color, var(--vi-border-04, #bdbdbd));border-radius:50%;background-color:var(--vi-radio-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease;flex-shrink:0}.radio-dot{box-sizing:border-box;width:var(--vi-radio-dot-size, 8px);height:var(--vi-radio-dot-size, 8px);border-radius:50%;background-color:var(--vi-radio-dot-color, var(--vi-color-primary, #3676d0));transform:scale(0);opacity:0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s ease}.radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked, var(--vi-color-primary, #3676d0))}.radio-input:checked+.radio-circle .radio-dot{transform:scale(1);opacity:1}.radio-input:focus-visible+.radio-circle{outline:var(--vi-border-width-base, 2px) solid var(--vi-radio-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:2px;box-shadow:0 0 0 3px var(--vi-radio-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-circle{border-color:var(--vi-radio-border-color-hover, var(--vi-border-inverse-03, #757575))}.radio-wrapper:hover:not(.radio-wrapper--disabled) .radio-input:checked+.radio-circle{border-color:var(--vi-radio-border-color-checked-hover, var(--vi-color-primary, #3676d0))}.radio-wrapper--disabled{cursor:not-allowed;opacity:var(--vi-radio-disabled-opacity, .5)}.radio-wrapper--disabled .radio-circle{background-color:var(--vi-layer-disabled, #f3f4f6);border-color:var(--vi-border-02, #eeeeee)}.radio-wrapper--disabled .radio-dot{background-color:var(--vi-text-disabled, #9e9e9e)}@media(prefers-reduced-motion:reduce){.radio-circle,.radio-dot{transition:none}}}:host{display:inline-block;outline:none}:host([disabled]){cursor:not-allowed;pointer-events:none}::slotted(*){font-family:inherit;font-size:inherit;color:inherit}:host([size=xs]){--vi-radio-size: 12px;--vi-radio-dot-size: 5px;--vi-radio-label-gap: 4px;--vi-radio-label-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-radio-size: 14px;--vi-radio-dot-size: 6px;--vi-radio-label-gap: 6px;--vi-radio-label-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-radio-size: 22px;--vi-radio-dot-size: 10px;--vi-radio-label-gap: 10px;--vi-radio-label-font-size: var(--vi-font-size-lg, 18px)}";
|
|
7
7
|
|
|
8
8
|
function applyDecs2203RFactory() {
|
|
9
9
|
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|