@ucalgary-design-system/text-input 1.0.4 → 1.0.5

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 +8 -0
  2. package/README.md +2 -0
  3. package/index.js +372 -56
  4. package/package.json +2 -2
  5. package/text-input.css +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @ucalgary-design-system/text-input
2
2
 
3
+ ## 1.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - 4c0950e: Added missing token injector to inject tokens into document head.
8
+ - Updated dependencies [4c0950e]
9
+ - @ucalgary-design-system/core@1.0.5
10
+
3
11
  ## 1.0.4
4
12
 
5
13
  ### Patch Changes
package/README.md CHANGED
@@ -24,6 +24,8 @@ Use the component in your HTML:
24
24
  <ucds-text-input></ucds-text-input>
25
25
  ```
26
26
 
27
+ > 💡 Our components automatically load global design tokens when first used. You don’t need to import them manually!
28
+
27
29
  ## Development
28
30
 
29
31
  Build the component:
package/index.js CHANGED
@@ -1,36 +1,351 @@
1
- import { unsafeCSS as h, nothing as a, html as d } from "lit";
2
- import { property as l, customElement as f } from "lit/decorators.js";
3
- import { BaseElement as p } from "@ucalgary-design-system/core";
1
+ import { BaseElement as U, injectGlobalTokens as O } from "@ucalgary-design-system/core";
2
+ import { unsafeCSS as A, nothing as m, html as y } from "lit";
4
3
  import "@ucalgary-design-system/helper-components";
5
- const m = ":host{display:block}.form-text{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);align-items:start;max-width:var(--ucds-form-element-maxwidth)}.form-text input{display:block;height:var(--ucds-form-element-height);width:var(--ucds-form-element-width);padding-left:var(--ucds-form-element-horizontal-padding);padding-right:var(--ucds-form-element-horizontal-padding);line-height:16px;background-color:var(--ucds-color-forms-input-background-rest);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);border-radius:var(--ucds-form-element-border-radius);transition:border-color .5s ease;text-align:left}.form-text input::-moz-placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input::placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input[error]{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-text input:hover{border-color:var(--ucds-color-forms-input-border-hover)}.form-text input:focus{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-text.disabled input{color:var(--ucds-color-text-disabled);background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-text.disabled input::-moz-placeholder{color:var(--ucds-color-text-disabled)}.form-text.disabled input::placeholder{color:var(--ucds-color-text-disabled)}";
6
- var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, r, n, s) => {
7
- for (var i = s > 1 ? void 0 : s ? v(r, n) : r, u = t.length - 1, c; u >= 0; u--)
8
- (c = t[u]) && (i = (s ? c(r, n, i) : c(i)) || i);
9
- return s && i && b(r, n, i), i;
4
+ /**
5
+ * @license
6
+ * Copyright 2017 Google LLC
7
+ * SPDX-License-Identifier: BSD-3-Clause
8
+ */
9
+ const T = (i) => (t, e) => {
10
+ e !== void 0 ? e.addInitializer(() => {
11
+ customElements.define(i, t);
12
+ }) : customElements.define(i, t);
10
13
  };
11
- let e = class extends p {
14
+ /**
15
+ * @license
16
+ * Copyright 2019 Google LLC
17
+ * SPDX-License-Identifier: BSD-3-Clause
18
+ */
19
+ const b = globalThis, g = b.ShadowRoot && (b.ShadyCSS === void 0 || b.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, C = Symbol(), S = /* @__PURE__ */ new WeakMap();
20
+ let k = class {
21
+ constructor(t, e, r) {
22
+ if (this._$cssResult$ = !0, r !== C) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
23
+ this.cssText = t, this.t = e;
24
+ }
25
+ get styleSheet() {
26
+ let t = this.o;
27
+ const e = this.t;
28
+ if (g && t === void 0) {
29
+ const r = e !== void 0 && e.length === 1;
30
+ r && (t = S.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), r && S.set(e, t));
31
+ }
32
+ return t;
33
+ }
34
+ toString() {
35
+ return this.cssText;
36
+ }
37
+ };
38
+ const M = (i) => new k(typeof i == "string" ? i : i + "", void 0, C), R = (i, t) => {
39
+ if (g) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
40
+ else for (const e of t) {
41
+ const r = document.createElement("style"), s = b.litNonce;
42
+ s !== void 0 && r.setAttribute("nonce", s), r.textContent = e.cssText, i.appendChild(r);
43
+ }
44
+ }, w = g ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
45
+ let e = "";
46
+ for (const r of t.cssRules) e += r.cssText;
47
+ return M(e);
48
+ })(i) : i;
49
+ /**
50
+ * @license
51
+ * Copyright 2017 Google LLC
52
+ * SPDX-License-Identifier: BSD-3-Clause
53
+ */
54
+ const { is: q, defineProperty: z, getOwnPropertyDescriptor: j, getOwnPropertyNames: D, getOwnPropertySymbols: I, getPrototypeOf: L } = Object, c = globalThis, P = c.trustedTypes, B = P ? P.emptyScript : "", v = c.reactiveElementPolyfillSupport, f = (i, t) => i, $ = { toAttribute(i, t) {
55
+ switch (t) {
56
+ case Boolean:
57
+ i = i ? B : null;
58
+ break;
59
+ case Object:
60
+ case Array:
61
+ i = i == null ? i : JSON.stringify(i);
62
+ }
63
+ return i;
64
+ }, fromAttribute(i, t) {
65
+ let e = i;
66
+ switch (t) {
67
+ case Boolean:
68
+ e = i !== null;
69
+ break;
70
+ case Number:
71
+ e = i === null ? null : Number(i);
72
+ break;
73
+ case Object:
74
+ case Array:
75
+ try {
76
+ e = JSON.parse(i);
77
+ } catch {
78
+ e = null;
79
+ }
80
+ }
81
+ return e;
82
+ } }, _ = (i, t) => !q(i, t), x = { attribute: !0, type: String, converter: $, reflect: !1, useDefault: !1, hasChanged: _ };
83
+ Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), c.litPropertyMetadata ?? (c.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
84
+ class u extends HTMLElement {
85
+ static addInitializer(t) {
86
+ this._$Ei(), (this.l ?? (this.l = [])).push(t);
87
+ }
88
+ static get observedAttributes() {
89
+ return this.finalize(), this._$Eh && [...this._$Eh.keys()];
90
+ }
91
+ static createProperty(t, e = x) {
92
+ if (e.state && (e.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((e = Object.create(e)).wrapped = !0), this.elementProperties.set(t, e), !e.noAccessor) {
93
+ const r = Symbol(), s = this.getPropertyDescriptor(t, r, e);
94
+ s !== void 0 && z(this.prototype, t, s);
95
+ }
96
+ }
97
+ static getPropertyDescriptor(t, e, r) {
98
+ const { get: s, set: o } = j(this.prototype, t) ?? { get() {
99
+ return this[e];
100
+ }, set(a) {
101
+ this[e] = a;
102
+ } };
103
+ return { get: s, set(a) {
104
+ const n = s == null ? void 0 : s.call(this);
105
+ o == null || o.call(this, a), this.requestUpdate(t, n, r);
106
+ }, configurable: !0, enumerable: !0 };
107
+ }
108
+ static getPropertyOptions(t) {
109
+ return this.elementProperties.get(t) ?? x;
110
+ }
111
+ static _$Ei() {
112
+ if (this.hasOwnProperty(f("elementProperties"))) return;
113
+ const t = L(this);
114
+ t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
115
+ }
116
+ static finalize() {
117
+ if (this.hasOwnProperty(f("finalized"))) return;
118
+ if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f("properties"))) {
119
+ const e = this.properties, r = [...D(e), ...I(e)];
120
+ for (const s of r) this.createProperty(s, e[s]);
121
+ }
122
+ const t = this[Symbol.metadata];
123
+ if (t !== null) {
124
+ const e = litPropertyMetadata.get(t);
125
+ if (e !== void 0) for (const [r, s] of e) this.elementProperties.set(r, s);
126
+ }
127
+ this._$Eh = /* @__PURE__ */ new Map();
128
+ for (const [e, r] of this.elementProperties) {
129
+ const s = this._$Eu(e, r);
130
+ s !== void 0 && this._$Eh.set(s, e);
131
+ }
132
+ this.elementStyles = this.finalizeStyles(this.styles);
133
+ }
134
+ static finalizeStyles(t) {
135
+ const e = [];
136
+ if (Array.isArray(t)) {
137
+ const r = new Set(t.flat(1 / 0).reverse());
138
+ for (const s of r) e.unshift(w(s));
139
+ } else t !== void 0 && e.push(w(t));
140
+ return e;
141
+ }
142
+ static _$Eu(t, e) {
143
+ const r = e.attribute;
144
+ return r === !1 ? void 0 : typeof r == "string" ? r : typeof t == "string" ? t.toLowerCase() : void 0;
145
+ }
146
+ constructor() {
147
+ super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
148
+ }
149
+ _$Ev() {
150
+ var t;
151
+ this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
152
+ }
153
+ addController(t) {
154
+ var e;
155
+ (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
156
+ }
157
+ removeController(t) {
158
+ var e;
159
+ (e = this._$EO) == null || e.delete(t);
160
+ }
161
+ _$E_() {
162
+ const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
163
+ for (const r of e.keys()) this.hasOwnProperty(r) && (t.set(r, this[r]), delete this[r]);
164
+ t.size > 0 && (this._$Ep = t);
165
+ }
166
+ createRenderRoot() {
167
+ const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
168
+ return R(t, this.constructor.elementStyles), t;
169
+ }
170
+ connectedCallback() {
171
+ var t;
172
+ this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
173
+ var r;
174
+ return (r = e.hostConnected) == null ? void 0 : r.call(e);
175
+ });
176
+ }
177
+ enableUpdating(t) {
178
+ }
179
+ disconnectedCallback() {
180
+ var t;
181
+ (t = this._$EO) == null || t.forEach((e) => {
182
+ var r;
183
+ return (r = e.hostDisconnected) == null ? void 0 : r.call(e);
184
+ });
185
+ }
186
+ attributeChangedCallback(t, e, r) {
187
+ this._$AK(t, r);
188
+ }
189
+ _$ET(t, e) {
190
+ var o;
191
+ const r = this.constructor.elementProperties.get(t), s = this.constructor._$Eu(t, r);
192
+ if (s !== void 0 && r.reflect === !0) {
193
+ const a = (((o = r.converter) == null ? void 0 : o.toAttribute) !== void 0 ? r.converter : $).toAttribute(e, r.type);
194
+ this._$Em = t, a == null ? this.removeAttribute(s) : this.setAttribute(s, a), this._$Em = null;
195
+ }
196
+ }
197
+ _$AK(t, e) {
198
+ var o, a;
199
+ const r = this.constructor, s = r._$Eh.get(t);
200
+ if (s !== void 0 && this._$Em !== s) {
201
+ const n = r.getPropertyOptions(s), d = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : $;
202
+ this._$Em = s;
203
+ const E = d.fromAttribute(e, n.type);
204
+ this[s] = E ?? ((a = this._$Ej) == null ? void 0 : a.get(s)) ?? E, this._$Em = null;
205
+ }
206
+ }
207
+ requestUpdate(t, e, r) {
208
+ var s;
209
+ if (t !== void 0) {
210
+ const o = this.constructor, a = this[t];
211
+ if (r ?? (r = o.getPropertyOptions(t)), !((r.hasChanged ?? _)(a, e) || r.useDefault && r.reflect && a === ((s = this._$Ej) == null ? void 0 : s.get(t)) && !this.hasAttribute(o._$Eu(t, r)))) return;
212
+ this.C(t, e, r);
213
+ }
214
+ this.isUpdatePending === !1 && (this._$ES = this._$EP());
215
+ }
216
+ C(t, e, { useDefault: r, reflect: s, wrapped: o }, a) {
217
+ r && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t) && (this._$Ej.set(t, a ?? e ?? this[t]), o !== !0 || a !== void 0) || (this._$AL.has(t) || (this.hasUpdated || r || (e = void 0), this._$AL.set(t, e)), s === !0 && this._$Em !== t && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t));
218
+ }
219
+ async _$EP() {
220
+ this.isUpdatePending = !0;
221
+ try {
222
+ await this._$ES;
223
+ } catch (e) {
224
+ Promise.reject(e);
225
+ }
226
+ const t = this.scheduleUpdate();
227
+ return t != null && await t, !this.isUpdatePending;
228
+ }
229
+ scheduleUpdate() {
230
+ return this.performUpdate();
231
+ }
232
+ performUpdate() {
233
+ var r;
234
+ if (!this.isUpdatePending) return;
235
+ if (!this.hasUpdated) {
236
+ if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
237
+ for (const [o, a] of this._$Ep) this[o] = a;
238
+ this._$Ep = void 0;
239
+ }
240
+ const s = this.constructor.elementProperties;
241
+ if (s.size > 0) for (const [o, a] of s) {
242
+ const { wrapped: n } = a, d = this[o];
243
+ n !== !0 || this._$AL.has(o) || d === void 0 || this.C(o, void 0, a, d);
244
+ }
245
+ }
246
+ let t = !1;
247
+ const e = this._$AL;
248
+ try {
249
+ t = this.shouldUpdate(e), t ? (this.willUpdate(e), (r = this._$EO) == null || r.forEach((s) => {
250
+ var o;
251
+ return (o = s.hostUpdate) == null ? void 0 : o.call(s);
252
+ }), this.update(e)) : this._$EM();
253
+ } catch (s) {
254
+ throw t = !1, this._$EM(), s;
255
+ }
256
+ t && this._$AE(e);
257
+ }
258
+ willUpdate(t) {
259
+ }
260
+ _$AE(t) {
261
+ var e;
262
+ (e = this._$EO) == null || e.forEach((r) => {
263
+ var s;
264
+ return (s = r.hostUpdated) == null ? void 0 : s.call(r);
265
+ }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
266
+ }
267
+ _$EM() {
268
+ this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
269
+ }
270
+ get updateComplete() {
271
+ return this.getUpdateComplete();
272
+ }
273
+ getUpdateComplete() {
274
+ return this._$ES;
275
+ }
276
+ shouldUpdate(t) {
277
+ return !0;
278
+ }
279
+ update(t) {
280
+ this._$Eq && (this._$Eq = this._$Eq.forEach((e) => this._$ET(e, this[e]))), this._$EM();
281
+ }
282
+ updated(t) {
283
+ }
284
+ firstUpdated(t) {
285
+ }
286
+ }
287
+ u.elementStyles = [], u.shadowRootOptions = { mode: "open" }, u[f("elementProperties")] = /* @__PURE__ */ new Map(), u[f("finalized")] = /* @__PURE__ */ new Map(), v == null || v({ ReactiveElement: u }), (c.reactiveElementVersions ?? (c.reactiveElementVersions = [])).push("2.1.1");
288
+ /**
289
+ * @license
290
+ * Copyright 2017 Google LLC
291
+ * SPDX-License-Identifier: BSD-3-Clause
292
+ */
293
+ const N = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: _ }, V = (i = N, t, e) => {
294
+ const { kind: r, metadata: s } = e;
295
+ let o = globalThis.litPropertyMetadata.get(s);
296
+ if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), r === "setter" && ((i = Object.create(i)).wrapped = !0), o.set(e.name, i), r === "accessor") {
297
+ const { name: a } = e;
298
+ return { set(n) {
299
+ const d = t.get.call(this);
300
+ t.set.call(this, n), this.requestUpdate(a, d, i);
301
+ }, init(n) {
302
+ return n !== void 0 && this.C(a, void 0, i, n), n;
303
+ } };
304
+ }
305
+ if (r === "setter") {
306
+ const { name: a } = e;
307
+ return function(n) {
308
+ const d = this[a];
309
+ t.call(this, n), this.requestUpdate(a, d, i);
310
+ };
311
+ }
312
+ throw Error("Unsupported decorator location: " + r);
313
+ };
314
+ function p(i) {
315
+ return (t, e) => typeof e == "object" ? V(i, t, e) : ((r, s, o) => {
316
+ const a = s.hasOwnProperty(o);
317
+ return s.constructor.createProperty(o, r), a ? Object.getOwnPropertyDescriptor(s, o) : void 0;
318
+ })(i, t, e);
319
+ }
320
+ const J = ":host{display:block}.form-text{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);align-items:start;max-width:var(--ucds-form-element-maxwidth)}.form-text input{display:block;height:var(--ucds-form-element-height);width:var(--ucds-form-element-width);padding-left:var(--ucds-form-element-horizontal-padding);padding-right:var(--ucds-form-element-horizontal-padding);line-height:16px;background-color:var(--ucds-color-forms-input-background-rest);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);border-radius:var(--ucds-form-element-border-radius);transition:border-color .5s ease;text-align:left}.form-text input::-moz-placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input::placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input[error]{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-text input:hover{border-color:var(--ucds-color-forms-input-border-hover)}.form-text input:focus{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-text.disabled input{color:var(--ucds-color-text-disabled);background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-text.disabled input::-moz-placeholder{color:var(--ucds-color-text-disabled)}.form-text.disabled input::placeholder{color:var(--ucds-color-text-disabled)}";
321
+ var K = Object.defineProperty, W = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
322
+ for (var s = r > 1 ? void 0 : r ? W(t, e) : t, o = i.length - 1, a; o >= 0; o--)
323
+ (a = i[o]) && (s = (r ? a(t, e, s) : a(s)) || s);
324
+ return r && s && K(t, e, s), s;
325
+ };
326
+ let l = class extends U {
12
327
  constructor() {
13
328
  super(), this.errorText = "", this.helpText = "", this.inputId = "", this.label = "", this._value = "", this.disabled = !1, this.error = !1, this.required = !1, this.internals = this.attachInternals();
14
329
  }
15
330
  get value() {
16
331
  return this._value;
17
332
  }
18
- set value(t) {
19
- const r = this._value;
20
- t !== r && (this._value = t, this.requestUpdate("value", r), this.internals.setFormValue(this._value));
333
+ set value(i) {
334
+ const t = this._value;
335
+ i !== t && (this._value = i, this.requestUpdate("value", t), this.internals.setFormValue(this._value));
21
336
  }
22
- updated(t) {
23
- t.has("label") && !this.label && console.error("Property 'label' is required and was not set.");
337
+ updated(i) {
338
+ i.has("label") && !this.label && console.error("Property 'label' is required and was not set.");
24
339
  }
25
- handleInput(t) {
26
- const r = t.target;
27
- this.value = r.value;
340
+ handleInput(i) {
341
+ const t = i.target;
342
+ this.value = t.value;
28
343
  }
29
344
  formResetCallback() {
30
345
  this.value = "";
31
346
  }
32
- formStateRestoreCallback(t) {
33
- this.value = t;
347
+ formStateRestoreCallback(i) {
348
+ this.value = i;
34
349
  }
35
350
  checkValidity() {
36
351
  return this.internals.checkValidity();
@@ -39,9 +354,9 @@ let e = class extends p {
39
354
  return this.internals.reportValidity();
40
355
  }
41
356
  render() {
42
- return d`
357
+ return y`
43
358
  <div class="form-text ${this.disabled ? "disabled" : ""} ${this.required ? "required" : ""}">
44
- ${this.label ? d`<form-label for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : a}
359
+ ${this.label ? y`<form-label for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : m}
45
360
  <input
46
361
  type="text"
47
362
  id="${this.inputId}"
@@ -49,46 +364,47 @@ let e = class extends p {
49
364
  ?required=${this.required}
50
365
  ?error=${this.error}
51
366
  .value="${this.value}"
52
- placeholder="${this.placeholder ?? a}"
367
+ placeholder="${this.placeholder ?? m}"
53
368
  @input=${this.handleInput}>
54
- ${this.error ? d`<form-error-message text="${this.errorText}"></form-error-message>` : a}
55
- ${this.helpText ? d`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : a}
369
+ ${this.error ? y`<form-error-message text="${this.errorText}"></form-error-message>` : m}
370
+ ${this.helpText ? y`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : m}
56
371
  </div>
57
372
  `;
58
373
  }
59
374
  };
60
- e.styles = [
61
- p.styles,
62
- h(m)
375
+ l.styles = [
376
+ U.styles,
377
+ A(J)
63
378
  ];
64
- e.formAssociated = !0;
65
- o([
66
- l({ type: String, attribute: "error-text" })
67
- ], e.prototype, "errorText", 2);
68
- o([
69
- l({ type: String, attribute: "help-text" })
70
- ], e.prototype, "helpText", 2);
71
- o([
72
- l({ type: String, attribute: "input-id" })
73
- ], e.prototype, "inputId", 2);
74
- o([
75
- l({ type: String })
76
- ], e.prototype, "label", 2);
77
- o([
78
- l({ type: String, reflect: !0 })
79
- ], e.prototype, "placeholder", 2);
80
- o([
81
- l({ type: Boolean, reflect: !0 })
82
- ], e.prototype, "disabled", 2);
83
- o([
84
- l({ type: Boolean, reflect: !0 })
85
- ], e.prototype, "error", 2);
86
- o([
87
- l({ type: Boolean, reflect: !0 })
88
- ], e.prototype, "required", 2);
89
- e = o([
90
- f("ucds-text-input")
91
- ], e);
379
+ l.formAssociated = !0;
380
+ h([
381
+ p({ type: String, attribute: "error-text" })
382
+ ], l.prototype, "errorText", 2);
383
+ h([
384
+ p({ type: String, attribute: "help-text" })
385
+ ], l.prototype, "helpText", 2);
386
+ h([
387
+ p({ type: String, attribute: "input-id" })
388
+ ], l.prototype, "inputId", 2);
389
+ h([
390
+ p({ type: String })
391
+ ], l.prototype, "label", 2);
392
+ h([
393
+ p({ type: String, reflect: !0 })
394
+ ], l.prototype, "placeholder", 2);
395
+ h([
396
+ p({ type: Boolean, reflect: !0 })
397
+ ], l.prototype, "disabled", 2);
398
+ h([
399
+ p({ type: Boolean, reflect: !0 })
400
+ ], l.prototype, "error", 2);
401
+ h([
402
+ p({ type: Boolean, reflect: !0 })
403
+ ], l.prototype, "required", 2);
404
+ l = h([
405
+ T("ucds-text-input")
406
+ ], l);
407
+ O();
92
408
  export {
93
- e as TextInput
409
+ l as TextInput
94
410
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucalgary-design-system/text-input",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -11,7 +11,7 @@
11
11
  }
12
12
  },
13
13
  "peerDependencies": {
14
- "@ucalgary-design-system/core": "^1.0.4",
14
+ "@ucalgary-design-system/core": "^1.0.5",
15
15
  "@ucalgary-design-system/helper-components": "^1.0.2",
16
16
  "@ucalgary-design-system/tokens": "^1.0.4",
17
17
  "lit": "^3.2.1"
package/text-input.css DELETED
@@ -1 +0,0 @@
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}