@ucalgary-design-system/text-input 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 +19 -0
  2. package/LICENSE.md +21 -0
  3. package/index.js +112 -107
  4. package/package.json +5 -5
  5. package/text-input.css +1 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,19 @@
1
+ # @ucalgary-design-system/text-input
2
+
3
+ ## 1.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - c3fdd31: Updated dependencies and modified build
8
+ - Updated dependencies [c3fdd31]
9
+ - @ucalgary-design-system/core@1.0.3
10
+
11
+ ## 1.0.2
12
+
13
+ ### Patch Changes
14
+
15
+ - dddb90f: Added LICENSE to package
16
+ - Updated dependencies [dddb90f]
17
+ - @ucalgary-design-system/helper-components@1.0.2
18
+ - @ucalgary-design-system/tokens@1.0.3
19
+ - @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,12 +1,12 @@
1
- import { unsafeCSS as C, nothing as f, html as m } from "lit";
2
- import { BaseElement as x } from "@ucalgary-design-system/core";
1
+ import { unsafeCSS as O, nothing as m, html as y } from "lit";
2
+ import { BaseElement as U } from "@ucalgary-design-system/core";
3
3
  import "@ucalgary-design-system/helper-components";
4
4
  /**
5
5
  * @license
6
6
  * Copyright 2017 Google LLC
7
7
  * SPDX-License-Identifier: BSD-3-Clause
8
8
  */
9
- const O = (i) => (t, e) => {
9
+ const A = (i) => (t, e) => {
10
10
  e !== void 0 ? e.addInitializer(() => {
11
11
  customElements.define(i, t);
12
12
  }) : customElements.define(i, t);
@@ -16,10 +16,10 @@ const O = (i) => (t, e) => {
16
16
  * Copyright 2019 Google LLC
17
17
  * SPDX-License-Identifier: BSD-3-Clause
18
18
  */
19
- const y = globalThis, g = y.ShadowRoot && (y.ShadyCSS === void 0 || y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, U = Symbol(), S = /* @__PURE__ */ new WeakMap();
20
- let A = class {
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 T = class {
21
21
  constructor(t, e, r) {
22
- if (this._$cssResult$ = !0, r !== U) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
22
+ if (this._$cssResult$ = !0, r !== C) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
23
23
  this.cssText = t, this.t = e;
24
24
  }
25
25
  get styleSheet() {
@@ -35,26 +35,26 @@ let A = class {
35
35
  return this.cssText;
36
36
  }
37
37
  };
38
- const T = (i) => new A(typeof i == "string" ? i : i + "", void 0, U), k = (i, t) => {
38
+ const M = (i) => new T(typeof i == "string" ? i : i + "", void 0, C), k = (i, t) => {
39
39
  if (g) i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
40
40
  else for (const e of t) {
41
- const r = document.createElement("style"), s = y.litNonce;
41
+ const r = document.createElement("style"), s = b.litNonce;
42
42
  s !== void 0 && r.setAttribute("nonce", s), r.textContent = e.cssText, i.appendChild(r);
43
43
  }
44
- }, E = g ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
44
+ }, w = g ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
45
45
  let e = "";
46
46
  for (const r of t.cssRules) e += r.cssText;
47
- return T(e);
47
+ return M(e);
48
48
  })(i) : i;
49
49
  /**
50
50
  * @license
51
51
  * Copyright 2017 Google LLC
52
52
  * SPDX-License-Identifier: BSD-3-Clause
53
53
  */
54
- const { is: R, defineProperty: z, getOwnPropertyDescriptor: q, getOwnPropertyNames: M, getOwnPropertySymbols: j, getPrototypeOf: I } = Object, d = globalThis, P = d.trustedTypes, D = P ? P.emptyScript : "", $ = d.reactiveElementPolyfillSupport, u = (i, t) => i, b = { toAttribute(i, t) {
54
+ const { is: R, defineProperty: q, getOwnPropertyDescriptor: z, getOwnPropertyNames: j, getOwnPropertySymbols: D, getPrototypeOf: I } = Object, c = globalThis, P = c.trustedTypes, L = P ? P.emptyScript : "", v = c.reactiveElementPolyfillSupport, f = (i, t) => i, $ = { toAttribute(i, t) {
55
55
  switch (t) {
56
56
  case Boolean:
57
- i = i ? D : null;
57
+ i = i ? L : null;
58
58
  break;
59
59
  case Object:
60
60
  case Array:
@@ -79,46 +79,44 @@ const { is: R, defineProperty: z, getOwnPropertyDescriptor: q, getOwnPropertyNam
79
79
  }
80
80
  }
81
81
  return e;
82
- } }, _ = (i, t) => !R(i, t), w = { attribute: !0, type: String, converter: b, reflect: !1, hasChanged: _ };
83
- Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), d.litPropertyMetadata ?? (d.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
84
- class p extends HTMLElement {
82
+ } }, _ = (i, t) => !R(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
85
  static addInitializer(t) {
86
86
  this._$Ei(), (this.l ?? (this.l = [])).push(t);
87
87
  }
88
88
  static get observedAttributes() {
89
89
  return this.finalize(), this._$Eh && [...this._$Eh.keys()];
90
90
  }
91
- static createProperty(t, e = w) {
92
- if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
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
93
  const r = Symbol(), s = this.getPropertyDescriptor(t, r, e);
94
- s !== void 0 && z(this.prototype, t, s);
94
+ s !== void 0 && q(this.prototype, t, s);
95
95
  }
96
96
  }
97
97
  static getPropertyDescriptor(t, e, r) {
98
- const { get: s, set: a } = q(this.prototype, t) ?? { get() {
98
+ const { get: s, set: o } = z(this.prototype, t) ?? { get() {
99
99
  return this[e];
100
- }, set(o) {
101
- this[e] = o;
100
+ }, set(a) {
101
+ this[e] = a;
102
102
  } };
103
- return { get() {
104
- return s == null ? void 0 : s.call(this);
105
- }, set(o) {
106
- const l = s == null ? void 0 : s.call(this);
107
- a.call(this, o), this.requestUpdate(t, l, r);
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);
108
106
  }, configurable: !0, enumerable: !0 };
109
107
  }
110
108
  static getPropertyOptions(t) {
111
- return this.elementProperties.get(t) ?? w;
109
+ return this.elementProperties.get(t) ?? x;
112
110
  }
113
111
  static _$Ei() {
114
- if (this.hasOwnProperty(u("elementProperties"))) return;
112
+ if (this.hasOwnProperty(f("elementProperties"))) return;
115
113
  const t = I(this);
116
114
  t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
117
115
  }
118
116
  static finalize() {
119
- if (this.hasOwnProperty(u("finalized"))) return;
120
- if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(u("properties"))) {
121
- const e = this.properties, r = [...M(e), ...j(e)];
117
+ if (this.hasOwnProperty(f("finalized"))) return;
118
+ if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f("properties"))) {
119
+ const e = this.properties, r = [...j(e), ...D(e)];
122
120
  for (const s of r) this.createProperty(s, e[s]);
123
121
  }
124
122
  const t = this[Symbol.metadata];
@@ -137,8 +135,8 @@ class p extends HTMLElement {
137
135
  const e = [];
138
136
  if (Array.isArray(t)) {
139
137
  const r = new Set(t.flat(1 / 0).reverse());
140
- for (const s of r) e.unshift(E(s));
141
- } else t !== void 0 && e.push(E(t));
138
+ for (const s of r) e.unshift(w(s));
139
+ } else t !== void 0 && e.push(w(t));
142
140
  return e;
143
141
  }
144
142
  static _$Eu(t, e) {
@@ -188,33 +186,37 @@ class p extends HTMLElement {
188
186
  attributeChangedCallback(t, e, r) {
189
187
  this._$AK(t, r);
190
188
  }
191
- _$EC(t, e) {
192
- var a;
189
+ _$ET(t, e) {
190
+ var o;
193
191
  const r = this.constructor.elementProperties.get(t), s = this.constructor._$Eu(t, r);
194
192
  if (s !== void 0 && r.reflect === !0) {
195
- const o = (((a = r.converter) == null ? void 0 : a.toAttribute) !== void 0 ? r.converter : b).toAttribute(e, r.type);
196
- this._$Em = t, o == null ? this.removeAttribute(s) : this.setAttribute(s, o), this._$Em = null;
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;
197
195
  }
198
196
  }
199
197
  _$AK(t, e) {
200
- var a;
198
+ var o, a;
201
199
  const r = this.constructor, s = r._$Eh.get(t);
202
200
  if (s !== void 0 && this._$Em !== s) {
203
- const o = r.getPropertyOptions(s), l = typeof o.converter == "function" ? { fromAttribute: o.converter } : ((a = o.converter) == null ? void 0 : a.fromAttribute) !== void 0 ? o.converter : b;
204
- this._$Em = s, this[s] = l.fromAttribute(e, o.type), this._$Em = null;
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
205
  }
206
206
  }
207
207
  requestUpdate(t, e, r) {
208
+ var s;
208
209
  if (t !== void 0) {
209
- if (r ?? (r = this.constructor.getPropertyOptions(t)), !(r.hasChanged ?? _)(this[t], e)) return;
210
- this.P(t, e, r);
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);
211
213
  }
212
- this.isUpdatePending === !1 && (this._$ES = this._$ET());
214
+ this.isUpdatePending === !1 && (this._$ES = this._$EP());
213
215
  }
214
- P(t, e, r) {
215
- this._$AL.has(t) || this._$AL.set(t, e), r.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
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));
216
218
  }
217
- async _$ET() {
219
+ async _$EP() {
218
220
  this.isUpdatePending = !0;
219
221
  try {
220
222
  await this._$ES;
@@ -232,21 +234,24 @@ class p extends HTMLElement {
232
234
  if (!this.isUpdatePending) return;
233
235
  if (!this.hasUpdated) {
234
236
  if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
235
- for (const [a, o] of this._$Ep) this[a] = o;
237
+ for (const [o, a] of this._$Ep) this[o] = a;
236
238
  this._$Ep = void 0;
237
239
  }
238
240
  const s = this.constructor.elementProperties;
239
- if (s.size > 0) for (const [a, o] of s) o.wrapped !== !0 || this._$AL.has(a) || this[a] === void 0 || this.P(a, this[a], o);
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
+ }
240
245
  }
241
246
  let t = !1;
242
247
  const e = this._$AL;
243
248
  try {
244
249
  t = this.shouldUpdate(e), t ? (this.willUpdate(e), (r = this._$EO) == null || r.forEach((s) => {
245
- var a;
246
- return (a = s.hostUpdate) == null ? void 0 : a.call(s);
247
- }), this.update(e)) : this._$EU();
250
+ var o;
251
+ return (o = s.hostUpdate) == null ? void 0 : o.call(s);
252
+ }), this.update(e)) : this._$EM();
248
253
  } catch (s) {
249
- throw t = !1, this._$EU(), s;
254
+ throw t = !1, this._$EM(), s;
250
255
  }
251
256
  t && this._$AE(e);
252
257
  }
@@ -259,7 +264,7 @@ class p extends HTMLElement {
259
264
  return (s = r.hostUpdated) == null ? void 0 : s.call(r);
260
265
  }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
261
266
  }
262
- _$EU() {
267
+ _$EM() {
263
268
  this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
264
269
  }
265
270
  get updateComplete() {
@@ -272,53 +277,53 @@ class p extends HTMLElement {
272
277
  return !0;
273
278
  }
274
279
  update(t) {
275
- this._$Ej && (this._$Ej = this._$Ej.forEach((e) => this._$EC(e, this[e]))), this._$EU();
280
+ this._$Eq && (this._$Eq = this._$Eq.forEach((e) => this._$ET(e, this[e]))), this._$EM();
276
281
  }
277
282
  updated(t) {
278
283
  }
279
284
  firstUpdated(t) {
280
285
  }
281
286
  }
282
- p.elementStyles = [], p.shadowRootOptions = { mode: "open" }, p[u("elementProperties")] = /* @__PURE__ */ new Map(), p[u("finalized")] = /* @__PURE__ */ new Map(), $ == null || $({ ReactiveElement: p }), (d.reactiveElementVersions ?? (d.reactiveElementVersions = [])).push("2.0.4");
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");
283
288
  /**
284
289
  * @license
285
290
  * Copyright 2017 Google LLC
286
291
  * SPDX-License-Identifier: BSD-3-Clause
287
292
  */
288
- const L = { attribute: !0, type: String, converter: b, reflect: !1, hasChanged: _ }, B = (i = L, t, e) => {
293
+ const B = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: _ }, N = (i = B, t, e) => {
289
294
  const { kind: r, metadata: s } = e;
290
- let a = globalThis.litPropertyMetadata.get(s);
291
- if (a === void 0 && globalThis.litPropertyMetadata.set(s, a = /* @__PURE__ */ new Map()), a.set(e.name, i), r === "accessor") {
292
- const { name: o } = e;
293
- return { set(l) {
294
- const v = t.get.call(this);
295
- t.set.call(this, l), this.requestUpdate(o, v, i);
296
- }, init(l) {
297
- return l !== void 0 && this.P(o, void 0, i), l;
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;
298
303
  } };
299
304
  }
300
305
  if (r === "setter") {
301
- const { name: o } = e;
302
- return function(l) {
303
- const v = this[o];
304
- t.call(this, l), this.requestUpdate(o, v, i);
306
+ const { name: a } = e;
307
+ return function(n) {
308
+ const d = this[a];
309
+ t.call(this, n), this.requestUpdate(a, d, i);
305
310
  };
306
311
  }
307
312
  throw Error("Unsupported decorator location: " + r);
308
313
  };
309
- function c(i) {
310
- return (t, e) => typeof e == "object" ? B(i, t, e) : ((r, s, a) => {
311
- const o = s.hasOwnProperty(a);
312
- return s.constructor.createProperty(a, o ? { ...r, wrapped: !0 } : r), o ? Object.getOwnPropertyDescriptor(s, a) : void 0;
314
+ function p(i) {
315
+ return (t, e) => typeof e == "object" ? N(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;
313
318
  })(i, t, e);
314
319
  }
315
- const N = ":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)}";
316
- var V = Object.defineProperty, J = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
317
- for (var s = r > 1 ? void 0 : r ? J(t, e) : t, a = i.length - 1, o; a >= 0; a--)
318
- (o = i[a]) && (s = (r ? o(t, e, s) : o(s)) || s);
319
- return r && s && V(t, e, s), s;
320
+ const V = ":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 J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
322
+ for (var s = r > 1 ? void 0 : r ? K(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 && J(t, e, s), s;
320
325
  };
321
- let n = class extends x {
326
+ let l = class extends U {
322
327
  constructor() {
323
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();
324
329
  }
@@ -349,9 +354,9 @@ let n = class extends x {
349
354
  return this.internals.reportValidity();
350
355
  }
351
356
  render() {
352
- return m`
357
+ return y`
353
358
  <div class="form-text ${this.disabled ? "disabled" : ""} ${this.required ? "required" : ""}">
354
- ${this.label ? m`<form-label for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : f}
359
+ ${this.label ? y`<form-label for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : m}
355
360
  <input
356
361
  type="text"
357
362
  id="${this.inputId}"
@@ -359,46 +364,46 @@ let n = class extends x {
359
364
  ?required=${this.required}
360
365
  ?error=${this.error}
361
366
  .value="${this.value}"
362
- placeholder="${this.placeholder ?? f}"
367
+ placeholder="${this.placeholder ?? m}"
363
368
  @input=${this.handleInput}>
364
- ${this.error ? m`<form-error-message text="${this.errorText}"></form-error-message>` : f}
365
- ${this.helpText ? m`<form-help-message text="${this.helpText}" ?disabled="${this.disabled}"></form-help-message>` : f}
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}
366
371
  </div>
367
372
  `;
368
373
  }
369
374
  };
370
- n.styles = [
371
- x.styles,
372
- C(N)
375
+ l.styles = [
376
+ U.styles,
377
+ O(V)
373
378
  ];
374
- n.formAssociated = !0;
379
+ l.formAssociated = !0;
375
380
  h([
376
- c({ type: String, attribute: "error-text" })
377
- ], n.prototype, "errorText", 2);
381
+ p({ type: String, attribute: "error-text" })
382
+ ], l.prototype, "errorText", 2);
378
383
  h([
379
- c({ type: String, attribute: "help-text" })
380
- ], n.prototype, "helpText", 2);
384
+ p({ type: String, attribute: "help-text" })
385
+ ], l.prototype, "helpText", 2);
381
386
  h([
382
- c({ type: String, attribute: "input-id" })
383
- ], n.prototype, "inputId", 2);
387
+ p({ type: String, attribute: "input-id" })
388
+ ], l.prototype, "inputId", 2);
384
389
  h([
385
- c({ type: String })
386
- ], n.prototype, "label", 2);
390
+ p({ type: String })
391
+ ], l.prototype, "label", 2);
387
392
  h([
388
- c({ type: String, reflect: !0 })
389
- ], n.prototype, "placeholder", 2);
393
+ p({ type: String, reflect: !0 })
394
+ ], l.prototype, "placeholder", 2);
390
395
  h([
391
- c({ type: Boolean, reflect: !0 })
392
- ], n.prototype, "disabled", 2);
396
+ p({ type: Boolean, reflect: !0 })
397
+ ], l.prototype, "disabled", 2);
393
398
  h([
394
- c({ type: Boolean, reflect: !0 })
395
- ], n.prototype, "error", 2);
399
+ p({ type: Boolean, reflect: !0 })
400
+ ], l.prototype, "error", 2);
396
401
  h([
397
- c({ type: Boolean, reflect: !0 })
398
- ], n.prototype, "required", 2);
399
- n = h([
400
- O("ucds-text-input")
401
- ], n);
402
+ p({ type: Boolean, reflect: !0 })
403
+ ], l.prototype, "required", 2);
404
+ l = h([
405
+ A("ucds-text-input")
406
+ ], l);
402
407
  export {
403
- n as TextInput
408
+ l as TextInput
404
409
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucalgary-design-system/text-input",
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,10 +10,10 @@
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/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/tokens": "^1.0.3",
17
17
  "lit": "^3.2.1"
18
18
  },
19
19
  "description": "A web component for TextInput",
package/text-input.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}