@wral/my-wral-settings 0.2.4 → 0.2.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/dist/define.mjs +1 -1
  2. package/dist/define.standalone.js +56 -60
  3. package/dist/index.mjs +1 -1
  4. package/dist/{my-wral-settings-CZEj0day.js → my-wral-settings-CPVvDWH4.js} +47 -51
  5. package/package.json +1 -1
package/dist/define.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { M as t } from "./my-wral-settings-CZEj0day.js";
1
+ import { M as t } from "./my-wral-settings-CPVvDWH4.js";
2
2
  function i() {
3
3
  const e = globalThis?.customElements;
4
4
  e && (e.get("my-wral-settings") || e.define("my-wral-settings", t));
package/dist/define.standalone.js CHANGED
@@ -45,7 +45,7 @@ const ut = (r) => new et(typeof r == "string" ? r : r + "", void 0, D), ft = (r,
45
45
  * Copyright 2017 Google LLC
46
46
  * SPDX-License-Identifier: BSD-3-Clause
47
47
  */
48
- const { is: $t, defineProperty: gt, getOwnPropertyDescriptor: _t, getOwnPropertyNames: yt, getOwnPropertySymbols: bt, getPrototypeOf: vt } = Object, M = globalThis, W = M.trustedTypes, At = W ? W.emptyScript : "", wt = M.reactiveElementPolyfillSupport, x = (r, t) => r, R = { toAttribute(r, t) {
48
+ const { is: $t, defineProperty: gt, getOwnPropertyDescriptor: _t, getOwnPropertyNames: yt, getOwnPropertySymbols: vt, getPrototypeOf: bt } = Object, M = globalThis, W = M.trustedTypes, At = W ? W.emptyScript : "", wt = M.reactiveElementPolyfillSupport, x = (r, t) => r, R = { toAttribute(r, t) {
49
49
  switch (t) {
50
50
  case Boolean:
51
51
  r = r ? At : null;
@@ -75,7 +75,7 @@ const { is: $t, defineProperty: gt, getOwnPropertyDescriptor: _t, getOwnProperty
75
75
  return e;
76
76
  } }, st = (r, t) => !$t(r, t), q = { attribute: !0, type: String, converter: R, reflect: !1, useDefault: !1, hasChanged: st };
77
77
  Symbol.metadata ??= Symbol("metadata"), M.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
78
- let v = class extends HTMLElement {
78
+ let b = class extends HTMLElement {
79
79
  static addInitializer(t) {
80
80
  this._$Ei(), (this.l ??= []).push(t);
81
81
  }
@@ -104,13 +104,13 @@ let v = class extends HTMLElement {
104
104
  }
105
105
  static _$Ei() {
106
106
  if (this.hasOwnProperty(x("elementProperties"))) return;
107
- const t = vt(this);
107
+ const t = bt(this);
108
108
  t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
109
109
  }
110
110
  static finalize() {
111
111
  if (this.hasOwnProperty(x("finalized"))) return;
112
112
  if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(x("properties"))) {
113
- const e = this.properties, s = [...yt(e), ...bt(e)];
113
+ const e = this.properties, s = [...yt(e), ...vt(e)];
114
114
  for (const i of s) this.createProperty(i, e[i]);
115
115
  }
116
116
  const t = this[Symbol.metadata];
@@ -256,14 +256,14 @@ let v = class extends HTMLElement {
256
256
  firstUpdated(t) {
257
257
  }
258
258
  };
259
- v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[x("elementProperties")] = /* @__PURE__ */ new Map(), v[x("finalized")] = /* @__PURE__ */ new Map(), wt?.({ ReactiveElement: v }), (M.reactiveElementVersions ??= []).push("2.1.1");
259
+ b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[x("elementProperties")] = /* @__PURE__ */ new Map(), b[x("finalized")] = /* @__PURE__ */ new Map(), wt?.({ ReactiveElement: b }), (M.reactiveElementVersions ??= []).push("2.1.1");
260
260
  /**
261
261
  * @license
262
262
  * Copyright 2017 Google LLC
263
263
  * SPDX-License-Identifier: BSD-3-Clause
264
264
  */
265
- const I = globalThis, P = I.trustedTypes, Z = P ? P.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, it = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, rt = "?" + $, Et = `<${rt}>`, y = document, C = () => y.createComment(""), U = (r) => r === null || typeof r != "object" && typeof r != "function", j = Array.isArray, xt = (r) => j(r) || typeof r?.[Symbol.iterator] == "function", T = `[
266
- \f\r]`, E = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, K = /-->/g, J = />/g, g = RegExp(`>|${T}(?:([^\\s"'>=/]+)(${T}*=${T}*(?:[^
265
+ const I = globalThis, P = I.trustedTypes, Z = P ? P.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, it = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, rt = "?" + $, Et = `<${rt}>`, y = document, C = () => y.createComment(""), U = (r) => r === null || typeof r != "object" && typeof r != "function", j = Array.isArray, xt = (r) => j(r) || typeof r?.[Symbol.iterator] == "function", k = `[
266
+ \f\r]`, E = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, K = /-->/g, J = />/g, g = RegExp(`>|${k}(?:([^\\s"'>=/]+)(${k}*=${k}*(?:[^
267
267
  \f\r"'\`<>=]|("|')|))|$)`, "g"), G = /'/g, Q = /"/g, at = /^(?:script|style|textarea|title)$/i, St = (r) => (t, ...e) => ({ _$litType$: r, strings: t, values: e }), m = St(1), A = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), X = /* @__PURE__ */ new WeakMap(), _ = y.createTreeWalker(y, 129);
268
268
  function nt(r, t) {
269
269
  if (!j(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
@@ -294,8 +294,8 @@ class O {
294
294
  for (; (i = _.nextNode()) !== null && o.length < l; ) {
295
295
  if (i.nodeType === 1) {
296
296
  if (i.hasAttributes()) for (const h of i.getAttributeNames()) if (h.endsWith(it)) {
297
- const u = c[n++], f = i.getAttribute(h).split($), b = /([.?@])?(.*)/.exec(u);
298
- o.push({ type: 1, index: a, name: b[2], strings: f, ctor: b[1] === "." ? Ot : b[1] === "?" ? Nt : b[1] === "@" ? zt : B }), i.removeAttribute(h);
297
+ const u = c[n++], f = i.getAttribute(h).split($), v = /([.?@])?(.*)/.exec(u);
298
+ o.push({ type: 1, index: a, name: v[2], strings: f, ctor: v[1] === "." ? Ot : v[1] === "?" ? Nt : v[1] === "@" ? zt : B }), i.removeAttribute(h);
299
299
  } else h.startsWith($) && (o.push({ type: 6, index: a }), i.removeAttribute(h));
300
300
  if (at.test(i.tagName)) {
301
301
  const h = i.textContent.split($), u = h.length - 1;
@@ -493,7 +493,7 @@ const Bt = (r, t, e) => {
493
493
  * SPDX-License-Identifier: BSD-3-Clause
494
494
  */
495
495
  const L = globalThis;
496
- class S extends v {
496
+ class S extends b {
497
497
  constructor() {
498
498
  super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
499
499
  }
@@ -516,12 +516,12 @@ class S extends v {
516
516
  }
517
517
  }
518
518
  S._$litElement$ = !0, S.finalized = !0, L.litElementHydrateSupport?.({ LitElement: S });
519
- const Tt = L.litElementPolyfillSupport;
520
- Tt?.({ LitElement: S });
519
+ const kt = L.litElementPolyfillSupport;
520
+ kt?.({ LitElement: S });
521
521
  (L.litElementVersions ??= []).push("4.2.1");
522
- const kt = {
522
+ const Tt = {
523
523
  md: 1024
524
- }, k = {
524
+ }, T = {
525
525
  preferredName: ["preferred_name"],
526
526
  zipCode: ["zipcode", "zip_code"],
527
527
  dateOfBirth: ["date_of_birth"]
@@ -576,32 +576,28 @@ class ot extends S {
576
576
  static styles = ft`
577
577
  :host {
578
578
  display: block;
579
- color: var(--mw-settings-ink, #1b1a17);
580
- font-family: var(--mw-settings-font-family, "Sora",
581
- "Trebuchet MS", sans-serif);
579
+ --mw-settings-ink: #1f2a44;
580
+ --mw-settings-muted: #667085;
581
+ --mw-settings-border: #d8dee8;
582
+ --mw-settings-surface: #ffffff;
583
+ --mw-settings-panel: #f8fafc;
584
+ --mw-settings-accent: #d1232a;
585
+ --mw-settings-focus: #2f5aa8;
586
+ --mw-settings-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
587
+ color: var(--mw-settings-ink);
588
+ font-family: var(--mw-settings-font-family, "IBM Plex Sans",
589
+ "Segoe UI", Arial, sans-serif);
582
590
  }
583
591
  .card {
584
592
  position: relative;
585
593
  overflow: hidden;
586
- border-radius: 20px;
587
- border: 1px solid var(--mw-settings-border, #e3dbd1);
588
- background: var(--mw-settings-surface, #fbf7f2);
589
- padding: 1.75rem;
590
- box-shadow: 0 12px 24px rgba(34, 28, 20, 0.08);
594
+ border-radius: 4px;
595
+ border: 1px solid var(--mw-settings-border);
596
+ background: var(--mw-settings-surface);
597
+ padding: 1.5rem;
598
+ box-shadow: var(--mw-settings-shadow);
591
599
  animation: riseIn 0.4s ease-out;
592
600
  }
593
- .card::before {
594
- content: '';
595
- position: absolute;
596
- inset: -60% -20% auto -20%;
597
- height: 160px;
598
- background:
599
- radial-gradient(circle at 20% 20%, rgba(255, 194, 128, 0.55),
600
- transparent 60%),
601
- radial-gradient(circle at 85% 0%, rgba(129, 191, 255, 0.4),
602
- transparent 55%);
603
- pointer-events: none;
604
- }
605
601
  .header {
606
602
  display: flex;
607
603
  align-items: flex-start;
@@ -614,7 +610,7 @@ class ot extends S {
614
610
  text-transform: uppercase;
615
611
  letter-spacing: 0.2em;
616
612
  font-size: 0.7rem;
617
- color: var(--mw-settings-muted, #6b6259);
613
+ color: var(--mw-settings-muted);
618
614
  margin: 0 0 0.35rem;
619
615
  }
620
616
  h2 {
@@ -624,7 +620,7 @@ class ot extends S {
624
620
  }
625
621
  .subtitle {
626
622
  margin: 0;
627
- color: var(--mw-settings-muted, #6b6259);
623
+ color: var(--mw-settings-muted);
628
624
  font-size: 0.95rem;
629
625
  }
630
626
  .status-row {
@@ -638,17 +634,17 @@ class ot extends S {
638
634
  align-items: center;
639
635
  gap: 0.35rem;
640
636
  padding: 0.35rem 0.75rem;
641
- border-radius: 999px;
637
+ border-radius: 4px;
642
638
  font-size: 0.8rem;
643
639
  font-weight: 600;
644
- background: #ffffff;
645
- border: 1px solid var(--mw-settings-border, #e3dbd1);
646
- color: var(--mw-settings-muted, #6b6259);
640
+ background: #f1f3f7;
641
+ border: 1px solid var(--mw-settings-border);
642
+ color: var(--mw-settings-muted);
647
643
  }
648
644
  .status {
649
645
  margin: 1rem 0 0;
650
646
  font-size: 0.9rem;
651
- color: var(--mw-settings-muted, #6b6259);
647
+ color: var(--mw-settings-muted);
652
648
  }
653
649
  .status.error {
654
650
  color: #9b2c2c;
@@ -669,9 +665,9 @@ class ot extends S {
669
665
  gap: 1rem;
670
666
  }
671
667
  .field {
672
- background: var(--mw-settings-panel, #ffffff);
673
- border: 1px solid var(--mw-settings-border, #e3dbd1);
674
- border-radius: 14px;
668
+ background: var(--mw-settings-panel);
669
+ border: 1px solid var(--mw-settings-border);
670
+ border-radius: 4px;
675
671
  padding: 0.85rem 0.9rem 0.95rem;
676
672
  display: grid;
677
673
  gap: 0.5rem;
@@ -684,8 +680,8 @@ class ot extends S {
684
680
  font-size: 0.9rem;
685
681
  }
686
682
  .input {
687
- border: 1px solid #d5cbc0;
688
- border-radius: 10px;
683
+ border: 1px solid var(--mw-settings-border);
684
+ border-radius: 4px;
689
685
  padding: 0.55rem 0.7rem;
690
686
  font-size: 0.95rem;
691
687
  font-family: inherit;
@@ -693,12 +689,12 @@ class ot extends S {
693
689
  background: #fff;
694
690
  }
695
691
  .input:focus {
696
- outline: 2px solid var(--mw-settings-focus, #2563eb);
692
+ outline: 2px solid var(--mw-settings-focus);
697
693
  outline-offset: 1px;
698
694
  border-color: transparent;
699
695
  }
700
696
  .helper {
701
- color: var(--mw-settings-muted, #6b6259);
697
+ color: var(--mw-settings-muted);
702
698
  font-size: 0.8rem;
703
699
  }
704
700
  .error-text {
@@ -719,7 +715,7 @@ class ot extends S {
719
715
  flex-wrap: wrap;
720
716
  }
721
717
  .button {
722
- border-radius: 999px;
718
+ border-radius: 4px;
723
719
  border: 1px solid transparent;
724
720
  padding: 0.6rem 1.4rem;
725
721
  font-size: 0.9rem;
@@ -728,14 +724,14 @@ class ot extends S {
728
724
  transition: transform 0.2s ease, box-shadow 0.2s ease;
729
725
  }
730
726
  .button.primary {
731
- background: var(--mw-settings-accent, #b24b1c);
727
+ background: var(--mw-settings-accent);
732
728
  color: #fff;
733
- box-shadow: 0 10px 18px rgba(178, 75, 28, 0.2);
729
+ box-shadow: 0 8px 18px rgba(209, 35, 42, 0.2);
734
730
  }
735
731
  .button.secondary {
736
732
  background: #fff;
737
- color: var(--mw-settings-ink, #1b1a17);
738
- border-color: var(--mw-settings-border, #e3dbd1);
733
+ color: var(--mw-settings-ink);
734
+ border-color: var(--mw-settings-border);
739
735
  }
740
736
  .button:disabled {
741
737
  opacity: 0.6;
@@ -745,7 +741,7 @@ class ot extends S {
745
741
  }
746
742
  .meta-note {
747
743
  font-size: 0.8rem;
748
- color: var(--mw-settings-muted, #6b6259);
744
+ color: var(--mw-settings-muted);
749
745
  }
750
746
  @keyframes riseIn {
751
747
  from { opacity: 0; transform: translateY(12px); }
@@ -758,7 +754,7 @@ class ot extends S {
758
754
  @media (prefers-reduced-motion: reduce) {
759
755
  .card, .field, .button { animation: none; transition: none; }
760
756
  }
761
- @media (max-width: ${kt.md}px) {
757
+ @media (max-width: ${Tt.md}px) {
762
758
  .card { padding: 1.4rem; }
763
759
  .header { flex-direction: column; align-items: flex-start; }
764
760
  .status-row { justify-content: flex-start; }
@@ -780,10 +776,10 @@ class ot extends S {
780
776
  this.loading = !0, this.error = "", this.success = "";
781
777
  try {
782
778
  const t = await this.getUserFacts(), e = Ht(t), s = {
783
- preferredName: H(e, k.preferredName),
784
- zipCode: H(e, k.zipCode),
779
+ preferredName: H(e, T.preferredName),
780
+ zipCode: H(e, T.zipCode),
785
781
  dateOfBirth: tt(
786
- H(e, k.dateOfBirth)
782
+ H(e, T.dateOfBirth)
787
783
  )
788
784
  };
789
785
  this._values = { ...s }, this._originalValues = { ...s }, this._dirty = {
@@ -862,7 +858,7 @@ class ot extends S {
862
858
  }, this.error = "", this.success = "";
863
859
  }
864
860
  render() {
865
- const { loading: t, saving: e, error: s, success: i, _values: a, _fieldErrors: n } = this, l = Object.values(this._dirty).some(Boolean), o = typeof this.getUserFacts == "function", d = typeof this.updateUserFact == "function" || typeof this.updateUserFacts == "function", c = /* @__PURE__ */ new Date(), h = `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, u = s ? m`<div class="status error" role="status">${s}</div>` : "", f = i ? m`<div class="status success" role="status">${i}</div>` : "", b = o ? "" : m`
861
+ const { loading: t, saving: e, error: s, success: i, _values: a, _fieldErrors: n } = this, l = Object.values(this._dirty).some(Boolean), o = typeof this.getUserFacts == "function", d = typeof this.updateUserFact == "function" || typeof this.updateUserFacts == "function", c = /* @__PURE__ */ new Date(), h = `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, u = s ? m`<div class="status error" role="status">${s}</div>` : "", f = i ? m`<div class="status success" role="status">${i}</div>` : "", v = o ? "" : m`
866
862
  <div class="status" role="status">
867
863
  Provide a getUserFacts callback to load values.
868
864
  </div>
@@ -899,7 +895,7 @@ class ot extends S {
899
895
 
900
896
  ${u}
901
897
  ${f}
902
- ${b}
898
+ ${v}
903
899
  ${lt}
904
900
 
905
901
  <form @submit=${this._handleSubmit} novalidate>
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { M as a } from "./my-wral-settings-CZEj0day.js";
1
+ import { M as a } from "./my-wral-settings-CPVvDWH4.js";
2
2
  export {
3
3
  a as MyWralSettings
4
4
  };
package/dist/{my-wral-settings-CZEj0day.js → my-wral-settings-CPVvDWH4.js} RENAMED
@@ -15,7 +15,7 @@ const N = {
15
15
  }
16
16
  }
17
17
  return "";
18
- }, h = (n) => {
18
+ }, m = (n) => {
19
19
  const e = String(n || "").trim();
20
20
  return e ? /^\d{4}-\d{2}-\d{2}/.test(e) ? e.slice(0, 10) : e : "";
21
21
  };
@@ -56,32 +56,28 @@ class C extends $ {
56
56
  static styles = F`
57
57
  :host {
58
58
  display: block;
59
- color: var(--mw-settings-ink, #1b1a17);
60
- font-family: var(--mw-settings-font-family, "Sora",
61
- "Trebuchet MS", sans-serif);
59
+ --mw-settings-ink: #1f2a44;
60
+ --mw-settings-muted: #667085;
61
+ --mw-settings-border: #d8dee8;
62
+ --mw-settings-surface: #ffffff;
63
+ --mw-settings-panel: #f8fafc;
64
+ --mw-settings-accent: #d1232a;
65
+ --mw-settings-focus: #2f5aa8;
66
+ --mw-settings-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
67
+ color: var(--mw-settings-ink);
68
+ font-family: var(--mw-settings-font-family, "IBM Plex Sans",
69
+ "Segoe UI", Arial, sans-serif);
62
70
  }
63
71
  .card {
64
72
  position: relative;
65
73
  overflow: hidden;
66
- border-radius: 20px;
67
- border: 1px solid var(--mw-settings-border, #e3dbd1);
68
- background: var(--mw-settings-surface, #fbf7f2);
69
- padding: 1.75rem;
70
- box-shadow: 0 12px 24px rgba(34, 28, 20, 0.08);
74
+ border-radius: 4px;
75
+ border: 1px solid var(--mw-settings-border);
76
+ background: var(--mw-settings-surface);
77
+ padding: 1.5rem;
78
+ box-shadow: var(--mw-settings-shadow);
71
79
  animation: riseIn 0.4s ease-out;
72
80
  }
73
- .card::before {
74
- content: '';
75
- position: absolute;
76
- inset: -60% -20% auto -20%;
77
- height: 160px;
78
- background:
79
- radial-gradient(circle at 20% 20%, rgba(255, 194, 128, 0.55),
80
- transparent 60%),
81
- radial-gradient(circle at 85% 0%, rgba(129, 191, 255, 0.4),
82
- transparent 55%);
83
- pointer-events: none;
84
- }
85
81
  .header {
86
82
  display: flex;
87
83
  align-items: flex-start;
@@ -94,7 +90,7 @@ class C extends $ {
94
90
  text-transform: uppercase;
95
91
  letter-spacing: 0.2em;
96
92
  font-size: 0.7rem;
97
- color: var(--mw-settings-muted, #6b6259);
93
+ color: var(--mw-settings-muted);
98
94
  margin: 0 0 0.35rem;
99
95
  }
100
96
  h2 {
@@ -104,7 +100,7 @@ class C extends $ {
104
100
  }
105
101
  .subtitle {
106
102
  margin: 0;
107
- color: var(--mw-settings-muted, #6b6259);
103
+ color: var(--mw-settings-muted);
108
104
  font-size: 0.95rem;
109
105
  }
110
106
  .status-row {
@@ -118,17 +114,17 @@ class C extends $ {
118
114
  align-items: center;
119
115
  gap: 0.35rem;
120
116
  padding: 0.35rem 0.75rem;
121
- border-radius: 999px;
117
+ border-radius: 4px;
122
118
  font-size: 0.8rem;
123
119
  font-weight: 600;
124
- background: #ffffff;
125
- border: 1px solid var(--mw-settings-border, #e3dbd1);
126
- color: var(--mw-settings-muted, #6b6259);
120
+ background: #f1f3f7;
121
+ border: 1px solid var(--mw-settings-border);
122
+ color: var(--mw-settings-muted);
127
123
  }
128
124
  .status {
129
125
  margin: 1rem 0 0;
130
126
  font-size: 0.9rem;
131
- color: var(--mw-settings-muted, #6b6259);
127
+ color: var(--mw-settings-muted);
132
128
  }
133
129
  .status.error {
134
130
  color: #9b2c2c;
@@ -149,9 +145,9 @@ class C extends $ {
149
145
  gap: 1rem;
150
146
  }
151
147
  .field {
152
- background: var(--mw-settings-panel, #ffffff);
153
- border: 1px solid var(--mw-settings-border, #e3dbd1);
154
- border-radius: 14px;
148
+ background: var(--mw-settings-panel);
149
+ border: 1px solid var(--mw-settings-border);
150
+ border-radius: 4px;
155
151
  padding: 0.85rem 0.9rem 0.95rem;
156
152
  display: grid;
157
153
  gap: 0.5rem;
@@ -164,8 +160,8 @@ class C extends $ {
164
160
  font-size: 0.9rem;
165
161
  }
166
162
  .input {
167
- border: 1px solid #d5cbc0;
168
- border-radius: 10px;
163
+ border: 1px solid var(--mw-settings-border);
164
+ border-radius: 4px;
169
165
  padding: 0.55rem 0.7rem;
170
166
  font-size: 0.95rem;
171
167
  font-family: inherit;
@@ -173,12 +169,12 @@ class C extends $ {
173
169
  background: #fff;
174
170
  }
175
171
  .input:focus {
176
- outline: 2px solid var(--mw-settings-focus, #2563eb);
172
+ outline: 2px solid var(--mw-settings-focus);
177
173
  outline-offset: 1px;
178
174
  border-color: transparent;
179
175
  }
180
176
  .helper {
181
- color: var(--mw-settings-muted, #6b6259);
177
+ color: var(--mw-settings-muted);
182
178
  font-size: 0.8rem;
183
179
  }
184
180
  .error-text {
@@ -199,7 +195,7 @@ class C extends $ {
199
195
  flex-wrap: wrap;
200
196
  }
201
197
  .button {
202
- border-radius: 999px;
198
+ border-radius: 4px;
203
199
  border: 1px solid transparent;
204
200
  padding: 0.6rem 1.4rem;
205
201
  font-size: 0.9rem;
@@ -208,14 +204,14 @@ class C extends $ {
208
204
  transition: transform 0.2s ease, box-shadow 0.2s ease;
209
205
  }
210
206
  .button.primary {
211
- background: var(--mw-settings-accent, #b24b1c);
207
+ background: var(--mw-settings-accent);
212
208
  color: #fff;
213
- box-shadow: 0 10px 18px rgba(178, 75, 28, 0.2);
209
+ box-shadow: 0 8px 18px rgba(209, 35, 42, 0.2);
214
210
  }
215
211
  .button.secondary {
216
212
  background: #fff;
217
- color: var(--mw-settings-ink, #1b1a17);
218
- border-color: var(--mw-settings-border, #e3dbd1);
213
+ color: var(--mw-settings-ink);
214
+ border-color: var(--mw-settings-border);
219
215
  }
220
216
  .button:disabled {
221
217
  opacity: 0.6;
@@ -225,7 +221,7 @@ class C extends $ {
225
221
  }
226
222
  .meta-note {
227
223
  font-size: 0.8rem;
228
- color: var(--mw-settings-muted, #6b6259);
224
+ color: var(--mw-settings-muted);
229
225
  }
230
226
  @keyframes riseIn {
231
227
  from { opacity: 0; transform: translateY(12px); }
@@ -262,7 +258,7 @@ class C extends $ {
262
258
  const e = await this.getUserFacts(), s = B(e), t = {
263
259
  preferredName: p(s, c.preferredName),
264
260
  zipCode: p(s, c.zipCode),
265
- dateOfBirth: h(
261
+ dateOfBirth: m(
266
262
  p(s, c.dateOfBirth)
267
263
  )
268
264
  };
@@ -306,7 +302,7 @@ class C extends $ {
306
302
  const t = {
307
303
  preferredName: (this._values.preferredName || "").trim(),
308
304
  zipCode: (this._values.zipCode || "").trim(),
309
- dateOfBirth: h(this._values.dateOfBirth)
305
+ dateOfBirth: m(this._values.dateOfBirth)
310
306
  }, o = this._validate(t);
311
307
  if (Object.values(o).some(Boolean)) {
312
308
  this._fieldErrors = o;
@@ -342,7 +338,7 @@ class C extends $ {
342
338
  }, this.error = "", this.success = "";
343
339
  }
344
340
  render() {
345
- const { loading: e, saving: s, error: t, success: o, _values: d, _fieldErrors: a } = this, i = Object.values(this._dirty).some(Boolean), f = typeof this.getUserFacts == "function", u = typeof this.updateUserFact == "function" || typeof this.updateUserFacts == "function", l = /* @__PURE__ */ new Date(), m = `${l.getFullYear()}-${String(l.getMonth() + 1).padStart(2, "0")}-${String(l.getDate()).padStart(2, "0")}`, g = t ? r`<div class="status error" role="status">${t}</div>` : "", b = o ? r`<div class="status success" role="status">${o}</div>` : "", v = f ? "" : r`
341
+ const { loading: e, saving: s, error: t, success: o, _values: d, _fieldErrors: a } = this, i = Object.values(this._dirty).some(Boolean), f = typeof this.getUserFacts == "function", u = typeof this.updateUserFact == "function" || typeof this.updateUserFacts == "function", l = /* @__PURE__ */ new Date(), h = `${l.getFullYear()}-${String(l.getMonth() + 1).padStart(2, "0")}-${String(l.getDate()).padStart(2, "0")}`, g = t ? r`<div class="status error" role="status">${t}</div>` : "", b = o ? r`<div class="status success" role="status">${o}</div>` : "", v = f ? "" : r`
346
342
  <div class="status" role="status">
347
343
  Provide a getUserFacts callback to load values.
348
344
  </div>
@@ -350,15 +346,15 @@ class C extends $ {
350
346
  <div class="status" role="status">
351
347
  Provide an updateUserFact callback to save changes.
352
348
  </div>
353
- ` : "", _ = a.preferredName ? r`
349
+ ` : "", w = a.preferredName ? r`
354
350
  <span class="error-text">
355
351
  ${a.preferredName}
356
352
  </span>
357
- ` : "", x = a.zipCode ? r`
353
+ ` : "", _ = a.zipCode ? r`
358
354
  <span class="error-text">
359
355
  ${a.zipCode}
360
356
  </span>
361
- ` : "", w = a.dateOfBirth ? r`
357
+ ` : "", x = a.dateOfBirth ? r`
362
358
  <span class="error-text">
363
359
  ${a.dateOfBirth}
364
360
  </span>
@@ -397,7 +393,7 @@ class C extends $ {
397
393
  ?disabled=${e || s}
398
394
  />
399
395
  <span class="helper">What should we call you?</span>
400
- ${_}
396
+ ${w}
401
397
  </label>
402
398
 
403
399
  <label class="field">
@@ -415,7 +411,7 @@ class C extends $ {
415
411
  pattern="\\d{5}"
416
412
  />
417
413
  <span class="helper">Used for local weather and alerts.</span>
418
- ${x}
414
+ ${_}
419
415
  </label>
420
416
 
421
417
  <label class="field">
@@ -428,10 +424,10 @@ class C extends $ {
428
424
  .value=${d.dateOfBirth}
429
425
  @input=${this._handleDateOfBirthInput}
430
426
  ?disabled=${e || s}
431
- max=${m}
427
+ max=${h}
432
428
  />
433
429
  <span class="helper">Format: YYYY-MM-DD</span>
434
- ${w}
430
+ ${x}
435
431
  </label>
436
432
  </div>
437
433
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wral/my-wral-settings",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "type": "module",
5
5
  "description": "Lit web component for rendering My WRAL settings input fields.",
6
6
  "author": "Dominick Jones <djones@wral.com>",