@quieto/ui 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +142 -2
  3. package/custom-elements.json +6126 -0
  4. package/dist/components/qds-accordion/qds-accordion.d.ts +39 -0
  5. package/dist/components/qds-accordion/qds-accordion.d.ts.map +1 -0
  6. package/dist/components/qds-accordion/qds-accordion.js +130 -0
  7. package/dist/components/qds-accordion/qds-accordion.js.map +1 -0
  8. package/dist/components/qds-accordion-item/qds-accordion-item.d.ts +68 -0
  9. package/dist/components/qds-accordion-item/qds-accordion-item.d.ts.map +1 -0
  10. package/dist/components/qds-accordion-item/qds-accordion-item.js +247 -0
  11. package/dist/components/qds-accordion-item/qds-accordion-item.js.map +1 -0
  12. package/dist/components/qds-button/qds-button.d.ts +92 -0
  13. package/dist/components/qds-button/qds-button.d.ts.map +1 -0
  14. package/dist/components/qds-button/qds-button.js +418 -0
  15. package/dist/components/qds-button/qds-button.js.map +1 -0
  16. package/dist/components/qds-card/qds-card.d.ts +48 -0
  17. package/dist/components/qds-card/qds-card.d.ts.map +1 -0
  18. package/dist/components/qds-card/qds-card.js +152 -0
  19. package/dist/components/qds-card/qds-card.js.map +1 -0
  20. package/dist/components/qds-checkbox/qds-checkbox.d.ts +85 -0
  21. package/dist/components/qds-checkbox/qds-checkbox.d.ts.map +1 -0
  22. package/dist/components/qds-checkbox/qds-checkbox.js +316 -0
  23. package/dist/components/qds-checkbox/qds-checkbox.js.map +1 -0
  24. package/dist/components/qds-chip/qds-chip.d.ts +79 -0
  25. package/dist/components/qds-chip/qds-chip.d.ts.map +1 -0
  26. package/dist/components/qds-chip/qds-chip.js +314 -0
  27. package/dist/components/qds-chip/qds-chip.js.map +1 -0
  28. package/dist/components/qds-input/qds-input.d.ts +64 -0
  29. package/dist/components/qds-input/qds-input.d.ts.map +1 -0
  30. package/dist/components/qds-input/qds-input.js +224 -0
  31. package/dist/components/qds-input/qds-input.js.map +1 -0
  32. package/dist/components/qds-modal/qds-modal.d.ts +76 -0
  33. package/dist/components/qds-modal/qds-modal.d.ts.map +1 -0
  34. package/dist/components/qds-modal/qds-modal.js +362 -0
  35. package/dist/components/qds-modal/qds-modal.js.map +1 -0
  36. package/dist/components/qds-progress-bar/qds-progress-bar.d.ts +47 -0
  37. package/dist/components/qds-progress-bar/qds-progress-bar.d.ts.map +1 -0
  38. package/dist/components/qds-progress-bar/qds-progress-bar.js +180 -0
  39. package/dist/components/qds-progress-bar/qds-progress-bar.js.map +1 -0
  40. package/dist/components/qds-radio/qds-radio.d.ts +62 -0
  41. package/dist/components/qds-radio/qds-radio.d.ts.map +1 -0
  42. package/dist/components/qds-radio/qds-radio.js +213 -0
  43. package/dist/components/qds-radio/qds-radio.js.map +1 -0
  44. package/dist/components/qds-radio-group/qds-radio-group.d.ts +72 -0
  45. package/dist/components/qds-radio-group/qds-radio-group.d.ts.map +1 -0
  46. package/dist/components/qds-radio-group/qds-radio-group.js +317 -0
  47. package/dist/components/qds-radio-group/qds-radio-group.js.map +1 -0
  48. package/dist/components/qds-stack/qds-stack.d.ts +46 -0
  49. package/dist/components/qds-stack/qds-stack.d.ts.map +1 -0
  50. package/dist/components/qds-stack/qds-stack.js +149 -0
  51. package/dist/components/qds-stack/qds-stack.js.map +1 -0
  52. package/dist/components/qds-tab/qds-tab.d.ts +55 -0
  53. package/dist/components/qds-tab/qds-tab.d.ts.map +1 -0
  54. package/dist/components/qds-tab/qds-tab.js +162 -0
  55. package/dist/components/qds-tab/qds-tab.js.map +1 -0
  56. package/dist/components/qds-tab-panel/qds-tab-panel.d.ts +32 -0
  57. package/dist/components/qds-tab-panel/qds-tab-panel.d.ts.map +1 -0
  58. package/dist/components/qds-tab-panel/qds-tab-panel.js +72 -0
  59. package/dist/components/qds-tab-panel/qds-tab-panel.js.map +1 -0
  60. package/dist/components/qds-tabs/qds-tabs.d.ts +54 -0
  61. package/dist/components/qds-tabs/qds-tabs.d.ts.map +1 -0
  62. package/dist/components/qds-tabs/qds-tabs.js +196 -0
  63. package/dist/components/qds-tabs/qds-tabs.js.map +1 -0
  64. package/dist/components/qds-text-field/qds-text-field.d.ts +94 -0
  65. package/dist/components/qds-text-field/qds-text-field.d.ts.map +1 -0
  66. package/dist/components/qds-text-field/qds-text-field.js +332 -0
  67. package/dist/components/qds-text-field/qds-text-field.js.map +1 -0
  68. package/dist/components/qds-toggle/qds-toggle.d.ts +68 -0
  69. package/dist/components/qds-toggle/qds-toggle.d.ts.map +1 -0
  70. package/dist/components/qds-toggle/qds-toggle.js +260 -0
  71. package/dist/components/qds-toggle/qds-toggle.js.map +1 -0
  72. package/dist/index.d.ts +50 -0
  73. package/dist/index.d.ts.map +1 -0
  74. package/dist/index.js +40 -0
  75. package/dist/index.js.map +1 -0
  76. package/dist/internal/qds-element.d.ts +31 -0
  77. package/dist/internal/qds-element.d.ts.map +1 -0
  78. package/dist/internal/qds-element.js +68 -0
  79. package/dist/internal/qds-element.js.map +1 -0
  80. package/dist/internal/qds-text-control.d.ts +79 -0
  81. package/dist/internal/qds-text-control.d.ts.map +1 -0
  82. package/dist/internal/qds-text-control.js +159 -0
  83. package/dist/internal/qds-text-control.js.map +1 -0
  84. 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"}