origam 2.8.1 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/src/assets/css/main.css +1 -1
  2. package/dist/src/assets/css/tokens/dark.css +32 -0
  3. package/dist/src/assets/css/tokens/light.css +16 -0
  4. package/dist/src/assets/scss/tokens/_dark.scss +16 -0
  5. package/dist/src/assets/scss/tokens/_light.scss +16 -0
  6. package/dist/src/components/Alert/OrigamAlert.vue +4 -2
  7. package/dist/src/components/Avatar/OrigamAvatarGroup.vue +31 -12
  8. package/dist/src/components/Btn/OrigamBtn.vue +11 -2
  9. package/dist/src/components/Btn/OrigamBtnGroup.vue +204 -22
  10. package/dist/src/components/Btn/OrigamBtnToggle.vue +5 -1
  11. package/dist/src/components/Card/OrigamCard.vue +5 -2
  12. package/dist/src/components/Checkbox/OrigamCheckbox.vue +3 -1
  13. package/dist/src/components/Chip/OrigamChip.vue +2 -0
  14. package/dist/src/components/Code/OrigamCode.vue +4 -2
  15. package/dist/src/components/ColorPickerField/OrigamColorPickerField.vue +19 -2
  16. package/dist/src/components/DatePickerField/OrigamDatePickerField.vue +3 -2
  17. package/dist/src/components/Dialog/OrigamDialog.vue +1 -1
  18. package/dist/src/components/Field/OrigamField.vue +7 -0
  19. package/dist/src/components/Layout/OrigamLayout.vue +10 -1
  20. package/dist/src/components/Menu/OrigamMenu.vue +3 -1
  21. package/dist/src/components/NumberField/OrigamNumberField.vue +3 -2
  22. package/dist/src/components/Overlay/OrigamOverlayScrim.vue +2 -0
  23. package/dist/src/components/Radio/OrigamRadio.vue +3 -1
  24. package/dist/src/components/Select/OrigamSelect.vue +3 -1
  25. package/dist/src/components/SelectionControl/OrigamSelectionControl.vue +2 -0
  26. package/dist/src/components/SliderField/OrigamSliderField.vue +3 -1
  27. package/dist/src/components/Snackbar/OrigamSnackbar.vue +3 -1
  28. package/dist/src/components/Snackbar/OrigamSnackbarItem.vue +2 -0
  29. package/dist/src/components/Switch/OrigamSwitch.vue +42 -1
  30. package/dist/src/components/Switch/OrigamSwitchTrack.vue +35 -2
  31. package/dist/src/components/Table/OrigamTable.vue +4 -2
  32. package/dist/src/components/Tabs/OrigamTabs.vue +3 -1
  33. package/dist/src/components/Tooltip/OrigamTooltip.vue +2 -0
  34. package/dist/src/composables/Commons/defaults.composable.cjs +10 -6
  35. package/dist/src/composables/Commons/defaults.composable.d.ts +30 -0
  36. package/dist/src/composables/Commons/defaults.composable.js +9 -6
  37. package/dist/src/composables/Theme/theme.composable.cjs +49 -30
  38. package/dist/src/composables/Theme/theme.composable.js +41 -22
  39. package/dist/src/interfaces/App/app.interface.d.ts +1 -1
  40. package/dist/src/interfaces/Btn/btn-group.interface.d.ts +2 -2
  41. package/dist/src/interfaces/Switch/switch-track.interface.d.ts +23 -6
  42. package/dist/src/themes/origam.theme.cjs +2 -4
  43. package/dist/src/themes/origam.theme.js +2 -2
  44. package/dist/src/types/tokens.type.d.ts +1 -1
  45. package/dist/src/utils/Commons/commons.util.cjs +10 -0
  46. package/dist/src/utils/Commons/commons.util.d.ts +18 -0
  47. package/dist/src/utils/Commons/commons.util.js +9 -0
  48. package/package.json +1 -1
package/dist/src/assets/css/tokens/dark.css CHANGED
@@ -128,6 +128,7 @@
128
128
  --origam-card---z-index: var(--origam-zIndex---base);
129
129
  --origam-card---background: var(--origam-color__surface---raised);
130
130
  --origam-card---color: var(--origam-color__text---primary);
131
+ --origam-card---backdrop-filter: none;
131
132
  --origam-card---box-shadow: var(--origam-shadow---sm);
132
133
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
133
134
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -203,6 +204,7 @@
203
204
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
204
205
  --origam-chip---background-color: var(--origam-color__surface---overlay);
205
206
  --origam-chip---color: var(--origam-color__text---primary);
207
+ --origam-chip---backdrop-filter: none;
206
208
  --origam-chip---border-color: currentColor;
207
209
  --origam-chip---border-style: solid;
208
210
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -348,6 +350,9 @@
348
350
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
349
351
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
353
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
354
+ --origam-avatar-group__item---outline-style: solid;
355
+ --origam-avatar-group__item---outline-width: 2px;
351
356
  --origam-badge__wrapper---display: flex;
352
357
  --origam-badge__wrapper---align-items: stretch;
353
358
  --origam-badge__wrapper---justify-content: start;
@@ -522,6 +527,7 @@
522
527
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
523
528
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
524
529
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
530
+ --origam-snackbar-item---backdrop-filter: none;
525
531
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
526
532
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -756,6 +762,7 @@
756
762
  --origam-sheet---box-sizing: border-box;
757
763
  --origam-sheet---background: var(--origam-color__surface---default);
758
764
  --origam-sheet---color: var(--origam-color__text---primary);
765
+ --origam-sheet---backdrop-filter: none;
759
766
  --origam-sheet---box-shadow: var(--origam-shadow---none);
760
767
  --origam-sheet---border-style: solid;
761
768
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -852,11 +859,15 @@
852
859
  --origam-field---border-opacity-outlined: 0.38;
853
860
  --origam-field---background-color: rgba(0, 0, 0, 0);
854
861
  --origam-field---color: var(--origam-color__text---primary);
862
+ --origam-field---backdrop-filter: none;
855
863
  --origam-field---opacity-disabled: var(--origam-opacity---50);
856
864
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
857
865
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
858
866
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
859
867
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
868
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
869
+ --origam-field---focus-ring-width: 0px;
870
+ --origam-field---focus-ring-offset: 0px;
860
871
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
861
872
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
862
873
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -1047,6 +1058,7 @@
1047
1058
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1048
1059
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-background-color: currentColor;
1061
+ --origam-selection-control__input---backdrop-filter: none;
1050
1062
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1051
1063
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1052
1064
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1274,6 +1286,7 @@
1274
1286
  --origam-overlay__absolute---position: absolute;
1275
1287
  --origam-overlay__contained---scrim-position: absolute;
1276
1288
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1289
+ --origam-overlay-scrim---backdrop-filter: none;
1277
1290
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1278
1291
  --origam-overlay-scrim---pointer-events: auto;
1279
1292
  --origam-overlay-scrim---border-radius: inherit;
@@ -1396,6 +1409,7 @@
1396
1409
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1397
1410
  --origam-menu---background: var(--origam-color__surface---raised);
1398
1411
  --origam-menu---color: var(--origam-color__text---primary);
1412
+ --origam-menu---backdrop-filter: none;
1399
1413
  --origam-menu---border-radius: var(--origam-radius---md);
1400
1414
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1401
1415
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1411,6 +1425,7 @@
1411
1425
  --origam-menu---offset-right: var(--origam-space---0);
1412
1426
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1413
1427
  --origam-tooltip---color: var(--origam-color__text---inverse);
1428
+ --origam-tooltip---backdrop-filter: none;
1414
1429
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1415
1430
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1416
1431
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2198,6 +2213,7 @@
2198
2213
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2199
2214
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2200
2215
  --origam-switch__track---border-width: var(--origam-border__width---0);
2216
+ --origam-switch__track---backdrop-filter: none;
2201
2217
  --origam-switch__thumb---size: 20px;
2202
2218
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2203
2219
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
@@ -2883,6 +2899,7 @@
2883
2899
  --origam-card---z-index: var(--origam-zIndex---base);
2884
2900
  --origam-card---background: var(--origam-color__surface---raised);
2885
2901
  --origam-card---color: var(--origam-color__text---primary);
2902
+ --origam-card---backdrop-filter: none;
2886
2903
  --origam-card---box-shadow: var(--origam-shadow---sm);
2887
2904
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
2888
2905
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -2958,6 +2975,7 @@
2958
2975
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
2959
2976
  --origam-chip---background-color: var(--origam-color__surface---overlay);
2960
2977
  --origam-chip---color: var(--origam-color__text---primary);
2978
+ --origam-chip---backdrop-filter: none;
2961
2979
  --origam-chip---border-color: currentColor;
2962
2980
  --origam-chip---border-style: solid;
2963
2981
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -3103,6 +3121,9 @@
3103
3121
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
3104
3122
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
3105
3123
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
3124
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
3125
+ --origam-avatar-group__item---outline-style: solid;
3126
+ --origam-avatar-group__item---outline-width: 2px;
3106
3127
  --origam-badge__wrapper---display: flex;
3107
3128
  --origam-badge__wrapper---align-items: stretch;
3108
3129
  --origam-badge__wrapper---justify-content: start;
@@ -3277,6 +3298,7 @@
3277
3298
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
3278
3299
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
3279
3300
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
3301
+ --origam-snackbar-item---backdrop-filter: none;
3280
3302
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
3281
3303
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
3282
3304
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -3511,6 +3533,7 @@
3511
3533
  --origam-sheet---box-sizing: border-box;
3512
3534
  --origam-sheet---background: var(--origam-color__surface---default);
3513
3535
  --origam-sheet---color: var(--origam-color__text---primary);
3536
+ --origam-sheet---backdrop-filter: none;
3514
3537
  --origam-sheet---box-shadow: var(--origam-shadow---none);
3515
3538
  --origam-sheet---border-style: solid;
3516
3539
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -3607,11 +3630,15 @@
3607
3630
  --origam-field---border-opacity-outlined: 0.38;
3608
3631
  --origam-field---background-color: rgba(0, 0, 0, 0);
3609
3632
  --origam-field---color: var(--origam-color__text---primary);
3633
+ --origam-field---backdrop-filter: none;
3610
3634
  --origam-field---opacity-disabled: var(--origam-opacity---50);
3611
3635
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
3612
3636
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
3613
3637
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
3614
3638
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
3639
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
3640
+ --origam-field---focus-ring-width: 0px;
3641
+ --origam-field---focus-ring-offset: 0px;
3615
3642
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
3616
3643
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
3617
3644
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -3802,6 +3829,7 @@
3802
3829
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
3803
3830
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
3804
3831
  --origam-selection-control__input---overlay-background-color: currentColor;
3832
+ --origam-selection-control__input---backdrop-filter: none;
3805
3833
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
3806
3834
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
3807
3835
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -4029,6 +4057,7 @@
4029
4057
  --origam-overlay__absolute---position: absolute;
4030
4058
  --origam-overlay__contained---scrim-position: absolute;
4031
4059
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
4060
+ --origam-overlay-scrim---backdrop-filter: none;
4032
4061
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
4033
4062
  --origam-overlay-scrim---pointer-events: auto;
4034
4063
  --origam-overlay-scrim---border-radius: inherit;
@@ -4151,6 +4180,7 @@
4151
4180
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
4152
4181
  --origam-menu---background: var(--origam-color__surface---raised);
4153
4182
  --origam-menu---color: var(--origam-color__text---primary);
4183
+ --origam-menu---backdrop-filter: none;
4154
4184
  --origam-menu---border-radius: var(--origam-radius---md);
4155
4185
  --origam-menu---box-shadow: var(--origam-shadow---lg);
4156
4186
  --origam-menu---max-height: calc(100vh - 32px);
@@ -4166,6 +4196,7 @@
4166
4196
  --origam-menu---offset-right: var(--origam-space---0);
4167
4197
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
4168
4198
  --origam-tooltip---color: var(--origam-color__text---inverse);
4199
+ --origam-tooltip---backdrop-filter: none;
4169
4200
  --origam-tooltip---font-size: var(--origam-font__size---sm);
4170
4201
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
4171
4202
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -4953,6 +4984,7 @@
4953
4984
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
4954
4985
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
4955
4986
  --origam-switch__track---border-width: var(--origam-border__width---0);
4987
+ --origam-switch__track---backdrop-filter: none;
4956
4988
  --origam-switch__thumb---size: 20px;
4957
4989
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
4958
4990
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
package/dist/src/assets/css/tokens/light.css CHANGED
@@ -129,6 +129,7 @@
129
129
  --origam-card---z-index: var(--origam-zIndex---base);
130
130
  --origam-card---background: var(--origam-color__surface---raised);
131
131
  --origam-card---color: var(--origam-color__text---primary);
132
+ --origam-card---backdrop-filter: none;
132
133
  --origam-card---box-shadow: var(--origam-shadow---sm);
133
134
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
134
135
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -204,6 +205,7 @@
204
205
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
205
206
  --origam-chip---background-color: var(--origam-color__surface---overlay);
206
207
  --origam-chip---color: var(--origam-color__text---primary);
208
+ --origam-chip---backdrop-filter: none;
207
209
  --origam-chip---border-color: currentColor;
208
210
  --origam-chip---border-style: solid;
209
211
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -349,6 +351,9 @@
349
351
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
351
353
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
354
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
355
+ --origam-avatar-group__item---outline-style: solid;
356
+ --origam-avatar-group__item---outline-width: 2px;
352
357
  --origam-badge__wrapper---display: flex;
353
358
  --origam-badge__wrapper---align-items: stretch;
354
359
  --origam-badge__wrapper---justify-content: start;
@@ -523,6 +528,7 @@
523
528
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
524
529
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
525
530
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
531
+ --origam-snackbar-item---backdrop-filter: none;
526
532
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
528
534
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -757,6 +763,7 @@
757
763
  --origam-sheet---box-sizing: border-box;
758
764
  --origam-sheet---background: var(--origam-color__surface---default);
759
765
  --origam-sheet---color: var(--origam-color__text---primary);
766
+ --origam-sheet---backdrop-filter: none;
760
767
  --origam-sheet---box-shadow: var(--origam-shadow---none);
761
768
  --origam-sheet---border-style: solid;
762
769
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -853,11 +860,15 @@
853
860
  --origam-field---border-opacity-outlined: 0.38;
854
861
  --origam-field---background-color: rgba(0, 0, 0, 0);
855
862
  --origam-field---color: var(--origam-color__text---primary);
863
+ --origam-field---backdrop-filter: none;
856
864
  --origam-field---opacity-disabled: var(--origam-opacity---50);
857
865
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
858
866
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
859
867
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
860
868
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
869
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
870
+ --origam-field---focus-ring-width: 0px;
871
+ --origam-field---focus-ring-offset: 0px;
861
872
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
862
873
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
863
874
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -1048,6 +1059,7 @@
1048
1059
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1050
1061
  --origam-selection-control__input---overlay-background-color: currentColor;
1062
+ --origam-selection-control__input---backdrop-filter: none;
1051
1063
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1052
1064
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1053
1065
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1275,6 +1287,7 @@
1275
1287
  --origam-overlay__absolute---position: absolute;
1276
1288
  --origam-overlay__contained---scrim-position: absolute;
1277
1289
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1290
+ --origam-overlay-scrim---backdrop-filter: none;
1278
1291
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1279
1292
  --origam-overlay-scrim---pointer-events: auto;
1280
1293
  --origam-overlay-scrim---border-radius: inherit;
@@ -1397,6 +1410,7 @@
1397
1410
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1398
1411
  --origam-menu---background: var(--origam-color__surface---raised);
1399
1412
  --origam-menu---color: var(--origam-color__text---primary);
1413
+ --origam-menu---backdrop-filter: none;
1400
1414
  --origam-menu---border-radius: var(--origam-radius---md);
1401
1415
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1402
1416
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1412,6 +1426,7 @@
1412
1426
  --origam-menu---offset-right: var(--origam-space---0);
1413
1427
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1414
1428
  --origam-tooltip---color: var(--origam-color__text---inverse);
1429
+ --origam-tooltip---backdrop-filter: none;
1415
1430
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1416
1431
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1417
1432
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2199,6 +2214,7 @@
2199
2214
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2200
2215
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2201
2216
  --origam-switch__track---border-width: var(--origam-border__width---0);
2217
+ --origam-switch__track---backdrop-filter: none;
2202
2218
  --origam-switch__thumb---size: 20px;
2203
2219
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2204
2220
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
package/dist/src/assets/scss/tokens/_dark.scss CHANGED
@@ -128,6 +128,7 @@
128
128
  --origam-card---z-index: var(--origam-zIndex---base);
129
129
  --origam-card---background: var(--origam-color__surface---raised);
130
130
  --origam-card---color: var(--origam-color__text---primary);
131
+ --origam-card---backdrop-filter: none;
131
132
  --origam-card---box-shadow: var(--origam-shadow---sm);
132
133
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
133
134
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -203,6 +204,7 @@
203
204
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
204
205
  --origam-chip---background-color: var(--origam-color__surface---overlay);
205
206
  --origam-chip---color: var(--origam-color__text---primary);
207
+ --origam-chip---backdrop-filter: none;
206
208
  --origam-chip---border-color: currentColor;
207
209
  --origam-chip---border-style: solid;
208
210
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -348,6 +350,9 @@
348
350
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
349
351
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
353
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
354
+ --origam-avatar-group__item---outline-style: solid;
355
+ --origam-avatar-group__item---outline-width: 2px;
351
356
  --origam-badge__wrapper---display: flex;
352
357
  --origam-badge__wrapper---align-items: stretch;
353
358
  --origam-badge__wrapper---justify-content: start;
@@ -522,6 +527,7 @@
522
527
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
523
528
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
524
529
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
530
+ --origam-snackbar-item---backdrop-filter: none;
525
531
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
526
532
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -756,6 +762,7 @@
756
762
  --origam-sheet---box-sizing: border-box;
757
763
  --origam-sheet---background: var(--origam-color__surface---default);
758
764
  --origam-sheet---color: var(--origam-color__text---primary);
765
+ --origam-sheet---backdrop-filter: none;
759
766
  --origam-sheet---box-shadow: var(--origam-shadow---none);
760
767
  --origam-sheet---border-style: solid;
761
768
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -852,11 +859,15 @@
852
859
  --origam-field---border-opacity-outlined: 0.38;
853
860
  --origam-field---background-color: rgba(0, 0, 0, 0);
854
861
  --origam-field---color: var(--origam-color__text---primary);
862
+ --origam-field---backdrop-filter: none;
855
863
  --origam-field---opacity-disabled: var(--origam-opacity---50);
856
864
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
857
865
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
858
866
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
859
867
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
868
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
869
+ --origam-field---focus-ring-width: 0px;
870
+ --origam-field---focus-ring-offset: 0px;
860
871
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
861
872
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
862
873
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -1047,6 +1058,7 @@
1047
1058
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1048
1059
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-background-color: currentColor;
1061
+ --origam-selection-control__input---backdrop-filter: none;
1050
1062
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1051
1063
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1052
1064
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1274,6 +1286,7 @@
1274
1286
  --origam-overlay__absolute---position: absolute;
1275
1287
  --origam-overlay__contained---scrim-position: absolute;
1276
1288
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1289
+ --origam-overlay-scrim---backdrop-filter: none;
1277
1290
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1278
1291
  --origam-overlay-scrim---pointer-events: auto;
1279
1292
  --origam-overlay-scrim---border-radius: inherit;
@@ -1396,6 +1409,7 @@
1396
1409
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1397
1410
  --origam-menu---background: var(--origam-color__surface---raised);
1398
1411
  --origam-menu---color: var(--origam-color__text---primary);
1412
+ --origam-menu---backdrop-filter: none;
1399
1413
  --origam-menu---border-radius: var(--origam-radius---md);
1400
1414
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1401
1415
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1411,6 +1425,7 @@
1411
1425
  --origam-menu---offset-right: var(--origam-space---0);
1412
1426
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1413
1427
  --origam-tooltip---color: var(--origam-color__text---inverse);
1428
+ --origam-tooltip---backdrop-filter: none;
1414
1429
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1415
1430
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1416
1431
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2198,6 +2213,7 @@
2198
2213
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2199
2214
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2200
2215
  --origam-switch__track---border-width: var(--origam-border__width---0);
2216
+ --origam-switch__track---backdrop-filter: none;
2201
2217
  --origam-switch__thumb---size: 20px;
2202
2218
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2203
2219
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
package/dist/src/assets/scss/tokens/_light.scss CHANGED
@@ -129,6 +129,7 @@
129
129
  --origam-card---z-index: var(--origam-zIndex---base);
130
130
  --origam-card---background: var(--origam-color__surface---raised);
131
131
  --origam-card---color: var(--origam-color__text---primary);
132
+ --origam-card---backdrop-filter: none;
132
133
  --origam-card---box-shadow: var(--origam-shadow---sm);
133
134
  --origam-card---box-shadow-hover: var(--origam-shadow---lg);
134
135
  --origam-card---box-shadow-elevated: var(--origam-shadow---md);
@@ -204,6 +205,7 @@
204
205
  --origam-card__after---box-shadow: var(--origam-shadow---lg);
205
206
  --origam-chip---background-color: var(--origam-color__surface---overlay);
206
207
  --origam-chip---color: var(--origam-color__text---primary);
208
+ --origam-chip---backdrop-filter: none;
207
209
  --origam-chip---border-color: currentColor;
208
210
  --origam-chip---border-style: solid;
209
211
  --origam-chip---border-width: var(--origam-border__width---0);
@@ -349,6 +351,9 @@
349
351
  --origam-avatar-group__avatar---margin-inline-end: var(--origam-space---0);
350
352
  --origam-avatar-group__avatar---margin-block-start: var(--origam-space---0);
351
353
  --origam-avatar-group__avatar---margin-block-end: var(--origam-space---0);
354
+ --origam-avatar-group__item---outline-color: var(--origam-color__surface---default);
355
+ --origam-avatar-group__item---outline-style: solid;
356
+ --origam-avatar-group__item---outline-width: 2px;
352
357
  --origam-badge__wrapper---display: flex;
353
358
  --origam-badge__wrapper---align-items: stretch;
354
359
  --origam-badge__wrapper---justify-content: start;
@@ -523,6 +528,7 @@
523
528
  --origam-snackbar--info---bg: var(--origam-color__feedback--info---bg);
524
529
  --origam-snackbar--info---fg: var(--origam-color__feedback--info---fg);
525
530
  --origam-snackbar--info---border: var(--origam-color__feedback--info---border);
531
+ --origam-snackbar-item---backdrop-filter: none;
526
532
  --origam-bottom-bar---border-top-width: var(--origam-border__width---0);
527
533
  --origam-bottom-bar---border-left-width: var(--origam-border__width---0);
528
534
  --origam-bottom-bar---border-bottom-width: var(--origam-border__width---0);
@@ -757,6 +763,7 @@
757
763
  --origam-sheet---box-sizing: border-box;
758
764
  --origam-sheet---background: var(--origam-color__surface---default);
759
765
  --origam-sheet---color: var(--origam-color__text---primary);
766
+ --origam-sheet---backdrop-filter: none;
760
767
  --origam-sheet---box-shadow: var(--origam-shadow---none);
761
768
  --origam-sheet---border-style: solid;
762
769
  --origam-sheet---border-color: var(--origam-color__text---primary);
@@ -853,11 +860,15 @@
853
860
  --origam-field---border-opacity-outlined: 0.38;
854
861
  --origam-field---background-color: rgba(0, 0, 0, 0);
855
862
  --origam-field---color: var(--origam-color__text---primary);
863
+ --origam-field---backdrop-filter: none;
856
864
  --origam-field---opacity-disabled: var(--origam-opacity---50);
857
865
  --origam-field---transition-duration: var(--origam-motion__duration---normal);
858
866
  --origam-field---transition-easing: var(--origam-motion__easing---standard);
859
867
  --origam-field--error---border-color: var(--origam-color__feedback--danger---border);
860
868
  --origam-field--error---color: var(--origam-color__feedback--danger---fgSubtle);
869
+ --origam-field---focus-ring-color: rgba(0, 0, 0, 0);
870
+ --origam-field---focus-ring-width: 0px;
871
+ --origam-field---focus-ring-offset: 0px;
861
872
  --origam-field---variant-solo-box-shadow: var(--origam-shadow---sm);
862
873
  --origam-field---variant-outlined-background-color: rgba(0, 0, 0, 0);
863
874
  --origam-field__overlay---background-color: var(--origam-color__overlay---scrim);
@@ -1048,6 +1059,7 @@
1048
1059
  --origam-selection-control__input---overlay-opacity-hover: var(--origam-opacity---12);
1049
1060
  --origam-selection-control__input---overlay-opacity-focus: var(--origam-opacity---12);
1050
1061
  --origam-selection-control__input---overlay-background-color: currentColor;
1062
+ --origam-selection-control__input---backdrop-filter: none;
1051
1063
  --origam-selection-control__icon---opacity: var(--origam-opacity---26);
1052
1064
  --origam-selection-control__icon---opacity-active: var(--origam-opacity---100);
1053
1065
  --origam-selection-control__label---color: var(--origam-color__text---primary);
@@ -1275,6 +1287,7 @@
1275
1287
  --origam-overlay__absolute---position: absolute;
1276
1288
  --origam-overlay__contained---scrim-position: absolute;
1277
1289
  --origam-overlay-scrim---background-color: var(--origam-color__overlay---scrim);
1290
+ --origam-overlay-scrim---backdrop-filter: none;
1278
1291
  --origam-overlay-scrim---opacity: var(--origam-opacity---32);
1279
1292
  --origam-overlay-scrim---pointer-events: auto;
1280
1293
  --origam-overlay-scrim---border-radius: inherit;
@@ -1397,6 +1410,7 @@
1397
1410
  --origam-dialog-confirmation---actions-gap: var(--origam-space---3);
1398
1411
  --origam-menu---background: var(--origam-color__surface---raised);
1399
1412
  --origam-menu---color: var(--origam-color__text---primary);
1413
+ --origam-menu---backdrop-filter: none;
1400
1414
  --origam-menu---border-radius: var(--origam-radius---md);
1401
1415
  --origam-menu---box-shadow: var(--origam-shadow---lg);
1402
1416
  --origam-menu---max-height: calc(100vh - 32px);
@@ -1412,6 +1426,7 @@
1412
1426
  --origam-menu---offset-right: var(--origam-space---0);
1413
1427
  --origam-tooltip---background-color: var(--origam-color__neutral---800);
1414
1428
  --origam-tooltip---color: var(--origam-color__text---inverse);
1429
+ --origam-tooltip---backdrop-filter: none;
1415
1430
  --origam-tooltip---font-size: var(--origam-font__size---sm);
1416
1431
  --origam-tooltip---font-weight: var(--origam-font__weight---medium);
1417
1432
  --origam-tooltip---line-height: var(--origam-font__lineHeight---normal);
@@ -2199,6 +2214,7 @@
2199
2214
  --origam-switch__track---background-color-error: var(--origam-color__feedback--danger---bg);
2200
2215
  --origam-switch__track---border-color: rgba(0, 0, 0, 0);
2201
2216
  --origam-switch__track---border-width: var(--origam-border__width---0);
2217
+ --origam-switch__track---backdrop-filter: none;
2202
2218
  --origam-switch__thumb---size: 20px;
2203
2219
  --origam-switch__thumb---background-color: var(--origam-color__surface---default);
2204
2220
  --origam-switch__thumb---background-color-checked: var(--origam-color__surface---default);
package/dist/src/components/Alert/OrigamAlert.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <component
3
- :is="tag"
3
+ :is="props.tag"
4
4
  :id="id"
5
5
  v-contrast
6
6
  :class="alertClasses"
@@ -118,6 +118,7 @@ import { vContrast } from "../../directives";
118
118
  import {
119
119
  useActive,
120
120
  useAdjacent,
121
+ useDefaults,
121
122
  useDensity,
122
123
  useDimension,
123
124
  useHover,
@@ -131,7 +132,7 @@ import {
131
132
  useTypography
132
133
  } from "../../composables";
133
134
  import { DENSITY, MDI_ICONS } from "../../enums";
134
- const props = defineProps({
135
+ const _props = defineProps({
135
136
  closable: { type: Boolean, required: false },
136
137
  closeIcon: { type: null, required: false, default: MDI_ICONS.CLOSE },
137
138
  closeLabel: { type: String, required: false, default: "origam.close" },
@@ -204,6 +205,7 @@ const props = defineProps({
204
205
  lineHeight: { type: String, required: false },
205
206
  letterSpacing: { type: String, required: false }
206
207
  });
208
+ const props = useDefaults(_props);
207
209
  const emits = defineEmits(["update:modelValue", "click:close", "update:hover"]);
208
210
  const { filterProps } = useProps(props);
209
211
  const { t } = useLocale();
package/dist/src/components/Avatar/OrigamAvatarGroup.vue CHANGED
@@ -49,9 +49,10 @@
49
49
 
50
50
  <script lang="ts" setup>
51
51
  import { OrigamAvatar, OrigamDefaultsProvider } from "../../components";
52
- import { useActive, useDensity, useHover, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
52
+ import { useActive, useDensity, useHover, usePassedProps, useProps, useRtl, useStateEffect, useStyle } from "../../composables";
53
53
  import { vClickOutside } from "../../directives";
54
54
  import { DIRECTION } from "../../enums";
55
+ import { omitUndefined } from "../../utils";
55
56
  import { computed, mergeProps, ref } from "vue";
56
57
  const props = defineProps({
57
58
  items: { type: Array, required: false, default: () => [] },
@@ -104,18 +105,19 @@ const props = defineProps({
104
105
  active: { type: [Boolean, Object], required: false },
105
106
  activeClass: { type: String, required: false }
106
107
  });
108
+ const wasPropPassed = usePassedProps(props);
107
109
  const slotDefaults = computed(() => ({
108
- "origam-avatar": {
109
- density: props.density,
110
- size: props.size,
111
- color: props.color,
112
- bgColor: props.bgColor,
113
- rounded: props.rounded,
114
- elevation: props.elevation,
115
- border: props.border,
116
- borderColor: props.borderColor,
117
- borderStyle: props.borderStyle
118
- }
110
+ "origam-avatar": omitUndefined({
111
+ density: wasPropPassed("density") ? props.density : void 0,
112
+ size: wasPropPassed("size") ? props.size : void 0,
113
+ color: wasPropPassed("color") ? props.color : void 0,
114
+ bgColor: wasPropPassed("bgColor") ? props.bgColor : void 0,
115
+ rounded: wasPropPassed("rounded") ? props.rounded : void 0,
116
+ elevation: wasPropPassed("elevation") ? props.elevation : void 0,
117
+ border: wasPropPassed("border") ? props.border : void 0,
118
+ borderColor: wasPropPassed("borderColor") ? props.borderColor : void 0,
119
+ borderStyle: wasPropPassed("borderStyle") ? props.borderStyle : void 0
120
+ })
119
121
  }));
120
122
  defineEmits(["update:active", "update:hover"]);
121
123
  const { filterProps } = useProps(props);
@@ -246,6 +248,23 @@ defineExpose({
246
248
  margin-inline-end: var(--origam-avatar-group__item---margin-inline-end);
247
249
  }
248
250
 
251
+ // Separation ring — a STRUCTURAL concern of the group (overlapping
252
+ // avatars need a visible seam to stay legible), orthogonal to each
253
+ // avatar's own themed `box-shadow` (elevation / cartoon hard-shadow
254
+ // signature / …). `outline` is used on purpose instead of layering
255
+ // a second `box-shadow`: it is a distinct CSS property, so it can
256
+ // never collide with, or need to be comma-combined with, the
257
+ // avatar's own `--origam-avatar---box-shadow` — the two coexist
258
+ // without any specificity/ordering trick. Applies to every stacked
259
+ // avatar (`__item`) AND the "+N" overflow chip (`__rest`), since
260
+ // both participate in the same overlapping stack — see #263.
261
+ &__item,
262
+ &__rest {
263
+ outline-color: var(--origam-avatar-group__item---outline-color);
264
+ outline-style: var(--origam-avatar-group__item---outline-style);
265
+ outline-width: var(--origam-avatar-group__item---outline-width);
266
+ }
267
+
249
268
  &--expand-on-hover,
250
269
  &--expand-on-click {
251
270
  #{$this}__item:not(:first-child),
package/dist/src/components/Btn/OrigamBtn.vue CHANGED
@@ -649,10 +649,19 @@ defineExpose({
649
649
  // tokens, so it follows color/intent and theme), while the resting
650
650
  // siblings stay outlined. This is what makes a btn-toggle read as
651
651
  // a row of real buttons rather than a flat segmented strip.
652
+ //
653
+ // `-background-color-active` is a DEDICATED token, separate from
654
+ // the plain `-background-color` one: a theme is free to keep
655
+ // outlined buttons unfilled at rest (background-color:
656
+ // transparent, e.g. a print/minimalist identity) without also
657
+ // erasing the active/selected indicator — the two states are
658
+ // no longer forced to share one token. Themes that don't
659
+ // declare it fall straight through to the existing behaviour
660
+ // (their own `-background-color`), so this is additive only.
652
661
  &#{$this}--active {
653
- background-color: var(--origam-btn---background-color) !important;
662
+ background-color: var(--origam-btn---background-color-active, var(--origam-btn---background-color)) !important;
654
663
  color: var(--origam-btn---color);
655
- border-color: var(--origam-btn---background-color);
664
+ border-color: var(--origam-btn---background-color-active, var(--origam-btn---background-color));
656
665
  }
657
666
  }
658
667