@pathscale/ui 0.1.1 → 1.2.1

package/README.md

@@ -3,68 +3,57 @@
 Highly opinionated SolidJS component library — batteries and kitchen sink
 included, but optimized and shiny.
 
-## Building
+## Install
 
-To build this package, use the following command
+```sh
+bun add @pathscale/ui
+```
+
+## Usage
+
+```tsx
+import { Button, Flex } from "@pathscale/ui";
+
+export const Example = () => (
+  <Flex direction="col" gap="sm">
+    <Button color="primary">Primary</Button>
+  </Flex>
+);
+```
+
+## CSS
+
+Import the compatibility stylesheet to use `@pathscale/ui` components without
+relying on app-level DaisyUI plugin styles:
+
+```ts
+import "@pathscale/ui/dist/styles/compat/daisy-primitives.css";
+import "@pathscale/ui/dist/styles/icons/generated-icons.css";
+```
+
+## Motion
+
+Shared animation primitives live in `@pathscale/ui/motion`. For setup,
+Popmotion driver enablement, and migration notes, see `docs/motion.md`.
+
+## Development
 
 ```sh
 bun run build
 ```
 
-# Components Checklist
-
-## Actions
-
-- [x] Button
-- [x] Dropdown
-- [x] Modal
-- [x] Swap
-
-## Data Display
-
-- [x] Accordion
-- [x] Avatar
-- [x] Badge
-- [x] Card
-- [ ] Carousel
-- [x] Chat Bubble
-- [x] Collapse
-- [x] Countdown
-- [x] Diff
-- [x] Kbd
-- [x] Stats
-- [x] Table
-- [x] Timeline
-
-## Navigation
-
-- [x] Dock
-- [x] Breadcrumbs
-- [x] Link
-- [x] Menu
-- [x] Navbar
-- [x] Pagination
-- [x] Steps
-- [ ] Tabs
-
-## Feedback
-
-- [x] Alert
-- [x] Loading
-- [x] Progress
-- [x] Radial Progress
-- [x] Skeleton
-- [x] Tooltip
-- [x] Toast
-
-## Data Input
-
-- [x] Checkbox
-- [x] File Input
-- [x] Input
-- [x] Radio
-- [x] Range
-- [x] Rating
-- [x] Select
-- [x] Textarea
-- [x] Toggle
+Other useful scripts:
+
+- `bun run dev`
+- `bun run lint`
+- `bun run format`
+
+## Playground Hot Test
+
+Run the playground from the repository root and hot-test local library changes without rebuilding:
+
+```sh
+bun run playground:dev
+```
+
+The playground resolves `@pathscale/ui` to local `src` via Vite aliases, so edits in `/src` and `/src/styles` refresh immediately.

package/dist/components/accordion/Accordion.d.ts

@@ -1,3 +1,4 @@
+import "./collapse.css";
 import { type JSX } from "solid-js";
 import { CollapseContent, CollapseTitle } from "../collapse";
 import type { IComponentBaseProps } from "../types";

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,180 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./collapse.css";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__collapse_index_js_5afd01f8__ from "../collapse/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=region>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
+const accordionGroups = new Map();
+const TITLE_PART = "title";
+const CONTENT_PART = "content";
+const Accordion = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "name",
+        "icon",
+        "checked",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "mode",
+        "expanded",
+        "onToggle",
+        "children",
+        "aria-label",
+        "aria-describedby",
+        "aria-labelledby"
+    ]);
+    const uniqueId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const contentId = `accordion-content-${uniqueId}`;
+    const titleId = `accordion-title-${uniqueId}`;
+    const isControlled = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>"controlled" === local.mode);
+    const [isExpanded, setIsExpanded] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.checked || local.expanded || false);
+    const expanded = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (isControlled()) return local.expanded ?? false;
+        return isExpanded();
+    });
+    const groupName = ()=>local.name ?? "accordion";
+    const isRadioMode = ()=>"checkbox" !== local.mode && "controlled" !== local.mode;
+    const closeAccordion = ()=>{
+        if (!isControlled()) setIsExpanded(false);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (isRadioMode()) {
+            const name = groupName();
+            if (!accordionGroups.has(name)) accordionGroups.set(name, new Set());
+            const group = accordionGroups.get(name);
+            group.add(closeAccordion);
+            return ()=>{
+                group.delete(closeAccordion);
+                if (0 === group.size) accordionGroups.delete(name);
+            };
+        }
+    });
+    const handleToggle = ()=>{
+        const wasExpanded = expanded();
+        if (!isControlled()) {
+            if (isRadioMode() && !wasExpanded) {
+                const group = accordionGroups.get(groupName());
+                if (group) group.forEach((closeFunc)=>{
+                    if (closeFunc !== closeAccordion) closeFunc();
+                });
+                setIsExpanded(true);
+            } else if ("checkbox" === local.mode) setIsExpanded(!wasExpanded);
+            else if (isRadioMode() && wasExpanded) setIsExpanded(false);
+        }
+        local.onToggle?.();
+    };
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("collapse", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "collapse-arrow": "arrow" === local.icon,
+            "collapse-plus": "plus" === local.icon,
+            "collapse-open": expanded(),
+            "collapse-close": !expanded()
+        }), local.class, local.className);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const childrenWithAria = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const children = resolvedChildren();
+        const arr = Array.isArray(children) ? children : [
+            children
+        ];
+        const getChildProps = (child)=>{
+            if (null == child || "object" != typeof child || !("props" in child)) return null;
+            const candidate = child.props;
+            return candidate && "object" == typeof candidate ? candidate : null;
+        };
+        return arr.map((child)=>{
+            const childProps = getChildProps(child);
+            if (!childProps) return child;
+            const childElement = child;
+            const collapsePart = childProps["data-collapse-part"] === TITLE_PART || childProps["data-collapse-part"] === CONTENT_PART ? childProps["data-collapse-part"] : null;
+            if (collapsePart === TITLE_PART) {
+                const originalOnClick = childProps.onClick && "function" == typeof childProps.onClick ? childProps.onClick : void 0;
+                const originalOnKeyDown = childProps.onKeyDown && "function" == typeof childProps.onKeyDown ? childProps.onKeyDown : void 0;
+                return {
+                    ...childElement,
+                    props: {
+                        ...childProps,
+                        id: titleId,
+                        role: "button",
+                        tabIndex: 0,
+                        "aria-expanded": expanded(),
+                        "aria-controls": contentId,
+                        onClick: (e)=>{
+                            handleToggle();
+                            if (originalOnClick) originalOnClick(e);
+                        },
+                        onKeyDown: (e)=>{
+                            if ("Enter" === e.key || " " === e.key) {
+                                e.preventDefault();
+                                handleToggle();
+                            }
+                            if (originalOnKeyDown) originalOnKeyDown(e);
+                        }
+                    }
+                };
+            }
+            if (collapsePart === CONTENT_PART) return {
+                ...childElement,
+                props: {
+                    ...childProps,
+                    id: contentId
+                }
+            };
+            return child;
+        });
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"controlled" !== local.mode);
+            return ()=>_c$() && (()=>{
+                    var _el$2 = _tmpl$2();
+                    _el$2.addEventListener("change", handleToggle);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-controls", contentId);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                        get type () {
+                            return "checkbox" === local.mode ? "checkbox" : "radio";
+                        },
+                        get name () {
+                            return groupName();
+                        },
+                        get checked () {
+                            return expanded();
+                        },
+                        get ["aria-expanded"] () {
+                            return expanded();
+                        },
+                        get ["aria-checked"] () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!("checkbox" === local.mode || "radio" === local.mode))() ? expanded() : void 0;
+                        }
+                    }, others), false, false);
+                    return _el$2;
+                })();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>childrenWithAria(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = local.dataTheme, _v$3 = local.style, _v$4 = local["aria-label"], _v$5 = local["aria-describedby"], _v$6 = local["aria-labelledby"] || titleId;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
+            _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$3, _p$.a);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-label", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-describedby", _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-labelledby", _p$.n = _v$6);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0
+        });
+        return _el$;
+    })();
+};
+const AccordionTitle = __WEBPACK_EXTERNAL_MODULE__collapse_index_js_5afd01f8__.CollapseTitle;
+const AccordionContent = __WEBPACK_EXTERNAL_MODULE__collapse_index_js_5afd01f8__.CollapseContent;
+Accordion.Title = AccordionTitle;
+Accordion.Content = AccordionContent;
+const accordion_Accordion = Accordion;
+export { accordion_Accordion as default };

package/dist/components/accordion/collapse.css

@@ -0,0 +1,248 @@
+@layer components {
+  .collapse-arrow > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      top: 50%;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-arrow > .collapse-title:after {
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+    }
+    }
+
+  .collapse-plus > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      --tw-content: "+";
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-plus > .collapse-title:after {
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    }
+
+  .collapse {
+      display: grid;
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius-box, 1rem);
+      width: 100%;
+      grid-template-rows: max-content 0fr;
+      grid-template-columns: minmax(0, 1fr);
+      isolation: isolate;
+    }
+
+  .collapse:not(td, tr, colgroup) {
+      visibility: revert-layer;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse {
+      transition: grid-template-rows 0.2s;
+    }
+    }
+
+  .collapse > input:is([type="checkbox"], [type="radio"]) {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ),
+    .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      content-visibility: visible;
+      min-height: fit-content;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      visibility: visible;
+    }
+    }
+
+  .collapse:focus-visible,
+    .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible),
+    .collapse:has(summary:focus-visible) {
+      outline-color: var(--color-base-content);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+
+  .collapse:not(.collapse-close) > input[type="checkbox"],
+    .collapse:not(.collapse-close) > input[type="radio"]:not(:checked),
+    .collapse:not(.collapse-close) > .collapse-title {
+      cursor: pointer;
+    }
+
+  .collapse[tabindex]:focus:not(.collapse-close, .collapse[open]) > .collapse-title,
+    .collapse[tabindex]:focus-within:not(.collapse-close, .collapse[open]) > .collapse-title {
+      cursor: unset;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content),
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is([open]).collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse.collapse-open.collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  .collapse.collapse-open.collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
+    .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse.collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse[open].collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse:is(details) {
+      width: 100%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is(details)::details-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s;
+      height: 0;
+      interpolate-size: allow-keywords;
+    }
+    .collapse:is(details):where([open])::details-content {
+      height: auto;
+    }
+    }
+
+  .collapse:is(details) summary {
+      position: relative;
+      display: block;
+    }
+
+  .collapse:is(details) summary::-webkit-details-marker {
+      display: none;
+    }
+
+  .collapse:is(details) > .collapse-content {
+      content-visibility: visible;
+    }
+
+  .collapse:is(details) summary {
+      outline: none;
+    }
+
+  .collapse-content {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      content-visibility: hidden;
+      grid-column-start: 1;
+      grid-row-start: 2;
+      min-height: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      cursor: unset;
+    }
+
+  @supports not (content-visibility: hidden) {
+    .collapse-content {
+      visibility: hidden;
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out;
+    }
+    }
+
+  .collapse-open {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse-open > .collapse-content {
+      content-visibility: visible;
+      min-height: fit-content;
+      padding-bottom: 1rem;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse-open > .collapse-content {
+      visibility: visible;
+    }
+    }
+
+  .collapse {
+      visibility: collapse;
+    }
+
+  .collapse-title {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      position: relative;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+}

package/dist/components/accordion/index.d.ts

@@ -1 +1 @@
-export { default } from "./Accordion";
+export { default, type AccordionProps } from "./Accordion";

package/dist/components/accordion/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__ from "./Accordion.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Accordion_js_b8a015c9__["default"];
+export { __webpack_exports__default as default };

package/dist/components/alert/Alert.css

@@ -0,0 +1,116 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .alert {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 1rem;
+    border-radius: var(--radius-box, 1.5rem);
+    padding: 0.75rem 1rem;
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow:
+      0 1px 2px oklch(0% 0 0 / 0.05),
+      0 1px 3px oklch(0% 0 0 / 0.1);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Indicator
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    flex-shrink: 0;
+    user-select: none;
+  }
+
+  .alert__indicator [data-slot="alert-default-icon"] {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__content {
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Title
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Description
+   * -----------------------------------------------------------------------------------------------*/
+  .alert__description {
+    font-size: 0.875rem;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Status variants
+   * -----------------------------------------------------------------------------------------------*/
+
+  /* Default */
+  .alert--default .alert__indicator {
+    color: var(--color-base-content);
+  }
+
+  .alert--default .alert__title {
+    color: var(--color-base-content);
+  }
+
+  /* Accent */
+  .alert--accent .alert__indicator {
+    color: var(--color-accent);
+  }
+
+  .alert--accent .alert__title {
+    color: var(--color-accent);
+  }
+
+  /* Success */
+  .alert--success .alert__indicator {
+    color: var(--color-success);
+  }
+
+  .alert--success .alert__title {
+    color: var(--color-success);
+  }
+
+  /* Warning */
+  .alert--warning .alert__indicator {
+    color: var(--color-warning);
+  }
+
+  .alert--warning .alert__title {
+    color: var(--color-warning);
+  }
+
+  /* Danger */
+  .alert--danger .alert__indicator {
+    color: var(--color-error);
+  }
+
+  .alert--danger .alert__title {
+    color: var(--color-error);
+  }
+}