@ucalgary-design-system/radio 1.0.1 → 1.0.3

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 (5) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/LICENSE.md +21 -0
  3. package/index.js +169 -164
  4. package/package.json +6 -6
  5. package/radio.css +1 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,22 @@
1
+ # @ucalgary-design-system/radio
2
+
3
+ ## 1.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - c3fdd31: Updated dependencies and modified build
8
+ - Updated dependencies [386b04a]
9
+ - Updated dependencies [c3fdd31]
10
+ - @ucalgary-design-system/icon@1.0.3
11
+ - @ucalgary-design-system/core@1.0.3
12
+
13
+ ## 1.0.2
14
+
15
+ ### Patch Changes
16
+
17
+ - dddb90f: Added LICENSE to package
18
+ - Updated dependencies [dddb90f]
19
+ - @ucalgary-design-system/helper-components@1.0.2
20
+ - @ucalgary-design-system/icon@1.0.2
21
+ - @ucalgary-design-system/tokens@1.0.3
22
+ - @ucalgary-design-system/core@1.0.2
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 University of Calgary
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the “Software”), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/index.js CHANGED
@@ -1,26 +1,26 @@
1
- import { unsafeCSS as C, nothing as $, html as p } from "lit";
2
- import { BaseElement as P } from "@ucalgary-design-system/core";
3
- import { FormLabel as x } from "@ucalgary-design-system/helper-components";
1
+ import { unsafeCSS as U, nothing as $, html as u } from "lit";
2
+ import { BaseElement as x } from "@ucalgary-design-system/core";
3
+ import { FormLabel as C } from "@ucalgary-design-system/helper-components";
4
4
  import "@ucalgary-design-system/icon";
5
5
  /**
6
6
  * @license
7
7
  * Copyright 2017 Google LLC
8
8
  * SPDX-License-Identifier: BSD-3-Clause
9
9
  */
10
- const O = (o) => (e, t) => {
10
+ const A = (i) => (e, t) => {
11
11
  t !== void 0 ? t.addInitializer(() => {
12
- customElements.define(o, e);
13
- }) : customElements.define(o, e);
12
+ customElements.define(i, e);
13
+ }) : customElements.define(i, e);
14
14
  };
15
15
  /**
16
16
  * @license
17
17
  * Copyright 2019 Google LLC
18
18
  * SPDX-License-Identifier: BSD-3-Clause
19
19
  */
20
- const m = globalThis, v = m.ShadowRoot && (m.ShadyCSS === void 0 || m.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, U = Symbol(), S = /* @__PURE__ */ new WeakMap();
21
- let A = class {
20
+ const m = globalThis, v = m.ShadowRoot && (m.ShadyCSS === void 0 || m.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, O = Symbol(), k = /* @__PURE__ */ new WeakMap();
21
+ let R = class {
22
22
  constructor(e, t, r) {
23
- if (this._$cssResult$ = !0, r !== U) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
23
+ if (this._$cssResult$ = !0, r !== O) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
24
24
  this.cssText = e, this.t = t;
25
25
  }
26
26
  get styleSheet() {
@@ -28,7 +28,7 @@ let A = class {
28
28
  const t = this.t;
29
29
  if (v && e === void 0) {
30
30
  const r = t !== void 0 && t.length === 1;
31
- r && (e = S.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && S.set(t, e));
31
+ r && (e = k.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && k.set(t, e));
32
32
  }
33
33
  return e;
34
34
  }
@@ -36,101 +36,99 @@ let A = class {
36
36
  return this.cssText;
37
37
  }
38
38
  };
39
- const R = (o) => new A(typeof o == "string" ? o : o + "", void 0, U), T = (o, e) => {
40
- if (v) o.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
39
+ const M = (i) => new R(typeof i == "string" ? i : i + "", void 0, O), q = (i, e) => {
40
+ if (v) i.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
41
41
  else for (const t of e) {
42
- const r = document.createElement("style"), i = m.litNonce;
43
- i !== void 0 && r.setAttribute("nonce", i), r.textContent = t.cssText, o.appendChild(r);
42
+ const r = document.createElement("style"), o = m.litNonce;
43
+ o !== void 0 && r.setAttribute("nonce", o), r.textContent = t.cssText, i.appendChild(r);
44
44
  }
45
- }, k = v ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((e) => {
45
+ }, E = v ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((e) => {
46
46
  let t = "";
47
47
  for (const r of e.cssRules) t += r.cssText;
48
- return R(t);
49
- })(o) : o;
48
+ return M(t);
49
+ })(i) : i;
50
50
  /**
51
51
  * @license
52
52
  * Copyright 2017 Google LLC
53
53
  * SPDX-License-Identifier: BSD-3-Clause
54
54
  */
55
- const { is: N, defineProperty: q, getOwnPropertyDescriptor: M, getOwnPropertyNames: z, getOwnPropertySymbols: I, getPrototypeOf: D } = Object, h = globalThis, E = h.trustedTypes, j = E ? E.emptyScript : "", g = h.reactiveElementPolyfillSupport, f = (o, e) => o, b = { toAttribute(o, e) {
55
+ const { is: T, defineProperty: N, getOwnPropertyDescriptor: D, getOwnPropertyNames: j, getOwnPropertySymbols: z, getPrototypeOf: I } = Object, p = globalThis, w = p.trustedTypes, L = w ? w.emptyScript : "", g = p.reactiveElementPolyfillSupport, b = (i, e) => i, y = { toAttribute(i, e) {
56
56
  switch (e) {
57
57
  case Boolean:
58
- o = o ? j : null;
58
+ i = i ? L : null;
59
59
  break;
60
60
  case Object:
61
61
  case Array:
62
- o = o == null ? o : JSON.stringify(o);
62
+ i = i == null ? i : JSON.stringify(i);
63
63
  }
64
- return o;
65
- }, fromAttribute(o, e) {
66
- let t = o;
64
+ return i;
65
+ }, fromAttribute(i, e) {
66
+ let t = i;
67
67
  switch (e) {
68
68
  case Boolean:
69
- t = o !== null;
69
+ t = i !== null;
70
70
  break;
71
71
  case Number:
72
- t = o === null ? null : Number(o);
72
+ t = i === null ? null : Number(i);
73
73
  break;
74
74
  case Object:
75
75
  case Array:
76
76
  try {
77
- t = JSON.parse(o);
77
+ t = JSON.parse(i);
78
78
  } catch {
79
79
  t = null;
80
80
  }
81
81
  }
82
82
  return t;
83
- } }, _ = (o, e) => !N(o, e), w = { attribute: !0, type: String, converter: b, reflect: !1, hasChanged: _ };
84
- Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), h.litPropertyMetadata ?? (h.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
85
- class u extends HTMLElement {
83
+ } }, _ = (i, e) => !T(i, e), P = { attribute: !0, type: String, converter: y, reflect: !1, useDefault: !1, hasChanged: _ };
84
+ Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), p.litPropertyMetadata ?? (p.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
85
+ class f extends HTMLElement {
86
86
  static addInitializer(e) {
87
87
  this._$Ei(), (this.l ?? (this.l = [])).push(e);
88
88
  }
89
89
  static get observedAttributes() {
90
90
  return this.finalize(), this._$Eh && [...this._$Eh.keys()];
91
91
  }
92
- static createProperty(e, t = w) {
93
- if (t.state && (t.attribute = !1), this._$Ei(), this.elementProperties.set(e, t), !t.noAccessor) {
94
- const r = Symbol(), i = this.getPropertyDescriptor(e, r, t);
95
- i !== void 0 && q(this.prototype, e, i);
92
+ static createProperty(e, t = P) {
93
+ if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
94
+ const r = Symbol(), o = this.getPropertyDescriptor(e, r, t);
95
+ o !== void 0 && N(this.prototype, e, o);
96
96
  }
97
97
  }
98
98
  static getPropertyDescriptor(e, t, r) {
99
- const { get: i, set: a } = M(this.prototype, e) ?? { get() {
99
+ const { get: o, set: s } = D(this.prototype, e) ?? { get() {
100
100
  return this[t];
101
- }, set(s) {
102
- this[t] = s;
101
+ }, set(a) {
102
+ this[t] = a;
103
103
  } };
104
- return { get() {
105
- return i == null ? void 0 : i.call(this);
106
- }, set(s) {
107
- const l = i == null ? void 0 : i.call(this);
108
- a.call(this, s), this.requestUpdate(e, l, r);
104
+ return { get: o, set(a) {
105
+ const n = o == null ? void 0 : o.call(this);
106
+ s == null || s.call(this, a), this.requestUpdate(e, n, r);
109
107
  }, configurable: !0, enumerable: !0 };
110
108
  }
111
109
  static getPropertyOptions(e) {
112
- return this.elementProperties.get(e) ?? w;
110
+ return this.elementProperties.get(e) ?? P;
113
111
  }
114
112
  static _$Ei() {
115
- if (this.hasOwnProperty(f("elementProperties"))) return;
116
- const e = D(this);
113
+ if (this.hasOwnProperty(b("elementProperties"))) return;
114
+ const e = I(this);
117
115
  e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
118
116
  }
119
117
  static finalize() {
120
- if (this.hasOwnProperty(f("finalized"))) return;
121
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f("properties"))) {
122
- const t = this.properties, r = [...z(t), ...I(t)];
123
- for (const i of r) this.createProperty(i, t[i]);
118
+ if (this.hasOwnProperty(b("finalized"))) return;
119
+ if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(b("properties"))) {
120
+ const t = this.properties, r = [...j(t), ...z(t)];
121
+ for (const o of r) this.createProperty(o, t[o]);
124
122
  }
125
123
  const e = this[Symbol.metadata];
126
124
  if (e !== null) {
127
125
  const t = litPropertyMetadata.get(e);
128
- if (t !== void 0) for (const [r, i] of t) this.elementProperties.set(r, i);
126
+ if (t !== void 0) for (const [r, o] of t) this.elementProperties.set(r, o);
129
127
  }
130
128
  this._$Eh = /* @__PURE__ */ new Map();
131
129
  for (const [t, r] of this.elementProperties) {
132
- const i = this._$Eu(t, r);
133
- i !== void 0 && this._$Eh.set(i, t);
130
+ const o = this._$Eu(t, r);
131
+ o !== void 0 && this._$Eh.set(o, t);
134
132
  }
135
133
  this.elementStyles = this.finalizeStyles(this.styles);
136
134
  }
@@ -138,8 +136,8 @@ class u extends HTMLElement {
138
136
  const t = [];
139
137
  if (Array.isArray(e)) {
140
138
  const r = new Set(e.flat(1 / 0).reverse());
141
- for (const i of r) t.unshift(k(i));
142
- } else e !== void 0 && t.push(k(e));
139
+ for (const o of r) t.unshift(E(o));
140
+ } else e !== void 0 && t.push(E(e));
143
141
  return t;
144
142
  }
145
143
  static _$Eu(e, t) {
@@ -168,7 +166,7 @@ class u extends HTMLElement {
168
166
  }
169
167
  createRenderRoot() {
170
168
  const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
171
- return T(e, this.constructor.elementStyles), e;
169
+ return q(e, this.constructor.elementStyles), e;
172
170
  }
173
171
  connectedCallback() {
174
172
  var e;
@@ -189,33 +187,37 @@ class u extends HTMLElement {
189
187
  attributeChangedCallback(e, t, r) {
190
188
  this._$AK(e, r);
191
189
  }
192
- _$EC(e, t) {
193
- var a;
194
- const r = this.constructor.elementProperties.get(e), i = this.constructor._$Eu(e, r);
195
- if (i !== void 0 && r.reflect === !0) {
196
- const s = (((a = r.converter) == null ? void 0 : a.toAttribute) !== void 0 ? r.converter : b).toAttribute(t, r.type);
197
- this._$Em = e, s == null ? this.removeAttribute(i) : this.setAttribute(i, s), this._$Em = null;
190
+ _$ET(e, t) {
191
+ var s;
192
+ const r = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, r);
193
+ if (o !== void 0 && r.reflect === !0) {
194
+ const a = (((s = r.converter) == null ? void 0 : s.toAttribute) !== void 0 ? r.converter : y).toAttribute(t, r.type);
195
+ this._$Em = e, a == null ? this.removeAttribute(o) : this.setAttribute(o, a), this._$Em = null;
198
196
  }
199
197
  }
200
198
  _$AK(e, t) {
201
- var a;
202
- const r = this.constructor, i = r._$Eh.get(e);
203
- if (i !== void 0 && this._$Em !== i) {
204
- const s = r.getPropertyOptions(i), l = typeof s.converter == "function" ? { fromAttribute: s.converter } : ((a = s.converter) == null ? void 0 : a.fromAttribute) !== void 0 ? s.converter : b;
205
- this._$Em = i, this[i] = l.fromAttribute(t, s.type), this._$Em = null;
199
+ var s, a;
200
+ const r = this.constructor, o = r._$Eh.get(e);
201
+ if (o !== void 0 && this._$Em !== o) {
202
+ const n = r.getPropertyOptions(o), h = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((s = n.converter) == null ? void 0 : s.fromAttribute) !== void 0 ? n.converter : y;
203
+ this._$Em = o;
204
+ const S = h.fromAttribute(t, n.type);
205
+ this[o] = S ?? ((a = this._$Ej) == null ? void 0 : a.get(o)) ?? S, this._$Em = null;
206
206
  }
207
207
  }
208
208
  requestUpdate(e, t, r) {
209
+ var o;
209
210
  if (e !== void 0) {
210
- if (r ?? (r = this.constructor.getPropertyOptions(e)), !(r.hasChanged ?? _)(this[e], t)) return;
211
- this.P(e, t, r);
211
+ const s = this.constructor, a = this[e];
212
+ if (r ?? (r = s.getPropertyOptions(e)), !((r.hasChanged ?? _)(a, t) || r.useDefault && r.reflect && a === ((o = this._$Ej) == null ? void 0 : o.get(e)) && !this.hasAttribute(s._$Eu(e, r)))) return;
213
+ this.C(e, t, r);
212
214
  }
213
- this.isUpdatePending === !1 && (this._$ES = this._$ET());
215
+ this.isUpdatePending === !1 && (this._$ES = this._$EP());
214
216
  }
215
- P(e, t, r) {
216
- this._$AL.has(e) || this._$AL.set(e, t), r.reflect === !0 && this._$Em !== e && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(e);
217
+ C(e, t, { useDefault: r, reflect: o, wrapped: s }, a) {
218
+ r && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, a ?? t ?? this[e]), s !== !0 || a !== void 0) || (this._$AL.has(e) || (this.hasUpdated || r || (t = void 0), this._$AL.set(e, t)), o === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
217
219
  }
218
- async _$ET() {
220
+ async _$EP() {
219
221
  this.isUpdatePending = !0;
220
222
  try {
221
223
  await this._$ES;
@@ -233,21 +235,24 @@ class u extends HTMLElement {
233
235
  if (!this.isUpdatePending) return;
234
236
  if (!this.hasUpdated) {
235
237
  if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
236
- for (const [a, s] of this._$Ep) this[a] = s;
238
+ for (const [s, a] of this._$Ep) this[s] = a;
237
239
  this._$Ep = void 0;
238
240
  }
239
- const i = this.constructor.elementProperties;
240
- if (i.size > 0) for (const [a, s] of i) s.wrapped !== !0 || this._$AL.has(a) || this[a] === void 0 || this.P(a, this[a], s);
241
+ const o = this.constructor.elementProperties;
242
+ if (o.size > 0) for (const [s, a] of o) {
243
+ const { wrapped: n } = a, h = this[s];
244
+ n !== !0 || this._$AL.has(s) || h === void 0 || this.C(s, void 0, a, h);
245
+ }
241
246
  }
242
247
  let e = !1;
243
248
  const t = this._$AL;
244
249
  try {
245
- e = this.shouldUpdate(t), e ? (this.willUpdate(t), (r = this._$EO) == null || r.forEach((i) => {
246
- var a;
247
- return (a = i.hostUpdate) == null ? void 0 : a.call(i);
248
- }), this.update(t)) : this._$EU();
249
- } catch (i) {
250
- throw e = !1, this._$EU(), i;
250
+ e = this.shouldUpdate(t), e ? (this.willUpdate(t), (r = this._$EO) == null || r.forEach((o) => {
251
+ var s;
252
+ return (s = o.hostUpdate) == null ? void 0 : s.call(o);
253
+ }), this.update(t)) : this._$EM();
254
+ } catch (o) {
255
+ throw e = !1, this._$EM(), o;
251
256
  }
252
257
  e && this._$AE(t);
253
258
  }
@@ -256,11 +261,11 @@ class u extends HTMLElement {
256
261
  _$AE(e) {
257
262
  var t;
258
263
  (t = this._$EO) == null || t.forEach((r) => {
259
- var i;
260
- return (i = r.hostUpdated) == null ? void 0 : i.call(r);
264
+ var o;
265
+ return (o = r.hostUpdated) == null ? void 0 : o.call(r);
261
266
  }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
262
267
  }
263
- _$EU() {
268
+ _$EM() {
264
269
  this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
265
270
  }
266
271
  get updateComplete() {
@@ -273,53 +278,53 @@ class u extends HTMLElement {
273
278
  return !0;
274
279
  }
275
280
  update(e) {
276
- this._$Ej && (this._$Ej = this._$Ej.forEach((t) => this._$EC(t, this[t]))), this._$EU();
281
+ this._$Eq && (this._$Eq = this._$Eq.forEach((t) => this._$ET(t, this[t]))), this._$EM();
277
282
  }
278
283
  updated(e) {
279
284
  }
280
285
  firstUpdated(e) {
281
286
  }
282
287
  }
283
- u.elementStyles = [], u.shadowRootOptions = { mode: "open" }, u[f("elementProperties")] = /* @__PURE__ */ new Map(), u[f("finalized")] = /* @__PURE__ */ new Map(), g == null || g({ ReactiveElement: u }), (h.reactiveElementVersions ?? (h.reactiveElementVersions = [])).push("2.0.4");
288
+ f.elementStyles = [], f.shadowRootOptions = { mode: "open" }, f[b("elementProperties")] = /* @__PURE__ */ new Map(), f[b("finalized")] = /* @__PURE__ */ new Map(), g == null || g({ ReactiveElement: f }), (p.reactiveElementVersions ?? (p.reactiveElementVersions = [])).push("2.1.1");
284
289
  /**
285
290
  * @license
286
291
  * Copyright 2017 Google LLC
287
292
  * SPDX-License-Identifier: BSD-3-Clause
288
293
  */
289
- const L = { attribute: !0, type: String, converter: b, reflect: !1, hasChanged: _ }, B = (o = L, e, t) => {
290
- const { kind: r, metadata: i } = t;
291
- let a = globalThis.litPropertyMetadata.get(i);
292
- if (a === void 0 && globalThis.litPropertyMetadata.set(i, a = /* @__PURE__ */ new Map()), a.set(t.name, o), r === "accessor") {
293
- const { name: s } = t;
294
- return { set(l) {
295
- const y = e.get.call(this);
296
- e.set.call(this, l), this.requestUpdate(s, y, o);
297
- }, init(l) {
298
- return l !== void 0 && this.P(s, void 0, o), l;
294
+ const B = { attribute: !0, type: String, converter: y, reflect: !1, hasChanged: _ }, H = (i = B, e, t) => {
295
+ const { kind: r, metadata: o } = t;
296
+ let s = globalThis.litPropertyMetadata.get(o);
297
+ if (s === void 0 && globalThis.litPropertyMetadata.set(o, s = /* @__PURE__ */ new Map()), r === "setter" && ((i = Object.create(i)).wrapped = !0), s.set(t.name, i), r === "accessor") {
298
+ const { name: a } = t;
299
+ return { set(n) {
300
+ const h = e.get.call(this);
301
+ e.set.call(this, n), this.requestUpdate(a, h, i);
302
+ }, init(n) {
303
+ return n !== void 0 && this.C(a, void 0, i, n), n;
299
304
  } };
300
305
  }
301
306
  if (r === "setter") {
302
- const { name: s } = t;
303
- return function(l) {
304
- const y = this[s];
305
- e.call(this, l), this.requestUpdate(s, y, o);
307
+ const { name: a } = t;
308
+ return function(n) {
309
+ const h = this[a];
310
+ e.call(this, n), this.requestUpdate(a, h, i);
306
311
  };
307
312
  }
308
313
  throw Error("Unsupported decorator location: " + r);
309
314
  };
310
- function c(o) {
311
- return (e, t) => typeof t == "object" ? B(o, e, t) : ((r, i, a) => {
312
- const s = i.hasOwnProperty(a);
313
- return i.constructor.createProperty(a, s ? { ...r, wrapped: !0 } : r), s ? Object.getOwnPropertyDescriptor(i, a) : void 0;
314
- })(o, e, t);
315
+ function l(i) {
316
+ return (e, t) => typeof t == "object" ? H(i, e, t) : ((r, o, s) => {
317
+ const a = o.hasOwnProperty(s);
318
+ return o.constructor.createProperty(s, r), a ? Object.getOwnPropertyDescriptor(o, s) : void 0;
319
+ })(i, e, t);
315
320
  }
316
- const H = ':host{display:block}.form-radio{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);width:var(--ucds-form-element-width);max-width:var(--ucds-form-element-maxwidth);--formRadioCheckboxHeight: 1.25rem;--checkmarkHeight: .625rem;--radioHeight: .625rem}.form-radio input[type=checkbox],.form-radio input[type=radio]{position:absolute;opacity:0}.form-radio input[type=checkbox]+label,.form-radio input[type=radio]+label{display:flex;position:relative;width:100%;max-width:555px;padding-left:28px;line-height:var(--formRadioCheckboxHeight);cursor:pointer}.form-radio input[type=checkbox]+label .radio-control,.form-radio input[type=radio]+label .radio-control{content:"";display:block;position:absolute;width:var(--formRadioCheckboxHeight);height:var(--formRadioCheckboxHeight);top:0;left:0;background-color:var(--ucds-color-palette-white);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);transition:background-color .5s ease,border-color .5s ease}.form-radio input[type=checkbox]:hover+label .radio-control,.form-radio input[type=radio]:hover+label .radio-control{border-color:var(--ucds-color-forms-input-border-hover)}.form-radio input[type=checkbox]:active:not(:disabled)+label .radio-control,.form-radio input[type=checkbox]:focus:not(:disabled)+label .radio-control,.form-radio input[type=radio]:active:not(:disabled)+label .radio-control,.form-radio input[type=radio]:focus:not(:disabled)+label .radio-control{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-radio input[type=checkbox]:checked+label .radio-control,.form-radio input[type=radio]:checked+label .radio-control{background-color:var(--ucds-color-forms-input-background-selected);border-color:var(--ucds-color-forms-input-border-selected)}.form-radio input[type=checkbox]:checked+label .radio-control ucds-icon,.form-radio input[type=radio]:checked+label .radio-control ucds-icon{transform:scale(75%);color:var(--ucds-color-icon-primary-inverse)}.form-radio input[type=checkbox]:disabled+label,.form-radio input[type=radio]:disabled+label{color:var(--ucds-color-text-disabled);cursor:default}.form-radio input[type=checkbox]:disabled+label .radio-control,.form-radio input[type=radio]:disabled+label .radio-control{background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-radio input[type=checkbox]:disabled:checked+label .radio-control,.form-radio input[type=radio]:disabled:checked+label .radio-control{background-color:var(--ucds-color-forms-input-background-disabled);border-color:var(--ucds-color-forms-input-border-disabled)}.form-radio input[type=checkbox][error]:not(:disabled)+label .radio-control,.form-radio input[type=checkbox][errors]:not(:disabled)+label .radio-control,.form-radio input[type=radio][error]:not(:disabled)+label .radio-control,.form-radio input[type=radio][errors]:not(:disabled)+label .radio-control{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-radio input[type=checkbox][error]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=checkbox][errors]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=radio][error]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=radio][errors]:not(:disabled)+label .radio-control ucds-icon{color:var(--ucds-color-feedback-error-light)}.form-radio input[type=radio]+label .radio-control{border-radius:50%}';
317
- var F = Object.defineProperty, J = Object.getOwnPropertyDescriptor, d = (o, e, t, r) => {
318
- for (var i = r > 1 ? void 0 : r ? J(e, t) : e, a = o.length - 1, s; a >= 0; a--)
319
- (s = o[a]) && (i = (r ? s(e, t, i) : s(i)) || i);
320
- return r && i && F(e, t, i), i;
321
+ const F = ':host{display:block}.form-radio{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);width:var(--ucds-form-element-width);max-width:var(--ucds-form-element-maxwidth);--formRadioCheckboxHeight: 1.25rem;--checkmarkHeight: .625rem;--radioHeight: .625rem}.form-radio input[type=checkbox],.form-radio input[type=radio]{position:absolute;opacity:0}.form-radio input[type=checkbox]+label,.form-radio input[type=radio]+label{display:flex;position:relative;width:100%;max-width:555px;padding-left:28px;line-height:var(--formRadioCheckboxHeight);cursor:pointer}.form-radio input[type=checkbox]+label .radio-control,.form-radio input[type=radio]+label .radio-control{content:"";display:block;position:absolute;width:var(--formRadioCheckboxHeight);height:var(--formRadioCheckboxHeight);top:0;left:0;background-color:var(--ucds-color-palette-white);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);transition:background-color .5s ease,border-color .5s ease}.form-radio input[type=checkbox]:hover+label .radio-control,.form-radio input[type=radio]:hover+label .radio-control{border-color:var(--ucds-color-forms-input-border-hover)}.form-radio input[type=checkbox]:active:not(:disabled)+label .radio-control,.form-radio input[type=checkbox]:focus:not(:disabled)+label .radio-control,.form-radio input[type=radio]:active:not(:disabled)+label .radio-control,.form-radio input[type=radio]:focus:not(:disabled)+label .radio-control{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-radio input[type=checkbox]:checked+label .radio-control,.form-radio input[type=radio]:checked+label .radio-control{background-color:var(--ucds-color-forms-input-background-selected);border-color:var(--ucds-color-forms-input-border-selected)}.form-radio input[type=checkbox]:checked+label .radio-control ucds-icon,.form-radio input[type=radio]:checked+label .radio-control ucds-icon{transform:scale(75%);color:var(--ucds-color-icon-primary-inverse)}.form-radio input[type=checkbox]:disabled+label,.form-radio input[type=radio]:disabled+label{color:var(--ucds-color-text-disabled);cursor:default}.form-radio input[type=checkbox]:disabled+label .radio-control,.form-radio input[type=radio]:disabled+label .radio-control{background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-radio input[type=checkbox]:disabled:checked+label .radio-control,.form-radio input[type=radio]:disabled:checked+label .radio-control{background-color:var(--ucds-color-forms-input-background-disabled);border-color:var(--ucds-color-forms-input-border-disabled)}.form-radio input[type=checkbox][error]:not(:disabled)+label .radio-control,.form-radio input[type=checkbox][errors]:not(:disabled)+label .radio-control,.form-radio input[type=radio][error]:not(:disabled)+label .radio-control,.form-radio input[type=radio][errors]:not(:disabled)+label .radio-control{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-radio input[type=checkbox][error]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=checkbox][errors]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=radio][error]:not(:disabled)+label .radio-control ucds-icon,.form-radio input[type=radio][errors]:not(:disabled)+label .radio-control ucds-icon{color:var(--ucds-color-feedback-error-light)}.form-radio input[type=radio]+label .radio-control{border-radius:50%}';
322
+ var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, c = (i, e, t, r) => {
323
+ for (var o = r > 1 ? void 0 : r ? K(e, t) : e, s = i.length - 1, a; s >= 0; s--)
324
+ (a = i[s]) && (o = (r ? a(e, t, o) : a(o)) || o);
325
+ return r && o && J(e, t, o), o;
321
326
  };
322
- let n = class extends P {
327
+ let d = class extends x {
323
328
  constructor() {
324
329
  super(), this.radioID = "radio", this.radioName = "", this.value = "", this.checked = !1, this.disabled = !1, this.required = !1, this.errors = !1, this.error = !1, this.internals = this.attachInternals();
325
330
  }
@@ -330,7 +335,7 @@ let n = class extends P {
330
335
  console.error(`${this.localName}: Property 'name' is required for radio button group functionality and was not set.`);
331
336
  return;
332
337
  }
333
- const o = this.form || this.getRootNode(), e = Array.from(o.querySelectorAll(this.localName));
338
+ const i = this.form || this.getRootNode(), e = Array.from(i.querySelectorAll(this.localName));
334
339
  for (const r of e)
335
340
  r !== this && r.form === this.form && r.radioName === this.radioName && (r.checked = !1, (t = r._updateInternals) == null || t.call(r));
336
341
  }
@@ -338,31 +343,31 @@ let n = class extends P {
338
343
  _updateInternals() {
339
344
  var e;
340
345
  this.internals.setFormValue(this.checked ? this.value : null, this.checked ? "true" : ""), this.setAttribute("aria-checked", String(this.checked));
341
- const o = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
342
- o.checked = this.checked;
346
+ const i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input");
347
+ i.checked = this.checked;
343
348
  }
344
349
  // Handle change event.
345
- _handleChange({ target: o }) {
346
- const e = o;
350
+ _handleChange({ target: i }) {
351
+ const e = i;
347
352
  this.checked = e.checked, this._updateInternals(), this._uncheckOtherRadios();
348
353
  }
349
354
  // Initialize component and warn if required properties have not been set.
350
- firstUpdated(o) {
351
- super.firstUpdated(o), this.form = this.internals.form, this._updateInternals(), this.radioName || console.error(`${this.localName}: Property 'name' is required and was not set.`), this.value || console.error(`${this.localName}: Property 'value' is required and was not set.`);
355
+ firstUpdated(i) {
356
+ super.firstUpdated(i), this.form = this.internals.form, this._updateInternals(), this.radioName || console.error(`${this.localName}: Property 'name' is required and was not set.`), this.value || console.error(`${this.localName}: Property 'value' is required and was not set.`);
352
357
  }
353
358
  // Catch non-click changes.
354
- update(o) {
355
- super.update(o), o.has("checked") && o.get("checked") !== void 0 && this._updateInternals();
359
+ update(i) {
360
+ super.update(i), i.has("checked") && i.get("checked") !== void 0 && this._updateInternals();
356
361
  }
357
362
  // Reset form state.
358
363
  formResetCallback() {
359
364
  this.checked = !1, this._updateInternals();
360
365
  }
361
- formStateRestoreCallback(o) {
362
- this.checked = String(o).toLowerCase() === "true", this.checked && this._uncheckOtherRadios();
366
+ formStateRestoreCallback(i) {
367
+ this.checked = String(i).toLowerCase() === "true", this.checked && this._uncheckOtherRadios();
363
368
  }
364
369
  render() {
365
- return p`
370
+ return u`
366
371
  <div class="form-radio">
367
372
  <input
368
373
  type="radio"
@@ -378,55 +383,55 @@ let n = class extends P {
378
383
  />
379
384
  <label for="${this.radioID}" ?disabled=${this.disabled}>
380
385
  <span class="radio-control">
381
- ${this.checked ? p`<ucds-icon name="dot" size="16"></ucds-icon>` : ""}
386
+ ${this.checked ? u`<ucds-icon name="dot" size="16"></ucds-icon>` : ""}
382
387
  </span>
383
- <span><slot>Radio Label</slot>${this.required ? p`${x.requiredAsteriskTemplate()}` : $}</span>
388
+ <span><slot>Radio Label</slot>${this.required ? u`${C.requiredAsteriskTemplate()}` : $}</span>
384
389
  </label>
385
- ${this.error && !this.disabled ? p`<form-error-message text="${this.errorText}"></form-error-message>` : $}
386
- ${this.helpText ? p`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : $}
390
+ ${this.error && !this.disabled ? u`<form-error-message text="${this.errorText}"></form-error-message>` : $}
391
+ ${this.helpText ? u`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : $}
387
392
  </div>
388
393
  `;
389
394
  }
390
395
  };
391
- n.styles = [
392
- P.styles,
396
+ d.styles = [
393
397
  x.styles,
394
- C(H)
398
+ C.styles,
399
+ U(F)
395
400
  ];
396
- n.formAssociated = !0;
397
- d([
398
- c({ type: String, attribute: "input-id" })
399
- ], n.prototype, "radioID", 2);
400
- d([
401
- c({ type: String, attribute: "name" })
402
- ], n.prototype, "radioName", 2);
403
- d([
404
- c({ type: String })
405
- ], n.prototype, "value", 2);
406
- d([
407
- c({ type: Boolean, reflect: !0 })
408
- ], n.prototype, "checked", 2);
409
- d([
410
- c({ type: Boolean, reflect: !0 })
411
- ], n.prototype, "disabled", 2);
412
- d([
413
- c({ type: Boolean, reflect: !0 })
414
- ], n.prototype, "required", 2);
415
- d([
416
- c({ type: Boolean, reflect: !0 })
417
- ], n.prototype, "errors", 2);
418
- d([
419
- c({ type: Boolean, reflect: !0 })
420
- ], n.prototype, "error", 2);
421
- d([
422
- c({ type: String, attribute: "error-text" })
423
- ], n.prototype, "errorText", 2);
424
- d([
425
- c({ type: String, attribute: "help-text" })
426
- ], n.prototype, "helpText", 2);
427
- n = d([
428
- O("ucds-radio")
429
- ], n);
401
+ d.formAssociated = !0;
402
+ c([
403
+ l({ type: String, attribute: "input-id" })
404
+ ], d.prototype, "radioID", 2);
405
+ c([
406
+ l({ type: String, attribute: "name" })
407
+ ], d.prototype, "radioName", 2);
408
+ c([
409
+ l({ type: String })
410
+ ], d.prototype, "value", 2);
411
+ c([
412
+ l({ type: Boolean, reflect: !0 })
413
+ ], d.prototype, "checked", 2);
414
+ c([
415
+ l({ type: Boolean, reflect: !0 })
416
+ ], d.prototype, "disabled", 2);
417
+ c([
418
+ l({ type: Boolean, reflect: !0 })
419
+ ], d.prototype, "required", 2);
420
+ c([
421
+ l({ type: Boolean, reflect: !0 })
422
+ ], d.prototype, "errors", 2);
423
+ c([
424
+ l({ type: Boolean, reflect: !0 })
425
+ ], d.prototype, "error", 2);
426
+ c([
427
+ l({ type: String, attribute: "error-text" })
428
+ ], d.prototype, "errorText", 2);
429
+ c([
430
+ l({ type: String, attribute: "help-text" })
431
+ ], d.prototype, "helpText", 2);
432
+ d = c([
433
+ A("ucds-radio")
434
+ ], d);
430
435
  export {
431
- n as Radio
436
+ d as Radio
432
437
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucalgary-design-system/radio",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -10,11 +10,11 @@
10
10
  "require": "./index.js"
11
11
  }
12
12
  },
13
- "dependencies": {
14
- "@ucalgary-design-system/core": "^1.0.1",
15
- "@ucalgary-design-system/helper-components": "^1.0.1",
16
- "@ucalgary-design-system/icon": "^1.0.1",
17
- "@ucalgary-design-system/tokens": "^1.0.1",
13
+ "peerDependencies": {
14
+ "@ucalgary-design-system/core": "^1.0.3",
15
+ "@ucalgary-design-system/helper-components": "^1.0.2",
16
+ "@ucalgary-design-system/icon": "^1.0.3",
17
+ "@ucalgary-design-system/tokens": "^1.0.3",
18
18
  "lit": "^3.2.1"
19
19
  },
20
20
  "description": "A web component for Radio",
package/radio.css CHANGED
@@ -1 +1 @@
1
- :root{--ucds-color-palette-brand-red: #d6001c;--ucds-color-palette-brand-gold: #ffcd00;--ucds-color-palette-brand-light-orange: #ffa300;--ucds-color-palette-brand-dark-orange: #ff7b1f;--ucds-color-palette-brand-berry: #9c0534;--ucds-color-palette-brand-rubine: #ce0058;--ucds-color-palette-brand-brown: #6b3529;--ucds-color-palette-brand-teal: #47a67c;--ucds-color-palette-white: #ffffff;--ucds-color-palette-black: #000000;--ucds-color-palette-gray-100: #2d2d2d;--ucds-color-palette-gray-200: #3d3d3d;--ucds-color-palette-gray-250: #4d4d4d;--ucds-color-palette-gray-300: #5d5d5d;--ucds-color-palette-gray-400: #8d8d8d;--ucds-color-palette-gray-500: #adadad;--ucds-color-palette-gray-600: #c0c0c0;--ucds-color-palette-gray-700: #d8d8d8;--ucds-color-palette-gray-800: #e5e5e5;--ucds-color-palette-gray-900: #f4f4f4;--ucds-color-palette-red-100: #3d0910;--ucds-color-palette-red-200: #5c0e18;--ucds-color-palette-red-300: #7a111f;--ucds-color-palette-red-400: #991022;--ucds-color-palette-red-500: #b70b21;--ucds-color-palette-red-600: #d6001c;--ucds-color-palette-red-700: #df3047;--ucds-color-palette-red-800: #ee0e2c;--ucds-color-palette-red-900: #ffadad;--ucds-color-palette-berry-600: #9c0534;--ucds-color-palette-berry-700: #a6192e;--ucds-color-palette-berry-800: #ea7b8a;--ucds-color-palette-berry-900: #f6ebed;--ucds-color-palette-rubine-600: #ce0058;--ucds-color-palette-rubine-800: #ed0a72;--ucds-color-palette-rubine-900: #ffa3c9;--ucds-color-palette-dark-orange-200: #6b3529;--ucds-color-palette-dark-orange-600: #ff671f;--ucds-color-palette-dark-orange-900: #fff2e9;--ucds-color-palette-light-orange-200: #614e00;--ucds-color-palette-light-orange-600: #ffa300;--ucds-color-palette-light-orange-900: #fff6e7;--ucds-color-palette-brown-600: #6c3302;--ucds-color-palette-brown-900: #ca7d68;--ucds-color-surface-page: #ffffff;--ucds-color-surface-primary: #ffffff;--ucds-color-border-neutral: #8d8d8d;--ucds-color-text-primary: #2d2d2d;--ucds-color-text-primary-inverse: #ffffff;--ucds-color-text-secondary: #5d5d5d;--ucds-color-text-error: #df3047;--ucds-color-text-disabled: #e5e5e5;--ucds-color-icon-primary: #2d2d2d;--ucds-color-icon-primary-inverse: #ffffff;--ucds-color-forms-input-background-rest: #ffffff;--ucds-color-forms-input-background-hover: #9c0534;--ucds-color-forms-input-background-active: #9c0534;--ucds-color-forms-input-background-selected: #9c0534;--ucds-color-forms-input-background-disabled: #e5e5e5;--ucds-color-forms-input-background-error: rgb(255 173 173 / 50%);--ucds-color-forms-input-border-rest: #8d8d8d;--ucds-color-forms-input-border-hover: #3d3d3d;--ucds-color-forms-input-border-active: #3d3d3d;--ucds-color-forms-input-border-selected: #9c0534;--ucds-color-forms-input-border-disabled: #e5e5e5;--ucds-color-forms-input-border-error: #df3047;--ucds-color-forms-input-element-disabled: #f4f4f4;--ucds-color-action-rest: #d6001c;--ucds-color-action-hover: #991022;--ucds-color-action-active: #991022;--ucds-color-action-focus: #4d4d4d;--ucds-color-action-visited: #991022;--ucds-color-action-secondary-rest: #2d2d2d;--ucds-color-action-secondary-hover: #4d4d4d;--ucds-color-action-secondary-active: #4d4d4d;--ucds-color-action-secondary-focus: #4d4d4d;--ucds-color-action-inverse-rest: #ffffff;--ucds-color-action-inverse-hover: #e5e5e5;--ucds-color-action-inverse-active: #e5e5e5;--ucds-color-action-inverse-focus: #ffffff;--ucds-color-feedback-error-light: #df3047;--ucds-color-feedback-error-background-light: rgb(255 173 173 / 50%);--ucds-font-base-size: 16px;--ucds-font-base-line-height: 24px;--ucds-font-base-weight-light: 200;--ucds-font-base-weight-normal: 400;--ucds-font-base-weight-medium: 500;--ucds-font-base-weight-semibold: 600;--ucds-font-base-weight-bold: 700;--ucds-font-sans-serif-family: "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-serif-family: "Museo Slab", "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-form-element-border-radius: 8px;--ucds-form-element-border-width: 2px;--ucds-form-element-height: 48px;--ucds-form-element-width: 100%;--ucds-form-element-maxwidth: 555px;--ucds-form-element-horizontal-padding: 16px;--ucds-form-component-intra-spacing: 8px;--ucds-form-component-inter-spacing: 16px}
1
+ :root{--ucds-color-palette-brand-red: #d6001c;--ucds-color-palette-brand-gold: #ffcd00;--ucds-color-palette-brand-light-orange: #ffa300;--ucds-color-palette-brand-dark-orange: #ff671f;--ucds-color-palette-brand-rubine: #ce0058;--ucds-color-palette-brand-berry: #9c0534;--ucds-color-palette-brand-brown: #6b3529;--ucds-color-palette-brand-teal: #47a67c;--ucds-color-palette-black: #000000;--ucds-color-palette-gray-100: #2d2d2d;--ucds-color-palette-gray-200: #3d3d3d;--ucds-color-palette-gray-250: #4d4d4d;--ucds-color-palette-gray-300: #5d5d5d;--ucds-color-palette-gray-400: #8d8d8d;--ucds-color-palette-gray-500: #adadad;--ucds-color-palette-gray-600: #c0c0c0;--ucds-color-palette-gray-700: #d8d8d8;--ucds-color-palette-gray-800: #e5e5e5;--ucds-color-palette-gray-900: #f4f4f4;--ucds-color-palette-white: #ffffff;--ucds-color-palette-red-100: #3d0910;--ucds-color-palette-red-200: #5c0e18;--ucds-color-palette-red-300: #7a111f;--ucds-color-palette-red-400: #991022;--ucds-color-palette-red-500: #b70b21;--ucds-color-palette-red-600: #d6001c;--ucds-color-palette-red-700: #df3047;--ucds-color-palette-red-800: #ee0e2c;--ucds-color-palette-red-900: #ffadad;--ucds-color-palette-light-orange-200: #614e00;--ucds-color-palette-light-orange-600: #ffa300;--ucds-color-palette-light-orange-900: #fff6e7;--ucds-color-palette-dark-orange-200: #6b3529;--ucds-color-palette-dark-orange-600: #ff671f;--ucds-color-palette-dark-orange-900: #fff2e9;--ucds-color-palette-rubine-600: #ce0058;--ucds-color-palette-rubine-800: #ed0a72;--ucds-color-palette-rubine-900: #ffa3c9;--ucds-color-palette-berry-600: #9c0534;--ucds-color-palette-berry-700: #a6192e;--ucds-color-palette-berry-800: #ea7b8a;--ucds-color-palette-berry-900: #f6ebed;--ucds-color-palette-brown-600: #6b3529;--ucds-color-palette-brown-900: #ca7d68;--ucds-color-palette-teal-600: #47a67c;--ucds-color-palette-teal-900: #f4faf7;--ucds-color-accent-gray-tint-background: #f4f4f4;--ucds-color-accent-gray-tint-icon: #8d8d8d;--ucds-color-accent-red-background: #d6001c;--ucds-color-accent-red-icon: #ffadad;--ucds-color-accent-light-orange-background: #ffa300;--ucds-color-accent-light-orange-icon: #614e00;--ucds-color-accent-light-orange-tint-background: #fff6e7;--ucds-color-accent-light-orange-tint-icon: #ffa300;--ucds-color-accent-dark-orange-background: #ff671f;--ucds-color-accent-dark-orange-icon: #6b3529;--ucds-color-accent-dark-orange-tint-background: #fff2e9;--ucds-color-accent-dark-orange-tint-icon: #ff671f;--ucds-color-accent-rubine-background: #ce0058;--ucds-color-accent-rubine-icon: #ffa3c9;--ucds-color-accent-berry-background: #9c0534;--ucds-color-accent-berry-icon: #ea7b8a;--ucds-color-accent-berry-tint-background: #f6ebed;--ucds-color-accent-berry-tint-icon: #9c0534;--ucds-color-accent-brown-background: #6b3529;--ucds-color-accent-brown-icon: #ca7d68;--ucds-color-accent-teal-tint-background: #f4faf7;--ucds-color-accent-teal-tint-icon: #47a67c;--ucds-color-accent-taupe-tint-background: #fbf8f5;--ucds-color-accent-taupe-tint-icon: #d3ac8b;--ucds-color-surface-page: #ffffff;--ucds-color-surface-primary: #ffffff;--ucds-color-border-neutral: #8d8d8d;--ucds-color-text-primary: #2d2d2d;--ucds-color-text-primary-inverse: #ffffff;--ucds-color-text-secondary: #5d5d5d;--ucds-color-text-disabled: #e5e5e5;--ucds-color-icon-primary: #2d2d2d;--ucds-color-icon-primary-inverse: #ffffff;--ucds-color-forms-input-background-rest: #ffffff;--ucds-color-forms-input-background-hover: #9c0534;--ucds-color-forms-input-background-active: #9c0534;--ucds-color-forms-input-background-selected: #9c0534;--ucds-color-forms-input-background-disabled: #e5e5e5;--ucds-color-forms-input-border-rest: #8d8d8d;--ucds-color-forms-input-border-hover: #3d3d3d;--ucds-color-forms-input-border-active: #3d3d3d;--ucds-color-forms-input-border-selected: #9c0534;--ucds-color-forms-input-border-disabled: #e5e5e5;--ucds-color-forms-input-element-disabled: #f4f4f4;--ucds-color-action-rest: #d6001c;--ucds-color-action-hover: #991022;--ucds-color-action-active: #991022;--ucds-color-action-focus: #4d4d4d;--ucds-color-action-visited: #991022;--ucds-color-action-selected: #9c0534;--ucds-color-action-secondary-rest: #2d2d2d;--ucds-color-action-secondary-hover: #4d4d4d;--ucds-color-action-secondary-active: #4d4d4d;--ucds-color-action-secondary-focus: #4d4d4d;--ucds-color-action-inverse-rest: #ffffff;--ucds-color-action-inverse-hover: #e5e5e5;--ucds-color-action-inverse-active: #e5e5e5;--ucds-color-action-inverse-focus: #ffffff;--ucds-color-feedback-error-light: #df3047;--ucds-color-feedback-error-background-light: rgb(255 173 173 / 50%);--ucds-font-base-size: 16px;--ucds-font-base-line-height: 24px;--ucds-font-family-sans-serif: "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-family-serif: "Museo Slab", "Proxima Nova", Arial, Helvetica, sans-serif;--ucds-font-weight-regular: 400;--ucds-font-weight-medium: 500;--ucds-font-weight-semibold: 600;--ucds-font-weight-bold: 700;--ucds-font-paragraph-spacing: 16px;--ucds-font-letter-spacing-eyebrow: 2px;--ucds-responsive-spacing-gap-default-desktop: 32px;--ucds-responsive-spacing-gap-default-tablet: 32px;--ucds-responsive-spacing-gap-default-mobile: 24px;--ucds-responsive-spacing-gap-section-desktop: 64px;--ucds-responsive-spacing-gap-section-tablet: 64px;--ucds-responsive-spacing-gap-section-mobile: 48px;--ucds-responsive-spacing-gap-container-desktop: 48px;--ucds-responsive-spacing-gap-container-tablet: 48px;--ucds-responsive-spacing-gap-container-mobile: 32px;--ucds-responsive-spacing-gap-h1h2-paragraph-desktop: 16px;--ucds-responsive-spacing-gap-h1h2-paragraph-tablet: 16px;--ucds-responsive-spacing-gap-h1h2-paragraph-mobile: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-desktop: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-tablet: 8px;--ucds-responsive-spacing-gap-h3h4-paragraph-mobile: 8px;--ucds-responsive-typography-font-size-display-level-0-desktop: 56px;--ucds-responsive-typography-font-size-display-level-0-tablet: 56px;--ucds-responsive-typography-font-size-display-level-0-mobile: 48px;--ucds-responsive-typography-font-size-display-level-1-desktop: 48px;--ucds-responsive-typography-font-size-display-level-1-tablet: 48px;--ucds-responsive-typography-font-size-display-level-1-mobile: 40px;--ucds-responsive-typography-font-size-display-level-2-desktop: 36px;--ucds-responsive-typography-font-size-display-level-2-tablet: 36px;--ucds-responsive-typography-font-size-display-level-2-mobile: 32px;--ucds-responsive-typography-font-size-heading-level-1-desktop: 48px;--ucds-responsive-typography-font-size-heading-level-1-tablet: 48px;--ucds-responsive-typography-font-size-heading-level-1-mobile: 40px;--ucds-responsive-typography-font-size-heading-level-2-desktop: 36px;--ucds-responsive-typography-font-size-heading-level-2-tablet: 36px;--ucds-responsive-typography-font-size-heading-level-2-mobile: 32px;--ucds-responsive-typography-font-size-heading-level-3-desktop: 28px;--ucds-responsive-typography-font-size-heading-level-3-tablet: 28px;--ucds-responsive-typography-font-size-heading-level-3-mobile: 24px;--ucds-responsive-typography-font-size-heading-level-4-desktop: 24px;--ucds-responsive-typography-font-size-heading-level-4-tablet: 24px;--ucds-responsive-typography-font-size-heading-level-4-mobile: 20px;--ucds-responsive-typography-font-size-title-desktop: 20px;--ucds-responsive-typography-font-size-title-tablet: 20px;--ucds-responsive-typography-font-size-title-mobile: 18px;--ucds-responsive-typography-font-size-body-large-desktop: 20px;--ucds-responsive-typography-font-size-body-large-tablet: 20px;--ucds-responsive-typography-font-size-body-large-mobile: 18px;--ucds-responsive-typography-font-size-body-medium-desktop: 16px;--ucds-responsive-typography-font-size-body-medium-tablet: 16px;--ucds-responsive-typography-font-size-body-medium-mobile: 16px;--ucds-responsive-typography-font-size-body-small-desktop: 14px;--ucds-responsive-typography-font-size-body-small-tablet: 14px;--ucds-responsive-typography-font-size-body-small-mobile: 14px;--ucds-responsive-typography-font-size-micro-desktop: 12px;--ucds-responsive-typography-font-size-micro-tablet: 12px;--ucds-responsive-typography-font-size-micro-mobile: 12px;--ucds-responsive-typography-line-height-display-level-0-desktop: 64px;--ucds-responsive-typography-line-height-display-level-0-tablet: 64px;--ucds-responsive-typography-line-height-display-level-0-mobile: 56px;--ucds-responsive-typography-line-height-display-level-1-desktop: 56px;--ucds-responsive-typography-line-height-display-level-1-tablet: 56px;--ucds-responsive-typography-line-height-display-level-1-mobile: 48px;--ucds-responsive-typography-line-height-display-level-2-desktop: 48px;--ucds-responsive-typography-line-height-display-level-2-tablet: 48px;--ucds-responsive-typography-line-height-display-level-2-mobile: 40px;--ucds-responsive-typography-line-height-heading-level-1-desktop: 56px;--ucds-responsive-typography-line-height-heading-level-1-tablet: 56px;--ucds-responsive-typography-line-height-heading-level-1-mobile: 48px;--ucds-responsive-typography-line-height-heading-level-2-desktop: 48px;--ucds-responsive-typography-line-height-heading-level-2-tablet: 48px;--ucds-responsive-typography-line-height-heading-level-2-mobile: 40px;--ucds-responsive-typography-line-height-heading-level-3-desktop: 32px;--ucds-responsive-typography-line-height-heading-level-3-tablet: 32px;--ucds-responsive-typography-line-height-heading-level-3-mobile: 28px;--ucds-responsive-typography-line-height-heading-level-4-desktop: 28px;--ucds-responsive-typography-line-height-heading-level-4-tablet: 28px;--ucds-responsive-typography-line-height-heading-level-4-mobile: 28px;--ucds-responsive-typography-line-height-title-desktop: 28px;--ucds-responsive-typography-line-height-title-tablet: 28px;--ucds-responsive-typography-line-height-title-mobile: 28px;--ucds-responsive-typography-line-height-body-large-desktop: 28px;--ucds-responsive-typography-line-height-body-large-tablet: 28px;--ucds-responsive-typography-line-height-body-large-mobile: 24px;--ucds-responsive-typography-line-height-body-medium-desktop: 24px;--ucds-responsive-typography-line-height-body-medium-tablet: 24px;--ucds-responsive-typography-line-height-body-medium-mobile: 24px;--ucds-responsive-typography-line-height-body-small-desktop: 20px;--ucds-responsive-typography-line-height-body-small-tablet: 20px;--ucds-responsive-typography-line-height-body-small-mobile: 20px;--ucds-responsive-typography-line-height-micro-desktop: 16px;--ucds-responsive-typography-line-height-micro-tablet: 16px;--ucds-responsive-typography-line-height-micro-mobile: 16px;--ucds-shape-border-radius: 8px;--ucds-shape-border-width: 2px;--ucds-shape-border-focus-radius: 10px;--ucds-shape-border-focus-width: 2px;--ucds-form-element-border-radius: 8px;--ucds-form-element-border-width: 2px;--ucds-form-element-height: 48px;--ucds-form-element-width: 100%;--ucds-form-element-maxwidth: 555px;--ucds-form-element-horizontal-padding: 16px;--ucds-form-component-intra-spacing: 8px;--ucds-form-component-inter-spacing: 16px}