@studiolxd/brand 49.24.1 → 49.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +49 -0
- package/dist/_shared/tokens.js +19 -0
- package/dist/_types/atoms/Button/Button.d.ts +14 -0
- package/dist/_types/molecules/LoadingRegion/LoadingRegion.d.ts +53 -0
- package/dist/_types/molecules/LoadingState/LoadingState.d.ts +39 -0
- package/dist/brand.css +33 -1
- package/dist/button.css +1 -1
- package/dist/button.js +57 -45
- package/dist/loading-region.css +1 -0
- package/dist/loading-region.js +61 -0
- package/dist/loading-state.css +1 -0
- package/dist/loading-state.js +46 -0
- package/dist/toaster.css +1 -1
- package/dist/tokens.css +37 -1
- package/package.json +11 -1
- package/src/tokens/components/button.css +2 -0
- package/src/tokens/index.css +2 -0
- package/src/tokens/molecules/loading-region.css +16 -0
- package/src/tokens/molecules/loading-region.ts +4 -0
- package/src/tokens/molecules/loading-state.css +13 -0
- package/src/tokens/molecules/loading-state.ts +4 -0
- package/src/tokens/scss/_index.legacy.scss +2 -0
- package/src/tokens/scss/_index.scss +2 -0
- package/src/tokens/scss/components/_button.scss +2 -0
- package/src/tokens/scss/molecules/_loading-region.scss +13 -0
- package/src/tokens/scss/molecules/_loading-state.scss +10 -0
- package/src/tokens/surface-dark-derived.css +1 -0
- package/src/tokens/surface-invert.css +1 -0
- package/src/tokens/surface-light.css +1 -0
- package/src/tokens/tokens.json +19 -0
package/dist/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{align-items:center;display:inline-flex}.button:not(.button--text){block-size:var(--button-height);padding-block:0}.button--primary{justify-content:var(--button-primary-justify-content);padding-inline:var(--button-primary-padding-inline);border-radius:var(--button-primary-border-radius);border-width:var(--button-primary-border-width);border-style:var(--button-primary-border-style);border-color:var(--button-primary-border);font-family:var(--button-primary-font-family);font-size:var(--button-primary-font-size);font-weight:var(--button-primary-font-weight);line-height:var(--button-primary-line-height);cursor:var(--button-primary-cursor);white-space:var(--button-primary-white-space);-webkit-text-decoration:var(--button-primary-text-decoration);text-decoration:var(--button-primary-text-decoration);background-color:var(--button-primary-bg);color:var(--button-primary-color);transition:background-color var(--button-primary-transition-duration) var(--button-primary-transition-easing), color var(--button-primary-transition-duration) var(--button-primary-transition-easing), border-color var(--button-primary-transition-duration) var(--button-primary-transition-easing)}.button--primary:hover{background-color:var(--button-primary-hover-bg);color:var(--button-primary-hover-color);border-color:var(--button-primary-hover-border)}.button--primary:active{background-color:var(--button-primary-active-bg);color:var(--button-primary-active-color);border-color:var(--button-primary-active-border)}.button--primary:focus-visible{outline:var(--button-primary-focus-ring-width) var(--button-primary-focus-ring-style) var(--button-primary-focus-ring-color);outline-offset:var(--button-primary-focus-ring-offset)}.button--primary:disabled,.button--primary[aria-disabled=true]{background-color:var(--button-primary-disabled-bg);color:var(--button-primary-disabled-color);border-color:var(--button-primary-disabled-border);cursor:var(--button-primary-disabled-cursor);pointer-events:none}.button--outline{justify-content:var(--button-outline-justify-content);padding-inline:var(--button-outline-padding-inline);border-radius:var(--button-outline-border-radius);border-width:var(--button-outline-border-width);border-style:var(--button-outline-border-style);border-color:var(--button-outline-border);font-family:var(--button-outline-font-family);font-size:var(--button-outline-font-size);font-weight:var(--button-outline-font-weight);line-height:var(--button-outline-line-height);cursor:var(--button-outline-cursor);white-space:var(--button-outline-white-space);-webkit-text-decoration:var(--button-outline-text-decoration);text-decoration:var(--button-outline-text-decoration);background-color:var(--button-outline-bg);color:var(--button-outline-color);transition:background-color var(--button-outline-transition-duration) var(--button-outline-transition-easing), color var(--button-outline-transition-duration) var(--button-outline-transition-easing), border-color var(--button-outline-transition-duration) var(--button-outline-transition-easing)}.button--outline:hover{background-color:var(--button-outline-hover-bg);color:var(--button-outline-hover-color);border-color:var(--button-outline-hover-border)}.button--outline:active{background-color:var(--button-outline-active-bg);color:var(--button-outline-active-color);border-color:var(--button-outline-active-border)}.button--outline:focus-visible{outline:var(--button-outline-focus-ring-width) var(--button-outline-focus-ring-style) var(--button-outline-focus-ring-color);outline-offset:var(--button-outline-focus-ring-offset)}.button--outline:disabled,.button--outline[aria-disabled=true]{color:var(--button-outline-disabled-color);border-color:var(--button-outline-disabled-border);cursor:var(--button-outline-disabled-cursor);pointer-events:none}.button--text{justify-content:var(--button-text-justify-content);padding-inline:var(--button-text-padding-inline);border-radius:var(--button-text-border-radius);border-width:var(--button-text-border-width);border-style:var(--button-text-border-style);border-color:var(--button-text-border);font-family:var(--button-text-font-family);font-size:var(--button-text-font-size);font-weight:var(--button-text-font-weight);line-height:var(--button-text-line-height);cursor:var(--button-text-cursor);white-space:var(--button-text-white-space);box-shadow:inset 0 calc(-1 * var(--button-text-underline-width)) 0 0 currentColor;background-color:var(--button-text-bg);color:var(--button-text-color);transition:color var(--button-text-transition-duration) var(--button-text-transition-easing);padding-block-end:var(--button-text-underline-offset);text-decoration:none}.button--text:hover{background-color:var(--button-text-hover-bg);color:var(--button-text-hover-color);border-color:var(--button-text-hover-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text:active{background-color:var(--button-text-active-bg);color:var(--button-text-active-color);border-color:var(--button-text-active-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text.button--ink{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-underline-width)) 0 0 currentColor}.button--text.button--ink:hover,.button--text.button--ink:active{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-hover-underline-width)) 0 0 currentColor}.button--text:focus-visible{outline:var(--button-text-focus-ring-width) var(--button-text-focus-ring-style) var(--button-text-focus-ring-color);outline-offset:var(--button-text-focus-ring-offset)}.button--text:disabled,.button--text[aria-disabled=true]{color:var(--button-text-disabled-color);cursor:var(--button-text-disabled-cursor);pointer-events:none}.button--ghost{justify-content:var(--button-ghost-justify-content);padding-inline:var(--button-ghost-padding-inline);border-radius:var(--button-ghost-border-radius);border-width:var(--button-ghost-border-width);border-style:var(--button-ghost-border-style);border-color:var(--button-ghost-border);font-family:var(--button-ghost-font-family);font-size:var(--button-ghost-font-size);font-weight:var(--button-ghost-font-weight);line-height:var(--button-ghost-line-height);cursor:var(--button-ghost-cursor);white-space:var(--button-ghost-white-space);-webkit-text-decoration:var(--button-ghost-text-decoration);text-decoration:var(--button-ghost-text-decoration);background-color:var(--button-ghost-bg);color:var(--button-ghost-color);transition:background-color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing), color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing)}.button--ghost:hover{background-color:var(--button-ghost-hover-bg);color:var(--button-ghost-hover-color)}.button--ghost:active{background-color:var(--button-ghost-active-bg);color:var(--button-ghost-active-color)}.button--ghost:focus-visible{outline:var(--button-ghost-focus-ring-width) var(--button-ghost-focus-ring-style) var(--button-ghost-focus-ring-color);outline-offset:var(--button-ghost-focus-ring-offset)}.button--ghost:disabled,.button--ghost[aria-disabled=true]{color:var(--button-ghost-disabled-color);cursor:var(--button-ghost-disabled-cursor);pointer-events:none}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]){color:var(--button-destructive-color);border-color:var(--button-destructive-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--button-destructive-hover-bg);color:var(--button-destructive-hover-color);border-color:var(--button-destructive-hover-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{background-color:var(--button-destructive-active-bg);color:var(--button-destructive-active-color);border-color:var(--button-destructive-active-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]),.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover,.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{color:var(--button-destructive-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button.button--sm:not(.button--text){block-size:var(--button-sm-height);padding-inline:var(--button-sm-padding-inline)}.button.button--sm{font-size:var(--button-sm-font-size)}.button.button--lg:not(.button--text){block-size:var(--button-lg-height);padding-inline:var(--button-lg-padding-inline)}.button.button--lg{font-size:var(--button-lg-font-size)}.button--block{width:var(--button-block-width)}@media (width<=767.98px){.button--block-mobile{width:var(--button-block-width)}}.button:not(.button--icon-only) .icon{--icon-size:1em}.button.button--icon-only{inline-size:var(--button-height);justify-content:center;padding-inline:0}.button.button--icon-only.button--sm{inline-size:var(--button-sm-height);padding-inline:0}.button.button--icon-only.button--lg{inline-size:var(--button-lg-height);padding-inline:0}
|
|
1
|
+
.button{align-items:center;display:inline-flex}.button:not(.button--text){block-size:var(--button-height);padding-block:0}.button--primary{justify-content:var(--button-primary-justify-content);padding-inline:var(--button-primary-padding-inline);border-radius:var(--button-primary-border-radius);border-width:var(--button-primary-border-width);border-style:var(--button-primary-border-style);border-color:var(--button-primary-border);font-family:var(--button-primary-font-family);font-size:var(--button-primary-font-size);font-weight:var(--button-primary-font-weight);line-height:var(--button-primary-line-height);cursor:var(--button-primary-cursor);white-space:var(--button-primary-white-space);-webkit-text-decoration:var(--button-primary-text-decoration);text-decoration:var(--button-primary-text-decoration);background-color:var(--button-primary-bg);color:var(--button-primary-color);transition:background-color var(--button-primary-transition-duration) var(--button-primary-transition-easing), color var(--button-primary-transition-duration) var(--button-primary-transition-easing), border-color var(--button-primary-transition-duration) var(--button-primary-transition-easing)}.button--primary:hover{background-color:var(--button-primary-hover-bg);color:var(--button-primary-hover-color);border-color:var(--button-primary-hover-border)}.button--primary:active{background-color:var(--button-primary-active-bg);color:var(--button-primary-active-color);border-color:var(--button-primary-active-border)}.button--primary:focus-visible{outline:var(--button-primary-focus-ring-width) var(--button-primary-focus-ring-style) var(--button-primary-focus-ring-color);outline-offset:var(--button-primary-focus-ring-offset)}.button--primary:disabled,.button--primary[aria-disabled=true]{background-color:var(--button-primary-disabled-bg);color:var(--button-primary-disabled-color);border-color:var(--button-primary-disabled-border);cursor:var(--button-primary-disabled-cursor);pointer-events:none}.button--outline{justify-content:var(--button-outline-justify-content);padding-inline:var(--button-outline-padding-inline);border-radius:var(--button-outline-border-radius);border-width:var(--button-outline-border-width);border-style:var(--button-outline-border-style);border-color:var(--button-outline-border);font-family:var(--button-outline-font-family);font-size:var(--button-outline-font-size);font-weight:var(--button-outline-font-weight);line-height:var(--button-outline-line-height);cursor:var(--button-outline-cursor);white-space:var(--button-outline-white-space);-webkit-text-decoration:var(--button-outline-text-decoration);text-decoration:var(--button-outline-text-decoration);background-color:var(--button-outline-bg);color:var(--button-outline-color);transition:background-color var(--button-outline-transition-duration) var(--button-outline-transition-easing), color var(--button-outline-transition-duration) var(--button-outline-transition-easing), border-color var(--button-outline-transition-duration) var(--button-outline-transition-easing)}.button--outline:hover{background-color:var(--button-outline-hover-bg);color:var(--button-outline-hover-color);border-color:var(--button-outline-hover-border)}.button--outline:active{background-color:var(--button-outline-active-bg);color:var(--button-outline-active-color);border-color:var(--button-outline-active-border)}.button--outline:focus-visible{outline:var(--button-outline-focus-ring-width) var(--button-outline-focus-ring-style) var(--button-outline-focus-ring-color);outline-offset:var(--button-outline-focus-ring-offset)}.button--outline:disabled,.button--outline[aria-disabled=true]{color:var(--button-outline-disabled-color);border-color:var(--button-outline-disabled-border);cursor:var(--button-outline-disabled-cursor);pointer-events:none}.button--text{justify-content:var(--button-text-justify-content);padding-inline:var(--button-text-padding-inline);border-radius:var(--button-text-border-radius);border-width:var(--button-text-border-width);border-style:var(--button-text-border-style);border-color:var(--button-text-border);font-family:var(--button-text-font-family);font-size:var(--button-text-font-size);font-weight:var(--button-text-font-weight);line-height:var(--button-text-line-height);cursor:var(--button-text-cursor);white-space:var(--button-text-white-space);box-shadow:inset 0 calc(-1 * var(--button-text-underline-width)) 0 0 currentColor;background-color:var(--button-text-bg);color:var(--button-text-color);transition:color var(--button-text-transition-duration) var(--button-text-transition-easing);padding-block-end:var(--button-text-underline-offset);text-decoration:none}.button--text:hover{background-color:var(--button-text-hover-bg);color:var(--button-text-hover-color);border-color:var(--button-text-hover-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text:active{background-color:var(--button-text-active-bg);color:var(--button-text-active-color);border-color:var(--button-text-active-border);box-shadow:inset 0 calc(-1 * var(--button-text-hover-underline-width)) 0 0 currentColor}.button--text.button--ink{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-underline-width)) 0 0 currentColor}.button--text.button--ink:hover,.button--text.button--ink:active{color:var(--button-text-ink-color);box-shadow:inset 0 calc(-1 * var(--button-text-ink-hover-underline-width)) 0 0 currentColor}.button--text:focus-visible{outline:var(--button-text-focus-ring-width) var(--button-text-focus-ring-style) var(--button-text-focus-ring-color);outline-offset:var(--button-text-focus-ring-offset)}.button--text:disabled,.button--text[aria-disabled=true]{color:var(--button-text-disabled-color);cursor:var(--button-text-disabled-cursor);pointer-events:none}.button--ghost{justify-content:var(--button-ghost-justify-content);padding-inline:var(--button-ghost-padding-inline);border-radius:var(--button-ghost-border-radius);border-width:var(--button-ghost-border-width);border-style:var(--button-ghost-border-style);border-color:var(--button-ghost-border);font-family:var(--button-ghost-font-family);font-size:var(--button-ghost-font-size);font-weight:var(--button-ghost-font-weight);line-height:var(--button-ghost-line-height);cursor:var(--button-ghost-cursor);white-space:var(--button-ghost-white-space);-webkit-text-decoration:var(--button-ghost-text-decoration);text-decoration:var(--button-ghost-text-decoration);background-color:var(--button-ghost-bg);color:var(--button-ghost-color);transition:background-color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing), color var(--button-ghost-transition-duration) var(--button-ghost-transition-easing)}.button--ghost:hover{background-color:var(--button-ghost-hover-bg);color:var(--button-ghost-hover-color)}.button--ghost:active{background-color:var(--button-ghost-active-bg);color:var(--button-ghost-active-color)}.button--ghost:focus-visible{outline:var(--button-ghost-focus-ring-width) var(--button-ghost-focus-ring-style) var(--button-ghost-focus-ring-color);outline-offset:var(--button-ghost-focus-ring-offset)}.button--ghost:disabled,.button--ghost[aria-disabled=true]{color:var(--button-ghost-disabled-color);cursor:var(--button-ghost-disabled-cursor);pointer-events:none}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]){color:var(--button-destructive-color);border-color:var(--button-destructive-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover{background-color:var(--button-destructive-hover-bg);color:var(--button-destructive-hover-color);border-color:var(--button-destructive-hover-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{background-color:var(--button-destructive-active-bg);color:var(--button-destructive-active-color);border-color:var(--button-destructive-active-border)}.button--outline.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]),.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):hover,.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):active{color:var(--button-destructive-color)}.button--text.button--destructive-intent:not(:disabled):not([aria-disabled=true]):focus-visible{outline-color:var(--button-destructive-focus-ring-color)}.button.button--sm:not(.button--text){block-size:var(--button-sm-height);padding-inline:var(--button-sm-padding-inline)}.button.button--sm{font-size:var(--button-sm-font-size)}.button.button--lg:not(.button--text){block-size:var(--button-lg-height);padding-inline:var(--button-lg-padding-inline)}.button.button--lg{font-size:var(--button-lg-font-size)}.button--block{width:var(--button-block-width)}@media (width<=767.98px){.button--block-mobile{width:var(--button-block-width)}}.button:not(.button--icon-only) .icon{--icon-size:1em}.button.button--icon-only{inline-size:var(--button-height);justify-content:center;padding-inline:0}.button.button--icon-only.button--sm{inline-size:var(--button-sm-height);padding-inline:0}.button.button--icon-only.button--lg{inline-size:var(--button-lg-height);padding-inline:0}.button__spinner{margin-inline-end:var(--button-loading-gap);display:inline-flex}.button.button--icon-only .button__spinner{margin-inline-end:0}.button .button__spinner .spinner__square{width:var(--button-loading-spinner-size);height:var(--button-loading-spinner-size)}
|
package/dist/button.js
CHANGED
|
@@ -1,60 +1,72 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import './button.css';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
3
|
+
import { Spinner as e } from "./spinner.js";
|
|
4
|
+
import { n as t } from "./_shared/form-size.js";
|
|
5
|
+
import { forwardRef as n } from "react";
|
|
6
|
+
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
|
+
import { useRender as o } from "@base-ui/react/use-render";
|
|
7
8
|
//#region src/stories/atoms/Button/Button.tsx
|
|
8
|
-
var
|
|
9
|
-
let
|
|
9
|
+
var s = n(function({ variant: n = "primary", tone: s = "accent", destructive: c = !1, size: l, block: u = !1, iconOnly: d = !1, children: f, type: p = "button", disabled: m, loading: h = !1, onClick: g, href: _, external: v = !1, render: y, className: b, ...x }, S) {
|
|
10
|
+
let C = t(l), w = [
|
|
10
11
|
"button",
|
|
11
|
-
`button--${
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
`button--${n}`,
|
|
13
|
+
n === "text" && s === "ink" ? "button--ink" : "",
|
|
14
|
+
c ? "button--destructive-intent" : "",
|
|
15
|
+
C === "md" ? "" : `button--${C}`,
|
|
16
|
+
u === "mobile" ? "button--block-mobile" : u ? "button--block" : "",
|
|
17
|
+
d ? "button--icon-only" : "",
|
|
18
|
+
h ? "button--loading" : "",
|
|
19
|
+
b ?? ""
|
|
20
|
+
].filter(Boolean).join(" "), T = !!m || h, E = (e) => {
|
|
21
|
+
if (T) {
|
|
20
22
|
e.preventDefault(), e.stopPropagation();
|
|
21
23
|
return;
|
|
22
24
|
}
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
g?.(e);
|
|
26
|
+
}, D = h ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
|
|
27
|
+
className: "button__spinner",
|
|
28
|
+
children: /* @__PURE__ */ i(e, {
|
|
29
|
+
size: "sm",
|
|
30
|
+
"aria-hidden": !0
|
|
31
|
+
})
|
|
32
|
+
}), d ? null : f] }) : f;
|
|
33
|
+
return o({
|
|
34
|
+
render: y,
|
|
35
|
+
ref: S,
|
|
36
|
+
enabled: y !== void 0,
|
|
29
37
|
props: {
|
|
30
|
-
className:
|
|
31
|
-
"aria-disabled":
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
className: w,
|
|
39
|
+
"aria-disabled": T ? !0 : void 0,
|
|
40
|
+
"aria-busy": h ? !0 : void 0,
|
|
41
|
+
onClick: E,
|
|
42
|
+
...x,
|
|
43
|
+
children: D
|
|
35
44
|
}
|
|
36
|
-
}) || (
|
|
37
|
-
ref:
|
|
38
|
-
className:
|
|
39
|
-
type:
|
|
40
|
-
disabled:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
}) || (_ === void 0 ? /* @__PURE__ */ i("button", {
|
|
46
|
+
ref: S,
|
|
47
|
+
className: w,
|
|
48
|
+
type: p,
|
|
49
|
+
disabled: m,
|
|
50
|
+
"aria-disabled": h ? !0 : void 0,
|
|
51
|
+
"aria-busy": h ? !0 : void 0,
|
|
52
|
+
onClick: E,
|
|
53
|
+
...x,
|
|
54
|
+
children: D
|
|
55
|
+
}) : /* @__PURE__ */ i("a", {
|
|
56
|
+
ref: S,
|
|
57
|
+
className: w,
|
|
58
|
+
href: T ? void 0 : _,
|
|
59
|
+
"aria-disabled": T ? !0 : void 0,
|
|
60
|
+
"aria-busy": h ? !0 : void 0,
|
|
61
|
+
role: T ? "link" : void 0,
|
|
62
|
+
onClick: E,
|
|
63
|
+
...v ? {
|
|
52
64
|
target: "_blank",
|
|
53
65
|
rel: "noopener noreferrer"
|
|
54
66
|
} : {},
|
|
55
|
-
...
|
|
56
|
-
children:
|
|
67
|
+
...x,
|
|
68
|
+
children: D
|
|
57
69
|
}));
|
|
58
70
|
});
|
|
59
71
|
//#endregion
|
|
60
|
-
export {
|
|
72
|
+
export { s as Button };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.loading-region{gap:var(--loading-region-gap);flex-direction:column;display:flex}.skeleton-text,.skeleton-list,.skeleton-table{flex-direction:column;display:flex}.skeleton-text{gap:var(--loading-region-text-gap)}.skeleton-list{gap:var(--loading-region-list-gap)}.skeleton-table{gap:var(--loading-region-table-gap)}.skeleton-text .skeleton.skeleton-text__line--last{width:var(--loading-region-text-last-line-width)}.skeleton-list .skeleton.skeleton-list__row{height:var(--loading-region-list-row-height)}.skeleton-table .skeleton.skeleton-table__header{height:var(--loading-region-table-header-height)}.skeleton-table .skeleton.skeleton-table__row{height:var(--loading-region-table-row-height)}.skeleton-grid{gap:var(--loading-region-grid-gap);display:grid}.skeleton-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.skeleton-grid[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.skeleton-grid[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.skeleton-grid .skeleton.skeleton-grid__item{height:var(--loading-region-grid-item-height)}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import './loading-region.css';
|
|
3
|
+
import { n as e } from "./_shared/brandmessagescontext.js";
|
|
4
|
+
import { VisuallyHidden as t } from "./visually-hidden.js";
|
|
5
|
+
import { Skeleton as n } from "./skeleton.js";
|
|
6
|
+
import { useId as r } from "react";
|
|
7
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
8
|
+
//#region src/stories/molecules/LoadingRegion/LoadingRegion.tsx
|
|
9
|
+
function o({ label: n, announce: o = !0, children: s, className: c, ...l }) {
|
|
10
|
+
let u = e("spinner"), d = r(), f = ["loading-region", c].filter(Boolean).join(" ");
|
|
11
|
+
return o ? /* @__PURE__ */ a("div", {
|
|
12
|
+
className: f,
|
|
13
|
+
role: "status",
|
|
14
|
+
"aria-busy": "true",
|
|
15
|
+
"aria-labelledby": d,
|
|
16
|
+
...l,
|
|
17
|
+
children: [/* @__PURE__ */ i(t, {
|
|
18
|
+
id: d,
|
|
19
|
+
children: u("label", n)
|
|
20
|
+
}), s]
|
|
21
|
+
}) : /* @__PURE__ */ i("div", {
|
|
22
|
+
className: f,
|
|
23
|
+
"aria-hidden": "true",
|
|
24
|
+
...l,
|
|
25
|
+
children: s
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function s(e) {
|
|
29
|
+
return Array.from({ length: Math.max(0, Math.floor(e)) }, (e, t) => t);
|
|
30
|
+
}
|
|
31
|
+
function c({ lines: e = 3 }) {
|
|
32
|
+
return /* @__PURE__ */ i("div", {
|
|
33
|
+
className: "skeleton-text",
|
|
34
|
+
"aria-hidden": "true",
|
|
35
|
+
children: s(e).map((t) => /* @__PURE__ */ i(n, { className: ["skeleton-text__line", t === e - 1 && e > 1 ? "skeleton-text__line--last" : ""].filter(Boolean).join(" ") }, t))
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function l({ rows: e = 4 }) {
|
|
39
|
+
return /* @__PURE__ */ i("div", {
|
|
40
|
+
className: "skeleton-list",
|
|
41
|
+
"aria-hidden": "true",
|
|
42
|
+
children: s(e).map((e) => /* @__PURE__ */ i(n, { className: "skeleton-list__row" }, e))
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function u({ rows: e = 4 }) {
|
|
46
|
+
return /* @__PURE__ */ a("div", {
|
|
47
|
+
className: "skeleton-table",
|
|
48
|
+
"aria-hidden": "true",
|
|
49
|
+
children: [/* @__PURE__ */ i(n, { className: "skeleton-table__header" }), s(e).map((e) => /* @__PURE__ */ i(n, { className: "skeleton-table__row" }, e))]
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function d({ columns: e = 3, rows: t = 2 }) {
|
|
53
|
+
return /* @__PURE__ */ i("div", {
|
|
54
|
+
className: "skeleton-grid",
|
|
55
|
+
"data-columns": e,
|
|
56
|
+
"aria-hidden": "true",
|
|
57
|
+
children: s(e * t).map((e) => /* @__PURE__ */ i(n, { className: "skeleton-grid__item" }, e))
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
//#endregion
|
|
61
|
+
export { o as LoadingRegion, d as SkeletonGrid, l as SkeletonList, u as SkeletonTable, c as SkeletonText };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.loading-state{justify-content:center;align-items:center;gap:var(--loading-state-gap);block-size:100%;min-block-size:var(--loading-state-min-block-size);padding-block:var(--loading-state-padding-block);padding-inline:var(--loading-state-padding-inline);text-align:center;flex-direction:column;flex:auto;display:flex}.loading-state__spinner{color:var(--loading-state-spinner-color);display:flex}.loading-state.loading-state--sm{min-block-size:var(--loading-state-sm-min-block-size);padding-block:var(--loading-state-sm-padding-block)}.loading-state.loading-state--fill{min-block-size:calc(100dvh - var(--app-shell-chrome-block-start,0px) - 2 * var(--section-padding-block-lg))}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import './loading-state.css';
|
|
3
|
+
import { n as e } from "./_shared/brandmessagescontext.js";
|
|
4
|
+
import { VisuallyHidden as t } from "./visually-hidden.js";
|
|
5
|
+
import { Spinner as n } from "./spinner.js";
|
|
6
|
+
import { Button as r } from "./button.js";
|
|
7
|
+
import { useId as i } from "react";
|
|
8
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
9
|
+
//#region src/stories/molecules/LoadingState/LoadingState.tsx
|
|
10
|
+
function s({ label: s, size: c = "md", fill: l = !1, action: u, className: d, ...f }) {
|
|
11
|
+
let p = e("spinner"), m = i(), h = p("label", s);
|
|
12
|
+
return /* @__PURE__ */ o("div", {
|
|
13
|
+
className: [
|
|
14
|
+
"loading-state",
|
|
15
|
+
c === "sm" ? "loading-state--sm" : "",
|
|
16
|
+
l ? "loading-state--fill" : "",
|
|
17
|
+
d
|
|
18
|
+
].filter(Boolean).join(" "),
|
|
19
|
+
role: "status",
|
|
20
|
+
"aria-busy": "true",
|
|
21
|
+
"aria-labelledby": m,
|
|
22
|
+
...f,
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ a("span", {
|
|
25
|
+
className: "loading-state__spinner",
|
|
26
|
+
children: /* @__PURE__ */ a(n, {
|
|
27
|
+
size: c === "sm" ? "md" : "lg",
|
|
28
|
+
"aria-hidden": !0
|
|
29
|
+
})
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ a(t, {
|
|
32
|
+
id: m,
|
|
33
|
+
children: h
|
|
34
|
+
}),
|
|
35
|
+
u && /* @__PURE__ */ a(r, {
|
|
36
|
+
variant: "outline",
|
|
37
|
+
size: c === "sm" ? "sm" : "md",
|
|
38
|
+
onClick: u.onClick,
|
|
39
|
+
href: u.href,
|
|
40
|
+
children: u.label
|
|
41
|
+
})
|
|
42
|
+
]
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
export { s as LoadingState };
|
package/dist/toaster.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--button-border-style:solid;--button-border-color:#0000;--button-justify-content:center;--button-cursor:pointer;--button-white-space:nowrap;--button-text-decoration:none;--button-disabled-cursor:not-allowed;--button-focus-ring-style:solid;--button-block-width:100%;--button-outline-bg:#0000;--button-text-border-width:0;--button-text-padding-inline:0;--button-text-bg:#0000;--button-text-border:#0000;--button-text-hover-bg:#0000;--button-text-hover-border:#0000;--button-text-active-bg:#0000;--button-text-active-border:#0000;--button-ghost-border-width:0;--button-ghost-bg:#0000;--button-ghost-border:#0000;--button-ghost-hover-border:#0000;--button-ghost-active-border:#0000;--button-font-family:var(--font-family-sans);--button-font-size:var(--font-size-2);--button-line-height:var(--line-height-none);--button-transition-duration:var(--motion-duration-fast);--button-transition-easing:var(--motion-easing-default);--button-height:var(--size-component-md);--button-sm-height:var(--size-component-sm);--button-lg-height:var(--size-component-lg);--button-padding-inline:var(--spacing-6);--button-focus-ring-offset:var(--spacing-1);--button-sm-padding-inline:var(--spacing-5);--button-sm-font-size:var(--font-size-1);--button-lg-padding-inline:var(--spacing-8);--button-lg-font-size:var(--font-size-3);--button-primary-border-style:var(--button-border-style);--button-primary-justify-content:var(--button-justify-content);--button-primary-cursor:var(--button-cursor);--button-primary-white-space:var(--button-white-space);--button-primary-text-decoration:var(--button-text-decoration);--button-primary-disabled-cursor:var(--button-disabled-cursor);--button-primary-disabled-color:var(--color-white);--button-primary-focus-ring-style:var(--button-focus-ring-style);--button-destructive-border-style:var(--button-border-style);--button-destructive-justify-content:var(--button-justify-content);--button-destructive-cursor:var(--button-cursor);--button-destructive-white-space:var(--button-white-space);--button-destructive-text-decoration:var(--button-text-decoration);--button-destructive-disabled-cursor:var(--button-disabled-cursor);--button-destructive-focus-ring-style:var(--button-focus-ring-style);--button-destructive-bg:var(--color-white);--button-outline-border-style:var(--button-border-style);--button-outline-justify-content:var(--button-justify-content);--button-outline-cursor:var(--button-cursor);--button-outline-white-space:var(--button-white-space);--button-outline-text-decoration:var(--button-text-decoration);--button-outline-disabled-cursor:var(--button-disabled-cursor);--button-outline-focus-ring-style:var(--button-focus-ring-style);--button-text-border-style:var(--button-border-style);--button-text-justify-content:var(--button-justify-content);--button-text-cursor:var(--link-cursor);--button-text-white-space:var(--button-white-space);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-ink-hover-underline-width:var(--link-ink-hover-underline-width);--button-text-disabled-cursor:var(--button-disabled-cursor);--button-text-focus-ring-style:var(--button-focus-ring-style);--button-ghost-border-style:var(--button-border-style);--button-ghost-justify-content:var(--button-justify-content);--button-ghost-cursor:var(--button-cursor);--button-ghost-white-space:var(--button-white-space);--button-ghost-text-decoration:var(--button-text-decoration);--button-ghost-disabled-cursor:var(--button-disabled-cursor);--button-ghost-focus-ring-style:var(--button-focus-ring-style);--button-border-radius:var(--border-radius-default);--button-border-width:var(--border-width-default);--button-font-weight:var(--font-weight-default);--button-disabled-bg:var(--color-disabled-bg-on-light);--button-disabled-color:var(--color-disabled-text-on-light);--button-disabled-border:var(--color-disabled-text-on-light);--button-focus-ring-width:var(--border-width-focus);--button-primary-font-family:var(--button-font-family);--button-primary-font-size:var(--button-font-size);--button-primary-line-height:var(--button-line-height);--button-primary-transition-duration:var(--button-transition-duration);--button-primary-transition-easing:var(--button-transition-easing);--button-primary-padding-inline:var(--button-padding-inline);--button-primary-focus-ring-offset:var(--button-focus-ring-offset);--button-primary-focus-ring-color:var(--color-primary);--button-primary-bg:var(--color-accent-1);--button-primary-color:var(--color-primary);--button-primary-border:var(--color-accent-1);--button-primary-hover-bg:var(--color-accent-2);--button-primary-hover-color:var(--color-primary);--button-primary-hover-border:var(--color-accent-2);--button-primary-active-bg:var(--color-accent-2);--button-primary-active-color:var(--color-primary);--button-primary-active-border:var(--color-accent-2);--button-destructive-font-family:var(--button-font-family);--button-destructive-font-size:var(--button-font-size);--button-destructive-line-height:var(--button-line-height);--button-destructive-transition-duration:var(--button-transition-duration);--button-destructive-transition-easing:var(--button-transition-easing);--button-destructive-padding-inline:var(--button-padding-inline);--button-destructive-focus-ring-offset:var(--button-focus-ring-offset);--button-destructive-focus-ring-color:var(--color-destructive-text-on-light);--button-destructive-color:var(--color-destructive-text-on-light);--button-destructive-border:var(--color-destructive-text-on-light);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-outline-font-family:var(--button-font-family);--button-outline-font-size:var(--button-font-size);--button-outline-line-height:var(--button-line-height);--button-outline-transition-duration:var(--button-transition-duration);--button-outline-transition-easing:var(--button-transition-easing);--button-outline-disabled-color:var(--color-disabled-border-on-light);--button-outline-disabled-border:var(--color-disabled-border-on-light);--button-outline-padding-inline:var(--button-padding-inline);--button-outline-focus-ring-offset:var(--button-focus-ring-offset);--button-outline-focus-ring-color:var(--color-text-on-light);--button-outline-color:var(--color-text-on-light);--button-outline-border:var(--color-text-on-light);--button-outline-hover-bg:var(--color-text-on-light);--button-outline-hover-color:var(--color-text-on-dark);--button-outline-hover-border:var(--color-text-on-light);--button-outline-active-bg:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-dark);--button-outline-active-border:var(--color-text-on-light);--button-text-font-family:var(--button-font-family);--button-text-font-size:var(--button-font-size);--button-text-line-height:var(--button-line-height);--button-text-underline-offset:var(--link-underline-offset);--button-text-transition-duration:var(--button-transition-duration);--button-text-transition-easing:var(--button-transition-easing);--button-ghost-font-family:var(--button-font-family);--button-ghost-font-size:var(--button-font-size);--button-ghost-line-height:var(--button-line-height);--button-ghost-transition-duration:var(--button-transition-duration);--button-ghost-transition-easing:var(--button-transition-easing);--button-ghost-padding-inline:var(--button-padding-inline);--button-ghost-focus-ring-offset:var(--button-focus-ring-offset);--button-ghost-focus-ring-color:var(--color-primary);--button-ghost-color:var(--color-text-on-light);--button-ghost-hover-bg:var(--color-primary);--button-ghost-hover-color:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-primary);--button-ghost-active-color:var(--color-text-on-dark);--button-primary-border-radius:var(--button-border-radius);--button-primary-border-width:var(--button-border-width);--button-primary-font-weight:var(--button-font-weight);--button-primary-disabled-bg:var(--button-disabled-border);--button-primary-disabled-border:var(--button-disabled-border);--button-primary-focus-ring-width:var(--button-focus-ring-width);--button-destructive-border-radius:var(--button-border-radius);--button-destructive-border-width:var(--button-border-width);--button-destructive-font-weight:var(--button-font-weight);--button-destructive-disabled-color:var(--button-disabled-color);--button-destructive-disabled-border:var(--button-disabled-border);--button-destructive-focus-ring-width:var(--button-focus-ring-width);--button-outline-border-radius:var(--button-border-radius);--button-outline-border-width:var(--button-border-width);--button-outline-font-weight:var(--button-font-weight);--button-outline-focus-ring-width:var(--button-focus-ring-width);--button-text-border-radius:var(--button-border-radius);--button-text-font-weight:var(--button-font-weight);--button-text-underline-width:var(--link-underline-width);--button-text-ink-color:var(--link-ink-color);--button-text-ink-underline-width:var(--link-ink-underline-width);--button-text-disabled-color:var(--button-disabled-color);--button-text-focus-ring-width:var(--button-focus-ring-width);--button-text-focus-ring-offset:var(--link-focus-ring-offset);--button-text-focus-ring-color:var(--link-focus-ring-color);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-active-color:var(--link-hover-color);--button-ghost-border-radius:var(--button-border-radius);--button-ghost-font-weight:var(--button-font-weight);--button-ghost-disabled-color:var(--button-disabled-color);--button-ghost-focus-ring-width:var(--button-focus-ring-width)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--button-outline-hover-bg:var(--color-white);--button-outline-hover-border:var(--color-white);--button-outline-active-bg:var(--color-white);--button-outline-active-border:var(--color-white);--button-outline-focus-ring-color:var(--color-white);--button-text-underline-width:var(--link-underline-width);--button-primary-focus-ring-color:var(--color-text-on-dark);--button-destructive-color:var(--color-destructive-text-on-dark);--button-destructive-border:var(--color-destructive-text-on-dark);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-destructive-focus-ring-color:var(--color-destructive-text-on-dark);--button-outline-color:var(--color-text-on-dark);--button-outline-border:var(--color-text-on-dark);--button-outline-hover-color:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-light);--button-text-disabled-color:var(--color-text-muted-on-dark);--button-ghost-color:var(--color-text-on-dark);--button-ghost-hover-color:var(--color-primary);--button-ghost-active-color:var(--color-primary);--button-ghost-focus-ring-color:var(--color-text-on-dark);--button-ghost-hover-bg:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-text-on-dark);--button-ghost-disabled-color:var(--color-text-muted-on-dark);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-ink-color:var(--link-ink-color);--button-text-active-color:var(--link-hover-color);--button-text-focus-ring-color:var(--link-focus-ring-color)}:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}:root{--toast-max-width:360px;--toast-stack-scale:.05;--toast-enter-scale:.97;--toast-z-index:var(--z-index-toast);--toast-inset-block:var(--spacing-5);--toast-inset-inline:var(--spacing-5);--toast-gap:var(--spacing-2);--toast-stack-offset:var(--spacing-3);--toast-duration-in:var(--motion-duration-base);--toast-duration-out:var(--motion-duration-base);--toast-easing:var(--motion-easing-out)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}.toaster{--toast-stack-direction:-1;z-index:var(--toast-z-index);inline-size:min(var(--toast-max-width), calc(100vw - var(--toast-inset-inline) * 2));outline:none;position:fixed;inset-block-end:var(--toast-inset-block);inset-inline-end:var(--toast-inset-inline)}.toaster.toaster--top{--toast-stack-direction:1;inset-block-start:var(--toast-inset-block);inset-block-end:auto}.toaster.toaster--left{inset-inline-start:var(--toast-inset-inline);inset-inline-end:auto}.toaster.toaster--center{inset-inline:50% auto;translate:-50%}.toast{transform-origin:bottom;cursor:default;z-index:calc(var(--toast-z-index) - var(--toast-index));transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * var(--toast-index) * var(--toast-stack-offset))) scale(max(0, 1 - var(--toast-index) * var(--toast-stack-scale)));transition:transform var(--toast-duration-in) var(--toast-easing), opacity var(--toast-duration-in) var(--toast-easing);position:absolute;inset-block-end:0;inset-inline:0}.toaster.toaster--top .toast{transform-origin:top;inset-block:0 auto}.toast[data-expanded],.toaster--expanded .toast{transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))))}.toast[data-starting-style],.toast[data-ending-style]{opacity:0;transform:translateY(calc(var(--toast-stack-direction) * -100%)) scale(var(--toast-enter-scale))}.toast[data-ending-style]{transition-duration:var(--toast-duration-out)}.toast[data-swiping]{transition:none}.toast[data-limited]{opacity:0}.toast .toast__action{margin-block-start:var(--alert-content-gap);margin-inline-start:calc(var(--button-sm-padding-inline) * -1)}
|
|
1
|
+
:root{--button-border-style:solid;--button-border-color:#0000;--button-justify-content:center;--button-cursor:pointer;--button-white-space:nowrap;--button-text-decoration:none;--button-disabled-cursor:not-allowed;--button-loading-spinner-size:1em;--button-focus-ring-style:solid;--button-block-width:100%;--button-outline-bg:#0000;--button-text-border-width:0;--button-text-padding-inline:0;--button-text-bg:#0000;--button-text-border:#0000;--button-text-hover-bg:#0000;--button-text-hover-border:#0000;--button-text-active-bg:#0000;--button-text-active-border:#0000;--button-ghost-border-width:0;--button-ghost-bg:#0000;--button-ghost-border:#0000;--button-ghost-hover-border:#0000;--button-ghost-active-border:#0000;--button-font-family:var(--font-family-sans);--button-font-size:var(--font-size-2);--button-line-height:var(--line-height-none);--button-transition-duration:var(--motion-duration-fast);--button-transition-easing:var(--motion-easing-default);--button-height:var(--size-component-md);--button-sm-height:var(--size-component-sm);--button-lg-height:var(--size-component-lg);--button-loading-gap:var(--spacing-2);--button-padding-inline:var(--spacing-6);--button-focus-ring-offset:var(--spacing-1);--button-sm-padding-inline:var(--spacing-5);--button-sm-font-size:var(--font-size-1);--button-lg-padding-inline:var(--spacing-8);--button-lg-font-size:var(--font-size-3);--button-primary-border-style:var(--button-border-style);--button-primary-justify-content:var(--button-justify-content);--button-primary-cursor:var(--button-cursor);--button-primary-white-space:var(--button-white-space);--button-primary-text-decoration:var(--button-text-decoration);--button-primary-disabled-cursor:var(--button-disabled-cursor);--button-primary-disabled-color:var(--color-white);--button-primary-focus-ring-style:var(--button-focus-ring-style);--button-destructive-border-style:var(--button-border-style);--button-destructive-justify-content:var(--button-justify-content);--button-destructive-cursor:var(--button-cursor);--button-destructive-white-space:var(--button-white-space);--button-destructive-text-decoration:var(--button-text-decoration);--button-destructive-disabled-cursor:var(--button-disabled-cursor);--button-destructive-focus-ring-style:var(--button-focus-ring-style);--button-destructive-bg:var(--color-white);--button-outline-border-style:var(--button-border-style);--button-outline-justify-content:var(--button-justify-content);--button-outline-cursor:var(--button-cursor);--button-outline-white-space:var(--button-white-space);--button-outline-text-decoration:var(--button-text-decoration);--button-outline-disabled-cursor:var(--button-disabled-cursor);--button-outline-focus-ring-style:var(--button-focus-ring-style);--button-text-border-style:var(--button-border-style);--button-text-justify-content:var(--button-justify-content);--button-text-cursor:var(--link-cursor);--button-text-white-space:var(--button-white-space);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-ink-hover-underline-width:var(--link-ink-hover-underline-width);--button-text-disabled-cursor:var(--button-disabled-cursor);--button-text-focus-ring-style:var(--button-focus-ring-style);--button-ghost-border-style:var(--button-border-style);--button-ghost-justify-content:var(--button-justify-content);--button-ghost-cursor:var(--button-cursor);--button-ghost-white-space:var(--button-white-space);--button-ghost-text-decoration:var(--button-text-decoration);--button-ghost-disabled-cursor:var(--button-disabled-cursor);--button-ghost-focus-ring-style:var(--button-focus-ring-style);--button-border-radius:var(--border-radius-default);--button-border-width:var(--border-width-default);--button-font-weight:var(--font-weight-default);--button-disabled-bg:var(--color-disabled-bg-on-light);--button-disabled-color:var(--color-disabled-text-on-light);--button-disabled-border:var(--color-disabled-text-on-light);--button-focus-ring-width:var(--border-width-focus);--button-primary-font-family:var(--button-font-family);--button-primary-font-size:var(--button-font-size);--button-primary-line-height:var(--button-line-height);--button-primary-transition-duration:var(--button-transition-duration);--button-primary-transition-easing:var(--button-transition-easing);--button-primary-padding-inline:var(--button-padding-inline);--button-primary-focus-ring-offset:var(--button-focus-ring-offset);--button-primary-focus-ring-color:var(--color-primary);--button-primary-bg:var(--color-accent-1);--button-primary-color:var(--color-primary);--button-primary-border:var(--color-accent-1);--button-primary-hover-bg:var(--color-accent-2);--button-primary-hover-color:var(--color-primary);--button-primary-hover-border:var(--color-accent-2);--button-primary-active-bg:var(--color-accent-2);--button-primary-active-color:var(--color-primary);--button-primary-active-border:var(--color-accent-2);--button-destructive-font-family:var(--button-font-family);--button-destructive-font-size:var(--button-font-size);--button-destructive-line-height:var(--button-line-height);--button-destructive-transition-duration:var(--button-transition-duration);--button-destructive-transition-easing:var(--button-transition-easing);--button-destructive-padding-inline:var(--button-padding-inline);--button-destructive-focus-ring-offset:var(--button-focus-ring-offset);--button-destructive-focus-ring-color:var(--color-destructive-text-on-light);--button-destructive-color:var(--color-destructive-text-on-light);--button-destructive-border:var(--color-destructive-text-on-light);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-outline-font-family:var(--button-font-family);--button-outline-font-size:var(--button-font-size);--button-outline-line-height:var(--button-line-height);--button-outline-transition-duration:var(--button-transition-duration);--button-outline-transition-easing:var(--button-transition-easing);--button-outline-disabled-color:var(--color-disabled-border-on-light);--button-outline-disabled-border:var(--color-disabled-border-on-light);--button-outline-padding-inline:var(--button-padding-inline);--button-outline-focus-ring-offset:var(--button-focus-ring-offset);--button-outline-focus-ring-color:var(--color-text-on-light);--button-outline-color:var(--color-text-on-light);--button-outline-border:var(--color-text-on-light);--button-outline-hover-bg:var(--color-text-on-light);--button-outline-hover-color:var(--color-text-on-dark);--button-outline-hover-border:var(--color-text-on-light);--button-outline-active-bg:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-dark);--button-outline-active-border:var(--color-text-on-light);--button-text-font-family:var(--button-font-family);--button-text-font-size:var(--button-font-size);--button-text-line-height:var(--button-line-height);--button-text-underline-offset:var(--link-underline-offset);--button-text-transition-duration:var(--button-transition-duration);--button-text-transition-easing:var(--button-transition-easing);--button-ghost-font-family:var(--button-font-family);--button-ghost-font-size:var(--button-font-size);--button-ghost-line-height:var(--button-line-height);--button-ghost-transition-duration:var(--button-transition-duration);--button-ghost-transition-easing:var(--button-transition-easing);--button-ghost-padding-inline:var(--button-padding-inline);--button-ghost-focus-ring-offset:var(--button-focus-ring-offset);--button-ghost-focus-ring-color:var(--color-primary);--button-ghost-color:var(--color-text-on-light);--button-ghost-hover-bg:var(--color-primary);--button-ghost-hover-color:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-primary);--button-ghost-active-color:var(--color-text-on-dark);--button-primary-border-radius:var(--button-border-radius);--button-primary-border-width:var(--button-border-width);--button-primary-font-weight:var(--button-font-weight);--button-primary-disabled-bg:var(--button-disabled-border);--button-primary-disabled-border:var(--button-disabled-border);--button-primary-focus-ring-width:var(--button-focus-ring-width);--button-destructive-border-radius:var(--button-border-radius);--button-destructive-border-width:var(--button-border-width);--button-destructive-font-weight:var(--button-font-weight);--button-destructive-disabled-color:var(--button-disabled-color);--button-destructive-disabled-border:var(--button-disabled-border);--button-destructive-focus-ring-width:var(--button-focus-ring-width);--button-outline-border-radius:var(--button-border-radius);--button-outline-border-width:var(--button-border-width);--button-outline-font-weight:var(--button-font-weight);--button-outline-focus-ring-width:var(--button-focus-ring-width);--button-text-border-radius:var(--button-border-radius);--button-text-font-weight:var(--button-font-weight);--button-text-underline-width:var(--link-underline-width);--button-text-ink-color:var(--link-ink-color);--button-text-ink-underline-width:var(--link-ink-underline-width);--button-text-disabled-color:var(--button-disabled-color);--button-text-focus-ring-width:var(--button-focus-ring-width);--button-text-focus-ring-offset:var(--link-focus-ring-offset);--button-text-focus-ring-color:var(--link-focus-ring-color);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-active-color:var(--link-hover-color);--button-ghost-border-radius:var(--button-border-radius);--button-ghost-font-weight:var(--button-font-weight);--button-ghost-disabled-color:var(--button-disabled-color);--button-ghost-focus-ring-width:var(--button-focus-ring-width)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--button-outline-hover-bg:var(--color-white);--button-outline-hover-border:var(--color-white);--button-outline-active-bg:var(--color-white);--button-outline-active-border:var(--color-white);--button-outline-focus-ring-color:var(--color-white);--button-text-underline-width:var(--link-underline-width);--button-primary-focus-ring-color:var(--color-text-on-dark);--button-destructive-color:var(--color-destructive-text-on-dark);--button-destructive-border:var(--color-destructive-text-on-dark);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-destructive-focus-ring-color:var(--color-destructive-text-on-dark);--button-outline-color:var(--color-text-on-dark);--button-outline-border:var(--color-text-on-dark);--button-outline-hover-color:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-light);--button-text-disabled-color:var(--color-text-muted-on-dark);--button-ghost-color:var(--color-text-on-dark);--button-ghost-hover-color:var(--color-primary);--button-ghost-active-color:var(--color-primary);--button-ghost-focus-ring-color:var(--color-text-on-dark);--button-ghost-hover-bg:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-text-on-dark);--button-ghost-disabled-color:var(--color-text-muted-on-dark);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-ink-color:var(--link-ink-color);--button-text-active-color:var(--link-hover-color);--button-text-focus-ring-color:var(--link-focus-ring-color)}:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}:root{--toast-max-width:360px;--toast-stack-scale:.05;--toast-enter-scale:.97;--toast-z-index:var(--z-index-toast);--toast-inset-block:var(--spacing-5);--toast-inset-inline:var(--spacing-5);--toast-gap:var(--spacing-2);--toast-stack-offset:var(--spacing-3);--toast-duration-in:var(--motion-duration-base);--toast-duration-out:var(--motion-duration-base);--toast-easing:var(--motion-easing-out)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}.toaster{--toast-stack-direction:-1;z-index:var(--toast-z-index);inline-size:min(var(--toast-max-width), calc(100vw - var(--toast-inset-inline) * 2));outline:none;position:fixed;inset-block-end:var(--toast-inset-block);inset-inline-end:var(--toast-inset-inline)}.toaster.toaster--top{--toast-stack-direction:1;inset-block-start:var(--toast-inset-block);inset-block-end:auto}.toaster.toaster--left{inset-inline-start:var(--toast-inset-inline);inset-inline-end:auto}.toaster.toaster--center{inset-inline:50% auto;translate:-50%}.toast{transform-origin:bottom;cursor:default;z-index:calc(var(--toast-z-index) - var(--toast-index));transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * var(--toast-index) * var(--toast-stack-offset))) scale(max(0, 1 - var(--toast-index) * var(--toast-stack-scale)));transition:transform var(--toast-duration-in) var(--toast-easing), opacity var(--toast-duration-in) var(--toast-easing);position:absolute;inset-block-end:0;inset-inline:0}.toaster.toaster--top .toast{transform-origin:top;inset-block:0 auto}.toast[data-expanded],.toaster--expanded .toast{transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))))}.toast[data-starting-style],.toast[data-ending-style]{opacity:0;transform:translateY(calc(var(--toast-stack-direction) * -100%)) scale(var(--toast-enter-scale))}.toast[data-ending-style]{transition-duration:var(--toast-duration-out)}.toast[data-swiping]{transition:none}.toast[data-limited]{opacity:0}.toast .toast__action{margin-block-start:var(--alert-content-gap);margin-inline-start:calc(var(--button-sm-padding-inline) * -1)}
|