@bigtablet/design-system 3.8.0 → 3.10.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/README.md +3 -1
- package/dist/index.css +76 -0
- package/dist/index.d.ts +21 -7
- package/dist/index.js +15 -3
- package/dist/vanilla/bigtablet.min.css +1 -1
- package/dist/vanilla/bigtablet.min.js +16 -16
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Crafted for clarity. Built on tokens. Ships with dark mode.
|
|
|
18
18
|
<a href="https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/Bigtablet/bigtablet-design-system/ci.yml?style=for-the-badge&color=10b981&labelColor=000" alt="ci" /></a>
|
|
19
19
|
</p>
|
|
20
20
|
|
|
21
|
-
[**Documentation**](./docs/COMPONENTS.md) · [Storybook](
|
|
21
|
+
[**Documentation**](./docs/COMPONENTS.md) · [Storybook](https://bigtablet.github.io/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [🇰🇷 한국어](./README_KR.md)
|
|
22
22
|
|
|
23
23
|
</div>
|
|
24
24
|
|
|
@@ -170,6 +170,8 @@ pnpm test:storybook # a11y + Playwright
|
|
|
170
170
|
pnpm build # tsup + SCSS copy
|
|
171
171
|
```
|
|
172
172
|
|
|
173
|
+
The published Storybook lives at **[bigtablet.github.io/bigtablet-design-system](https://bigtablet.github.io/bigtablet-design-system)** and redeploys from `main`.
|
|
174
|
+
|
|
173
175
|
<br />
|
|
174
176
|
|
|
175
177
|
## Documentation
|
package/dist/index.css
CHANGED
|
@@ -183,6 +183,38 @@
|
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
+
/* src/styles/autofill.scss */
|
|
187
|
+
input:-webkit-autofill,
|
|
188
|
+
input:-webkit-autofill:hover,
|
|
189
|
+
input:-webkit-autofill:focus,
|
|
190
|
+
input:-webkit-autofill:active,
|
|
191
|
+
textarea:-webkit-autofill,
|
|
192
|
+
select:-webkit-autofill {
|
|
193
|
+
-webkit-box-shadow: 0 0 0 1000px var(--bt-color-bg-solid) inset;
|
|
194
|
+
box-shadow: 0 0 0 1000px var(--bt-color-bg-solid) inset;
|
|
195
|
+
-webkit-text-fill-color: var(--bt-color-text-heading);
|
|
196
|
+
caret-color: var(--bt-color-text-heading);
|
|
197
|
+
}
|
|
198
|
+
.text_field_variant_filled input:-webkit-autofill {
|
|
199
|
+
-webkit-box-shadow: 0 0 0 1000px var(--bt-color-bg-solid-dim) inset;
|
|
200
|
+
box-shadow: 0 0 0 1000px var(--bt-color-bg-solid-dim) inset;
|
|
201
|
+
}
|
|
202
|
+
.text_field_variant_filled input:-webkit-autofill:focus {
|
|
203
|
+
-webkit-box-shadow: 0 0 0 1000px var(--bt-color-bg-solid) inset;
|
|
204
|
+
box-shadow: 0 0 0 1000px var(--bt-color-bg-solid) inset;
|
|
205
|
+
}
|
|
206
|
+
input:-webkit-autofill:disabled,
|
|
207
|
+
textarea:-webkit-autofill:disabled,
|
|
208
|
+
select:-webkit-autofill:disabled {
|
|
209
|
+
-webkit-box-shadow: 0 0 0 1000px var(--bt-color-bg-solid-dim) inset;
|
|
210
|
+
box-shadow: 0 0 0 1000px var(--bt-color-bg-solid-dim) inset;
|
|
211
|
+
-webkit-text-fill-color: var(--bt-color-text-disabled);
|
|
212
|
+
}
|
|
213
|
+
.text_field_container:has(input:-webkit-autofill),
|
|
214
|
+
.textarea_container:has(textarea:-webkit-autofill) {
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
}
|
|
217
|
+
|
|
186
218
|
/* src/ui/display/accordion/style.scss */
|
|
187
219
|
@keyframes skeleton_loading {
|
|
188
220
|
0% {
|
|
@@ -3714,6 +3746,20 @@
|
|
|
3714
3746
|
background-color: var(--bt-color-bg-solid-dim);
|
|
3715
3747
|
border-color: var(--bt-color-bg-disabled);
|
|
3716
3748
|
}
|
|
3749
|
+
.dropdown_variant_filled .dropdown_fieldset {
|
|
3750
|
+
border-color: transparent;
|
|
3751
|
+
background-color: var(--bt-color-bg-solid-dim);
|
|
3752
|
+
}
|
|
3753
|
+
.dropdown_variant_filled .dropdown_fieldset:hover:not(.is_open):not(.is_disabled) {
|
|
3754
|
+
border-color: var(--bt-color-border-hover);
|
|
3755
|
+
}
|
|
3756
|
+
.dropdown_variant_filled .dropdown_fieldset.is_open {
|
|
3757
|
+
border-color: var(--bt-color-border-focus);
|
|
3758
|
+
background-color: var(--bt-color-bg-solid);
|
|
3759
|
+
}
|
|
3760
|
+
.dropdown_variant_filled .dropdown_fieldset.is_disabled {
|
|
3761
|
+
border-color: transparent;
|
|
3762
|
+
}
|
|
3717
3763
|
.dropdown_label {
|
|
3718
3764
|
display: block;
|
|
3719
3765
|
font-size: 13px;
|
|
@@ -3965,6 +4011,9 @@
|
|
|
3965
4011
|
.dropdown_search_input {
|
|
3966
4012
|
transition: none;
|
|
3967
4013
|
}
|
|
4014
|
+
.dropdown_fieldset {
|
|
4015
|
+
transition: none;
|
|
4016
|
+
}
|
|
3968
4017
|
}
|
|
3969
4018
|
|
|
3970
4019
|
/* src/ui/forms/date-picker/style.scss */
|
|
@@ -4888,6 +4937,20 @@
|
|
|
4888
4937
|
color: var(--bt-color-text-caption);
|
|
4889
4938
|
transition: color 0.2s ease-in-out;
|
|
4890
4939
|
}
|
|
4940
|
+
.text_field_variant_filled .text_field_container {
|
|
4941
|
+
border-color: transparent;
|
|
4942
|
+
background-color: var(--bt-color-bg-solid-dim);
|
|
4943
|
+
}
|
|
4944
|
+
.text_field_variant_filled .text_field_container:hover {
|
|
4945
|
+
border-color: var(--bt-color-border-hover);
|
|
4946
|
+
}
|
|
4947
|
+
.text_field_variant_filled .text_field_container:focus-within {
|
|
4948
|
+
border-color: var(--bt-color-border-focus);
|
|
4949
|
+
background-color: var(--bt-color-bg-solid);
|
|
4950
|
+
}
|
|
4951
|
+
.text_field_disabled.text_field_variant_filled .text_field_container {
|
|
4952
|
+
border-color: transparent;
|
|
4953
|
+
}
|
|
4891
4954
|
.text_field_error .text_field_container {
|
|
4892
4955
|
border-color: var(--bt-color-status-error);
|
|
4893
4956
|
}
|
|
@@ -4901,6 +4964,19 @@
|
|
|
4901
4964
|
.text_field_error .text_field_helper {
|
|
4902
4965
|
color: var(--bt-color-status-error-on-surface);
|
|
4903
4966
|
}
|
|
4967
|
+
.text_field_success .text_field_container {
|
|
4968
|
+
border-color: var(--bt-color-status-success);
|
|
4969
|
+
}
|
|
4970
|
+
.text_field_success .text_field_container:hover,
|
|
4971
|
+
.text_field_success .text_field_container:focus-within {
|
|
4972
|
+
border-color: var(--bt-color-status-success);
|
|
4973
|
+
}
|
|
4974
|
+
.text_field_success .text_field_label {
|
|
4975
|
+
color: var(--bt-color-status-success-on-surface);
|
|
4976
|
+
}
|
|
4977
|
+
.text_field_success .text_field_helper {
|
|
4978
|
+
color: var(--bt-color-status-success-on-surface);
|
|
4979
|
+
}
|
|
4904
4980
|
.text_field_disabled .text_field_container {
|
|
4905
4981
|
border-color: var(--bt-color-bg-disabled);
|
|
4906
4982
|
background-color: var(--bt-color-bg-solid-dim);
|
package/dist/index.d.ts
CHANGED
|
@@ -1637,6 +1637,12 @@ type DatePickerProps = DatePickerBaseProps & DatePickerCallbacks;
|
|
|
1637
1637
|
declare const DatePicker: ({ label, value, onValueChange, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => React$1.JSX.Element;
|
|
1638
1638
|
|
|
1639
1639
|
type DropdownSize = "sm" | "md" | "lg";
|
|
1640
|
+
/**
|
|
1641
|
+
* 컨트롤 시각 변형. TextField 의 `variant` 와 같은 어휘를 쓴다.
|
|
1642
|
+
* - `outline`: 테두리로 컨트롤을 구분 (기본).
|
|
1643
|
+
* - `filled`: 테두리 대신 채워진 배경으로 구분, 열리면 배경이 solid 로 돌아오며 테두리가 드러남.
|
|
1644
|
+
*/
|
|
1645
|
+
type DropdownVariant = "outline" | "filled";
|
|
1640
1646
|
interface DropdownOption {
|
|
1641
1647
|
value: string;
|
|
1642
1648
|
label: string;
|
|
@@ -1670,10 +1676,8 @@ interface DropdownCommonProps {
|
|
|
1670
1676
|
fullWidth?: boolean;
|
|
1671
1677
|
/** 루트 요소에 추가할 className */
|
|
1672
1678
|
className?: string;
|
|
1673
|
-
/**
|
|
1674
|
-
|
|
1675
|
-
*/
|
|
1676
|
-
variant?: "outline" | "filled" | "ghost";
|
|
1679
|
+
/** 컨트롤 시각 변형 (기본값: "outline") */
|
|
1680
|
+
variant?: DropdownVariant;
|
|
1677
1681
|
/**
|
|
1678
1682
|
* @deprecated textAlign은 더 이상 지원되지 않습니다.
|
|
1679
1683
|
*/
|
|
@@ -1963,6 +1967,12 @@ declare const RadioGroup: {
|
|
|
1963
1967
|
};
|
|
1964
1968
|
|
|
1965
1969
|
type TextFieldSize = "sm" | "md" | "lg";
|
|
1970
|
+
/**
|
|
1971
|
+
* 입력 필드 시각 변형.
|
|
1972
|
+
* - `outline`: 테두리로 입력 영역을 구분 (기본).
|
|
1973
|
+
* - `filled`: 테두리 대신 채워진 배경으로 구분, 포커스 시 배경이 solid 로 돌아오며 테두리가 드러남.
|
|
1974
|
+
*/
|
|
1975
|
+
type TextFieldVariant = "outline" | "filled";
|
|
1966
1976
|
/**
|
|
1967
1977
|
* IME 조합(한글/일본어/중국어) 중 외부 콜백 처리 전략.
|
|
1968
1978
|
* - `delayed`: 조합 완료 후에만 `onChangeAction` 호출 (기본 - 폼 제출/검증용).
|
|
@@ -1972,14 +1982,18 @@ type ImeStrategy = "delayed" | "immediate";
|
|
|
1972
1982
|
interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
|
|
1973
1983
|
/** 입력 필드 크기 (기본값: "md") */
|
|
1974
1984
|
size?: TextFieldSize;
|
|
1985
|
+
/** 입력 필드 시각 변형 (기본값: "outline") */
|
|
1986
|
+
variant?: TextFieldVariant;
|
|
1975
1987
|
/** 입력 필드 위에 표시할 라벨 텍스트 */
|
|
1976
1988
|
label?: string;
|
|
1977
1989
|
/** 라벨 표시 여부 (기본값: true) */
|
|
1978
1990
|
showLabel?: boolean;
|
|
1979
1991
|
/** 입력 필드 아래에 표시할 도움말 텍스트 */
|
|
1980
1992
|
supportingText?: string;
|
|
1981
|
-
/** 에러 상태
|
|
1993
|
+
/** 에러 상태 여부. `success` 와 동시에 지정되면 `error` 가 우선한다. */
|
|
1982
1994
|
error?: boolean;
|
|
1995
|
+
/** 성공(검증 통과) 상태 여부. `error` 가 true 면 무시된다. */
|
|
1996
|
+
success?: boolean;
|
|
1983
1997
|
/** 입력 필드 왼쪽에 표시할 아이콘 */
|
|
1984
1998
|
leadingIcon?: React$1.ReactNode;
|
|
1985
1999
|
/** 입력 필드 오른쪽에 표시할 아이콘 */
|
|
@@ -2014,7 +2028,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
2014
2028
|
* @returns 렌더링된 텍스트 필드 UI
|
|
2015
2029
|
*/
|
|
2016
2030
|
declare const TextField: {
|
|
2017
|
-
({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
|
|
2031
|
+
({ id, label, showLabel, supportingText, error, success, leadingIcon, trailingIcon, clearable, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
|
|
2018
2032
|
displayName: string;
|
|
2019
2033
|
};
|
|
2020
2034
|
|
|
@@ -2509,4 +2523,4 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2509
2523
|
*/
|
|
2510
2524
|
declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, ref, className, children, style, ...props }: StackProps) => React$1.JSX.Element;
|
|
2511
2525
|
|
|
2512
|
-
export { Accordion, type AccordionItem, type AccordionProps, type AlertActionsAlign, type AlertOptions, AlertProvider, type AlertVariant, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchor, type ButtonAsButton, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, type CropImageSize, type CropOffset, type CropRect, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownMultipleProps, type DropdownOption, type DropdownProps, type DropdownSingleProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, type FileInputVariant, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, ImageCropper, type ImageCropperHandle, type ImageCropperProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalFooterAlign, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupContextValue, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
|
|
2526
|
+
export { Accordion, type AccordionItem, type AccordionProps, type AlertActionsAlign, type AlertOptions, AlertProvider, type AlertVariant, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchor, type ButtonAsButton, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, type CropImageSize, type CropOffset, type CropRect, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownMultipleProps, type DropdownOption, type DropdownProps, type DropdownSingleProps, type DropdownSize, type DropdownVariant, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, type FileInputVariant, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, ImageCropper, type ImageCropperHandle, type ImageCropperProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalFooterAlign, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupContextValue, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
|
package/dist/index.js
CHANGED
|
@@ -3016,6 +3016,7 @@ var Dropdown = (props) => {
|
|
|
3016
3016
|
options,
|
|
3017
3017
|
disabled,
|
|
3018
3018
|
size = "md",
|
|
3019
|
+
variant = "outline",
|
|
3019
3020
|
className,
|
|
3020
3021
|
searchable = false,
|
|
3021
3022
|
searchPlaceholder = "\uAC80\uC0C9\u2026",
|
|
@@ -3228,7 +3229,12 @@ var Dropdown = (props) => {
|
|
|
3228
3229
|
const hasSelection = selectedValues.length > 0;
|
|
3229
3230
|
const showValue = multiple ? hasSelection : currentOption != null;
|
|
3230
3231
|
const controlText = multiple ? hasSelection ? selectedSummary(selectedValues.length) : placeholder : currentOption ? currentOption.label : placeholder;
|
|
3231
|
-
const rootClassName = cn(
|
|
3232
|
+
const rootClassName = cn(
|
|
3233
|
+
"dropdown",
|
|
3234
|
+
`dropdown_size_${size}`,
|
|
3235
|
+
`dropdown_variant_${variant}`,
|
|
3236
|
+
className
|
|
3237
|
+
);
|
|
3232
3238
|
const fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
|
|
3233
3239
|
const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
|
|
3234
3240
|
const listStyle = useSpringPresence({
|
|
@@ -4375,11 +4381,13 @@ var TextField = ({
|
|
|
4375
4381
|
showLabel = true,
|
|
4376
4382
|
supportingText,
|
|
4377
4383
|
error,
|
|
4384
|
+
success,
|
|
4378
4385
|
leadingIcon,
|
|
4379
4386
|
trailingIcon,
|
|
4380
4387
|
clearable,
|
|
4381
4388
|
fullWidth,
|
|
4382
4389
|
size = "md",
|
|
4390
|
+
variant = "outline",
|
|
4383
4391
|
className,
|
|
4384
4392
|
onValueChange,
|
|
4385
4393
|
onChangeAction,
|
|
@@ -4420,12 +4428,16 @@ var TextField = ({
|
|
|
4420
4428
|
const handleClear = useCallback(() => {
|
|
4421
4429
|
emit("");
|
|
4422
4430
|
}, [emit]);
|
|
4431
|
+
const isError = !!error;
|
|
4432
|
+
const isSuccess = !!success && !isError;
|
|
4423
4433
|
const rootClassName = cn(
|
|
4424
4434
|
"text_field",
|
|
4435
|
+
`text_field_variant_${variant}`,
|
|
4425
4436
|
size === "sm" && "text_field_size_sm",
|
|
4426
4437
|
size === "lg" && "text_field_size_lg",
|
|
4427
4438
|
fullWidth && "text_field_full_width",
|
|
4428
|
-
|
|
4439
|
+
isError && "text_field_error",
|
|
4440
|
+
isSuccess && "text_field_success",
|
|
4429
4441
|
props.disabled && "text_field_disabled",
|
|
4430
4442
|
className
|
|
4431
4443
|
);
|
|
@@ -4447,7 +4459,7 @@ var TextField = ({
|
|
|
4447
4459
|
id: inputId,
|
|
4448
4460
|
ref,
|
|
4449
4461
|
className: "text_field_input",
|
|
4450
|
-
"aria-invalid":
|
|
4462
|
+
"aria-invalid": isError,
|
|
4451
4463
|
"aria-describedby": helperId,
|
|
4452
4464
|
"aria-label": !showLabel ? label : void 0,
|
|
4453
4465
|
...props,
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
*
|
|
5
5
|
* @license Bigtablet Inc. Open Source License - see LICENSE at the repo root
|
|
6
6
|
* (https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)
|
|
7
|
-
*/@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-brand-primary: #121212;--bt-color-brand-on-primary: #FFFFFF;--bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #6F6F6F;--bt-color-text-brand: #121212;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-bg-solid: #FFFFFF;--bt-color-bg-solid-dim: #F4F4F4;--bt-color-bg-additive: rgba(0, 0, 0, 0.05);--bt-color-bg-disabled: rgba(26, 26, 26, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.5);--bt-color-bg-inverse-surface: #333333;--bt-color-state-hover-on-light: rgba(0, 0, 0, 0.05);--bt-color-state-pressed-on-light: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-light: rgba(0, 0, 0, 0.08);--bt-color-state-hover-on-dark: rgba(255, 255, 255, 0.05);--bt-color-state-pressed-on-dark: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-dark: rgba(255, 255, 255, 0.08);--bt-color-border-default: #E5E5E5;--bt-color-border-hover: #B3B3B3;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-border-disabled: #F2F2F2;--bt-color-status-error: #B91C1C;--bt-color-status-success: #047857;--bt-color-status-warning: #B45309;--bt-color-status-info: #1D4ED8;--bt-color-status-error-on-default: #FFFFFF;--bt-color-status-success-on-default: #FFFFFF;--bt-color-status-warning-on-default: #FFFFFF;--bt-color-status-info-on-default: #FFFFFF;--bt-color-status-error-container: #FEE2E2;--bt-color-status-success-container: #DCFCE7;--bt-color-status-warning-container: #FEF3C7;--bt-color-status-info-container: #DBEAFE;--bt-color-status-error-on-container: #B91C1C;--bt-color-status-success-on-container: #047857;--bt-color-status-warning-on-container: #B45309;--bt-color-status-info-on-container: #1D4ED8;--bt-color-status-error-on-surface: #B91C1C;--bt-color-status-success-on-surface: #047857;--bt-color-status-warning-on-surface: #B45309;--bt-color-status-info-on-surface: #1D4ED8;--bt-color-accent-subtle: rgba(0, 0, 0, 0.05);--bt-color-accent-muted: rgba(26, 26, 26, 0.12);--bt-color-accent-light: #B3B3B3;--bt-color-accent-default: #121212;--bt-color-accent-strong: #121212;--bt-color-accent-on-surface: #FFFFFF;--bt-color-skeleton-base: #F3F3F3;--bt-color-skeleton-wave: #F0F0F0;--bt-color-skeleton-highlight: #FAFAFA;--bt-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.30);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.30);--bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)}[data-theme=dark]{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B3B3B3;--bt-color-text-caption: #808080;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #0A0A0A;--bt-color-bg-solid-dim: #141414;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #333333;--bt-color-border-hover: #777777;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #141414;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-status-error-container: rgba(127, 29, 29, 0.35);--bt-color-status-success-container: rgba(6, 78, 59, 0.35);--bt-color-status-warning-container: rgba(120, 53, 15, 0.35);--bt-color-status-info-container: rgba(30, 58, 138, 0.35);--bt-color-status-error-on-container: #FCA5A5;--bt-color-status-success-on-container: #86EFAC;--bt-color-status-warning-on-container: #FCD34D;--bt-color-status-info-on-container: #93C5FD;--bt-color-status-error-on-surface: #F87171;--bt-color-status-success-on-surface: #4ADE80;--bt-color-status-warning-on-surface: #FBBF24;--bt-color-status-info-on-surface: #60A5FA;--bt-color-skeleton-base: #333333;--bt-color-skeleton-wave: #333333;--bt-color-skeleton-highlight: #666666;--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}@media(prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B3B3B3;--bt-color-text-caption: #808080;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #0A0A0A;--bt-color-bg-solid-dim: #141414;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #333333;--bt-color-border-hover: #777777;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #141414;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-status-error-container: rgba(127, 29, 29, 0.35);--bt-color-status-success-container: rgba(6, 78, 59, 0.35);--bt-color-status-warning-container: rgba(120, 53, 15, 0.35);--bt-color-status-info-container: rgba(30, 58, 138, 0.35);--bt-color-status-error-on-container: #FCA5A5;--bt-color-status-success-on-container: #86EFAC;--bt-color-status-warning-on-container: #FCD34D;--bt-color-status-info-on-container: #93C5FD;--bt-color-status-error-on-surface: #F87171;--bt-color-status-success-on-surface: #4ADE80;--bt-color-status-warning-on-surface: #FBBF24;--bt-color-status-info-on-surface: #60A5FA;--bt-color-skeleton-base: #333333;--bt-color-skeleton-wave: #333333;--bt-color-skeleton-highlight: #666666;--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}}:root{--bt-color-primary: var(--bt-color-brand-primary);--bt-color-on-primary: var(--bt-color-brand-on-primary);--bt-color-accent: var(--bt-color-accent-default);--bt-color-primary-container: var(--bt-color-brand-primary-container);--bt-color-background: var(--bt-color-bg-solid);--bt-color-background-dim: var(--bt-color-bg-solid-dim);--bt-color-background-overlay: var(--bt-color-bg-overlay);--bt-color-border: var(--bt-color-border-default);--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: var(--bt-color-border-hover);--bt-color-hover: var(--bt-color-state-hover-on-light);--bt-color-pressed: var(--bt-color-state-pressed-on-light);--bt-color-primary-hover: #333333;--bt-color-overlay: var(--bt-color-bg-overlay);--bt-color-success: var(--bt-color-status-success);--bt-color-error: var(--bt-color-status-error);--bt-color-warning: var(--bt-color-status-warning);--bt-color-info: var(--bt-color-status-info);--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-none: 0px;--bt-radius-xs: 4px;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-xl: 16px;--bt-radius-full: 9999px;--bt-elevation-1: var(--bt-elevation-level1);--bt-elevation-2: var(--bt-elevation-level2);--bt-elevation-3: var(--bt-elevation-level3);--bt-elevation-4: var(--bt-elevation-level4);--bt-elevation-5: var(--bt-elevation-level5);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-full);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--xl{padding:var(--bt-spacing-xl) var(--bt-spacing-3xl);font-size:var(--bt-font-size-lg)}.bt-button--filled{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-button--filled:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-accent) 88%, var(--bt-color-accent-on-surface))}.bt-button--filled:active:not(:disabled){transform:scale(0.98)}.bt-button--tonal{background:var(--bt-color-primary-container);color:var(--bt-color-text-primary)}.bt-button--tonal:hover:not(:disabled){background-image:linear-gradient(var(--bt-color-hover), var(--bt-color-hover))}.bt-button--tonal:active:not(:disabled){background-image:linear-gradient(var(--bt-color-pressed), var(--bt-color-pressed));transform:scale(0.98)}.bt-button--outline{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--outline:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--outline:active:not(:disabled){transform:scale(0.98)}.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--text:hover:not(:disabled){background:var(--bt-color-hover)}.bt-button--text:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-on-primary)}.bt-button--danger:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 88%, #000)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--radius-none{border-radius:var(--bt-radius-none)}.bt-button--radius-xs{border-radius:var(--bt-radius-xs)}.bt-button--radius-sm{border-radius:var(--bt-radius-sm)}.bt-button--radius-md{border-radius:var(--bt-radius-md)}.bt-button--radius-lg{border-radius:var(--bt-radius-lg)}.bt-button--radius-xl{border-radius:var(--bt-radius-xl)}.bt-button--radius-full{border-radius:var(--bt-radius-full)}.bt-button--full-width{width:100%}.bt-button--danger.bt-button--outline{background:rgba(0,0,0,0);border-color:var(--bt-color-error);color:var(--bt-color-error)}.bt-button--danger.bt-button--outline:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.bt-button--danger.bt-button--tonal{background:color-mix(in srgb, var(--bt-color-error) 12%, transparent);color:var(--bt-color-error)}.bt-button--danger.bt-button--tonal:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 18%, transparent)}.bt-button--danger.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-error)}.bt-button--danger.bt-button--text:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-accent);background:var(--bt-color-background);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-accent);border-color:var(--bt-color-accent)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-accent-on-surface);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-accent);border-width:2px}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-accent);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border-light);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-toggle__thumb{width:12px;height:12px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base),width var(--bt-transition-base),height var(--bt-transition-base);transform:translateX(0)}.bt-toggle--on{background:var(--bt-color-accent)}.bt-toggle--on .bt-toggle__thumb{width:20px;height:20px;background:var(--bt-color-accent-on-surface);transform:translateX(16px)}.bt-toggle--sm{width:40px;height:24px}.bt-toggle--md{width:48px;height:28px}.bt-toggle--md .bt-toggle__thumb{width:16px;height:16px}.bt-toggle--md.bt-toggle--on .bt-toggle__thumb{width:24px;height:24px;transform:translateX(20px)}.bt-toggle:disabled{cursor:not-allowed;background:var(--bt-color-border-light)}.bt-toggle:disabled .bt-toggle__thumb{background:#fff}.bt-dropdown{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-dropdown__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-dropdown__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-dropdown__control:disabled,.bt-dropdown__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-dropdown__control--outline{border:1px solid var(--bt-color-border)}.bt-dropdown__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-dropdown__control--outline.is-open{border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-dropdown__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-dropdown__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-dropdown__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-dropdown__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-dropdown__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-dropdown__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-dropdown__icon.is-open{transform:rotate(180deg)}.bt-dropdown__list{display:none;position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-2);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-dropdown__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-dropdown__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-dropdown__option:hover,.bt-dropdown__option.is-active{background:var(--bt-color-background-secondary)}.bt-dropdown__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-dropdown__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{position:relative;background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-3);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);padding-right:calc(var(--bt-spacing-lg) + 32px);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__close{position:absolute;top:var(--bt-spacing-md);right:var(--bt-spacing-md);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:rgba(0,0,0,0);color:var(--bt-color-text-tertiary);border-radius:var(--bt-radius-md);cursor:pointer;transition:background var(--bt-transition-fast),color var(--bt-transition-fast)}.bt-modal__close:hover{background:var(--bt-color-hover);color:var(--bt-color-text-primary)}.bt-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-elevation-4);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-1);padding:var(--bt-spacing-lg);transition:transform var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-none{box-shadow:none}.bt-card--shadow-sm{box-shadow:var(--bt-elevation-1)}.bt-card--shadow-md{box-shadow:var(--bt-elevation-2)}.bt-card--shadow-lg{box-shadow:var(--bt-elevation-3)}.bt-card--p-none{padding:0}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card--accent{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__title{color:var(--bt-color-accent-on-surface)}.bt-card--outlined{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);box-shadow:none}.bt-card--glass{background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,.08);color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__title{color:var(--bt-color-on-primary)}[data-theme=dark] .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}@media(prefers-color-scheme: dark){:root:not([data-theme]) .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}}.bt-card--interactive{cursor:pointer}.bt-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--bt-elevation-2)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;width:var(--bt-spinner-size, 24px);height:var(--bt-spinner-size, 24px);border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-accent);animation:bt-spinner-spin .8s linear infinite}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-accent);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-3)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media(prefers-reduced-motion: reduce){:root{--bt-transition-fast: 0s;--bt-transition-base: 0s;--bt-transition-slow: 0s}.bt-alert__overlay,.bt-alert__modal{animation:none}.bt-card--interactive:hover{transform:none}.bt-spinner{animation-duration:2.4s}}
|
|
7
|
+
*/@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-brand-primary: #121212;--bt-color-brand-on-primary: #FFFFFF;--bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #6F6F6F;--bt-color-text-brand: #121212;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-bg-solid: #FFFFFF;--bt-color-bg-solid-dim: #F4F4F4;--bt-color-bg-additive: rgba(0, 0, 0, 0.05);--bt-color-bg-disabled: rgba(26, 26, 26, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.5);--bt-color-bg-inverse-surface: #333333;--bt-color-state-hover-on-light: rgba(0, 0, 0, 0.05);--bt-color-state-pressed-on-light: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-light: rgba(0, 0, 0, 0.08);--bt-color-state-hover-on-dark: rgba(255, 255, 255, 0.05);--bt-color-state-pressed-on-dark: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-dark: rgba(255, 255, 255, 0.08);--bt-color-border-default: #E5E5E5;--bt-color-border-hover: #B3B3B3;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-border-disabled: #F2F2F2;--bt-color-status-error: #B91C1C;--bt-color-status-success: #047857;--bt-color-status-warning: #B45309;--bt-color-status-info: #1D4ED8;--bt-color-status-error-on-default: #FFFFFF;--bt-color-status-success-on-default: #FFFFFF;--bt-color-status-warning-on-default: #FFFFFF;--bt-color-status-info-on-default: #FFFFFF;--bt-color-status-error-container: #FEE2E2;--bt-color-status-success-container: #DCFCE7;--bt-color-status-warning-container: #FEF3C7;--bt-color-status-info-container: #DBEAFE;--bt-color-status-error-on-container: #B91C1C;--bt-color-status-success-on-container: #047857;--bt-color-status-warning-on-container: #B45309;--bt-color-status-info-on-container: #1D4ED8;--bt-color-status-error-on-surface: #B91C1C;--bt-color-status-success-on-surface: #047857;--bt-color-status-warning-on-surface: #B45309;--bt-color-status-info-on-surface: #1D4ED8;--bt-color-accent-subtle: rgba(0, 0, 0, 0.05);--bt-color-accent-muted: rgba(26, 26, 26, 0.12);--bt-color-accent-light: #B3B3B3;--bt-color-accent-default: #121212;--bt-color-accent-strong: #121212;--bt-color-accent-on-surface: #FFFFFF;--bt-color-skeleton-base: #F3F3F3;--bt-color-skeleton-wave: #F0F0F0;--bt-color-skeleton-highlight: #FAFAFA;--bt-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.30);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.30);--bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)}[data-theme=dark]{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B3B3B3;--bt-color-text-caption: #808080;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #0A0A0A;--bt-color-bg-solid-dim: #141414;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #333333;--bt-color-border-hover: #777777;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #141414;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-status-error-container: rgba(127, 29, 29, 0.35);--bt-color-status-success-container: rgba(6, 78, 59, 0.35);--bt-color-status-warning-container: rgba(120, 53, 15, 0.35);--bt-color-status-info-container: rgba(30, 58, 138, 0.35);--bt-color-status-error-on-container: #FCA5A5;--bt-color-status-success-on-container: #86EFAC;--bt-color-status-warning-on-container: #FCD34D;--bt-color-status-info-on-container: #93C5FD;--bt-color-status-error-on-surface: #F87171;--bt-color-status-success-on-surface: #4ADE80;--bt-color-status-warning-on-surface: #FBBF24;--bt-color-status-info-on-surface: #60A5FA;--bt-color-skeleton-base: #333333;--bt-color-skeleton-wave: #333333;--bt-color-skeleton-highlight: #666666;--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}@media(prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B3B3B3;--bt-color-text-caption: #808080;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #0A0A0A;--bt-color-bg-solid-dim: #141414;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #333333;--bt-color-border-hover: #777777;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #141414;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-status-error-container: rgba(127, 29, 29, 0.35);--bt-color-status-success-container: rgba(6, 78, 59, 0.35);--bt-color-status-warning-container: rgba(120, 53, 15, 0.35);--bt-color-status-info-container: rgba(30, 58, 138, 0.35);--bt-color-status-error-on-container: #FCA5A5;--bt-color-status-success-on-container: #86EFAC;--bt-color-status-warning-on-container: #FCD34D;--bt-color-status-info-on-container: #93C5FD;--bt-color-status-error-on-surface: #F87171;--bt-color-status-success-on-surface: #4ADE80;--bt-color-status-warning-on-surface: #FBBF24;--bt-color-status-info-on-surface: #60A5FA;--bt-color-skeleton-base: #333333;--bt-color-skeleton-wave: #333333;--bt-color-skeleton-highlight: #666666;--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}}:root{--bt-color-primary: var(--bt-color-brand-primary);--bt-color-on-primary: var(--bt-color-brand-on-primary);--bt-color-accent: var(--bt-color-accent-default);--bt-color-primary-container: var(--bt-color-brand-primary-container);--bt-color-background: var(--bt-color-bg-solid);--bt-color-background-dim: var(--bt-color-bg-solid-dim);--bt-color-background-overlay: var(--bt-color-bg-overlay);--bt-color-border: var(--bt-color-border-default);--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: var(--bt-color-border-hover);--bt-color-hover: var(--bt-color-state-hover-on-light);--bt-color-hover-on-dark: var(--bt-color-state-hover-on-dark);--bt-color-pressed: var(--bt-color-state-pressed-on-light);--bt-color-primary-hover: #333333;--bt-color-overlay: var(--bt-color-bg-overlay);--bt-color-success: var(--bt-color-status-success);--bt-color-error: var(--bt-color-status-error);--bt-color-warning: var(--bt-color-status-warning);--bt-color-info: var(--bt-color-status-info);--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-none: 0px;--bt-radius-xs: 4px;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-xl: 16px;--bt-radius-full: 9999px;--bt-elevation-1: var(--bt-elevation-level1);--bt-elevation-2: var(--bt-elevation-level2);--bt-elevation-3: var(--bt-elevation-level3);--bt-elevation-4: var(--bt-elevation-level4);--bt-elevation-5: var(--bt-elevation-level5);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-full);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--xl{padding:var(--bt-spacing-xl) var(--bt-spacing-3xl);font-size:var(--bt-font-size-lg)}.bt-button--filled{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-button--filled:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-accent) 88%, var(--bt-color-accent-on-surface))}.bt-button--filled:active:not(:disabled){transform:scale(0.98)}.bt-button--tonal{background:var(--bt-color-primary-container);color:var(--bt-color-text-primary)}.bt-button--tonal:hover:not(:disabled){background-image:linear-gradient(var(--bt-color-hover), var(--bt-color-hover))}.bt-button--tonal:active:not(:disabled){background-image:linear-gradient(var(--bt-color-pressed), var(--bt-color-pressed));transform:scale(0.98)}.bt-button--outline{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--outline:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--outline:active:not(:disabled){transform:scale(0.98)}.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--text:hover:not(:disabled){background:var(--bt-color-hover)}.bt-button--text:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-on-primary)}.bt-button--danger:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 88%, #000)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--radius-none{border-radius:var(--bt-radius-none)}.bt-button--radius-xs{border-radius:var(--bt-radius-xs)}.bt-button--radius-sm{border-radius:var(--bt-radius-sm)}.bt-button--radius-md{border-radius:var(--bt-radius-md)}.bt-button--radius-lg{border-radius:var(--bt-radius-lg)}.bt-button--radius-xl{border-radius:var(--bt-radius-xl)}.bt-button--radius-full{border-radius:var(--bt-radius-full)}.bt-button--full-width{width:100%}.bt-button--danger.bt-button--outline{background:rgba(0,0,0,0);border-color:var(--bt-color-error);color:var(--bt-color-error)}.bt-button--danger.bt-button--outline:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.bt-button--danger.bt-button--tonal{background:color-mix(in srgb, var(--bt-color-error) 12%, transparent);color:var(--bt-color-error)}.bt-button--danger.bt-button--tonal:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 18%, transparent)}.bt-button--danger.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-error)}.bt-button--danger.bt-button--text:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-accent);background:var(--bt-color-background);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-accent);border-color:var(--bt-color-accent)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-accent-on-surface);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-accent);border-width:2px}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-accent);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border-light);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-toggle__thumb{width:12px;height:12px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base),width var(--bt-transition-base),height var(--bt-transition-base);transform:translateX(0)}.bt-toggle--on{background:var(--bt-color-accent)}.bt-toggle--on .bt-toggle__thumb{width:20px;height:20px;background:var(--bt-color-accent-on-surface);transform:translateX(16px)}.bt-toggle--sm{width:40px;height:24px}.bt-toggle--md{width:48px;height:28px}.bt-toggle--md .bt-toggle__thumb{width:16px;height:16px}.bt-toggle--md.bt-toggle--on .bt-toggle__thumb{width:24px;height:24px;transform:translateX(20px)}.bt-toggle:disabled{cursor:not-allowed;background:var(--bt-color-border-light)}.bt-toggle:disabled .bt-toggle__thumb{background:#fff}.bt-dropdown{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-dropdown__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-dropdown__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-dropdown__control:disabled,.bt-dropdown__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-dropdown__control--outline{border:1px solid var(--bt-color-border)}.bt-dropdown__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-dropdown__control--outline.is-open{border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-dropdown__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-dropdown__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-dropdown__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-dropdown__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-dropdown__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-dropdown__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-dropdown__icon.is-open{transform:rotate(180deg)}.bt-dropdown__list{display:none;position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-2);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-dropdown__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-dropdown__list:has(>.bt-dropdown__options){max-height:none;overflow:hidden;padding:0}.bt-dropdown__search{display:flex;align-items:center;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-md);border-bottom:1px solid var(--bt-color-border)}.bt-dropdown__search-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bt-color-text-secondary)}.bt-dropdown__search-input{flex:1 1 auto;min-width:0;border:none;outline:none;background:rgba(0,0,0,0);color:var(--bt-color-text-primary);border-radius:var(--bt-radius-sm);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal);transition:box-shadow var(--bt-transition-fast)}.bt-dropdown__search-input::placeholder{color:var(--bt-color-text-tertiary)}.bt-dropdown__search-input:focus-visible{box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__options{max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;margin:0;list-style:none}.bt-dropdown__empty{padding:var(--bt-spacing-md) var(--bt-spacing-lg);color:var(--bt-color-text-tertiary);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal);text-align:center;list-style:none}.bt-dropdown__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-dropdown__option[hidden]{display:none}.bt-dropdown__option:hover,.bt-dropdown__option.is-active{background:var(--bt-color-background-secondary)}.bt-dropdown__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-dropdown__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-dropdown__option-content{flex:1 1 auto;min-width:0}.bt-dropdown__option-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bt-spacing-lg);color:var(--bt-color-accent)}.bt-dropdown__option-check svg{opacity:0;transition:opacity var(--bt-transition-fast)}.bt-dropdown__option.is-selected .bt-dropdown__option-check svg{opacity:1}.bt-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{position:relative;background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-3);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);padding-right:calc(var(--bt-spacing-lg) + 32px);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__close{position:absolute;top:var(--bt-spacing-md);right:var(--bt-spacing-md);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:rgba(0,0,0,0);color:var(--bt-color-text-tertiary);border-radius:var(--bt-radius-md);cursor:pointer;transition:background var(--bt-transition-fast),color var(--bt-transition-fast)}.bt-modal__close:hover{background:var(--bt-color-hover);color:var(--bt-color-text-primary)}.bt-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-elevation-4);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-1);padding:var(--bt-spacing-lg);transition:transform var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-none{box-shadow:none}.bt-card--shadow-sm{box-shadow:var(--bt-elevation-1)}.bt-card--shadow-md{box-shadow:var(--bt-elevation-2)}.bt-card--shadow-lg{box-shadow:var(--bt-elevation-3)}.bt-card--p-none{padding:0}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card--accent{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__title{color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__footer{border-top-color:var(--bt-color-hover-on-dark)}.bt-card--outlined{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);box-shadow:none}.bt-card--glass{background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,.08);color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__title{color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__footer{border-top-color:var(--bt-color-hover-on-dark)}[data-theme=dark] .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}@media(prefers-color-scheme: dark){:root:not([data-theme]) .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}}.bt-card--interactive{cursor:pointer}.bt-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--bt-elevation-2)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-top:0;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}.bt-card__body{width:100%}.bt-card__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-lg);padding-top:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border)}.bt-card__footer--start{justify-content:flex-start}.bt-card__footer--between{justify-content:space-between}.bt-card__footer--end{justify-content:flex-end}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;width:var(--bt-spinner-size, 24px);height:var(--bt-spinner-size, 24px);border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-accent);animation:bt-spinner-spin .8s linear infinite}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-accent);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-3)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background) inset;box-shadow:0 0 0 1000px var(--bt-color-background) inset;-webkit-text-fill-color:var(--bt-color-text-primary);caret-color:var(--bt-color-text-primary)}.bt-text-field__input--filled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset}.bt-text-field__input--filled:-webkit-autofill:focus-visible{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background) inset;box-shadow:0 0 0 1000px var(--bt-color-background) inset}input:-webkit-autofill:disabled,textarea:-webkit-autofill:disabled,select:-webkit-autofill:disabled{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;-webkit-text-fill-color:var(--bt-color-text-tertiary)}@media(prefers-reduced-motion: reduce){:root{--bt-transition-fast: 0s;--bt-transition-base: 0s;--bt-transition-slow: 0s}.bt-alert__overlay,.bt-alert__modal{animation:none}.bt-card--interactive:hover{transform:none}.bt-spinner{animation-duration:2.4s}}
|
|
@@ -5,31 +5,31 @@
|
|
|
5
5
|
* @version 1.0.0
|
|
6
6
|
* @license Bigtablet Inc. Open Source License - see LICENSE at the repo root
|
|
7
7
|
* (https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)
|
|
8
|
-
*/((w,A)=>{typeof exports=="object"&&typeof module<"u"?module.exports=A():typeof define=="function"&&define.amd?define(A):(w=w||self,w.Bigtablet=A());})(void 0,()=>{function w(n="bt"){return `${n}_${Math.random().toString(36).substring(2,9)}`}function A(n){return String(n).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function O(n,l,e,o){return n.addEventListener(l,e,o),()=>n.removeEventListener(l,e,o)}function E(n,l=document){return l.querySelector(n)}function h(n,l=document){return Array.from(l.querySelectorAll(n))}let S=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function $(){let n=document.body,l=parseInt(n.dataset.btOpenModals||"0",10);l===0&&(n.dataset.btOriginalOverflow=n.style.overflow,n.style.overflow="hidden"),n.dataset.btOpenModals=String(l+1);}function D(){let n=document.body,l=parseInt(n.dataset.btOpenModals||"1",10)-1;l<=0?(n.style.overflow=n.dataset.btOriginalOverflow||"",delete n.dataset.btOpenModals,delete n.dataset.btOriginalOverflow):n.dataset.btOpenModals=String(l);}function N(n,l={}){let e=typeof n=="string"?E(n):n;if(!e)return null;let o={placeholder:"Select...",disabled:false,onValueChange:null,...l},i={isOpen:false,value:o.defaultValue||null,activeIndex:-1,options:[]},u=e.id||w("dropdown"),f=`${u}_listbox`,r=e.querySelector(".bt-dropdown__control"),p=e.querySelector(".bt-dropdown__list");if(!r||!p)return console.warn("Dropdown: Missing required elements (.bt-dropdown__control, .bt-dropdown__list)"),null;(r.disabled||r.classList.contains("is-disabled"))&&(o.disabled=true),r.disabled=o.disabled,r.setAttribute("aria-disabled",o.disabled?"true":"false"),r.classList.toggle("is-disabled",o.disabled);let c=()=>h(".bt-dropdown__option",p).map(t=>({value:t.dataset.value!==void 0?t.dataset.value:t.textContent.trim(),label:t.textContent.trim(),disabled:t.classList.contains("is-disabled")})),d;if(e.dataset.options)try{let t=JSON.parse(e.dataset.options);Array.isArray(t)?d=t:console.warn("Dropdown: data-options is not a JSON array");}catch(t){console.warn("Dropdown: invalid JSON in data-options",t);}d===void 0&&(d=Array.isArray(o.options)?o.options:c()),i.options=d,p.id=p.id||f,p.setAttribute("role","listbox"),r.setAttribute("role","combobox"),r.setAttribute("aria-haspopup","listbox"),r.setAttribute("aria-expanded","false"),r.setAttribute("aria-controls",p.id),h(".bt-dropdown__option",p).forEach((t,g)=>{t.id=t.id||`${u}_option_${g}`,t.setAttribute("role","option"),t.setAttribute("aria-selected","false"),i.options[g]?.disabled&&t.setAttribute("aria-disabled","true");});let a=e.querySelector('input[type="hidden"]'),b=o.name||e.dataset.name||null;!a&&b&&(a=document.createElement("input"),a.type="hidden",a.name=b,e.appendChild(a));function s(t){i.value=t;let g=i.options.find(y=>String(y.value)===String(t));a&&(a.value=t??"");let m=r.querySelector(".bt-dropdown__value, .bt-dropdown__placeholder");m&&(g?(m.textContent=g.label,m.classList.remove("bt-dropdown__placeholder"),m.classList.add("bt-dropdown__value")):(m.textContent=o.placeholder,m.classList.remove("bt-dropdown__value"),m.classList.add("bt-dropdown__placeholder"))),h(".bt-dropdown__option",p).forEach((y,L)=>{let x=String(i.options[L]?.value)===String(t);y.classList.toggle("is-selected",x),y.setAttribute("aria-selected",x?"true":"false");}),o.onValueChange&&o.onValueChange(t,g);}function v(){if(o.disabled||r.disabled)return;i.isOpen=true,r.classList.add("is-open"),r.setAttribute("aria-expanded","true"),p.style.display="block";let t=r.getBoundingClientRect(),g=Math.min(i.options.length*40,288),m=window.innerHeight-t.bottom,y=t.top;m<g&&y>m?p.classList.add("bt-dropdown__list--up"):p.classList.remove("bt-dropdown__list--up");let L=i.options.findIndex(G=>G.value===i.value);i.activeIndex=L>=0?L:0,C();let x=r.querySelector(".bt-dropdown__icon");x&&x.classList.add("is-open");}function _(){i.isOpen=false,r.classList.remove("is-open"),r.setAttribute("aria-expanded","false"),r.removeAttribute("aria-activedescendant"),p.style.display="none";let t=r.querySelector(".bt-dropdown__icon");t&&t.classList.remove("is-open");}function k(){i.isOpen?_():v();}function C(){let t=null;h(".bt-dropdown__option",p).forEach((g,m)=>{let y=m===i.activeIndex;g.classList.toggle("is-active",y),y&&(t=g.id);}),t?r.setAttribute("aria-activedescendant",t):r.removeAttribute("aria-activedescendant");}function B(t){let g=i.options.length,m=i.activeIndex;for(let y=0;y<g;y++)if(m=(m+t+g)%g,!i.options[m].disabled){i.activeIndex=m,C();break}}function R(){let t=i.options[i.activeIndex];t&&!t.disabled&&(s(t.value),_());}function V(t){t.preventDefault(),k();}function F(t){if(!o.disabled)switch(t.key){case " ":case "Enter":t.preventDefault(),i.isOpen?R():v();break;case "ArrowDown":t.preventDefault(),i.isOpen?B(1):v();break;case "ArrowUp":t.preventDefault(),i.isOpen?B(-1):v();break;case "Home":t.preventDefault(),v(),i.activeIndex=i.options.findIndex(g=>!g.disabled),C();break;case "End":t.preventDefault(),v();for(let g=i.options.length-1;g>=0;g--)if(!i.options[g].disabled){i.activeIndex=g,C();break}break;case "Escape":t.preventDefault(),_();break}}function j(t){e.contains(t.target)||_();}function J(t){return g=>{g.preventDefault();let m=i.options[t];m&&!m.disabled&&(s(m.value),_());}}function z(t){return ()=>{i.options[t].disabled||(i.activeIndex=t,C());}}let T=[O(r,"click",V),O(r,"keydown",F),O(document,"mousedown",j)];return h(".bt-dropdown__option",p).forEach((t,g)=>{T.push(O(t,"click",J(g))),T.push(O(t,"mouseenter",z(g)));}),p.style.display="none",o.defaultValue?s(o.defaultValue):a&&a.value&&s(a.value),{getValue:()=>i.value,setValue:s,open:v,close:_,toggle:k,setDisabled:t=>{o.disabled=t,r.disabled=t,r.setAttribute("aria-disabled",t?"true":"false"),r.classList.toggle("is-disabled",t);},destroy:()=>{T.forEach(t=>{t();});}}}function q(n,l={}){let e=typeof n=="string"?E(n):n;if(!e)return null;let o={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...l},i={isOpen:false},u=e.querySelector(".bt-modal__panel"),f=null,r=false;if(u&&(u.setAttribute("role","dialog"),u.setAttribute("aria-modal","true"),!u.hasAttribute("aria-label")&&!u.hasAttribute("aria-labelledby"))){let s=u.querySelector(".bt-modal__header");s?(s.id=s.id||w("modal_title"),u.setAttribute("aria-labelledby",s.id)):u.setAttribute("aria-label","Dialog");}function p(){if(!i.isOpen){if(i.isOpen=true,e.classList.add("is-open"),$(),f=document.activeElement,u){let s=u.querySelector(S);s?s.focus():(u.setAttribute("tabindex","-1"),r=true,u.focus());}o.onOpen&&o.onOpen();}}function c(){i.isOpen&&(i.isOpen=false,e.classList.remove("is-open"),D(),r&&u&&(u.removeAttribute("tabindex"),r=false),f&&typeof f.focus=="function"&&f.focus(),f=null,o.onClose&&o.onClose());}function d(s){o.closeOnOverlay&&s.target===e&&c();}function a(s){if(i.isOpen){if(o.closeOnEscape&&s.key==="Escape"){c();return}if(s.key==="Tab"&&u){let v=h(S,u);if(v.length===0){s.preventDefault();return}let _=v[0],k=v[v.length-1];s.shiftKey&&document.activeElement===_?(s.preventDefault(),k.focus()):!s.shiftKey&&document.activeElement===k&&(s.preventDefault(),_.focus());}}}let b=[O(e,"click",d),O(document,"keydown",a)];return h("[data-modal-close]",e).forEach(s=>{b.push(O(s,"click",c));}),{isOpen:()=>i.isOpen,open:p,close:c,toggle:()=>i.isOpen?c():p(),destroy:()=>{b.forEach(s=>{s();}),i.isOpen&&D();}}}let K="bt-button--filled",U="bt-button--outline";function H(n={}){let l={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,destructive:false,actionsAlign:"right",closeOnOverlay:true,onConfirm:null,onCancel:null,...n},e=document.createElement("div");e.className=`bt-alert__overlay bt-alert--${l.variant} is-open`,e.innerHTML=`
|
|
8
|
+
*/((k,C)=>{typeof exports=="object"&&typeof module<"u"?module.exports=C():typeof define=="function"&&define.amd?define(C):(k=k||self,k.Bigtablet=C());})(void 0,()=>{function k(o="bt"){return `${o}_${Math.random().toString(36).substring(2,9)}`}function C(o){return String(o).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function _(o,r,n,a){return o.addEventListener(r,n,a),()=>o.removeEventListener(r,n,a)}function L(o,r=document){return r.querySelector(o)}function A(o,r=document){return Array.from(r.querySelectorAll(o))}let P=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function j(){let o=document.body,r=parseInt(o.dataset.btOpenModals||"0",10);r===0&&(o.dataset.btOriginalOverflow=o.style.overflow,o.style.overflow="hidden"),o.dataset.btOpenModals=String(r+1);}function B(){let o=document.body,r=parseInt(o.dataset.btOpenModals||"1",10)-1;r<=0?(o.style.overflow=o.dataset.btOriginalOverflow||"",delete o.dataset.btOpenModals,delete o.dataset.btOriginalOverflow):o.dataset.btOpenModals=String(r);}function F(o){return String(o).toLowerCase().replace(/\s+/g,"")}function Q(o){if(o!==void 0)return o!=="false"}let ne='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>',ae='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';function J(o,r={}){let n=typeof o=="string"?L(o):o;if(!n)return null;let a={placeholder:"Select...",disabled:false,multiple:false,searchable:false,searchPlaceholder:"\uAC80\uC0C9\u2026",emptyText:"\uACB0\uACFC \uC5C6\uC74C",selectedSummary:e=>`${e}\uAC1C \uC120\uD0DD`,onValueChange:null,...r};if(r.multiple===void 0){let e=Q(n.dataset.multiple);e!==void 0&&(a.multiple=e);}if(r.searchable===void 0){let e=Q(n.dataset.searchable);e!==void 0&&(a.searchable=e);}if(r.searchPlaceholder===void 0&&n.dataset.searchPlaceholder&&(a.searchPlaceholder=n.dataset.searchPlaceholder),r.emptyText===void 0&&n.dataset.emptyText&&(a.emptyText=n.dataset.emptyText),r.placeholder===void 0&&n.dataset.placeholder)a.placeholder=n.dataset.placeholder;else if(r.placeholder===void 0){let e=n.querySelector(".bt-dropdown__placeholder")?.textContent.trim();e&&(a.placeholder=e);}let f=a.multiple===true,p=a.searchable===true,t={isOpen:false,value:null,values:[],activeIndex:-1,options:[],visible:[],committedQuery:""},m=false,y=n.id||k("dropdown"),s=n.querySelector(".bt-dropdown__control"),c=n.querySelector(".bt-dropdown__list");if(!s||!c)return console.warn("Dropdown: Missing required elements (.bt-dropdown__control, .bt-dropdown__list)"),null;let l=c.querySelector(".bt-dropdown__options");if(!l)if(p){let e=c,i=Array.from(e.classList).filter(v=>v.startsWith("bt-dropdown__list")),u=document.createElement("div");u.className=i.join(" "),e.classList.remove(...i),e.classList.add("bt-dropdown__options"),e.style.display="",e.parentNode.insertBefore(u,e),u.appendChild(e),l=e,c=u;}else l=c;(s.disabled||s.classList.contains("is-disabled"))&&(a.disabled=true),s.disabled=a.disabled,s.setAttribute("aria-disabled",a.disabled?"true":"false"),s.classList.toggle("is-disabled",a.disabled);let h=()=>A(".bt-dropdown__option",l).map(e=>({value:e.dataset.value!==void 0?e.dataset.value:e.textContent.trim(),label:e.textContent.trim(),disabled:e.classList.contains("is-disabled")})),d;if(n.dataset.options)try{let e=JSON.parse(n.dataset.options);Array.isArray(e)?d=e:console.warn("Dropdown: data-options is not a JSON array");}catch(e){console.warn("Dropdown: invalid JSON in data-options",e);}d===void 0&&(d=Array.isArray(a.options)?a.options:h()),t.options=d;let g=A(".bt-dropdown__option",l);if(g.length===0&&t.options.length>0){let e=l.tagName==="UL"||l.tagName==="OL"?"li":"div";t.options.forEach(i=>{let u=document.createElement(e);u.className="bt-dropdown__option",i.disabled&&u.classList.add("is-disabled"),u.dataset.value=i.value,u.textContent=i.label,l.appendChild(u);}),g=A(".bt-dropdown__option",l);}l.id=l.id||`${y}_listbox`,l.setAttribute("role","listbox"),f&&l.setAttribute("aria-multiselectable","true"),s.setAttribute("aria-haspopup","listbox"),s.setAttribute("aria-expanded","false"),s.setAttribute("aria-controls",l.id),p?s.removeAttribute("role"):s.setAttribute("role","combobox"),g.forEach((e,i)=>{if(e.id=e.id||`${y}_option_${i}`,e.setAttribute("role","option"),e.setAttribute("aria-selected","false"),t.options[i]?.disabled&&e.setAttribute("aria-disabled","true"),f&&!e.querySelector(".bt-dropdown__option-check")){let u=document.createElement("span");u.className="bt-dropdown__option-check",u.setAttribute("aria-hidden","true"),u.innerHTML=ae,e.insertBefore(u,e.firstChild);}});let b=null,w=null;if(p){let e=c.querySelector(".bt-dropdown__search");if(!e){e=document.createElement("div"),e.className="bt-dropdown__search";let i=document.createElement("span");i.className="bt-dropdown__search-icon",i.setAttribute("aria-hidden","true"),i.innerHTML=ne,e.appendChild(i),c.insertBefore(e,c.firstChild);}if(b=e.querySelector(".bt-dropdown__search-input"),b||(b=document.createElement("input"),b.type="text",b.className="bt-dropdown__search-input",b.autocomplete="off",e.appendChild(b)),b.placeholder=a.searchPlaceholder,b.setAttribute("aria-label",a.searchPlaceholder),b.setAttribute("role","combobox"),b.setAttribute("aria-autocomplete","list"),b.setAttribute("aria-expanded","false"),b.setAttribute("aria-controls",l.id),w=l.querySelector(".bt-dropdown__empty"),!w){let i=l.tagName==="UL"||l.tagName==="OL"?"li":"div";w=document.createElement(i),w.className="bt-dropdown__empty",l.appendChild(w);}w.textContent=a.emptyText,w.hidden=true;}let le=()=>p?b:s,E=A('input[type="hidden"]',n),q=a.name||n.dataset.name||E[0]?.name||null;if(E.length===0&&q){let e=document.createElement("input");e.type="hidden",e.name=q,n.appendChild(e),E.push(e);}function re(){if(!q)return;let e=f?t.values.map(i=>i==null?"":String(i)):[t.value==null?"":String(t.value)];for(;E.length>e.length;)E.pop().remove();for(;E.length<e.length;){let i=document.createElement("input");i.type="hidden",i.name=q,n.appendChild(i),E.push(i);}E.forEach((i,u)=>{i.value=e[u];});}function V(e){return t.options.find(i=>String(i.value)===String(e))}function H(e){return e===void 0?false:f?t.values.some(i=>String(i)===String(e)):t.value!=null&&String(t.value)===String(e)}function ce(){return t.values.map(V).filter(Boolean)}function U(){let e=s.querySelector(".bt-dropdown__value, .bt-dropdown__placeholder");if(e){let i=a.placeholder,u=false;if(f)u=t.values.length>0,u&&(i=a.selectedSummary(t.values.length));else {let v=V(t.value);u=!!v,v&&(i=v.label);}e.textContent=i,e.classList.toggle("bt-dropdown__value",u),e.classList.toggle("bt-dropdown__placeholder",!u);}g.forEach((i,u)=>{let v=H(t.options[u]?.value);i.classList.toggle("is-selected",v),i.setAttribute("aria-selected",v?"true":"false");}),re();}function D(e){f?(t.values=e==null?[]:Array.isArray(e)?e.slice():[e],U(),a.onValueChange&&a.onValueChange(t.values.slice(),ce())):(t.value=Array.isArray(e)?e[0]??null:e,U(),a.onValueChange&&a.onValueChange(t.value,V(t.value)??null));}function de(e){let i=H(e.value)?t.values.filter(u=>String(u)!==String(e.value)):[...t.values,e.value];D(i);}function N(){let e=null;g.forEach((u,v)=>{let O=v===t.activeIndex;u.classList.toggle("is-active",O),O&&(e=u.id);});let i=le();i&&(e?i.setAttribute("aria-activedescendant",e):i.removeAttribute("aria-activedescendant"));}function X(){return t.visible.find(e=>!t.options[e]?.disabled)??-1}function I(){let e=p?F(t.committedQuery):"";t.visible=[],g.forEach((i,u)=>{let v=t.options[u]?.label??i.textContent,O=e===""||F(v).includes(e);i.hidden=!O,O&&t.visible.push(u);}),w&&(w.hidden=t.visible.length>0),t.isOpen?t.visible.includes(t.activeIndex)||(t.activeIndex=X()):t.activeIndex=-1,N();}function x(){if(a.disabled||s.disabled)return;t.isOpen=true,s.classList.add("is-open"),s.setAttribute("aria-expanded","true"),c.style.display="block",b&&b.setAttribute("aria-expanded","true");let e=s.getBoundingClientRect(),i=Math.min(t.options.length*40,288),u=window.innerHeight-e.bottom,v=e.top;u<i&&v>u?c.classList.add("bt-dropdown__list--up"):c.classList.remove("bt-dropdown__list--up"),t.activeIndex=t.options.findIndex(te=>H(te.value)&&!te.disabled),I(),b&&b.focus();let O=s.querySelector(".bt-dropdown__icon");O&&O.classList.add("is-open");}function T(){t.isOpen=false,s.classList.remove("is-open"),s.setAttribute("aria-expanded","false"),s.removeAttribute("aria-activedescendant"),c.style.display="none",b&&(b.value="",b.setAttribute("aria-expanded","false"),b.removeAttribute("aria-activedescendant")),t.committedQuery="",m=false,t.activeIndex=-1,I();let e=s.querySelector(".bt-dropdown__icon");e&&e.classList.remove("is-open");}function K(){let e=t.isOpen;T(),e&&p&&s.focus();}function Y(){t.isOpen?T():x();}function $(e){let i=t.visible.filter(v=>!t.options[v]?.disabled);if(i.length===0)return;let u=i.indexOf(t.activeIndex);t.activeIndex=u===-1?e===1?i[0]:i[i.length-1]:i[(u+e+i.length)%i.length],N();}function Z(e){let i=t.options[e];!i||i.disabled||(f?de(i):(D(i.value),K()));}function ee(){t.visible.includes(t.activeIndex)&&Z(t.activeIndex);}function ue(e){e.preventDefault(),Y();}function fe(e){if(!a.disabled)switch(e.key){case " ":case "Enter":e.preventDefault(),t.isOpen?ee():x();break;case "ArrowDown":e.preventDefault(),t.isOpen?$(1):x();break;case "ArrowUp":e.preventDefault(),t.isOpen?$(-1):x();break;case "Home":e.preventDefault(),x(),t.activeIndex=X(),N();break;case "End":e.preventDefault(),x();for(let i=t.visible.length-1;i>=0;i--)if(!t.options[t.visible[i]]?.disabled){t.activeIndex=t.visible[i],N();break}break;case "Escape":e.preventDefault(),T();break;case "Tab":T();break}}function pe(e){if(!(e.isComposing||e.keyCode===229))switch(e.key){case "ArrowDown":e.preventDefault(),$(1);break;case "ArrowUp":e.preventDefault(),$(-1);break;case "Enter":e.preventDefault(),ee();break;case "Escape":e.preventDefault(),K();break;case "Tab":K();break}}function be(e){n.contains(e.target)||T();}function he(e){return i=>{i.preventDefault(),Z(e);}}function ge(e){return ()=>{t.options[e]?.disabled||(t.activeIndex=e,N());}}let S=[_(s,"click",ue),_(s,"keydown",fe),_(document,"mousedown",be)];g.forEach((e,i)=>{S.push(_(e,"click",he(i))),S.push(_(e,"mouseenter",ge(i)));}),b&&(S.push(_(b,"compositionstart",()=>{m=true;})),S.push(_(b,"compositionend",e=>{m=false,t.committedQuery=e.target.value,I();})),S.push(_(b,"input",e=>{m||(t.committedQuery=e.target.value,I());})),S.push(_(b,"keydown",pe)));let R=E.map(e=>e.value).filter(e=>e!=="");if(c.style.display="none",I(),U(),f){let e=Array.isArray(a.defaultValue)?a.defaultValue:a.defaultValue!=null?[a.defaultValue]:R;e.length>0&&D(e);}else a.defaultValue!=null?D(a.defaultValue):R[0]&&D(R[0]);return {getValue:()=>f?t.values.slice():t.value,setValue:D,open:x,close:T,toggle:Y,setDisabled:e=>{a.disabled=e,s.disabled=e,s.setAttribute("aria-disabled",e?"true":"false"),s.classList.toggle("is-disabled",e);},destroy:()=>{S.forEach(e=>{e();});}}}function G(o,r={}){let n=typeof o=="string"?L(o):o;if(!n)return null;let a={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...r},f={isOpen:false},p=n.querySelector(".bt-modal__panel"),t=null,m=false;if(p&&(p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),!p.hasAttribute("aria-label")&&!p.hasAttribute("aria-labelledby"))){let d=p.querySelector(".bt-modal__header");d?(d.id=d.id||k("modal_title"),p.setAttribute("aria-labelledby",d.id)):p.setAttribute("aria-label","Dialog");}function y(){if(!f.isOpen){if(f.isOpen=true,n.classList.add("is-open"),j(),t=document.activeElement,p){let d=p.querySelector(P);d?d.focus():(p.setAttribute("tabindex","-1"),m=true,p.focus());}a.onOpen&&a.onOpen();}}function s(){f.isOpen&&(f.isOpen=false,n.classList.remove("is-open"),B(),m&&p&&(p.removeAttribute("tabindex"),m=false),t&&typeof t.focus=="function"&&t.focus(),t=null,a.onClose&&a.onClose());}function c(d){a.closeOnOverlay&&d.target===n&&s();}function l(d){if(f.isOpen){if(a.closeOnEscape&&d.key==="Escape"){s();return}if(d.key==="Tab"&&p){let g=A(P,p);if(g.length===0){d.preventDefault();return}let b=g[0],w=g[g.length-1];d.shiftKey&&document.activeElement===b?(d.preventDefault(),w.focus()):!d.shiftKey&&document.activeElement===w&&(d.preventDefault(),b.focus());}}}let h=[_(n,"click",c),_(document,"keydown",l)];return A("[data-modal-close]",n).forEach(d=>{h.push(_(d,"click",s));}),{isOpen:()=>f.isOpen,open:y,close:s,toggle:()=>f.isOpen?s():y(),destroy:()=>{h.forEach(d=>{d();}),f.isOpen&&B();}}}let ie="bt-button--filled",oe="bt-button--outline";function se(o={}){let r={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,destructive:false,actionsAlign:"right",closeOnOverlay:true,onConfirm:null,onCancel:null,...o},n=document.createElement("div");n.className=`bt-alert__overlay bt-alert--${r.variant} is-open`,n.innerHTML=`
|
|
9
9
|
<div class="bt-alert__modal">
|
|
10
|
-
${
|
|
11
|
-
<div class="bt-alert__message">${
|
|
12
|
-
<div class="bt-alert__actions" style="justify-content: ${
|
|
13
|
-
${
|
|
14
|
-
<button class="bt-button bt-button--md ${
|
|
10
|
+
${r.title?`<div class="bt-alert__title">${C(r.title)}</div>`:""}
|
|
11
|
+
<div class="bt-alert__message">${C(r.message)}</div>
|
|
12
|
+
<div class="bt-alert__actions" style="justify-content: ${r.actionsAlign==="left"?"flex-start":r.actionsAlign==="center"?"center":"flex-end"}">
|
|
13
|
+
${r.showCancel?`<button class="bt-button bt-button--md ${oe}" data-alert-cancel>${C(r.cancelText)}</button>`:""}
|
|
14
|
+
<button class="bt-button bt-button--md ${ie}${r.destructive?" bt-button--danger":""}" data-alert-confirm>${C(r.confirmText)}</button>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
|
-
`;let
|
|
18
|
-
<button class="bt-pagination__item" ${
|
|
17
|
+
`;let a=n.querySelector(".bt-alert__modal");if(a){a.setAttribute("role","alertdialog"),a.setAttribute("aria-modal","true");let l=n.querySelector(".bt-alert__title"),h=n.querySelector(".bt-alert__message");l&&(l.id=k("alert_title"),a.setAttribute("aria-labelledby",l.id)),h&&(h.id=k("alert_message"),a.setAttribute("aria-describedby",h.id));}let f=document.activeElement;document.body.appendChild(n),j();let p=true;function t(){p&&(p=false,document.removeEventListener("keydown",c),n.classList.remove("is-open"),f&&typeof f.focus=="function"&&f.focus(),setTimeout(()=>{n.remove(),B();},200));}function m(){p&&(r.onCancel&&r.onCancel(),t());}let y=n.querySelector("[data-alert-confirm]"),s=n.querySelector("[data-alert-cancel]");y&&y.addEventListener("click",()=>{r.onConfirm&&r.onConfirm(),t();}),s&&s.addEventListener("click",()=>{r.onCancel&&r.onCancel(),t();}),n.addEventListener("click",l=>{r.closeOnOverlay&&l.target===n&&m();});function c(l){if(l.key==="Escape"){m();return}if(l.key==="Tab"&&a){let h=A(P,a);if(h.length===0){l.preventDefault();return}let d=h[0],g=h[h.length-1];l.shiftKey&&document.activeElement===d?(l.preventDefault(),g.focus()):!l.shiftKey&&document.activeElement===g&&(l.preventDefault(),d.focus());}}return document.addEventListener("keydown",c),y&&y.focus(),{close:t}}function z(o,r={}){let n=typeof o=="string"?L(o):o;if(!n)return null;let a={defaultChecked:false,disabled:false,onCheckedChange:null,...r},f={checked:a.defaultChecked||n.classList.contains("bt-toggle--on")};n.disabled&&(a.disabled=true),n.disabled=a.disabled,n.hasAttribute("role")||n.setAttribute("role","switch"),n.tagName==="BUTTON"&&!n.hasAttribute("type")&&n.setAttribute("type","button");let p=a.name||n.dataset.name||null,t=n.querySelector('input[type="hidden"]')||(p&&n.parentNode?Array.from(n.parentNode.children).find(c=>c.tagName==="INPUT"&&c.type==="hidden"&&c.name===p):null);!t&&p&&(t=document.createElement("input"),t.type="hidden",t.name=p,n.tagName==="BUTTON"&&n.parentNode?n.parentNode.insertBefore(t,n.nextSibling):n.appendChild(t));function m(c){f.checked=c,n.classList.toggle("bt-toggle--on",c),n.setAttribute("aria-checked",c?"true":"false"),t&&(t.value=c?"true":"false"),a.onCheckedChange&&a.onCheckedChange(c);}function y(){!a.disabled&&!n.disabled&&m(!f.checked);}let s=_(n,"click",y);if(t&&!f.checked){let c=String(t.value).trim().toLowerCase();(c==="true"||c==="1"||c==="on"||c==="y"||c==="yes")&&(f.checked=true);}return n.classList.toggle("bt-toggle--on",f.checked),n.setAttribute("aria-checked",f.checked?"true":"false"),t&&(t.value=f.checked?"true":"false"),{isChecked:()=>f.checked,setChecked:m,toggle:y,setDisabled:c=>{a.disabled=c,n.disabled=c;},destroy:()=>s()}}function W(o,r={}){let n=typeof o=="string"?L(o):o;if(!n)return null;let a={page:1,totalPages:1,sibling:2,onPageChange:null,...r};function f(s,c){let l=[];for(let h=s;h<=c;h++)l.push(h);return l}function p(s,c){if(c<=7)return f(1,c);let l=[],h=c,d=a.sibling;if(s<=d+2){for(let g of f(1,d+3))l.push(g);return l.push("ellipsis"),l.push(h),l}if(s>=h-d-1){l.push(1),l.push("ellipsis");for(let g of f(h-d-2,h))l.push(g);return l}l.push(1),l.push("ellipsis");for(let g of f(s-d,s+d))l.push(g);return l.push("ellipsis"),l.push(h),l}function t(){let s=p(a.page,a.totalPages),c=`
|
|
18
|
+
<button class="bt-pagination__item" ${a.page<=1?"disabled":""} data-action="prev" aria-label="Previous page">
|
|
19
19
|
\u2039
|
|
20
20
|
</button>
|
|
21
21
|
<div class="bt-pagination__pages">
|
|
22
|
-
`;
|
|
22
|
+
`;s.forEach((d,g)=>{if(d==="ellipsis")c+='<span class="bt-pagination__ellipsis" aria-hidden="true">\u2026</span>';else {let b=d===a.page;c+=`
|
|
23
23
|
<button
|
|
24
|
-
class="bt-pagination__page${
|
|
25
|
-
data-page="${
|
|
26
|
-
${
|
|
24
|
+
class="bt-pagination__page${b?" bt-pagination__page--active":""}"
|
|
25
|
+
data-page="${C(d)}"
|
|
26
|
+
${b?'aria-current="page"':""}
|
|
27
27
|
>
|
|
28
|
-
${
|
|
28
|
+
${C(d)}
|
|
29
29
|
</button>
|
|
30
|
-
`;}}),
|
|
30
|
+
`;}}),c+=`
|
|
31
31
|
</div>
|
|
32
|
-
<button class="bt-pagination__item" ${
|
|
32
|
+
<button class="bt-pagination__item" ${a.page>=a.totalPages?"disabled":""} data-action="next" aria-label="Next page">
|
|
33
33
|
\u203A
|
|
34
34
|
</button>
|
|
35
|
-
`,
|
|
35
|
+
`,n.innerHTML=c,A("[data-page]",n).forEach(d=>{d.addEventListener("click",()=>{let g=parseInt(d.dataset.page,10);m(g);});});let l=n.querySelector('[data-action="prev"]'),h=n.querySelector('[data-action="next"]');l&&l.addEventListener("click",()=>m(a.page-1)),h&&h.addEventListener("click",()=>m(a.page+1));}function m(s){s<1||s>a.totalPages||s===a.page||(a.page=s,t(),a.onPageChange&&a.onPageChange(s));}function y(s){a.totalPages=s,a.page>s&&(a.page=s),t();}return t(),{getPage:()=>a.page,setPage:m,setTotalPages:y,render:t}}function M(){A("[data-bt-dropdown]").forEach(o=>{o._btDropdown||(o._btDropdown=J(o));}),A("[data-bt-modal]").forEach(o=>{o._btModal||(o._btModal=G(o));}),A("[data-bt-modal-open]").forEach(o=>{if(o.dataset.btBound)return;let r=o.dataset.btModalOpen,n=L(`#${r}`);n?._btModal&&(o.dataset.btBound="true",o.addEventListener("click",()=>n._btModal.open()));}),A("[data-bt-toggle]").forEach(o=>{o._btToggle||(o._btToggle=z(o));}),A("[data-bt-pagination]").forEach(o=>{if(!o._btPagination){let r=parseInt(o.dataset.page,10)||1,n=parseInt(o.dataset.totalPages,10)||1;o._btPagination=W(o,{page:r,totalPages:n});}});}return typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",M):M()),{Dropdown:J,Modal:G,Alert:se,Toggle:z,Pagination:W,init:M,generateId:k,$:L,$$:A,on:_,version:"1.0.0"}});})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigtablet/design-system",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.0",
|
|
4
4
|
"description": "Bigtablet Design System UI Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -42,7 +42,6 @@
|
|
|
42
42
|
"dev": "tsup --watch",
|
|
43
43
|
"storybook": "storybook dev -p 6006",
|
|
44
44
|
"build:sb": "storybook build",
|
|
45
|
-
"protect:sb": "node scripts/protect-storybook.mjs",
|
|
46
45
|
"test": "vitest run --project unit",
|
|
47
46
|
"test:watch": "vitest --project unit",
|
|
48
47
|
"test:coverage": "vitest run --project unit --coverage",
|
|
@@ -124,7 +123,8 @@
|
|
|
124
123
|
},
|
|
125
124
|
{
|
|
126
125
|
"path": "dist/vanilla/bigtablet.min.js",
|
|
127
|
-
"limit": "
|
|
126
|
+
"limit": "7 kB",
|
|
127
|
+
"message": "Raised 5 kB -> 7 kB on 2026-08-06: Dropdown multiple/searchable pushed the baseline from 4.13 kB to 5.6 kB, 0.6 kB over the old limit. The current limit leaves 1.4 kB. Re-measure before raising again."
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
"path": "dist/index.css",
|