@ucalgary-design-system/link 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ucalgary-design-system/link
 
+## 1.0.2
+
+### Patch Changes
+
+- 5e2ac2d: Made use of new animated underline mixin.
+- Updated dependencies [5e2ac2d]
+- Updated dependencies [31c3e09]
+- Updated dependencies [c1dd26e]
+  - @ucalgary-design-system/core@1.0.10
+
 ## 1.0.1
 
 ### Patch Changes

package/index.js

@@ -1,5 +1,5 @@
-import { BaseElement as O, injectGlobalTokens as A } from "@ucalgary-design-system/core";
-import { unsafeCSS as x, nothing as M, html as g } from "lit";
+import { BaseElement as C, injectGlobalTokens as A } from "@ucalgary-design-system/core";
+import { unsafeCSS as x, nothing as k, html as E } from "lit";
 import { ifDefined as S } from "lit/directives/if-defined.js";
 import "@ucalgary-design-system/icon";
 /**
@@ -7,7 +7,7 @@ import "@ucalgary-design-system/icon";
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const R = (o) => (t, e) => {
+const M = (o) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
     customElements.define(o, t);
   }) : customElements.define(o, t);
@@ -17,16 +17,16 @@ const R = (o) => (t, e) => {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const y = globalThis, v = y.ShadowRoot && (y.ShadyCSS === void 0 || y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, U = Symbol(), b = /* @__PURE__ */ new WeakMap();
-let j = class {
+const y = globalThis, g = y.ShadowRoot && (y.ShadyCSS === void 0 || y.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, O = Symbol(), b = /* @__PURE__ */ new WeakMap();
+let R = class {
   constructor(t, e, s) {
-    if (this._$cssResult$ = !0, s !== U) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== O) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = e;
   }
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (v && t === void 0) {
+    if (g && t === void 0) {
       const s = e !== void 0 && e.length === 1;
       s && (t = b.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && b.set(e, t));
     }
@@ -36,16 +36,16 @@ let j = class {
     return this.cssText;
   }
 };
-const k = (o) => new j(typeof o == "string" ? o : o + "", void 0, U), z = (o, t) => {
-  if (v) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+const z = (o) => new R(typeof o == "string" ? o : o + "", void 0, O), j = (o, t) => {
+  if (g) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else for (const e of t) {
     const s = document.createElement("style"), r = y.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, o.appendChild(s);
   }
-}, w = v ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
+}, w = g ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
-  return k(e);
+  return z(e);
 })(o) : o;
 /**
  * @license
@@ -80,7 +80,7 @@ const { is: T, defineProperty: D, getOwnPropertyDescriptor: L, getOwnPropertyNam
       }
   }
   return e;
-} }, _ = (o, t) => !T(o, t), C = { attribute: !0, type: String, converter: m, reflect: !1, useDefault: !1, hasChanged: _ };
+} }, v = (o, t) => !T(o, t), U = { attribute: !0, type: String, converter: m, reflect: !1, useDefault: !1, hasChanged: v };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), h.litPropertyMetadata ?? (h.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 class p extends HTMLElement {
   static addInitializer(t) {
@@ -89,7 +89,7 @@ class p extends HTMLElement {
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t, e = C) {
+  static createProperty(t, e = U) {
     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) {
       const s = Symbol(), r = this.getPropertyDescriptor(t, s, e);
       r !== void 0 && D(this.prototype, t, r);
@@ -107,7 +107,7 @@ class p extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? C;
+    return this.elementProperties.get(t) ?? U;
   }
   static _$Ei() {
     if (this.hasOwnProperty(u("elementProperties"))) return;
@@ -166,7 +166,7 @@ class p extends HTMLElement {
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return z(t, this.constructor.elementStyles), t;
+    return j(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     var t;
@@ -201,15 +201,15 @@ class p extends HTMLElement {
     if (r !== void 0 && this._$Em !== r) {
       const a = s.getPropertyOptions(r), c = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((i = a.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? a.converter : m;
       this._$Em = r;
-      const E = c.fromAttribute(e, a.type);
-      this[r] = E ?? ((n = this._$Ej) == null ? void 0 : n.get(r)) ?? E, this._$Em = null;
+      const _ = c.fromAttribute(e, a.type);
+      this[r] = _ ?? ((n = this._$Ej) == null ? void 0 : n.get(r)) ?? _, this._$Em = null;
     }
   }
   requestUpdate(t, e, s) {
     var r;
     if (t !== void 0) {
       const i = this.constructor, n = this[t];
-      if (s ?? (s = i.getPropertyOptions(t)), !((s.hasChanged ?? _)(n, e) || s.useDefault && s.reflect && n === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(i._$Eu(t, s)))) return;
+      if (s ?? (s = i.getPropertyOptions(t)), !((s.hasChanged ?? v)(n, e) || s.useDefault && s.reflect && n === ((r = this._$Ej) == null ? void 0 : r.get(t)) && !this.hasAttribute(i._$Eu(t, s)))) return;
       this.C(t, e, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -291,7 +291,7 @@ p.elementStyles = [], p.shadowRootOptions = { mode: "open" }, p[u("elementProper
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const X = { attribute: !0, type: String, converter: m, reflect: !1, hasChanged: _ }, J = (o = X, t, e) => {
+const J = { attribute: !0, type: String, converter: m, reflect: !1, hasChanged: v }, K = (o = J, t, e) => {
   const { kind: s, metadata: r } = e;
   let i = globalThis.litPropertyMetadata.get(r);
   if (i === void 0 && globalThis.litPropertyMetadata.set(r, i = /* @__PURE__ */ new Map()), s === "setter" && ((o = Object.create(o)).wrapped = !0), i.set(e.name, o), s === "accessor") {
@@ -313,39 +313,39 @@ const X = { attribute: !0, type: String, converter: m, reflect: !1, hasChanged:
   throw Error("Unsupported decorator location: " + s);
 };
 function f(o) {
-  return (t, e) => typeof e == "object" ? J(o, t, e) : ((s, r, i) => {
+  return (t, e) => typeof e == "object" ? K(o, t, e) : ((s, r, i) => {
     const n = r.hasOwnProperty(i);
     return r.constructor.createProperty(i, s), n ? Object.getOwnPropertyDescriptor(r, i) : void 0;
   })(o, t, e);
 }
-const K = ':host{display:inline-block;width:-moz-fit-content;width:fit-content;color:inherit}@keyframes redraw-underline{0%{transform:scaleX(0)}to{transform:scaleX(1)}}a{display:flex;width:auto;position:relative;gap:4px;align-items:center;color:inherit;font-weight:var(--ucds-font-weight-semibold);text-decoration:none}a .text{position:relative}a .text:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:left;transform:scaleX(1);transition:none}a.cta ucds-icon{color:currentColor;opacity:0;transition:transform .5s,opacity .5s;position:relative;top:50%;transform:translate(-100%)}a:focus ucds-icon,a:hover ucds-icon{opacity:1;transform:translate(0)}a:focus .text:after,a:hover .text:after{animation:redraw-underline .3s forwards}a:focus-visible{outline:1px solid var(--ucds-color-action-focus);outline-offset:1px;border-radius:2px}a.color-red{color:var(--ucds-color-action-rest)}a.color-red:hover{color:var(--ucds-color-action-hover)}a.color-red:active,a.color-red:focus{color:var(--ucds-color-action-active)}a.color-red:visited{color:var(--ucds-color-action-visited)}a.color-grey{color:var(--ucds-color-text-primary)}a.color-inherit{outline-color:currentColor}';
-var V = Object.defineProperty, W = Object.getOwnPropertyDescriptor, d = (o, t, e, s) => {
-  for (var r = s > 1 ? void 0 : s ? W(t, e) : t, i = o.length - 1, n; i >= 0; i--)
+const V = ":host{display:inline-block;width:-moz-fit-content;width:fit-content;color:inherit}a{display:flex;width:auto;position:relative;gap:4px;align-items:center;color:inherit;font-weight:var(--ucds-font-weight-semibold);text-decoration:none}@keyframes redrawUnderline{0%{background-size:0 1px}to{background-size:100% 1px}}a{text-decoration:none}a .text{background-image:linear-gradient(currentColor,currentColor);background-position:0 calc(100% - 1px);background-repeat:no-repeat;background-size:100% 1px;transition:background-size .3s}a:hover .text,a:focus .text{animation:redrawUnderline .3s forwards}a .text{position:relative}a.cta ucds-icon{color:currentColor;opacity:0;transition:transform .5s,opacity .5s;position:relative;top:50%;transform:translate(-100%)}a:focus ucds-icon,a:hover ucds-icon{opacity:1;transform:translate(0)}a:focus-visible{outline:1px solid var(--ucds-color-action-focus);outline-offset:1px;border-radius:2px}a.color-red{color:var(--ucds-color-action-rest)}a.color-red:hover{color:var(--ucds-color-action-hover)}a.color-red:active,a.color-red:focus{color:var(--ucds-color-action-active)}a.color-red:visited{color:var(--ucds-color-action-visited)}a.color-grey{color:var(--ucds-color-text-primary)}a.color-inherit{outline-color:currentColor}";
+var W = Object.defineProperty, F = Object.getOwnPropertyDescriptor, d = (o, t, e, s) => {
+  for (var r = s > 1 ? void 0 : s ? F(t, e) : t, i = o.length - 1, n; i >= 0; i--)
     (n = o[i]) && (r = (s ? n(t, e, r) : n(r)) || r);
-  return s && r && V(t, e, r), r;
+  return s && r && W(t, e, r), r;
 };
-const F = ["red", "grey", "inherit"];
-let l = class extends O {
+const G = ["red", "grey", "inherit"];
+let l = class extends C {
   constructor() {
     super(...arguments), this.href = "", this.color = "red";
   }
   willUpdate(o) {
-    o.has("color") && (!this.color || !F.includes(this.color)) && (console.warn(`[ucds-link] Invalid or missing color "${this.color}" passed. Falling back to "red".`), this.color = "red");
+    o.has("color") && (!this.color || !G.includes(this.color)) && (console.warn(`[ucds-link] Invalid or missing color "${this.color}" passed. Falling back to "red".`), this.color = "red");
   }
   render() {
-    return g`
+    return E`
       <a href="${this.href}" target="${S(this.target)}" rel="${S(this.rel)}" class="${`color-${this.color}`} ${this.cta ? "cta" : ""}">
         <span class="text">
           <slot></slot>
         </span>
-        ${this.cta ? g`<ucds-icon name="arrowRight" size="20"></ucds-icon>` : M}
+        ${this.cta ? E`<ucds-icon name="arrowRight" size="20"></ucds-icon>` : k}
       </a>
     `;
   }
 };
 l.styles = [
-  O.styles,
-  x(K)
+  C.styles,
+  x(V)
 ];
 d([
   f({ type: String })
@@ -363,7 +363,7 @@ d([
   f({ type: Boolean, reflect: !0 })
 ], l.prototype, "cta", 2);
 l = d([
-  R("ucds-link")
+  M("ucds-link")
 ], l);
 A();
 export {

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@ucalgary-design-system/link",
-  "version": "1.0.1",
+  "version": "1.0.2",
+  "description": "A web component for Link",
+  "publishConfig": {
+    "access": "public"
+  },
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -11,13 +15,9 @@
     }
   },
   "peerDependencies": {
-    "@ucalgary-design-system/core": "^1.0.6",
+    "@ucalgary-design-system/core": "^1.0.10",
     "@ucalgary-design-system/tokens": "^1.0.0",
     "@ucalgary-design-system/icon": "^1.0.5",
     "lit": "^3.2.1"
-  },
-  "description": "A web component for Link",
-  "publishConfig": {
-    "access": "public"
   }
 }