@openameba/spindle-ui 2.6.3 → 2.7.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/Dialog/Dialog.css +1 -1
  3. package/Dialog/Dialog.d.ts.map +1 -1
  4. package/Dialog/Dialog.js +3 -30
  5. package/Dialog/Dialog.js.map +1 -1
  6. package/Dialog/Dialog.mjs +3 -28
  7. package/index.css +1 -1
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.7.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.6.3...@openameba/spindle-ui@2.7.0) (2025-09-19)
7
+
8
+ ### Features
9
+
10
+ - **spindle-ui:** migrate Dialog to allow-discrete transitions ([4c1dd4f](https://github.com/openameba/spindle/commit/4c1dd4f688d30dd7d84b4fbda88ffbbc1d534a55))
11
+
6
12
  ## [2.6.3](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.6.2...@openameba/spindle-ui@2.6.3) (2025-09-18)
7
13
 
8
14
  ### Bug Fixes
package/Dialog/Dialog.css CHANGED
@@ -1 +1 @@
1
- .spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);padding:24px;position:fixed;width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8)}.spui-Dialog+.backdrop{background:rgba(0,0,0,.8)}.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1)}.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop{animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop,.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation-duration:.01s}}html:has(.spui-Dialog[open]){overflow:hidden}html.spui-Dialog--open{overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}.spui-Dialog--styleOnly{position:static}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}@keyframes spui-Dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-Dialog-fade-out{0%{opacity:1}to{opacity:0}}
1
+ .spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);opacity:0;padding:24px;position:fixed;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1);width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8);opacity:0;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1)}.spui-Dialog[open]{opacity:1}.spui-Dialog[open]::backdrop{opacity:1}@starting-style{.spui-Dialog[open]{opacity:0}.spui-Dialog[open]::backdrop{opacity:0}}.spui-Dialog:not([open]),.spui-Dialog:not([open])::backdrop{transition-duration:.15s}@media (prefers-reduced-motion:reduce){.spui-Dialog,.spui-Dialog::backdrop{transition-duration:1ms}}html:has(.spui-Dialog:modal){overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}.spui-Dialog--styleOnly{opacity:1;position:static}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}
package/Dialog/Dialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoID,eAAO,MAAM,MAAM;;yCArCyB,UAAU;8BAarB,UAAU;6BAQX,UAAU;;;;;CAsBzC,CAAC"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,UAAU,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAED,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAgGD,eAAO,MAAM,MAAM;;yCArCyB,UAAU;8BAarB,UAAU;6BAQX,UAAU;;;;;CAsBzC,CAAC"}
package/Dialog/Dialog.js CHANGED
@@ -60,10 +60,8 @@ var react_1 = __importStar(require("react"));
60
60
  var use_callback_ref_1 = require("use-callback-ref");
61
61
  var ButtonGroup_1 = require("../ButtonGroup");
62
62
  var BLOCK_NAME = 'spui-Dialog';
63
- var FADE_OUT_ANIMATION = 'spui-Dialog-fade-out';
64
63
  var Frame = (0, react_1.forwardRef)(function Dialog(_a, ref) {
65
64
  var children = _a.children, className = _a.className, open = _a.open, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "onClose"]);
66
- var _b = (0, react_1.useState)(false), closing = _b[0], setClosing = _b[1];
67
65
  var dialogEl = (0, react_1.useRef)(null);
68
66
  var handleFormSubmit = function (event) {
69
67
  event.preventDefault(); // To be closed with the open prop
@@ -79,47 +77,22 @@ var Frame = (0, react_1.forwardRef)(function Dialog(_a, ref) {
79
77
  // Detect escape key type
80
78
  if (event.target === dialogEl.current) {
81
79
  onClose && onClose(event);
82
- setClosing(false);
83
80
  }
84
81
  };
85
- var handleAnimationEnd = (0, react_1.useCallback)(function (event) {
86
- if (dialogEl.current &&
87
- event.animationName === FADE_OUT_ANIMATION &&
88
- !event.pseudoElement // To exclude ::backdrop
89
- ) {
90
- dialogEl.current.close && dialogEl.current.close();
91
- setClosing(false);
92
- }
93
- }, [dialogEl]);
94
- (0, react_1.useEffect)(function () {
95
- var dialog = dialogEl.current;
96
- dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener('animationend', handleAnimationEnd, false);
97
- return function () {
98
- return dialog === null || dialog === void 0 ? void 0 : dialog.removeEventListener('animationend', handleAnimationEnd, false);
99
- };
100
- }, [dialogEl, handleAnimationEnd]);
101
82
  (0, react_1.useEffect)(function () {
102
- var _a;
83
+ var _a, _b;
103
84
  var dialog = dialogEl.current;
104
85
  if (!dialog) {
105
86
  return;
106
87
  }
107
- // Remove this when browsers support :has() pseudo-class
108
- var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
109
88
  if (open) {
110
89
  !dialog.open && ((_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog));
111
- document.documentElement.classList.add(classNameToStopScrollBehindDialog);
112
90
  }
113
91
  else {
114
- (dialog === null || dialog === void 0 ? void 0 : dialog.open) && setClosing(true);
115
- // Always remove this class to avoid unexpected scroll stopping
116
- document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
92
+ (dialog === null || dialog === void 0 ? void 0 : dialog.open) && ((_b = dialog.close) === null || _b === void 0 ? void 0 : _b.call(dialog));
117
93
  }
118
94
  }, [open, dialogEl]);
119
- return (react_1.default.createElement("dialog", __assign({ ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), className: [BLOCK_NAME, closing && "".concat(BLOCK_NAME, "--closing"), className]
120
- .filter(Boolean)
121
- .join(' ')
122
- .trim(), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
95
+ return (react_1.default.createElement("dialog", __assign({ ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim(), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
123
96
  react_1.default.createElement("form", { method: "dialog", onSubmit: handleFormSubmit }, children)));
124
97
  });
125
98
  var StyleOnly = function (_a) {
package/Dialog/Dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
package/Dialog/Dialog.mjs CHANGED
@@ -1,10 +1,8 @@
1
- import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
1
+ import React, { forwardRef, useEffect, useRef } from 'react';
2
2
  import { useMergeRefs } from 'use-callback-ref';
3
3
  import { ButtonGroup as Group } from "../ButtonGroup/index.mjs";
4
4
  const BLOCK_NAME = 'spui-Dialog';
5
- const FADE_OUT_ANIMATION = 'spui-Dialog-fade-out';
6
5
  const Frame = forwardRef(function Dialog({ children, className, open, onClose, ...rest }, ref) {
7
- const [closing, setClosing] = useState(false);
8
6
  const dialogEl = useRef(null);
9
7
  const handleFormSubmit = (event) => {
10
8
  event.preventDefault(); // To be closed with the open prop
@@ -20,44 +18,21 @@ const Frame = forwardRef(function Dialog({ children, className, open, onClose, .
20
18
  // Detect escape key type
21
19
  if (event.target === dialogEl.current) {
22
20
  onClose && onClose(event);
23
- setClosing(false);
24
21
  }
25
22
  };
26
- const handleAnimationEnd = useCallback((event) => {
27
- if (dialogEl.current &&
28
- event.animationName === FADE_OUT_ANIMATION &&
29
- !event.pseudoElement // To exclude ::backdrop
30
- ) {
31
- dialogEl.current.close && dialogEl.current.close();
32
- setClosing(false);
33
- }
34
- }, [dialogEl]);
35
- useEffect(() => {
36
- const dialog = dialogEl.current;
37
- dialog?.addEventListener('animationend', handleAnimationEnd, false);
38
- return () => dialog?.removeEventListener('animationend', handleAnimationEnd, false);
39
- }, [dialogEl, handleAnimationEnd]);
40
23
  useEffect(() => {
41
24
  const dialog = dialogEl.current;
42
25
  if (!dialog) {
43
26
  return;
44
27
  }
45
- // Remove this when browsers support :has() pseudo-class
46
- const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
47
28
  if (open) {
48
29
  !dialog.open && dialog.showModal?.();
49
- document.documentElement.classList.add(classNameToStopScrollBehindDialog);
50
30
  }
51
31
  else {
52
- dialog?.open && setClosing(true);
53
- // Always remove this class to avoid unexpected scroll stopping
54
- document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
32
+ dialog?.open && dialog.close?.();
55
33
  }
56
34
  }, [open, dialogEl]);
57
- return (React.createElement("dialog", { ref: useMergeRefs([dialogEl, ref]), className: [BLOCK_NAME, closing && `${BLOCK_NAME}--closing`, className]
58
- .filter(Boolean)
59
- .join(' ')
60
- .trim(), onClick: handleDialogClick, onClose: handleDialogClose, ...rest },
35
+ return (React.createElement("dialog", { ref: useMergeRefs([dialogEl, ref]), className: [BLOCK_NAME, className].filter(Boolean).join(' ').trim(), onClick: handleDialogClick, onClose: handleDialogClose, ...rest },
61
36
  React.createElement("form", { method: "dialog", onSubmit: handleFormSubmit }, children)));
62
37
  });
63
38
  const StyleOnly = ({ className, children }) => {
package/index.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --color-active-lighted-button
11
11
  );--Button--lighted-onHover-backgroundColor:var(--color-hover-lighted-button);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(
12
12
  --color-active-neutral-button
13
- );--Button--neutral-onHover-backgroundColor:var(--color-hover-neutral-button);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--color-active-danger-button);--Button--danger-onHover-backgroundColor:var(--color-hover-danger-button)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{outline:2px solid var(--Button-onFocus-outlineColor);outline-offset:1px}.spui-Button:focus:not(:focus-visible){outline:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding:8px 16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding:8px 16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding:6px 10px}.spui-Button--small:is(.spui-Button--outlined,.spui-Button--danger){padding-bottom:5px;padding-top:5px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color)}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color)}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color)}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color)}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color)}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button--iconstart .spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button--iconstart .spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button--iconstart .spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-Button--iconend{flex-direction:row-reverse}.spui-Button--iconend .spui-Button-icon--large{font-size:1.125em;margin-left:6px}.spui-Button--iconend .spui-Button-icon--medium{font-size:1.143em;margin-left:4px}.spui-Button--iconend .spui-Button-icon--small{font-size:1.077em;margin-left:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);padding:24px;position:fixed;width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8)}.spui-Dialog+.backdrop{background:rgba(0,0,0,.8)}.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation:spui-Dialog-fade-in .35s cubic-bezier(0,0,0,1)}.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop{animation:spui-Dialog-fade-out .15s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-Dialog--closing,.spui-Dialog--closing.spui-Dialog::backdrop,.spui-Dialog[open]:not(.spui-Dialog--closing),.spui-Dialog[open]:not(.spui-Dialog--closing).spui-Dialog::backdrop{animation-duration:.01s}}html:has(.spui-Dialog[open]){overflow:hidden}html.spui-Dialog--open{overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}.spui-Dialog--styleOnly{position:static}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}@keyframes spui-Dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-Dialog-fade-out{0%{opacity:1}to{opacity:0}}:root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual,.spui-DropDown-label:user-invalid .spui-DropDown-icon,.spui-DropDown-label:user-invalid .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}:root{--Radio-backGroundColor:var(--color-surface-primary)}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-label:focus-within:has(.spui-Radio-text:not(:empty)){box-shadow:0 0 0 2px var(--Radio-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Radio-label:focus-within:has(.spui-Radio-input:not(:focus-visible)){box-shadow:none}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;flex-shrink:0;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;height:24px;inset:-2px;position:absolute;width:24px}.spui-Radio-label:has(:not(.spui-Radio-text)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-label:has(.spui-Radio-text):has(:not(.spui-Radio-text:empty)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error,.spui-TextArea:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error,.spui-TextField:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;inset:-2px;position:absolute}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}.spui-ButtonSwitch{align-items:stretch;display:flex;flex-direction:row}.spui-ButtonSwitch-button{align-items:center;background-color:var(--color-surface-tertiary);border:none;border-radius:0;color:var(--color-text-medium-emphasis);display:inline-flex;flex:1;font-size:.8125em;gap:4px;justify-content:center;line-height:1.3;padding:8px 4px;position:relative;text-align:center;text-decoration:none;transition:font-weight .35s ease,color .35s ease,background-color .15s ease;white-space:nowrap}.spui-ButtonSwitch-button:hover{background-color:var(--color-hover-neutral-button)}.spui-ButtonSwitch-button[aria-pressed=true]{background-color:var(--color-surface-accent-primary);font-weight:700}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-icon{color:var(--color-object-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-label{color:var(--color-text-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true]:hover{background-color:var(--color-hover-contained-button)}.spui-ButtonSwitch-button:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:2px}.spui-ButtonSwitch-button:first-child{border-bottom-left-radius:6px;border-top-left-radius:6px}.spui-ButtonSwitch-button:last-child{border-bottom-right-radius:6px;border-top-right-radius:6px}.spui-ButtonSwitch-button+.spui-ButtonSwitch-button:after{background-color:var(--color-border-low-emphasis);content:"";height:100%;left:-.5px;position:absolute;top:0;width:1px}.spui-ButtonSwitch-icon{flex-shrink:0}.spui-ButtonSwitch-label{margin:0;white-space:break-spaces}.spui-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none;width:17.5em}.spui-HeroCarouselItem-link:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarouselItem-link:focus:not(:focus-visible){outline:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}.spui-HeroCarousel-container{align-items:center;display:flex;height:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarousel-control:focus:not(:focus-visible){outline:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
13
+ );--Button--neutral-onHover-backgroundColor:var(--color-hover-neutral-button);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--color-active-danger-button);--Button--danger-onHover-backgroundColor:var(--color-hover-danger-button)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{outline:2px solid var(--Button-onFocus-outlineColor);outline-offset:1px}.spui-Button:focus:not(:focus-visible){outline:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding:8px 16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding:8px 16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding:6px 10px}.spui-Button--small:is(.spui-Button--outlined,.spui-Button--danger){padding-bottom:5px;padding-top:5px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color)}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color)}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color)}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color)}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color)}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button--iconstart .spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button--iconstart .spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button--iconstart .spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-Button--iconend{flex-direction:row-reverse}.spui-Button--iconend .spui-Button-icon--large{font-size:1.125em;margin-left:6px}.spui-Button--iconend .spui-Button-icon--medium{font-size:1.143em;margin-left:4px}.spui-Button--iconend .spui-Button-icon--small{font-size:1.077em;margin-left:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);opacity:0;padding:24px;position:fixed;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1);width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8);opacity:0;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1)}.spui-Dialog[open]{opacity:1}.spui-Dialog[open]::backdrop{opacity:1}@starting-style{.spui-Dialog[open]{opacity:0}.spui-Dialog[open]::backdrop{opacity:0}}.spui-Dialog:not([open]),.spui-Dialog:not([open])::backdrop{transition-duration:.15s}@media (prefers-reduced-motion:reduce){.spui-Dialog,.spui-Dialog::backdrop{transition-duration:1ms}}html:has(.spui-Dialog:modal){overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}.spui-Dialog--styleOnly{opacity:1;position:static}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}:root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual,.spui-DropDown-label:user-invalid .spui-DropDown-icon,.spui-DropDown-label:user-invalid .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}:root{--Radio-backGroundColor:var(--color-surface-primary)}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-label:focus-within:has(.spui-Radio-text:not(:empty)){box-shadow:0 0 0 2px var(--Radio-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Radio-label:focus-within:has(.spui-Radio-input:not(:focus-visible)){box-shadow:none}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;flex-shrink:0;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;height:24px;inset:-2px;position:absolute;width:24px}.spui-Radio-label:has(:not(.spui-Radio-text)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-label:has(.spui-Radio-text):has(:not(.spui-Radio-text:empty)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error,.spui-TextArea:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error,.spui-TextField:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;inset:-2px;position:absolute}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}.spui-ButtonSwitch{align-items:stretch;display:flex;flex-direction:row}.spui-ButtonSwitch-button{align-items:center;background-color:var(--color-surface-tertiary);border:none;border-radius:0;color:var(--color-text-medium-emphasis);display:inline-flex;flex:1;font-size:.8125em;gap:4px;justify-content:center;line-height:1.3;padding:8px 4px;position:relative;text-align:center;text-decoration:none;transition:font-weight .35s ease,color .35s ease,background-color .15s ease;white-space:nowrap}.spui-ButtonSwitch-button:hover{background-color:var(--color-hover-neutral-button)}.spui-ButtonSwitch-button[aria-pressed=true]{background-color:var(--color-surface-accent-primary);font-weight:700}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-icon{color:var(--color-object-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-label{color:var(--color-text-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true]:hover{background-color:var(--color-hover-contained-button)}.spui-ButtonSwitch-button:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:2px}.spui-ButtonSwitch-button:first-child{border-bottom-left-radius:6px;border-top-left-radius:6px}.spui-ButtonSwitch-button:last-child{border-bottom-right-radius:6px;border-top-right-radius:6px}.spui-ButtonSwitch-button+.spui-ButtonSwitch-button:after{background-color:var(--color-border-low-emphasis);content:"";height:100%;left:-.5px;position:absolute;top:0;width:1px}.spui-ButtonSwitch-icon{flex-shrink:0}.spui-ButtonSwitch-label{margin:0;white-space:break-spaces}.spui-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none;width:17.5em}.spui-HeroCarouselItem-link:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarouselItem-link:focus:not(:focus-visible){outline:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}.spui-HeroCarousel-container{align-items:center;display:flex;height:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarousel-control:focus:not(:focus-visible){outline:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
14
14
  --color-surface-accent-primary-light
15
15
  );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-outlineColor:var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(
16
16
  --color-surface-accent-primary-light
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openameba/spindle-ui",
3
- "version": "2.6.3",
3
+ "version": "2.7.0",
4
4
  "main": "./index.js",
5
5
  "module": "./index.mjs",
6
6
  "types": "./index.d.ts",
@@ -102,7 +102,7 @@
102
102
  "reg-publish-gcs-plugin": "0.14.4",
103
103
  "reg-suit": "0.14.5",
104
104
  "scaffdog": "4.1.0",
105
- "storybook": "^8.6.14",
105
+ "storybook": "8.6.14",
106
106
  "stylelint": "^16.0.0",
107
107
  "stylelint-config-prettier": "^9.0.0",
108
108
  "stylelint-config-standard": "^39.0.0",