@revikornmann/muka-ui 0.13.0 → 0.14.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/ChatMessage/ChatMessage.css +13 -17
- package/dist/cjs/components/ChatMessage/ChatMessage.js +12 -15
- package/dist/cjs/components/ChatMessage/ChatMessage.js.map +1 -1
- package/dist/esm/components/ChatMessage/ChatMessage.css +13 -17
- package/dist/esm/components/ChatMessage/ChatMessage.js +12 -15
- package/dist/esm/components/ChatMessage/ChatMessage.js.map +1 -1
- package/dist/styles/components/ChatMessage.css +13 -17
- package/dist/styles/index.css +1665 -1669
- package/dist/styles/muka-dark.css +1665 -1669
- package/dist/styles/muka-light.css +1665 -1669
- package/dist/styles/wireframe-dark.css +1665 -1669
- package/dist/styles/wireframe-light.css +1665 -1669
- package/dist/types/components/ChatMessage/ChatMessage.d.ts +7 -10
- package/dist/types/components/ChatMessage/ChatMessage.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/styles/index.css
CHANGED
|
@@ -2920,6 +2920,196 @@ body {
|
|
|
2920
2920
|
}
|
|
2921
2921
|
|
|
2922
2922
|
|
|
2923
|
+
/* Toast */
|
|
2924
|
+
/* Toast Component Styles - Using Muka Design Tokens */
|
|
2925
|
+
|
|
2926
|
+
.muka-toast {
|
|
2927
|
+
display: flex;
|
|
2928
|
+
align-items: flex-start;
|
|
2929
|
+
gap: var(--toast-gap);
|
|
2930
|
+
padding: var(--toast-padding-y) var(--toast-padding-x);
|
|
2931
|
+
border-radius: var(--toast-radius);
|
|
2932
|
+
box-shadow: var(--toast-shadow);
|
|
2933
|
+
min-width: var(--toast-width-min);
|
|
2934
|
+
max-width: var(--toast-width-max);
|
|
2935
|
+
pointer-events: auto;
|
|
2936
|
+
animation: muka-toast-slide-in 0.2s ease-out;
|
|
2937
|
+
}
|
|
2938
|
+
|
|
2939
|
+
/* Entry animation */
|
|
2940
|
+
@keyframes muka-toast-slide-in {
|
|
2941
|
+
from {
|
|
2942
|
+
opacity: 0;
|
|
2943
|
+
transform: translateY(8px);
|
|
2944
|
+
}
|
|
2945
|
+
to {
|
|
2946
|
+
opacity: 1;
|
|
2947
|
+
transform: translateY(0);
|
|
2948
|
+
}
|
|
2949
|
+
}
|
|
2950
|
+
|
|
2951
|
+
/* Position variants (for standalone use - typically managed by ToastProvider) */
|
|
2952
|
+
.muka-toast--top-right,
|
|
2953
|
+
.muka-toast--top-left,
|
|
2954
|
+
.muka-toast--top-center,
|
|
2955
|
+
.muka-toast--bottom-right,
|
|
2956
|
+
.muka-toast--bottom-left,
|
|
2957
|
+
.muka-toast--bottom-center {
|
|
2958
|
+
position: fixed;
|
|
2959
|
+
z-index: 9999;
|
|
2960
|
+
}
|
|
2961
|
+
|
|
2962
|
+
.muka-toast--top-right {
|
|
2963
|
+
top: var(--spacing-4);
|
|
2964
|
+
right: var(--spacing-4);
|
|
2965
|
+
}
|
|
2966
|
+
|
|
2967
|
+
.muka-toast--top-left {
|
|
2968
|
+
top: var(--spacing-4);
|
|
2969
|
+
left: var(--spacing-4);
|
|
2970
|
+
}
|
|
2971
|
+
|
|
2972
|
+
.muka-toast--top-center {
|
|
2973
|
+
top: var(--spacing-4);
|
|
2974
|
+
left: 50%;
|
|
2975
|
+
transform: translateX(-50%);
|
|
2976
|
+
}
|
|
2977
|
+
|
|
2978
|
+
.muka-toast--bottom-right {
|
|
2979
|
+
bottom: var(--spacing-4);
|
|
2980
|
+
right: var(--spacing-4);
|
|
2981
|
+
}
|
|
2982
|
+
|
|
2983
|
+
.muka-toast--bottom-left {
|
|
2984
|
+
bottom: var(--spacing-4);
|
|
2985
|
+
left: var(--spacing-4);
|
|
2986
|
+
}
|
|
2987
|
+
|
|
2988
|
+
.muka-toast--bottom-center {
|
|
2989
|
+
bottom: var(--spacing-4);
|
|
2990
|
+
left: 50%;
|
|
2991
|
+
transform: translateX(-50%);
|
|
2992
|
+
}
|
|
2993
|
+
|
|
2994
|
+
/* Variant: Info */
|
|
2995
|
+
.muka-toast--info {
|
|
2996
|
+
background-color: var(--toast-color-info-background);
|
|
2997
|
+
color: var(--toast-color-info-foreground);
|
|
2998
|
+
}
|
|
2999
|
+
|
|
3000
|
+
.muka-toast--info .muka-toast__icon {
|
|
3001
|
+
color: var(--toast-color-info-accent);
|
|
3002
|
+
}
|
|
3003
|
+
|
|
3004
|
+
/* Variant: Success */
|
|
3005
|
+
.muka-toast--success {
|
|
3006
|
+
background-color: var(--toast-color-success-background);
|
|
3007
|
+
color: var(--toast-color-success-foreground);
|
|
3008
|
+
}
|
|
3009
|
+
|
|
3010
|
+
.muka-toast--success .muka-toast__icon {
|
|
3011
|
+
color: var(--toast-color-success-accent);
|
|
3012
|
+
}
|
|
3013
|
+
|
|
3014
|
+
/* Variant: Warning */
|
|
3015
|
+
.muka-toast--warning {
|
|
3016
|
+
background-color: var(--toast-color-warning-background);
|
|
3017
|
+
color: var(--toast-color-warning-foreground);
|
|
3018
|
+
}
|
|
3019
|
+
|
|
3020
|
+
.muka-toast--warning .muka-toast__icon {
|
|
3021
|
+
color: var(--toast-color-warning-accent);
|
|
3022
|
+
}
|
|
3023
|
+
|
|
3024
|
+
/* Variant: Error */
|
|
3025
|
+
.muka-toast--error {
|
|
3026
|
+
background-color: var(--toast-color-error-background);
|
|
3027
|
+
color: var(--toast-color-error-foreground);
|
|
3028
|
+
}
|
|
3029
|
+
|
|
3030
|
+
.muka-toast--error .muka-toast__icon {
|
|
3031
|
+
color: var(--toast-color-error-accent);
|
|
3032
|
+
}
|
|
3033
|
+
|
|
3034
|
+
/* Icon */
|
|
3035
|
+
.muka-toast__icon {
|
|
3036
|
+
display: flex;
|
|
3037
|
+
align-items: center;
|
|
3038
|
+
justify-content: center;
|
|
3039
|
+
flex-shrink: 0;
|
|
3040
|
+
width: var(--toast-icon-size);
|
|
3041
|
+
height: var(--toast-icon-size);
|
|
3042
|
+
}
|
|
3043
|
+
|
|
3044
|
+
.muka-toast__icon svg {
|
|
3045
|
+
width: 100%;
|
|
3046
|
+
height: 100%;
|
|
3047
|
+
}
|
|
3048
|
+
|
|
3049
|
+
/* Content */
|
|
3050
|
+
.muka-toast__content {
|
|
3051
|
+
flex: 1;
|
|
3052
|
+
min-width: 0;
|
|
3053
|
+
}
|
|
3054
|
+
|
|
3055
|
+
.muka-toast__title {
|
|
3056
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
3057
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
3058
|
+
font-size: var(--text-label-md-semibold-fontSize);
|
|
3059
|
+
line-height: var(--text-label-md-semibold-lineHeight);
|
|
3060
|
+
margin-bottom: var(--spacing-1);
|
|
3061
|
+
}
|
|
3062
|
+
|
|
3063
|
+
.muka-toast__message {
|
|
3064
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
3065
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
3066
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
3067
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3070
|
+
/* Action slot */
|
|
3071
|
+
.muka-toast__action {
|
|
3072
|
+
display: flex;
|
|
3073
|
+
align-items: center;
|
|
3074
|
+
flex-shrink: 0;
|
|
3075
|
+
}
|
|
3076
|
+
|
|
3077
|
+
/* Dismiss button */
|
|
3078
|
+
.muka-toast__dismiss {
|
|
3079
|
+
display: flex;
|
|
3080
|
+
align-items: center;
|
|
3081
|
+
justify-content: center;
|
|
3082
|
+
flex-shrink: 0;
|
|
3083
|
+
width: 24px;
|
|
3084
|
+
height: 24px;
|
|
3085
|
+
padding: 0;
|
|
3086
|
+
margin: -2px -4px -2px 0;
|
|
3087
|
+
border: none;
|
|
3088
|
+
background: transparent;
|
|
3089
|
+
color: inherit;
|
|
3090
|
+
opacity: 0.7;
|
|
3091
|
+
cursor: pointer;
|
|
3092
|
+
border-radius: var(--border-radius-sm);
|
|
3093
|
+
transition: opacity 0.15s ease, background-color 0.15s ease;
|
|
3094
|
+
}
|
|
3095
|
+
|
|
3096
|
+
.muka-toast__dismiss:hover {
|
|
3097
|
+
opacity: 1;
|
|
3098
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
3099
|
+
}
|
|
3100
|
+
|
|
3101
|
+
.muka-toast__dismiss:focus-visible {
|
|
3102
|
+
outline: 2px solid var(--color-border-focus);
|
|
3103
|
+
outline-offset: 2px;
|
|
3104
|
+
opacity: 1;
|
|
3105
|
+
}
|
|
3106
|
+
|
|
3107
|
+
.muka-toast__dismiss svg {
|
|
3108
|
+
width: 16px;
|
|
3109
|
+
height: 16px;
|
|
3110
|
+
}
|
|
3111
|
+
|
|
3112
|
+
|
|
2923
3113
|
/* Tile */
|
|
2924
3114
|
/* Tile Component Styles - Using Muka Design Tokens */
|
|
2925
3115
|
|
|
@@ -3281,230 +3471,40 @@ body {
|
|
|
3281
3471
|
}
|
|
3282
3472
|
|
|
3283
3473
|
|
|
3284
|
-
/*
|
|
3285
|
-
/*
|
|
3474
|
+
/* Thumbnail */
|
|
3475
|
+
/* Thumbnail Component Styles - Using Muka Design Tokens */
|
|
3286
3476
|
|
|
3287
|
-
.muka-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
gap: var(--toast-gap);
|
|
3291
|
-
padding: var(--toast-padding-y) var(--toast-padding-x);
|
|
3292
|
-
border-radius: var(--toast-radius);
|
|
3293
|
-
box-shadow: var(--toast-shadow);
|
|
3294
|
-
min-width: var(--toast-width-min);
|
|
3295
|
-
max-width: var(--toast-width-max);
|
|
3296
|
-
pointer-events: auto;
|
|
3297
|
-
animation: muka-toast-slide-in 0.2s ease-out;
|
|
3477
|
+
.muka-thumbnail {
|
|
3478
|
+
position: relative;
|
|
3479
|
+
flex-shrink: 0;
|
|
3298
3480
|
}
|
|
3299
3481
|
|
|
3300
|
-
/*
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3482
|
+
/* The frame carries the border, background and shape clip. Keeping it separate
|
|
3483
|
+
from the root lets the remove (×) button sit outside the clip (needed for the
|
|
3484
|
+
circular/ellipse shape, whose corners would otherwise clip the button). */
|
|
3485
|
+
.muka-thumbnail__frame {
|
|
3486
|
+
position: absolute;
|
|
3487
|
+
inset: 0;
|
|
3488
|
+
overflow: hidden;
|
|
3489
|
+
border: var(--border-width-regular, 1px) solid var(--color-black-alpha-3);
|
|
3490
|
+
border-radius: var(--border-radius-lg);
|
|
3491
|
+
background-color: var(--color-surface-level1);
|
|
3310
3492
|
}
|
|
3311
3493
|
|
|
3312
|
-
/*
|
|
3313
|
-
.muka-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
.muka-toast--bottom-right,
|
|
3317
|
-
.muka-toast--bottom-left,
|
|
3318
|
-
.muka-toast--bottom-center {
|
|
3319
|
-
position: fixed;
|
|
3320
|
-
z-index: 9999;
|
|
3494
|
+
/* ─── Shapes ──────────────────────────────────────────── */
|
|
3495
|
+
.muka-thumbnail--4-3 {
|
|
3496
|
+
width: 160px;
|
|
3497
|
+
height: 120px;
|
|
3321
3498
|
}
|
|
3322
3499
|
|
|
3323
|
-
.muka-
|
|
3324
|
-
|
|
3325
|
-
|
|
3500
|
+
.muka-thumbnail--1-1 {
|
|
3501
|
+
width: 120px;
|
|
3502
|
+
height: 120px;
|
|
3326
3503
|
}
|
|
3327
3504
|
|
|
3328
|
-
.muka-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
}
|
|
3332
|
-
|
|
3333
|
-
.muka-toast--top-center {
|
|
3334
|
-
top: var(--spacing-4);
|
|
3335
|
-
left: 50%;
|
|
3336
|
-
transform: translateX(-50%);
|
|
3337
|
-
}
|
|
3338
|
-
|
|
3339
|
-
.muka-toast--bottom-right {
|
|
3340
|
-
bottom: var(--spacing-4);
|
|
3341
|
-
right: var(--spacing-4);
|
|
3342
|
-
}
|
|
3343
|
-
|
|
3344
|
-
.muka-toast--bottom-left {
|
|
3345
|
-
bottom: var(--spacing-4);
|
|
3346
|
-
left: var(--spacing-4);
|
|
3347
|
-
}
|
|
3348
|
-
|
|
3349
|
-
.muka-toast--bottom-center {
|
|
3350
|
-
bottom: var(--spacing-4);
|
|
3351
|
-
left: 50%;
|
|
3352
|
-
transform: translateX(-50%);
|
|
3353
|
-
}
|
|
3354
|
-
|
|
3355
|
-
/* Variant: Info */
|
|
3356
|
-
.muka-toast--info {
|
|
3357
|
-
background-color: var(--toast-color-info-background);
|
|
3358
|
-
color: var(--toast-color-info-foreground);
|
|
3359
|
-
}
|
|
3360
|
-
|
|
3361
|
-
.muka-toast--info .muka-toast__icon {
|
|
3362
|
-
color: var(--toast-color-info-accent);
|
|
3363
|
-
}
|
|
3364
|
-
|
|
3365
|
-
/* Variant: Success */
|
|
3366
|
-
.muka-toast--success {
|
|
3367
|
-
background-color: var(--toast-color-success-background);
|
|
3368
|
-
color: var(--toast-color-success-foreground);
|
|
3369
|
-
}
|
|
3370
|
-
|
|
3371
|
-
.muka-toast--success .muka-toast__icon {
|
|
3372
|
-
color: var(--toast-color-success-accent);
|
|
3373
|
-
}
|
|
3374
|
-
|
|
3375
|
-
/* Variant: Warning */
|
|
3376
|
-
.muka-toast--warning {
|
|
3377
|
-
background-color: var(--toast-color-warning-background);
|
|
3378
|
-
color: var(--toast-color-warning-foreground);
|
|
3379
|
-
}
|
|
3380
|
-
|
|
3381
|
-
.muka-toast--warning .muka-toast__icon {
|
|
3382
|
-
color: var(--toast-color-warning-accent);
|
|
3383
|
-
}
|
|
3384
|
-
|
|
3385
|
-
/* Variant: Error */
|
|
3386
|
-
.muka-toast--error {
|
|
3387
|
-
background-color: var(--toast-color-error-background);
|
|
3388
|
-
color: var(--toast-color-error-foreground);
|
|
3389
|
-
}
|
|
3390
|
-
|
|
3391
|
-
.muka-toast--error .muka-toast__icon {
|
|
3392
|
-
color: var(--toast-color-error-accent);
|
|
3393
|
-
}
|
|
3394
|
-
|
|
3395
|
-
/* Icon */
|
|
3396
|
-
.muka-toast__icon {
|
|
3397
|
-
display: flex;
|
|
3398
|
-
align-items: center;
|
|
3399
|
-
justify-content: center;
|
|
3400
|
-
flex-shrink: 0;
|
|
3401
|
-
width: var(--toast-icon-size);
|
|
3402
|
-
height: var(--toast-icon-size);
|
|
3403
|
-
}
|
|
3404
|
-
|
|
3405
|
-
.muka-toast__icon svg {
|
|
3406
|
-
width: 100%;
|
|
3407
|
-
height: 100%;
|
|
3408
|
-
}
|
|
3409
|
-
|
|
3410
|
-
/* Content */
|
|
3411
|
-
.muka-toast__content {
|
|
3412
|
-
flex: 1;
|
|
3413
|
-
min-width: 0;
|
|
3414
|
-
}
|
|
3415
|
-
|
|
3416
|
-
.muka-toast__title {
|
|
3417
|
-
font-family: var(--text-label-md-semibold-fontFamily);
|
|
3418
|
-
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
3419
|
-
font-size: var(--text-label-md-semibold-fontSize);
|
|
3420
|
-
line-height: var(--text-label-md-semibold-lineHeight);
|
|
3421
|
-
margin-bottom: var(--spacing-1);
|
|
3422
|
-
}
|
|
3423
|
-
|
|
3424
|
-
.muka-toast__message {
|
|
3425
|
-
font-family: var(--text-body-sm-regular-fontFamily);
|
|
3426
|
-
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
3427
|
-
font-size: var(--text-body-sm-regular-fontSize);
|
|
3428
|
-
line-height: var(--text-body-sm-regular-lineHeight);
|
|
3429
|
-
}
|
|
3430
|
-
|
|
3431
|
-
/* Action slot */
|
|
3432
|
-
.muka-toast__action {
|
|
3433
|
-
display: flex;
|
|
3434
|
-
align-items: center;
|
|
3435
|
-
flex-shrink: 0;
|
|
3436
|
-
}
|
|
3437
|
-
|
|
3438
|
-
/* Dismiss button */
|
|
3439
|
-
.muka-toast__dismiss {
|
|
3440
|
-
display: flex;
|
|
3441
|
-
align-items: center;
|
|
3442
|
-
justify-content: center;
|
|
3443
|
-
flex-shrink: 0;
|
|
3444
|
-
width: 24px;
|
|
3445
|
-
height: 24px;
|
|
3446
|
-
padding: 0;
|
|
3447
|
-
margin: -2px -4px -2px 0;
|
|
3448
|
-
border: none;
|
|
3449
|
-
background: transparent;
|
|
3450
|
-
color: inherit;
|
|
3451
|
-
opacity: 0.7;
|
|
3452
|
-
cursor: pointer;
|
|
3453
|
-
border-radius: var(--border-radius-sm);
|
|
3454
|
-
transition: opacity 0.15s ease, background-color 0.15s ease;
|
|
3455
|
-
}
|
|
3456
|
-
|
|
3457
|
-
.muka-toast__dismiss:hover {
|
|
3458
|
-
opacity: 1;
|
|
3459
|
-
background-color: rgba(0, 0, 0, 0.05);
|
|
3460
|
-
}
|
|
3461
|
-
|
|
3462
|
-
.muka-toast__dismiss:focus-visible {
|
|
3463
|
-
outline: 2px solid var(--color-border-focus);
|
|
3464
|
-
outline-offset: 2px;
|
|
3465
|
-
opacity: 1;
|
|
3466
|
-
}
|
|
3467
|
-
|
|
3468
|
-
.muka-toast__dismiss svg {
|
|
3469
|
-
width: 16px;
|
|
3470
|
-
height: 16px;
|
|
3471
|
-
}
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
/* Thumbnail */
|
|
3475
|
-
/* Thumbnail Component Styles - Using Muka Design Tokens */
|
|
3476
|
-
|
|
3477
|
-
.muka-thumbnail {
|
|
3478
|
-
position: relative;
|
|
3479
|
-
flex-shrink: 0;
|
|
3480
|
-
}
|
|
3481
|
-
|
|
3482
|
-
/* The frame carries the border, background and shape clip. Keeping it separate
|
|
3483
|
-
from the root lets the remove (×) button sit outside the clip (needed for the
|
|
3484
|
-
circular/ellipse shape, whose corners would otherwise clip the button). */
|
|
3485
|
-
.muka-thumbnail__frame {
|
|
3486
|
-
position: absolute;
|
|
3487
|
-
inset: 0;
|
|
3488
|
-
overflow: hidden;
|
|
3489
|
-
border: var(--border-width-regular, 1px) solid var(--color-black-alpha-3);
|
|
3490
|
-
border-radius: var(--border-radius-lg);
|
|
3491
|
-
background-color: var(--color-surface-level1);
|
|
3492
|
-
}
|
|
3493
|
-
|
|
3494
|
-
/* ─── Shapes ──────────────────────────────────────────── */
|
|
3495
|
-
.muka-thumbnail--4-3 {
|
|
3496
|
-
width: 160px;
|
|
3497
|
-
height: 120px;
|
|
3498
|
-
}
|
|
3499
|
-
|
|
3500
|
-
.muka-thumbnail--1-1 {
|
|
3501
|
-
width: 120px;
|
|
3502
|
-
height: 120px;
|
|
3503
|
-
}
|
|
3504
|
-
|
|
3505
|
-
.muka-thumbnail--ellipse {
|
|
3506
|
-
width: 120px;
|
|
3507
|
-
height: 120px;
|
|
3505
|
+
.muka-thumbnail--ellipse {
|
|
3506
|
+
width: 120px;
|
|
3507
|
+
height: 120px;
|
|
3508
3508
|
}
|
|
3509
3509
|
|
|
3510
3510
|
.muka-thumbnail--ellipse .muka-thumbnail__frame {
|
|
@@ -4866,724 +4866,450 @@ body {
|
|
|
4866
4866
|
}
|
|
4867
4867
|
|
|
4868
4868
|
|
|
4869
|
-
/*
|
|
4870
|
-
/*
|
|
4871
|
-
|
|
4872
|
-
/* ─── Backdrop ────────────────────────────────────────── */
|
|
4869
|
+
/* SegmentGroup */
|
|
4870
|
+
/* SegmentGroup Component Styles - Using Muka Design Tokens */
|
|
4873
4871
|
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
|
|
4878
|
-
|
|
4872
|
+
/* Container */
|
|
4873
|
+
.muka-segmentgroup {
|
|
4874
|
+
display: inline-flex;
|
|
4875
|
+
align-items: center;
|
|
4876
|
+
gap: 0;
|
|
4877
|
+
padding: var(--segmentgroup-container-padding);
|
|
4878
|
+
background-color: var(--segmentgroup-container-background);
|
|
4879
|
+
border-radius: var(--segmentgroup-container-radius);
|
|
4880
|
+
position: relative;
|
|
4881
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
4879
4882
|
}
|
|
4880
4883
|
|
|
4881
|
-
/*
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
position:
|
|
4885
|
-
|
|
4886
|
-
|
|
4887
|
-
|
|
4888
|
-
|
|
4889
|
-
|
|
4890
|
-
display: flex;
|
|
4891
|
-
flex-direction: column;
|
|
4892
|
-
|
|
4893
|
-
max-height: 96dvh;
|
|
4894
|
-
|
|
4895
|
-
background-color: var(--color-surface-level3);
|
|
4896
|
-
border-top-left-radius: var(--radius-lg);
|
|
4897
|
-
border-top-right-radius: var(--radius-lg);
|
|
4898
|
-
box-shadow: var(--shadow-level5);
|
|
4899
|
-
|
|
4900
|
-
outline: none;
|
|
4884
|
+
/* Inset shadow on container */
|
|
4885
|
+
.muka-segmentgroup::after {
|
|
4886
|
+
content: '';
|
|
4887
|
+
position: absolute;
|
|
4888
|
+
inset: 0;
|
|
4889
|
+
border-radius: inherit;
|
|
4890
|
+
box-shadow: var(--segmentgroup-container-shadow);
|
|
4891
|
+
pointer-events: none;
|
|
4901
4892
|
}
|
|
4902
4893
|
|
|
4903
|
-
/*
|
|
4904
|
-
.muka-
|
|
4905
|
-
|
|
4894
|
+
/* Full width variant */
|
|
4895
|
+
.muka-segmentgroup--full-width {
|
|
4896
|
+
width: 100%;
|
|
4906
4897
|
}
|
|
4907
4898
|
|
|
4908
|
-
|
|
4909
|
-
|
|
4910
|
-
.muka-sheet__handle-container {
|
|
4911
|
-
display: flex;
|
|
4912
|
-
justify-content: center;
|
|
4913
|
-
flex-shrink: 0;
|
|
4914
|
-
padding: var(--spacing-3) 0;
|
|
4899
|
+
.muka-segmentgroup--full-width .muka-segmentgroup__segment {
|
|
4900
|
+
flex: 1;
|
|
4915
4901
|
}
|
|
4916
4902
|
|
|
4917
|
-
|
|
4918
|
-
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
|
|
4903
|
+
/* Pill */
|
|
4904
|
+
.muka-segmentgroup__pill {
|
|
4905
|
+
position: absolute;
|
|
4906
|
+
top: var(--segmentgroup-container-padding);
|
|
4907
|
+
bottom: var(--segmentgroup-container-padding);
|
|
4908
|
+
left: 0;
|
|
4909
|
+
margin: 0;
|
|
4910
|
+
background-color: var(--segmentgroup-segment-color-selected-background);
|
|
4911
|
+
box-shadow: var(--segmentgroup-segment-shadow-selected);
|
|
4912
|
+
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
4913
|
+
z-index: 0;
|
|
4914
|
+
pointer-events: none;
|
|
4922
4915
|
}
|
|
4923
4916
|
|
|
4924
|
-
/*
|
|
4917
|
+
/* Segment button */
|
|
4918
|
+
.muka-segmentgroup__segment {
|
|
4919
|
+
display: inline-flex;
|
|
4920
|
+
align-items: center;
|
|
4921
|
+
justify-content: center;
|
|
4922
|
+
gap: var(--segmentgroup-segment-gap);
|
|
4923
|
+
border: none;
|
|
4924
|
+
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
4925
|
+
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
4926
|
+
border-radius: var(--segmentgroup-segment-radius);
|
|
4927
|
+
cursor: pointer;
|
|
4928
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
4929
|
+
position: relative;
|
|
4930
|
+
outline: none;
|
|
4931
|
+
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
4932
|
+
font-family: var(--alias-font-plain-family);
|
|
4933
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
4934
|
+
z-index: 1; /* Keep above pill */
|
|
4935
|
+
}
|
|
4925
4936
|
|
|
4926
|
-
|
|
4927
|
-
|
|
4928
|
-
|
|
4929
|
-
|
|
4930
|
-
|
|
4931
|
-
|
|
4937
|
+
/* Size variants */
|
|
4938
|
+
.muka-segmentgroup--sm {
|
|
4939
|
+
border-radius: var(--border-radius-xl, 16px);
|
|
4940
|
+
}
|
|
4941
|
+
.muka-segmentgroup--sm .muka-segmentgroup__segment,
|
|
4942
|
+
.muka-segmentgroup--sm .muka-segmentgroup__pill {
|
|
4943
|
+
border-radius: var(--border-radius-xl, 16px);
|
|
4944
|
+
}
|
|
4945
|
+
.muka-segmentgroup--sm .muka-segmentgroup__segment {
|
|
4946
|
+
padding: var(--segmentgroup-segment-padding-sm-y) var(--segmentgroup-segment-padding-sm-x);
|
|
4947
|
+
height: var(--segmentgroup-segment-height-sm);
|
|
4948
|
+
font-size: var(--text-label-sm-fontSize);
|
|
4949
|
+
line-height: var(--text-label-sm-lineHeight);
|
|
4932
4950
|
}
|
|
4933
4951
|
|
|
4934
|
-
|
|
4952
|
+
.muka-segmentgroup--md {
|
|
4953
|
+
border-radius: var(--border-radius-xl, 16px);
|
|
4954
|
+
}
|
|
4955
|
+
.muka-segmentgroup--md .muka-segmentgroup__segment,
|
|
4956
|
+
.muka-segmentgroup--md .muka-segmentgroup__pill {
|
|
4957
|
+
border-radius: var(--border-radius-xl, 16px);
|
|
4958
|
+
}
|
|
4959
|
+
.muka-segmentgroup--md .muka-segmentgroup__segment {
|
|
4960
|
+
padding: var(--segmentgroup-segment-padding-md-y) var(--segmentgroup-segment-padding-md-x);
|
|
4961
|
+
font-size: var(--text-label-md-fontSize);
|
|
4962
|
+
line-height: var(--text-label-md-lineHeight);
|
|
4963
|
+
}
|
|
4935
4964
|
|
|
4936
|
-
.muka-
|
|
4937
|
-
|
|
4938
|
-
|
|
4939
|
-
|
|
4965
|
+
.muka-segmentgroup--lg {
|
|
4966
|
+
border-radius: var(--border-radius-full, 9999px);
|
|
4967
|
+
}
|
|
4968
|
+
.muka-segmentgroup--lg .muka-segmentgroup__segment,
|
|
4969
|
+
.muka-segmentgroup--lg .muka-segmentgroup__pill {
|
|
4970
|
+
border-radius: var(--border-radius-full, 9999px);
|
|
4971
|
+
}
|
|
4972
|
+
.muka-segmentgroup--lg .muka-segmentgroup__segment {
|
|
4973
|
+
padding: var(--segmentgroup-segment-padding-lg-y) var(--segmentgroup-segment-padding-lg-x);
|
|
4974
|
+
height: 40px;
|
|
4975
|
+
font-size: var(--text-label-lg-fontSize);
|
|
4976
|
+
line-height: var(--text-label-lg-lineHeight);
|
|
4977
|
+
}
|
|
4978
|
+
|
|
4979
|
+
/* Icon-only variants */
|
|
4980
|
+
.muka-segmentgroup--icon-only {
|
|
4981
|
+
gap: var(--spacing-1, 4px);
|
|
4982
|
+
}
|
|
4983
|
+
|
|
4984
|
+
.muka-segmentgroup--icon-only.muka-segmentgroup--sm .muka-segmentgroup__segment {
|
|
4985
|
+
width: 24px;
|
|
4986
|
+
height: 24px;
|
|
4940
4987
|
padding: 0;
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
border: 0;
|
|
4988
|
+
}
|
|
4989
|
+
.muka-segmentgroup--icon-only.muka-segmentgroup--sm .muka-segmentgroup__icon svg {
|
|
4990
|
+
width: 16px;
|
|
4991
|
+
height: 16px;
|
|
4946
4992
|
}
|
|
4947
4993
|
|
|
4994
|
+
.muka-segmentgroup--icon-only.muka-segmentgroup--md .muka-segmentgroup__segment {
|
|
4995
|
+
width: 32px;
|
|
4996
|
+
height: 32px;
|
|
4997
|
+
padding: 0;
|
|
4998
|
+
}
|
|
4999
|
+
.muka-segmentgroup--icon-only.muka-segmentgroup--md .muka-segmentgroup__icon svg {
|
|
5000
|
+
width: 20px;
|
|
5001
|
+
height: 20px;
|
|
5002
|
+
}
|
|
4948
5003
|
|
|
4949
|
-
|
|
4950
|
-
|
|
5004
|
+
.muka-segmentgroup--icon-only.muka-segmentgroup--lg .muka-segmentgroup__segment {
|
|
5005
|
+
width: 40px;
|
|
5006
|
+
height: 40px;
|
|
5007
|
+
padding: 0;
|
|
5008
|
+
}
|
|
5009
|
+
.muka-segmentgroup--icon-only.muka-segmentgroup--lg .muka-segmentgroup__icon svg {
|
|
5010
|
+
width: 24px;
|
|
5011
|
+
height: 24px;
|
|
5012
|
+
}
|
|
4951
5013
|
|
|
4952
|
-
|
|
5014
|
+
/* Icon */
|
|
5015
|
+
.muka-segmentgroup__icon {
|
|
4953
5016
|
display: inline-flex;
|
|
4954
|
-
|
|
4955
|
-
|
|
5017
|
+
align-items: center;
|
|
5018
|
+
justify-content: center;
|
|
4956
5019
|
}
|
|
4957
5020
|
|
|
4958
|
-
|
|
4959
|
-
|
|
5021
|
+
/* Selected state */
|
|
5022
|
+
.muka-segmentgroup__segment--selected {
|
|
5023
|
+
background-color: transparent;
|
|
5024
|
+
box-shadow: none;
|
|
5025
|
+
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
5026
|
+
z-index: 2; /* Highlight pill when focused is tested below */
|
|
5027
|
+
}
|
|
5028
|
+
|
|
5029
|
+
/* Hover state (only for unselected) */
|
|
5030
|
+
.muka-segmentgroup__segment:not(.muka-segmentgroup__segment--selected):not(:disabled):hover {
|
|
5031
|
+
color: var(--segmentgroup-segment-color-hover-foreground);
|
|
5032
|
+
}
|
|
5033
|
+
|
|
5034
|
+
/* Focus visible */
|
|
5035
|
+
.muka-segmentgroup__segment:focus-visible {
|
|
5036
|
+
outline: 2px solid var(--color-border-focus);
|
|
5037
|
+
outline-offset: 2px;
|
|
5038
|
+
z-index: 2;
|
|
5039
|
+
}
|
|
5040
|
+
|
|
5041
|
+
/* Disabled state */
|
|
5042
|
+
.muka-segmentgroup__segment--disabled,
|
|
5043
|
+
.muka-segmentgroup__segment:disabled {
|
|
5044
|
+
cursor: not-allowed;
|
|
5045
|
+
opacity: 0.5;
|
|
4960
5046
|
}
|
|
4961
5047
|
|
|
4962
5048
|
/* Label */
|
|
4963
|
-
.muka-
|
|
4964
|
-
|
|
4965
|
-
|
|
5049
|
+
.muka-segmentgroup__label {
|
|
5050
|
+
display: inline-flex;
|
|
5051
|
+
align-items: center;
|
|
5052
|
+
white-space: nowrap;
|
|
5053
|
+
user-select: none;
|
|
4966
5054
|
}
|
|
4967
5055
|
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
|
|
4972
|
-
|
|
5056
|
+
|
|
5057
|
+
/* Section */
|
|
5058
|
+
/* Section Component - Layout tokens (section.padding) */
|
|
5059
|
+
|
|
5060
|
+
.muka-section {
|
|
5061
|
+
box-sizing: border-box;
|
|
4973
5062
|
}
|
|
4974
5063
|
|
|
4975
|
-
.muka-
|
|
4976
|
-
|
|
4977
|
-
|
|
4978
|
-
font-size: var(--text-label-md-semibold-fontSize);
|
|
4979
|
-
line-height: var(--text-label-md-semibold-lineHeight);
|
|
5064
|
+
.muka-section--padding-compact {
|
|
5065
|
+
padding-block: var(--section-padding-vertical-compact);
|
|
5066
|
+
padding-inline: var(--section-padding-horizontal-compact);
|
|
4980
5067
|
}
|
|
4981
5068
|
|
|
4982
|
-
.muka-
|
|
4983
|
-
|
|
4984
|
-
|
|
4985
|
-
font-size: var(--text-label-lg-semibold-fontSize);
|
|
4986
|
-
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
5069
|
+
.muka-section--padding-default {
|
|
5070
|
+
padding-block: var(--section-padding-vertical-default);
|
|
5071
|
+
padding-inline: var(--section-padding-horizontal-default);
|
|
4987
5072
|
}
|
|
4988
5073
|
|
|
4989
|
-
.muka-
|
|
4990
|
-
|
|
5074
|
+
.muka-section--padding-spacious {
|
|
5075
|
+
padding-block: var(--section-padding-vertical-spacious);
|
|
5076
|
+
padding-inline: var(--section-padding-horizontal-spacious);
|
|
4991
5077
|
}
|
|
4992
5078
|
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
|
|
5079
|
+
|
|
5080
|
+
/* SearchInput */
|
|
5081
|
+
/* SearchInput Component Styles */
|
|
5082
|
+
|
|
5083
|
+
.muka-search-input {
|
|
5084
|
+
display: flex;
|
|
5085
|
+
align-items: center;
|
|
5086
|
+
gap: var(--spacing-3);
|
|
5087
|
+
width: 100%;
|
|
4997
5088
|
}
|
|
4998
5089
|
|
|
4999
|
-
/* Field
|
|
5000
|
-
|
|
5090
|
+
/* ─── Field wrapper ───────────────────────────────────── */
|
|
5091
|
+
|
|
5092
|
+
.muka-search-input__field {
|
|
5093
|
+
flex: 1 1 auto;
|
|
5001
5094
|
display: flex;
|
|
5002
5095
|
align-items: center;
|
|
5003
5096
|
gap: var(--spacing-2);
|
|
5004
|
-
position: relative;
|
|
5005
5097
|
background-color: var(--input-field-color-default-background);
|
|
5006
5098
|
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
5007
5099
|
border-radius: var(--input-field-radius-md);
|
|
5008
|
-
padding:
|
|
5009
|
-
transition: border-color 0.
|
|
5010
|
-
cursor: pointer;
|
|
5011
|
-
box-sizing: border-box;
|
|
5100
|
+
padding: 0 var(--input-field-padding-x);
|
|
5101
|
+
transition: border-color 0.12s ease, background-color 0.12s ease;
|
|
5012
5102
|
}
|
|
5013
5103
|
|
|
5014
|
-
|
|
5015
|
-
|
|
5016
|
-
content: '';
|
|
5017
|
-
position: absolute;
|
|
5018
|
-
inset: 0;
|
|
5019
|
-
border-radius: inherit;
|
|
5020
|
-
box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
|
|
5021
|
-
pointer-events: none;
|
|
5104
|
+
.muka-search-input--focused .muka-search-input__field {
|
|
5105
|
+
border-color: var(--input-field-color-focus-border, var(--color-action-default));
|
|
5022
5106
|
}
|
|
5023
5107
|
|
|
5024
|
-
/*
|
|
5025
|
-
|
|
5108
|
+
/* ─── Sizes ───────────────────────────────────────────── */
|
|
5109
|
+
|
|
5110
|
+
.muka-search-input--sm .muka-search-input__field {
|
|
5026
5111
|
min-height: var(--input-field-height-sm);
|
|
5027
5112
|
border-radius: var(--input-field-radius-sm);
|
|
5028
5113
|
}
|
|
5029
5114
|
|
|
5030
|
-
.muka-
|
|
5115
|
+
.muka-search-input--md .muka-search-input__field {
|
|
5031
5116
|
min-height: var(--input-field-height-default);
|
|
5032
|
-
border-radius: var(--input-field-radius-md);
|
|
5033
5117
|
}
|
|
5034
5118
|
|
|
5035
|
-
.muka-
|
|
5119
|
+
.muka-search-input--lg .muka-search-input__field {
|
|
5036
5120
|
min-height: var(--input-field-height-lg);
|
|
5037
5121
|
border-radius: var(--input-field-radius-lg);
|
|
5038
5122
|
}
|
|
5039
5123
|
|
|
5040
|
-
/*
|
|
5124
|
+
/* ─── Embedded variant (e.g. inside TopBar) ───────────── */
|
|
5041
5125
|
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
border-
|
|
5045
|
-
border-color: var(--input-field-color-focus-border);
|
|
5046
|
-
background-color: var(--input-field-color-focus-background);
|
|
5047
|
-
padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
|
|
5126
|
+
.muka-search-input--embedded .muka-search-input__field {
|
|
5127
|
+
background-color: var(--color-surface-level1);
|
|
5128
|
+
border-color: transparent;
|
|
5048
5129
|
}
|
|
5049
5130
|
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
5053
|
-
border-color: var(--input-field-color-error-border);
|
|
5054
|
-
background-color: var(--input-field-color-error-background);
|
|
5055
|
-
padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
|
|
5131
|
+
.muka-search-input--embedded.muka-search-input--focused .muka-search-input__field {
|
|
5132
|
+
border-color: transparent;
|
|
5133
|
+
background-color: var(--color-surface-level2);
|
|
5056
5134
|
}
|
|
5057
5135
|
|
|
5058
|
-
/* Disabled
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
|
|
5062
|
-
|
|
5136
|
+
/* ─── Disabled ────────────────────────────────────────── */
|
|
5137
|
+
|
|
5138
|
+
.muka-search-input--disabled .muka-search-input__field {
|
|
5139
|
+
opacity: 0.5;
|
|
5140
|
+
pointer-events: none;
|
|
5063
5141
|
}
|
|
5064
5142
|
|
|
5065
|
-
|
|
5066
|
-
|
|
5143
|
+
/* ─── Leading icon ────────────────────────────────────── */
|
|
5144
|
+
|
|
5145
|
+
.muka-search-input__leading {
|
|
5146
|
+
display: inline-flex;
|
|
5147
|
+
align-items: center;
|
|
5148
|
+
justify-content: center;
|
|
5149
|
+
flex-shrink: 0;
|
|
5150
|
+
color: var(--color-text-subtle-default);
|
|
5067
5151
|
}
|
|
5068
5152
|
|
|
5069
|
-
/*
|
|
5070
|
-
|
|
5071
|
-
|
|
5072
|
-
|
|
5073
|
-
|
|
5153
|
+
/* ─── Input element ───────────────────────────────────── */
|
|
5154
|
+
|
|
5155
|
+
.muka-search-input__input {
|
|
5156
|
+
flex: 1 1 auto;
|
|
5157
|
+
min-width: 0;
|
|
5074
5158
|
border: none;
|
|
5075
|
-
outline: none;
|
|
5076
5159
|
background: transparent;
|
|
5077
|
-
|
|
5078
|
-
font-family: var(--text-input-md-fontFamily);
|
|
5079
|
-
font-weight: var(--text-input-md-fontWeight);
|
|
5080
|
-
font-size: var(--text-input-md-fontSize);
|
|
5081
|
-
line-height: var(--text-input-md-lineHeight);
|
|
5160
|
+
outline: none;
|
|
5082
5161
|
padding: 0;
|
|
5083
|
-
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
|
|
5162
|
+
color: var(--color-text-default-default);
|
|
5163
|
+
font-family: var(--text-body-md-regular-fontFamily);
|
|
5164
|
+
font-weight: var(--text-body-md-regular-fontWeight);
|
|
5165
|
+
font-size: var(--text-body-md-regular-fontSize);
|
|
5166
|
+
line-height: var(--text-body-md-regular-lineHeight);
|
|
5167
|
+
appearance: none;
|
|
5168
|
+
-webkit-appearance: none;
|
|
5087
5169
|
}
|
|
5088
5170
|
|
|
5089
|
-
.muka-
|
|
5090
|
-
|
|
5091
|
-
font-weight: var(--text-input-sm-fontWeight);
|
|
5092
|
-
font-size: var(--text-input-sm-fontSize);
|
|
5093
|
-
line-height: var(--text-input-sm-lineHeight);
|
|
5171
|
+
.muka-search-input__input::placeholder {
|
|
5172
|
+
color: var(--color-text-subtle-default);
|
|
5094
5173
|
}
|
|
5095
5174
|
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
|
|
5099
|
-
|
|
5100
|
-
|
|
5175
|
+
/* Hide the browser-supplied clear button (WebKit + Edge) */
|
|
5176
|
+
.muka-search-input__input::-webkit-search-cancel-button,
|
|
5177
|
+
.muka-search-input__input::-webkit-search-decoration {
|
|
5178
|
+
-webkit-appearance: none;
|
|
5179
|
+
appearance: none;
|
|
5101
5180
|
}
|
|
5102
5181
|
|
|
5103
|
-
.muka-
|
|
5104
|
-
|
|
5105
|
-
cursor: not-allowed;
|
|
5182
|
+
.muka-search-input__input::-ms-clear {
|
|
5183
|
+
display: none;
|
|
5106
5184
|
}
|
|
5107
5185
|
|
|
5108
|
-
/*
|
|
5109
|
-
|
|
5186
|
+
/* ─── Trailing slot (loading spinner) ─────────────────── */
|
|
5187
|
+
|
|
5188
|
+
.muka-search-input__trailing {
|
|
5110
5189
|
display: inline-flex;
|
|
5111
5190
|
align-items: center;
|
|
5112
|
-
|
|
5113
|
-
|
|
5114
|
-
pointer-events: none;
|
|
5115
|
-
color: var(--color-text-subtle-default);
|
|
5191
|
+
justify-content: center;
|
|
5192
|
+
flex-shrink: 0;
|
|
5116
5193
|
}
|
|
5117
5194
|
|
|
5118
|
-
|
|
5119
|
-
color: var(--input-field-color-disabled-foreground);
|
|
5120
|
-
}
|
|
5195
|
+
/* ─── Clear button ────────────────────────────────────── */
|
|
5121
5196
|
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5127
|
-
|
|
5197
|
+
.muka-search-input__clear {
|
|
5198
|
+
display: inline-flex;
|
|
5199
|
+
align-items: center;
|
|
5200
|
+
justify-content: center;
|
|
5201
|
+
width: 20px;
|
|
5202
|
+
height: 20px;
|
|
5203
|
+
border: none;
|
|
5204
|
+
background: none;
|
|
5205
|
+
padding: 0;
|
|
5206
|
+
cursor: pointer;
|
|
5128
5207
|
color: var(--color-text-subtle-default);
|
|
5129
|
-
|
|
5208
|
+
flex-shrink: 0;
|
|
5209
|
+
-webkit-tap-highlight-color: transparent;
|
|
5130
5210
|
}
|
|
5131
5211
|
|
|
5132
|
-
|
|
5133
|
-
|
|
5134
|
-
font-family: var(--text-label-sm-regular-fontFamily);
|
|
5135
|
-
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
5136
|
-
font-size: var(--text-label-sm-regular-fontSize);
|
|
5137
|
-
line-height: var(--text-label-sm-regular-lineHeight);
|
|
5138
|
-
color: var(--color-state-error-foreground);
|
|
5139
|
-
margin: 0;
|
|
5212
|
+
.muka-search-input__clear:hover {
|
|
5213
|
+
color: var(--color-text-default-default);
|
|
5140
5214
|
}
|
|
5141
5215
|
|
|
5216
|
+
.muka-search-input__clear:focus-visible {
|
|
5217
|
+
outline: 2px solid var(--color-action-default);
|
|
5218
|
+
outline-offset: 2px;
|
|
5219
|
+
border-radius: 50%;
|
|
5220
|
+
}
|
|
5142
5221
|
|
|
5143
|
-
/*
|
|
5144
|
-
/* SegmentGroup Component Styles - Using Muka Design Tokens */
|
|
5222
|
+
/* ─── Cancel button ───────────────────────────────────── */
|
|
5145
5223
|
|
|
5146
|
-
|
|
5147
|
-
|
|
5148
|
-
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5152
|
-
|
|
5153
|
-
|
|
5154
|
-
|
|
5155
|
-
|
|
5224
|
+
.muka-search-input__cancel {
|
|
5225
|
+
flex-shrink: 0;
|
|
5226
|
+
background: none;
|
|
5227
|
+
border: none;
|
|
5228
|
+
padding: var(--spacing-1) var(--spacing-2);
|
|
5229
|
+
cursor: pointer;
|
|
5230
|
+
color: var(--color-action-default);
|
|
5231
|
+
font-family: var(--text-label-md-regular-fontFamily);
|
|
5232
|
+
font-weight: var(--text-label-md-regular-fontWeight);
|
|
5233
|
+
font-size: var(--text-label-md-regular-fontSize);
|
|
5234
|
+
line-height: var(--text-label-md-regular-lineHeight);
|
|
5235
|
+
-webkit-tap-highlight-color: transparent;
|
|
5156
5236
|
}
|
|
5157
5237
|
|
|
5158
|
-
|
|
5159
|
-
|
|
5160
|
-
content: '';
|
|
5161
|
-
position: absolute;
|
|
5162
|
-
inset: 0;
|
|
5163
|
-
border-radius: inherit;
|
|
5164
|
-
box-shadow: var(--segmentgroup-container-shadow);
|
|
5165
|
-
pointer-events: none;
|
|
5238
|
+
.muka-search-input__cancel:hover {
|
|
5239
|
+
color: var(--color-action-hover);
|
|
5166
5240
|
}
|
|
5167
5241
|
|
|
5168
|
-
|
|
5169
|
-
|
|
5170
|
-
|
|
5242
|
+
.muka-search-input__cancel:focus-visible {
|
|
5243
|
+
outline: 2px solid var(--color-action-default);
|
|
5244
|
+
outline-offset: 2px;
|
|
5245
|
+
border-radius: var(--radius-sm);
|
|
5171
5246
|
}
|
|
5172
5247
|
|
|
5173
|
-
|
|
5174
|
-
|
|
5248
|
+
|
|
5249
|
+
/* RangeSlider */
|
|
5250
|
+
/* RangeSlider Component Styles - Using Muka Design Tokens */
|
|
5251
|
+
|
|
5252
|
+
.muka-range-slider {
|
|
5253
|
+
display: flex;
|
|
5254
|
+
flex-direction: column;
|
|
5255
|
+
gap: var(--spacing-1);
|
|
5256
|
+
width: 100%;
|
|
5175
5257
|
}
|
|
5176
5258
|
|
|
5177
|
-
/*
|
|
5178
|
-
|
|
5179
|
-
|
|
5180
|
-
|
|
5181
|
-
|
|
5182
|
-
|
|
5183
|
-
|
|
5184
|
-
|
|
5185
|
-
|
|
5186
|
-
|
|
5187
|
-
z-index: 0;
|
|
5188
|
-
pointer-events: none;
|
|
5259
|
+
/* ========================================
|
|
5260
|
+
HEADER: label group (label + info + optional) and value readout
|
|
5261
|
+
======================================== */
|
|
5262
|
+
|
|
5263
|
+
.muka-range-slider__header {
|
|
5264
|
+
display: flex;
|
|
5265
|
+
align-items: center;
|
|
5266
|
+
justify-content: space-between;
|
|
5267
|
+
gap: var(--spacing-2);
|
|
5268
|
+
min-height: 24px;
|
|
5189
5269
|
}
|
|
5190
5270
|
|
|
5191
|
-
|
|
5192
|
-
.muka-segmentgroup__segment {
|
|
5271
|
+
.muka-range-slider__label-group {
|
|
5193
5272
|
display: inline-flex;
|
|
5194
5273
|
align-items: center;
|
|
5195
|
-
|
|
5196
|
-
gap: var(--segmentgroup-segment-gap);
|
|
5197
|
-
border: none;
|
|
5198
|
-
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
5199
|
-
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
5200
|
-
border-radius: var(--segmentgroup-segment-radius);
|
|
5201
|
-
cursor: pointer;
|
|
5202
|
-
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
5203
|
-
position: relative;
|
|
5204
|
-
outline: none;
|
|
5205
|
-
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
5206
|
-
font-family: var(--alias-font-plain-family);
|
|
5207
|
-
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
5208
|
-
z-index: 1; /* Keep above pill */
|
|
5274
|
+
gap: var(--spacing-2);
|
|
5209
5275
|
}
|
|
5210
5276
|
|
|
5211
|
-
|
|
5212
|
-
|
|
5213
|
-
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
|
|
5217
|
-
border-radius: var(--border-radius-xl, 16px);
|
|
5218
|
-
}
|
|
5219
|
-
.muka-segmentgroup--sm .muka-segmentgroup__segment {
|
|
5220
|
-
padding: var(--segmentgroup-segment-padding-sm-y) var(--segmentgroup-segment-padding-sm-x);
|
|
5221
|
-
height: var(--segmentgroup-segment-height-sm);
|
|
5222
|
-
font-size: var(--text-label-sm-fontSize);
|
|
5223
|
-
line-height: var(--text-label-sm-lineHeight);
|
|
5277
|
+
.muka-range-slider__label {
|
|
5278
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
5279
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
5280
|
+
font-size: var(--text-label-md-semibold-fontSize);
|
|
5281
|
+
line-height: var(--text-label-md-semibold-lineHeight);
|
|
5282
|
+
color: var(--color-text-default-default);
|
|
5224
5283
|
}
|
|
5225
5284
|
|
|
5226
|
-
.muka-
|
|
5227
|
-
|
|
5285
|
+
.muka-range-slider__info {
|
|
5286
|
+
color: var(--color-text-subtle-default);
|
|
5228
5287
|
}
|
|
5229
|
-
|
|
5230
|
-
.muka-
|
|
5231
|
-
|
|
5288
|
+
|
|
5289
|
+
.muka-range-slider__optional {
|
|
5290
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
5291
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
5292
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
5293
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
5294
|
+
color: var(--color-text-subtle-default);
|
|
5232
5295
|
}
|
|
5233
|
-
|
|
5234
|
-
|
|
5235
|
-
font-
|
|
5236
|
-
|
|
5296
|
+
|
|
5297
|
+
.muka-range-slider__value {
|
|
5298
|
+
font-family: var(--text-label-md-regular-fontFamily);
|
|
5299
|
+
font-weight: var(--text-label-md-regular-fontWeight);
|
|
5300
|
+
font-size: var(--text-label-md-regular-fontSize);
|
|
5301
|
+
line-height: var(--text-label-md-regular-lineHeight);
|
|
5302
|
+
color: var(--color-text-default-default);
|
|
5303
|
+
font-variant-numeric: tabular-nums;
|
|
5237
5304
|
}
|
|
5238
5305
|
|
|
5239
|
-
.muka-
|
|
5240
|
-
|
|
5241
|
-
|
|
5242
|
-
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
.muka-segmentgroup--lg .muka-segmentgroup__segment {
|
|
5247
|
-
padding: var(--segmentgroup-segment-padding-lg-y) var(--segmentgroup-segment-padding-lg-x);
|
|
5248
|
-
height: 40px;
|
|
5249
|
-
font-size: var(--text-label-lg-fontSize);
|
|
5250
|
-
line-height: var(--text-label-lg-lineHeight);
|
|
5251
|
-
}
|
|
5252
|
-
|
|
5253
|
-
/* Icon-only variants */
|
|
5254
|
-
.muka-segmentgroup--icon-only {
|
|
5255
|
-
gap: var(--spacing-1, 4px);
|
|
5256
|
-
}
|
|
5257
|
-
|
|
5258
|
-
.muka-segmentgroup--icon-only.muka-segmentgroup--sm .muka-segmentgroup__segment {
|
|
5259
|
-
width: 24px;
|
|
5260
|
-
height: 24px;
|
|
5261
|
-
padding: 0;
|
|
5262
|
-
}
|
|
5263
|
-
.muka-segmentgroup--icon-only.muka-segmentgroup--sm .muka-segmentgroup__icon svg {
|
|
5264
|
-
width: 16px;
|
|
5265
|
-
height: 16px;
|
|
5266
|
-
}
|
|
5267
|
-
|
|
5268
|
-
.muka-segmentgroup--icon-only.muka-segmentgroup--md .muka-segmentgroup__segment {
|
|
5269
|
-
width: 32px;
|
|
5270
|
-
height: 32px;
|
|
5271
|
-
padding: 0;
|
|
5272
|
-
}
|
|
5273
|
-
.muka-segmentgroup--icon-only.muka-segmentgroup--md .muka-segmentgroup__icon svg {
|
|
5274
|
-
width: 20px;
|
|
5275
|
-
height: 20px;
|
|
5276
|
-
}
|
|
5277
|
-
|
|
5278
|
-
.muka-segmentgroup--icon-only.muka-segmentgroup--lg .muka-segmentgroup__segment {
|
|
5279
|
-
width: 40px;
|
|
5280
|
-
height: 40px;
|
|
5281
|
-
padding: 0;
|
|
5282
|
-
}
|
|
5283
|
-
.muka-segmentgroup--icon-only.muka-segmentgroup--lg .muka-segmentgroup__icon svg {
|
|
5284
|
-
width: 24px;
|
|
5285
|
-
height: 24px;
|
|
5286
|
-
}
|
|
5287
|
-
|
|
5288
|
-
/* Icon */
|
|
5289
|
-
.muka-segmentgroup__icon {
|
|
5290
|
-
display: inline-flex;
|
|
5291
|
-
align-items: center;
|
|
5292
|
-
justify-content: center;
|
|
5293
|
-
}
|
|
5294
|
-
|
|
5295
|
-
/* Selected state */
|
|
5296
|
-
.muka-segmentgroup__segment--selected {
|
|
5297
|
-
background-color: transparent;
|
|
5298
|
-
box-shadow: none;
|
|
5299
|
-
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
5300
|
-
z-index: 2; /* Highlight pill when focused is tested below */
|
|
5301
|
-
}
|
|
5302
|
-
|
|
5303
|
-
/* Hover state (only for unselected) */
|
|
5304
|
-
.muka-segmentgroup__segment:not(.muka-segmentgroup__segment--selected):not(:disabled):hover {
|
|
5305
|
-
color: var(--segmentgroup-segment-color-hover-foreground);
|
|
5306
|
-
}
|
|
5307
|
-
|
|
5308
|
-
/* Focus visible */
|
|
5309
|
-
.muka-segmentgroup__segment:focus-visible {
|
|
5310
|
-
outline: 2px solid var(--color-border-focus);
|
|
5311
|
-
outline-offset: 2px;
|
|
5312
|
-
z-index: 2;
|
|
5313
|
-
}
|
|
5314
|
-
|
|
5315
|
-
/* Disabled state */
|
|
5316
|
-
.muka-segmentgroup__segment--disabled,
|
|
5317
|
-
.muka-segmentgroup__segment:disabled {
|
|
5318
|
-
cursor: not-allowed;
|
|
5319
|
-
opacity: 0.5;
|
|
5320
|
-
}
|
|
5321
|
-
|
|
5322
|
-
/* Label */
|
|
5323
|
-
.muka-segmentgroup__label {
|
|
5324
|
-
display: inline-flex;
|
|
5325
|
-
align-items: center;
|
|
5326
|
-
white-space: nowrap;
|
|
5327
|
-
user-select: none;
|
|
5328
|
-
}
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
/* Section */
|
|
5332
|
-
/* Section Component - Layout tokens (section.padding) */
|
|
5333
|
-
|
|
5334
|
-
.muka-section {
|
|
5335
|
-
box-sizing: border-box;
|
|
5336
|
-
}
|
|
5337
|
-
|
|
5338
|
-
.muka-section--padding-compact {
|
|
5339
|
-
padding-block: var(--section-padding-vertical-compact);
|
|
5340
|
-
padding-inline: var(--section-padding-horizontal-compact);
|
|
5341
|
-
}
|
|
5342
|
-
|
|
5343
|
-
.muka-section--padding-default {
|
|
5344
|
-
padding-block: var(--section-padding-vertical-default);
|
|
5345
|
-
padding-inline: var(--section-padding-horizontal-default);
|
|
5346
|
-
}
|
|
5347
|
-
|
|
5348
|
-
.muka-section--padding-spacious {
|
|
5349
|
-
padding-block: var(--section-padding-vertical-spacious);
|
|
5350
|
-
padding-inline: var(--section-padding-horizontal-spacious);
|
|
5351
|
-
}
|
|
5352
|
-
|
|
5353
|
-
|
|
5354
|
-
/* SearchInput */
|
|
5355
|
-
/* SearchInput Component Styles */
|
|
5356
|
-
|
|
5357
|
-
.muka-search-input {
|
|
5358
|
-
display: flex;
|
|
5359
|
-
align-items: center;
|
|
5360
|
-
gap: var(--spacing-3);
|
|
5361
|
-
width: 100%;
|
|
5362
|
-
}
|
|
5363
|
-
|
|
5364
|
-
/* ─── Field wrapper ───────────────────────────────────── */
|
|
5365
|
-
|
|
5366
|
-
.muka-search-input__field {
|
|
5367
|
-
flex: 1 1 auto;
|
|
5368
|
-
display: flex;
|
|
5369
|
-
align-items: center;
|
|
5370
|
-
gap: var(--spacing-2);
|
|
5371
|
-
background-color: var(--input-field-color-default-background);
|
|
5372
|
-
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
5373
|
-
border-radius: var(--input-field-radius-md);
|
|
5374
|
-
padding: 0 var(--input-field-padding-x);
|
|
5375
|
-
transition: border-color 0.12s ease, background-color 0.12s ease;
|
|
5376
|
-
}
|
|
5377
|
-
|
|
5378
|
-
.muka-search-input--focused .muka-search-input__field {
|
|
5379
|
-
border-color: var(--input-field-color-focus-border, var(--color-action-default));
|
|
5380
|
-
}
|
|
5381
|
-
|
|
5382
|
-
/* ─── Sizes ───────────────────────────────────────────── */
|
|
5383
|
-
|
|
5384
|
-
.muka-search-input--sm .muka-search-input__field {
|
|
5385
|
-
min-height: var(--input-field-height-sm);
|
|
5386
|
-
border-radius: var(--input-field-radius-sm);
|
|
5387
|
-
}
|
|
5388
|
-
|
|
5389
|
-
.muka-search-input--md .muka-search-input__field {
|
|
5390
|
-
min-height: var(--input-field-height-default);
|
|
5391
|
-
}
|
|
5392
|
-
|
|
5393
|
-
.muka-search-input--lg .muka-search-input__field {
|
|
5394
|
-
min-height: var(--input-field-height-lg);
|
|
5395
|
-
border-radius: var(--input-field-radius-lg);
|
|
5396
|
-
}
|
|
5397
|
-
|
|
5398
|
-
/* ─── Embedded variant (e.g. inside TopBar) ───────────── */
|
|
5399
|
-
|
|
5400
|
-
.muka-search-input--embedded .muka-search-input__field {
|
|
5401
|
-
background-color: var(--color-surface-level1);
|
|
5402
|
-
border-color: transparent;
|
|
5403
|
-
}
|
|
5404
|
-
|
|
5405
|
-
.muka-search-input--embedded.muka-search-input--focused .muka-search-input__field {
|
|
5406
|
-
border-color: transparent;
|
|
5407
|
-
background-color: var(--color-surface-level2);
|
|
5408
|
-
}
|
|
5409
|
-
|
|
5410
|
-
/* ─── Disabled ────────────────────────────────────────── */
|
|
5411
|
-
|
|
5412
|
-
.muka-search-input--disabled .muka-search-input__field {
|
|
5413
|
-
opacity: 0.5;
|
|
5414
|
-
pointer-events: none;
|
|
5415
|
-
}
|
|
5416
|
-
|
|
5417
|
-
/* ─── Leading icon ────────────────────────────────────── */
|
|
5418
|
-
|
|
5419
|
-
.muka-search-input__leading {
|
|
5420
|
-
display: inline-flex;
|
|
5421
|
-
align-items: center;
|
|
5422
|
-
justify-content: center;
|
|
5423
|
-
flex-shrink: 0;
|
|
5424
|
-
color: var(--color-text-subtle-default);
|
|
5425
|
-
}
|
|
5426
|
-
|
|
5427
|
-
/* ─── Input element ───────────────────────────────────── */
|
|
5428
|
-
|
|
5429
|
-
.muka-search-input__input {
|
|
5430
|
-
flex: 1 1 auto;
|
|
5431
|
-
min-width: 0;
|
|
5432
|
-
border: none;
|
|
5433
|
-
background: transparent;
|
|
5434
|
-
outline: none;
|
|
5435
|
-
padding: 0;
|
|
5436
|
-
color: var(--color-text-default-default);
|
|
5437
|
-
font-family: var(--text-body-md-regular-fontFamily);
|
|
5438
|
-
font-weight: var(--text-body-md-regular-fontWeight);
|
|
5439
|
-
font-size: var(--text-body-md-regular-fontSize);
|
|
5440
|
-
line-height: var(--text-body-md-regular-lineHeight);
|
|
5441
|
-
appearance: none;
|
|
5442
|
-
-webkit-appearance: none;
|
|
5443
|
-
}
|
|
5444
|
-
|
|
5445
|
-
.muka-search-input__input::placeholder {
|
|
5446
|
-
color: var(--color-text-subtle-default);
|
|
5447
|
-
}
|
|
5448
|
-
|
|
5449
|
-
/* Hide the browser-supplied clear button (WebKit + Edge) */
|
|
5450
|
-
.muka-search-input__input::-webkit-search-cancel-button,
|
|
5451
|
-
.muka-search-input__input::-webkit-search-decoration {
|
|
5452
|
-
-webkit-appearance: none;
|
|
5453
|
-
appearance: none;
|
|
5454
|
-
}
|
|
5455
|
-
|
|
5456
|
-
.muka-search-input__input::-ms-clear {
|
|
5457
|
-
display: none;
|
|
5458
|
-
}
|
|
5459
|
-
|
|
5460
|
-
/* ─── Trailing slot (loading spinner) ─────────────────── */
|
|
5461
|
-
|
|
5462
|
-
.muka-search-input__trailing {
|
|
5463
|
-
display: inline-flex;
|
|
5464
|
-
align-items: center;
|
|
5465
|
-
justify-content: center;
|
|
5466
|
-
flex-shrink: 0;
|
|
5467
|
-
}
|
|
5468
|
-
|
|
5469
|
-
/* ─── Clear button ────────────────────────────────────── */
|
|
5470
|
-
|
|
5471
|
-
.muka-search-input__clear {
|
|
5472
|
-
display: inline-flex;
|
|
5473
|
-
align-items: center;
|
|
5474
|
-
justify-content: center;
|
|
5475
|
-
width: 20px;
|
|
5476
|
-
height: 20px;
|
|
5477
|
-
border: none;
|
|
5478
|
-
background: none;
|
|
5479
|
-
padding: 0;
|
|
5480
|
-
cursor: pointer;
|
|
5481
|
-
color: var(--color-text-subtle-default);
|
|
5482
|
-
flex-shrink: 0;
|
|
5483
|
-
-webkit-tap-highlight-color: transparent;
|
|
5484
|
-
}
|
|
5485
|
-
|
|
5486
|
-
.muka-search-input__clear:hover {
|
|
5487
|
-
color: var(--color-text-default-default);
|
|
5488
|
-
}
|
|
5489
|
-
|
|
5490
|
-
.muka-search-input__clear:focus-visible {
|
|
5491
|
-
outline: 2px solid var(--color-action-default);
|
|
5492
|
-
outline-offset: 2px;
|
|
5493
|
-
border-radius: 50%;
|
|
5494
|
-
}
|
|
5495
|
-
|
|
5496
|
-
/* ─── Cancel button ───────────────────────────────────── */
|
|
5497
|
-
|
|
5498
|
-
.muka-search-input__cancel {
|
|
5499
|
-
flex-shrink: 0;
|
|
5500
|
-
background: none;
|
|
5501
|
-
border: none;
|
|
5502
|
-
padding: var(--spacing-1) var(--spacing-2);
|
|
5503
|
-
cursor: pointer;
|
|
5504
|
-
color: var(--color-action-default);
|
|
5505
|
-
font-family: var(--text-label-md-regular-fontFamily);
|
|
5506
|
-
font-weight: var(--text-label-md-regular-fontWeight);
|
|
5507
|
-
font-size: var(--text-label-md-regular-fontSize);
|
|
5508
|
-
line-height: var(--text-label-md-regular-lineHeight);
|
|
5509
|
-
-webkit-tap-highlight-color: transparent;
|
|
5510
|
-
}
|
|
5511
|
-
|
|
5512
|
-
.muka-search-input__cancel:hover {
|
|
5513
|
-
color: var(--color-action-hover);
|
|
5514
|
-
}
|
|
5515
|
-
|
|
5516
|
-
.muka-search-input__cancel:focus-visible {
|
|
5517
|
-
outline: 2px solid var(--color-action-default);
|
|
5518
|
-
outline-offset: 2px;
|
|
5519
|
-
border-radius: var(--radius-sm);
|
|
5520
|
-
}
|
|
5521
|
-
|
|
5522
|
-
|
|
5523
|
-
/* RangeSlider */
|
|
5524
|
-
/* RangeSlider Component Styles - Using Muka Design Tokens */
|
|
5525
|
-
|
|
5526
|
-
.muka-range-slider {
|
|
5527
|
-
display: flex;
|
|
5528
|
-
flex-direction: column;
|
|
5529
|
-
gap: var(--spacing-1);
|
|
5530
|
-
width: 100%;
|
|
5531
|
-
}
|
|
5532
|
-
|
|
5533
|
-
/* ========================================
|
|
5534
|
-
HEADER: label group (label + info + optional) and value readout
|
|
5535
|
-
======================================== */
|
|
5536
|
-
|
|
5537
|
-
.muka-range-slider__header {
|
|
5538
|
-
display: flex;
|
|
5539
|
-
align-items: center;
|
|
5540
|
-
justify-content: space-between;
|
|
5541
|
-
gap: var(--spacing-2);
|
|
5542
|
-
min-height: 24px;
|
|
5543
|
-
}
|
|
5544
|
-
|
|
5545
|
-
.muka-range-slider__label-group {
|
|
5546
|
-
display: inline-flex;
|
|
5547
|
-
align-items: center;
|
|
5548
|
-
gap: var(--spacing-2);
|
|
5549
|
-
}
|
|
5550
|
-
|
|
5551
|
-
.muka-range-slider__label {
|
|
5552
|
-
font-family: var(--text-label-md-semibold-fontFamily);
|
|
5553
|
-
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
5554
|
-
font-size: var(--text-label-md-semibold-fontSize);
|
|
5555
|
-
line-height: var(--text-label-md-semibold-lineHeight);
|
|
5556
|
-
color: var(--color-text-default-default);
|
|
5557
|
-
}
|
|
5558
|
-
|
|
5559
|
-
.muka-range-slider__info {
|
|
5560
|
-
color: var(--color-text-subtle-default);
|
|
5561
|
-
}
|
|
5562
|
-
|
|
5563
|
-
.muka-range-slider__optional {
|
|
5564
|
-
font-family: var(--text-label-sm-regular-fontFamily);
|
|
5565
|
-
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
5566
|
-
font-size: var(--text-label-sm-regular-fontSize);
|
|
5567
|
-
line-height: var(--text-label-sm-regular-lineHeight);
|
|
5568
|
-
color: var(--color-text-subtle-default);
|
|
5569
|
-
}
|
|
5570
|
-
|
|
5571
|
-
.muka-range-slider__value {
|
|
5572
|
-
font-family: var(--text-label-md-regular-fontFamily);
|
|
5573
|
-
font-weight: var(--text-label-md-regular-fontWeight);
|
|
5574
|
-
font-size: var(--text-label-md-regular-fontSize);
|
|
5575
|
-
line-height: var(--text-label-md-regular-lineHeight);
|
|
5576
|
-
color: var(--color-text-default-default);
|
|
5577
|
-
font-variant-numeric: tabular-nums;
|
|
5578
|
-
}
|
|
5579
|
-
|
|
5580
|
-
.muka-range-slider__helper {
|
|
5581
|
-
margin: 0;
|
|
5582
|
-
font-family: var(--text-body-sm-regular-fontFamily);
|
|
5583
|
-
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
5584
|
-
font-size: var(--text-body-sm-regular-fontSize);
|
|
5585
|
-
line-height: var(--text-body-sm-regular-lineHeight);
|
|
5586
|
-
color: var(--color-text-subtle-default);
|
|
5306
|
+
.muka-range-slider__helper {
|
|
5307
|
+
margin: 0;
|
|
5308
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
5309
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
5310
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
5311
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
5312
|
+
color: var(--color-text-subtle-default);
|
|
5587
5313
|
}
|
|
5588
5314
|
|
|
5589
5315
|
/* ========================================
|
|
@@ -11099,11 +10825,6 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
11099
10825
|
grid-template-areas: 'rail bubble';
|
|
11100
10826
|
}
|
|
11101
10827
|
|
|
11102
|
-
.muka-chat-message--own.muka-chat-message--has-avatar .muka-chat-message__row {
|
|
11103
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
11104
|
-
grid-template-areas: 'bubble rail';
|
|
11105
|
-
}
|
|
11106
|
-
|
|
11107
10828
|
.muka-chat-message__rail {
|
|
11108
10829
|
grid-area: rail;
|
|
11109
10830
|
/* Sits on the bubble's baseline (Figma 5355:44091) */
|
|
@@ -11138,6 +10859,12 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
11138
10859
|
|
|
11139
10860
|
.muka-chat-message__bubble {
|
|
11140
10861
|
grid-area: bubble;
|
|
10862
|
+
/*
|
|
10863
|
+
* Width follows the content: a single line hugs, and once the text wraps the
|
|
10864
|
+
* bubble fills to the shared max width. Robust to string or rich children —
|
|
10865
|
+
* no length measuring needed (Figma `Text length` on 5355:44091).
|
|
10866
|
+
*/
|
|
10867
|
+
width: fit-content;
|
|
11141
10868
|
max-width: var(--chatbubble-max-width);
|
|
11142
10869
|
position: relative;
|
|
11143
10870
|
display: flex;
|
|
@@ -11150,18 +10877,11 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
11150
10877
|
word-break: break-word;
|
|
11151
10878
|
}
|
|
11152
10879
|
|
|
11153
|
-
/*
|
|
11154
|
-
|
|
11155
|
-
* content, long ones fill the row up to the shared max width.
|
|
11156
|
-
*/
|
|
11157
|
-
.muka-chat-message--long .muka-chat-message__bubble {
|
|
10880
|
+
/* Media, an embed or an action stack always run the full bubble width. */
|
|
10881
|
+
.muka-chat-message--has-blocks .muka-chat-message__bubble {
|
|
11158
10882
|
width: 100%;
|
|
11159
10883
|
}
|
|
11160
10884
|
|
|
11161
|
-
.muka-chat-message--short .muka-chat-message__bubble {
|
|
11162
|
-
width: fit-content;
|
|
11163
|
-
}
|
|
11164
|
-
|
|
11165
10885
|
.muka-chat-message--own .muka-chat-message__bubble {
|
|
11166
10886
|
justify-self: end;
|
|
11167
10887
|
}
|
|
@@ -11338,68 +11058,198 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
11338
11058
|
bottom: var(--spacing-1);
|
|
11339
11059
|
}
|
|
11340
11060
|
|
|
11341
|
-
/*
|
|
11342
|
-
*
|
|
11343
|
-
*
|
|
11344
|
-
|
|
11345
|
-
|
|
11346
|
-
|
|
11061
|
+
/*
|
|
11062
|
+
* When the last block in the body is media, an embed or an action stack (not
|
|
11063
|
+
* trailing text), it runs the full width, so reserve a line below for the inset
|
|
11064
|
+
* timestamp. A message that ends in text clears the corner inline instead (see
|
|
11065
|
+
* `__message` padding-right above), so it needs no extra bottom space.
|
|
11066
|
+
*/
|
|
11067
|
+
.muka-chat-message--has-timestamp.muka-chat-message--trailing-block .muka-chat-message__body {
|
|
11068
|
+
padding-bottom: var(--text-body-xs-regular-lineHeight);
|
|
11069
|
+
}
|
|
11070
|
+
|
|
11071
|
+
/* ─── Menu affordance ──────────────────────────────────── */
|
|
11072
|
+
|
|
11073
|
+
/*
|
|
11074
|
+
* Hidden at rest. Revealed on hover on pointer devices, on keyboard focus
|
|
11075
|
+
* everywhere, and pinned while its menu is open. On touch the equivalent
|
|
11076
|
+
* affordance is a long-press on the bubble, which opens an ActionSheet.
|
|
11077
|
+
*/
|
|
11078
|
+
.muka-chat-message__menu {
|
|
11079
|
+
position: absolute;
|
|
11080
|
+
top: var(--spacing-1);
|
|
11081
|
+
right: var(--spacing-1);
|
|
11082
|
+
opacity: 0;
|
|
11083
|
+
pointer-events: none;
|
|
11084
|
+
}
|
|
11085
|
+
|
|
11086
|
+
.muka-chat-message__menu:focus-within,
|
|
11087
|
+
.muka-chat-message--menu-open .muka-chat-message__menu {
|
|
11088
|
+
opacity: 1;
|
|
11089
|
+
pointer-events: auto;
|
|
11090
|
+
}
|
|
11091
|
+
|
|
11092
|
+
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
|
|
11093
|
+
.muka-chat-message__bubble:hover .muka-chat-message__menu {
|
|
11094
|
+
opacity: 1;
|
|
11095
|
+
pointer-events: auto;
|
|
11096
|
+
}
|
|
11097
|
+
}
|
|
11098
|
+
|
|
11099
|
+
/* Suppress iOS Safari's own callout so the long-press sheet can take over */
|
|
11100
|
+
@media (pointer: coarse) {
|
|
11101
|
+
.muka-chat-message--has-menu .muka-chat-message__bubble {
|
|
11102
|
+
-webkit-touch-callout: none;
|
|
11103
|
+
}
|
|
11104
|
+
}
|
|
11105
|
+
|
|
11106
|
+
/* ─── Print ────────────────────────────────────────────── */
|
|
11107
|
+
|
|
11108
|
+
@media print {
|
|
11109
|
+
.muka-chat-message__bubble {
|
|
11110
|
+
box-shadow: none;
|
|
11111
|
+
break-inside: avoid;
|
|
11112
|
+
print-color-adjust: exact;
|
|
11113
|
+
-webkit-print-color-adjust: exact;
|
|
11114
|
+
}
|
|
11115
|
+
|
|
11116
|
+
.muka-chat-message__embed {
|
|
11117
|
+
break-inside: avoid;
|
|
11118
|
+
print-color-adjust: exact;
|
|
11119
|
+
-webkit-print-color-adjust: exact;
|
|
11120
|
+
}
|
|
11121
|
+
|
|
11122
|
+
.muka-chat-message__menu,
|
|
11123
|
+
.muka-chat-message__embed-copy,
|
|
11124
|
+
.muka-chat-message__action-stack {
|
|
11125
|
+
display: none;
|
|
11126
|
+
}
|
|
11127
|
+
}
|
|
11128
|
+
|
|
11129
|
+
|
|
11130
|
+
/* ChatComposer */
|
|
11131
|
+
/* ChatComposer Component Styles */
|
|
11132
|
+
|
|
11133
|
+
/*
|
|
11134
|
+
* The composer is a bare, fill-width row: no padding, background, border or
|
|
11135
|
+
* max-width of its own (Figma 5243:14141). Whatever hosts it owns the
|
|
11136
|
+
* container — see BottomBar's `chat` variant.
|
|
11137
|
+
*/
|
|
11138
|
+
.muka-chat-composer {
|
|
11139
|
+
display: flex;
|
|
11140
|
+
flex-direction: column;
|
|
11141
|
+
gap: var(--spacing-3);
|
|
11142
|
+
width: 100%;
|
|
11143
|
+
}
|
|
11144
|
+
|
|
11145
|
+
.muka-chat-composer--disabled {
|
|
11146
|
+
opacity: 0.6;
|
|
11147
|
+
pointer-events: none;
|
|
11148
|
+
}
|
|
11149
|
+
|
|
11150
|
+
/* ─── Input row ────────────────────────────────────────── */
|
|
11151
|
+
|
|
11152
|
+
.muka-chat-composer__row {
|
|
11153
|
+
display: flex;
|
|
11154
|
+
width: 100%;
|
|
11155
|
+
align-items: flex-end;
|
|
11156
|
+
gap: var(--spacing-3);
|
|
11157
|
+
}
|
|
11158
|
+
|
|
11159
|
+
/* ─── Text field ───────────────────────────────────────── */
|
|
11160
|
+
|
|
11161
|
+
.muka-chat-composer__field {
|
|
11162
|
+
display: flex;
|
|
11163
|
+
flex: 1 1 auto;
|
|
11164
|
+
min-width: 0;
|
|
11165
|
+
box-sizing: border-box;
|
|
11166
|
+
align-items: center;
|
|
11167
|
+
gap: var(--spacing-1);
|
|
11168
|
+
min-height: var(--input-field-height-lg, 48px);
|
|
11169
|
+
padding: 0 var(--spacing-2);
|
|
11170
|
+
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
11171
|
+
border-radius: var(--input-field-radius-lg);
|
|
11172
|
+
background-color: var(--input-field-color-default-background);
|
|
11173
|
+
transition: border-color 0.12s ease;
|
|
11174
|
+
}
|
|
11175
|
+
|
|
11176
|
+
.muka-chat-composer__field:focus-within {
|
|
11177
|
+
border-color: var(--input-field-color-focus-border, var(--color-action-default));
|
|
11178
|
+
}
|
|
11179
|
+
|
|
11180
|
+
.muka-chat-composer__input {
|
|
11181
|
+
flex: 1 1 auto;
|
|
11182
|
+
min-width: 0;
|
|
11183
|
+
width: 100%;
|
|
11184
|
+
box-sizing: border-box;
|
|
11185
|
+
resize: none;
|
|
11186
|
+
border: none;
|
|
11187
|
+
background: transparent;
|
|
11188
|
+
outline: none;
|
|
11189
|
+
padding: 0 var(--spacing-1);
|
|
11190
|
+
color: var(--color-text-default-default);
|
|
11191
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
11192
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
11193
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
11194
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
11195
|
+
appearance: none;
|
|
11196
|
+
-webkit-appearance: none;
|
|
11197
|
+
}
|
|
11198
|
+
|
|
11199
|
+
.muka-chat-composer__input::placeholder {
|
|
11200
|
+
color: var(--color-text-subtle-default);
|
|
11201
|
+
}
|
|
11202
|
+
|
|
11203
|
+
/* Keep the in-field emoji button flush to the bottom-right as the field grows */
|
|
11204
|
+
.muka-chat-composer__emoji {
|
|
11205
|
+
flex-shrink: 0;
|
|
11206
|
+
}
|
|
11207
|
+
|
|
11208
|
+
/* ─── Recording bar ────────────────────────────────────── */
|
|
11209
|
+
|
|
11210
|
+
.muka-chat-composer__recording {
|
|
11211
|
+
display: flex;
|
|
11212
|
+
flex: 1 1 auto;
|
|
11213
|
+
min-width: 0;
|
|
11214
|
+
box-sizing: border-box;
|
|
11215
|
+
align-items: center;
|
|
11216
|
+
min-height: var(--input-field-height-lg, 48px);
|
|
11217
|
+
padding: var(--card-padding-sm);
|
|
11218
|
+
border: var(--border-width-regular) solid var(--card-color-default-border);
|
|
11219
|
+
border-radius: var(--radius-lg);
|
|
11220
|
+
background-color: var(--card-color-default-background);
|
|
11347
11221
|
}
|
|
11348
11222
|
|
|
11349
|
-
/* ───
|
|
11223
|
+
/* ─── Staged attachments strip ─────────────────────────── */
|
|
11350
11224
|
|
|
11351
|
-
|
|
11352
|
-
|
|
11353
|
-
|
|
11354
|
-
* affordance is a long-press on the bubble, which opens an ActionSheet.
|
|
11355
|
-
*/
|
|
11356
|
-
.muka-chat-message__menu {
|
|
11357
|
-
position: absolute;
|
|
11358
|
-
top: var(--spacing-1);
|
|
11359
|
-
right: var(--spacing-1);
|
|
11360
|
-
opacity: 0;
|
|
11361
|
-
pointer-events: none;
|
|
11225
|
+
.muka-chat-composer__attachments-strip {
|
|
11226
|
+
position: relative;
|
|
11227
|
+
width: 100%;
|
|
11362
11228
|
}
|
|
11363
11229
|
|
|
11364
|
-
.muka-chat-
|
|
11365
|
-
|
|
11366
|
-
|
|
11367
|
-
|
|
11230
|
+
.muka-chat-composer__attachments {
|
|
11231
|
+
display: flex;
|
|
11232
|
+
gap: var(--spacing-3);
|
|
11233
|
+
overflow-x: auto;
|
|
11234
|
+
scroll-behavior: smooth;
|
|
11235
|
+
scrollbar-width: none;
|
|
11368
11236
|
}
|
|
11369
11237
|
|
|
11370
|
-
|
|
11371
|
-
|
|
11372
|
-
opacity: 1;
|
|
11373
|
-
pointer-events: auto;
|
|
11374
|
-
}
|
|
11238
|
+
.muka-chat-composer__attachments::-webkit-scrollbar {
|
|
11239
|
+
display: none;
|
|
11375
11240
|
}
|
|
11376
11241
|
|
|
11377
|
-
|
|
11378
|
-
|
|
11379
|
-
|
|
11380
|
-
|
|
11381
|
-
|
|
11242
|
+
.muka-chat-composer__overflow {
|
|
11243
|
+
position: absolute;
|
|
11244
|
+
top: 50%;
|
|
11245
|
+
right: var(--spacing-2);
|
|
11246
|
+
transform: translateY(-50%);
|
|
11382
11247
|
}
|
|
11383
11248
|
|
|
11384
11249
|
/* ─── Print ────────────────────────────────────────────── */
|
|
11385
11250
|
|
|
11386
11251
|
@media print {
|
|
11387
|
-
.muka-chat-
|
|
11388
|
-
box-shadow: none;
|
|
11389
|
-
break-inside: avoid;
|
|
11390
|
-
print-color-adjust: exact;
|
|
11391
|
-
-webkit-print-color-adjust: exact;
|
|
11392
|
-
}
|
|
11393
|
-
|
|
11394
|
-
.muka-chat-message__embed {
|
|
11395
|
-
break-inside: avoid;
|
|
11396
|
-
print-color-adjust: exact;
|
|
11397
|
-
-webkit-print-color-adjust: exact;
|
|
11398
|
-
}
|
|
11399
|
-
|
|
11400
|
-
.muka-chat-message__menu,
|
|
11401
|
-
.muka-chat-message__embed-copy,
|
|
11402
|
-
.muka-chat-message__action-stack {
|
|
11252
|
+
.muka-chat-composer {
|
|
11403
11253
|
display: none;
|
|
11404
11254
|
}
|
|
11405
11255
|
}
|
|
@@ -11549,254 +11399,441 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
11549
11399
|
overflow: hidden;
|
|
11550
11400
|
}
|
|
11551
11401
|
|
|
11552
|
-
.muka-chat-attachment-chip__progress-fill {
|
|
11553
|
-
display: block;
|
|
11554
|
-
height: 100%;
|
|
11555
|
-
background-color: var(--color-action-default);
|
|
11556
|
-
transition: width 0.16s ease;
|
|
11402
|
+
.muka-chat-attachment-chip__progress-fill {
|
|
11403
|
+
display: block;
|
|
11404
|
+
height: 100%;
|
|
11405
|
+
background-color: var(--color-action-default);
|
|
11406
|
+
transition: width 0.16s ease;
|
|
11407
|
+
}
|
|
11408
|
+
|
|
11409
|
+
.muka-chat-attachment-chip--error .muka-chat-attachment-chip__progress-fill {
|
|
11410
|
+
background-color: var(--color-state-error-default, var(--color-text-default-default));
|
|
11411
|
+
}
|
|
11412
|
+
|
|
11413
|
+
|
|
11414
|
+
/* Card */
|
|
11415
|
+
/* Card Component Styles - Using Muka Design Tokens */
|
|
11416
|
+
|
|
11417
|
+
.muka-card {
|
|
11418
|
+
background-color: var(--card-color-default-background);
|
|
11419
|
+
color: var(--card-color-default-foreground);
|
|
11420
|
+
border: var(--border-width-regular) solid var(--card-color-default-border);
|
|
11421
|
+
box-shadow: var(--card-shadow-default);
|
|
11422
|
+
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
11423
|
+
overflow: hidden;
|
|
11424
|
+
}
|
|
11425
|
+
|
|
11426
|
+
/* Padding variants */
|
|
11427
|
+
.muka-card--padding-none {
|
|
11428
|
+
padding: 0;
|
|
11429
|
+
}
|
|
11430
|
+
|
|
11431
|
+
.muka-card--padding-sm {
|
|
11432
|
+
padding: var(--card-padding-sm);
|
|
11433
|
+
}
|
|
11434
|
+
|
|
11435
|
+
.muka-card--padding-md {
|
|
11436
|
+
padding: var(--card-padding-md);
|
|
11437
|
+
}
|
|
11438
|
+
|
|
11439
|
+
.muka-card--padding-lg {
|
|
11440
|
+
padding: var(--card-padding-lg);
|
|
11441
|
+
}
|
|
11442
|
+
|
|
11443
|
+
/* Radius variants */
|
|
11444
|
+
.muka-card--radius-sm {
|
|
11445
|
+
border-radius: var(--card-radius-sm);
|
|
11446
|
+
}
|
|
11447
|
+
|
|
11448
|
+
.muka-card--radius-md {
|
|
11449
|
+
border-radius: var(--card-radius-md);
|
|
11450
|
+
}
|
|
11451
|
+
|
|
11452
|
+
.muka-card--radius-lg {
|
|
11453
|
+
border-radius: var(--card-radius-lg);
|
|
11454
|
+
}
|
|
11455
|
+
|
|
11456
|
+
/* Interactive variant */
|
|
11457
|
+
.muka-card--interactive {
|
|
11458
|
+
cursor: pointer;
|
|
11459
|
+
user-select: none;
|
|
11460
|
+
}
|
|
11461
|
+
|
|
11462
|
+
.muka-card--interactive:hover {
|
|
11463
|
+
background-color: var(--card-color-hover-background);
|
|
11464
|
+
border-color: var(--card-color-hover-border);
|
|
11465
|
+
box-shadow: var(--card-shadow-hover);
|
|
11466
|
+
}
|
|
11467
|
+
|
|
11468
|
+
.muka-card--interactive:active,
|
|
11469
|
+
.muka-card--interactive.muka-card--pressed {
|
|
11470
|
+
background-color: var(--card-color-pressed-background);
|
|
11471
|
+
border-color: var(--card-color-pressed-border);
|
|
11472
|
+
box-shadow: var(--card-shadow-pressed);
|
|
11473
|
+
}
|
|
11474
|
+
|
|
11475
|
+
.muka-card--interactive:focus-visible {
|
|
11476
|
+
outline: 2px solid var(--color-border-focus);
|
|
11477
|
+
outline-offset: 2px;
|
|
11478
|
+
}
|
|
11479
|
+
|
|
11480
|
+
/* Selected variant */
|
|
11481
|
+
.muka-card--selected {
|
|
11482
|
+
background-color: var(--card-color-selected-background);
|
|
11483
|
+
border-color: var(--card-color-selected-border);
|
|
11484
|
+
border-width: var(--border-width-bold);
|
|
11485
|
+
box-shadow: var(--card-shadow-selected);
|
|
11486
|
+
}
|
|
11487
|
+
|
|
11488
|
+
/* Optional header (title + description) */
|
|
11489
|
+
.muka-card__header {
|
|
11490
|
+
margin-bottom: var(--spacing-4);
|
|
11491
|
+
}
|
|
11492
|
+
|
|
11493
|
+
.muka-card__title {
|
|
11494
|
+
margin: 0;
|
|
11495
|
+
color: var(--color-text-default-default);
|
|
11496
|
+
font-family: var(--text-heading-xs-fontFamily);
|
|
11497
|
+
font-weight: var(--text-heading-xs-fontWeight);
|
|
11498
|
+
font-size: var(--text-heading-xs-fontSize);
|
|
11499
|
+
line-height: var(--text-heading-xs-lineHeight);
|
|
11500
|
+
letter-spacing: var(--text-heading-xs-letterSpacing);
|
|
11501
|
+
}
|
|
11502
|
+
|
|
11503
|
+
.muka-card__description {
|
|
11504
|
+
margin: var(--spacing-1) 0 0;
|
|
11505
|
+
color: var(--color-text-subtle-default);
|
|
11506
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
11507
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
11508
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
11509
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
11510
|
+
}
|
|
11511
|
+
|
|
11512
|
+
/* Hide divider on last list item inside card */
|
|
11513
|
+
.muka-card > .muka-listitem:last-child > .muka-listitem__divider {
|
|
11514
|
+
display: none;
|
|
11515
|
+
}
|
|
11516
|
+
|
|
11517
|
+
/* Disabled state */
|
|
11518
|
+
.muka-card--disabled {
|
|
11519
|
+
opacity: 0.5;
|
|
11520
|
+
cursor: not-allowed;
|
|
11521
|
+
pointer-events: none;
|
|
11522
|
+
}
|
|
11523
|
+
|
|
11524
|
+
|
|
11525
|
+
/* Button */
|
|
11526
|
+
/* Button Component Styles - Using Muka Design Tokens */
|
|
11527
|
+
|
|
11528
|
+
/* Base button styles */
|
|
11529
|
+
.muka-button {
|
|
11530
|
+
/* Layout */
|
|
11531
|
+
display: inline-flex;
|
|
11532
|
+
align-items: center;
|
|
11533
|
+
justify-content: center;
|
|
11534
|
+
|
|
11535
|
+
/* Typography - using semantic tokens */
|
|
11536
|
+
font-family: var(--alias-font-brand-family);
|
|
11537
|
+
font-weight: var(--alias-font-brand-weight-semibold);
|
|
11538
|
+
text-decoration: none;
|
|
11539
|
+
|
|
11540
|
+
/* Interaction */
|
|
11541
|
+
border: none;
|
|
11542
|
+
cursor: pointer;
|
|
11543
|
+
user-select: none;
|
|
11544
|
+
transition: all 0.2s ease;
|
|
11545
|
+
|
|
11546
|
+
/* Accessibility */
|
|
11547
|
+
outline: none;
|
|
11548
|
+
position: relative;
|
|
11549
|
+
}
|
|
11550
|
+
|
|
11551
|
+
/* Focus styles for accessibility */
|
|
11552
|
+
.muka-button:focus-visible {
|
|
11553
|
+
outline: 2px solid var(--color-border-focus);
|
|
11554
|
+
outline-offset: 2px;
|
|
11555
|
+
}
|
|
11556
|
+
|
|
11557
|
+
/* Size variants
|
|
11558
|
+
Height is driven by min-height; vertical padding is 0 and the label carries
|
|
11559
|
+
tight (Figma) line-height. Horizontal spacing matches Figma's nested model:
|
|
11560
|
+
the button's padding is the outer container inset, and the label's own
|
|
11561
|
+
padding is the icon-to-text gap (so text-only buttons keep both insets). */
|
|
11562
|
+
.muka-button--sm {
|
|
11563
|
+
padding: 0 var(--button-padding-sm-x);
|
|
11564
|
+
border-radius: var(--button-radius-sm);
|
|
11565
|
+
font-size: var(--text-label-sm-semibold-fontSize);
|
|
11566
|
+
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
11567
|
+
min-height: 32px;
|
|
11568
|
+
}
|
|
11569
|
+
|
|
11570
|
+
.muka-button--sm .muka-button__label {
|
|
11571
|
+
padding: 0 var(--button-gap-sm);
|
|
11572
|
+
}
|
|
11573
|
+
|
|
11574
|
+
.muka-button--md {
|
|
11575
|
+
padding: 0 var(--button-padding-md-x);
|
|
11576
|
+
border-radius: var(--button-radius-md);
|
|
11577
|
+
font-size: var(--text-label-sm-semibold-fontSize);
|
|
11578
|
+
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
11579
|
+
min-height: 40px;
|
|
11580
|
+
}
|
|
11581
|
+
|
|
11582
|
+
.muka-button--md .muka-button__label {
|
|
11583
|
+
padding: 0 var(--button-gap-md);
|
|
11557
11584
|
}
|
|
11558
11585
|
|
|
11559
|
-
.muka-
|
|
11560
|
-
|
|
11586
|
+
.muka-button--lg {
|
|
11587
|
+
padding: 0 var(--button-padding-lg-x);
|
|
11588
|
+
border-radius: var(--button-radius-lg);
|
|
11589
|
+
font-size: var(--text-label-lg-semibold-fontSize);
|
|
11590
|
+
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
11591
|
+
min-height: 48px;
|
|
11561
11592
|
}
|
|
11562
11593
|
|
|
11594
|
+
.muka-button--lg .muka-button__label {
|
|
11595
|
+
padding: 0 var(--button-gap-lg);
|
|
11596
|
+
}
|
|
11563
11597
|
|
|
11564
|
-
|
|
11565
|
-
|
|
11566
|
-
|
|
11567
|
-
|
|
11568
|
-
|
|
11569
|
-
|
|
11570
|
-
border: var(--border-width-regular) solid var(--card-color-default-border);
|
|
11571
|
-
box-shadow: var(--card-shadow-default);
|
|
11572
|
-
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
11573
|
-
overflow: hidden;
|
|
11598
|
+
.muka-button--xl {
|
|
11599
|
+
padding: 0 var(--button-padding-xl-x);
|
|
11600
|
+
border-radius: var(--button-radius-xl);
|
|
11601
|
+
font-size: var(--text-label-2xl-semibold-fontSize);
|
|
11602
|
+
line-height: var(--text-label-2xl-semibold-lineHeight);
|
|
11603
|
+
min-height: 64px;
|
|
11574
11604
|
}
|
|
11575
11605
|
|
|
11576
|
-
|
|
11577
|
-
|
|
11578
|
-
padding: 0;
|
|
11606
|
+
.muka-button--xl .muka-button__label {
|
|
11607
|
+
padding: 0 var(--button-gap-xl);
|
|
11579
11608
|
}
|
|
11580
11609
|
|
|
11581
|
-
|
|
11582
|
-
|
|
11610
|
+
/* Primary variant - your main CTA button */
|
|
11611
|
+
.muka-button--primary {
|
|
11612
|
+
background-color: var(--button-color-primary-background-default);
|
|
11613
|
+
color: var(--button-color-primary-foreground-default);
|
|
11614
|
+
box-shadow: var(--button-color-primary-shadow-default);
|
|
11583
11615
|
}
|
|
11584
11616
|
|
|
11585
|
-
.muka-
|
|
11586
|
-
|
|
11617
|
+
.muka-button--primary:hover:not(:disabled) {
|
|
11618
|
+
background-color: var(--button-color-primary-background-hover);
|
|
11619
|
+
color: var(--button-color-primary-foreground-hover);
|
|
11620
|
+
box-shadow: var(--button-color-primary-shadow-hover);
|
|
11587
11621
|
}
|
|
11588
11622
|
|
|
11589
|
-
|
|
11590
|
-
|
|
11623
|
+
/* `[data-state="open"]` keeps a Button pressed while it's an open disclosure
|
|
11624
|
+
trigger (Radix Menu/Popover set this on the trigger). `[aria-pressed="true"]`
|
|
11625
|
+
gives toggle buttons a visible selected state, so the toggle is not conveyed
|
|
11626
|
+
to sighted users by the accessibility tree alone. */
|
|
11627
|
+
.muka-button--primary:active:not(:disabled),
|
|
11628
|
+
.muka-button--primary.muka-button--pressed:not(:disabled),
|
|
11629
|
+
.muka-button--primary[data-state="open"]:not(:disabled),
|
|
11630
|
+
.muka-button--primary[aria-pressed="true"]:not(:disabled) {
|
|
11631
|
+
background-color: var(--button-color-primary-background-pressed);
|
|
11632
|
+
color: var(--button-color-primary-foreground-pressed);
|
|
11633
|
+
box-shadow: var(--button-color-primary-shadow-pressed);
|
|
11591
11634
|
}
|
|
11592
11635
|
|
|
11593
|
-
|
|
11594
|
-
|
|
11595
|
-
|
|
11636
|
+
.muka-button--primary:disabled {
|
|
11637
|
+
background-color: var(--button-color-primary-background-disabled);
|
|
11638
|
+
color: var(--button-color-primary-foreground-disabled);
|
|
11639
|
+
box-shadow: var(--button-color-primary-shadow-disabled);
|
|
11640
|
+
cursor: not-allowed;
|
|
11641
|
+
opacity: 1; /* Remove opacity since we have proper disabled tokens */
|
|
11596
11642
|
}
|
|
11597
11643
|
|
|
11598
|
-
|
|
11599
|
-
|
|
11644
|
+
/* Secondary variant - supporting actions, no border, only bottom inner shadow */
|
|
11645
|
+
.muka-button--secondary {
|
|
11646
|
+
background-color: var(--button-color-secondary-background-default);
|
|
11647
|
+
color: var(--button-color-secondary-foreground-default);
|
|
11648
|
+
box-shadow: var(--button-color-secondary-shadow-default);
|
|
11600
11649
|
}
|
|
11601
11650
|
|
|
11602
|
-
.muka-
|
|
11603
|
-
|
|
11651
|
+
.muka-button--secondary:hover:not(:disabled) {
|
|
11652
|
+
background-color: var(--button-color-secondary-background-hover);
|
|
11653
|
+
color: var(--button-color-secondary-foreground-hover);
|
|
11654
|
+
box-shadow: var(--button-color-secondary-shadow-hover);
|
|
11604
11655
|
}
|
|
11605
11656
|
|
|
11606
|
-
|
|
11607
|
-
.muka-
|
|
11608
|
-
|
|
11609
|
-
|
|
11657
|
+
.muka-button--secondary:active:not(:disabled),
|
|
11658
|
+
.muka-button--secondary.muka-button--pressed:not(:disabled),
|
|
11659
|
+
.muka-button--secondary[data-state="open"]:not(:disabled),
|
|
11660
|
+
.muka-button--secondary[aria-pressed="true"]:not(:disabled) {
|
|
11661
|
+
background-color: var(--button-color-secondary-background-pressed);
|
|
11662
|
+
color: var(--button-color-secondary-foreground-pressed);
|
|
11663
|
+
box-shadow: var(--button-color-secondary-shadow-pressed);
|
|
11610
11664
|
}
|
|
11611
11665
|
|
|
11612
|
-
.muka-
|
|
11613
|
-
background-color: var(--
|
|
11614
|
-
|
|
11615
|
-
box-shadow: var(--
|
|
11666
|
+
.muka-button--secondary:disabled {
|
|
11667
|
+
background-color: var(--button-color-secondary-background-disabled);
|
|
11668
|
+
color: var(--button-color-secondary-foreground-disabled);
|
|
11669
|
+
box-shadow: var(--button-color-secondary-shadow-disabled);
|
|
11670
|
+
cursor: not-allowed;
|
|
11671
|
+
opacity: 1;
|
|
11616
11672
|
}
|
|
11617
11673
|
|
|
11618
|
-
|
|
11619
|
-
.muka-
|
|
11620
|
-
background-color: var(--
|
|
11621
|
-
|
|
11622
|
-
|
|
11674
|
+
/* Tertiary variant - tinted background with accent text and border */
|
|
11675
|
+
.muka-button--tertiary {
|
|
11676
|
+
background-color: var(--button-color-tertiary-background-default);
|
|
11677
|
+
color: var(--button-color-tertiary-foreground-default);
|
|
11678
|
+
border: 1px solid var(--button-color-tertiary-border-default);
|
|
11623
11679
|
}
|
|
11624
11680
|
|
|
11625
|
-
.muka-
|
|
11626
|
-
|
|
11627
|
-
|
|
11681
|
+
.muka-button--tertiary:hover:not(:disabled) {
|
|
11682
|
+
background-color: var(--button-color-tertiary-background-hover);
|
|
11683
|
+
color: var(--button-color-tertiary-foreground-hover);
|
|
11684
|
+
border-color: var(--button-color-tertiary-border-hover);
|
|
11628
11685
|
}
|
|
11629
11686
|
|
|
11630
|
-
|
|
11631
|
-
.muka-
|
|
11632
|
-
|
|
11633
|
-
|
|
11634
|
-
|
|
11635
|
-
|
|
11687
|
+
.muka-button--tertiary:active:not(:disabled),
|
|
11688
|
+
.muka-button--tertiary.muka-button--pressed:not(:disabled),
|
|
11689
|
+
.muka-button--tertiary[data-state="open"]:not(:disabled),
|
|
11690
|
+
.muka-button--tertiary[aria-pressed="true"]:not(:disabled) {
|
|
11691
|
+
background-color: var(--button-color-tertiary-background-pressed);
|
|
11692
|
+
color: var(--button-color-tertiary-foreground-pressed);
|
|
11693
|
+
border-color: var(--button-color-tertiary-border-pressed);
|
|
11636
11694
|
}
|
|
11637
11695
|
|
|
11638
|
-
|
|
11639
|
-
|
|
11640
|
-
|
|
11696
|
+
.muka-button--tertiary:disabled {
|
|
11697
|
+
background-color: var(--button-color-tertiary-background-disabled);
|
|
11698
|
+
color: var(--button-color-tertiary-foreground-disabled);
|
|
11699
|
+
border-color: var(--button-color-tertiary-border-disabled);
|
|
11700
|
+
cursor: not-allowed;
|
|
11701
|
+
opacity: 1;
|
|
11641
11702
|
}
|
|
11642
11703
|
|
|
11643
|
-
|
|
11644
|
-
|
|
11645
|
-
color: var(--color-
|
|
11646
|
-
|
|
11647
|
-
|
|
11648
|
-
font-size: var(--text-heading-xs-fontSize);
|
|
11649
|
-
line-height: var(--text-heading-xs-lineHeight);
|
|
11650
|
-
letter-spacing: var(--text-heading-xs-letterSpacing);
|
|
11704
|
+
/* Ghost variant - minimal styling, border appears on hover */
|
|
11705
|
+
.muka-button--ghost {
|
|
11706
|
+
background-color: var(--button-color-ghost-background-default);
|
|
11707
|
+
color: var(--button-color-ghost-foreground-default);
|
|
11708
|
+
border: 1px solid var(--button-color-ghost-border-default);
|
|
11651
11709
|
}
|
|
11652
11710
|
|
|
11653
|
-
.muka-
|
|
11654
|
-
|
|
11655
|
-
color: var(--color-
|
|
11656
|
-
|
|
11657
|
-
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
11658
|
-
font-size: var(--text-body-sm-regular-fontSize);
|
|
11659
|
-
line-height: var(--text-body-sm-regular-lineHeight);
|
|
11711
|
+
.muka-button--ghost:hover:not(:disabled) {
|
|
11712
|
+
background-color: var(--button-color-ghost-background-hover);
|
|
11713
|
+
color: var(--button-color-ghost-foreground-hover);
|
|
11714
|
+
border-color: var(--button-color-ghost-border-hover);
|
|
11660
11715
|
}
|
|
11661
11716
|
|
|
11662
|
-
|
|
11663
|
-
.muka-
|
|
11664
|
-
|
|
11717
|
+
.muka-button--ghost:active:not(:disabled),
|
|
11718
|
+
.muka-button--ghost.muka-button--pressed:not(:disabled),
|
|
11719
|
+
.muka-button--ghost[data-state="open"]:not(:disabled),
|
|
11720
|
+
.muka-button--ghost[aria-pressed="true"]:not(:disabled) {
|
|
11721
|
+
background-color: var(--button-color-ghost-background-pressed);
|
|
11722
|
+
color: var(--button-color-ghost-foreground-pressed);
|
|
11723
|
+
border-color: var(--button-color-ghost-border-pressed);
|
|
11665
11724
|
}
|
|
11666
11725
|
|
|
11667
|
-
|
|
11668
|
-
|
|
11669
|
-
|
|
11726
|
+
.muka-button--ghost:disabled {
|
|
11727
|
+
background-color: var(--button-color-ghost-background-disabled);
|
|
11728
|
+
color: var(--button-color-ghost-foreground-disabled);
|
|
11729
|
+
border-color: var(--button-color-ghost-border-disabled);
|
|
11670
11730
|
cursor: not-allowed;
|
|
11671
|
-
|
|
11731
|
+
opacity: 1;
|
|
11672
11732
|
}
|
|
11673
11733
|
|
|
11674
|
-
|
|
11675
|
-
|
|
11676
|
-
|
|
11677
|
-
|
|
11678
|
-
|
|
11679
|
-
* The composer is a bare, fill-width row: no padding, background, border or
|
|
11680
|
-
* max-width of its own (Figma 5243:14141). Whatever hosts it owns the
|
|
11681
|
-
* container — see BottomBar's `chat` variant.
|
|
11682
|
-
*/
|
|
11683
|
-
.muka-chat-composer {
|
|
11684
|
-
display: flex;
|
|
11685
|
-
flex-direction: column;
|
|
11686
|
-
gap: var(--spacing-3);
|
|
11687
|
-
width: 100%;
|
|
11734
|
+
/* Muted variant - same as ghost but resting foreground is subtle, darkens on interaction */
|
|
11735
|
+
.muka-button--muted {
|
|
11736
|
+
background-color: var(--button-color-muted-background-default);
|
|
11737
|
+
color: var(--button-color-muted-foreground-default);
|
|
11738
|
+
border: 1px solid var(--button-color-muted-border-default);
|
|
11688
11739
|
}
|
|
11689
11740
|
|
|
11690
|
-
.muka-
|
|
11691
|
-
|
|
11692
|
-
|
|
11741
|
+
.muka-button--muted:hover:not(:disabled) {
|
|
11742
|
+
background-color: var(--button-color-muted-background-hover);
|
|
11743
|
+
color: var(--button-color-muted-foreground-hover);
|
|
11744
|
+
border-color: var(--button-color-muted-border-hover);
|
|
11693
11745
|
}
|
|
11694
11746
|
|
|
11695
|
-
|
|
11696
|
-
|
|
11697
|
-
.muka-
|
|
11698
|
-
|
|
11699
|
-
|
|
11700
|
-
|
|
11701
|
-
|
|
11747
|
+
.muka-button--muted:active:not(:disabled),
|
|
11748
|
+
.muka-button--muted.muka-button--pressed:not(:disabled),
|
|
11749
|
+
.muka-button--muted[data-state="open"]:not(:disabled),
|
|
11750
|
+
.muka-button--muted[aria-pressed="true"]:not(:disabled) {
|
|
11751
|
+
background-color: var(--button-color-muted-background-pressed);
|
|
11752
|
+
color: var(--button-color-muted-foreground-pressed);
|
|
11753
|
+
border-color: var(--button-color-muted-border-pressed);
|
|
11702
11754
|
}
|
|
11703
11755
|
|
|
11704
|
-
|
|
11756
|
+
.muka-button--muted:disabled {
|
|
11757
|
+
background-color: var(--button-color-muted-background-disabled);
|
|
11758
|
+
color: var(--button-color-muted-foreground-disabled);
|
|
11759
|
+
border-color: var(--button-color-muted-border-disabled);
|
|
11760
|
+
cursor: not-allowed;
|
|
11761
|
+
opacity: 1;
|
|
11762
|
+
}
|
|
11705
11763
|
|
|
11706
|
-
|
|
11707
|
-
|
|
11708
|
-
|
|
11709
|
-
|
|
11710
|
-
|
|
11711
|
-
|
|
11712
|
-
|
|
11713
|
-
|
|
11714
|
-
|
|
11715
|
-
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
11716
|
-
border-radius: var(--input-field-radius-lg);
|
|
11717
|
-
background-color: var(--input-field-color-default-background);
|
|
11718
|
-
transition: border-color 0.12s ease;
|
|
11764
|
+
/* General disabled state - fallback */
|
|
11765
|
+
.muka-button:disabled {
|
|
11766
|
+
cursor: not-allowed;
|
|
11767
|
+
pointer-events: none;
|
|
11768
|
+
}
|
|
11769
|
+
|
|
11770
|
+
/* Full width modifier */
|
|
11771
|
+
.muka-button--full-width {
|
|
11772
|
+
width: 100%;
|
|
11719
11773
|
}
|
|
11720
11774
|
|
|
11721
|
-
|
|
11722
|
-
|
|
11775
|
+
/* Icons - forced to the Figma per-size dimension regardless of the icon passed */
|
|
11776
|
+
.muka-button__icon {
|
|
11777
|
+
display: inline-flex;
|
|
11778
|
+
align-items: center;
|
|
11779
|
+
justify-content: center;
|
|
11780
|
+
flex-shrink: 0;
|
|
11723
11781
|
}
|
|
11724
11782
|
|
|
11725
|
-
.
|
|
11726
|
-
|
|
11727
|
-
|
|
11783
|
+
/* Make the icon content (raw <svg> or a nested Icon span) fill the wrapper.
|
|
11784
|
+
Scoped under .muka-button to outrank Icon.css's own `.muka-icon--{size}`
|
|
11785
|
+
rule, so the button's size wins even when the icon hardcodes its own size. */
|
|
11786
|
+
.muka-button .muka-button__icon > *,
|
|
11787
|
+
.muka-button .muka-button__icon svg {
|
|
11728
11788
|
width: 100%;
|
|
11729
|
-
|
|
11730
|
-
|
|
11731
|
-
border: none;
|
|
11732
|
-
background: transparent;
|
|
11733
|
-
outline: none;
|
|
11734
|
-
padding: 0 var(--spacing-1);
|
|
11735
|
-
color: var(--color-text-default-default);
|
|
11736
|
-
font-family: var(--text-body-base-regular-fontFamily);
|
|
11737
|
-
font-weight: var(--text-body-base-regular-fontWeight);
|
|
11738
|
-
font-size: var(--text-body-base-regular-fontSize);
|
|
11739
|
-
line-height: var(--text-body-base-regular-lineHeight);
|
|
11740
|
-
appearance: none;
|
|
11741
|
-
-webkit-appearance: none;
|
|
11789
|
+
height: 100%;
|
|
11790
|
+
display: block;
|
|
11742
11791
|
}
|
|
11743
11792
|
|
|
11744
|
-
.muka-
|
|
11745
|
-
|
|
11793
|
+
.muka-button--sm .muka-button__icon {
|
|
11794
|
+
width: var(--button-icon-sm);
|
|
11795
|
+
height: var(--button-icon-sm);
|
|
11746
11796
|
}
|
|
11747
11797
|
|
|
11748
|
-
|
|
11749
|
-
|
|
11750
|
-
|
|
11798
|
+
.muka-button--md .muka-button__icon {
|
|
11799
|
+
width: var(--button-icon-md);
|
|
11800
|
+
height: var(--button-icon-md);
|
|
11751
11801
|
}
|
|
11752
11802
|
|
|
11753
|
-
|
|
11754
|
-
|
|
11755
|
-
|
|
11756
|
-
display: flex;
|
|
11757
|
-
flex: 1 1 auto;
|
|
11758
|
-
min-width: 0;
|
|
11759
|
-
box-sizing: border-box;
|
|
11760
|
-
align-items: center;
|
|
11761
|
-
min-height: var(--input-field-height-lg, 48px);
|
|
11762
|
-
padding: var(--card-padding-sm);
|
|
11763
|
-
border: var(--border-width-regular) solid var(--card-color-default-border);
|
|
11764
|
-
border-radius: var(--radius-lg);
|
|
11765
|
-
background-color: var(--card-color-default-background);
|
|
11803
|
+
.muka-button--lg .muka-button__icon {
|
|
11804
|
+
width: var(--button-icon-lg);
|
|
11805
|
+
height: var(--button-icon-lg);
|
|
11766
11806
|
}
|
|
11767
11807
|
|
|
11768
|
-
|
|
11808
|
+
.muka-button--xl .muka-button__icon {
|
|
11809
|
+
width: var(--button-icon-xl);
|
|
11810
|
+
height: var(--button-icon-xl);
|
|
11811
|
+
}
|
|
11769
11812
|
|
|
11770
|
-
.muka-
|
|
11771
|
-
|
|
11772
|
-
|
|
11813
|
+
.muka-button__label {
|
|
11814
|
+
display: inline-flex;
|
|
11815
|
+
align-items: center;
|
|
11773
11816
|
}
|
|
11774
11817
|
|
|
11775
|
-
|
|
11776
|
-
|
|
11777
|
-
|
|
11778
|
-
overflow-x: auto;
|
|
11779
|
-
scroll-behavior: smooth;
|
|
11780
|
-
scrollbar-width: none;
|
|
11818
|
+
/* Icon-only buttons - square, sized to the button height per size */
|
|
11819
|
+
.muka-button--icon-only {
|
|
11820
|
+
padding: 0;
|
|
11781
11821
|
}
|
|
11782
11822
|
|
|
11783
|
-
.muka-
|
|
11784
|
-
|
|
11823
|
+
.muka-button--icon-only.muka-button--sm {
|
|
11824
|
+
width: 32px;
|
|
11785
11825
|
}
|
|
11786
11826
|
|
|
11787
|
-
.muka-
|
|
11788
|
-
|
|
11789
|
-
top: 50%;
|
|
11790
|
-
right: var(--spacing-2);
|
|
11791
|
-
transform: translateY(-50%);
|
|
11827
|
+
.muka-button--icon-only.muka-button--md {
|
|
11828
|
+
width: 40px;
|
|
11792
11829
|
}
|
|
11793
11830
|
|
|
11794
|
-
|
|
11831
|
+
.muka-button--icon-only.muka-button--lg {
|
|
11832
|
+
width: 48px;
|
|
11833
|
+
}
|
|
11795
11834
|
|
|
11796
|
-
|
|
11797
|
-
|
|
11798
|
-
display: none;
|
|
11799
|
-
}
|
|
11835
|
+
.muka-button--icon-only.muka-button--xl {
|
|
11836
|
+
width: 64px;
|
|
11800
11837
|
}
|
|
11801
11838
|
|
|
11802
11839
|
|
|
@@ -12250,362 +12287,231 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
12250
12287
|
padding: 0 var(--badge-number-padding-lg);
|
|
12251
12288
|
font-family: var(--text-label-2xl-bold-fontFamily);
|
|
12252
12289
|
font-weight: var(--text-label-2xl-bold-fontWeight);
|
|
12253
|
-
font-size: var(--text-label-2xl-bold-fontSize);
|
|
12254
|
-
line-height: var(--text-label-2xl-bold-lineHeight);
|
|
12255
|
-
}
|
|
12256
|
-
|
|
12257
|
-
.muka-badge-number__label {
|
|
12258
|
-
/*
|
|
12259
|
-
* The badge sets a tight line-height for compact sizing, which would clip
|
|
12260
|
-
* glyph descenders; give the label a roomier line-height. Vertical centering
|
|
12261
|
-
* is unaffected because the badge height is fixed and content is centered.
|
|
12262
|
-
*/
|
|
12263
|
-
line-height: normal;
|
|
12264
|
-
}
|
|
12265
|
-
|
|
12266
|
-
/* Neutral variant */
|
|
12267
|
-
.muka-badge-number--neutral {
|
|
12268
|
-
background-color: var(--color-surface-level1);
|
|
12269
|
-
color: var(--color-text-default-default);
|
|
12270
|
-
}
|
|
12271
|
-
|
|
12272
|
-
/* Info variant */
|
|
12273
|
-
.muka-badge-number--info {
|
|
12274
|
-
background-color: var(--color-state-info-contrast);
|
|
12275
|
-
color: var(--color-text-default-inverse);
|
|
12276
|
-
}
|
|
12277
|
-
|
|
12278
|
-
/* Success variant */
|
|
12279
|
-
.muka-badge-number--success {
|
|
12280
|
-
background-color: var(--color-state-success-contrast);
|
|
12281
|
-
color: var(--color-text-default-inverse);
|
|
12282
|
-
}
|
|
12283
|
-
|
|
12284
|
-
/* Warning variant */
|
|
12285
|
-
.muka-badge-number--warning {
|
|
12286
|
-
background-color: var(--color-state-warning-contrast);
|
|
12287
|
-
color: var(--color-text-default-inverse);
|
|
12288
|
-
}
|
|
12289
|
-
|
|
12290
|
-
/* Error variant */
|
|
12291
|
-
.muka-badge-number--error {
|
|
12292
|
-
background-color: var(--color-state-error-contrast);
|
|
12293
|
-
color: var(--color-text-default-inverse);
|
|
12294
|
-
}
|
|
12295
|
-
|
|
12296
|
-
|
|
12297
|
-
/* Button */
|
|
12298
|
-
/* Button Component Styles - Using Muka Design Tokens */
|
|
12299
|
-
|
|
12300
|
-
/* Base button styles */
|
|
12301
|
-
.muka-button {
|
|
12302
|
-
/* Layout */
|
|
12303
|
-
display: inline-flex;
|
|
12304
|
-
align-items: center;
|
|
12305
|
-
justify-content: center;
|
|
12306
|
-
|
|
12307
|
-
/* Typography - using semantic tokens */
|
|
12308
|
-
font-family: var(--alias-font-brand-family);
|
|
12309
|
-
font-weight: var(--alias-font-brand-weight-semibold);
|
|
12310
|
-
text-decoration: none;
|
|
12311
|
-
|
|
12312
|
-
/* Interaction */
|
|
12313
|
-
border: none;
|
|
12314
|
-
cursor: pointer;
|
|
12315
|
-
user-select: none;
|
|
12316
|
-
transition: all 0.2s ease;
|
|
12317
|
-
|
|
12318
|
-
/* Accessibility */
|
|
12319
|
-
outline: none;
|
|
12320
|
-
position: relative;
|
|
12321
|
-
}
|
|
12322
|
-
|
|
12323
|
-
/* Focus styles for accessibility */
|
|
12324
|
-
.muka-button:focus-visible {
|
|
12325
|
-
outline: 2px solid var(--color-border-focus);
|
|
12326
|
-
outline-offset: 2px;
|
|
12327
|
-
}
|
|
12328
|
-
|
|
12329
|
-
/* Size variants
|
|
12330
|
-
Height is driven by min-height; vertical padding is 0 and the label carries
|
|
12331
|
-
tight (Figma) line-height. Horizontal spacing matches Figma's nested model:
|
|
12332
|
-
the button's padding is the outer container inset, and the label's own
|
|
12333
|
-
padding is the icon-to-text gap (so text-only buttons keep both insets). */
|
|
12334
|
-
.muka-button--sm {
|
|
12335
|
-
padding: 0 var(--button-padding-sm-x);
|
|
12336
|
-
border-radius: var(--button-radius-sm);
|
|
12337
|
-
font-size: var(--text-label-sm-semibold-fontSize);
|
|
12338
|
-
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
12339
|
-
min-height: 32px;
|
|
12340
|
-
}
|
|
12341
|
-
|
|
12342
|
-
.muka-button--sm .muka-button__label {
|
|
12343
|
-
padding: 0 var(--button-gap-sm);
|
|
12344
|
-
}
|
|
12345
|
-
|
|
12346
|
-
.muka-button--md {
|
|
12347
|
-
padding: 0 var(--button-padding-md-x);
|
|
12348
|
-
border-radius: var(--button-radius-md);
|
|
12349
|
-
font-size: var(--text-label-sm-semibold-fontSize);
|
|
12350
|
-
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
12351
|
-
min-height: 40px;
|
|
12352
|
-
}
|
|
12353
|
-
|
|
12354
|
-
.muka-button--md .muka-button__label {
|
|
12355
|
-
padding: 0 var(--button-gap-md);
|
|
12356
|
-
}
|
|
12357
|
-
|
|
12358
|
-
.muka-button--lg {
|
|
12359
|
-
padding: 0 var(--button-padding-lg-x);
|
|
12360
|
-
border-radius: var(--button-radius-lg);
|
|
12361
|
-
font-size: var(--text-label-lg-semibold-fontSize);
|
|
12362
|
-
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
12363
|
-
min-height: 48px;
|
|
12364
|
-
}
|
|
12365
|
-
|
|
12366
|
-
.muka-button--lg .muka-button__label {
|
|
12367
|
-
padding: 0 var(--button-gap-lg);
|
|
12368
|
-
}
|
|
12369
|
-
|
|
12370
|
-
.muka-button--xl {
|
|
12371
|
-
padding: 0 var(--button-padding-xl-x);
|
|
12372
|
-
border-radius: var(--button-radius-xl);
|
|
12373
|
-
font-size: var(--text-label-2xl-semibold-fontSize);
|
|
12374
|
-
line-height: var(--text-label-2xl-semibold-lineHeight);
|
|
12375
|
-
min-height: 64px;
|
|
12376
|
-
}
|
|
12377
|
-
|
|
12378
|
-
.muka-button--xl .muka-button__label {
|
|
12379
|
-
padding: 0 var(--button-gap-xl);
|
|
12380
|
-
}
|
|
12381
|
-
|
|
12382
|
-
/* Primary variant - your main CTA button */
|
|
12383
|
-
.muka-button--primary {
|
|
12384
|
-
background-color: var(--button-color-primary-background-default);
|
|
12385
|
-
color: var(--button-color-primary-foreground-default);
|
|
12386
|
-
box-shadow: var(--button-color-primary-shadow-default);
|
|
12387
|
-
}
|
|
12388
|
-
|
|
12389
|
-
.muka-button--primary:hover:not(:disabled) {
|
|
12390
|
-
background-color: var(--button-color-primary-background-hover);
|
|
12391
|
-
color: var(--button-color-primary-foreground-hover);
|
|
12392
|
-
box-shadow: var(--button-color-primary-shadow-hover);
|
|
12393
|
-
}
|
|
12394
|
-
|
|
12395
|
-
/* `[data-state="open"]` keeps a Button pressed while it's an open disclosure
|
|
12396
|
-
trigger (Radix Menu/Popover set this on the trigger). `[aria-pressed="true"]`
|
|
12397
|
-
gives toggle buttons a visible selected state, so the toggle is not conveyed
|
|
12398
|
-
to sighted users by the accessibility tree alone. */
|
|
12399
|
-
.muka-button--primary:active:not(:disabled),
|
|
12400
|
-
.muka-button--primary.muka-button--pressed:not(:disabled),
|
|
12401
|
-
.muka-button--primary[data-state="open"]:not(:disabled),
|
|
12402
|
-
.muka-button--primary[aria-pressed="true"]:not(:disabled) {
|
|
12403
|
-
background-color: var(--button-color-primary-background-pressed);
|
|
12404
|
-
color: var(--button-color-primary-foreground-pressed);
|
|
12405
|
-
box-shadow: var(--button-color-primary-shadow-pressed);
|
|
12290
|
+
font-size: var(--text-label-2xl-bold-fontSize);
|
|
12291
|
+
line-height: var(--text-label-2xl-bold-lineHeight);
|
|
12406
12292
|
}
|
|
12407
12293
|
|
|
12408
|
-
.muka-
|
|
12409
|
-
|
|
12410
|
-
|
|
12411
|
-
|
|
12412
|
-
|
|
12413
|
-
|
|
12294
|
+
.muka-badge-number__label {
|
|
12295
|
+
/*
|
|
12296
|
+
* The badge sets a tight line-height for compact sizing, which would clip
|
|
12297
|
+
* glyph descenders; give the label a roomier line-height. Vertical centering
|
|
12298
|
+
* is unaffected because the badge height is fixed and content is centered.
|
|
12299
|
+
*/
|
|
12300
|
+
line-height: normal;
|
|
12414
12301
|
}
|
|
12415
12302
|
|
|
12416
|
-
/*
|
|
12417
|
-
.muka-
|
|
12418
|
-
background-color: var(--
|
|
12419
|
-
color: var(--
|
|
12420
|
-
box-shadow: var(--button-color-secondary-shadow-default);
|
|
12303
|
+
/* Neutral variant */
|
|
12304
|
+
.muka-badge-number--neutral {
|
|
12305
|
+
background-color: var(--color-surface-level1);
|
|
12306
|
+
color: var(--color-text-default-default);
|
|
12421
12307
|
}
|
|
12422
12308
|
|
|
12423
|
-
|
|
12424
|
-
|
|
12425
|
-
color: var(--
|
|
12426
|
-
|
|
12309
|
+
/* Info variant */
|
|
12310
|
+
.muka-badge-number--info {
|
|
12311
|
+
background-color: var(--color-state-info-contrast);
|
|
12312
|
+
color: var(--color-text-default-inverse);
|
|
12427
12313
|
}
|
|
12428
12314
|
|
|
12429
|
-
|
|
12430
|
-
.muka-
|
|
12431
|
-
|
|
12432
|
-
|
|
12433
|
-
background-color: var(--button-color-secondary-background-pressed);
|
|
12434
|
-
color: var(--button-color-secondary-foreground-pressed);
|
|
12435
|
-
box-shadow: var(--button-color-secondary-shadow-pressed);
|
|
12315
|
+
/* Success variant */
|
|
12316
|
+
.muka-badge-number--success {
|
|
12317
|
+
background-color: var(--color-state-success-contrast);
|
|
12318
|
+
color: var(--color-text-default-inverse);
|
|
12436
12319
|
}
|
|
12437
12320
|
|
|
12438
|
-
|
|
12439
|
-
|
|
12440
|
-
color: var(--
|
|
12441
|
-
|
|
12442
|
-
cursor: not-allowed;
|
|
12443
|
-
opacity: 1;
|
|
12321
|
+
/* Warning variant */
|
|
12322
|
+
.muka-badge-number--warning {
|
|
12323
|
+
background-color: var(--color-state-warning-contrast);
|
|
12324
|
+
color: var(--color-text-default-inverse);
|
|
12444
12325
|
}
|
|
12445
12326
|
|
|
12446
|
-
/*
|
|
12447
|
-
.muka-
|
|
12448
|
-
background-color: var(--
|
|
12449
|
-
color: var(--
|
|
12450
|
-
border: 1px solid var(--button-color-tertiary-border-default);
|
|
12327
|
+
/* Error variant */
|
|
12328
|
+
.muka-badge-number--error {
|
|
12329
|
+
background-color: var(--color-state-error-contrast);
|
|
12330
|
+
color: var(--color-text-default-inverse);
|
|
12451
12331
|
}
|
|
12452
12332
|
|
|
12453
|
-
.muka-button--tertiary:hover:not(:disabled) {
|
|
12454
|
-
background-color: var(--button-color-tertiary-background-hover);
|
|
12455
|
-
color: var(--button-color-tertiary-foreground-hover);
|
|
12456
|
-
border-color: var(--button-color-tertiary-border-hover);
|
|
12457
|
-
}
|
|
12458
12333
|
|
|
12459
|
-
|
|
12460
|
-
|
|
12461
|
-
|
|
12462
|
-
.muka-
|
|
12463
|
-
|
|
12464
|
-
|
|
12465
|
-
border-
|
|
12334
|
+
/* Badge */
|
|
12335
|
+
/* Badge Component Styles - Using Muka Design Tokens */
|
|
12336
|
+
|
|
12337
|
+
.muka-badge {
|
|
12338
|
+
display: inline-flex;
|
|
12339
|
+
align-items: center;
|
|
12340
|
+
border-radius: var(--border-radius-full);
|
|
12341
|
+
white-space: nowrap;
|
|
12342
|
+
user-select: none;
|
|
12343
|
+
box-sizing: border-box;
|
|
12466
12344
|
}
|
|
12467
12345
|
|
|
12468
|
-
|
|
12469
|
-
|
|
12470
|
-
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12346
|
+
/*
|
|
12347
|
+
* Sizes — height, gap, type, and default (label-edge) horizontal padding.
|
|
12348
|
+
* Mirrors Chip so the two components share sizing, fonts, and spacing.
|
|
12349
|
+
* Vertical centering is handled by the fixed height + align-items: center.
|
|
12350
|
+
* The leading side gets a tighter padding when an icon/dot is present, via the
|
|
12351
|
+
* --has-icon / --has-dot modifiers below.
|
|
12352
|
+
*/
|
|
12353
|
+
.muka-badge--sm {
|
|
12354
|
+
height: var(--badge-size-height-sm);
|
|
12355
|
+
gap: var(--badge-gap-sm);
|
|
12356
|
+
padding: 0 var(--badge-padding-label-sm);
|
|
12357
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
12358
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
12359
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
12360
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
12474
12361
|
}
|
|
12475
12362
|
|
|
12476
|
-
|
|
12477
|
-
|
|
12478
|
-
|
|
12479
|
-
|
|
12480
|
-
|
|
12363
|
+
.muka-badge--md {
|
|
12364
|
+
height: var(--badge-size-height-md);
|
|
12365
|
+
gap: var(--badge-gap-md);
|
|
12366
|
+
padding: 0 var(--badge-padding-label-md);
|
|
12367
|
+
font-family: var(--text-label-md-regular-fontFamily);
|
|
12368
|
+
font-weight: var(--text-label-md-regular-fontWeight);
|
|
12369
|
+
font-size: var(--text-label-md-regular-fontSize);
|
|
12370
|
+
line-height: var(--text-label-md-regular-lineHeight);
|
|
12481
12371
|
}
|
|
12482
12372
|
|
|
12483
|
-
.muka-
|
|
12484
|
-
|
|
12485
|
-
|
|
12486
|
-
|
|
12373
|
+
.muka-badge--lg {
|
|
12374
|
+
height: var(--badge-size-height-lg);
|
|
12375
|
+
gap: var(--badge-gap-lg);
|
|
12376
|
+
padding: 0 var(--badge-padding-label-lg);
|
|
12377
|
+
font-family: var(--text-label-lg-regular-fontFamily);
|
|
12378
|
+
font-weight: var(--text-label-lg-regular-fontWeight);
|
|
12379
|
+
font-size: var(--text-label-lg-regular-fontSize);
|
|
12380
|
+
line-height: var(--text-label-lg-regular-lineHeight);
|
|
12487
12381
|
}
|
|
12488
12382
|
|
|
12489
|
-
|
|
12490
|
-
.muka-
|
|
12491
|
-
.muka-
|
|
12492
|
-
|
|
12493
|
-
|
|
12494
|
-
|
|
12495
|
-
|
|
12383
|
+
/* Tighter leading padding when a leading icon or dot is present */
|
|
12384
|
+
.muka-badge--sm.muka-badge--has-icon,
|
|
12385
|
+
.muka-badge--sm.muka-badge--has-dot {
|
|
12386
|
+
padding-left: var(--badge-padding-leading-sm);
|
|
12387
|
+
}
|
|
12388
|
+
.muka-badge--md.muka-badge--has-icon,
|
|
12389
|
+
.muka-badge--md.muka-badge--has-dot {
|
|
12390
|
+
padding-left: var(--badge-padding-leading-md);
|
|
12391
|
+
}
|
|
12392
|
+
.muka-badge--lg.muka-badge--has-icon,
|
|
12393
|
+
.muka-badge--lg.muka-badge--has-dot {
|
|
12394
|
+
padding-left: var(--badge-padding-leading-lg);
|
|
12496
12395
|
}
|
|
12497
12396
|
|
|
12498
|
-
|
|
12499
|
-
|
|
12500
|
-
|
|
12501
|
-
|
|
12502
|
-
|
|
12503
|
-
|
|
12397
|
+
/* Leading icon slot — Figma icon sizes: sm 16, md 20, lg 24 (matches Chip) */
|
|
12398
|
+
.muka-badge__icon {
|
|
12399
|
+
display: inline-flex;
|
|
12400
|
+
align-items: center;
|
|
12401
|
+
justify-content: center;
|
|
12402
|
+
flex-shrink: 0;
|
|
12504
12403
|
}
|
|
12505
12404
|
|
|
12506
|
-
|
|
12507
|
-
|
|
12508
|
-
|
|
12509
|
-
|
|
12510
|
-
|
|
12405
|
+
.muka-badge--sm .muka-badge__icon {
|
|
12406
|
+
width: var(--icon-size-xs);
|
|
12407
|
+
height: var(--icon-size-xs);
|
|
12408
|
+
}
|
|
12409
|
+
.muka-badge--md .muka-badge__icon {
|
|
12410
|
+
width: var(--icon-size-sm);
|
|
12411
|
+
height: var(--icon-size-sm);
|
|
12412
|
+
}
|
|
12413
|
+
.muka-badge--lg .muka-badge__icon {
|
|
12414
|
+
width: var(--icon-size-default);
|
|
12415
|
+
height: var(--icon-size-default);
|
|
12511
12416
|
}
|
|
12512
12417
|
|
|
12513
|
-
|
|
12514
|
-
|
|
12515
|
-
|
|
12516
|
-
|
|
12418
|
+
/* Force the passed content (raw <svg> or an <Icon> wrapper) to the slot size,
|
|
12419
|
+
so callers don't have to size the icon to match each badge size. The
|
|
12420
|
+
.muka-icon selector is intentionally 2 classes deep to override .muka-icon--md. */
|
|
12421
|
+
.muka-badge__icon .muka-icon,
|
|
12422
|
+
.muka-badge__icon svg {
|
|
12423
|
+
width: 100%;
|
|
12424
|
+
height: 100%;
|
|
12517
12425
|
}
|
|
12518
12426
|
|
|
12519
|
-
|
|
12520
|
-
.muka-
|
|
12521
|
-
|
|
12522
|
-
.muka-button--muted[aria-pressed="true"]:not(:disabled) {
|
|
12523
|
-
background-color: var(--button-color-muted-background-pressed);
|
|
12524
|
-
color: var(--button-color-muted-foreground-pressed);
|
|
12525
|
-
border-color: var(--button-color-muted-border-pressed);
|
|
12427
|
+
/* Icons inherit the badge's per-variant foreground color */
|
|
12428
|
+
.muka-badge .muka-icon {
|
|
12429
|
+
color: inherit;
|
|
12526
12430
|
}
|
|
12527
12431
|
|
|
12528
|
-
|
|
12529
|
-
|
|
12530
|
-
|
|
12531
|
-
border-
|
|
12532
|
-
cursor: not-allowed;
|
|
12533
|
-
opacity: 1;
|
|
12432
|
+
/* Dot indicator */
|
|
12433
|
+
.muka-badge__dot {
|
|
12434
|
+
flex-shrink: 0;
|
|
12435
|
+
border-radius: var(--border-radius-full);
|
|
12534
12436
|
}
|
|
12535
12437
|
|
|
12536
|
-
|
|
12537
|
-
|
|
12538
|
-
|
|
12539
|
-
pointer-events: none;
|
|
12438
|
+
.muka-badge--sm .muka-badge__dot {
|
|
12439
|
+
width: var(--badge-size-dot-sm);
|
|
12440
|
+
height: var(--badge-size-dot-sm);
|
|
12540
12441
|
}
|
|
12541
12442
|
|
|
12542
|
-
|
|
12543
|
-
|
|
12544
|
-
|
|
12443
|
+
.muka-badge--md .muka-badge__dot {
|
|
12444
|
+
width: var(--badge-size-dot-md);
|
|
12445
|
+
height: var(--badge-size-dot-md);
|
|
12545
12446
|
}
|
|
12546
12447
|
|
|
12547
|
-
|
|
12548
|
-
|
|
12549
|
-
|
|
12550
|
-
align-items: center;
|
|
12551
|
-
justify-content: center;
|
|
12552
|
-
flex-shrink: 0;
|
|
12448
|
+
.muka-badge--lg .muka-badge__dot {
|
|
12449
|
+
width: var(--badge-size-dot-lg);
|
|
12450
|
+
height: var(--badge-size-dot-lg);
|
|
12553
12451
|
}
|
|
12554
12452
|
|
|
12555
|
-
|
|
12556
|
-
|
|
12557
|
-
|
|
12558
|
-
|
|
12559
|
-
|
|
12560
|
-
|
|
12561
|
-
|
|
12562
|
-
|
|
12453
|
+
.muka-badge__label {
|
|
12454
|
+
flex: 0 1 auto;
|
|
12455
|
+
min-width: 0;
|
|
12456
|
+
overflow: hidden;
|
|
12457
|
+
text-overflow: ellipsis;
|
|
12458
|
+
/*
|
|
12459
|
+
* The badge sets a tight line-height for compact sizing, but the label's
|
|
12460
|
+
* `overflow: hidden` (needed for ellipsis) then clips glyph descenders (g, y, p). Give the
|
|
12461
|
+
* label its own roomier line-height so descenders render; vertical centering is unaffected
|
|
12462
|
+
* because the badge height is fixed and content is centered via align-items: center.
|
|
12463
|
+
*/
|
|
12464
|
+
line-height: normal;
|
|
12563
12465
|
}
|
|
12564
12466
|
|
|
12565
|
-
|
|
12566
|
-
|
|
12567
|
-
|
|
12467
|
+
/* Neutral variant */
|
|
12468
|
+
.muka-badge--neutral {
|
|
12469
|
+
background-color: var(--color-surface-level1);
|
|
12470
|
+
color: var(--color-text-default-default);
|
|
12568
12471
|
}
|
|
12569
12472
|
|
|
12570
|
-
.muka-
|
|
12571
|
-
|
|
12572
|
-
height: var(--button-icon-md);
|
|
12473
|
+
.muka-badge--neutral .muka-badge__dot {
|
|
12474
|
+
background-color: var(--color-text-subtle-default);
|
|
12573
12475
|
}
|
|
12574
12476
|
|
|
12575
|
-
|
|
12576
|
-
|
|
12577
|
-
|
|
12477
|
+
/* Info variant */
|
|
12478
|
+
.muka-badge--info {
|
|
12479
|
+
background-color: var(--color-state-info-background);
|
|
12480
|
+
color: var(--color-state-info-contrast);
|
|
12578
12481
|
}
|
|
12579
12482
|
|
|
12580
|
-
.muka-
|
|
12581
|
-
|
|
12582
|
-
height: var(--button-icon-xl);
|
|
12483
|
+
.muka-badge--info .muka-badge__dot {
|
|
12484
|
+
background-color: var(--color-state-info-default);
|
|
12583
12485
|
}
|
|
12584
12486
|
|
|
12585
|
-
|
|
12586
|
-
|
|
12587
|
-
|
|
12487
|
+
/* Success variant */
|
|
12488
|
+
.muka-badge--success {
|
|
12489
|
+
background-color: var(--color-state-success-background);
|
|
12490
|
+
color: var(--color-state-success-contrast);
|
|
12588
12491
|
}
|
|
12589
12492
|
|
|
12590
|
-
|
|
12591
|
-
|
|
12592
|
-
padding: 0;
|
|
12493
|
+
.muka-badge--success .muka-badge__dot {
|
|
12494
|
+
background-color: var(--color-state-success-default);
|
|
12593
12495
|
}
|
|
12594
12496
|
|
|
12595
|
-
|
|
12596
|
-
|
|
12497
|
+
/* Warning variant */
|
|
12498
|
+
.muka-badge--warning {
|
|
12499
|
+
background-color: var(--color-state-warning-background);
|
|
12500
|
+
color: var(--color-state-warning-contrast);
|
|
12597
12501
|
}
|
|
12598
12502
|
|
|
12599
|
-
.muka-
|
|
12600
|
-
|
|
12503
|
+
.muka-badge--warning .muka-badge__dot {
|
|
12504
|
+
background-color: var(--color-state-warning-default);
|
|
12601
12505
|
}
|
|
12602
12506
|
|
|
12603
|
-
|
|
12604
|
-
|
|
12507
|
+
/* Error variant */
|
|
12508
|
+
.muka-badge--error {
|
|
12509
|
+
background-color: var(--color-state-error-background);
|
|
12510
|
+
color: var(--color-state-error-contrast);
|
|
12605
12511
|
}
|
|
12606
12512
|
|
|
12607
|
-
.muka-
|
|
12608
|
-
|
|
12513
|
+
.muka-badge--error .muka-badge__dot {
|
|
12514
|
+
background-color: var(--color-state-error-default);
|
|
12609
12515
|
}
|
|
12610
12516
|
|
|
12611
12517
|
|
|
@@ -13127,236 +13033,52 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13127
13033
|
font-size: var(--text-body-sm-regular-fontSize);
|
|
13128
13034
|
line-height: var(--text-body-sm-regular-lineHeight);
|
|
13129
13035
|
}
|
|
13130
|
-
|
|
13131
|
-
.muka-alert--lg .muka-alert__message {
|
|
13132
|
-
font-family: var(--text-body-base-regular-fontFamily);
|
|
13133
|
-
font-weight: var(--text-body-base-regular-fontWeight);
|
|
13134
|
-
font-size: var(--text-body-base-regular-fontSize);
|
|
13135
|
-
line-height: var(--text-body-base-regular-lineHeight);
|
|
13136
|
-
}
|
|
13137
|
-
|
|
13138
|
-
/* Action slot */
|
|
13139
|
-
.muka-alert__action {
|
|
13140
|
-
display: flex;
|
|
13141
|
-
align-items: center;
|
|
13142
|
-
flex-shrink: 0;
|
|
13143
|
-
}
|
|
13144
|
-
|
|
13145
|
-
/* Dismiss button - uses accent color per variant, aligned with icon row */
|
|
13146
|
-
.muka-alert__dismiss {
|
|
13147
|
-
display: flex;
|
|
13148
|
-
align-items: center;
|
|
13149
|
-
justify-content: center;
|
|
13150
|
-
flex-shrink: 0;
|
|
13151
|
-
align-self: flex-start;
|
|
13152
|
-
width: 24px;
|
|
13153
|
-
height: 24px;
|
|
13154
|
-
padding: 0;
|
|
13155
|
-
margin: 0 0 0 auto;
|
|
13156
|
-
border: none;
|
|
13157
|
-
background: transparent;
|
|
13158
|
-
cursor: pointer;
|
|
13159
|
-
border-radius: var(--border-radius-sm);
|
|
13160
|
-
transition: opacity 0.15s ease, background-color 0.15s ease;
|
|
13161
|
-
}
|
|
13162
|
-
|
|
13163
|
-
.muka-alert__dismiss:hover {
|
|
13164
|
-
opacity: 0.85;
|
|
13165
|
-
background-color: rgba(0, 0, 0, 0.05);
|
|
13166
|
-
}
|
|
13167
|
-
|
|
13168
|
-
.muka-alert__dismiss:focus-visible {
|
|
13169
|
-
outline: 2px solid var(--color-border-focus);
|
|
13170
|
-
outline-offset: 2px;
|
|
13171
|
-
}
|
|
13172
|
-
|
|
13173
|
-
.muka-alert__dismiss svg {
|
|
13174
|
-
width: 16px;
|
|
13175
|
-
height: 16px;
|
|
13176
|
-
}
|
|
13177
|
-
|
|
13178
|
-
|
|
13179
|
-
/* Badge */
|
|
13180
|
-
/* Badge Component Styles - Using Muka Design Tokens */
|
|
13181
|
-
|
|
13182
|
-
.muka-badge {
|
|
13183
|
-
display: inline-flex;
|
|
13184
|
-
align-items: center;
|
|
13185
|
-
border-radius: var(--border-radius-full);
|
|
13186
|
-
white-space: nowrap;
|
|
13187
|
-
user-select: none;
|
|
13188
|
-
box-sizing: border-box;
|
|
13189
|
-
}
|
|
13190
|
-
|
|
13191
|
-
/*
|
|
13192
|
-
* Sizes — height, gap, type, and default (label-edge) horizontal padding.
|
|
13193
|
-
* Mirrors Chip so the two components share sizing, fonts, and spacing.
|
|
13194
|
-
* Vertical centering is handled by the fixed height + align-items: center.
|
|
13195
|
-
* The leading side gets a tighter padding when an icon/dot is present, via the
|
|
13196
|
-
* --has-icon / --has-dot modifiers below.
|
|
13197
|
-
*/
|
|
13198
|
-
.muka-badge--sm {
|
|
13199
|
-
height: var(--badge-size-height-sm);
|
|
13200
|
-
gap: var(--badge-gap-sm);
|
|
13201
|
-
padding: 0 var(--badge-padding-label-sm);
|
|
13202
|
-
font-family: var(--text-label-sm-regular-fontFamily);
|
|
13203
|
-
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
13204
|
-
font-size: var(--text-label-sm-regular-fontSize);
|
|
13205
|
-
line-height: var(--text-label-sm-regular-lineHeight);
|
|
13206
|
-
}
|
|
13207
|
-
|
|
13208
|
-
.muka-badge--md {
|
|
13209
|
-
height: var(--badge-size-height-md);
|
|
13210
|
-
gap: var(--badge-gap-md);
|
|
13211
|
-
padding: 0 var(--badge-padding-label-md);
|
|
13212
|
-
font-family: var(--text-label-md-regular-fontFamily);
|
|
13213
|
-
font-weight: var(--text-label-md-regular-fontWeight);
|
|
13214
|
-
font-size: var(--text-label-md-regular-fontSize);
|
|
13215
|
-
line-height: var(--text-label-md-regular-lineHeight);
|
|
13216
|
-
}
|
|
13217
|
-
|
|
13218
|
-
.muka-badge--lg {
|
|
13219
|
-
height: var(--badge-size-height-lg);
|
|
13220
|
-
gap: var(--badge-gap-lg);
|
|
13221
|
-
padding: 0 var(--badge-padding-label-lg);
|
|
13222
|
-
font-family: var(--text-label-lg-regular-fontFamily);
|
|
13223
|
-
font-weight: var(--text-label-lg-regular-fontWeight);
|
|
13224
|
-
font-size: var(--text-label-lg-regular-fontSize);
|
|
13225
|
-
line-height: var(--text-label-lg-regular-lineHeight);
|
|
13226
|
-
}
|
|
13227
|
-
|
|
13228
|
-
/* Tighter leading padding when a leading icon or dot is present */
|
|
13229
|
-
.muka-badge--sm.muka-badge--has-icon,
|
|
13230
|
-
.muka-badge--sm.muka-badge--has-dot {
|
|
13231
|
-
padding-left: var(--badge-padding-leading-sm);
|
|
13232
|
-
}
|
|
13233
|
-
.muka-badge--md.muka-badge--has-icon,
|
|
13234
|
-
.muka-badge--md.muka-badge--has-dot {
|
|
13235
|
-
padding-left: var(--badge-padding-leading-md);
|
|
13236
|
-
}
|
|
13237
|
-
.muka-badge--lg.muka-badge--has-icon,
|
|
13238
|
-
.muka-badge--lg.muka-badge--has-dot {
|
|
13239
|
-
padding-left: var(--badge-padding-leading-lg);
|
|
13240
|
-
}
|
|
13241
|
-
|
|
13242
|
-
/* Leading icon slot — Figma icon sizes: sm 16, md 20, lg 24 (matches Chip) */
|
|
13243
|
-
.muka-badge__icon {
|
|
13244
|
-
display: inline-flex;
|
|
13245
|
-
align-items: center;
|
|
13246
|
-
justify-content: center;
|
|
13247
|
-
flex-shrink: 0;
|
|
13248
|
-
}
|
|
13249
|
-
|
|
13250
|
-
.muka-badge--sm .muka-badge__icon {
|
|
13251
|
-
width: var(--icon-size-xs);
|
|
13252
|
-
height: var(--icon-size-xs);
|
|
13253
|
-
}
|
|
13254
|
-
.muka-badge--md .muka-badge__icon {
|
|
13255
|
-
width: var(--icon-size-sm);
|
|
13256
|
-
height: var(--icon-size-sm);
|
|
13257
|
-
}
|
|
13258
|
-
.muka-badge--lg .muka-badge__icon {
|
|
13259
|
-
width: var(--icon-size-default);
|
|
13260
|
-
height: var(--icon-size-default);
|
|
13261
|
-
}
|
|
13262
|
-
|
|
13263
|
-
/* Force the passed content (raw <svg> or an <Icon> wrapper) to the slot size,
|
|
13264
|
-
so callers don't have to size the icon to match each badge size. The
|
|
13265
|
-
.muka-icon selector is intentionally 2 classes deep to override .muka-icon--md. */
|
|
13266
|
-
.muka-badge__icon .muka-icon,
|
|
13267
|
-
.muka-badge__icon svg {
|
|
13268
|
-
width: 100%;
|
|
13269
|
-
height: 100%;
|
|
13270
|
-
}
|
|
13271
|
-
|
|
13272
|
-
/* Icons inherit the badge's per-variant foreground color */
|
|
13273
|
-
.muka-badge .muka-icon {
|
|
13274
|
-
color: inherit;
|
|
13275
|
-
}
|
|
13276
|
-
|
|
13277
|
-
/* Dot indicator */
|
|
13278
|
-
.muka-badge__dot {
|
|
13279
|
-
flex-shrink: 0;
|
|
13280
|
-
border-radius: var(--border-radius-full);
|
|
13281
|
-
}
|
|
13282
|
-
|
|
13283
|
-
.muka-badge--sm .muka-badge__dot {
|
|
13284
|
-
width: var(--badge-size-dot-sm);
|
|
13285
|
-
height: var(--badge-size-dot-sm);
|
|
13286
|
-
}
|
|
13287
|
-
|
|
13288
|
-
.muka-badge--md .muka-badge__dot {
|
|
13289
|
-
width: var(--badge-size-dot-md);
|
|
13290
|
-
height: var(--badge-size-dot-md);
|
|
13291
|
-
}
|
|
13292
|
-
|
|
13293
|
-
.muka-badge--lg .muka-badge__dot {
|
|
13294
|
-
width: var(--badge-size-dot-lg);
|
|
13295
|
-
height: var(--badge-size-dot-lg);
|
|
13296
|
-
}
|
|
13297
|
-
|
|
13298
|
-
.muka-badge__label {
|
|
13299
|
-
flex: 0 1 auto;
|
|
13300
|
-
min-width: 0;
|
|
13301
|
-
overflow: hidden;
|
|
13302
|
-
text-overflow: ellipsis;
|
|
13303
|
-
/*
|
|
13304
|
-
* The badge sets a tight line-height for compact sizing, but the label's
|
|
13305
|
-
* `overflow: hidden` (needed for ellipsis) then clips glyph descenders (g, y, p). Give the
|
|
13306
|
-
* label its own roomier line-height so descenders render; vertical centering is unaffected
|
|
13307
|
-
* because the badge height is fixed and content is centered via align-items: center.
|
|
13308
|
-
*/
|
|
13309
|
-
line-height: normal;
|
|
13310
|
-
}
|
|
13311
|
-
|
|
13312
|
-
/* Neutral variant */
|
|
13313
|
-
.muka-badge--neutral {
|
|
13314
|
-
background-color: var(--color-surface-level1);
|
|
13315
|
-
color: var(--color-text-default-default);
|
|
13316
|
-
}
|
|
13317
|
-
|
|
13318
|
-
.muka-badge--neutral .muka-badge__dot {
|
|
13319
|
-
background-color: var(--color-text-subtle-default);
|
|
13320
|
-
}
|
|
13321
|
-
|
|
13322
|
-
/* Info variant */
|
|
13323
|
-
.muka-badge--info {
|
|
13324
|
-
background-color: var(--color-state-info-background);
|
|
13325
|
-
color: var(--color-state-info-contrast);
|
|
13326
|
-
}
|
|
13327
|
-
|
|
13328
|
-
.muka-badge--info .muka-badge__dot {
|
|
13329
|
-
background-color: var(--color-state-info-default);
|
|
13330
|
-
}
|
|
13331
|
-
|
|
13332
|
-
/* Success variant */
|
|
13333
|
-
.muka-badge--success {
|
|
13334
|
-
background-color: var(--color-state-success-background);
|
|
13335
|
-
color: var(--color-state-success-contrast);
|
|
13036
|
+
|
|
13037
|
+
.muka-alert--lg .muka-alert__message {
|
|
13038
|
+
font-family: var(--text-body-base-regular-fontFamily);
|
|
13039
|
+
font-weight: var(--text-body-base-regular-fontWeight);
|
|
13040
|
+
font-size: var(--text-body-base-regular-fontSize);
|
|
13041
|
+
line-height: var(--text-body-base-regular-lineHeight);
|
|
13336
13042
|
}
|
|
13337
13043
|
|
|
13338
|
-
|
|
13339
|
-
|
|
13044
|
+
/* Action slot */
|
|
13045
|
+
.muka-alert__action {
|
|
13046
|
+
display: flex;
|
|
13047
|
+
align-items: center;
|
|
13048
|
+
flex-shrink: 0;
|
|
13340
13049
|
}
|
|
13341
13050
|
|
|
13342
|
-
/*
|
|
13343
|
-
.muka-
|
|
13344
|
-
|
|
13345
|
-
|
|
13051
|
+
/* Dismiss button - uses accent color per variant, aligned with icon row */
|
|
13052
|
+
.muka-alert__dismiss {
|
|
13053
|
+
display: flex;
|
|
13054
|
+
align-items: center;
|
|
13055
|
+
justify-content: center;
|
|
13056
|
+
flex-shrink: 0;
|
|
13057
|
+
align-self: flex-start;
|
|
13058
|
+
width: 24px;
|
|
13059
|
+
height: 24px;
|
|
13060
|
+
padding: 0;
|
|
13061
|
+
margin: 0 0 0 auto;
|
|
13062
|
+
border: none;
|
|
13063
|
+
background: transparent;
|
|
13064
|
+
cursor: pointer;
|
|
13065
|
+
border-radius: var(--border-radius-sm);
|
|
13066
|
+
transition: opacity 0.15s ease, background-color 0.15s ease;
|
|
13346
13067
|
}
|
|
13347
13068
|
|
|
13348
|
-
.muka-
|
|
13349
|
-
|
|
13069
|
+
.muka-alert__dismiss:hover {
|
|
13070
|
+
opacity: 0.85;
|
|
13071
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
13350
13072
|
}
|
|
13351
13073
|
|
|
13352
|
-
|
|
13353
|
-
|
|
13354
|
-
|
|
13355
|
-
color: var(--color-state-error-contrast);
|
|
13074
|
+
.muka-alert__dismiss:focus-visible {
|
|
13075
|
+
outline: 2px solid var(--color-border-focus);
|
|
13076
|
+
outline-offset: 2px;
|
|
13356
13077
|
}
|
|
13357
13078
|
|
|
13358
|
-
.muka-
|
|
13359
|
-
|
|
13079
|
+
.muka-alert__dismiss svg {
|
|
13080
|
+
width: 16px;
|
|
13081
|
+
height: 16px;
|
|
13360
13082
|
}
|
|
13361
13083
|
|
|
13362
13084
|
|
|
@@ -13529,6 +13251,148 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13529
13251
|
}
|
|
13530
13252
|
|
|
13531
13253
|
|
|
13254
|
+
/* ActionSheet */
|
|
13255
|
+
/* ActionSheet Component Styles */
|
|
13256
|
+
|
|
13257
|
+
.muka-action-sheet__inner {
|
|
13258
|
+
display: flex;
|
|
13259
|
+
flex-direction: column;
|
|
13260
|
+
padding: 0 var(--spacing-4) var(--spacing-3) var(--spacing-4);
|
|
13261
|
+
gap: var(--spacing-3);
|
|
13262
|
+
}
|
|
13263
|
+
|
|
13264
|
+
/* ─── Header ──────────────────────────────────────────── */
|
|
13265
|
+
|
|
13266
|
+
.muka-action-sheet__header {
|
|
13267
|
+
display: flex;
|
|
13268
|
+
flex-direction: column;
|
|
13269
|
+
align-items: center;
|
|
13270
|
+
gap: var(--spacing-1);
|
|
13271
|
+
padding: var(--spacing-2) 0 var(--spacing-3);
|
|
13272
|
+
text-align: center;
|
|
13273
|
+
}
|
|
13274
|
+
|
|
13275
|
+
.muka-action-sheet__title {
|
|
13276
|
+
margin: 0;
|
|
13277
|
+
color: var(--color-text-default-default);
|
|
13278
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
13279
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
13280
|
+
font-size: var(--text-label-md-semibold-fontSize);
|
|
13281
|
+
line-height: var(--text-label-md-semibold-lineHeight);
|
|
13282
|
+
}
|
|
13283
|
+
|
|
13284
|
+
.muka-action-sheet__description {
|
|
13285
|
+
margin: 0;
|
|
13286
|
+
color: var(--color-text-subtle-default);
|
|
13287
|
+
font-family: var(--text-body-sm-regular-fontFamily);
|
|
13288
|
+
font-weight: var(--text-body-sm-regular-fontWeight);
|
|
13289
|
+
font-size: var(--text-body-sm-regular-fontSize);
|
|
13290
|
+
line-height: var(--text-body-sm-regular-lineHeight);
|
|
13291
|
+
}
|
|
13292
|
+
|
|
13293
|
+
/* ─── Actions group ───────────────────────────────────── */
|
|
13294
|
+
|
|
13295
|
+
.muka-action-sheet__actions {
|
|
13296
|
+
display: flex;
|
|
13297
|
+
flex-direction: column;
|
|
13298
|
+
background-color: var(--color-surface-level1);
|
|
13299
|
+
border-radius: var(--radius-md);
|
|
13300
|
+
overflow: hidden;
|
|
13301
|
+
}
|
|
13302
|
+
|
|
13303
|
+
.muka-action-sheet__item {
|
|
13304
|
+
display: flex;
|
|
13305
|
+
align-items: center;
|
|
13306
|
+
gap: var(--spacing-3);
|
|
13307
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
13308
|
+
background: none;
|
|
13309
|
+
border: none;
|
|
13310
|
+
cursor: pointer;
|
|
13311
|
+
text-align: left;
|
|
13312
|
+
color: var(--color-text-default-default);
|
|
13313
|
+
font-family: var(--text-body-md-regular-fontFamily);
|
|
13314
|
+
font-weight: var(--text-body-md-regular-fontWeight);
|
|
13315
|
+
font-size: var(--text-body-md-regular-fontSize);
|
|
13316
|
+
line-height: var(--text-body-md-regular-lineHeight);
|
|
13317
|
+
-webkit-tap-highlight-color: transparent;
|
|
13318
|
+
transition: background-color 0.12s ease;
|
|
13319
|
+
}
|
|
13320
|
+
|
|
13321
|
+
.muka-action-sheet__item + .muka-action-sheet__item {
|
|
13322
|
+
border-top: var(--border-width-regular) solid var(--color-border-default);
|
|
13323
|
+
}
|
|
13324
|
+
|
|
13325
|
+
.muka-action-sheet__item:hover:not(:disabled) {
|
|
13326
|
+
background-color: var(--color-surface-level2);
|
|
13327
|
+
}
|
|
13328
|
+
|
|
13329
|
+
.muka-action-sheet__item:active:not(:disabled) {
|
|
13330
|
+
background-color: var(--color-surface-level3);
|
|
13331
|
+
}
|
|
13332
|
+
|
|
13333
|
+
.muka-action-sheet__item:focus-visible {
|
|
13334
|
+
outline: 2px solid var(--color-action-default);
|
|
13335
|
+
outline-offset: -2px;
|
|
13336
|
+
}
|
|
13337
|
+
|
|
13338
|
+
.muka-action-sheet__item--destructive {
|
|
13339
|
+
color: var(--color-state-error-default);
|
|
13340
|
+
}
|
|
13341
|
+
|
|
13342
|
+
.muka-action-sheet__item--disabled,
|
|
13343
|
+
.muka-action-sheet__item:disabled {
|
|
13344
|
+
opacity: 0.5;
|
|
13345
|
+
cursor: not-allowed;
|
|
13346
|
+
}
|
|
13347
|
+
|
|
13348
|
+
.muka-action-sheet__item-icon {
|
|
13349
|
+
display: inline-flex;
|
|
13350
|
+
align-items: center;
|
|
13351
|
+
justify-content: center;
|
|
13352
|
+
width: 24px;
|
|
13353
|
+
height: 24px;
|
|
13354
|
+
flex-shrink: 0;
|
|
13355
|
+
}
|
|
13356
|
+
|
|
13357
|
+
.muka-action-sheet__item-icon svg {
|
|
13358
|
+
width: 100%;
|
|
13359
|
+
height: 100%;
|
|
13360
|
+
}
|
|
13361
|
+
|
|
13362
|
+
.muka-action-sheet__item-label {
|
|
13363
|
+
flex: 1;
|
|
13364
|
+
}
|
|
13365
|
+
|
|
13366
|
+
/* ─── Cancel button (separate at bottom) ──────────────── */
|
|
13367
|
+
|
|
13368
|
+
.muka-action-sheet__cancel {
|
|
13369
|
+
display: flex;
|
|
13370
|
+
align-items: center;
|
|
13371
|
+
justify-content: center;
|
|
13372
|
+
padding: var(--spacing-3) var(--spacing-4);
|
|
13373
|
+
background-color: var(--color-surface-level1);
|
|
13374
|
+
border: none;
|
|
13375
|
+
border-radius: var(--radius-md);
|
|
13376
|
+
cursor: pointer;
|
|
13377
|
+
color: var(--color-text-default-default);
|
|
13378
|
+
font-family: var(--text-label-md-semibold-fontFamily);
|
|
13379
|
+
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
13380
|
+
font-size: var(--text-label-md-semibold-fontSize);
|
|
13381
|
+
line-height: var(--text-label-md-semibold-lineHeight);
|
|
13382
|
+
-webkit-tap-highlight-color: transparent;
|
|
13383
|
+
transition: background-color 0.12s ease;
|
|
13384
|
+
}
|
|
13385
|
+
|
|
13386
|
+
.muka-action-sheet__cancel:hover {
|
|
13387
|
+
background-color: var(--color-surface-level2);
|
|
13388
|
+
}
|
|
13389
|
+
|
|
13390
|
+
.muka-action-sheet__cancel:focus-visible {
|
|
13391
|
+
outline: 2px solid var(--color-action-default);
|
|
13392
|
+
outline-offset: 2px;
|
|
13393
|
+
}
|
|
13394
|
+
|
|
13395
|
+
|
|
13532
13396
|
/* Accordion */
|
|
13533
13397
|
/* Accordion Component Styles */
|
|
13534
13398
|
|
|
@@ -13651,153 +13515,285 @@ button.muka-chat-photo-grid__tile:focus-visible {
|
|
|
13651
13515
|
overflow: hidden;
|
|
13652
13516
|
}
|
|
13653
13517
|
|
|
13654
|
-
.muka-accordion--contained .muka-accordion__item {
|
|
13655
|
-
background-color: var(--color-surface-level3);
|
|
13518
|
+
.muka-accordion--contained .muka-accordion__item {
|
|
13519
|
+
background-color: var(--color-surface-level3);
|
|
13520
|
+
}
|
|
13521
|
+
|
|
13522
|
+
.muka-accordion--contained .muka-accordion__item:last-child {
|
|
13523
|
+
border-bottom: none;
|
|
13524
|
+
}
|
|
13525
|
+
|
|
13526
|
+
|
|
13527
|
+
/* Sheet */
|
|
13528
|
+
/* Sheet Component Styles */
|
|
13529
|
+
|
|
13530
|
+
/* ─── Backdrop ────────────────────────────────────────── */
|
|
13531
|
+
|
|
13532
|
+
.muka-sheet__overlay {
|
|
13533
|
+
position: fixed;
|
|
13534
|
+
inset: 0;
|
|
13535
|
+
background-color: var(--color-surface-backdrop);
|
|
13536
|
+
z-index: 50;
|
|
13537
|
+
}
|
|
13538
|
+
|
|
13539
|
+
/* ─── Surface ─────────────────────────────────────────── */
|
|
13540
|
+
|
|
13541
|
+
.muka-sheet {
|
|
13542
|
+
position: fixed;
|
|
13543
|
+
left: 0;
|
|
13544
|
+
right: 0;
|
|
13545
|
+
bottom: 0;
|
|
13546
|
+
z-index: 51;
|
|
13547
|
+
|
|
13548
|
+
display: flex;
|
|
13549
|
+
flex-direction: column;
|
|
13550
|
+
|
|
13551
|
+
max-height: 96dvh;
|
|
13552
|
+
|
|
13553
|
+
background-color: var(--color-surface-level3);
|
|
13554
|
+
border-top-left-radius: var(--radius-lg);
|
|
13555
|
+
border-top-right-radius: var(--radius-lg);
|
|
13556
|
+
box-shadow: var(--shadow-level5);
|
|
13557
|
+
|
|
13558
|
+
outline: none;
|
|
13559
|
+
}
|
|
13560
|
+
|
|
13561
|
+
/* Safe-area bottom inset for the iPhone home indicator. */
|
|
13562
|
+
.muka-sheet:not(.muka-sheet--no-safe-area) {
|
|
13563
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
13564
|
+
}
|
|
13565
|
+
|
|
13566
|
+
/* ─── Drag handle ─────────────────────────────────────── */
|
|
13567
|
+
|
|
13568
|
+
.muka-sheet__handle-container {
|
|
13569
|
+
display: flex;
|
|
13570
|
+
justify-content: center;
|
|
13571
|
+
flex-shrink: 0;
|
|
13572
|
+
padding: var(--spacing-3) 0;
|
|
13573
|
+
}
|
|
13574
|
+
|
|
13575
|
+
.muka-sheet__handle {
|
|
13576
|
+
width: var(--dialog-drag-handle-width);
|
|
13577
|
+
height: var(--dialog-drag-handle-height);
|
|
13578
|
+
background-color: var(--dialog-drag-handle-color);
|
|
13579
|
+
border-radius: var(--dialog-drag-handle-radius);
|
|
13580
|
+
}
|
|
13581
|
+
|
|
13582
|
+
/* ─── Body (scrollable) ───────────────────────────────── */
|
|
13583
|
+
|
|
13584
|
+
.muka-sheet__body {
|
|
13585
|
+
flex: 1 1 0%;
|
|
13586
|
+
min-height: 0;
|
|
13587
|
+
overflow-y: auto;
|
|
13588
|
+
-webkit-overflow-scrolling: touch;
|
|
13589
|
+
overscroll-behavior: contain;
|
|
13656
13590
|
}
|
|
13657
13591
|
|
|
13658
|
-
|
|
13659
|
-
|
|
13592
|
+
/* ─── Visually-hidden title (a11y) ────────────────────── */
|
|
13593
|
+
|
|
13594
|
+
.muka-sheet__sr-title {
|
|
13595
|
+
position: absolute;
|
|
13596
|
+
width: 1px;
|
|
13597
|
+
height: 1px;
|
|
13598
|
+
padding: 0;
|
|
13599
|
+
margin: -1px;
|
|
13600
|
+
overflow: hidden;
|
|
13601
|
+
clip: rect(0, 0, 0, 0);
|
|
13602
|
+
white-space: nowrap;
|
|
13603
|
+
border: 0;
|
|
13660
13604
|
}
|
|
13661
13605
|
|
|
13662
13606
|
|
|
13663
|
-
/*
|
|
13664
|
-
/*
|
|
13607
|
+
/* Select */
|
|
13608
|
+
/* Select Component Styles - Aligned with Input for consistency */
|
|
13665
13609
|
|
|
13666
|
-
.muka-
|
|
13667
|
-
display: flex;
|
|
13610
|
+
.muka-select {
|
|
13611
|
+
display: inline-flex;
|
|
13668
13612
|
flex-direction: column;
|
|
13669
|
-
|
|
13670
|
-
gap: var(--spacing-3);
|
|
13613
|
+
gap: var(--spacing-2);
|
|
13671
13614
|
}
|
|
13672
13615
|
|
|
13673
|
-
|
|
13674
|
-
|
|
13675
|
-
.muka-action-sheet__header {
|
|
13676
|
-
display: flex;
|
|
13677
|
-
flex-direction: column;
|
|
13678
|
-
align-items: center;
|
|
13679
|
-
gap: var(--spacing-1);
|
|
13680
|
-
padding: var(--spacing-2) 0 var(--spacing-3);
|
|
13681
|
-
text-align: center;
|
|
13616
|
+
.muka-select--full-width {
|
|
13617
|
+
width: 100%;
|
|
13682
13618
|
}
|
|
13683
13619
|
|
|
13684
|
-
|
|
13685
|
-
|
|
13620
|
+
/* Label */
|
|
13621
|
+
.muka-select__label {
|
|
13686
13622
|
color: var(--color-text-default-default);
|
|
13623
|
+
cursor: pointer;
|
|
13624
|
+
}
|
|
13625
|
+
|
|
13626
|
+
.muka-select__label--sm {
|
|
13627
|
+
font-family: var(--text-label-sm-semibold-fontFamily);
|
|
13628
|
+
font-weight: var(--text-label-sm-semibold-fontWeight);
|
|
13629
|
+
font-size: var(--text-label-sm-semibold-fontSize);
|
|
13630
|
+
line-height: var(--text-label-sm-semibold-lineHeight);
|
|
13631
|
+
}
|
|
13632
|
+
|
|
13633
|
+
.muka-select__label--md {
|
|
13687
13634
|
font-family: var(--text-label-md-semibold-fontFamily);
|
|
13688
13635
|
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
13689
13636
|
font-size: var(--text-label-md-semibold-fontSize);
|
|
13690
13637
|
line-height: var(--text-label-md-semibold-lineHeight);
|
|
13691
13638
|
}
|
|
13692
13639
|
|
|
13693
|
-
.muka-
|
|
13694
|
-
|
|
13695
|
-
|
|
13696
|
-
font-
|
|
13697
|
-
|
|
13698
|
-
font-size: var(--text-body-sm-regular-fontSize);
|
|
13699
|
-
line-height: var(--text-body-sm-regular-lineHeight);
|
|
13640
|
+
.muka-select__label--lg {
|
|
13641
|
+
font-family: var(--text-label-lg-semibold-fontFamily);
|
|
13642
|
+
font-weight: var(--text-label-lg-semibold-fontWeight);
|
|
13643
|
+
font-size: var(--text-label-lg-semibold-fontSize);
|
|
13644
|
+
line-height: var(--text-label-lg-semibold-lineHeight);
|
|
13700
13645
|
}
|
|
13701
13646
|
|
|
13702
|
-
|
|
13647
|
+
.muka-select__required {
|
|
13648
|
+
color: var(--color-state-error-foreground);
|
|
13649
|
+
}
|
|
13703
13650
|
|
|
13704
|
-
.muka-
|
|
13705
|
-
|
|
13706
|
-
|
|
13707
|
-
|
|
13708
|
-
border-radius: var(--radius-md);
|
|
13709
|
-
overflow: hidden;
|
|
13651
|
+
.muka-select__label--sm + .muka-select__field--disabled,
|
|
13652
|
+
.muka-select__label--md + .muka-select__field--disabled,
|
|
13653
|
+
.muka-select__label--lg + .muka-select__field--disabled {
|
|
13654
|
+
cursor: not-allowed;
|
|
13710
13655
|
}
|
|
13711
13656
|
|
|
13712
|
-
|
|
13657
|
+
/* Field container — same as Input: 1px border, radius, padding, inset shadow */
|
|
13658
|
+
.muka-select__field {
|
|
13713
13659
|
display: flex;
|
|
13714
13660
|
align-items: center;
|
|
13715
|
-
gap: var(--spacing-
|
|
13716
|
-
|
|
13717
|
-
background:
|
|
13718
|
-
border:
|
|
13661
|
+
gap: var(--spacing-2);
|
|
13662
|
+
position: relative;
|
|
13663
|
+
background-color: var(--input-field-color-default-background);
|
|
13664
|
+
border: var(--border-width-regular) solid var(--input-field-color-default-border);
|
|
13665
|
+
border-radius: var(--input-field-radius-md);
|
|
13666
|
+
padding: var(--input-field-padding-y) var(--input-field-padding-x);
|
|
13667
|
+
transition: border-color 0.2s ease, background-color 0.2s ease;
|
|
13719
13668
|
cursor: pointer;
|
|
13720
|
-
|
|
13721
|
-
color: var(--color-text-default-default);
|
|
13722
|
-
font-family: var(--text-body-md-regular-fontFamily);
|
|
13723
|
-
font-weight: var(--text-body-md-regular-fontWeight);
|
|
13724
|
-
font-size: var(--text-body-md-regular-fontSize);
|
|
13725
|
-
line-height: var(--text-body-md-regular-lineHeight);
|
|
13726
|
-
-webkit-tap-highlight-color: transparent;
|
|
13727
|
-
transition: background-color 0.12s ease;
|
|
13669
|
+
box-sizing: border-box;
|
|
13728
13670
|
}
|
|
13729
13671
|
|
|
13730
|
-
|
|
13731
|
-
|
|
13672
|
+
/* Inset shadow — same as Input (single subtle line) */
|
|
13673
|
+
.muka-select__field::after {
|
|
13674
|
+
content: '';
|
|
13675
|
+
position: absolute;
|
|
13676
|
+
inset: 0;
|
|
13677
|
+
border-radius: inherit;
|
|
13678
|
+
box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
|
|
13679
|
+
pointer-events: none;
|
|
13732
13680
|
}
|
|
13733
13681
|
|
|
13734
|
-
|
|
13735
|
-
|
|
13682
|
+
/* Size variants — same radius/height as Input */
|
|
13683
|
+
.muka-select__field--sm {
|
|
13684
|
+
min-height: var(--input-field-height-sm);
|
|
13685
|
+
border-radius: var(--input-field-radius-sm);
|
|
13736
13686
|
}
|
|
13737
13687
|
|
|
13738
|
-
.muka-
|
|
13739
|
-
|
|
13688
|
+
.muka-select__field--md {
|
|
13689
|
+
min-height: var(--input-field-height-default);
|
|
13690
|
+
border-radius: var(--input-field-radius-md);
|
|
13740
13691
|
}
|
|
13741
13692
|
|
|
13742
|
-
.muka-
|
|
13743
|
-
|
|
13744
|
-
|
|
13693
|
+
.muka-select__field--lg {
|
|
13694
|
+
min-height: var(--input-field-height-lg);
|
|
13695
|
+
border-radius: var(--input-field-radius-lg);
|
|
13745
13696
|
}
|
|
13746
13697
|
|
|
13747
|
-
|
|
13748
|
-
|
|
13698
|
+
/* Hover — no visual change (same as Input) */
|
|
13699
|
+
|
|
13700
|
+
/* Focus (active) — same as Input: 2px border, padding compensation */
|
|
13701
|
+
.muka-select__field--focused:not(.muka-select__field--disabled) {
|
|
13702
|
+
border-width: var(--border-width-bold);
|
|
13703
|
+
border-color: var(--input-field-color-focus-border);
|
|
13704
|
+
background-color: var(--input-field-color-focus-background);
|
|
13705
|
+
padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
|
|
13749
13706
|
}
|
|
13750
13707
|
|
|
13751
|
-
|
|
13752
|
-
.muka-
|
|
13753
|
-
|
|
13708
|
+
/* Error — same as Input: 2px border, padding compensation */
|
|
13709
|
+
.muka-select__field--error:not(.muka-select__field--disabled) {
|
|
13710
|
+
border-width: var(--border-width-bold);
|
|
13711
|
+
border-color: var(--input-field-color-error-border);
|
|
13712
|
+
background-color: var(--input-field-color-error-background);
|
|
13713
|
+
padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
|
|
13714
|
+
}
|
|
13715
|
+
|
|
13716
|
+
/* Disabled — same as Input */
|
|
13717
|
+
.muka-select__field--disabled {
|
|
13718
|
+
background-color: var(--input-field-color-disabled-background);
|
|
13719
|
+
border-color: var(--input-field-color-disabled-border);
|
|
13754
13720
|
cursor: not-allowed;
|
|
13755
13721
|
}
|
|
13756
13722
|
|
|
13757
|
-
.muka-
|
|
13758
|
-
display:
|
|
13759
|
-
align-items: center;
|
|
13760
|
-
justify-content: center;
|
|
13761
|
-
width: 24px;
|
|
13762
|
-
height: 24px;
|
|
13763
|
-
flex-shrink: 0;
|
|
13723
|
+
.muka-select__field--disabled::after {
|
|
13724
|
+
display: none;
|
|
13764
13725
|
}
|
|
13765
13726
|
|
|
13766
|
-
|
|
13727
|
+
/* Native select — padding on field so native has 0 + right space for chevron */
|
|
13728
|
+
.muka-select__native {
|
|
13729
|
+
appearance: none;
|
|
13730
|
+
-webkit-appearance: none;
|
|
13731
|
+
flex: 1;
|
|
13732
|
+
border: none;
|
|
13733
|
+
outline: none;
|
|
13734
|
+
background: transparent;
|
|
13735
|
+
color: var(--input-field-color-default-foreground);
|
|
13736
|
+
font-family: var(--text-input-md-fontFamily);
|
|
13737
|
+
font-weight: var(--text-input-md-fontWeight);
|
|
13738
|
+
font-size: var(--text-input-md-fontSize);
|
|
13739
|
+
line-height: var(--text-input-md-lineHeight);
|
|
13740
|
+
padding: 0;
|
|
13741
|
+
padding-right: calc(var(--input-field-padding-x) + 1.5rem);
|
|
13742
|
+
cursor: pointer;
|
|
13743
|
+
min-width: 0;
|
|
13767
13744
|
width: 100%;
|
|
13768
|
-
height: 100%;
|
|
13769
13745
|
}
|
|
13770
13746
|
|
|
13771
|
-
.muka-
|
|
13772
|
-
|
|
13747
|
+
.muka-select__field--sm .muka-select__native {
|
|
13748
|
+
font-family: var(--text-input-sm-fontFamily);
|
|
13749
|
+
font-weight: var(--text-input-sm-fontWeight);
|
|
13750
|
+
font-size: var(--text-input-sm-fontSize);
|
|
13751
|
+
line-height: var(--text-input-sm-lineHeight);
|
|
13773
13752
|
}
|
|
13774
13753
|
|
|
13775
|
-
|
|
13754
|
+
.muka-select__field--lg .muka-select__native {
|
|
13755
|
+
font-family: var(--text-input-lg-fontFamily);
|
|
13756
|
+
font-weight: var(--text-input-lg-fontWeight);
|
|
13757
|
+
font-size: var(--text-input-lg-fontSize);
|
|
13758
|
+
line-height: var(--text-input-lg-lineHeight);
|
|
13759
|
+
}
|
|
13776
13760
|
|
|
13777
|
-
.muka-
|
|
13778
|
-
|
|
13761
|
+
.muka-select__field--disabled .muka-select__native {
|
|
13762
|
+
color: var(--input-field-color-disabled-foreground);
|
|
13763
|
+
cursor: not-allowed;
|
|
13764
|
+
}
|
|
13765
|
+
|
|
13766
|
+
/* Chevron — aligned with field padding */
|
|
13767
|
+
.muka-select__chevron {
|
|
13768
|
+
display: inline-flex;
|
|
13779
13769
|
align-items: center;
|
|
13780
|
-
|
|
13781
|
-
|
|
13782
|
-
|
|
13783
|
-
|
|
13784
|
-
border-radius: var(--radius-md);
|
|
13785
|
-
cursor: pointer;
|
|
13786
|
-
color: var(--color-text-default-default);
|
|
13787
|
-
font-family: var(--text-label-md-semibold-fontFamily);
|
|
13788
|
-
font-weight: var(--text-label-md-semibold-fontWeight);
|
|
13789
|
-
font-size: var(--text-label-md-semibold-fontSize);
|
|
13790
|
-
line-height: var(--text-label-md-semibold-lineHeight);
|
|
13791
|
-
-webkit-tap-highlight-color: transparent;
|
|
13792
|
-
transition: background-color 0.12s ease;
|
|
13770
|
+
position: absolute;
|
|
13771
|
+
right: var(--input-field-padding-x);
|
|
13772
|
+
pointer-events: none;
|
|
13773
|
+
color: var(--color-text-subtle-default);
|
|
13793
13774
|
}
|
|
13794
13775
|
|
|
13795
|
-
.muka-
|
|
13796
|
-
|
|
13776
|
+
.muka-select__field--disabled .muka-select__chevron {
|
|
13777
|
+
color: var(--input-field-color-disabled-foreground);
|
|
13797
13778
|
}
|
|
13798
13779
|
|
|
13799
|
-
|
|
13800
|
-
|
|
13801
|
-
|
|
13780
|
+
/* Helper text — same as Input */
|
|
13781
|
+
.muka-select__helper {
|
|
13782
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
13783
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
13784
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
13785
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
13786
|
+
color: var(--color-text-subtle-default);
|
|
13787
|
+
margin: 0;
|
|
13788
|
+
}
|
|
13789
|
+
|
|
13790
|
+
/* Error message — same as Input */
|
|
13791
|
+
.muka-select__error {
|
|
13792
|
+
font-family: var(--text-label-sm-regular-fontFamily);
|
|
13793
|
+
font-weight: var(--text-label-sm-regular-fontWeight);
|
|
13794
|
+
font-size: var(--text-label-sm-regular-fontSize);
|
|
13795
|
+
line-height: var(--text-label-sm-regular-lineHeight);
|
|
13796
|
+
color: var(--color-state-error-foreground);
|
|
13797
|
+
margin: 0;
|
|
13802
13798
|
}
|
|
13803
13799
|
|