@revikornmann/muka-ui 0.19.0 → 0.21.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/dist/cjs/components/ActionSheet/ActionSheet.css +4 -4
- package/dist/cjs/components/BottomBar/BottomBar.css +0 -3
- package/dist/cjs/components/Breadcrumb/Breadcrumb.css +26 -2
- package/dist/cjs/components/Combobox/Combobox.css +2 -2
- package/dist/cjs/components/ContextSelect/ContextSelect.css +4 -4
- package/dist/cjs/components/DocumentViewer/DocumentToolbar.js +1 -1
- package/dist/cjs/components/DocumentViewer/DocumentToolbar.js.map +1 -1
- package/dist/cjs/components/DocumentViewer/DocumentViewer.css +2 -2
- package/dist/cjs/components/DropdownSelect/DropdownSelect.css +3 -3
- package/dist/cjs/components/EmptyState/EmptyState.css +8 -8
- package/dist/cjs/components/FAB/FAB.css +1 -1
- package/dist/cjs/components/FileUpload/FileUpload.css +10 -10
- package/dist/cjs/components/Icon/Icon.js +17 -7
- package/dist/cjs/components/Icon/Icon.js.map +1 -1
- package/dist/cjs/components/Icon/iconRegistry.js +143 -111
- package/dist/cjs/components/Icon/iconRegistry.js.map +1 -1
- package/dist/cjs/components/Icon/index.js +4 -1
- package/dist/cjs/components/Icon/index.js.map +1 -1
- package/dist/cjs/components/Input/Input.css +2 -2
- package/dist/cjs/components/Label/Label.css +1 -1
- package/dist/cjs/components/LicensePlateInput/LicensePlateInput.css +1 -1
- package/dist/cjs/components/Menu/Menu.css +1 -1
- package/dist/cjs/components/Pagination/Pagination.css +15 -15
- package/dist/cjs/components/PhotoUploader/PhotoUploader.css +4 -4
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.css +10 -6
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js +27 -16
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/cjs/components/SearchInput/SearchInput.css +4 -4
- package/dist/cjs/components/Select/Select.css +2 -2
- package/dist/cjs/components/SmsOtpField/SmsOtpField.css +2 -2
- package/dist/cjs/components/SpecList/SpecList.css +8 -8
- package/dist/cjs/components/Spinner/Spinner.css +1 -1
- package/dist/cjs/components/SwipeActions/SwipeActions.css +6 -6
- package/dist/cjs/components/Table/Table.css +3 -3
- package/dist/cjs/components/Table/TablePagination.css +1 -1
- package/dist/cjs/components/Tabs/Tabs.css +6 -6
- package/dist/cjs/components/Textarea/Textarea.css +2 -2
- package/dist/cjs/components/Waveform/Waveform.css +1 -1
- package/dist/cjs/components/index.js +5 -3
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/ActionSheet/ActionSheet.css +4 -4
- package/dist/esm/components/BottomBar/BottomBar.css +0 -3
- package/dist/esm/components/Breadcrumb/Breadcrumb.css +26 -2
- package/dist/esm/components/Combobox/Combobox.css +2 -2
- package/dist/esm/components/ContextSelect/ContextSelect.css +4 -4
- package/dist/esm/components/DocumentViewer/DocumentToolbar.js +1 -1
- package/dist/esm/components/DocumentViewer/DocumentToolbar.js.map +1 -1
- package/dist/esm/components/DocumentViewer/DocumentViewer.css +2 -2
- package/dist/esm/components/DropdownSelect/DropdownSelect.css +3 -3
- package/dist/esm/components/EmptyState/EmptyState.css +8 -8
- package/dist/esm/components/FAB/FAB.css +1 -1
- package/dist/esm/components/FileUpload/FileUpload.css +10 -10
- package/dist/esm/components/Icon/Icon.js +14 -7
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/iconRegistry.js +141 -78
- package/dist/esm/components/Icon/iconRegistry.js.map +1 -1
- package/dist/esm/components/Icon/index.js +1 -1
- package/dist/esm/components/Icon/index.js.map +1 -1
- package/dist/esm/components/Input/Input.css +2 -2
- package/dist/esm/components/Label/Label.css +1 -1
- package/dist/esm/components/LicensePlateInput/LicensePlateInput.css +1 -1
- package/dist/esm/components/Menu/Menu.css +1 -1
- package/dist/esm/components/Pagination/Pagination.css +15 -15
- package/dist/esm/components/PhotoUploader/PhotoUploader.css +4 -4
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css +10 -6
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +27 -16
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.css +4 -4
- package/dist/esm/components/Select/Select.css +2 -2
- package/dist/esm/components/SmsOtpField/SmsOtpField.css +2 -2
- package/dist/esm/components/SpecList/SpecList.css +8 -8
- package/dist/esm/components/Spinner/Spinner.css +1 -1
- package/dist/esm/components/SwipeActions/SwipeActions.css +6 -6
- package/dist/esm/components/Table/Table.css +3 -3
- package/dist/esm/components/Table/TablePagination.css +1 -1
- package/dist/esm/components/Tabs/Tabs.css +6 -6
- package/dist/esm/components/Textarea/Textarea.css +2 -2
- package/dist/esm/components/Waveform/Waveform.css +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/ActionSheet.css +4 -4
- package/dist/styles/components/BottomBar.css +0 -3
- package/dist/styles/components/Breadcrumb.css +26 -2
- package/dist/styles/components/Combobox.css +2 -2
- package/dist/styles/components/ContextSelect.css +4 -4
- package/dist/styles/components/DocumentViewer.css +2 -2
- package/dist/styles/components/DropdownSelect.css +3 -3
- package/dist/styles/components/EmptyState.css +8 -8
- package/dist/styles/components/FAB.css +1 -1
- package/dist/styles/components/FileUpload.css +10 -10
- package/dist/styles/components/Input.css +2 -2
- package/dist/styles/components/Label.css +1 -1
- package/dist/styles/components/LicensePlateInput.css +1 -1
- package/dist/styles/components/Menu.css +1 -1
- package/dist/styles/components/Pagination.css +15 -15
- package/dist/styles/components/PhotoUploader.css +4 -4
- package/dist/styles/components/ProgressAccordeon.css +10 -6
- package/dist/styles/components/SearchInput.css +4 -4
- package/dist/styles/components/Select.css +2 -2
- package/dist/styles/components/SmsOtpField.css +2 -2
- package/dist/styles/components/SpecList.css +8 -8
- package/dist/styles/components/Spinner.css +1 -1
- package/dist/styles/components/SwipeActions.css +6 -6
- package/dist/styles/components/Table.css +3 -3
- package/dist/styles/components/Tabs.css +6 -6
- package/dist/styles/components/Textarea.css +2 -2
- package/dist/styles/components/Waveform.css +1 -1
- package/dist/styles/index.css +1253 -1228
- package/dist/styles/muka-dark.css +1253 -1228
- package/dist/styles/muka-light.css +1253 -1228
- package/dist/styles/wireframe-dark.css +1253 -1228
- package/dist/styles/wireframe-light.css +1253 -1228
- package/dist/types/components/Icon/Icon.d.ts +20 -7
- package/dist/types/components/Icon/Icon.d.ts.map +1 -1
- package/dist/types/components/Icon/iconRegistry.d.ts +109 -14
- package/dist/types/components/Icon/iconRegistry.d.ts.map +1 -1
- package/dist/types/components/Icon/index.d.ts +1 -1
- package/dist/types/components/Icon/index.d.ts.map +1 -1
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts +17 -12
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +1 -1
- package/dist/types/components/index.d.ts.map +1 -1
- package/package.json +3 -1
- package/skills/figma-to-code/SKILL.md +17 -2
|
@@ -2373,7 +2373,7 @@ body {
|
|
|
2373
2373
|
.muka-waveform {
|
|
2374
2374
|
display: flex;
|
|
2375
2375
|
align-items: center;
|
|
2376
|
-
gap: var(--
|
|
2376
|
+
gap: var(--size-3xs);
|
|
2377
2377
|
width: 100%;
|
|
2378
2378
|
min-width: 0;
|
|
2379
2379
|
}
|
|
@@ -3804,7 +3804,7 @@ body {
|
|
|
3804
3804
|
}
|
|
3805
3805
|
|
|
3806
3806
|
.muka-textarea__required {
|
|
3807
|
-
color: var(--color-state-error-
|
|
3807
|
+
color: var(--color-state-error-default);
|
|
3808
3808
|
}
|
|
3809
3809
|
|
|
3810
3810
|
/* Field container */
|
|
@@ -3917,7 +3917,7 @@ body {
|
|
|
3917
3917
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
3918
3918
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
3919
3919
|
line-height: var(--text-label-sm-regular-lineHeight);
|
|
3920
|
-
color: var(--color-state-error-
|
|
3920
|
+
color: var(--color-state-error-default);
|
|
3921
3921
|
margin: 0;
|
|
3922
3922
|
}
|
|
3923
3923
|
|
|
@@ -4041,7 +4041,7 @@ body {
|
|
|
4041
4041
|
align-items: center;
|
|
4042
4042
|
position: relative;
|
|
4043
4043
|
z-index: 2;
|
|
4044
|
-
border-bottom: 1px solid var(--color-border
|
|
4044
|
+
border-bottom: 1px solid var(--tabs-trigger-color-default-border);
|
|
4045
4045
|
}
|
|
4046
4046
|
|
|
4047
4047
|
/* Tab Trigger — clean underline style */
|
|
@@ -4059,7 +4059,7 @@ body {
|
|
|
4059
4059
|
white-space: nowrap;
|
|
4060
4060
|
position: relative;
|
|
4061
4061
|
z-index: 2;
|
|
4062
|
-
color: var(--
|
|
4062
|
+
color: var(--tabs-trigger-color-default-foreground);
|
|
4063
4063
|
|
|
4064
4064
|
/* Default MD size values */
|
|
4065
4065
|
height: 48px;
|
|
@@ -4091,12 +4091,12 @@ body {
|
|
|
4091
4091
|
|
|
4092
4092
|
/* Hover state */
|
|
4093
4093
|
.muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
|
|
4094
|
-
color: var(--color-
|
|
4094
|
+
color: var(--tabs-trigger-color-hover-foreground);
|
|
4095
4095
|
}
|
|
4096
4096
|
|
|
4097
4097
|
/* Current tab */
|
|
4098
4098
|
.muka-tabs__trigger--current {
|
|
4099
|
-
color: var(--color-
|
|
4099
|
+
color: var(--tabs-trigger-color-current-foreground);
|
|
4100
4100
|
}
|
|
4101
4101
|
|
|
4102
4102
|
/* Active bottom border (underline) */
|
|
@@ -4107,7 +4107,7 @@ body {
|
|
|
4107
4107
|
left: 0;
|
|
4108
4108
|
right: 0;
|
|
4109
4109
|
height: 3px;
|
|
4110
|
-
background-color: var(--color-
|
|
4110
|
+
background-color: var(--tabs-trigger-color-current-foreground);
|
|
4111
4111
|
border-bottom-left-radius: 1px;
|
|
4112
4112
|
border-bottom-right-radius: 1px;
|
|
4113
4113
|
border-top-left-radius: 3px;
|
|
@@ -4116,7 +4116,7 @@ body {
|
|
|
4116
4116
|
}
|
|
4117
4117
|
|
|
4118
4118
|
.muka-tabs__trigger--disabled {
|
|
4119
|
-
color: var(--color-
|
|
4119
|
+
color: var(--tabs-trigger-color-disabled-foreground);
|
|
4120
4120
|
cursor: not-allowed;
|
|
4121
4121
|
}
|
|
4122
4122
|
|
|
@@ -4238,7 +4238,7 @@ body {
|
|
|
4238
4238
|
======================================== */
|
|
4239
4239
|
|
|
4240
4240
|
.muka-table__body .muka-table__row {
|
|
4241
|
-
border-bottom: var(--border-width-regular) solid var(--color-border-
|
|
4241
|
+
border-bottom: var(--border-width-regular) solid var(--color-border-muted);
|
|
4242
4242
|
}
|
|
4243
4243
|
|
|
4244
4244
|
.muka-table__body .muka-table__row:last-child {
|
|
@@ -4250,11 +4250,11 @@ body {
|
|
|
4250
4250
|
}
|
|
4251
4251
|
|
|
4252
4252
|
.muka-table__body .muka-table__row--selected {
|
|
4253
|
-
background-color: var(--table-row-selected-background, var(--color-action-
|
|
4253
|
+
background-color: var(--table-row-selected-background, var(--color-action-default));
|
|
4254
4254
|
}
|
|
4255
4255
|
|
|
4256
4256
|
.muka-table__body .muka-table__row--selected:hover {
|
|
4257
|
-
background-color: var(--table-row-selected-background, var(--color-action-
|
|
4257
|
+
background-color: var(--table-row-selected-background, var(--color-action-default));
|
|
4258
4258
|
}
|
|
4259
4259
|
|
|
4260
4260
|
.muka-table__row--clickable {
|
|
@@ -4414,7 +4414,7 @@ body {
|
|
|
4414
4414
|
======================================== */
|
|
4415
4415
|
|
|
4416
4416
|
.muka-table__body .muka-table__row {
|
|
4417
|
-
border-bottom: var(--border-width-regular) solid var(--color-border-
|
|
4417
|
+
border-bottom: var(--border-width-regular) solid var(--color-border-muted);
|
|
4418
4418
|
}
|
|
4419
4419
|
|
|
4420
4420
|
.muka-table__body .muka-table__row:last-child {
|
|
@@ -4426,11 +4426,11 @@ body {
|
|
|
4426
4426
|
}
|
|
4427
4427
|
|
|
4428
4428
|
.muka-table__body .muka-table__row--selected {
|
|
4429
|
-
background-color: var(--table-row-selected-background, var(--color-action-
|
|
4429
|
+
background-color: var(--table-row-selected-background, var(--color-action-default));
|
|
4430
4430
|
}
|
|
4431
4431
|
|
|
4432
4432
|
.muka-table__body .muka-table__row--selected:hover {
|
|
4433
|
-
background-color: var(--table-row-selected-background, var(--color-action-
|
|
4433
|
+
background-color: var(--table-row-selected-background, var(--color-action-default));
|
|
4434
4434
|
}
|
|
4435
4435
|
|
|
4436
4436
|
.muka-table__row--clickable {
|
|
@@ -4621,107 +4621,22 @@ body {
|
|
|
4621
4621
|
|
|
4622
4622
|
.muka-swipe-actions__button--primary {
|
|
4623
4623
|
background-color: var(--color-action-default);
|
|
4624
|
-
color: var(--color-text-inverse
|
|
4624
|
+
color: var(--color-text-default-inverse);
|
|
4625
4625
|
}
|
|
4626
4626
|
|
|
4627
4627
|
.muka-swipe-actions__button--success {
|
|
4628
|
-
background-color: var(--color-state-success-default
|
|
4629
|
-
color: var(--color-text-inverse
|
|
4628
|
+
background-color: var(--color-state-success-default);
|
|
4629
|
+
color: var(--color-text-default-inverse);
|
|
4630
4630
|
}
|
|
4631
4631
|
|
|
4632
4632
|
.muka-swipe-actions__button--warning {
|
|
4633
|
-
background-color: var(--color-state-warning-default
|
|
4633
|
+
background-color: var(--color-state-warning-default);
|
|
4634
4634
|
color: var(--color-text-default-default);
|
|
4635
4635
|
}
|
|
4636
4636
|
|
|
4637
4637
|
.muka-swipe-actions__button--destructive {
|
|
4638
|
-
background-color: var(--color-state-error-default
|
|
4639
|
-
color: var(--color-text-inverse
|
|
4640
|
-
}
|
|
4641
|
-
|
|
4642
|
-
|
|
4643
|
-
/* SpecList */
|
|
4644
|
-
/* SpecList Component Styles */
|
|
4645
|
-
|
|
4646
|
-
.muka-spec-list {
|
|
4647
|
-
margin: 0;
|
|
4648
|
-
padding: 0;
|
|
4649
|
-
}
|
|
4650
|
-
|
|
4651
|
-
/* ─── Row ─────────────────────────────────────────────── */
|
|
4652
|
-
|
|
4653
|
-
.muka-spec-row {
|
|
4654
|
-
display: flex;
|
|
4655
|
-
align-items: flex-start;
|
|
4656
|
-
gap: var(--spacing-3);
|
|
4657
|
-
padding-bottom: var(--spacing-3);
|
|
4658
|
-
}
|
|
4659
|
-
|
|
4660
|
-
/* ─── Label ───────────────────────────────────────────── */
|
|
4661
|
-
|
|
4662
|
-
.muka-spec-row__label {
|
|
4663
|
-
flex: 0 0 auto;
|
|
4664
|
-
margin: 0;
|
|
4665
|
-
color: var(--color-text-subtle-default);
|
|
4666
|
-
font-family: var(--text-body-md-regular-fontFamily);
|
|
4667
|
-
font-weight: var(--text-body-md-regular-fontWeight);
|
|
4668
|
-
font-size: var(--text-body-md-regular-fontSize);
|
|
4669
|
-
line-height: var(--text-body-md-regular-lineHeight);
|
|
4670
|
-
overflow: hidden;
|
|
4671
|
-
text-overflow: ellipsis;
|
|
4672
|
-
white-space: nowrap;
|
|
4673
|
-
}
|
|
4674
|
-
|
|
4675
|
-
/* ─── Value ───────────────────────────────────────────── */
|
|
4676
|
-
|
|
4677
|
-
.muka-spec-row__value {
|
|
4678
|
-
flex: 1 1 0;
|
|
4679
|
-
min-width: 0;
|
|
4680
|
-
margin: 0;
|
|
4681
|
-
display: flex;
|
|
4682
|
-
flex-direction: column;
|
|
4683
|
-
color: var(--color-text-default-default);
|
|
4684
|
-
}
|
|
4685
|
-
|
|
4686
|
-
.muka-spec-row__value-text {
|
|
4687
|
-
font-family: var(--text-body-md-regular-fontFamily);
|
|
4688
|
-
font-weight: var(--text-body-md-regular-fontWeight);
|
|
4689
|
-
font-size: var(--text-body-md-regular-fontSize);
|
|
4690
|
-
line-height: var(--text-body-md-regular-lineHeight);
|
|
4691
|
-
}
|
|
4692
|
-
|
|
4693
|
-
.muka-spec-row__hint {
|
|
4694
|
-
color: var(--color-text-subtle-default);
|
|
4695
|
-
font-family: var(--text-body-sm-regular-fontFamily);
|
|
4696
|
-
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
4697
|
-
font-size: var(--text-body-sm-regular-fontSize);
|
|
4698
|
-
line-height: var(--text-body-sm-regular-lineHeight);
|
|
4699
|
-
}
|
|
4700
|
-
|
|
4701
|
-
/* ─── Label width (horizontal stacking) ───────────────── */
|
|
4702
|
-
|
|
4703
|
-
.muka-spec-list--label-small .muka-spec-row__label {
|
|
4704
|
-
width: 80px;
|
|
4705
|
-
}
|
|
4706
|
-
|
|
4707
|
-
.muka-spec-list--label-medium .muka-spec-row__label {
|
|
4708
|
-
width: 120px;
|
|
4709
|
-
}
|
|
4710
|
-
|
|
4711
|
-
.muka-spec-list--label-large .muka-spec-row__label {
|
|
4712
|
-
width: 160px;
|
|
4713
|
-
}
|
|
4714
|
-
|
|
4715
|
-
/* ─── Vertical stacking ───────────────────────────────── */
|
|
4716
|
-
|
|
4717
|
-
.muka-spec-list--vertical .muka-spec-row {
|
|
4718
|
-
flex-direction: column;
|
|
4719
|
-
gap: var(--spacing-1);
|
|
4720
|
-
}
|
|
4721
|
-
|
|
4722
|
-
.muka-spec-list--vertical .muka-spec-row__label {
|
|
4723
|
-
width: 100%;
|
|
4724
|
-
white-space: normal;
|
|
4638
|
+
background-color: var(--color-state-error-default);
|
|
4639
|
+
color: var(--color-text-default-inverse);
|
|
4725
4640
|
}
|
|
4726
4641
|
|
|
4727
4642
|
|
|
@@ -4741,7 +4656,7 @@ body {
|
|
|
4741
4656
|
}
|
|
4742
4657
|
|
|
4743
4658
|
.muka-spinner--inverse {
|
|
4744
|
-
color: var(--color-text-inverse
|
|
4659
|
+
color: var(--color-text-default-inverse);
|
|
4745
4660
|
}
|
|
4746
4661
|
|
|
4747
4662
|
.muka-spinner__circle {
|
|
@@ -4803,149 +4718,49 @@ body {
|
|
|
4803
4718
|
}
|
|
4804
4719
|
|
|
4805
4720
|
|
|
4806
|
-
/*
|
|
4807
|
-
/*
|
|
4808
|
-
|
|
4809
|
-
.muka-skeleton {
|
|
4810
|
-
background-color: var(--color-surface-level1);
|
|
4811
|
-
display: block;
|
|
4812
|
-
}
|
|
4813
|
-
|
|
4814
|
-
/* Variants */
|
|
4815
|
-
.muka-skeleton--text {
|
|
4816
|
-
height: 1em;
|
|
4817
|
-
border-radius: var(--radius-md);
|
|
4818
|
-
width: 100%;
|
|
4819
|
-
}
|
|
4820
|
-
|
|
4821
|
-
.muka-skeleton--circular {
|
|
4822
|
-
width: 2.5rem;
|
|
4823
|
-
height: 2.5rem;
|
|
4824
|
-
border-radius: var(--radius-full);
|
|
4825
|
-
}
|
|
4826
|
-
|
|
4827
|
-
.muka-skeleton--rectangular {
|
|
4828
|
-
height: 7.5rem;
|
|
4829
|
-
border-radius: var(--radius-md);
|
|
4830
|
-
width: 100%;
|
|
4831
|
-
}
|
|
4832
|
-
|
|
4833
|
-
/* Last line in multi-line text is shorter */
|
|
4834
|
-
.muka-skeleton--last-line {
|
|
4835
|
-
width: 80%;
|
|
4836
|
-
}
|
|
4721
|
+
/* SmsOtpField */
|
|
4722
|
+
/* SmsOtpField Component Styles - Using Muka Design Tokens */
|
|
4837
4723
|
|
|
4838
|
-
/*
|
|
4839
|
-
.muka-
|
|
4840
|
-
display: flex;
|
|
4724
|
+
/* Wrapper */
|
|
4725
|
+
.muka-sms-otp-field {
|
|
4726
|
+
display: inline-flex;
|
|
4841
4727
|
flex-direction: column;
|
|
4842
4728
|
gap: var(--spacing-2);
|
|
4843
4729
|
}
|
|
4844
4730
|
|
|
4845
|
-
/*
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
}
|
|
4850
|
-
100% {
|
|
4851
|
-
background-position: 200% 0;
|
|
4852
|
-
}
|
|
4853
|
-
}
|
|
4854
|
-
|
|
4855
|
-
.muka-skeleton--shimmer {
|
|
4856
|
-
background: linear-gradient(
|
|
4857
|
-
90deg,
|
|
4858
|
-
var(--color-surface-level1) 25%,
|
|
4859
|
-
var(--color-surface-level2) 50%,
|
|
4860
|
-
var(--color-surface-level1) 75%
|
|
4861
|
-
);
|
|
4862
|
-
background-size: 200% 100%;
|
|
4863
|
-
animation: muka-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
4864
|
-
}
|
|
4865
|
-
|
|
4866
|
-
/* Pulse animation */
|
|
4867
|
-
@keyframes muka-skeleton-pulse {
|
|
4868
|
-
0%, 100% {
|
|
4869
|
-
opacity: 1;
|
|
4870
|
-
}
|
|
4871
|
-
50% {
|
|
4872
|
-
opacity: 0.4;
|
|
4873
|
-
}
|
|
4874
|
-
}
|
|
4875
|
-
|
|
4876
|
-
.muka-skeleton--pulse {
|
|
4877
|
-
animation: muka-skeleton-pulse 1.5s ease-in-out infinite;
|
|
4878
|
-
}
|
|
4879
|
-
|
|
4880
|
-
|
|
4881
|
-
/* Sheet */
|
|
4882
|
-
/* Sheet Component Styles */
|
|
4883
|
-
|
|
4884
|
-
/* ─── Backdrop ────────────────────────────────────────── */
|
|
4885
|
-
|
|
4886
|
-
.muka-sheet__overlay {
|
|
4887
|
-
position: fixed;
|
|
4888
|
-
inset: 0;
|
|
4889
|
-
background-color: var(--color-surface-backdrop);
|
|
4890
|
-
z-index: 50;
|
|
4891
|
-
}
|
|
4892
|
-
|
|
4893
|
-
/* ─── Surface ─────────────────────────────────────────── */
|
|
4894
|
-
|
|
4895
|
-
.muka-sheet {
|
|
4896
|
-
position: fixed;
|
|
4897
|
-
left: 0;
|
|
4898
|
-
right: 0;
|
|
4899
|
-
bottom: 0;
|
|
4900
|
-
z-index: 51;
|
|
4901
|
-
|
|
4902
|
-
display: flex;
|
|
4903
|
-
flex-direction: column;
|
|
4904
|
-
|
|
4905
|
-
max-height: 96dvh;
|
|
4906
|
-
|
|
4907
|
-
background-color: var(--color-surface-level3);
|
|
4908
|
-
border-top-left-radius: var(--radius-lg);
|
|
4909
|
-
border-top-right-radius: var(--radius-lg);
|
|
4910
|
-
box-shadow: var(--shadow-level5);
|
|
4911
|
-
|
|
4912
|
-
outline: none;
|
|
4731
|
+
/* Label */
|
|
4732
|
+
.muka-sms-otp-field__label {
|
|
4733
|
+
color: var(--color-text-default-default);
|
|
4734
|
+
cursor: pointer;
|
|
4913
4735
|
}
|
|
4914
4736
|
|
|
4915
|
-
|
|
4916
|
-
|
|
4917
|
-
|
|
4737
|
+
.muka-sms-otp-field__label--sm {
|
|
4738
|
+
font-family: var(--text-label-sm-semibold-fontFamily);
|
|
4739
|
+
font-weight: var(--text-label-sm-semibold-fontWeight);
|
|
4740
|
+
font-size: var(--text-label-sm-semibold-fontSize);
|
|
4741
|
+
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
4918
4742
|
}
|
|
4919
4743
|
|
|
4920
|
-
|
|
4921
|
-
|
|
4922
|
-
|
|
4923
|
-
|
|
4924
|
-
|
|
4925
|
-
flex-shrink: 0;
|
|
4926
|
-
padding: var(--spacing-3) 0;
|
|
4744
|
+
.muka-sms-otp-field__label--md {
|
|
4745
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
4746
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
4747
|
+
font-size: var(--text-label-md-semibold-fontSize);
|
|
4748
|
+
line-height: var(--text-label-md-semibold-lineHeight);
|
|
4927
4749
|
}
|
|
4928
4750
|
|
|
4929
|
-
.muka-
|
|
4930
|
-
|
|
4931
|
-
|
|
4932
|
-
|
|
4933
|
-
|
|
4751
|
+
.muka-sms-otp-field__label--lg {
|
|
4752
|
+
font-family: var(--text-label-lg-semibold-fontFamily);
|
|
4753
|
+
font-weight: var(--text-label-lg-semibold-fontWeight);
|
|
4754
|
+
font-size: var(--text-label-lg-semibold-fontSize);
|
|
4755
|
+
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
4934
4756
|
}
|
|
4935
4757
|
|
|
4936
|
-
|
|
4937
|
-
|
|
4938
|
-
.muka-sheet__body {
|
|
4939
|
-
flex: 1 1 0%;
|
|
4940
|
-
min-height: 0;
|
|
4941
|
-
overflow-y: auto;
|
|
4942
|
-
-webkit-overflow-scrolling: touch;
|
|
4943
|
-
overscroll-behavior: contain;
|
|
4758
|
+
.muka-sms-otp-field__required {
|
|
4759
|
+
color: var(--color-state-error-default);
|
|
4944
4760
|
}
|
|
4945
4761
|
|
|
4946
|
-
/*
|
|
4947
|
-
|
|
4948
|
-
.muka-sheet__sr-title {
|
|
4762
|
+
/* Hidden input for browser autofill */
|
|
4763
|
+
.muka-sms-otp-field__hidden-input {
|
|
4949
4764
|
position: absolute;
|
|
4950
4765
|
width: 1px;
|
|
4951
4766
|
height: 1px;
|
|
@@ -4955,19 +4770,396 @@ body {
|
|
|
4955
4770
|
clip: rect(0, 0, 0, 0);
|
|
4956
4771
|
white-space: nowrap;
|
|
4957
4772
|
border: 0;
|
|
4773
|
+
opacity: 0;
|
|
4774
|
+
pointer-events: none;
|
|
4958
4775
|
}
|
|
4959
4776
|
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
.muka-select {
|
|
4965
|
-
display: inline-flex;
|
|
4966
|
-
flex-direction: column;
|
|
4777
|
+
/* Digits container */
|
|
4778
|
+
.muka-sms-otp-field__digits {
|
|
4779
|
+
display: flex;
|
|
4780
|
+
align-items: center;
|
|
4967
4781
|
gap: var(--spacing-2);
|
|
4968
4782
|
}
|
|
4969
4783
|
|
|
4970
|
-
|
|
4784
|
+
/* Separator */
|
|
4785
|
+
.muka-sms-otp-field__separator {
|
|
4786
|
+
display: inline-flex;
|
|
4787
|
+
align-items: center;
|
|
4788
|
+
justify-content: center;
|
|
4789
|
+
color: var(--color-text-subtle-default);
|
|
4790
|
+
font-size: 1.25rem;
|
|
4791
|
+
padding: 0 var(--spacing-1);
|
|
4792
|
+
user-select: none;
|
|
4793
|
+
}
|
|
4794
|
+
|
|
4795
|
+
/* Individual digit box */
|
|
4796
|
+
.muka-sms-otp-field__digit {
|
|
4797
|
+
display: flex;
|
|
4798
|
+
align-items: center;
|
|
4799
|
+
justify-content: center;
|
|
4800
|
+
text-align: center;
|
|
4801
|
+
background-color: var(--input-field-color-default-background);
|
|
4802
|
+
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
4803
|
+
color: var(--input-field-color-default-foreground);
|
|
4804
|
+
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
4805
|
+
box-sizing: border-box;
|
|
4806
|
+
caret-color: var(--input-field-color-focus-border);
|
|
4807
|
+
-moz-appearance: textfield;
|
|
4808
|
+
appearance: textfield;
|
|
4809
|
+
}
|
|
4810
|
+
|
|
4811
|
+
/* Remove spinner buttons */
|
|
4812
|
+
.muka-sms-otp-field__digit::-webkit-inner-spin-button,
|
|
4813
|
+
.muka-sms-otp-field__digit::-webkit-outer-spin-button {
|
|
4814
|
+
-webkit-appearance: none;
|
|
4815
|
+
margin: 0;
|
|
4816
|
+
}
|
|
4817
|
+
|
|
4818
|
+
/* Size variants */
|
|
4819
|
+
.muka-sms-otp-field__digit--sm {
|
|
4820
|
+
width: 36px;
|
|
4821
|
+
height: var(--input-field-height-sm);
|
|
4822
|
+
border-radius: var(--input-field-radius-sm);
|
|
4823
|
+
font-family: var(--text-input-sm-fontFamily);
|
|
4824
|
+
font-weight: var(--text-input-sm-fontWeight);
|
|
4825
|
+
font-size: var(--text-input-sm-fontSize);
|
|
4826
|
+
line-height: var(--text-input-sm-lineHeight);
|
|
4827
|
+
}
|
|
4828
|
+
|
|
4829
|
+
.muka-sms-otp-field__digit--md {
|
|
4830
|
+
width: 44px;
|
|
4831
|
+
height: var(--input-field-height-default);
|
|
4832
|
+
border-radius: var(--input-field-radius-md);
|
|
4833
|
+
font-family: var(--text-input-md-fontFamily);
|
|
4834
|
+
font-weight: var(--text-input-md-fontWeight);
|
|
4835
|
+
font-size: var(--text-input-md-fontSize);
|
|
4836
|
+
line-height: var(--text-input-md-lineHeight);
|
|
4837
|
+
}
|
|
4838
|
+
|
|
4839
|
+
.muka-sms-otp-field__digit--lg {
|
|
4840
|
+
width: 52px;
|
|
4841
|
+
height: var(--input-field-height-lg);
|
|
4842
|
+
border-radius: var(--input-field-radius-lg);
|
|
4843
|
+
font-family: var(--text-input-lg-fontFamily);
|
|
4844
|
+
font-weight: var(--text-input-lg-fontWeight);
|
|
4845
|
+
font-size: var(--text-input-lg-fontSize);
|
|
4846
|
+
line-height: var(--text-input-lg-lineHeight);
|
|
4847
|
+
}
|
|
4848
|
+
|
|
4849
|
+
/* Inset shadow (matches Input component) */
|
|
4850
|
+
.muka-sms-otp-field__digit::after {
|
|
4851
|
+
content: '';
|
|
4852
|
+
position: absolute;
|
|
4853
|
+
inset: 0;
|
|
4854
|
+
border-radius: inherit;
|
|
4855
|
+
box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
|
|
4856
|
+
pointer-events: none;
|
|
4857
|
+
}
|
|
4858
|
+
|
|
4859
|
+
/* Focus state */
|
|
4860
|
+
.muka-sms-otp-field__digit--focused:not(.muka-sms-otp-field__digit--disabled) {
|
|
4861
|
+
border-width: var(--border-width-bold);
|
|
4862
|
+
border-color: var(--input-field-color-focus-border);
|
|
4863
|
+
background-color: var(--input-field-color-focus-background);
|
|
4864
|
+
outline: none;
|
|
4865
|
+
}
|
|
4866
|
+
|
|
4867
|
+
/* Also handle native :focus for keyboard navigation */
|
|
4868
|
+
.muka-sms-otp-field__digit:focus {
|
|
4869
|
+
outline: none;
|
|
4870
|
+
}
|
|
4871
|
+
|
|
4872
|
+
/* Error state */
|
|
4873
|
+
.muka-sms-otp-field__digit--error:not(.muka-sms-otp-field__digit--disabled) {
|
|
4874
|
+
border-width: var(--border-width-bold);
|
|
4875
|
+
border-color: var(--input-field-color-error-border);
|
|
4876
|
+
background-color: var(--input-field-color-error-background);
|
|
4877
|
+
}
|
|
4878
|
+
|
|
4879
|
+
/* Disabled state */
|
|
4880
|
+
.muka-sms-otp-field__digit--disabled {
|
|
4881
|
+
background-color: var(--input-field-color-disabled-background);
|
|
4882
|
+
border-color: var(--input-field-color-disabled-border);
|
|
4883
|
+
color: var(--input-field-color-disabled-foreground);
|
|
4884
|
+
cursor: not-allowed;
|
|
4885
|
+
}
|
|
4886
|
+
|
|
4887
|
+
/* Filled state — slightly bolder text */
|
|
4888
|
+
.muka-sms-otp-field__digit--filled {
|
|
4889
|
+
color: var(--input-field-color-default-foreground);
|
|
4890
|
+
}
|
|
4891
|
+
|
|
4892
|
+
/* Helper text */
|
|
4893
|
+
.muka-sms-otp-field__helper {
|
|
4894
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
4895
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
4896
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
4897
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
4898
|
+
color: var(--color-text-subtle-default);
|
|
4899
|
+
margin: 0;
|
|
4900
|
+
}
|
|
4901
|
+
|
|
4902
|
+
/* Error message */
|
|
4903
|
+
.muka-sms-otp-field__error {
|
|
4904
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
4905
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
4906
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
4907
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
4908
|
+
color: var(--color-state-error-default);
|
|
4909
|
+
margin: 0;
|
|
4910
|
+
}
|
|
4911
|
+
|
|
4912
|
+
|
|
4913
|
+
/* SpecList */
|
|
4914
|
+
/* SpecList Component Styles */
|
|
4915
|
+
|
|
4916
|
+
.muka-spec-list {
|
|
4917
|
+
margin: 0;
|
|
4918
|
+
padding: 0;
|
|
4919
|
+
}
|
|
4920
|
+
|
|
4921
|
+
/* ─── Row ─────────────────────────────────────────────── */
|
|
4922
|
+
|
|
4923
|
+
.muka-spec-row {
|
|
4924
|
+
display: flex;
|
|
4925
|
+
align-items: flex-start;
|
|
4926
|
+
gap: var(--spacing-3);
|
|
4927
|
+
padding-bottom: var(--spacing-3);
|
|
4928
|
+
}
|
|
4929
|
+
|
|
4930
|
+
/* ─── Label ───────────────────────────────────────────── */
|
|
4931
|
+
|
|
4932
|
+
.muka-spec-row__label {
|
|
4933
|
+
flex: 0 0 auto;
|
|
4934
|
+
margin: 0;
|
|
4935
|
+
color: var(--color-text-subtle-default);
|
|
4936
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
4937
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
4938
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
4939
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
4940
|
+
overflow: hidden;
|
|
4941
|
+
text-overflow: ellipsis;
|
|
4942
|
+
white-space: nowrap;
|
|
4943
|
+
}
|
|
4944
|
+
|
|
4945
|
+
/* ─── Value ───────────────────────────────────────────── */
|
|
4946
|
+
|
|
4947
|
+
.muka-spec-row__value {
|
|
4948
|
+
flex: 1 1 0;
|
|
4949
|
+
min-width: 0;
|
|
4950
|
+
margin: 0;
|
|
4951
|
+
display: flex;
|
|
4952
|
+
flex-direction: column;
|
|
4953
|
+
color: var(--color-text-default-default);
|
|
4954
|
+
}
|
|
4955
|
+
|
|
4956
|
+
.muka-spec-row__value-text {
|
|
4957
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
4958
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
4959
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
4960
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
4961
|
+
}
|
|
4962
|
+
|
|
4963
|
+
.muka-spec-row__hint {
|
|
4964
|
+
color: var(--color-text-subtle-default);
|
|
4965
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
4966
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
4967
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
4968
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
4969
|
+
}
|
|
4970
|
+
|
|
4971
|
+
/* ─── Label width (horizontal stacking) ───────────────── */
|
|
4972
|
+
|
|
4973
|
+
.muka-spec-list--label-small .muka-spec-row__label {
|
|
4974
|
+
width: 80px;
|
|
4975
|
+
}
|
|
4976
|
+
|
|
4977
|
+
.muka-spec-list--label-medium .muka-spec-row__label {
|
|
4978
|
+
width: 120px;
|
|
4979
|
+
}
|
|
4980
|
+
|
|
4981
|
+
.muka-spec-list--label-large .muka-spec-row__label {
|
|
4982
|
+
width: 160px;
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
/* ─── Vertical stacking ───────────────────────────────── */
|
|
4986
|
+
|
|
4987
|
+
.muka-spec-list--vertical .muka-spec-row {
|
|
4988
|
+
flex-direction: column;
|
|
4989
|
+
gap: var(--spacing-1);
|
|
4990
|
+
}
|
|
4991
|
+
|
|
4992
|
+
.muka-spec-list--vertical .muka-spec-row__label {
|
|
4993
|
+
width: 100%;
|
|
4994
|
+
white-space: normal;
|
|
4995
|
+
}
|
|
4996
|
+
|
|
4997
|
+
|
|
4998
|
+
/* Skeleton */
|
|
4999
|
+
/* Skeleton Component Styles */
|
|
5000
|
+
|
|
5001
|
+
.muka-skeleton {
|
|
5002
|
+
background-color: var(--color-surface-level1);
|
|
5003
|
+
display: block;
|
|
5004
|
+
}
|
|
5005
|
+
|
|
5006
|
+
/* Variants */
|
|
5007
|
+
.muka-skeleton--text {
|
|
5008
|
+
height: 1em;
|
|
5009
|
+
border-radius: var(--radius-md);
|
|
5010
|
+
width: 100%;
|
|
5011
|
+
}
|
|
5012
|
+
|
|
5013
|
+
.muka-skeleton--circular {
|
|
5014
|
+
width: 2.5rem;
|
|
5015
|
+
height: 2.5rem;
|
|
5016
|
+
border-radius: var(--radius-full);
|
|
5017
|
+
}
|
|
5018
|
+
|
|
5019
|
+
.muka-skeleton--rectangular {
|
|
5020
|
+
height: 7.5rem;
|
|
5021
|
+
border-radius: var(--radius-md);
|
|
5022
|
+
width: 100%;
|
|
5023
|
+
}
|
|
5024
|
+
|
|
5025
|
+
/* Last line in multi-line text is shorter */
|
|
5026
|
+
.muka-skeleton--last-line {
|
|
5027
|
+
width: 80%;
|
|
5028
|
+
}
|
|
5029
|
+
|
|
5030
|
+
/* Lines container */
|
|
5031
|
+
.muka-skeleton__lines {
|
|
5032
|
+
display: flex;
|
|
5033
|
+
flex-direction: column;
|
|
5034
|
+
gap: var(--spacing-2);
|
|
5035
|
+
}
|
|
5036
|
+
|
|
5037
|
+
/* Shimmer animation */
|
|
5038
|
+
@keyframes muka-skeleton-shimmer {
|
|
5039
|
+
0% {
|
|
5040
|
+
background-position: -200% 0;
|
|
5041
|
+
}
|
|
5042
|
+
100% {
|
|
5043
|
+
background-position: 200% 0;
|
|
5044
|
+
}
|
|
5045
|
+
}
|
|
5046
|
+
|
|
5047
|
+
.muka-skeleton--shimmer {
|
|
5048
|
+
background: linear-gradient(
|
|
5049
|
+
90deg,
|
|
5050
|
+
var(--color-surface-level1) 25%,
|
|
5051
|
+
var(--color-surface-level2) 50%,
|
|
5052
|
+
var(--color-surface-level1) 75%
|
|
5053
|
+
);
|
|
5054
|
+
background-size: 200% 100%;
|
|
5055
|
+
animation: muka-skeleton-shimmer 1.5s ease-in-out infinite;
|
|
5056
|
+
}
|
|
5057
|
+
|
|
5058
|
+
/* Pulse animation */
|
|
5059
|
+
@keyframes muka-skeleton-pulse {
|
|
5060
|
+
0%, 100% {
|
|
5061
|
+
opacity: 1;
|
|
5062
|
+
}
|
|
5063
|
+
50% {
|
|
5064
|
+
opacity: 0.4;
|
|
5065
|
+
}
|
|
5066
|
+
}
|
|
5067
|
+
|
|
5068
|
+
.muka-skeleton--pulse {
|
|
5069
|
+
animation: muka-skeleton-pulse 1.5s ease-in-out infinite;
|
|
5070
|
+
}
|
|
5071
|
+
|
|
5072
|
+
|
|
5073
|
+
/* Sheet */
|
|
5074
|
+
/* Sheet Component Styles */
|
|
5075
|
+
|
|
5076
|
+
/* ─── Backdrop ────────────────────────────────────────── */
|
|
5077
|
+
|
|
5078
|
+
.muka-sheet__overlay {
|
|
5079
|
+
position: fixed;
|
|
5080
|
+
inset: 0;
|
|
5081
|
+
background-color: var(--color-surface-backdrop);
|
|
5082
|
+
z-index: 50;
|
|
5083
|
+
}
|
|
5084
|
+
|
|
5085
|
+
/* ─── Surface ─────────────────────────────────────────── */
|
|
5086
|
+
|
|
5087
|
+
.muka-sheet {
|
|
5088
|
+
position: fixed;
|
|
5089
|
+
left: 0;
|
|
5090
|
+
right: 0;
|
|
5091
|
+
bottom: 0;
|
|
5092
|
+
z-index: 51;
|
|
5093
|
+
|
|
5094
|
+
display: flex;
|
|
5095
|
+
flex-direction: column;
|
|
5096
|
+
|
|
5097
|
+
max-height: 96dvh;
|
|
5098
|
+
|
|
5099
|
+
background-color: var(--color-surface-level3);
|
|
5100
|
+
border-top-left-radius: var(--radius-lg);
|
|
5101
|
+
border-top-right-radius: var(--radius-lg);
|
|
5102
|
+
box-shadow: var(--shadow-level5);
|
|
5103
|
+
|
|
5104
|
+
outline: none;
|
|
5105
|
+
}
|
|
5106
|
+
|
|
5107
|
+
/* Safe-area bottom inset for the iPhone home indicator. */
|
|
5108
|
+
.muka-sheet:not(.muka-sheet--no-safe-area) {
|
|
5109
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
5110
|
+
}
|
|
5111
|
+
|
|
5112
|
+
/* ─── Drag handle ─────────────────────────────────────── */
|
|
5113
|
+
|
|
5114
|
+
.muka-sheet__handle-container {
|
|
5115
|
+
display: flex;
|
|
5116
|
+
justify-content: center;
|
|
5117
|
+
flex-shrink: 0;
|
|
5118
|
+
padding: var(--spacing-3) 0;
|
|
5119
|
+
}
|
|
5120
|
+
|
|
5121
|
+
.muka-sheet__handle {
|
|
5122
|
+
width: var(--dialog-drag-handle-width);
|
|
5123
|
+
height: var(--dialog-drag-handle-height);
|
|
5124
|
+
background-color: var(--dialog-drag-handle-color);
|
|
5125
|
+
border-radius: var(--dialog-drag-handle-radius);
|
|
5126
|
+
}
|
|
5127
|
+
|
|
5128
|
+
/* ─── Body (scrollable) ───────────────────────────────── */
|
|
5129
|
+
|
|
5130
|
+
.muka-sheet__body {
|
|
5131
|
+
flex: 1 1 0%;
|
|
5132
|
+
min-height: 0;
|
|
5133
|
+
overflow-y: auto;
|
|
5134
|
+
-webkit-overflow-scrolling: touch;
|
|
5135
|
+
overscroll-behavior: contain;
|
|
5136
|
+
}
|
|
5137
|
+
|
|
5138
|
+
/* ─── Visually-hidden title (a11y) ────────────────────── */
|
|
5139
|
+
|
|
5140
|
+
.muka-sheet__sr-title {
|
|
5141
|
+
position: absolute;
|
|
5142
|
+
width: 1px;
|
|
5143
|
+
height: 1px;
|
|
5144
|
+
padding: 0;
|
|
5145
|
+
margin: -1px;
|
|
5146
|
+
overflow: hidden;
|
|
5147
|
+
clip: rect(0, 0, 0, 0);
|
|
5148
|
+
white-space: nowrap;
|
|
5149
|
+
border: 0;
|
|
5150
|
+
}
|
|
5151
|
+
|
|
5152
|
+
|
|
5153
|
+
/* Select */
|
|
5154
|
+
/* Select Component Styles - Aligned with Input for consistency */
|
|
5155
|
+
|
|
5156
|
+
.muka-select {
|
|
5157
|
+
display: inline-flex;
|
|
5158
|
+
flex-direction: column;
|
|
5159
|
+
gap: var(--spacing-2);
|
|
5160
|
+
}
|
|
5161
|
+
|
|
5162
|
+
.muka-select--full-width {
|
|
4971
5163
|
width: 100%;
|
|
4972
5164
|
}
|
|
4973
5165
|
|
|
@@ -4999,7 +5191,7 @@ body {
|
|
|
4999
5191
|
}
|
|
5000
5192
|
|
|
5001
5193
|
.muka-select__required {
|
|
5002
|
-
color: var(--color-state-error-
|
|
5194
|
+
color: var(--color-state-error-default);
|
|
5003
5195
|
}
|
|
5004
5196
|
|
|
5005
5197
|
.muka-select__label--sm + .muka-select__field--disabled,
|
|
@@ -5147,7 +5339,7 @@ body {
|
|
|
5147
5339
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
5148
5340
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
5149
5341
|
line-height: var(--text-label-sm-regular-lineHeight);
|
|
5150
|
-
color: var(--color-state-error-
|
|
5342
|
+
color: var(--color-state-error-default);
|
|
5151
5343
|
margin: 0;
|
|
5152
5344
|
}
|
|
5153
5345
|
|
|
@@ -5340,29 +5532,6 @@ body {
|
|
|
5340
5532
|
}
|
|
5341
5533
|
|
|
5342
5534
|
|
|
5343
|
-
/* Section */
|
|
5344
|
-
/* Section Component - Layout tokens (section.padding) */
|
|
5345
|
-
|
|
5346
|
-
.muka-section {
|
|
5347
|
-
box-sizing: border-box;
|
|
5348
|
-
}
|
|
5349
|
-
|
|
5350
|
-
.muka-section--padding-compact {
|
|
5351
|
-
padding-block: var(--section-padding-vertical-compact);
|
|
5352
|
-
padding-inline: var(--section-padding-horizontal-compact);
|
|
5353
|
-
}
|
|
5354
|
-
|
|
5355
|
-
.muka-section--padding-default {
|
|
5356
|
-
padding-block: var(--section-padding-vertical-default);
|
|
5357
|
-
padding-inline: var(--section-padding-horizontal-default);
|
|
5358
|
-
}
|
|
5359
|
-
|
|
5360
|
-
.muka-section--padding-spacious {
|
|
5361
|
-
padding-block: var(--section-padding-vertical-spacious);
|
|
5362
|
-
padding-inline: var(--section-padding-horizontal-spacious);
|
|
5363
|
-
}
|
|
5364
|
-
|
|
5365
|
-
|
|
5366
5535
|
/* SearchInput */
|
|
5367
5536
|
/* SearchInput Component Styles */
|
|
5368
5537
|
|
|
@@ -5446,10 +5615,10 @@ body {
|
|
|
5446
5615
|
outline: none;
|
|
5447
5616
|
padding: 0;
|
|
5448
5617
|
color: var(--color-text-default-default);
|
|
5449
|
-
font-family: var(--text-body-
|
|
5450
|
-
font-weight: var(--text-body-
|
|
5451
|
-
font-size: var(--text-body-
|
|
5452
|
-
line-height: var(--text-body-
|
|
5618
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
5619
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
5620
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
5621
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
5453
5622
|
appearance: none;
|
|
5454
5623
|
-webkit-appearance: none;
|
|
5455
5624
|
}
|
|
@@ -5532,6 +5701,79 @@ body {
|
|
|
5532
5701
|
}
|
|
5533
5702
|
|
|
5534
5703
|
|
|
5704
|
+
/* Section */
|
|
5705
|
+
/* Section Component - Layout tokens (section.padding) */
|
|
5706
|
+
|
|
5707
|
+
.muka-section {
|
|
5708
|
+
box-sizing: border-box;
|
|
5709
|
+
}
|
|
5710
|
+
|
|
5711
|
+
.muka-section--padding-compact {
|
|
5712
|
+
padding-block: var(--section-padding-vertical-compact);
|
|
5713
|
+
padding-inline: var(--section-padding-horizontal-compact);
|
|
5714
|
+
}
|
|
5715
|
+
|
|
5716
|
+
.muka-section--padding-default {
|
|
5717
|
+
padding-block: var(--section-padding-vertical-default);
|
|
5718
|
+
padding-inline: var(--section-padding-horizontal-default);
|
|
5719
|
+
}
|
|
5720
|
+
|
|
5721
|
+
.muka-section--padding-spacious {
|
|
5722
|
+
padding-block: var(--section-padding-vertical-spacious);
|
|
5723
|
+
padding-inline: var(--section-padding-horizontal-spacious);
|
|
5724
|
+
}
|
|
5725
|
+
|
|
5726
|
+
|
|
5727
|
+
/* RecordingBar */
|
|
5728
|
+
/* RecordingBar Component Styles */
|
|
5729
|
+
|
|
5730
|
+
.muka-recording-bar {
|
|
5731
|
+
display: flex;
|
|
5732
|
+
align-items: center;
|
|
5733
|
+
gap: var(--spacing-3);
|
|
5734
|
+
width: 100%;
|
|
5735
|
+
min-width: 0;
|
|
5736
|
+
}
|
|
5737
|
+
|
|
5738
|
+
.muka-recording-bar__dot {
|
|
5739
|
+
flex: 0 0 auto;
|
|
5740
|
+
width: 0.625rem;
|
|
5741
|
+
height: 0.625rem;
|
|
5742
|
+
border-radius: var(--radius-full, 9999px);
|
|
5743
|
+
background: var(--alert-color-error-accent, var(--color-text-default-default));
|
|
5744
|
+
animation: muka-recording-bar-pulse 1s ease-in-out infinite;
|
|
5745
|
+
}
|
|
5746
|
+
|
|
5747
|
+
.muka-recording-bar__time {
|
|
5748
|
+
flex: 0 0 auto;
|
|
5749
|
+
font-size: var(--text-label-sm-fontSize, 0.75rem);
|
|
5750
|
+
line-height: var(--text-label-sm-lineHeight, 1);
|
|
5751
|
+
font-variant-numeric: tabular-nums;
|
|
5752
|
+
color: var(--color-text-default-default);
|
|
5753
|
+
}
|
|
5754
|
+
|
|
5755
|
+
.muka-recording-bar__wave {
|
|
5756
|
+
flex: 1 1 auto;
|
|
5757
|
+
min-width: 0;
|
|
5758
|
+
}
|
|
5759
|
+
|
|
5760
|
+
@keyframes muka-recording-bar-pulse {
|
|
5761
|
+
0%,
|
|
5762
|
+
100% {
|
|
5763
|
+
opacity: 1;
|
|
5764
|
+
}
|
|
5765
|
+
50% {
|
|
5766
|
+
opacity: 0.3;
|
|
5767
|
+
}
|
|
5768
|
+
}
|
|
5769
|
+
|
|
5770
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5771
|
+
.muka-recording-bar__dot {
|
|
5772
|
+
animation: none;
|
|
5773
|
+
}
|
|
5774
|
+
}
|
|
5775
|
+
|
|
5776
|
+
|
|
5535
5777
|
/* Scrollbar */
|
|
5536
5778
|
/* Scrollbar — Figma menu scrollbar (32px rail, chevrons, grip thumb) */
|
|
5537
5779
|
|
|
@@ -5651,61 +5893,11 @@ body {
|
|
|
5651
5893
|
border-radius: var(--border-radius-md);
|
|
5652
5894
|
background-color: var(--color-text-subtle-default);
|
|
5653
5895
|
}
|
|
5654
|
-
|
|
5655
|
-
.muka-scrollbar__spacer {
|
|
5656
|
-
flex: 1 1 auto;
|
|
5657
|
-
min-height: 0;
|
|
5658
|
-
background-color: var(--color-surface-level2);
|
|
5659
|
-
}
|
|
5660
|
-
|
|
5661
|
-
|
|
5662
|
-
/* RecordingBar */
|
|
5663
|
-
/* RecordingBar Component Styles */
|
|
5664
|
-
|
|
5665
|
-
.muka-recording-bar {
|
|
5666
|
-
display: flex;
|
|
5667
|
-
align-items: center;
|
|
5668
|
-
gap: var(--spacing-3);
|
|
5669
|
-
width: 100%;
|
|
5670
|
-
min-width: 0;
|
|
5671
|
-
}
|
|
5672
|
-
|
|
5673
|
-
.muka-recording-bar__dot {
|
|
5674
|
-
flex: 0 0 auto;
|
|
5675
|
-
width: 0.625rem;
|
|
5676
|
-
height: 0.625rem;
|
|
5677
|
-
border-radius: var(--radius-full, 9999px);
|
|
5678
|
-
background: var(--alert-color-error-accent, var(--color-text-default-default));
|
|
5679
|
-
animation: muka-recording-bar-pulse 1s ease-in-out infinite;
|
|
5680
|
-
}
|
|
5681
|
-
|
|
5682
|
-
.muka-recording-bar__time {
|
|
5683
|
-
flex: 0 0 auto;
|
|
5684
|
-
font-size: var(--text-label-sm-fontSize, 0.75rem);
|
|
5685
|
-
line-height: var(--text-label-sm-lineHeight, 1);
|
|
5686
|
-
font-variant-numeric: tabular-nums;
|
|
5687
|
-
color: var(--color-text-default-default);
|
|
5688
|
-
}
|
|
5689
|
-
|
|
5690
|
-
.muka-recording-bar__wave {
|
|
5691
|
-
flex: 1 1 auto;
|
|
5692
|
-
min-width: 0;
|
|
5693
|
-
}
|
|
5694
|
-
|
|
5695
|
-
@keyframes muka-recording-bar-pulse {
|
|
5696
|
-
0%,
|
|
5697
|
-
100% {
|
|
5698
|
-
opacity: 1;
|
|
5699
|
-
}
|
|
5700
|
-
50% {
|
|
5701
|
-
opacity: 0.3;
|
|
5702
|
-
}
|
|
5703
|
-
}
|
|
5704
|
-
|
|
5705
|
-
@media (prefers-reduced-motion: reduce) {
|
|
5706
|
-
.muka-recording-bar__dot {
|
|
5707
|
-
animation: none;
|
|
5708
|
-
}
|
|
5896
|
+
|
|
5897
|
+
.muka-scrollbar__spacer {
|
|
5898
|
+
flex: 1 1 auto;
|
|
5899
|
+
min-height: 0;
|
|
5900
|
+
background-color: var(--color-surface-level2);
|
|
5709
5901
|
}
|
|
5710
5902
|
|
|
5711
5903
|
|
|
@@ -6068,6 +6260,53 @@ body {
|
|
|
6068
6260
|
}
|
|
6069
6261
|
|
|
6070
6262
|
|
|
6263
|
+
/* PullToRefresh */
|
|
6264
|
+
/* PullToRefresh Component Styles */
|
|
6265
|
+
|
|
6266
|
+
.muka-pull-to-refresh {
|
|
6267
|
+
position: relative;
|
|
6268
|
+
display: flex;
|
|
6269
|
+
flex-direction: column;
|
|
6270
|
+
width: 100%;
|
|
6271
|
+
height: 100%;
|
|
6272
|
+
overflow: hidden;
|
|
6273
|
+
}
|
|
6274
|
+
|
|
6275
|
+
.muka-pull-to-refresh__indicator {
|
|
6276
|
+
position: absolute;
|
|
6277
|
+
top: 0;
|
|
6278
|
+
left: 0;
|
|
6279
|
+
right: 0;
|
|
6280
|
+
display: flex;
|
|
6281
|
+
align-items: flex-end;
|
|
6282
|
+
justify-content: center;
|
|
6283
|
+
padding-bottom: var(--spacing-2);
|
|
6284
|
+
color: var(--color-text-subtle-default);
|
|
6285
|
+
overflow: hidden;
|
|
6286
|
+
pointer-events: none;
|
|
6287
|
+
z-index: 1;
|
|
6288
|
+
}
|
|
6289
|
+
|
|
6290
|
+
.muka-pull-to-refresh__chevron {
|
|
6291
|
+
display: inline-flex;
|
|
6292
|
+
align-items: center;
|
|
6293
|
+
justify-content: center;
|
|
6294
|
+
transition: transform 0.16s ease;
|
|
6295
|
+
}
|
|
6296
|
+
|
|
6297
|
+
.muka-pull-to-refresh__scroller {
|
|
6298
|
+
flex: 1 1 auto;
|
|
6299
|
+
min-height: 0;
|
|
6300
|
+
width: 100%;
|
|
6301
|
+
overflow-x: clip;
|
|
6302
|
+
overflow-y: auto;
|
|
6303
|
+
-webkit-overflow-scrolling: touch;
|
|
6304
|
+
overscroll-behavior-y: contain;
|
|
6305
|
+
touch-action: pan-y;
|
|
6306
|
+
will-change: transform;
|
|
6307
|
+
}
|
|
6308
|
+
|
|
6309
|
+
|
|
6071
6310
|
/* Radio */
|
|
6072
6311
|
/* Radio Component Styles - Using Muka Design Tokens */
|
|
6073
6312
|
|
|
@@ -6212,50 +6451,247 @@ body {
|
|
|
6212
6451
|
}
|
|
6213
6452
|
|
|
6214
6453
|
|
|
6215
|
-
/*
|
|
6216
|
-
/*
|
|
6454
|
+
/* ProgressAccordeon */
|
|
6455
|
+
/* ProgressAccordeon Component Styles — Using Muka Design Tokens */
|
|
6217
6456
|
|
|
6218
|
-
|
|
6219
|
-
|
|
6457
|
+
/* ─── Root ──────────────────────────────────────────────── */
|
|
6458
|
+
.muka-progress-accordeon {
|
|
6459
|
+
container-type: inline-size;
|
|
6220
6460
|
display: flex;
|
|
6221
6461
|
flex-direction: column;
|
|
6462
|
+
align-items: stretch;
|
|
6222
6463
|
width: 100%;
|
|
6223
|
-
|
|
6224
|
-
|
|
6464
|
+
/* Top padding provides the vertical rhythm between stacked steps */
|
|
6465
|
+
padding-top: var(--spacing-8);
|
|
6225
6466
|
}
|
|
6226
6467
|
|
|
6227
|
-
|
|
6228
|
-
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6468
|
+
/* Per-state gap: content-bearing steps are tighter, header-only steps looser */
|
|
6469
|
+
.muka-progress-accordeon--current,
|
|
6470
|
+
.muka-progress-accordeon--past.muka-progress-accordeon--expanded,
|
|
6471
|
+
.muka-progress-accordeon--upcoming.muka-progress-accordeon--expanded {
|
|
6472
|
+
gap: var(--spacing-6);
|
|
6473
|
+
}
|
|
6474
|
+
|
|
6475
|
+
.muka-progress-accordeon--upcoming,
|
|
6476
|
+
.muka-progress-accordeon--past.muka-progress-accordeon--collapsed,
|
|
6477
|
+
.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
|
|
6478
|
+
gap: var(--spacing-8);
|
|
6479
|
+
}
|
|
6480
|
+
|
|
6481
|
+
/* Collapsible steps group header + slot. The header↔content gap lives inside the
|
|
6482
|
+
collapsing slot (as padding-top) so it collapses with the content, so the
|
|
6483
|
+
body gap itself is 0. */
|
|
6484
|
+
.muka-progress-accordeon__body {
|
|
6232
6485
|
display: flex;
|
|
6233
|
-
|
|
6234
|
-
|
|
6235
|
-
|
|
6236
|
-
color: var(--color-text-subtle-default);
|
|
6237
|
-
overflow: hidden;
|
|
6238
|
-
pointer-events: none;
|
|
6239
|
-
z-index: 1;
|
|
6486
|
+
flex-direction: column;
|
|
6487
|
+
gap: 0;
|
|
6488
|
+
width: 100%;
|
|
6240
6489
|
}
|
|
6241
6490
|
|
|
6242
|
-
|
|
6243
|
-
|
|
6491
|
+
/* ─── Header ─────────────────────────────────────────────── */
|
|
6492
|
+
.muka-progress-accordeon__header {
|
|
6493
|
+
display: flex;
|
|
6494
|
+
flex-direction: column;
|
|
6495
|
+
gap: var(--spacing-3);
|
|
6496
|
+
width: 100%;
|
|
6497
|
+
}
|
|
6498
|
+
|
|
6499
|
+
.muka-progress-accordeon__header-row {
|
|
6500
|
+
display: flex;
|
|
6501
|
+
align-items: flex-start;
|
|
6502
|
+
gap: var(--spacing-3);
|
|
6503
|
+
width: 100%;
|
|
6504
|
+
min-height: 40px;
|
|
6505
|
+
}
|
|
6506
|
+
|
|
6507
|
+
.muka-progress-accordeon__heading-group {
|
|
6508
|
+
display: flex;
|
|
6509
|
+
flex: 1 0 0;
|
|
6510
|
+
min-width: 0;
|
|
6511
|
+
align-items: flex-start;
|
|
6512
|
+
gap: var(--spacing-4);
|
|
6513
|
+
}
|
|
6514
|
+
|
|
6515
|
+
/* Steps with header controls (edit / chevron) are 40px tall; nudge the heading
|
|
6516
|
+
so a single line centres against the indicator + controls row. */
|
|
6517
|
+
.muka-progress-accordeon:has(.muka-progress-accordeon__controls)
|
|
6518
|
+
.muka-progress-accordeon__heading-group {
|
|
6519
|
+
padding-top: var(--spacing-1);
|
|
6520
|
+
}
|
|
6521
|
+
|
|
6522
|
+
.muka-progress-accordeon__controls {
|
|
6523
|
+
display: flex;
|
|
6524
|
+
flex-shrink: 0;
|
|
6525
|
+
align-items: center;
|
|
6526
|
+
gap: var(--spacing-3);
|
|
6527
|
+
}
|
|
6528
|
+
|
|
6529
|
+
/* ─── Step indicator (circle) ───────────────────────────── */
|
|
6530
|
+
.muka-progress-accordeon__indicator {
|
|
6531
|
+
width: 32px;
|
|
6532
|
+
height: 32px;
|
|
6533
|
+
flex-shrink: 0;
|
|
6534
|
+
border-radius: var(--border-radius-full);
|
|
6535
|
+
display: flex;
|
|
6244
6536
|
align-items: center;
|
|
6245
6537
|
justify-content: center;
|
|
6246
|
-
transition: transform 0.16s ease;
|
|
6247
6538
|
}
|
|
6248
6539
|
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
6540
|
+
/* Past: dark accent-contrast circle with inverse checkmark */
|
|
6541
|
+
.muka-progress-accordeon__indicator--past {
|
|
6542
|
+
background-color: var(--alias-color-accent-contrast);
|
|
6543
|
+
color: var(--color-text-default-inverse);
|
|
6544
|
+
}
|
|
6545
|
+
|
|
6546
|
+
/* Current: accent circle with inverse bold number */
|
|
6547
|
+
.muka-progress-accordeon__indicator--current {
|
|
6548
|
+
background-color: var(--alias-color-accent-default);
|
|
6549
|
+
color: var(--color-text-default-inverse);
|
|
6550
|
+
}
|
|
6551
|
+
|
|
6552
|
+
/* Upcoming: sunken/muted circle with default-color number */
|
|
6553
|
+
.muka-progress-accordeon__indicator--upcoming {
|
|
6554
|
+
background-color: var(--color-surface-sunken);
|
|
6555
|
+
color: var(--color-text-default-default);
|
|
6556
|
+
}
|
|
6557
|
+
|
|
6558
|
+
.muka-progress-accordeon__check-icon {
|
|
6559
|
+
width: 20px;
|
|
6560
|
+
height: 20px;
|
|
6561
|
+
color: var(--color-text-default-inverse);
|
|
6562
|
+
}
|
|
6563
|
+
|
|
6564
|
+
.muka-progress-accordeon__number {
|
|
6565
|
+
font-family: var(--text-label-md-bold-fontFamily);
|
|
6566
|
+
font-weight: var(--text-label-md-bold-fontWeight);
|
|
6567
|
+
font-size: var(--text-label-md-bold-fontSize);
|
|
6568
|
+
line-height: var(--text-label-md-bold-lineHeight);
|
|
6569
|
+
text-align: center;
|
|
6570
|
+
user-select: none;
|
|
6571
|
+
}
|
|
6572
|
+
|
|
6573
|
+
/* Upcoming number is semibold (not bold) per Figma */
|
|
6574
|
+
.muka-progress-accordeon__indicator--upcoming .muka-progress-accordeon__number {
|
|
6575
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
6576
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
6577
|
+
}
|
|
6578
|
+
|
|
6579
|
+
/* ─── Heading (responsive: heading/md on wide, heading/sm on narrow) ─────── */
|
|
6580
|
+
.muka-progress-accordeon__heading {
|
|
6581
|
+
flex: 1 0 0;
|
|
6582
|
+
min-width: 0;
|
|
6583
|
+
margin: 0;
|
|
6584
|
+
font-family: var(--text-heading-md-fontFamily);
|
|
6585
|
+
font-weight: var(--text-heading-md-fontWeight);
|
|
6586
|
+
font-size: var(--text-heading-md-fontSize);
|
|
6587
|
+
line-height: var(--text-heading-md-lineHeight);
|
|
6588
|
+
letter-spacing: var(--text-heading-md-letterSpacing);
|
|
6589
|
+
color: var(--color-text-default-default);
|
|
6590
|
+
}
|
|
6591
|
+
|
|
6592
|
+
/* ─── Description ────────────────────────────────────────── */
|
|
6593
|
+
/* Indented 48px (32px indicator + 16px gap) to align under the heading text */
|
|
6594
|
+
.muka-progress-accordeon__description {
|
|
6595
|
+
width: 100%;
|
|
6596
|
+
padding-left: 48px;
|
|
6597
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
6598
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
6599
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
6600
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
6601
|
+
color: var(--color-text-default-default);
|
|
6602
|
+
}
|
|
6603
|
+
|
|
6604
|
+
/* ─── Edit button ────────────────────────────────────────── */
|
|
6605
|
+
.muka-progress-accordeon__edit {
|
|
6606
|
+
flex-shrink: 0;
|
|
6607
|
+
}
|
|
6608
|
+
|
|
6609
|
+
/* Wide container shows the labelled button; the icon-only one is hidden */
|
|
6610
|
+
.muka-progress-accordeon__edit--narrow {
|
|
6611
|
+
display: none;
|
|
6612
|
+
}
|
|
6613
|
+
|
|
6614
|
+
/* ─── Content slot ───────────────────────────────────────── */
|
|
6615
|
+
.muka-progress-accordeon__slot {
|
|
6616
|
+
display: flex;
|
|
6617
|
+
flex-direction: column;
|
|
6618
|
+
align-items: stretch;
|
|
6619
|
+
width: 100%;
|
|
6620
|
+
}
|
|
6621
|
+
|
|
6622
|
+
/* ─── Collapse/expand animation (past & upcoming steps) ──────
|
|
6623
|
+
The grid-template-rows 1fr → 0fr technique animates the content to/from its
|
|
6624
|
+
intrinsic (auto) height with no magic max-height. Under prefers-reduced-motion
|
|
6625
|
+
--motion-duration-view resolves to 0ms, so the toggle stays instant. */
|
|
6626
|
+
.muka-progress-accordeon__slot-wrapper {
|
|
6627
|
+
display: grid;
|
|
6628
|
+
grid-template-rows: 1fr;
|
|
6629
|
+
transition: grid-template-rows var(--motion-duration-view) var(--motion-easing-enter);
|
|
6630
|
+
}
|
|
6631
|
+
|
|
6632
|
+
.muka-progress-accordeon__slot-wrapper--collapsed {
|
|
6633
|
+
grid-template-rows: 0fr;
|
|
6634
|
+
}
|
|
6635
|
+
|
|
6636
|
+
/* The direct grid child clips and must have NO padding/border of its own —
|
|
6637
|
+
min-height:0 lets it shrink, and with no padding the 0fr track reaches a true
|
|
6638
|
+
0 height (padding on the item would leave a residual gap when collapsed). */
|
|
6639
|
+
.muka-progress-accordeon__slot-clip {
|
|
6640
|
+
overflow: hidden;
|
|
6641
|
+
min-height: 0;
|
|
6642
|
+
}
|
|
6643
|
+
|
|
6644
|
+
/* The header↔content spacing lives on the inner slot (inside the clip region)
|
|
6645
|
+
so it collapses together with the content. */
|
|
6646
|
+
.muka-progress-accordeon__slot-wrapper .muka-progress-accordeon__slot {
|
|
6647
|
+
padding-top: var(--spacing-4);
|
|
6648
|
+
}
|
|
6649
|
+
|
|
6650
|
+
/* ─── Action buttons (current state) ─────────────────────── */
|
|
6651
|
+
.muka-progress-accordeon__actions {
|
|
6652
|
+
display: flex;
|
|
6653
|
+
justify-content: flex-end;
|
|
6654
|
+
gap: var(--spacing-4);
|
|
6655
|
+
width: 100%;
|
|
6656
|
+
}
|
|
6657
|
+
|
|
6658
|
+
.muka-progress-accordeon__action {
|
|
6659
|
+
min-width: 160px;
|
|
6660
|
+
}
|
|
6661
|
+
|
|
6662
|
+
/* ─── Divider ────────────────────────────────────────────── */
|
|
6663
|
+
.muka-progress-accordeon__divider {
|
|
6252
6664
|
width: 100%;
|
|
6253
|
-
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6257
|
-
|
|
6258
|
-
|
|
6665
|
+
}
|
|
6666
|
+
|
|
6667
|
+
/* ─── Responsive (narrow container) ──────────────────────── */
|
|
6668
|
+
@container (max-width: 480px) {
|
|
6669
|
+
/* Heading steps down to heading/sm. The 24px line-height is shorter than the
|
|
6670
|
+
32px step indicator, so nudge the text down to keep a single line centred. */
|
|
6671
|
+
.muka-progress-accordeon__heading {
|
|
6672
|
+
font-size: var(--text-heading-sm-fontSize);
|
|
6673
|
+
line-height: var(--text-heading-sm-lineHeight);
|
|
6674
|
+
padding-top: var(--spacing-1);
|
|
6675
|
+
}
|
|
6676
|
+
|
|
6677
|
+
/* Edit button swaps to the icon-only variant */
|
|
6678
|
+
.muka-progress-accordeon__edit--wide {
|
|
6679
|
+
display: none;
|
|
6680
|
+
}
|
|
6681
|
+
|
|
6682
|
+
.muka-progress-accordeon__edit--narrow {
|
|
6683
|
+
display: inline-flex;
|
|
6684
|
+
}
|
|
6685
|
+
|
|
6686
|
+
/* Action buttons stretch to fill the row */
|
|
6687
|
+
.muka-progress-accordeon__actions {
|
|
6688
|
+
justify-content: stretch;
|
|
6689
|
+
}
|
|
6690
|
+
|
|
6691
|
+
.muka-progress-accordeon__action {
|
|
6692
|
+
flex: 1 0 0;
|
|
6693
|
+
min-width: 0;
|
|
6694
|
+
}
|
|
6259
6695
|
}
|
|
6260
6696
|
|
|
6261
6697
|
|
|
@@ -6590,329 +7026,160 @@ body {
|
|
|
6590
7026
|
.muka-progress-tracker--vertical .muka-progress-tracker__connector--current-right {
|
|
6591
7027
|
background: linear-gradient(
|
|
6592
7028
|
to bottom,
|
|
6593
|
-
var(--alias-color-accent-default) 0%,
|
|
6594
|
-
var(--alias-color-accent-default) 15%,
|
|
6595
|
-
var(--color-surface-sunken) 50%
|
|
6596
|
-
);
|
|
6597
|
-
}
|
|
6598
|
-
|
|
6599
|
-
/* Vertical label: body/base/regular, wraps, not bold for current */
|
|
6600
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__label {
|
|
6601
|
-
font-family: var(--text-body-base-regular-fontFamily);
|
|
6602
|
-
font-weight: var(--text-body-base-regular-fontWeight);
|
|
6603
|
-
font-size: var(--text-body-base-regular-fontSize);
|
|
6604
|
-
line-height: var(--text-body-base-regular-lineHeight);
|
|
6605
|
-
color: var(--color-text-default-default);
|
|
6606
|
-
text-align: left;
|
|
6607
|
-
flex: 1 0 0;
|
|
6608
|
-
min-width: 0;
|
|
6609
|
-
padding-top: var(--spacing-1);
|
|
6610
|
-
padding-bottom: var(--spacing-1);
|
|
6611
|
-
word-break: break-word;
|
|
6612
|
-
}
|
|
6613
|
-
|
|
6614
|
-
/* Current label stays regular weight in vertical layout */
|
|
6615
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__label--current {
|
|
6616
|
-
font-family: var(--text-body-base-regular-fontFamily);
|
|
6617
|
-
font-weight: var(--text-body-base-regular-fontWeight);
|
|
6618
|
-
}
|
|
6619
|
-
|
|
6620
|
-
/* Ensure step content paints above hover/selected backgrounds */
|
|
6621
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col,
|
|
6622
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__label {
|
|
6623
|
-
position: relative;
|
|
6624
|
-
z-index: 1;
|
|
6625
|
-
}
|
|
6626
|
-
|
|
6627
|
-
/* ─── Hover halo (vertical interactive only) ────────────── */
|
|
6628
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before,
|
|
6629
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
|
|
6630
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
|
|
6631
|
-
content: '';
|
|
6632
|
-
position: absolute;
|
|
6633
|
-
background-color: var(--color-surface-level1);
|
|
6634
|
-
pointer-events: none;
|
|
6635
|
-
z-index: 0;
|
|
6636
|
-
}
|
|
6637
|
-
|
|
6638
|
-
/* Hover: 40px circle behind indicator only */
|
|
6639
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before {
|
|
6640
|
-
left: -4px;
|
|
6641
|
-
top: -4px;
|
|
6642
|
-
width: 40px;
|
|
6643
|
-
height: 40px;
|
|
6644
|
-
border-radius: 20px;
|
|
6645
|
-
}
|
|
6646
|
-
|
|
6647
|
-
/* Selected / :active: pill behind full step row — wins over hover */
|
|
6648
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
|
|
6649
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
|
|
6650
|
-
left: -4px;
|
|
6651
|
-
right: -8px;
|
|
6652
|
-
top: -4px;
|
|
6653
|
-
bottom: -4px;
|
|
6654
|
-
width: auto;
|
|
6655
|
-
height: auto;
|
|
6656
|
-
border-radius: 20px;
|
|
6657
|
-
}
|
|
6658
|
-
|
|
6659
|
-
/* Selected steps without interactive class still show the pill */
|
|
6660
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']:not(.muka-progress-tracker__step--interactive)::before {
|
|
6661
|
-
content: '';
|
|
6662
|
-
position: absolute;
|
|
6663
|
-
left: -4px;
|
|
6664
|
-
right: -8px;
|
|
6665
|
-
top: -4px;
|
|
6666
|
-
bottom: -4px;
|
|
6667
|
-
background-color: var(--color-surface-level1);
|
|
6668
|
-
border-radius: 20px;
|
|
6669
|
-
pointer-events: none;
|
|
6670
|
-
z-index: 0;
|
|
6671
|
-
}
|
|
6672
|
-
|
|
6673
|
-
/* Connector stays behind indicators (indicator-col is z-index 1) */
|
|
6674
|
-
.muka-progress-tracker--vertical .muka-progress-tracker__connector {
|
|
6675
|
-
z-index: 0;
|
|
6676
|
-
}
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
/* ProgressAccordeon */
|
|
6680
|
-
/* ProgressAccordeon Component Styles — Using Muka Design Tokens */
|
|
6681
|
-
|
|
6682
|
-
/* ─── Root ──────────────────────────────────────────────── */
|
|
6683
|
-
.muka-progress-accordeon {
|
|
6684
|
-
container-type: inline-size;
|
|
6685
|
-
display: flex;
|
|
6686
|
-
flex-direction: column;
|
|
6687
|
-
align-items: stretch;
|
|
6688
|
-
width: 100%;
|
|
6689
|
-
/* Top padding provides the vertical rhythm between stacked steps */
|
|
6690
|
-
padding-top: var(--spacing-8);
|
|
6691
|
-
}
|
|
6692
|
-
|
|
6693
|
-
/* Per-state gap: content-bearing steps are tighter, header-only steps looser */
|
|
6694
|
-
.muka-progress-accordeon--current,
|
|
6695
|
-
.muka-progress-accordeon--past.muka-progress-accordeon--expanded {
|
|
6696
|
-
gap: var(--spacing-6);
|
|
6697
|
-
}
|
|
6698
|
-
|
|
6699
|
-
.muka-progress-accordeon--upcoming,
|
|
6700
|
-
.muka-progress-accordeon--past.muka-progress-accordeon--collapsed {
|
|
6701
|
-
gap: var(--spacing-8);
|
|
6702
|
-
}
|
|
6703
|
-
|
|
6704
|
-
/* Past steps group header + slot. The header↔content gap lives inside the
|
|
6705
|
-
collapsing slot (as padding-top) so it collapses with the content, so the
|
|
6706
|
-
body gap itself is 0. */
|
|
6707
|
-
.muka-progress-accordeon__body {
|
|
6708
|
-
display: flex;
|
|
6709
|
-
flex-direction: column;
|
|
6710
|
-
gap: 0;
|
|
6711
|
-
width: 100%;
|
|
6712
|
-
}
|
|
6713
|
-
|
|
6714
|
-
/* ─── Header ─────────────────────────────────────────────── */
|
|
6715
|
-
.muka-progress-accordeon__header {
|
|
6716
|
-
display: flex;
|
|
6717
|
-
flex-direction: column;
|
|
6718
|
-
gap: var(--spacing-3);
|
|
6719
|
-
width: 100%;
|
|
6720
|
-
}
|
|
6721
|
-
|
|
6722
|
-
.muka-progress-accordeon__header-row {
|
|
6723
|
-
display: flex;
|
|
6724
|
-
align-items: flex-start;
|
|
6725
|
-
gap: var(--spacing-3);
|
|
6726
|
-
width: 100%;
|
|
6727
|
-
min-height: 40px;
|
|
6728
|
-
}
|
|
6729
|
-
|
|
6730
|
-
.muka-progress-accordeon__heading-group {
|
|
6731
|
-
display: flex;
|
|
6732
|
-
flex: 1 0 0;
|
|
6733
|
-
min-width: 0;
|
|
6734
|
-
align-items: flex-start;
|
|
6735
|
-
gap: var(--spacing-4);
|
|
6736
|
-
}
|
|
6737
|
-
|
|
6738
|
-
/* Past steps carry 40px controls; nudge the heading to vertically centre it */
|
|
6739
|
-
.muka-progress-accordeon--past .muka-progress-accordeon__heading-group {
|
|
6740
|
-
padding-top: var(--spacing-1);
|
|
6741
|
-
}
|
|
6742
|
-
|
|
6743
|
-
.muka-progress-accordeon__controls {
|
|
6744
|
-
display: flex;
|
|
6745
|
-
flex-shrink: 0;
|
|
6746
|
-
align-items: center;
|
|
6747
|
-
gap: var(--spacing-3);
|
|
6748
|
-
}
|
|
6749
|
-
|
|
6750
|
-
/* ─── Step indicator (circle) ───────────────────────────── */
|
|
6751
|
-
.muka-progress-accordeon__indicator {
|
|
6752
|
-
width: 32px;
|
|
6753
|
-
height: 32px;
|
|
6754
|
-
flex-shrink: 0;
|
|
6755
|
-
border-radius: var(--border-radius-full);
|
|
6756
|
-
display: flex;
|
|
6757
|
-
align-items: center;
|
|
6758
|
-
justify-content: center;
|
|
6759
|
-
}
|
|
6760
|
-
|
|
6761
|
-
/* Past: dark accent-contrast circle with inverse checkmark */
|
|
6762
|
-
.muka-progress-accordeon__indicator--past {
|
|
6763
|
-
background-color: var(--alias-color-accent-contrast);
|
|
6764
|
-
color: var(--color-text-default-inverse);
|
|
6765
|
-
}
|
|
6766
|
-
|
|
6767
|
-
/* Current: accent circle with inverse bold number */
|
|
6768
|
-
.muka-progress-accordeon__indicator--current {
|
|
6769
|
-
background-color: var(--alias-color-accent-default);
|
|
6770
|
-
color: var(--color-text-default-inverse);
|
|
6771
|
-
}
|
|
6772
|
-
|
|
6773
|
-
/* Upcoming: sunken/muted circle with default-color number */
|
|
6774
|
-
.muka-progress-accordeon__indicator--upcoming {
|
|
6775
|
-
background-color: var(--color-surface-sunken);
|
|
6776
|
-
color: var(--color-text-default-default);
|
|
6777
|
-
}
|
|
6778
|
-
|
|
6779
|
-
.muka-progress-accordeon__check-icon {
|
|
6780
|
-
width: 20px;
|
|
6781
|
-
height: 20px;
|
|
6782
|
-
color: var(--color-text-default-inverse);
|
|
6783
|
-
}
|
|
6784
|
-
|
|
6785
|
-
.muka-progress-accordeon__number {
|
|
6786
|
-
font-family: var(--text-label-md-bold-fontFamily);
|
|
6787
|
-
font-weight: var(--text-label-md-bold-fontWeight);
|
|
6788
|
-
font-size: var(--text-label-md-bold-fontSize);
|
|
6789
|
-
line-height: var(--text-label-md-bold-lineHeight);
|
|
6790
|
-
text-align: center;
|
|
6791
|
-
user-select: none;
|
|
6792
|
-
}
|
|
6793
|
-
|
|
6794
|
-
/* Upcoming number is semibold (not bold) per Figma */
|
|
6795
|
-
.muka-progress-accordeon__indicator--upcoming .muka-progress-accordeon__number {
|
|
6796
|
-
font-family: var(--text-label-md-semibold-fontFamily);
|
|
6797
|
-
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
6798
|
-
}
|
|
6799
|
-
|
|
6800
|
-
/* ─── Heading (responsive: heading/md on wide, heading/sm on narrow) ─────── */
|
|
6801
|
-
.muka-progress-accordeon__heading {
|
|
6802
|
-
flex: 1 0 0;
|
|
6803
|
-
min-width: 0;
|
|
6804
|
-
margin: 0;
|
|
6805
|
-
font-family: var(--text-heading-md-fontFamily);
|
|
6806
|
-
font-weight: var(--text-heading-md-fontWeight);
|
|
6807
|
-
font-size: var(--text-heading-md-fontSize);
|
|
6808
|
-
line-height: var(--text-heading-md-lineHeight);
|
|
6809
|
-
letter-spacing: var(--text-heading-md-letterSpacing);
|
|
6810
|
-
color: var(--color-text-default-default);
|
|
7029
|
+
var(--alias-color-accent-default) 0%,
|
|
7030
|
+
var(--alias-color-accent-default) 15%,
|
|
7031
|
+
var(--color-surface-sunken) 50%
|
|
7032
|
+
);
|
|
6811
7033
|
}
|
|
6812
7034
|
|
|
6813
|
-
/*
|
|
6814
|
-
|
|
6815
|
-
.muka-progress-accordeon__description {
|
|
6816
|
-
width: 100%;
|
|
6817
|
-
padding-left: 48px;
|
|
7035
|
+
/* Vertical label: body/base/regular, wraps, not bold for current */
|
|
7036
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__label {
|
|
6818
7037
|
font-family: var(--text-body-base-regular-fontFamily);
|
|
6819
7038
|
font-weight: var(--text-body-base-regular-fontWeight);
|
|
6820
7039
|
font-size: var(--text-body-base-regular-fontSize);
|
|
6821
7040
|
line-height: var(--text-body-base-regular-lineHeight);
|
|
6822
7041
|
color: var(--color-text-default-default);
|
|
7042
|
+
text-align: left;
|
|
7043
|
+
flex: 1 0 0;
|
|
7044
|
+
min-width: 0;
|
|
7045
|
+
padding-top: var(--spacing-1);
|
|
7046
|
+
padding-bottom: var(--spacing-1);
|
|
7047
|
+
word-break: break-word;
|
|
6823
7048
|
}
|
|
6824
7049
|
|
|
6825
|
-
/*
|
|
6826
|
-
.muka-progress-
|
|
6827
|
-
|
|
7050
|
+
/* Current label stays regular weight in vertical layout */
|
|
7051
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__label--current {
|
|
7052
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
7053
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
6828
7054
|
}
|
|
6829
7055
|
|
|
6830
|
-
/*
|
|
6831
|
-
.muka-progress-
|
|
6832
|
-
|
|
7056
|
+
/* Ensure step content paints above hover/selected backgrounds */
|
|
7057
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col,
|
|
7058
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__label {
|
|
7059
|
+
position: relative;
|
|
7060
|
+
z-index: 1;
|
|
6833
7061
|
}
|
|
6834
7062
|
|
|
6835
|
-
/* ───
|
|
6836
|
-
.muka-progress-
|
|
6837
|
-
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
7063
|
+
/* ─── Hover halo (vertical interactive only) ────────────── */
|
|
7064
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before,
|
|
7065
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
|
|
7066
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
|
|
7067
|
+
content: '';
|
|
7068
|
+
position: absolute;
|
|
7069
|
+
background-color: var(--color-surface-level1);
|
|
7070
|
+
pointer-events: none;
|
|
7071
|
+
z-index: 0;
|
|
6841
7072
|
}
|
|
6842
7073
|
|
|
6843
|
-
/*
|
|
6844
|
-
|
|
6845
|
-
|
|
6846
|
-
|
|
6847
|
-
|
|
6848
|
-
|
|
6849
|
-
|
|
6850
|
-
transition: grid-template-rows var(--motion-duration-view) var(--motion-easing-enter);
|
|
7074
|
+
/* Hover: 40px circle behind indicator only */
|
|
7075
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before {
|
|
7076
|
+
left: -4px;
|
|
7077
|
+
top: -4px;
|
|
7078
|
+
width: 40px;
|
|
7079
|
+
height: 40px;
|
|
7080
|
+
border-radius: 20px;
|
|
6851
7081
|
}
|
|
6852
7082
|
|
|
6853
|
-
|
|
6854
|
-
|
|
7083
|
+
/* Selected / :active: pill behind full step row — wins over hover */
|
|
7084
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
|
|
7085
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
|
|
7086
|
+
left: -4px;
|
|
7087
|
+
right: -8px;
|
|
7088
|
+
top: -4px;
|
|
7089
|
+
bottom: -4px;
|
|
7090
|
+
width: auto;
|
|
7091
|
+
height: auto;
|
|
7092
|
+
border-radius: 20px;
|
|
6855
7093
|
}
|
|
6856
7094
|
|
|
6857
|
-
/*
|
|
6858
|
-
|
|
6859
|
-
|
|
6860
|
-
|
|
6861
|
-
|
|
6862
|
-
|
|
7095
|
+
/* Selected steps without interactive class still show the pill */
|
|
7096
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']:not(.muka-progress-tracker__step--interactive)::before {
|
|
7097
|
+
content: '';
|
|
7098
|
+
position: absolute;
|
|
7099
|
+
left: -4px;
|
|
7100
|
+
right: -8px;
|
|
7101
|
+
top: -4px;
|
|
7102
|
+
bottom: -4px;
|
|
7103
|
+
background-color: var(--color-surface-level1);
|
|
7104
|
+
border-radius: 20px;
|
|
7105
|
+
pointer-events: none;
|
|
7106
|
+
z-index: 0;
|
|
6863
7107
|
}
|
|
6864
7108
|
|
|
6865
|
-
/*
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
padding-top: var(--spacing-4);
|
|
7109
|
+
/* Connector stays behind indicators (indicator-col is z-index 1) */
|
|
7110
|
+
.muka-progress-tracker--vertical .muka-progress-tracker__connector {
|
|
7111
|
+
z-index: 0;
|
|
6869
7112
|
}
|
|
6870
7113
|
|
|
6871
|
-
|
|
6872
|
-
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
7114
|
+
|
|
7115
|
+
/* ProfileBadge */
|
|
7116
|
+
/* ProfileBadge Component Styles - Using Muka Design Tokens */
|
|
7117
|
+
|
|
7118
|
+
.muka-profile-badge {
|
|
7119
|
+
display: inline-flex;
|
|
7120
|
+
align-items: center;
|
|
7121
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
6877
7122
|
}
|
|
6878
7123
|
|
|
6879
|
-
|
|
6880
|
-
|
|
7124
|
+
/* Size variants */
|
|
7125
|
+
.muka-profile-badge--lg {
|
|
7126
|
+
gap: var(--spacing-4); /* 16px */
|
|
6881
7127
|
}
|
|
6882
7128
|
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
width: 100%;
|
|
7129
|
+
.muka-profile-badge--md {
|
|
7130
|
+
gap: var(--spacing-3); /* 12px */
|
|
6886
7131
|
}
|
|
6887
7132
|
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
32px step indicator, so nudge the text down to keep a single line centred. */
|
|
6892
|
-
.muka-progress-accordeon__heading {
|
|
6893
|
-
font-size: var(--text-heading-sm-fontSize);
|
|
6894
|
-
line-height: var(--text-heading-sm-lineHeight);
|
|
6895
|
-
padding-top: var(--spacing-1);
|
|
6896
|
-
}
|
|
7133
|
+
.muka-profile-badge__avatar {
|
|
7134
|
+
flex-shrink: 0;
|
|
7135
|
+
}
|
|
6897
7136
|
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
|
|
7137
|
+
/* Text stack */
|
|
7138
|
+
.muka-profile-badge__text {
|
|
7139
|
+
display: flex;
|
|
7140
|
+
flex-direction: column;
|
|
7141
|
+
align-items: flex-start;
|
|
7142
|
+
min-width: 0;
|
|
7143
|
+
}
|
|
6902
7144
|
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
|
|
7145
|
+
.muka-profile-badge__name {
|
|
7146
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
7147
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
7148
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
7149
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
7150
|
+
color: var(--color-text-default-default);
|
|
7151
|
+
}
|
|
6906
7152
|
|
|
6907
|
-
|
|
6908
|
-
|
|
6909
|
-
|
|
6910
|
-
|
|
7153
|
+
.muka-profile-badge__email {
|
|
7154
|
+
font-family: var(--text-body-xs-regular-fontFamily);
|
|
7155
|
+
font-size: var(--text-body-xs-regular-fontSize);
|
|
7156
|
+
font-weight: var(--text-body-xs-regular-fontWeight);
|
|
7157
|
+
line-height: var(--text-body-xs-regular-lineHeight);
|
|
7158
|
+
color: var(--color-text-subtle-default);
|
|
7159
|
+
}
|
|
6911
7160
|
|
|
6912
|
-
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
|
|
7161
|
+
/* Clickable state */
|
|
7162
|
+
.muka-profile-badge--clickable {
|
|
7163
|
+
cursor: pointer;
|
|
7164
|
+
border: none;
|
|
7165
|
+
background: none;
|
|
7166
|
+
padding: 0;
|
|
7167
|
+
text-align: left;
|
|
7168
|
+
border-radius: var(--radius-md);
|
|
7169
|
+
transition: opacity 0.2s ease;
|
|
7170
|
+
}
|
|
7171
|
+
|
|
7172
|
+
.muka-profile-badge--clickable:hover {
|
|
7173
|
+
opacity: 0.9;
|
|
7174
|
+
}
|
|
7175
|
+
|
|
7176
|
+
.muka-profile-badge--clickable:active {
|
|
7177
|
+
opacity: 0.8;
|
|
7178
|
+
}
|
|
7179
|
+
|
|
7180
|
+
.muka-profile-badge--clickable:focus-visible {
|
|
7181
|
+
outline: 2px solid var(--color-border-focus);
|
|
7182
|
+
outline-offset: 2px;
|
|
6916
7183
|
}
|
|
6917
7184
|
|
|
6918
7185
|
|
|
@@ -7079,83 +7346,43 @@ body {
|
|
|
7079
7346
|
0% {
|
|
7080
7347
|
stroke-dashoffset: 220;
|
|
7081
7348
|
}
|
|
7082
|
-
50% {
|
|
7083
|
-
stroke-dashoffset: 70;
|
|
7084
|
-
}
|
|
7085
|
-
100% {
|
|
7086
|
-
stroke-dashoffset: 220;
|
|
7087
|
-
}
|
|
7088
|
-
}
|
|
7089
|
-
|
|
7090
|
-
|
|
7091
|
-
/* ProfileBadge */
|
|
7092
|
-
/* ProfileBadge Component Styles - Using Muka Design Tokens */
|
|
7093
|
-
|
|
7094
|
-
.muka-profile-badge {
|
|
7095
|
-
display: inline-flex;
|
|
7096
|
-
align-items: center;
|
|
7097
|
-
font-family: var(--text-body-base-regular-fontFamily);
|
|
7098
|
-
}
|
|
7099
|
-
|
|
7100
|
-
/* Size variants */
|
|
7101
|
-
.muka-profile-badge--lg {
|
|
7102
|
-
gap: var(--spacing-4); /* 16px */
|
|
7103
|
-
}
|
|
7104
|
-
|
|
7105
|
-
.muka-profile-badge--md {
|
|
7106
|
-
gap: var(--spacing-3); /* 12px */
|
|
7107
|
-
}
|
|
7108
|
-
|
|
7109
|
-
.muka-profile-badge__avatar {
|
|
7110
|
-
flex-shrink: 0;
|
|
7111
|
-
}
|
|
7112
|
-
|
|
7113
|
-
/* Text stack */
|
|
7114
|
-
.muka-profile-badge__text {
|
|
7115
|
-
display: flex;
|
|
7116
|
-
flex-direction: column;
|
|
7117
|
-
align-items: flex-start;
|
|
7118
|
-
min-width: 0;
|
|
7119
|
-
}
|
|
7120
|
-
|
|
7121
|
-
.muka-profile-badge__name {
|
|
7122
|
-
font-family: var(--text-body-base-regular-fontFamily);
|
|
7123
|
-
font-size: var(--text-body-base-regular-fontSize);
|
|
7124
|
-
font-weight: var(--text-body-base-regular-fontWeight);
|
|
7125
|
-
line-height: var(--text-body-base-regular-lineHeight);
|
|
7126
|
-
color: var(--color-text-default-default);
|
|
7127
|
-
}
|
|
7128
|
-
|
|
7129
|
-
.muka-profile-badge__email {
|
|
7130
|
-
font-family: var(--text-body-xs-regular-fontFamily);
|
|
7131
|
-
font-size: var(--text-body-xs-regular-fontSize);
|
|
7132
|
-
font-weight: var(--text-body-xs-regular-fontWeight);
|
|
7133
|
-
line-height: var(--text-body-xs-regular-lineHeight);
|
|
7134
|
-
color: var(--color-text-subtle-default);
|
|
7135
|
-
}
|
|
7136
|
-
|
|
7137
|
-
/* Clickable state */
|
|
7138
|
-
.muka-profile-badge--clickable {
|
|
7139
|
-
cursor: pointer;
|
|
7140
|
-
border: none;
|
|
7141
|
-
background: none;
|
|
7142
|
-
padding: 0;
|
|
7143
|
-
text-align: left;
|
|
7144
|
-
border-radius: var(--radius-md);
|
|
7145
|
-
transition: opacity 0.2s ease;
|
|
7349
|
+
50% {
|
|
7350
|
+
stroke-dashoffset: 70;
|
|
7351
|
+
}
|
|
7352
|
+
100% {
|
|
7353
|
+
stroke-dashoffset: 220;
|
|
7354
|
+
}
|
|
7146
7355
|
}
|
|
7147
7356
|
|
|
7148
|
-
|
|
7149
|
-
|
|
7357
|
+
|
|
7358
|
+
/* Popover */
|
|
7359
|
+
/* Popover Component Styles */
|
|
7360
|
+
|
|
7361
|
+
.muka-popover__content {
|
|
7362
|
+
background-color: var(--color-surface-level3);
|
|
7363
|
+
border: var(--border-width-regular) solid var(--color-border-default);
|
|
7364
|
+
border-radius: var(--radius-md);
|
|
7365
|
+
padding: var(--spacing-4);
|
|
7366
|
+
box-shadow: var(--shadow-level3);
|
|
7367
|
+
max-width: 20rem;
|
|
7368
|
+
z-index: 50;
|
|
7369
|
+
animation: muka-popover-fade-in 150ms ease;
|
|
7150
7370
|
}
|
|
7151
7371
|
|
|
7152
|
-
|
|
7153
|
-
|
|
7372
|
+
@keyframes muka-popover-fade-in {
|
|
7373
|
+
from {
|
|
7374
|
+
opacity: 0;
|
|
7375
|
+
transform: scale(0.96);
|
|
7376
|
+
}
|
|
7377
|
+
to {
|
|
7378
|
+
opacity: 1;
|
|
7379
|
+
transform: scale(1);
|
|
7380
|
+
}
|
|
7154
7381
|
}
|
|
7155
7382
|
|
|
7156
|
-
|
|
7157
|
-
|
|
7158
|
-
|
|
7383
|
+
/* Arrow */
|
|
7384
|
+
.muka-popover__arrow {
|
|
7385
|
+
fill: var(--color-surface-level3);
|
|
7159
7386
|
}
|
|
7160
7387
|
|
|
7161
7388
|
|
|
@@ -7256,134 +7483,6 @@ body {
|
|
|
7256
7483
|
}
|
|
7257
7484
|
|
|
7258
7485
|
|
|
7259
|
-
/* Popover */
|
|
7260
|
-
/* Popover Component Styles */
|
|
7261
|
-
|
|
7262
|
-
.muka-popover__content {
|
|
7263
|
-
background-color: var(--color-surface-level3);
|
|
7264
|
-
border: var(--border-width-regular) solid var(--color-border-default);
|
|
7265
|
-
border-radius: var(--radius-md);
|
|
7266
|
-
padding: var(--spacing-4);
|
|
7267
|
-
box-shadow: var(--shadow-level3);
|
|
7268
|
-
max-width: 20rem;
|
|
7269
|
-
z-index: 50;
|
|
7270
|
-
animation: muka-popover-fade-in 150ms ease;
|
|
7271
|
-
}
|
|
7272
|
-
|
|
7273
|
-
@keyframes muka-popover-fade-in {
|
|
7274
|
-
from {
|
|
7275
|
-
opacity: 0;
|
|
7276
|
-
transform: scale(0.96);
|
|
7277
|
-
}
|
|
7278
|
-
to {
|
|
7279
|
-
opacity: 1;
|
|
7280
|
-
transform: scale(1);
|
|
7281
|
-
}
|
|
7282
|
-
}
|
|
7283
|
-
|
|
7284
|
-
/* Arrow */
|
|
7285
|
-
.muka-popover__arrow {
|
|
7286
|
-
fill: var(--color-surface-level3);
|
|
7287
|
-
}
|
|
7288
|
-
|
|
7289
|
-
|
|
7290
|
-
/* PieChart */
|
|
7291
|
-
/* PieChart Component Styles - Using Muka Design Tokens */
|
|
7292
|
-
|
|
7293
|
-
.muka-piechart {
|
|
7294
|
-
display: inline-flex;
|
|
7295
|
-
align-items: center;
|
|
7296
|
-
gap: var(--spacing-4);
|
|
7297
|
-
}
|
|
7298
|
-
|
|
7299
|
-
/* Legend layout */
|
|
7300
|
-
.muka-piechart--legend-right {
|
|
7301
|
-
flex-direction: row;
|
|
7302
|
-
}
|
|
7303
|
-
|
|
7304
|
-
.muka-piechart--legend-bottom {
|
|
7305
|
-
flex-direction: column;
|
|
7306
|
-
}
|
|
7307
|
-
|
|
7308
|
-
/* ========================================
|
|
7309
|
-
CHART
|
|
7310
|
-
======================================== */
|
|
7311
|
-
|
|
7312
|
-
.muka-piechart__chart {
|
|
7313
|
-
position: relative;
|
|
7314
|
-
flex-shrink: 0;
|
|
7315
|
-
}
|
|
7316
|
-
|
|
7317
|
-
.muka-piechart__chart--sm {
|
|
7318
|
-
width: var(--piechart-size-diameter-sm);
|
|
7319
|
-
height: var(--piechart-size-diameter-sm);
|
|
7320
|
-
}
|
|
7321
|
-
|
|
7322
|
-
.muka-piechart__chart--md {
|
|
7323
|
-
width: var(--piechart-size-diameter-md);
|
|
7324
|
-
height: var(--piechart-size-diameter-md);
|
|
7325
|
-
}
|
|
7326
|
-
|
|
7327
|
-
.muka-piechart__chart--lg {
|
|
7328
|
-
width: var(--piechart-size-diameter-lg);
|
|
7329
|
-
height: var(--piechart-size-diameter-lg);
|
|
7330
|
-
}
|
|
7331
|
-
|
|
7332
|
-
.muka-piechart__svg {
|
|
7333
|
-
display: block;
|
|
7334
|
-
width: 100%;
|
|
7335
|
-
height: 100%;
|
|
7336
|
-
/* Start slices at 12 o'clock instead of 3 o'clock */
|
|
7337
|
-
transform: rotate(-90deg);
|
|
7338
|
-
}
|
|
7339
|
-
|
|
7340
|
-
.muka-piechart__track {
|
|
7341
|
-
fill: none;
|
|
7342
|
-
stroke: var(--piechart-color-track);
|
|
7343
|
-
}
|
|
7344
|
-
|
|
7345
|
-
.muka-piechart__segment {
|
|
7346
|
-
fill: none;
|
|
7347
|
-
}
|
|
7348
|
-
|
|
7349
|
-
/* ========================================
|
|
7350
|
-
LEGEND
|
|
7351
|
-
======================================== */
|
|
7352
|
-
|
|
7353
|
-
.muka-piechart__legend {
|
|
7354
|
-
list-style: none;
|
|
7355
|
-
margin: 0;
|
|
7356
|
-
padding: 0;
|
|
7357
|
-
display: flex;
|
|
7358
|
-
flex-direction: column;
|
|
7359
|
-
gap: var(--spacing-1);
|
|
7360
|
-
}
|
|
7361
|
-
|
|
7362
|
-
.muka-piechart__legend-item {
|
|
7363
|
-
display: flex;
|
|
7364
|
-
align-items: center;
|
|
7365
|
-
gap: var(--spacing-2);
|
|
7366
|
-
font-family: var(--text-body-sm-regular-fontFamily);
|
|
7367
|
-
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
7368
|
-
font-size: var(--text-body-sm-regular-fontSize);
|
|
7369
|
-
line-height: var(--text-body-sm-regular-lineHeight);
|
|
7370
|
-
color: var(--color-text-default-default);
|
|
7371
|
-
}
|
|
7372
|
-
|
|
7373
|
-
.muka-piechart__swatch {
|
|
7374
|
-
flex-shrink: 0;
|
|
7375
|
-
width: var(--spacing-3);
|
|
7376
|
-
height: var(--spacing-3);
|
|
7377
|
-
border-radius: var(--border-radius-sm);
|
|
7378
|
-
}
|
|
7379
|
-
|
|
7380
|
-
.muka-piechart__legend-value {
|
|
7381
|
-
margin-left: auto;
|
|
7382
|
-
padding-left: var(--spacing-2);
|
|
7383
|
-
color: var(--color-text-subtle-default);
|
|
7384
|
-
}
|
|
7385
|
-
|
|
7386
|
-
|
|
7387
7486
|
/* PhotoUploader */
|
|
7388
7487
|
/* PhotoUploader Component Styles - Using Muka Design Tokens */
|
|
7389
7488
|
|
|
@@ -7447,68 +7546,165 @@ body {
|
|
|
7447
7546
|
border-color var(--motion-duration-micro) var(--motion-easing-enter);
|
|
7448
7547
|
}
|
|
7449
7548
|
|
|
7450
|
-
.muka-photo-uploader__dropzone:hover,
|
|
7451
|
-
.muka-photo-uploader__dropzone--active {
|
|
7452
|
-
border-color: var(--color-border-focus);
|
|
7453
|
-
background-color: var(--color-surface-level1);
|
|
7549
|
+
.muka-photo-uploader__dropzone:hover,
|
|
7550
|
+
.muka-photo-uploader__dropzone--active {
|
|
7551
|
+
border-color: var(--color-border-focus);
|
|
7552
|
+
background-color: var(--color-surface-level1);
|
|
7553
|
+
}
|
|
7554
|
+
|
|
7555
|
+
.muka-photo-uploader__dropzone:focus-visible {
|
|
7556
|
+
outline: 2px solid var(--color-border-focus);
|
|
7557
|
+
outline-offset: 2px;
|
|
7558
|
+
}
|
|
7559
|
+
|
|
7560
|
+
.muka-photo-uploader__dropzone-icon {
|
|
7561
|
+
display: flex;
|
|
7562
|
+
align-items: center;
|
|
7563
|
+
justify-content: center;
|
|
7564
|
+
color: var(--color-icon-subtle-default);
|
|
7565
|
+
}
|
|
7566
|
+
|
|
7567
|
+
.muka-photo-uploader__dropzone-text {
|
|
7568
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
7569
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
7570
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
7571
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
7572
|
+
color: var(--color-text-subtle-default);
|
|
7573
|
+
}
|
|
7574
|
+
|
|
7575
|
+
/* ─── Disabled ────────────────────────────────────────── */
|
|
7576
|
+
.muka-photo-uploader--disabled .muka-photo-uploader__dropzone {
|
|
7577
|
+
cursor: not-allowed;
|
|
7578
|
+
opacity: 0.6;
|
|
7579
|
+
}
|
|
7580
|
+
|
|
7581
|
+
.muka-photo-uploader--disabled .muka-photo-uploader__dropzone:hover {
|
|
7582
|
+
border-color: var(--card-color-default-border);
|
|
7583
|
+
background-color: var(--card-color-default-background);
|
|
7584
|
+
}
|
|
7585
|
+
|
|
7586
|
+
/* ─── Enlarged photo dialog ───────────────────────────── */
|
|
7587
|
+
.muka-photo-uploader__preview {
|
|
7588
|
+
display: flex;
|
|
7589
|
+
align-items: center;
|
|
7590
|
+
justify-content: center;
|
|
7591
|
+
width: 100%;
|
|
7592
|
+
height: 100%;
|
|
7593
|
+
}
|
|
7594
|
+
|
|
7595
|
+
/* Fits the dialog while preserving the photo's original aspect ratio. */
|
|
7596
|
+
.muka-photo-uploader__preview-image {
|
|
7597
|
+
display: block;
|
|
7598
|
+
max-width: 100%;
|
|
7599
|
+
max-height: 100%;
|
|
7600
|
+
width: auto;
|
|
7601
|
+
height: auto;
|
|
7602
|
+
object-fit: contain;
|
|
7603
|
+
border-radius: var(--border-radius-lg);
|
|
7604
|
+
}
|
|
7605
|
+
|
|
7606
|
+
/* ─── Reduced motion ──────────────────────────────────── */
|
|
7607
|
+
@media (prefers-reduced-motion: reduce) {
|
|
7608
|
+
.muka-photo-uploader__dropzone {
|
|
7609
|
+
transition: none;
|
|
7610
|
+
}
|
|
7611
|
+
}
|
|
7612
|
+
|
|
7613
|
+
|
|
7614
|
+
/* PieChart */
|
|
7615
|
+
/* PieChart Component Styles - Using Muka Design Tokens */
|
|
7616
|
+
|
|
7617
|
+
.muka-piechart {
|
|
7618
|
+
display: inline-flex;
|
|
7619
|
+
align-items: center;
|
|
7620
|
+
gap: var(--spacing-4);
|
|
7621
|
+
}
|
|
7622
|
+
|
|
7623
|
+
/* Legend layout */
|
|
7624
|
+
.muka-piechart--legend-right {
|
|
7625
|
+
flex-direction: row;
|
|
7626
|
+
}
|
|
7627
|
+
|
|
7628
|
+
.muka-piechart--legend-bottom {
|
|
7629
|
+
flex-direction: column;
|
|
7630
|
+
}
|
|
7631
|
+
|
|
7632
|
+
/* ========================================
|
|
7633
|
+
CHART
|
|
7634
|
+
======================================== */
|
|
7635
|
+
|
|
7636
|
+
.muka-piechart__chart {
|
|
7637
|
+
position: relative;
|
|
7638
|
+
flex-shrink: 0;
|
|
7639
|
+
}
|
|
7640
|
+
|
|
7641
|
+
.muka-piechart__chart--sm {
|
|
7642
|
+
width: var(--piechart-size-diameter-sm);
|
|
7643
|
+
height: var(--piechart-size-diameter-sm);
|
|
7454
7644
|
}
|
|
7455
7645
|
|
|
7456
|
-
.muka-
|
|
7457
|
-
|
|
7458
|
-
|
|
7646
|
+
.muka-piechart__chart--md {
|
|
7647
|
+
width: var(--piechart-size-diameter-md);
|
|
7648
|
+
height: var(--piechart-size-diameter-md);
|
|
7459
7649
|
}
|
|
7460
7650
|
|
|
7461
|
-
.muka-
|
|
7462
|
-
|
|
7463
|
-
|
|
7464
|
-
justify-content: center;
|
|
7465
|
-
color: var(--color-icon-subtle-default);
|
|
7651
|
+
.muka-piechart__chart--lg {
|
|
7652
|
+
width: var(--piechart-size-diameter-lg);
|
|
7653
|
+
height: var(--piechart-size-diameter-lg);
|
|
7466
7654
|
}
|
|
7467
7655
|
|
|
7468
|
-
.muka-
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7656
|
+
.muka-piechart__svg {
|
|
7657
|
+
display: block;
|
|
7658
|
+
width: 100%;
|
|
7659
|
+
height: 100%;
|
|
7660
|
+
/* Start slices at 12 o'clock instead of 3 o'clock */
|
|
7661
|
+
transform: rotate(-90deg);
|
|
7474
7662
|
}
|
|
7475
7663
|
|
|
7476
|
-
|
|
7477
|
-
|
|
7478
|
-
|
|
7479
|
-
opacity: 0.6;
|
|
7664
|
+
.muka-piechart__track {
|
|
7665
|
+
fill: none;
|
|
7666
|
+
stroke: var(--piechart-color-track);
|
|
7480
7667
|
}
|
|
7481
7668
|
|
|
7482
|
-
.muka-
|
|
7483
|
-
|
|
7484
|
-
background-color: var(--card-color-default-background);
|
|
7669
|
+
.muka-piechart__segment {
|
|
7670
|
+
fill: none;
|
|
7485
7671
|
}
|
|
7486
7672
|
|
|
7487
|
-
/*
|
|
7488
|
-
|
|
7673
|
+
/* ========================================
|
|
7674
|
+
LEGEND
|
|
7675
|
+
======================================== */
|
|
7676
|
+
|
|
7677
|
+
.muka-piechart__legend {
|
|
7678
|
+
list-style: none;
|
|
7679
|
+
margin: 0;
|
|
7680
|
+
padding: 0;
|
|
7681
|
+
display: flex;
|
|
7682
|
+
flex-direction: column;
|
|
7683
|
+
gap: var(--spacing-1);
|
|
7684
|
+
}
|
|
7685
|
+
|
|
7686
|
+
.muka-piechart__legend-item {
|
|
7489
7687
|
display: flex;
|
|
7490
7688
|
align-items: center;
|
|
7491
|
-
|
|
7492
|
-
|
|
7493
|
-
|
|
7689
|
+
gap: var(--spacing-2);
|
|
7690
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
7691
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
7692
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
7693
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
7694
|
+
color: var(--color-text-default-default);
|
|
7494
7695
|
}
|
|
7495
7696
|
|
|
7496
|
-
|
|
7497
|
-
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
|
|
7501
|
-
width: auto;
|
|
7502
|
-
height: auto;
|
|
7503
|
-
object-fit: contain;
|
|
7504
|
-
border-radius: var(--border-radius-lg);
|
|
7697
|
+
.muka-piechart__swatch {
|
|
7698
|
+
flex-shrink: 0;
|
|
7699
|
+
width: var(--spacing-3);
|
|
7700
|
+
height: var(--spacing-3);
|
|
7701
|
+
border-radius: var(--border-radius-sm);
|
|
7505
7702
|
}
|
|
7506
7703
|
|
|
7507
|
-
|
|
7508
|
-
|
|
7509
|
-
|
|
7510
|
-
|
|
7511
|
-
}
|
|
7704
|
+
.muka-piechart__legend-value {
|
|
7705
|
+
margin-left: auto;
|
|
7706
|
+
padding-left: var(--spacing-2);
|
|
7707
|
+
color: var(--color-text-subtle-default);
|
|
7512
7708
|
}
|
|
7513
7709
|
|
|
7514
7710
|
|
|
@@ -7575,9 +7771,9 @@ body {
|
|
|
7575
7771
|
|
|
7576
7772
|
/* Active page */
|
|
7577
7773
|
.muka-pagination__button--active {
|
|
7578
|
-
background-color: var(--button-color-primary-default
|
|
7579
|
-
color: var(--button-color-primary-default
|
|
7580
|
-
border-color: var(--button-color-primary-default
|
|
7774
|
+
background-color: var(--button-color-primary-background-default);
|
|
7775
|
+
color: var(--button-color-primary-foreground-default);
|
|
7776
|
+
border-color: var(--button-color-primary-background-default);
|
|
7581
7777
|
font-weight: 600;
|
|
7582
7778
|
}
|
|
7583
7779
|
|
|
@@ -7608,38 +7804,38 @@ body {
|
|
|
7608
7804
|
|
|
7609
7805
|
/* Size variants */
|
|
7610
7806
|
.muka-pagination--sm .muka-pagination__button {
|
|
7611
|
-
min-width: var(--
|
|
7612
|
-
height: var(--
|
|
7807
|
+
min-width: var(--size-2xl);
|
|
7808
|
+
height: var(--size-2xl);
|
|
7613
7809
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
7614
7810
|
}
|
|
7615
7811
|
|
|
7616
7812
|
.muka-pagination--sm .muka-pagination__ellipsis {
|
|
7617
|
-
min-width: var(--
|
|
7618
|
-
height: var(--
|
|
7813
|
+
min-width: var(--size-2xl);
|
|
7814
|
+
height: var(--size-2xl);
|
|
7619
7815
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
7620
7816
|
}
|
|
7621
7817
|
|
|
7622
7818
|
.muka-pagination--md .muka-pagination__button {
|
|
7623
|
-
min-width: var(--
|
|
7624
|
-
height: var(--
|
|
7819
|
+
min-width: var(--size-3xl);
|
|
7820
|
+
height: var(--size-3xl);
|
|
7625
7821
|
font-size: var(--text-label-md-regular-fontSize);
|
|
7626
7822
|
}
|
|
7627
7823
|
|
|
7628
7824
|
.muka-pagination--md .muka-pagination__ellipsis {
|
|
7629
|
-
min-width: var(--
|
|
7630
|
-
height: var(--
|
|
7825
|
+
min-width: var(--size-3xl);
|
|
7826
|
+
height: var(--size-3xl);
|
|
7631
7827
|
font-size: var(--text-label-md-regular-fontSize);
|
|
7632
7828
|
}
|
|
7633
7829
|
|
|
7634
7830
|
.muka-pagination--lg .muka-pagination__button {
|
|
7635
|
-
min-width: var(--
|
|
7636
|
-
height: var(--
|
|
7831
|
+
min-width: var(--size-4xl);
|
|
7832
|
+
height: var(--size-4xl);
|
|
7637
7833
|
font-size: var(--text-label-lg-regular-fontSize);
|
|
7638
7834
|
}
|
|
7639
7835
|
|
|
7640
7836
|
.muka-pagination--lg .muka-pagination__ellipsis {
|
|
7641
|
-
min-width: var(--
|
|
7642
|
-
height: var(--
|
|
7837
|
+
min-width: var(--size-4xl);
|
|
7838
|
+
height: var(--size-4xl);
|
|
7643
7839
|
font-size: var(--text-label-lg-regular-fontSize);
|
|
7644
7840
|
}
|
|
7645
7841
|
|
|
@@ -7843,7 +8039,7 @@ body {
|
|
|
7843
8039
|
}
|
|
7844
8040
|
|
|
7845
8041
|
.muka-menu__match {
|
|
7846
|
-
font-weight: var(--
|
|
8042
|
+
font-weight: var(--text-label-md-bold-fontWeight);
|
|
7847
8043
|
}
|
|
7848
8044
|
|
|
7849
8045
|
.muka-menu__content--scrollbar {
|
|
@@ -8563,7 +8759,7 @@ li.muka-listitem {
|
|
|
8563
8759
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
8564
8760
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
8565
8761
|
line-height: var(--text-label-sm-regular-lineHeight);
|
|
8566
|
-
color: var(--color-state-error-
|
|
8762
|
+
color: var(--color-state-error-default);
|
|
8567
8763
|
margin: 0;
|
|
8568
8764
|
}
|
|
8569
8765
|
|
|
@@ -8605,7 +8801,7 @@ li.muka-listitem {
|
|
|
8605
8801
|
}
|
|
8606
8802
|
|
|
8607
8803
|
.muka-label__required {
|
|
8608
|
-
color: var(--color-state-error-
|
|
8804
|
+
color: var(--color-state-error-default);
|
|
8609
8805
|
}
|
|
8610
8806
|
|
|
8611
8807
|
|
|
@@ -8651,7 +8847,7 @@ li.muka-listitem {
|
|
|
8651
8847
|
}
|
|
8652
8848
|
|
|
8653
8849
|
.muka-input__required {
|
|
8654
|
-
color: var(--color-state-error-
|
|
8850
|
+
color: var(--color-state-error-default);
|
|
8655
8851
|
}
|
|
8656
8852
|
|
|
8657
8853
|
.muka-input__label--sm + .muka-input__field--disabled,
|
|
@@ -8857,7 +9053,7 @@ li.muka-listitem {
|
|
|
8857
9053
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
8858
9054
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
8859
9055
|
line-height: var(--text-label-sm-regular-lineHeight);
|
|
8860
|
-
color: var(--color-state-error-
|
|
9056
|
+
color: var(--color-state-error-default);
|
|
8861
9057
|
margin: 0;
|
|
8862
9058
|
}
|
|
8863
9059
|
|
|
@@ -9057,10 +9253,10 @@ li.muka-listitem {
|
|
|
9057
9253
|
|
|
9058
9254
|
/* Text */
|
|
9059
9255
|
.muka-fileupload__text {
|
|
9060
|
-
font-family: var(--text-body-
|
|
9061
|
-
font-size: var(--text-body-
|
|
9062
|
-
font-weight: var(--text-body-
|
|
9063
|
-
line-height: var(--text-body-
|
|
9256
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
9257
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
9258
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
9259
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
9064
9260
|
color: var(--color-text-default-default);
|
|
9065
9261
|
}
|
|
9066
9262
|
|
|
@@ -9143,10 +9339,10 @@ li.muka-listitem {
|
|
|
9143
9339
|
}
|
|
9144
9340
|
|
|
9145
9341
|
.muka-fileupload-item__name {
|
|
9146
|
-
font-family: var(--text-body-sm-
|
|
9147
|
-
font-size: var(--text-body-sm-
|
|
9148
|
-
font-weight: var(--text-body-sm-
|
|
9149
|
-
line-height: var(--text-body-sm-
|
|
9342
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
9343
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
9344
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
9345
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
9150
9346
|
color: var(--fileupload-item-color-default-foreground);
|
|
9151
9347
|
white-space: nowrap;
|
|
9152
9348
|
overflow: hidden;
|
|
@@ -9182,11 +9378,11 @@ li.muka-listitem {
|
|
|
9182
9378
|
}
|
|
9183
9379
|
|
|
9184
9380
|
.muka-fileupload-item__status-icon--success {
|
|
9185
|
-
color: var(--color-
|
|
9381
|
+
color: var(--fileupload-item-color-success-foreground);
|
|
9186
9382
|
}
|
|
9187
9383
|
|
|
9188
9384
|
.muka-fileupload-item__status-icon--error {
|
|
9189
|
-
color: var(--color-
|
|
9385
|
+
color: var(--fileupload-item-color-error-foreground);
|
|
9190
9386
|
}
|
|
9191
9387
|
|
|
9192
9388
|
.muka-fileupload-item__remove {
|
|
@@ -9239,7 +9435,7 @@ li.muka-listitem {
|
|
|
9239
9435
|
|
|
9240
9436
|
.muka-fab--primary {
|
|
9241
9437
|
background-color: var(--color-action-default);
|
|
9242
|
-
color: var(--color-text-inverse
|
|
9438
|
+
color: var(--color-text-default-inverse);
|
|
9243
9439
|
}
|
|
9244
9440
|
|
|
9245
9441
|
.muka-fab--primary:hover:not(:disabled) {
|
|
@@ -9422,10 +9618,10 @@ li.muka-listitem {
|
|
|
9422
9618
|
.muka-emptystate__title {
|
|
9423
9619
|
color: var(--emptystate-title-color);
|
|
9424
9620
|
margin: 0;
|
|
9425
|
-
font-family: var(--text-heading-
|
|
9426
|
-
font-weight: var(--text-heading-
|
|
9427
|
-
font-size: var(--text-heading-
|
|
9428
|
-
line-height: var(--text-heading-
|
|
9621
|
+
font-family: var(--text-heading-sm-fontFamily);
|
|
9622
|
+
font-weight: var(--text-heading-sm-fontWeight);
|
|
9623
|
+
font-size: var(--text-heading-sm-fontSize);
|
|
9624
|
+
line-height: var(--text-heading-sm-lineHeight);
|
|
9429
9625
|
}
|
|
9430
9626
|
|
|
9431
9627
|
.muka-emptystate--sm .muka-emptystate__title {
|
|
@@ -9436,10 +9632,10 @@ li.muka-listitem {
|
|
|
9436
9632
|
}
|
|
9437
9633
|
|
|
9438
9634
|
.muka-emptystate--lg .muka-emptystate__title {
|
|
9439
|
-
font-family: var(--text-heading-
|
|
9440
|
-
font-weight: var(--text-heading-
|
|
9441
|
-
font-size: var(--text-heading-
|
|
9442
|
-
line-height: var(--text-heading-
|
|
9635
|
+
font-family: var(--text-heading-md-fontFamily);
|
|
9636
|
+
font-weight: var(--text-heading-md-fontWeight);
|
|
9637
|
+
font-size: var(--text-heading-md-fontSize);
|
|
9638
|
+
line-height: var(--text-heading-md-lineHeight);
|
|
9443
9639
|
}
|
|
9444
9640
|
|
|
9445
9641
|
/* Description */
|
|
@@ -9543,7 +9739,7 @@ li.muka-listitem {
|
|
|
9543
9739
|
}
|
|
9544
9740
|
|
|
9545
9741
|
.muka-dropdown-select__required {
|
|
9546
|
-
color: var(--color-state-error-
|
|
9742
|
+
color: var(--color-state-error-default);
|
|
9547
9743
|
}
|
|
9548
9744
|
|
|
9549
9745
|
.muka-dropdown-select__field {
|
|
@@ -9603,7 +9799,7 @@ li.muka-listitem {
|
|
|
9603
9799
|
}
|
|
9604
9800
|
|
|
9605
9801
|
.muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
|
|
9606
|
-
border-color: var(--color-state-error-
|
|
9802
|
+
border-color: var(--color-state-error-contrast);
|
|
9607
9803
|
}
|
|
9608
9804
|
|
|
9609
9805
|
.muka-dropdown-select__field--disabled {
|
|
@@ -9718,7 +9914,7 @@ li.muka-listitem {
|
|
|
9718
9914
|
|
|
9719
9915
|
.muka-dropdown-select__error {
|
|
9720
9916
|
margin: 0;
|
|
9721
|
-
color: var(--color-state-error-
|
|
9917
|
+
color: var(--color-state-error-default);
|
|
9722
9918
|
font-family: var(--text-label-sm-regular-fontFamily);
|
|
9723
9919
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
9724
9920
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
@@ -9954,7 +10150,7 @@ li.muka-listitem {
|
|
|
9954
10150
|
line-height: var(--text-label-sm-lineHeight);
|
|
9955
10151
|
border: 1px solid var(--color-border-default);
|
|
9956
10152
|
border-radius: var(--border-radius-md);
|
|
9957
|
-
background-color: var(--color-surface-
|
|
10153
|
+
background-color: var(--color-surface-level0);
|
|
9958
10154
|
color: var(--color-text-default-default);
|
|
9959
10155
|
}
|
|
9960
10156
|
|
|
@@ -10099,7 +10295,7 @@ li.muka-listitem {
|
|
|
10099
10295
|
|
|
10100
10296
|
.muka-documentviewer__thumbnail-label {
|
|
10101
10297
|
font-family: var(--alias-font-brand-family);
|
|
10102
|
-
font-size: var(--text-label-xs-fontSize);
|
|
10298
|
+
font-size: var(--text-label-xs-regular-fontSize);
|
|
10103
10299
|
color: var(--color-text-default-default);
|
|
10104
10300
|
font-weight: var(--alias-font-brand-weight-medium);
|
|
10105
10301
|
}
|
|
@@ -11126,10 +11322,10 @@ li.muka-listitem {
|
|
|
11126
11322
|
}
|
|
11127
11323
|
|
|
11128
11324
|
.muka-context-select__label {
|
|
11129
|
-
font-family: var(--text-label-sm-regular-
|
|
11130
|
-
font-size: var(--text-label-sm-regular-
|
|
11131
|
-
font-weight: var(--text-label-sm-regular-
|
|
11132
|
-
line-height: var(--text-label-sm-regular-
|
|
11325
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
11326
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
11327
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
11328
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
11133
11329
|
white-space: nowrap;
|
|
11134
11330
|
}
|
|
11135
11331
|
|
|
@@ -11310,7 +11506,7 @@ li.muka-listitem {
|
|
|
11310
11506
|
}
|
|
11311
11507
|
|
|
11312
11508
|
.muka-combobox__field--error:not(.muka-combobox__field--disabled) {
|
|
11313
|
-
border-color: var(--color-state-error-
|
|
11509
|
+
border-color: var(--color-state-error-contrast);
|
|
11314
11510
|
}
|
|
11315
11511
|
|
|
11316
11512
|
.muka-combobox__field--disabled {
|
|
@@ -11367,7 +11563,7 @@ li.muka-listitem {
|
|
|
11367
11563
|
|
|
11368
11564
|
.muka-combobox__error {
|
|
11369
11565
|
margin: 0;
|
|
11370
|
-
color: var(--color-state-error-
|
|
11566
|
+
color: var(--color-state-error-default);
|
|
11371
11567
|
font-family: var(--text-label-sm-regular-fontFamily);
|
|
11372
11568
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
11373
11569
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
@@ -11958,137 +12154,15 @@ li.muka-listitem {
|
|
|
11958
12154
|
line-height: var(--text-label-md-regular-lineHeight);
|
|
11959
12155
|
}
|
|
11960
12156
|
|
|
11961
|
-
.muka-checkbox--lg .muka-checkbox__label {
|
|
11962
|
-
font-family: var(--text-label-xl-regular-fontFamily);
|
|
11963
|
-
font-weight: var(--text-label-xl-regular-fontWeight);
|
|
11964
|
-
font-size: var(--text-label-xl-regular-fontSize);
|
|
11965
|
-
line-height: var(--text-label-xl-regular-lineHeight);
|
|
11966
|
-
}
|
|
11967
|
-
|
|
11968
|
-
.muka-checkbox--disabled .muka-checkbox__label {
|
|
11969
|
-
color: var(--color-text-subtle-default);
|
|
11970
|
-
}
|
|
11971
|
-
|
|
11972
|
-
|
|
11973
|
-
/* ChatPhotoGrid */
|
|
11974
|
-
/* ChatPhotoGrid Component Styles */
|
|
11975
|
-
|
|
11976
|
-
/*
|
|
11977
|
-
* The grid clips to its own radius and the tiles stay square, so only the four
|
|
11978
|
-
* outer corners round — matching the Figma "Wrapper" frame (5225:1394).
|
|
11979
|
-
*/
|
|
11980
|
-
.muka-chat-photo-grid {
|
|
11981
|
-
display: grid;
|
|
11982
|
-
gap: var(--chatphotogrid-gap);
|
|
11983
|
-
width: 100%;
|
|
11984
|
-
min-width: 0;
|
|
11985
|
-
overflow: hidden;
|
|
11986
|
-
border-radius: var(--chatphotogrid-radius);
|
|
11987
|
-
}
|
|
11988
|
-
|
|
11989
|
-
/* ─── Tiles ────────────────────────────────────────────── */
|
|
11990
|
-
|
|
11991
|
-
.muka-chat-photo-grid__tile {
|
|
11992
|
-
position: relative;
|
|
11993
|
-
display: block;
|
|
11994
|
-
overflow: hidden;
|
|
11995
|
-
min-width: 0;
|
|
11996
|
-
padding: 0;
|
|
11997
|
-
margin: 0;
|
|
11998
|
-
border: none;
|
|
11999
|
-
background-color: var(--chatphotogrid-color-placeholder);
|
|
12000
|
-
aspect-ratio: 1 / 1;
|
|
12001
|
-
}
|
|
12002
|
-
|
|
12003
|
-
button.muka-chat-photo-grid__tile {
|
|
12004
|
-
cursor: pointer;
|
|
12005
|
-
appearance: none;
|
|
12006
|
-
}
|
|
12007
|
-
|
|
12008
|
-
button.muka-chat-photo-grid__tile:focus-visible {
|
|
12009
|
-
outline: var(--border-width-bold) solid var(--color-border-focus);
|
|
12010
|
-
/* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
|
|
12011
|
-
outline-offset: calc(-1 * var(--border-width-bold));
|
|
12012
|
-
}
|
|
12013
|
-
|
|
12014
|
-
.muka-chat-photo-grid__image {
|
|
12015
|
-
display: block;
|
|
12016
|
-
width: 100%;
|
|
12017
|
-
height: 100%;
|
|
12018
|
-
object-fit: cover;
|
|
12019
|
-
}
|
|
12020
|
-
|
|
12021
|
-
/* ─── Overflow tile ────────────────────────────────────── */
|
|
12022
|
-
|
|
12023
|
-
.muka-chat-photo-grid__overflow {
|
|
12024
|
-
position: absolute;
|
|
12025
|
-
inset: 0;
|
|
12026
|
-
display: flex;
|
|
12027
|
-
align-items: center;
|
|
12028
|
-
justify-content: center;
|
|
12029
|
-
background-color: var(--chatphotogrid-color-overflow-background);
|
|
12030
|
-
color: var(--chatphotogrid-color-overflow-foreground);
|
|
12031
|
-
font-family: var(--text-body-2xl-regular-fontFamily);
|
|
12032
|
-
font-weight: var(--text-body-2xl-regular-fontWeight);
|
|
12033
|
-
font-size: var(--text-body-2xl-regular-fontSize);
|
|
12034
|
-
line-height: var(--text-body-2xl-regular-lineHeight);
|
|
12035
|
-
}
|
|
12036
|
-
|
|
12037
|
-
/* ─── Layouts ──────────────────────────────────────────── */
|
|
12038
|
-
|
|
12039
|
-
.muka-chat-photo-grid--1 {
|
|
12040
|
-
grid-template-columns: 1fr;
|
|
12041
|
-
}
|
|
12042
|
-
|
|
12043
|
-
.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
|
|
12044
|
-
aspect-ratio: 4 / 3;
|
|
12045
|
-
}
|
|
12046
|
-
|
|
12047
|
-
.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
|
|
12048
|
-
aspect-ratio: 3 / 4;
|
|
12049
|
-
}
|
|
12050
|
-
|
|
12051
|
-
.muka-chat-photo-grid--2 {
|
|
12052
|
-
grid-template-columns: repeat(2, 1fr);
|
|
12053
|
-
}
|
|
12054
|
-
|
|
12055
|
-
.muka-chat-photo-grid--3 {
|
|
12056
|
-
grid-template-columns: repeat(3, 1fr);
|
|
12057
|
-
}
|
|
12058
|
-
|
|
12059
|
-
.muka-chat-photo-grid--4 {
|
|
12060
|
-
grid-template-columns: repeat(2, 1fr);
|
|
12061
|
-
}
|
|
12062
|
-
|
|
12063
|
-
/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
|
|
12064
|
-
.muka-chat-photo-grid--5 {
|
|
12065
|
-
grid-template-columns: repeat(6, 1fr);
|
|
12066
|
-
}
|
|
12067
|
-
|
|
12068
|
-
.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
|
|
12069
|
-
grid-column: span 3;
|
|
12070
|
-
}
|
|
12071
|
-
|
|
12072
|
-
.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
|
|
12073
|
-
grid-column: span 2;
|
|
12074
|
-
}
|
|
12075
|
-
|
|
12076
|
-
.muka-chat-photo-grid--6,
|
|
12077
|
-
.muka-chat-photo-grid--overflow {
|
|
12078
|
-
grid-template-columns: repeat(3, 1fr);
|
|
12079
|
-
}
|
|
12080
|
-
|
|
12081
|
-
/* ─── Print ────────────────────────────────────────────── */
|
|
12082
|
-
|
|
12083
|
-
@media print {
|
|
12084
|
-
.muka-chat-photo-grid {
|
|
12085
|
-
break-inside: avoid;
|
|
12086
|
-
}
|
|
12157
|
+
.muka-checkbox--lg .muka-checkbox__label {
|
|
12158
|
+
font-family: var(--text-label-xl-regular-fontFamily);
|
|
12159
|
+
font-weight: var(--text-label-xl-regular-fontWeight);
|
|
12160
|
+
font-size: var(--text-label-xl-regular-fontSize);
|
|
12161
|
+
line-height: var(--text-label-xl-regular-lineHeight);
|
|
12162
|
+
}
|
|
12087
12163
|
|
|
12088
|
-
|
|
12089
|
-
|
|
12090
|
-
-webkit-print-color-adjust: exact;
|
|
12091
|
-
}
|
|
12164
|
+
.muka-checkbox--disabled .muka-checkbox__label {
|
|
12165
|
+
color: var(--color-text-subtle-default);
|
|
12092
12166
|
}
|
|
12093
12167
|
|
|
12094
12168
|
|
|
@@ -13251,19 +13325,36 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13251
13325
|
gap: var(--spacing-1);
|
|
13252
13326
|
}
|
|
13253
13327
|
|
|
13328
|
+
.muka-breadcrumb__item:has(.muka-breadcrumb__icon) {
|
|
13329
|
+
padding-left: var(--spacing-1);
|
|
13330
|
+
}
|
|
13331
|
+
|
|
13254
13332
|
.muka-breadcrumb__icon {
|
|
13255
13333
|
display: inline-flex;
|
|
13256
13334
|
align-items: center;
|
|
13257
13335
|
color: var(--color-text-subtle-default);
|
|
13258
13336
|
}
|
|
13259
13337
|
|
|
13338
|
+
.muka-breadcrumb__icon .muka-icon {
|
|
13339
|
+
color: inherit;
|
|
13340
|
+
}
|
|
13341
|
+
|
|
13342
|
+
.muka-breadcrumb__item:has(.muka-breadcrumb__current) .muka-breadcrumb__icon {
|
|
13343
|
+
color: var(--color-text-default-default);
|
|
13344
|
+
}
|
|
13345
|
+
|
|
13346
|
+
.muka-breadcrumb__item:has(.muka-breadcrumb__link:hover) .muka-breadcrumb__icon {
|
|
13347
|
+
color: var(--color-text-action-default);
|
|
13348
|
+
}
|
|
13349
|
+
|
|
13260
13350
|
/* Link styles */
|
|
13261
13351
|
.muka-breadcrumb__link {
|
|
13262
13352
|
color: var(--color-text-subtle-default);
|
|
13263
13353
|
text-decoration: none;
|
|
13264
13354
|
border: none;
|
|
13265
13355
|
background: none;
|
|
13266
|
-
padding:
|
|
13356
|
+
padding-inline: var(--spacing-2);
|
|
13357
|
+
padding-block: 0;
|
|
13267
13358
|
cursor: pointer;
|
|
13268
13359
|
font: inherit;
|
|
13269
13360
|
transition: color 0.15s ease;
|
|
@@ -13274,10 +13365,17 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13274
13365
|
text-decoration: underline;
|
|
13275
13366
|
}
|
|
13276
13367
|
|
|
13277
|
-
/*
|
|
13368
|
+
/* Tighter gap after leading icon */
|
|
13369
|
+
.muka-breadcrumb__item:has(.muka-breadcrumb__icon) .muka-breadcrumb__link,
|
|
13370
|
+
.muka-breadcrumb__item:has(.muka-breadcrumb__icon) .muka-breadcrumb__current {
|
|
13371
|
+
padding-left: var(--spacing-1);
|
|
13372
|
+
}
|
|
13373
|
+
|
|
13374
|
+
/* Current page (last item, no context switcher) */
|
|
13278
13375
|
.muka-breadcrumb__current {
|
|
13279
13376
|
color: var(--color-text-default-default);
|
|
13280
13377
|
font-weight: 600;
|
|
13378
|
+
padding-inline: var(--spacing-2);
|
|
13281
13379
|
}
|
|
13282
13380
|
|
|
13283
13381
|
/* Separator */
|
|
@@ -13466,7 +13564,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13466
13564
|
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
13467
13565
|
font-size: var(--text-label-sm-regular-fontSize);
|
|
13468
13566
|
line-height: var(--text-label-sm-regular-lineHeight);
|
|
13469
|
-
letter-spacing: var(--text-label-sm-regular-letterSpacing);
|
|
13470
13567
|
}
|
|
13471
13568
|
|
|
13472
13569
|
/* ─── Floating modifier ───────────────────────────────── */
|
|
@@ -13552,7 +13649,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13552
13649
|
font-weight: var(--text-label-md-regular-fontWeight);
|
|
13553
13650
|
font-size: var(--text-label-md-regular-fontSize);
|
|
13554
13651
|
line-height: var(--text-label-md-regular-lineHeight);
|
|
13555
|
-
letter-spacing: var(--text-label-md-regular-letterSpacing);
|
|
13556
13652
|
}
|
|
13557
13653
|
|
|
13558
13654
|
/* When floating and sidebar, remove the floating card styles */
|
|
@@ -13617,7 +13713,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13617
13713
|
font-weight: var(--text-label-md-regular-fontWeight);
|
|
13618
13714
|
font-size: var(--text-label-md-regular-fontSize);
|
|
13619
13715
|
line-height: var(--text-label-md-regular-lineHeight);
|
|
13620
|
-
letter-spacing: var(--text-label-md-regular-letterSpacing);
|
|
13621
13716
|
}
|
|
13622
13717
|
|
|
13623
13718
|
/* When floating and topnav, remove the floating card styles */
|
|
@@ -14728,10 +14823,10 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
14728
14823
|
cursor: pointer;
|
|
14729
14824
|
text-align: left;
|
|
14730
14825
|
color: var(--color-text-default-default);
|
|
14731
|
-
font-family: var(--text-body-
|
|
14732
|
-
font-weight: var(--text-body-
|
|
14733
|
-
font-size: var(--text-body-
|
|
14734
|
-
line-height: var(--text-body-
|
|
14826
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
14827
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
14828
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
14829
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
14735
14830
|
-webkit-tap-highlight-color: transparent;
|
|
14736
14831
|
transition: background-color 0.12s ease;
|
|
14737
14832
|
}
|
|
@@ -14942,194 +15037,124 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
14942
15037
|
}
|
|
14943
15038
|
|
|
14944
15039
|
|
|
14945
|
-
/*
|
|
14946
|
-
/*
|
|
15040
|
+
/* ChatPhotoGrid */
|
|
15041
|
+
/* ChatPhotoGrid Component Styles */
|
|
14947
15042
|
|
|
14948
|
-
/*
|
|
14949
|
-
|
|
14950
|
-
|
|
14951
|
-
|
|
14952
|
-
|
|
15043
|
+
/*
|
|
15044
|
+
* The grid clips to its own radius and the tiles stay square, so only the four
|
|
15045
|
+
* outer corners round — matching the Figma "Wrapper" frame (5225:1394).
|
|
15046
|
+
*/
|
|
15047
|
+
.muka-chat-photo-grid {
|
|
15048
|
+
display: grid;
|
|
15049
|
+
gap: var(--chatphotogrid-gap);
|
|
15050
|
+
width: 100%;
|
|
15051
|
+
min-width: 0;
|
|
15052
|
+
overflow: hidden;
|
|
15053
|
+
border-radius: var(--chatphotogrid-radius);
|
|
14953
15054
|
}
|
|
14954
15055
|
|
|
14955
|
-
/*
|
|
14956
|
-
.muka-sms-otp-field__label {
|
|
14957
|
-
color: var(--color-text-default-default);
|
|
14958
|
-
cursor: pointer;
|
|
14959
|
-
}
|
|
15056
|
+
/* ─── Tiles ────────────────────────────────────────────── */
|
|
14960
15057
|
|
|
14961
|
-
.muka-
|
|
14962
|
-
|
|
14963
|
-
|
|
14964
|
-
|
|
14965
|
-
|
|
15058
|
+
.muka-chat-photo-grid__tile {
|
|
15059
|
+
position: relative;
|
|
15060
|
+
display: block;
|
|
15061
|
+
overflow: hidden;
|
|
15062
|
+
min-width: 0;
|
|
15063
|
+
padding: 0;
|
|
15064
|
+
margin: 0;
|
|
15065
|
+
border: none;
|
|
15066
|
+
background-color: var(--chatphotogrid-color-placeholder);
|
|
15067
|
+
aspect-ratio: 1 / 1;
|
|
14966
15068
|
}
|
|
14967
15069
|
|
|
14968
|
-
.muka-
|
|
14969
|
-
|
|
14970
|
-
|
|
14971
|
-
font-size: var(--text-label-md-semibold-fontSize);
|
|
14972
|
-
line-height: var(--text-label-md-semibold-lineHeight);
|
|
15070
|
+
button.muka-chat-photo-grid__tile {
|
|
15071
|
+
cursor: pointer;
|
|
15072
|
+
appearance: none;
|
|
14973
15073
|
}
|
|
14974
15074
|
|
|
14975
|
-
.muka-
|
|
14976
|
-
|
|
14977
|
-
|
|
14978
|
-
|
|
14979
|
-
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
15075
|
+
button.muka-chat-photo-grid__tile:focus-visible {
|
|
15076
|
+
outline: var(--border-width-bold) solid var(--color-border-focus);
|
|
15077
|
+
/* Inset, so the grid's overflow clip cannot cut the ring off on corner tiles */
|
|
15078
|
+
outline-offset: calc(-1 * var(--border-width-bold));
|
|
14980
15079
|
}
|
|
14981
15080
|
|
|
14982
|
-
.muka-
|
|
14983
|
-
|
|
15081
|
+
.muka-chat-photo-grid__image {
|
|
15082
|
+
display: block;
|
|
15083
|
+
width: 100%;
|
|
15084
|
+
height: 100%;
|
|
15085
|
+
object-fit: cover;
|
|
14984
15086
|
}
|
|
14985
15087
|
|
|
14986
|
-
/*
|
|
14987
|
-
.muka-sms-otp-field__hidden-input {
|
|
14988
|
-
position: absolute;
|
|
14989
|
-
width: 1px;
|
|
14990
|
-
height: 1px;
|
|
14991
|
-
padding: 0;
|
|
14992
|
-
margin: -1px;
|
|
14993
|
-
overflow: hidden;
|
|
14994
|
-
clip: rect(0, 0, 0, 0);
|
|
14995
|
-
white-space: nowrap;
|
|
14996
|
-
border: 0;
|
|
14997
|
-
opacity: 0;
|
|
14998
|
-
pointer-events: none;
|
|
14999
|
-
}
|
|
15088
|
+
/* ─── Overflow tile ────────────────────────────────────── */
|
|
15000
15089
|
|
|
15001
|
-
|
|
15002
|
-
|
|
15090
|
+
.muka-chat-photo-grid__overflow {
|
|
15091
|
+
position: absolute;
|
|
15092
|
+
inset: 0;
|
|
15003
15093
|
display: flex;
|
|
15004
15094
|
align-items: center;
|
|
15005
|
-
gap: var(--spacing-2);
|
|
15006
|
-
}
|
|
15007
|
-
|
|
15008
|
-
/* Separator */
|
|
15009
|
-
.muka-sms-otp-field__separator {
|
|
15010
|
-
display: inline-flex;
|
|
15011
|
-
align-items: center;
|
|
15012
15095
|
justify-content: center;
|
|
15013
|
-
color: var(--color-
|
|
15014
|
-
|
|
15015
|
-
|
|
15016
|
-
|
|
15096
|
+
background-color: var(--chatphotogrid-color-overflow-background);
|
|
15097
|
+
color: var(--chatphotogrid-color-overflow-foreground);
|
|
15098
|
+
font-family: var(--text-body-2xl-regular-fontFamily);
|
|
15099
|
+
font-weight: var(--text-body-2xl-regular-fontWeight);
|
|
15100
|
+
font-size: var(--text-body-2xl-regular-fontSize);
|
|
15101
|
+
line-height: var(--text-body-2xl-regular-lineHeight);
|
|
15017
15102
|
}
|
|
15018
15103
|
|
|
15019
|
-
/*
|
|
15020
|
-
.muka-sms-otp-field__digit {
|
|
15021
|
-
display: flex;
|
|
15022
|
-
align-items: center;
|
|
15023
|
-
justify-content: center;
|
|
15024
|
-
text-align: center;
|
|
15025
|
-
background-color: var(--input-field-color-default-background);
|
|
15026
|
-
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
15027
|
-
color: var(--input-field-color-default-foreground);
|
|
15028
|
-
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
15029
|
-
box-sizing: border-box;
|
|
15030
|
-
caret-color: var(--input-field-color-focus-border);
|
|
15031
|
-
-moz-appearance: textfield;
|
|
15032
|
-
appearance: textfield;
|
|
15033
|
-
}
|
|
15104
|
+
/* ─── Layouts ──────────────────────────────────────────── */
|
|
15034
15105
|
|
|
15035
|
-
|
|
15036
|
-
|
|
15037
|
-
.muka-sms-otp-field__digit::-webkit-outer-spin-button {
|
|
15038
|
-
-webkit-appearance: none;
|
|
15039
|
-
margin: 0;
|
|
15106
|
+
.muka-chat-photo-grid--1 {
|
|
15107
|
+
grid-template-columns: 1fr;
|
|
15040
15108
|
}
|
|
15041
15109
|
|
|
15042
|
-
|
|
15043
|
-
|
|
15044
|
-
width: 36px;
|
|
15045
|
-
height: var(--input-field-height-sm);
|
|
15046
|
-
border-radius: var(--input-field-radius-sm);
|
|
15047
|
-
font-family: var(--text-input-sm-fontFamily);
|
|
15048
|
-
font-weight: var(--text-input-sm-fontWeight);
|
|
15049
|
-
font-size: var(--text-input-sm-fontSize);
|
|
15050
|
-
line-height: var(--text-input-sm-lineHeight);
|
|
15110
|
+
.muka-chat-photo-grid--landscape .muka-chat-photo-grid__tile {
|
|
15111
|
+
aspect-ratio: 4 / 3;
|
|
15051
15112
|
}
|
|
15052
15113
|
|
|
15053
|
-
.muka-
|
|
15054
|
-
|
|
15055
|
-
height: var(--input-field-height-default);
|
|
15056
|
-
border-radius: var(--input-field-radius-md);
|
|
15057
|
-
font-family: var(--text-input-md-fontFamily);
|
|
15058
|
-
font-weight: var(--text-input-md-fontWeight);
|
|
15059
|
-
font-size: var(--text-input-md-fontSize);
|
|
15060
|
-
line-height: var(--text-input-md-lineHeight);
|
|
15114
|
+
.muka-chat-photo-grid--portrait .muka-chat-photo-grid__tile {
|
|
15115
|
+
aspect-ratio: 3 / 4;
|
|
15061
15116
|
}
|
|
15062
15117
|
|
|
15063
|
-
.muka-
|
|
15064
|
-
|
|
15065
|
-
height: var(--input-field-height-lg);
|
|
15066
|
-
border-radius: var(--input-field-radius-lg);
|
|
15067
|
-
font-family: var(--text-input-lg-fontFamily);
|
|
15068
|
-
font-weight: var(--text-input-lg-fontWeight);
|
|
15069
|
-
font-size: var(--text-input-lg-fontSize);
|
|
15070
|
-
line-height: var(--text-input-lg-lineHeight);
|
|
15118
|
+
.muka-chat-photo-grid--2 {
|
|
15119
|
+
grid-template-columns: repeat(2, 1fr);
|
|
15071
15120
|
}
|
|
15072
15121
|
|
|
15073
|
-
|
|
15074
|
-
|
|
15075
|
-
content: '';
|
|
15076
|
-
position: absolute;
|
|
15077
|
-
inset: 0;
|
|
15078
|
-
border-radius: inherit;
|
|
15079
|
-
box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
|
|
15080
|
-
pointer-events: none;
|
|
15122
|
+
.muka-chat-photo-grid--3 {
|
|
15123
|
+
grid-template-columns: repeat(3, 1fr);
|
|
15081
15124
|
}
|
|
15082
15125
|
|
|
15083
|
-
|
|
15084
|
-
|
|
15085
|
-
border-width: var(--border-width-bold);
|
|
15086
|
-
border-color: var(--input-field-color-focus-border);
|
|
15087
|
-
background-color: var(--input-field-color-focus-background);
|
|
15088
|
-
outline: none;
|
|
15126
|
+
.muka-chat-photo-grid--4 {
|
|
15127
|
+
grid-template-columns: repeat(2, 1fr);
|
|
15089
15128
|
}
|
|
15090
15129
|
|
|
15091
|
-
/*
|
|
15092
|
-
.muka-
|
|
15093
|
-
|
|
15130
|
+
/* 5 photos: a 2-up row above a 3-up row, on a shared 6-column track */
|
|
15131
|
+
.muka-chat-photo-grid--5 {
|
|
15132
|
+
grid-template-columns: repeat(6, 1fr);
|
|
15094
15133
|
}
|
|
15095
15134
|
|
|
15096
|
-
|
|
15097
|
-
|
|
15098
|
-
border-width: var(--border-width-bold);
|
|
15099
|
-
border-color: var(--input-field-color-error-border);
|
|
15100
|
-
background-color: var(--input-field-color-error-background);
|
|
15135
|
+
.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(-n + 2) {
|
|
15136
|
+
grid-column: span 3;
|
|
15101
15137
|
}
|
|
15102
15138
|
|
|
15103
|
-
|
|
15104
|
-
|
|
15105
|
-
background-color: var(--input-field-color-disabled-background);
|
|
15106
|
-
border-color: var(--input-field-color-disabled-border);
|
|
15107
|
-
color: var(--input-field-color-disabled-foreground);
|
|
15108
|
-
cursor: not-allowed;
|
|
15139
|
+
.muka-chat-photo-grid--5 .muka-chat-photo-grid__tile:nth-child(n + 3) {
|
|
15140
|
+
grid-column: span 2;
|
|
15109
15141
|
}
|
|
15110
15142
|
|
|
15111
|
-
|
|
15112
|
-
.muka-
|
|
15113
|
-
|
|
15143
|
+
.muka-chat-photo-grid--6,
|
|
15144
|
+
.muka-chat-photo-grid--overflow {
|
|
15145
|
+
grid-template-columns: repeat(3, 1fr);
|
|
15114
15146
|
}
|
|
15115
15147
|
|
|
15116
|
-
/*
|
|
15117
|
-
.muka-sms-otp-field__helper {
|
|
15118
|
-
font-family: var(--text-label-sm-regular-fontFamily);
|
|
15119
|
-
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
15120
|
-
font-size: var(--text-label-sm-regular-fontSize);
|
|
15121
|
-
line-height: var(--text-label-sm-regular-lineHeight);
|
|
15122
|
-
color: var(--color-text-subtle-default);
|
|
15123
|
-
margin: 0;
|
|
15124
|
-
}
|
|
15148
|
+
/* ─── Print ────────────────────────────────────────────── */
|
|
15125
15149
|
|
|
15126
|
-
|
|
15127
|
-
.muka-
|
|
15128
|
-
|
|
15129
|
-
|
|
15130
|
-
|
|
15131
|
-
|
|
15132
|
-
|
|
15133
|
-
|
|
15150
|
+
@media print {
|
|
15151
|
+
.muka-chat-photo-grid {
|
|
15152
|
+
break-inside: avoid;
|
|
15153
|
+
}
|
|
15154
|
+
|
|
15155
|
+
.muka-chat-photo-grid__image {
|
|
15156
|
+
print-color-adjust: exact;
|
|
15157
|
+
-webkit-print-color-adjust: exact;
|
|
15158
|
+
}
|
|
15134
15159
|
}
|
|
15135
15160
|
|