@pine-ds/core 0.0.2-alpha.0

package/dist/collection/components/pds-link/pds-link.js

@@ -0,0 +1,138 @@
+import { h } from "@stencil/core";
+/**
+ * @slot - Content is placed between the opening closing tags
+ */
+export class PdsLink {
+    constructor() {
+        this.componentId = undefined;
+        this.external = false;
+        this.variant = 'inline';
+        this.fontSize = 'lg';
+        this.href = undefined;
+    }
+    classNames() {
+        const classNames = ['pds-link'];
+        if (this.fontSize) {
+            classNames.push('pds-link--' + this.fontSize);
+        }
+        if (this.variant) {
+            classNames.push('pds-link--' + this.variant);
+        }
+        return classNames.join(' ');
+    }
+    render() {
+        return (h("a", { class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined }, h("slot", null, this.href), this.external &&
+            h("pds-icon", { name: "launch", size: this.fontSize })));
+    }
+    static get is() { return "pds-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "When enabled, opens link in a new tab."
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inline' | 'plain'",
+                    "resolved": "\"inline\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\nModifies the look of the link"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inline'"
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "lg"
+                        }],
+                    "text": "\nThe Font size follows t-shirt model\nsm: 12px\nmd: 14px\nlg: 16px"
+                },
+                "attribute": "font-size",
+                "reflect": false,
+                "defaultValue": "'lg'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that the hyperlink points to."
+                },
+                "attribute": "href",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-link.js.map

package/dist/collection/components/pds-link/pds-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,OAAO;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,SACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YAE5C,gBAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,gBAAU,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the opening closing tags\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon name=\"launch\" size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-link/stories/pds-link.stories.js

@@ -0,0 +1,49 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-link'),
+  args: { href: '#some-anchor' },
+  component: 'pds-link',
+  title: 'components/Link'
+}
+
+const BaseTemplate = (args) => html`<pds-link external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
+const BaseTemplateWithSlot = (args) => html` <pds-link external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+
+export const External = BaseTemplate.bind();
+External.args = {
+  external: true,
+  fontSize: 'lg',
+  variant: 'inline'
+};
+
+export const Inline = BaseTemplate.bind();
+Inline.args = {
+  external: false,
+  fontSize: 'lg',
+  href: 'https://www.google.com',
+  variant: 'inline'
+};
+
+export const Plain = BaseTemplate.bind();
+Plain.args = {
+  external: false,
+  fontSize: 'lg',
+  variant: 'plain'
+};
+
+export const WithCustomText = BaseTemplateWithSlot.bind();
+WithCustomText.args = {
+  external: false,
+  fontSize: 'lg',
+  slot: 'Overrides default use of href',
+  variant: 'inline'
+};
+
+export const WithoutCustomTextInSlot = BaseTemplateWithSlot.bind();
+WithoutCustomTextInSlot.args = {
+  external: false,
+  fontSize: 'lg',
+  variant: 'inline'
+};

package/dist/collection/components/pds-progress/pds-progress.css

@@ -0,0 +1,77 @@
+:host {
+  --progress-fill-color: var(--pine-color-primary-300);
+  --height-progress-bar: 8px;
+  align-items: center;
+  display: flex;
+}
+
+@keyframes progressBar {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+.pds-progress {
+  --background-progress-bar: var(--pine-color-neutral-grey-300);
+  --border-radius: var(--pine-border-radius-xs);
+  align-items: center;
+  background-color: var(--background-progress-bar);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: row;
+  height: var(--height-progress-bar);
+  position: relative;
+  width: 100%;
+}
+
+:host(.is-animated) progress,
+:host(.is-animated) progress::-webkit-progress-bar {
+  animation: progressBar 3s ease;
+  animation-fill-mode: forwards;
+}
+
+progress,
+progress::-webkit-progress-bar {
+  background-color: transparent;
+  border: 0;
+  height: var(--height-progress-bar);
+  width: 100%;
+}
+
+progress::-webkit-progress-value {
+  --background-color: var(--pine-color-primary-300);
+  --border-radius: var(--pine-border-radius-xs);
+  background-color: var(--progress-fill-color, var(--background-color));
+  border-radius: var(--border-radius);
+}
+
+progress::-moz-progress-bar {
+  --background-color: var(--pine-color-primary-300);
+  --border-radius: var(--pine-border-radius-xs);
+  background-color: var(--progress-fill-color, var(--background-color));
+  border-radius: var(--border-radius);
+}
+
+.pds-progress__label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.pds-progress__percentage {
+  --font-size: var(--pine-font-size-body-sm);
+  --line-height: var(--pine-line-height-sm);
+  --font-weight: var(--pine-font-weight-medium);
+  --margin-inline-start: var(--pine-spacing-md);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  margin-inline-start: calc(var(--margin-inline-start) / 2);
+}

package/dist/collection/components/pds-progress/pds-progress.js

@@ -0,0 +1,148 @@
+import { Host, h } from "@stencil/core";
+export class PdsProgress {
+    constructor() {
+        this.animated = false;
+        this.componentId = undefined;
+        this.fillColor = undefined;
+        this.label = undefined;
+        this.percent = 0;
+        this.showPercent = false;
+    }
+    render() {
+        return (h(Host, { class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { class: "pds-progress" }, h("label", { class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
+    }
+    static get is() { return "pds-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not progress is animated."
+                },
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "fillColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'var(--pds-color-primary)'"
+                        }],
+                    "text": "Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."
+                },
+                "attribute": "fill-color",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for label text. Label is visually hidden but required for better accessibility."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "percent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "0"
+                        }],
+                    "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
+                },
+                "attribute": "percent",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "showPercent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the percent value should be displayed as text."
+                },
+                "attribute": "show-percent",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-progress.js.map

package/dist/collection/components/pds-progress/pds-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-progress.js","sourceRoot":"","sources":["../../../../src/components/pds-progress/pds-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YAChE,WAAK,KAAK,EAAC,cAAc;gBACvB,aAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL;gBACR,gBACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP;YACL,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,0BAA0B;gBAAE,IAAI,CAAC,OAAO;oBAAQ,CAC3E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = false;\n\n  /**\n  * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n  */\n  @Prop() componentId!: string;\n\n  /**\n  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pds-color-primary)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--progress-fill-color': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-progress/stories/pds-progress.stories.js

@@ -0,0 +1,65 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-progress'),
+  component: 'pds-progress',
+  title: 'components/Progress'
+}
+
+const BaseTemplate = (args) =>
+  html`<pds-progress
+    animated=${args.animated}
+    component-id=${args.componentId}
+    fill-color=${args.fillColor}
+    label=${args.label}
+    percent=${args.percent}
+    show-percent=${args.showPercent}
+  ></pds-progress>`;
+
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  animated: false,
+  componentId: 'default',
+  label: 'Default label',
+  percent: 0,
+  showPercent: false,
+};
+
+export const Percent = BaseTemplate.bind();
+Percent.args = {
+  animated: false,
+  componentId: 'percentage',
+  label: 'Percentage label',
+  percent: 50,
+  showPercent: false,
+};
+
+export const showPercent = BaseTemplate.bind();
+showPercent.args = {
+  animated: false,
+  componentId: 'show-percentage',
+  label: 'Show percentage label',
+  percent: 50,
+  showPercent: true,
+};
+
+export const Animated = BaseTemplate.bind();
+Animated.args = {
+  animated: true,
+  componentId: 'animated',
+  label: 'Animated label',
+  percent: 75,
+  showPercent: false,
+};
+
+export const fillColor = BaseTemplate.bind();
+fillColor.args = {
+  animated: false,
+  componentId: 'fillcolor',
+  label: 'Color label',
+  percent: 95,
+  showPercent: false,
+  fillColor: '#86D5BC',
+};

package/dist/collection/components/pds-radio/pds-radio.css

@@ -0,0 +1,101 @@
+:host {
+  --background-color: var(--pine-color-base-white);
+  --background-color-hover: var(--pine-color-neutral-grey-100);
+  --background-color-disabled: var(--pine-color-neutral-grey-200);
+  --border: var(--pine-border-interactive);
+  --border-color-hover: var(--pine-border-interactive-hover-color);
+  --border-color-disabled: var(--pine-color-neutral-grey-300);
+  --border-radius: 50%;
+  --color: var(--pine-color-neutral-charcoal-200);
+  --color-checked: var(--pine-color-neutral-charcoal-500);
+  --color-disabled: var(--pine-color-neutral-grey-500);
+  --color-focus: var(--pine-color-primary-200);
+  --color-invalid: var(--pine-color-red-300);
+  --color-invalid-focus: var(--pine-color-red-200);
+  --font-size: var(--pine-font-size-body-sm);
+  --input-size: 16px;
+  --check-size: 6px;
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+:host(.is-invalid) input {
+  border-color: var(--color-invalid);
+}
+:host(.is-invalid) input:checked {
+  background: var(--color-invalid);
+}
+:host(.is-invalid) input:focus-visible {
+  box-shadow: 0 0 0 4px var(--color-invalid-focus);
+  outline: none;
+}
+:host(.is-invalid) label,
+:host(.is-invalid) .pds-radio__message--error {
+  color: var(--color-invalid);
+}
+
+input {
+  appearance: none;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  height: var(--input-size);
+  margin: 0;
+  position: relative;
+  width: var(--input-size);
+}
+input:hover {
+  background: var(--background-color-hover);
+  border-color: var(--border-color-hover);
+}
+input:checked {
+  background: var(--color-checked);
+  border-color: var(--color-checked);
+}
+input:checked::after {
+  background: var(--background-color);
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: var(--check-size);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--check-size);
+}
+input:disabled {
+  background: var(--background-color-disabled);
+  border-color: var(--border-color-disabled);
+  cursor: not-allowed;
+}
+input:disabled:checked {
+  background: var(--color-disabled);
+  border-color: var(--border-color-disabled);
+}
+input:disabled:checked::after {
+  border-color: var(--border-color-disabled);
+}
+input:disabled + label {
+  color: var(--border-color-hover);
+  cursor: not-allowed;
+}
+input:disabled ~ .pds-radio__message {
+  color: var(--color-disabled);
+}
+input:focus-visible {
+  box-shadow: 0 0 0 4px var(--color-focus);
+  outline: none;
+}
+
+label {
+  margin-inline-start: 10px;
+}
+
+.pds-radio__message {
+  color: var(--color);
+  font-size: var(--font-size);
+  margin-block-start: var(--check-size);
+  margin-inline-start: 26px;
+  width: 100%;
+}