@quieto/ui 0.0.0-stage → 0.1.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.
- package/LICENSE +21 -0
- package/README.md +142 -2
- package/custom-elements.json +6121 -0
- package/dist/components/qds-accordion/qds-accordion.d.ts +39 -0
- package/dist/components/qds-accordion/qds-accordion.d.ts.map +1 -0
- package/dist/components/qds-accordion/qds-accordion.js +130 -0
- package/dist/components/qds-accordion/qds-accordion.js.map +1 -0
- package/dist/components/qds-accordion-item/qds-accordion-item.d.ts +68 -0
- package/dist/components/qds-accordion-item/qds-accordion-item.d.ts.map +1 -0
- package/dist/components/qds-accordion-item/qds-accordion-item.js +250 -0
- package/dist/components/qds-accordion-item/qds-accordion-item.js.map +1 -0
- package/dist/components/qds-button/qds-button.d.ts +92 -0
- package/dist/components/qds-button/qds-button.d.ts.map +1 -0
- package/dist/components/qds-button/qds-button.js +418 -0
- package/dist/components/qds-button/qds-button.js.map +1 -0
- package/dist/components/qds-card/qds-card.d.ts +48 -0
- package/dist/components/qds-card/qds-card.d.ts.map +1 -0
- package/dist/components/qds-card/qds-card.js +152 -0
- package/dist/components/qds-card/qds-card.js.map +1 -0
- package/dist/components/qds-checkbox/qds-checkbox.d.ts +85 -0
- package/dist/components/qds-checkbox/qds-checkbox.d.ts.map +1 -0
- package/dist/components/qds-checkbox/qds-checkbox.js +316 -0
- package/dist/components/qds-checkbox/qds-checkbox.js.map +1 -0
- package/dist/components/qds-chip/qds-chip.d.ts +79 -0
- package/dist/components/qds-chip/qds-chip.d.ts.map +1 -0
- package/dist/components/qds-chip/qds-chip.js +314 -0
- package/dist/components/qds-chip/qds-chip.js.map +1 -0
- package/dist/components/qds-input/qds-input.d.ts +64 -0
- package/dist/components/qds-input/qds-input.d.ts.map +1 -0
- package/dist/components/qds-input/qds-input.js +224 -0
- package/dist/components/qds-input/qds-input.js.map +1 -0
- package/dist/components/qds-modal/qds-modal.d.ts +76 -0
- package/dist/components/qds-modal/qds-modal.d.ts.map +1 -0
- package/dist/components/qds-modal/qds-modal.js +362 -0
- package/dist/components/qds-modal/qds-modal.js.map +1 -0
- package/dist/components/qds-progress-bar/qds-progress-bar.d.ts +47 -0
- package/dist/components/qds-progress-bar/qds-progress-bar.d.ts.map +1 -0
- package/dist/components/qds-progress-bar/qds-progress-bar.js +180 -0
- package/dist/components/qds-progress-bar/qds-progress-bar.js.map +1 -0
- package/dist/components/qds-radio/qds-radio.d.ts +62 -0
- package/dist/components/qds-radio/qds-radio.d.ts.map +1 -0
- package/dist/components/qds-radio/qds-radio.js +213 -0
- package/dist/components/qds-radio/qds-radio.js.map +1 -0
- package/dist/components/qds-radio-group/qds-radio-group.d.ts +72 -0
- package/dist/components/qds-radio-group/qds-radio-group.d.ts.map +1 -0
- package/dist/components/qds-radio-group/qds-radio-group.js +317 -0
- package/dist/components/qds-radio-group/qds-radio-group.js.map +1 -0
- package/dist/components/qds-stack/qds-stack.d.ts +46 -0
- package/dist/components/qds-stack/qds-stack.d.ts.map +1 -0
- package/dist/components/qds-stack/qds-stack.js +149 -0
- package/dist/components/qds-stack/qds-stack.js.map +1 -0
- package/dist/components/qds-tab/qds-tab.d.ts +55 -0
- package/dist/components/qds-tab/qds-tab.d.ts.map +1 -0
- package/dist/components/qds-tab/qds-tab.js +162 -0
- package/dist/components/qds-tab/qds-tab.js.map +1 -0
- package/dist/components/qds-tab-panel/qds-tab-panel.d.ts +32 -0
- package/dist/components/qds-tab-panel/qds-tab-panel.d.ts.map +1 -0
- package/dist/components/qds-tab-panel/qds-tab-panel.js +72 -0
- package/dist/components/qds-tab-panel/qds-tab-panel.js.map +1 -0
- package/dist/components/qds-tabs/qds-tabs.d.ts +54 -0
- package/dist/components/qds-tabs/qds-tabs.d.ts.map +1 -0
- package/dist/components/qds-tabs/qds-tabs.js +196 -0
- package/dist/components/qds-tabs/qds-tabs.js.map +1 -0
- package/dist/components/qds-text-field/qds-text-field.d.ts +94 -0
- package/dist/components/qds-text-field/qds-text-field.d.ts.map +1 -0
- package/dist/components/qds-text-field/qds-text-field.js +332 -0
- package/dist/components/qds-text-field/qds-text-field.js.map +1 -0
- package/dist/components/qds-toggle/qds-toggle.d.ts +68 -0
- package/dist/components/qds-toggle/qds-toggle.d.ts.map +1 -0
- package/dist/components/qds-toggle/qds-toggle.js +260 -0
- package/dist/components/qds-toggle/qds-toggle.js.map +1 -0
- package/dist/index.d.ts +50 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +40 -0
- package/dist/index.js.map +1 -0
- package/dist/internal/qds-element.d.ts +31 -0
- package/dist/internal/qds-element.d.ts.map +1 -0
- package/dist/internal/qds-element.js +68 -0
- package/dist/internal/qds-element.js.map +1 -0
- package/dist/internal/qds-text-control.d.ts +79 -0
- package/dist/internal/qds-text-control.d.ts.map +1 -0
- package/dist/internal/qds-text-control.js +159 -0
- package/dist/internal/qds-text-control.js.map +1 -0
- package/package.json +125 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-progress-bar.js","sourceRoot":"","sources":["../../../src/components/qds-progress-bar/qds-progress-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAuFL;;;WAGG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B,qCAAqC;QAErC,QAAG,GAAG,GAAG,CAAC;QAEV,4CAA4C;QAE5C,UAAK,GAAG,EAAE,CAAC;QAEX,uBAAuB;QAEvB,YAAO,GAA0B,SAAS,CAAC;IAiC7C,CAAC;aAxIiB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;KACF,AApFqB,CAoFpB;IAqBF,+DAA+D;IAC/D,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC1C,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAChD,CAAC;IAEQ,MAAM;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC1C,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC;QAErC,OAAO,IAAI,CAAA;;gBAEC,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO;;;qBAG1C,IAAI,CAAC,KAAK,IAAI,OAAO;;wBAElB,GAAG;wBACH,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;oBACnC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;kBAKlC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;;;KAGhF,CAAC;IACJ,CAAC;;AA5CD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACC;AAI5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACjB;AAIV;IADC,QAAQ,EAAE;6CACA;AAIX;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACe;AAxGhC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAyI1B"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import { QdsElement } from '../../internal/qds-element.js';
|
|
3
|
+
/**
|
|
4
|
+
* One option in a `qds-radio-group`.
|
|
5
|
+
*
|
|
6
|
+
* Unlike `qds-checkbox`, there is no native input inside. Native radios group by
|
|
7
|
+
* `name` within a single tree, so radios in separate shadow roots never form a
|
|
8
|
+
* group: arrow keys would not move between them and checking one would not
|
|
9
|
+
* uncheck the others. The host takes the `radio` role itself instead, and the
|
|
10
|
+
* group supplies the grouping behavior.
|
|
11
|
+
*
|
|
12
|
+
* Use only inside a `qds-radio-group`; on its own it does nothing when clicked.
|
|
13
|
+
*
|
|
14
|
+
* @element qds-radio
|
|
15
|
+
*
|
|
16
|
+
* @slot - The label.
|
|
17
|
+
*
|
|
18
|
+
* @csspart control - The drawn circle.
|
|
19
|
+
* @csspart label - The wrapper around the default slot.
|
|
20
|
+
*
|
|
21
|
+
* @cssprop [--qds-component-radio-gap] - Space between the circle and the label.
|
|
22
|
+
* @cssprop [--qds-component-radio-font-size] - Label size.
|
|
23
|
+
* @cssprop [--qds-component-radio-line-height] - Label line height.
|
|
24
|
+
* @cssprop [--qds-component-radio-duration] - State transition duration.
|
|
25
|
+
* @cssprop [--qds-component-radio-control-width] - Circle width.
|
|
26
|
+
* @cssprop [--qds-component-radio-control-height] - Circle height.
|
|
27
|
+
* @cssprop [--qds-component-radio-control-border-width] - Circle border thickness.
|
|
28
|
+
* @cssprop [--qds-component-radio-control-color-background-{state}] - Circle fill: `unchecked`, `checked`, `hover` (checked, under the pointer), `disabled`.
|
|
29
|
+
* @cssprop [--qds-component-radio-control-color-border-{state}] - Circle border: `unchecked`, `hover` (unchecked, under the pointer), `checked`, `disabled`.
|
|
30
|
+
* @cssprop [--qds-component-radio-control-color-content-{state}] - Dot color: `checked`, `disabled`.
|
|
31
|
+
* @cssprop [--qds-component-radio-label-color-content-{state}] - Label color: `rest`, `disabled`.
|
|
32
|
+
*/
|
|
33
|
+
export declare class QdsRadio extends QdsElement {
|
|
34
|
+
#private;
|
|
35
|
+
static styles: import("lit").CSSResult[];
|
|
36
|
+
/** The value the group takes when this option is chosen. */
|
|
37
|
+
value: string;
|
|
38
|
+
/**
|
|
39
|
+
* Whether this option is chosen. The group manages this; set the group's
|
|
40
|
+
* `value` instead. As an attribute in markup it marks the initial choice when
|
|
41
|
+
* the group has no `value` of its own.
|
|
42
|
+
*/
|
|
43
|
+
checked: boolean;
|
|
44
|
+
/** Prevents choosing this option. Arrow keys skip it. */
|
|
45
|
+
disabled: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Set by the group while the whole group is disabled.
|
|
48
|
+
*
|
|
49
|
+
* @internal
|
|
50
|
+
*/
|
|
51
|
+
groupDisabled: boolean;
|
|
52
|
+
constructor();
|
|
53
|
+
connectedCallback(): void;
|
|
54
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
55
|
+
render(): TemplateResult;
|
|
56
|
+
}
|
|
57
|
+
declare global {
|
|
58
|
+
interface HTMLElementTagNameMap {
|
|
59
|
+
'qds-radio': QdsRadio;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=qds-radio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-radio.d.ts","sourceRoot":"","sources":["../../../src/components/qds-radio/qds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAmGpB;IAEF,4DAA4D;IAE5D,KAAK,SAAM;IAEX;;;;OAIG;IAEH,OAAO,UAAS;IAEhB,yDAAyD;IAEzD,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,aAAa,UAAS;;IAOb,iBAAiB,IAAI,IAAI;cAWf,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiBtD,MAAM,IAAI,cAAc;CAMlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { css, html } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { QdsElement } from '../../internal/qds-element.js';
|
|
10
|
+
/**
|
|
11
|
+
* One option in a `qds-radio-group`.
|
|
12
|
+
*
|
|
13
|
+
* Unlike `qds-checkbox`, there is no native input inside. Native radios group by
|
|
14
|
+
* `name` within a single tree, so radios in separate shadow roots never form a
|
|
15
|
+
* group: arrow keys would not move between them and checking one would not
|
|
16
|
+
* uncheck the others. The host takes the `radio` role itself instead, and the
|
|
17
|
+
* group supplies the grouping behavior.
|
|
18
|
+
*
|
|
19
|
+
* Use only inside a `qds-radio-group`; on its own it does nothing when clicked.
|
|
20
|
+
*
|
|
21
|
+
* @element qds-radio
|
|
22
|
+
*
|
|
23
|
+
* @slot - The label.
|
|
24
|
+
*
|
|
25
|
+
* @csspart control - The drawn circle.
|
|
26
|
+
* @csspart label - The wrapper around the default slot.
|
|
27
|
+
*
|
|
28
|
+
* @cssprop [--qds-component-radio-gap] - Space between the circle and the label.
|
|
29
|
+
* @cssprop [--qds-component-radio-font-size] - Label size.
|
|
30
|
+
* @cssprop [--qds-component-radio-line-height] - Label line height.
|
|
31
|
+
* @cssprop [--qds-component-radio-duration] - State transition duration.
|
|
32
|
+
* @cssprop [--qds-component-radio-control-width] - Circle width.
|
|
33
|
+
* @cssprop [--qds-component-radio-control-height] - Circle height.
|
|
34
|
+
* @cssprop [--qds-component-radio-control-border-width] - Circle border thickness.
|
|
35
|
+
* @cssprop [--qds-component-radio-control-color-background-{state}] - Circle fill: `unchecked`, `checked`, `hover` (checked, under the pointer), `disabled`.
|
|
36
|
+
* @cssprop [--qds-component-radio-control-color-border-{state}] - Circle border: `unchecked`, `hover` (unchecked, under the pointer), `checked`, `disabled`.
|
|
37
|
+
* @cssprop [--qds-component-radio-control-color-content-{state}] - Dot color: `checked`, `disabled`.
|
|
38
|
+
* @cssprop [--qds-component-radio-label-color-content-{state}] - Label color: `rest`, `disabled`.
|
|
39
|
+
*/
|
|
40
|
+
let QdsRadio = class QdsRadio extends QdsElement {
|
|
41
|
+
static { this.styles = [
|
|
42
|
+
QdsElement.baseStyles,
|
|
43
|
+
css `
|
|
44
|
+
:host {
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: flex-start;
|
|
47
|
+
gap: var(--qds-component-radio-gap, 0.5rem);
|
|
48
|
+
|
|
49
|
+
font-family: var(--qds-typography-font-family-sans, inherit);
|
|
50
|
+
font-size: var(--qds-component-radio-font-size, 0.875rem);
|
|
51
|
+
line-height: var(--qds-component-radio-line-height, 1.375);
|
|
52
|
+
color: var(--qds-component-radio-label-color-content-rest, #0f172a);
|
|
53
|
+
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
outline: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.control {
|
|
59
|
+
display: inline-grid;
|
|
60
|
+
place-items: center;
|
|
61
|
+
flex: none;
|
|
62
|
+
width: var(--qds-component-radio-control-width, 1rem);
|
|
63
|
+
height: var(--qds-component-radio-control-height, 1rem);
|
|
64
|
+
margin-block-start: calc((1lh - var(--qds-component-radio-control-height, 1rem)) / 2);
|
|
65
|
+
|
|
66
|
+
color: var(--qds-component-radio-control-color-content-checked, #f8fafc);
|
|
67
|
+
background-color: var(--qds-component-radio-control-color-background-unchecked, #f8fafc);
|
|
68
|
+
border: var(--qds-component-radio-control-border-width, 0.0625rem) solid
|
|
69
|
+
var(--qds-component-radio-control-color-border-unchecked, #64748b);
|
|
70
|
+
border-radius: 50%;
|
|
71
|
+
|
|
72
|
+
transition:
|
|
73
|
+
background-color var(--qds-component-radio-duration, 120ms),
|
|
74
|
+
border-color var(--qds-component-radio-duration, 120ms);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.dot {
|
|
78
|
+
width: 37.5%;
|
|
79
|
+
height: 37.5%;
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
background-color: currentColor;
|
|
82
|
+
visibility: hidden;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:host(:where(:hover)) .control {
|
|
86
|
+
border-color: var(--qds-component-radio-control-color-border-hover, #2563eb);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host([checked]) .control {
|
|
90
|
+
background-color: var(--qds-component-radio-control-color-background-checked, #2563eb);
|
|
91
|
+
border-color: var(--qds-component-radio-control-color-border-checked, #2563eb);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
:host([checked]:where(:hover)) .control {
|
|
95
|
+
background-color: var(--qds-component-radio-control-color-background-hover, #1d4ed8);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
:host([checked]) .dot {
|
|
99
|
+
visibility: visible;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* The host is what takes focus, so the ring is drawn on the circle from here. */
|
|
103
|
+
:host(:focus-visible) .control {
|
|
104
|
+
outline: var(--_focus-ring);
|
|
105
|
+
outline-offset: 0.125rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([disabled]),
|
|
109
|
+
:host([group-disabled]) {
|
|
110
|
+
color: var(--qds-component-radio-label-color-content-disabled, #64748b);
|
|
111
|
+
cursor: not-allowed;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
:host([disabled]) .control,
|
|
115
|
+
:host([group-disabled]) .control {
|
|
116
|
+
color: var(--qds-component-radio-control-color-content-disabled, #64748b);
|
|
117
|
+
background-color: var(--qds-component-radio-control-color-background-disabled, #f1f5f9);
|
|
118
|
+
border-color: var(--qds-component-radio-control-color-border-disabled, #e2e8f0);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@media (prefers-reduced-motion: reduce) {
|
|
122
|
+
.control {
|
|
123
|
+
transition: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@media (forced-colors: active) {
|
|
128
|
+
.control {
|
|
129
|
+
border-color: ButtonText;
|
|
130
|
+
color: Highlight;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host([disabled]) .control,
|
|
134
|
+
:host([group-disabled]) .control {
|
|
135
|
+
border-color: GrayText;
|
|
136
|
+
color: GrayText;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
`,
|
|
140
|
+
]; }
|
|
141
|
+
constructor() {
|
|
142
|
+
super();
|
|
143
|
+
/** The value the group takes when this option is chosen. */
|
|
144
|
+
this.value = '';
|
|
145
|
+
/**
|
|
146
|
+
* Whether this option is chosen. The group manages this; set the group's
|
|
147
|
+
* `value` instead. As an attribute in markup it marks the initial choice when
|
|
148
|
+
* the group has no `value` of its own.
|
|
149
|
+
*/
|
|
150
|
+
this.checked = false;
|
|
151
|
+
/** Prevents choosing this option. Arrow keys skip it. */
|
|
152
|
+
this.disabled = false;
|
|
153
|
+
/**
|
|
154
|
+
* Set by the group while the whole group is disabled.
|
|
155
|
+
*
|
|
156
|
+
* @internal
|
|
157
|
+
*/
|
|
158
|
+
this.groupDisabled = false;
|
|
159
|
+
this.#handleClick = () => {
|
|
160
|
+
if (this.disabled || this.groupDisabled)
|
|
161
|
+
return;
|
|
162
|
+
// The group listens for this and does the selecting, so that the "only one
|
|
163
|
+
// checked" rule is enforced in exactly one place.
|
|
164
|
+
this.dispatchEvent(new Event('qds-radio-select', { bubbles: true }));
|
|
165
|
+
};
|
|
166
|
+
this.addEventListener('click', this.#handleClick);
|
|
167
|
+
}
|
|
168
|
+
connectedCallback() {
|
|
169
|
+
super.connectedCallback();
|
|
170
|
+
// The role lives on the host so it sits in the same tree as the other radios
|
|
171
|
+
// and the group: the group's roving tabindex focuses these hosts directly.
|
|
172
|
+
//
|
|
173
|
+
// As host attributes rather than ElementInternals ARIA: browsers read either,
|
|
174
|
+
// but auditing tools such as axe only read attributes. Not set in the
|
|
175
|
+
// constructor, where a custom element must not gain attributes.
|
|
176
|
+
this.setAttribute('role', 'radio');
|
|
177
|
+
}
|
|
178
|
+
updated(changed) {
|
|
179
|
+
if (changed.has('checked')) {
|
|
180
|
+
this.setAttribute('aria-checked', String(this.checked));
|
|
181
|
+
}
|
|
182
|
+
if (changed.has('disabled') || changed.has('groupDisabled')) {
|
|
183
|
+
if (this.disabled || this.groupDisabled)
|
|
184
|
+
this.setAttribute('aria-disabled', 'true');
|
|
185
|
+
else
|
|
186
|
+
this.removeAttribute('aria-disabled');
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
#handleClick;
|
|
190
|
+
render() {
|
|
191
|
+
return html `
|
|
192
|
+
<span class="control" part="control"><span class="dot"></span></span>
|
|
193
|
+
<span part="label"><slot></slot></span>
|
|
194
|
+
`;
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
__decorate([
|
|
198
|
+
property()
|
|
199
|
+
], QdsRadio.prototype, "value", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: Boolean, reflect: true })
|
|
202
|
+
], QdsRadio.prototype, "checked", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: Boolean, reflect: true })
|
|
205
|
+
], QdsRadio.prototype, "disabled", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: Boolean, reflect: true, attribute: 'group-disabled' })
|
|
208
|
+
], QdsRadio.prototype, "groupDisabled", void 0);
|
|
209
|
+
QdsRadio = __decorate([
|
|
210
|
+
customElement('qds-radio')
|
|
211
|
+
], QdsRadio);
|
|
212
|
+
export { QdsRadio };
|
|
213
|
+
//# sourceMappingURL=qds-radio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-radio.js","sourceRoot":"","sources":["../../../src/components/qds-radio/qds-radio.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;aACtB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgGF;KACF,AAnGqB,CAmGpB;IA0BF;QACE,KAAK,EAAE,CAAC;QAzBV,4DAA4D;QAE5D,UAAK,GAAG,EAAE,CAAC;QAEX;;;;WAIG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB,yDAAyD;QAEzD,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;WAIG;QAEH,kBAAa,GAAG,KAAK,CAAC;QA4BtB,iBAAY,GAAG,GAAS,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa;gBAAE,OAAO;YAChD,2EAA2E;YAC3E,kDAAkD;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,kBAAkB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC;QA7BA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACpD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,6EAA6E;QAC7E,2EAA2E;QAC3E,EAAE;QACF,8EAA8E;QAC9E,sEAAsE;QACtE,gEAAgE;QAChE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1D,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YAC5D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa;gBAAE,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;gBAC/E,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,YAAY,CAKV;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;;AA5DD;IADC,QAAQ,EAAE;uCACA;AAQX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAQjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CAClD;AA5HX,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqKpB"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
|
+
import { QdsElement } from '../../internal/qds-element.js';
|
|
3
|
+
export type QdsRadioGroupOrientation = 'block' | 'inline';
|
|
4
|
+
/**
|
|
5
|
+
* A set of `qds-radio` options, of which at most one is chosen.
|
|
6
|
+
*
|
|
7
|
+
* The group owns everything that makes radios a group: the value, form
|
|
8
|
+
* submission, required validation, and keyboard navigation. Tab moves into the
|
|
9
|
+
* group and lands on the chosen option (or the first, if none is chosen); arrow
|
|
10
|
+
* keys then move between options and choose as they go, following the ARIA
|
|
11
|
+
* radio group pattern.
|
|
12
|
+
*
|
|
13
|
+
* @element qds-radio-group
|
|
14
|
+
*
|
|
15
|
+
* @slot - The `qds-radio` options.
|
|
16
|
+
* @slot label - The group label, in place of the `label` attribute when it needs markup.
|
|
17
|
+
*
|
|
18
|
+
* @fires {CustomEvent<{ value: string }>} qds-change - Fired when the user
|
|
19
|
+
* chooses an option. Not fired for programmatic changes.
|
|
20
|
+
*
|
|
21
|
+
* @csspart base - The element carrying the radiogroup role.
|
|
22
|
+
* @csspart label - The group label.
|
|
23
|
+
* @csspart options - The wrapper around the options.
|
|
24
|
+
*
|
|
25
|
+
* @cssprop [--qds-component-radio-group-gap] - Space between options.
|
|
26
|
+
* @cssprop [--qds-component-radio-group-font-size] - Group label size.
|
|
27
|
+
* @cssprop [--qds-component-radio-group-font-weight] - Group label weight.
|
|
28
|
+
* @cssprop [--qds-component-radio-group-color-content-rest] - Group label color.
|
|
29
|
+
*/
|
|
30
|
+
export declare class QdsRadioGroup extends QdsElement {
|
|
31
|
+
#private;
|
|
32
|
+
static formAssociated: boolean;
|
|
33
|
+
static styles: import("lit").CSSResult[];
|
|
34
|
+
/** The chosen option's value, or an empty string when none is chosen. */
|
|
35
|
+
value: string;
|
|
36
|
+
/** Field name used when the form is submitted. */
|
|
37
|
+
name: string;
|
|
38
|
+
/** Visible group label. Also the group's accessible name. */
|
|
39
|
+
label: string;
|
|
40
|
+
/** Makes the form invalid until an option is chosen. */
|
|
41
|
+
required: boolean;
|
|
42
|
+
/** Disables every option. */
|
|
43
|
+
disabled: boolean;
|
|
44
|
+
/** Lays the options out in a column (`block`) or a row (`inline`). */
|
|
45
|
+
orientation: QdsRadioGroupOrientation;
|
|
46
|
+
/** Disabled by its own attribute or by an ancestor `<fieldset disabled>`. */
|
|
47
|
+
private formDisabled;
|
|
48
|
+
private hasLabelSlot;
|
|
49
|
+
constructor();
|
|
50
|
+
/** The form this group belongs to, if any. */
|
|
51
|
+
get form(): HTMLFormElement | null;
|
|
52
|
+
/** Same as the native `checkValidity()`. */
|
|
53
|
+
checkValidity(): boolean;
|
|
54
|
+
/** Same as the native `reportValidity()`. */
|
|
55
|
+
reportValidity(): boolean;
|
|
56
|
+
/** Same as the native `validity`. */
|
|
57
|
+
get validity(): ValidityState;
|
|
58
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
59
|
+
protected firstUpdated(): void;
|
|
60
|
+
protected updated(): void;
|
|
61
|
+
/** Called by the form on reset. */
|
|
62
|
+
formResetCallback(): void;
|
|
63
|
+
/** Called when this element's disabled state changes, from its own attribute or a fieldset. */
|
|
64
|
+
formDisabledCallback(disabled: boolean): void;
|
|
65
|
+
render(): TemplateResult;
|
|
66
|
+
}
|
|
67
|
+
declare global {
|
|
68
|
+
interface HTMLElementTagNameMap {
|
|
69
|
+
'qds-radio-group': QdsRadioGroup;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=qds-radio-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qds-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/qds-radio-group/qds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnF,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,aAAc,SAAQ,UAAU;;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA4BpB;IAEF,yEAAyE;IAEzE,KAAK,SAAM;IAEX,kDAAkD;IAElD,IAAI,SAAM;IAEV,6DAA6D;IAE7D,KAAK,SAAM;IAEX,wDAAwD;IAExD,QAAQ,UAAS;IAEjB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB,sEAAsE;IAEtE,WAAW,EAAE,wBAAwB,CAAW;IAEhD,6EAA6E;IAE7E,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,YAAY,CAAS;;IAc7B,8CAA8C;IAC9C,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,4CAA4C;IAC5C,aAAa,IAAI,OAAO;IAIxB,6CAA6C;IAC7C,cAAc,IAAI,OAAO;IAIzB,qCAAqC;IACrC,IAAI,QAAQ,IAAI,aAAa,CAE5B;cAgBkB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM/C,YAAY,IAAI,IAAI;cAcpB,OAAO,IAAI,IAAI;IAOlC,mCAAmC;IACnC,iBAAiB,IAAI,IAAI;IAIzB,+FAA+F;IAC/F,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAsHpC,MAAM,IAAI,cAAc;CAyBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|