@rededor/cura 0.4.5 → 0.5.0-alpha.0

package/dist/collection/components/text/cura-display/cura-display.js

@@ -1,146 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class CuraDisplay {
-  constructor() {
-    this.level = 1;
-    this.size = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
-  }
-  connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
-    this.setFontProperties();
-    this.setColors();
-  }
-  getClasses() {
-    const classes = {};
-    classes[this.size.toLowerCase()] = true;
-    return classes;
-  }
-  setFontProperties() {
-    this.styles = {
-      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
-      '--font-size': window.CuraAPI.theme.fonts.getSize(),
-      '--font-weight-bold': this.weights.bold,
-      '--font-weight-black': this.weights.black
-    };
-    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
-    this.setHostProperty('--block-margin', '0.5em');
-  }
-  setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = this.inverted
-      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
-  }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
-  }
-  getHeadingTag() {
-    const tags = {
-      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
-    };
-    return tags[`${this.level}`] || tags['default'];
-  }
-  render() {
-    return (h(Host, null, this.getHeadingTag()));
-  }
-  static get is() { return "cura-display"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-display.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-display.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "level": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading level for semantics.\nValues: 1(default)-6."
-        },
-        "attribute": "level",
-        "reflect": true,
-        "defaultValue": "1"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading style size.\nValues: small | regular(default) | large."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'regular'"
-      },
-      "inverted": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Apply light color to text in dark background.\nValues: boolean."
-        },
-        "attribute": "inverted",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "spotColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
-        },
-        "attribute": "spot-color",
-        "reflect": true,
-        "defaultValue": "'primary'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=cura-display.js.map

package/dist/collection/components/text/cura-display/cura-display.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-display.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics.\n   * Values: 1(default)-6.\n   */\n  @Prop({reflect: true}) level = 1;\n  /**\n  * Heading style size.\n  * Values: small | regular(default) | large.\n  */\n  @Prop({reflect: true}) size = 'regular';\n  /**\n  * Apply light color to text in dark background.\n  * Values: boolean.\n  */\n  @Prop({reflect: true}) inverted = false;\n  /**\n  * Apply base system color to elements like <a> and <abbr>.\n  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n  */\n  @Prop({reflect: true}) spotColor = 'primary';\n \n   /**\n    * Host element <cura-heading>\n    */\n   @Element() host: HTMLElement;\n \n   /**\n    * Internal Props\n    */\n   weights: any;\n   styles: any;\n\n   connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.size.toLowerCase()] =  true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '0.5em');\n  }\n\n  setColors() {\n    const fontColor = this.inverted \n      ? window.CuraAPI.theme.colors.getColor('neutral-white') \n      : window.CuraAPI.theme.fonts.getColor();\n    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n    this.styles['--color-link'] = this.inverted \n      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/text/cura-heading/cura-heading.css

@@ -1,92 +0,0 @@
-/* Breakpoints variables */
-/**
- * Responsive media for mobile (small) only.
- * Use: @include mobile-only() { ... }
- */
-/**
- * Responsive media for medium only.
- * Use: @include medium-only() { ... }
- */
-/**
- * Responsive media for large only.
- * Use: @include large-only() { ... }
- */
-/**
- * Responsive media for large and up.
- * Use: @include large-up() { ... }
- */
-/**
- * Responsive media for xlarge only.
- * Use: @include xlarge-only() { ... }
- */
-:host {
-  display: block;
-  font-size: var(--font-size);
-}
-:host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
-  font-family: var(--font-family);
-  font-size: 1.71em;
-  font-weight: var(--font-weight-regular);
-  color: var(--color-body);
-  line-height: 130%;
-  letter-spacing: 0%;
-  margin-block-start: var(--block-margin);
-  margin-block-end: var(--block-margin);
-}
-:host h1.bold-weight, :host h2.bold-weight, :host h3.bold-weight, :host h4.bold-weight, :host h5.bold-weight, :host h6.bold-weight {
-  font-weight: var(--font-weight-medium);
-}
-:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
-  font-size: 2.07em;
-  letter-spacing: -2%;
-}
-:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
-  font-size: 1.214em;
-  line-height: 150%;
-  letter-spacing: 0%;
-}
-:host h1.small.bold-weight, :host h2.small.bold-weight, :host h3.small.bold-weight, :host h4.small.bold-weight, :host h5.small.bold-weight, :host h6.small.bold-weight {
-  font-weight: var(--font-weight-bold);
-}
-@media (min-width: 768px) and (max-width: 1365px) {
-  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
-    font-size: 2em;
-  }
-  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
-    font-size: 2.357em;
-  }
-  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
-    font-size: 1.357em;
-  }
-}
-@media (min-width: 1366px) {
-  :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
-    font-size: 2.5em;
-    line-height: 135%;
-    letter-spacing: -2%;
-  }
-  :host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large {
-    font-size: 2.92em;
-  }
-  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
-    font-size: 1.71em;
-    line-height: 160%;
-    letter-spacing: 0%;
-  }
-}
-:host ::slotted(b), :host ::slotted(strong) {
-  font-weight: var(--font-weight-bold);
-}
-:host ::slotted(a) {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-link);
-  text-decoration: none;
-  text-underline-offset: 10%;
-  cursor: pointer;
-}
-:host ::slotted(abbr) {
-  color: var(--color-link);
-  text-decoration: underline dashed 1px var(--color-link);
-  text-underline-offset: 10%;
-  cursor: default;
-}

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -1,168 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class CuraHeading {
-  constructor() {
-    this.level = 1;
-    this.size = 'regular';
-    this.weight = 'regular';
-    this.inverted = false;
-    this.spotColor = 'primary';
-  }
-  connectedCallback() {
-    this.weights = window.CuraAPI.theme.fonts.getWeights();
-    this.setFontProperties();
-    this.setColors();
-  }
-  getClasses() {
-    const classes = {};
-    classes[this.size.toLowerCase()] = true;
-    classes[`${this.weight.toLowerCase()}-weight`] = true;
-    return classes;
-  }
-  setFontProperties() {
-    this.styles = {
-      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
-      '--font-size': window.CuraAPI.theme.fonts.getSize(),
-      '--font-weight-regular': this.weights.regular,
-      '--font-weight-medium': this.weights.medium,
-      '--font-weight-bold': this.weights.bold,
-      '--font-weight-black': this.weights.black
-    };
-    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
-    this.setHostProperty('--block-margin', '0.5em');
-  }
-  setColors() {
-    const fontColor = this.inverted
-      ? window.CuraAPI.theme.colors.getColor('neutral-white')
-      : window.CuraAPI.theme.fonts.getColor();
-    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
-    this.styles['--color-link'] = this.inverted
-      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
-      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
-  }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
-  }
-  getHeadingTag() {
-    const tags = {
-      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
-      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
-    };
-    return tags[`${this.level}`] || tags['default'];
-  }
-  render() {
-    return (h(Host, null, this.getHeadingTag()));
-  }
-  static get is() { return "cura-heading"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-heading.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-heading.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "level": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading level for semantics.\nValues: 1(default)-6."
-        },
-        "attribute": "level",
-        "reflect": true,
-        "defaultValue": "1"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading style size.\nValues: small | regular(default) | large."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'regular'"
-      },
-      "weight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading font weight.\nValues: regular(default) | bold."
-        },
-        "attribute": "weight",
-        "reflect": true,
-        "defaultValue": "'regular'"
-      },
-      "inverted": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Apply light color to text in dark background.\nValues: boolean."
-        },
-        "attribute": "inverted",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "spotColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Apply base system color to elements like <a> and <abbr>.\nValues: String primary(default) | secondary | accent | neutral | success | error | warning | info."
-        },
-        "attribute": "spot-color",
-        "reflect": true,
-        "defaultValue": "'primary'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=cura-heading.js.map

package/dist/collection/components/text/cura-heading/cura-heading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"cura-heading.js","sourceRoot":"","sources":["../../../../src/components/text/cura-heading/cura-heading.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n  tag: 'cura-heading',\n  styleUrl: 'cura-heading.scss',\n  shadow: true,\n})\nexport class CuraHeading {\n\n  /**\n   * Heading level for semantics.\n   * Values: 1(default)-6.\n   */\n  @Prop({reflect: true}) level = 1;\n  /**\n   * Heading style size.\n   * Values: small | regular(default) | large.\n   */\n  @Prop({reflect: true}) size = 'regular';\n  /**\n   * Heading font weight.\n   * Values: regular(default) | bold.\n   */\n  @Prop({reflect: true}) weight = 'regular';\n  /**\n  * Apply light color to text in dark background.\n  * Values: boolean.\n  */\n  @Prop({reflect: true}) inverted = false;\n  /**\n  * Apply base system color to elements like <a> and <abbr>.\n  * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.\n  */\n  @Prop({reflect: true}) spotColor = 'primary';\n\n  /**\n   * Host element <cura-heading>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  styles: any;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.size.toLowerCase()] =  true;\n    classes[`${this.weight.toLowerCase()}-weight`] = true;\n    return classes;\n  }\n\n  setFontProperties() {\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold,\n      '--font-weight-black': this.weights.black\n    }\n    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());\n    this.setHostProperty('--block-margin', '0.5em');\n  }\n\n  setColors() {\n    const fontColor = this.inverted \n      ? window.CuraAPI.theme.colors.getColor('neutral-white') \n      : window.CuraAPI.theme.fonts.getColor();\n    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');\n    this.styles['--color-link'] = this.inverted \n      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)\n      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);\n  }\n\n  setHostProperty(prop: string, value: string) {\n    this.host.style.setProperty(prop, value);\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/text/cura-paragraph/cura-paragraph.css

@@ -1,115 +0,0 @@
-/* Breakpoints variables */
-/**
- * Responsive media for mobile (small) only.
- * Use: @include mobile-only() { ... }
- */
-/**
- * Responsive media for medium only.
- * Use: @include medium-only() { ... }
- */
-/**
- * Responsive media for large only.
- * Use: @include large-only() { ... }
- */
-/**
- * Responsive media for large and up.
- * Use: @include large-up() { ... }
- */
-/**
- * Responsive media for xlarge only.
- * Use: @include xlarge-only() { ... }
- */
-:host {
-  display: block;
-  font-size: var(--font-size);
-}
-:host p {
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight-regular);
-  color: var(--color-body);
-  line-height: var(--line-height);
-  /* letter-spacing: 0.02em; */
-  margin-block-start: var(--block-margin);
-  margin-block-end: var(--block-margin);
-}
-:host p.large {
-  font-size: 1.21em;
-  line-height: calc(var(--line-height) + 10%);
-  /* line-height: 150%; */
-  /* letter-spacing: normal; */
-}
-:host p.small {
-  font-size: 0.85em;
-  line-height: calc(var(--line-height) - 5%);
-  /* line-height: 135%; */
-  /* letter-spacing: 0.04em; */
-}
-:host p.caption {
-  font-size: 0.71em;
-  line-height: calc(var(--line-height) - 5%);
-  /* line-height: 135%; */
-  /* letter-spacing: 0.06em; */
-}
-@media (min-width: 768px) and (max-width: 1365px) {
-  :host p {
-    font-size: 1.14em;
-    line-height: calc(var(--line-height) + 5%);
-    /* line-height: 145%; */
-  }
-  :host p.large {
-    font-size: 1.35em;
-    line-height: calc(var(--line-height) + 10%);
-    /* line-height: 150%; */
-  }
-  :host p.small {
-    font-size: 1em;
-    line-height: calc(var(--line-height) - 5%);
-    /* line-height: 135%; */
-  }
-  :host p.caption {
-    font-size: 0.85em;
-    line-height: calc(var(--line-height) - 5%);
-    /* line-height: 135%; */
-    /* letter-spacing: 0.06em; */
-  }
-}
-@media (min-width: 1366px) {
-  :host p {
-    font-size: 1.42em;
-    line-height: calc(var(--line-height) + 10%);
-    /* line-height: 150%; */
-    /* letter-spacing: normal; */
-  }
-  :host p.large {
-    font-size: 1.71em;
-    line-height: calc(var(--line-height) + 20%);
-    /* line-height: 160%; */
-  }
-  :host p.small {
-    font-size: 1.21em;
-    line-height: calc(var(--line-height) + 5%);
-    /* line-height: 145%; */
-    /* letter-spacing: normal; */
-  }
-  :host p.caption {
-    font-size: 1em;
-    line-height: calc(var(--line-height) + 5%);
-    /* line-height: 145%; */
-    /* letter-spacing: 0.02em; */
-  }
-}
-:host ::slotted(b), :host ::slotted(strong) {
-  font-weight: var(--font-weight-bold);
-}
-:host ::slotted(a) {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-link);
-  text-underline-offset: 10%;
-}
-:host ::slotted(abbr) {
-  color: var(--color-link);
-  text-decoration: underline dashed 1px var(--color-link);
-  text-underline-offset: 10%;
-  cursor: default;
-}