@chiralkit/design-system 0.1.0-alpha.0

package/dist/collection/components/ds-input/ds-input.js

@@ -0,0 +1,353 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** form-field
+ * **APG pattern:** N/A — native element. This wraps a native `<input>`;
+ * there is no WAI-ARIA APG pattern for a plain text input because the
+ * browser already implements it natively. Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ *
+ * **Keyboard interactions:**
+ * - Tab: moves focus to the native `<input>` (shadow DOM does not
+ *   interrupt tab order).
+ * - Printable characters: insert at the caret position (native).
+ * - Backspace / Delete: native editing.
+ * - Arrow keys: move the caret within the value (native); for
+ *   `type="number"` Up/Down step the numeric value (native).
+ * - Enter: on `type="search"` may submit the enclosing form (native);
+ *   no custom handling.
+ * - Escape: no native meaning for a text input.
+ *
+ * **ARIA:**
+ * - Roles used: none explicit — the native `<input>` supplies its
+ *   implicit role (`textbox`, `searchbox`, etc. depending on `type`).
+ * - State attributes: `disabled` (native attribute, not `aria-disabled`),
+ *   `aria-invalid` (from the `invalid` prop), `aria-required` (from the
+ *   `required` prop), `aria-describedby` (from the `describedBy` prop,
+ *   expected to reference a light-DOM node id — typically a hint or
+ *   error message rendered by the consumer alongside the field).
+ * - Labeling strategy: `aria-label` set from the `label` prop onto the
+ *   internal `<input>`. This is the **canonical, recommended** mode —
+ *   explicit and independent of DOM structure. Consumers MUST pass
+ *   `label` (or otherwise give the field an accessible name) — an
+ *   `<input>` with no accessible name is a WCAG failure (axe rule
+ *   `label`). Wrapping the host in a light-DOM `<label>` (e.g.
+ *   `<label>Email <ds-input></ds-input></label>`) also produces an
+ *   accessible name in Chromium via flattened-tree resolution — the
+ *   same secondary mode documented on `ds-select`, verified in this
+ *   component's e2e tests. Setting `aria-label` directly on the
+ *   `<ds-input>` host does NOT work: shadow-DOM attribute forwarding
+ *   would be required — use the `label` prop instead.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On value change: focus remains on the native `<input>`.
+ * - Focus indicator: the browser default `:focus-visible` ring is kept
+ *   on purpose — a themed focus ring using `--ds-color-focus` is a
+ *   future decision once the DS ships a shared focus utility. Not
+ *   overridden by `ds-input.css`.
+ *
+ * **Motion:**
+ * - Animations: none.
+ * - Reduced-motion behavior: N/A — no animation to collapse.
+ *
+ * **Contrast:**
+ * - Text: inherits `color: inherit` / `currentColor`; ratio depends on
+ *   the consumer's theme, not verified in isolation here.
+ * - Border: `color-mix(in oklch, currentColor 22%, transparent)`,
+ *   matching `ds-select` — inherits whatever contrast the host page
+ *   sets. WCAG 1.4.11 (3:1 non-text) is the consumer's responsibility
+ *   in themes that override the surface.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: announces the `label` prop text as the accessible
+ *   name, followed by the browser/AT's role announcement for the
+ *   input type ("edit text", "search text", "password", "phone
+ *   number", "email"…). When `required=true` the announcement
+ *   includes "required"; when `invalid=true` it includes "invalid".
+ * - State change: on value edit, AT typically echoes the typed
+ *   character (native input behavior); no `aria-live` added, per the
+ *   spec's guidance against live-region overuse.
+ *
+ * **Consumer contract:**
+ * - `placeholder` is a hint, not a label. It disappears on focus in
+ *   most browsers and is not reliably announced by every AT — always
+ *   pair with `label`.
+ * - For `type="password"` in a real form, pair with a light-DOM
+ *   `<input type="hidden">` or a form-associated ancestor that gives
+ *   the browser's password manager an `autocomplete` hint. This
+ *   component intentionally does not expose `autocomplete` in v1;
+ *   consumers that need it can render a native `<input>` for that
+ *   field until the prop is added.
+ * - When `invalid=true`, pair with a `describedBy` id that points at
+ *   a visible error message; `aria-invalid` alone gives the AT the
+ *   status but not the reason.
+ */
+export class DsInput {
+    inputEl;
+    value;
+    name;
+    type = "text";
+    placeholder;
+    disabled = false;
+    required = false;
+    invalid = false;
+    describedBy;
+    label;
+    size = "md";
+    dsInput;
+    watchValue(newValue) {
+        if (this.inputEl && this.inputEl.value !== (newValue ?? "")) {
+            this.inputEl.value = newValue ?? "";
+        }
+    }
+    componentDidLoad() {
+        if (this.inputEl && this.value !== undefined) {
+            this.inputEl.value = this.value;
+        }
+    }
+    onInput = (event) => {
+        const value = event.target.value;
+        this.dsInput.emit(value);
+    };
+    render() {
+        const cls = `ds-input ds-input--${this.size}`;
+        return (h(Host, { key: 'efce39c6ecfb8dda71577e7fb7b285ddc16287f5' }, h("input", { key: '5f6ad573f20e6eca20f42aa96c8acdf386508d1c', class: cls, type: this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label, "aria-required": this.required ? "true" : undefined, "aria-invalid": this.invalid ? "true" : undefined, "aria-describedby": this.describedBy, ref: (el) => (this.inputEl = el), onInput: this.onInput })));
+    }
+    static get is() { return "ds-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| \"text\"\n    | \"email\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"url\"\n    | \"number\"",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"text\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "describedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "described-by"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"md\" | \"lg\"",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"md\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsInput",
+                "name": "dsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }];
+    }
+}

package/dist/collection/components/ds-loader/ds-loader.css

@@ -0,0 +1,94 @@
+:host {
+  display: inline-flex;
+  color: currentColor;
+  line-height: 0;
+}
+
+.ds-loader {
+  display: block;
+  width: 40px;
+  height: 40px;
+  color: inherit;
+}
+
+.ds-loader--sm {
+  width: 16px;
+  height: 16px;
+}
+
+.ds-loader--md {
+  width: 40px;
+  height: 40px;
+}
+
+.ds-loader--lg {
+  width: 120px;
+  height: 120px;
+}
+
+.ds-loader__half {
+  transform-box: view-box;
+  transform-origin: 50% 50%;
+  animation: ds-loader-swing 1.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
+}
+
+.ds-loader__half--b {
+  animation-name: ds-loader-swing-mirror;
+}
+
+.ds-loader__mirror {
+  transform-box: view-box;
+  transform-origin: 50% 50%;
+  transform: scaleX(-1);
+}
+
+.ds-loader--speed-slow .ds-loader__half {
+  animation-duration: 2.2s;
+}
+
+.ds-loader--speed-fast .ds-loader__half {
+  animation-duration: 0.9s;
+}
+
+@keyframes ds-loader-swing {
+  0% {
+    transform: rotate(180deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes ds-loader-swing-mirror {
+  0% {
+    transform: rotate(-180deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-loader__half,
+  .ds-loader__half--b {
+    animation: ds-loader-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes ds-loader-pulse {
+    0%,
+    100% {
+      opacity: 0.4;
+      transform: rotate(0deg);
+    }
+    50% {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+  }
+}

package/dist/collection/components/ds-loader/ds-loader.js

@@ -0,0 +1,149 @@
+import { h, Host } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** static-display (indeterminate progress indicator)
+ * **APG pattern:** N/A — the loader is a passive presence indicator, not a
+ * `progressbar` (no measurable value). Uses `role="status"` per WAI-ARIA
+ * live-region semantics for indeterminate loading states.
+ *
+ * **Keyboard interactions:**
+ * - Tab: N/A — not focusable.
+ * - Enter: N/A.
+ * - Escape: N/A.
+ * - Arrow keys: N/A.
+ * - Printable characters: N/A.
+ *
+ * **ARIA:**
+ * - Roles used: `role="status"` on the host — an implicit polite live
+ *   region ARIA lists as valid for "advisory information" including
+ *   in-progress operations. The inner `<svg>` is decorative and carries
+ *   `aria-hidden="true"` + `focusable="false"` so it never becomes a
+ *   parallel target for screen readers.
+ * - State attributes: none. The loader has no state changes to announce
+ *   beyond its own presence; the polite live region on mount is the
+ *   announcement.
+ * - Labeling strategy: `aria-label` from the `label` prop (default
+ *   "Loading"). Consumers pass a more specific string when the context
+ *   warrants ("Loading ceremonies", "Signing in", …).
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On activate/open: N/A — not interactive.
+ * - On close/deactivate: N/A.
+ * - Focus indicator: N/A — the host is not focusable.
+ *
+ * **Motion:**
+ * - Animations: two mirrored halves of the logo path oscillate
+ *   symmetrically around the visual center, meeting at the ring midpoint
+ *   and separating again. Cycle 1.4s by default (`speed="normal"`);
+ *   `speed="slow"` = 2.2s, `speed="fast"` = 0.9s.
+ * - Reduced-motion behavior: `@media (prefers-reduced-motion: reduce)`
+ *   collapses both halves to a static rendering with a slow opacity
+ *   pulse (2s ease-in-out). No rotation, no lateral movement.
+ *
+ * **Contrast:**
+ * - Text: N/A — the visible surface is the SVG stroke, not text.
+ * - Non-text: stroke inherits `currentColor` from the host. Consumers are
+ *   responsible for confirming the stroke against its background meets
+ *   the ≥ 3:1 non-text contrast threshold (WCAG 1.4.11) where the loader
+ *   conveys state (e.g. distinguishing "still loading" from "idle").
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: the polite live region announces the label
+ *   (e.g. "Loading") when the loader mounts.
+ * - State change: N/A — the loader itself has no state that changes.
+ *   Consumers unmount the loader when the awaited work completes; that
+ *   removal is silent, which is the intended behavior (the arriving
+ *   content is the announcement).
+ */
+export class DsLoader {
+    size = "md";
+    label = "Loading";
+    speed = "normal";
+    render() {
+        const cls = [
+            "ds-loader",
+            `ds-loader--${this.size}`,
+            `ds-loader--speed-${this.speed}`,
+        ].join(" ");
+        return (h(Host, { key: 'd7017e7e3c970e27bffa30c193abd937c5ec13cd', role: "status", "aria-label": this.label }, h("svg", { key: '9eb10695249bc4c833b6347d38226fdc37d4be7d', class: cls, viewBox: "-48 -48 96 96", "aria-hidden": "true", focusable: "false" }, h("g", { key: '711ee60648593d216687087c5b2145ec25120bc5', class: "ds-loader__half ds-loader__half--a" }, h("path", { key: '9efdc31104b6037a57d7bdc802303938f7285666', d: LOGO_PATH_D, fill: "none", stroke: "currentColor", "stroke-width": "14", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("g", { key: 'fcbeefc154e0e9db5b0378f77dafa3f9c0162e92', class: "ds-loader__half ds-loader__half--b" }, h("g", { key: '790b3ec1c4b262352cc383ab6b9f7d5cbb77474b', class: "ds-loader__mirror" }, h("path", { key: '694713be37532568852b2de2530cc50c1ff3b8de', d: LOGO_PATH_D, fill: "none", stroke: "currentColor", "stroke-width": "14", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+    }
+    static get is() { return "ds-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-loader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"sm\" | \"md\" | \"lg\"",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"md\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "\"Loading\""
+            },
+            "speed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"slow\" | \"normal\" | \"fast\"",
+                    "resolved": "\"fast\" | \"normal\" | \"slow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "speed",
+                "defaultValue": "\"normal\""
+            }
+        };
+    }
+}
+const LOGO_PATH_D = "M14.09 -27.22 L13.04 -28.53 L11.94 -29.76 L10.78 -30.92 L9.57 -32.01 L8.30 -33.02 L7.00 -33.95 L5.65 -34.80 L4.27 -35.57 L2.85 -36.25 L1.40 -36.84 L-0.07 -37.35 L-1.56 -37.76 L-3.07 -38.08 L-4.59 -38.31 L-6.13 -38.45 L-7.66 -38.50 L-9.20 -38.45 L-10.73 -38.31 L-12.25 -38.08 L-13.76 -37.76 L-15.25 -37.35 L-16.73 -36.84 L-18.17 -36.25 L-19.59 -35.57 L-20.97 -34.80 L-22.32 -33.95 L-23.63 -33.02 L-24.89 -32.01 L-26.10 -30.92 L-27.26 -29.76 L-28.37 -28.53 L-29.41 -27.22 L-30.40 -25.86 L-31.32 -24.42 L-32.17 -22.93 L-32.95 -21.39 L-33.66 -19.79 L-34.30 -18.15 L-34.86 -16.46 L-35.34 -14.73 L-35.74 -12.97 L-36.06 -11.18 L-36.29 -9.35 L-36.44 -7.51 L-36.50 -5.65 L-36.48 -3.77 L-36.37 -1.89 L-36.18 0 L-35.90 1.89 L-35.53 3.77 L-35.07 5.65 L-34.53 7.51 L-33.90 9.35 L-33.18 11.18 L-32.39 12.97 L-31.51 14.73 L-30.55 16.46 L-29.51 18.15 L-28.40 19.79 L-27.21 21.39 L-25.95 22.93 L-24.61 24.42 L-23.22 25.86 L-21.75 27.22 L-20.23 28.53 L-18.64 29.76 L-17.00 30.92 L-15.31 32.01 L-13.57 33.02 L-11.79 33.95 L-9.96 34.80 L-8.10 35.57 L-6.20 36.25 L-4.28 36.84 L-2.33 37.35 L-0.35 37.76 L1.63 38.08 L3.64 38.31 L5.65 38.45 L7.66 38.50 L9.68 38.45 L11.69 38.31 L13.69 38.08 L15.68 37.76 L17.65 37.35 L19.60 36.84 L21.53 36.25 L23.42 35.57 L25.28 34.80 L27.11 33.95 L28.89 33.02 L30.63 32.01 L32.32 30.92 L33.96 29.76 L35.55 28.53 L37.07 27.22";

package/dist/collection/components/ds-select/ds-select.css

@@ -0,0 +1,69 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.ds-select {
+  font-family: var(--ds-font-family);
+  font-size: var(--ds-font-size-md);
+  background-color: transparent;
+  color: inherit;
+  border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/*
+ * The caret is drawn on a ::after pseudo-element of :host rather than as a
+ * background-image/mask-image on .ds-select itself. mask-image masks the
+ * ENTIRE painted box of the element it's applied to (text, border, and all)
+ * -- it is not layered behind content the way background-image is. Applying
+ * it directly to the <select> would clip away the option text and border,
+ * leaving only the tiny caret shape visible. Confirmed empirically before
+ * writing this. Using a dedicated pseudo-element keeps the mask contained to
+ * just the caret glyph while background-color: currentColor makes it track
+ * the host's inherited color (fixing the original bug where the SVG's own
+ * currentColor resolved to black inside the isolated background-image
+ * context).
+ */
+:host::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: var(--ds-spacing-sm);
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  pointer-events: none;
+}
+
+.ds-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host(:has(.ds-select:disabled))::after {
+  opacity: 0.5;
+}
+
+.ds-select--md {
+  border-radius: var(--ds-radius-sm);
+  padding: var(--ds-spacing-sm) var(--ds-spacing-lg);
+  padding-right: calc(var(--ds-spacing-lg) + var(--ds-spacing-lg));
+}
+
+.ds-select--lg {
+  border-radius: var(--ds-radius-md);
+  padding: var(--ds-spacing-md) var(--ds-spacing-xl);
+  padding-right: calc(var(--ds-spacing-xl) + var(--ds-spacing-lg));
+}