@empathyco/x-components 6.0.0-alpha.57 → 6.0.0-alpha.59

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 (14) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/design-system/deprecated-full-theme.css +267 -266
  3. package/docs/API-reference/api/x-components.baseswitch.md +1 -1
  4. package/js/components/base-switch.vue.js.map +1 -1
  5. package/js/components/base-switch.vue2.js +3 -7
  6. package/js/components/base-switch.vue2.js.map +1 -1
  7. package/js/x-modules/related-prompts/components/related-prompt.vue.js +4 -3
  8. package/js/x-modules/related-prompts/components/related-prompt.vue.js.map +1 -1
  9. package/js/x-modules/related-prompts/components/related-prompt.vue2.js.map +1 -1
  10. package/package.json +2 -2
  11. package/report/x-components.api.json +7 -16
  12. package/report/x-components.api.md +1 -1
  13. package/types/components/base-switch.vue.d.ts +2 -1
  14. package/types/components/base-switch.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [6.0.0-alpha.59](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.58...@empathyco/x-components@6.0.0-alpha.59) (2025-04-07)
7
+
8
+
9
+ ### Styling
10
+
11
+ * **related-prompt:** align text left (#1736) ([c0d8544](https://github.com/empathyco/x/commit/c0d85447ee74dd27e66d42e3f023d42609468495))
12
+
13
+
14
+
15
+ ## [6.0.0-alpha.58](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.57...@empathyco/x-components@6.0.0-alpha.58) (2025-04-02)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * base-switch classes are not reacting to external changes to modelValue (#1735) ([578310a](https://github.com/empathyco/x/commit/578310ad82faf99b3667ce6a1a43995f34b10eca))
21
+
22
+
23
+
6
24
  ## [6.0.0-alpha.57](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.56...@empathyco/x-components@6.0.0-alpha.57) (2025-04-02)
7
25
 
8
26
 
package/design-system/deprecated-full-theme.css CHANGED
@@ -1,4 +1,19 @@
1
1
 
2
+ .x-uppercase {
3
+ text-transform: uppercase;
4
+ }
5
+
6
+ .x-lowercase {
7
+ text-transform: lowercase;
8
+ }
9
+
10
+ .x-capitalize {
11
+ text-transform: capitalize;
12
+ }
13
+
14
+ .x-normal-case {
15
+ text-transform: none;
16
+ }
2
17
  .x-underline {
3
18
  -webkit-text-decoration-line: underline;
4
19
  text-decoration-line: underline;
@@ -37,6 +52,7 @@
37
52
  .x-sticky {
38
53
  position: sticky !important;
39
54
  }
55
+
40
56
  .x-padding--00 {
41
57
  padding: 0 !important;
42
58
  }
@@ -940,21 +956,6 @@
940
956
  [dir="rtl"] .x-margin--left-20 {
941
957
  margin-right: var(--x-size-base-20) !important;
942
958
  }
943
- .x-uppercase {
944
- text-transform: uppercase;
945
- }
946
-
947
- .x-lowercase {
948
- text-transform: lowercase;
949
- }
950
-
951
- .x-capitalize {
952
- text-transform: capitalize;
953
- }
954
-
955
- .x-normal-case {
956
- text-transform: none;
957
- }
958
959
  .x-line-height--none {
959
960
  line-height: 1 !important;
960
961
  }
@@ -3273,49 +3274,6 @@
3273
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3274
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3275
3276
  }
3276
- .x-background--lead {
3277
- background-color: var(--x-color-base-lead) !important;
3278
- }
3279
-
3280
- .x-background--auxiliary {
3281
- background-color: var(--x-color-base-auxiliary) !important;
3282
- }
3283
-
3284
- .x-background--neutral-10 {
3285
- background-color: var(--x-color-base-neutral-10) !important;
3286
- }
3287
-
3288
- .x-background--neutral-35 {
3289
- background-color: var(--x-color-base-neutral-35) !important;
3290
- }
3291
-
3292
- .x-background--neutral-70 {
3293
- background-color: var(--x-color-base-neutral-70) !important;
3294
- }
3295
-
3296
- .x-background--neutral-95 {
3297
- background-color: var(--x-color-base-neutral-95) !important;
3298
- }
3299
-
3300
- .x-background--neutral-100 {
3301
- background-color: var(--x-color-base-neutral-100) !important;
3302
- }
3303
-
3304
- .x-background--accent {
3305
- background-color: var(--x-color-base-accent) !important;
3306
- }
3307
-
3308
- .x-background--enable {
3309
- background-color: var(--x-color-base-enable) !important;
3310
- }
3311
-
3312
- .x-background--disable {
3313
- background-color: var(--x-color-base-disable) !important;
3314
- }
3315
-
3316
- .x-background--transparent {
3317
- background-color: var(--x-color-base-transparent) !important;
3318
- }
3319
3277
  .x-border-color--lead {
3320
3278
  border-color: var(--x-color-base-lead) !important;
3321
3279
  }
@@ -3374,26 +3332,54 @@
3374
3332
  .x-text--stroke.x-small {
3375
3333
  --x-string-text-decoration-small: line-through;
3376
3334
  }
3377
- :root {
3378
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3335
+ .x-background--lead {
3336
+ background-color: var(--x-color-base-lead) !important;
3379
3337
  }
3380
- .x-text--secondary {
3381
- --x-color-text-default: var(--x-color-text-secondary);
3338
+
3339
+ .x-background--auxiliary {
3340
+ background-color: var(--x-color-base-auxiliary) !important;
3382
3341
  }
3383
- .x-text--light.x-text {
3384
- --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3342
+
3343
+ .x-background--neutral-10 {
3344
+ background-color: var(--x-color-base-neutral-10) !important;
3385
3345
  }
3386
- .x-text--light.x-title1 {
3387
- --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3346
+
3347
+ .x-background--neutral-35 {
3348
+ background-color: var(--x-color-base-neutral-35) !important;
3388
3349
  }
3389
- .x-text--light.x-title2 {
3390
- --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3350
+
3351
+ .x-background--neutral-70 {
3352
+ background-color: var(--x-color-base-neutral-70) !important;
3391
3353
  }
3392
- .x-text--light.x-title3 {
3393
- --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3354
+
3355
+ .x-background--neutral-95 {
3356
+ background-color: var(--x-color-base-neutral-95) !important;
3394
3357
  }
3395
- .x-text--light.x-small {
3396
- --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3358
+
3359
+ .x-background--neutral-100 {
3360
+ background-color: var(--x-color-base-neutral-100) !important;
3361
+ }
3362
+
3363
+ .x-background--accent {
3364
+ background-color: var(--x-color-base-accent) !important;
3365
+ }
3366
+
3367
+ .x-background--enable {
3368
+ background-color: var(--x-color-base-enable) !important;
3369
+ }
3370
+
3371
+ .x-background--disable {
3372
+ background-color: var(--x-color-base-disable) !important;
3373
+ }
3374
+
3375
+ .x-background--transparent {
3376
+ background-color: var(--x-color-base-transparent) !important;
3377
+ }
3378
+ :root {
3379
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
+ }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3397
3383
  }
3398
3384
  :root {
3399
3385
  --x-font-family-base: "Montserrat", sans-serif;
@@ -3435,6 +3421,21 @@
3435
3421
  --x-size-line-height-small: var(--x-size-line-height-base-s);
3436
3422
  --x-string-text-decoration-small: none;
3437
3423
  }
3424
+ .x-text--light.x-text {
3425
+ --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3426
+ }
3427
+ .x-text--light.x-title1 {
3428
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3429
+ }
3430
+ .x-text--light.x-title2 {
3431
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3432
+ }
3433
+ .x-text--light.x-title3 {
3434
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3435
+ }
3436
+ .x-text--light.x-small {
3437
+ --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3438
+ }
3438
3439
  :root {
3439
3440
  --x-font-family-base: "Montserrat", sans-serif;
3440
3441
  --x-size-font-base-xs: 12px;
@@ -3899,24 +3900,6 @@
3899
3900
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3900
3901
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3901
3902
  }
3902
- :root {
3903
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3904
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3905
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3906
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3907
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3908
- }
3909
-
3910
- .x-tag--card.x-tag,
3911
- .x-tag--card .x-tag {
3912
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3913
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3914
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3915
- --x-size-border-radius-bottom-right-tag-default: var(
3916
- --x-size-border-radius-bottom-right-tag-card
3917
- );
3918
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3919
- }
3920
3903
  :root {
3921
3904
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3922
3905
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -3958,6 +3941,24 @@
3958
3941
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3959
3942
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3960
3943
  }
3944
+ :root {
3945
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3946
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3947
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3948
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3949
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3950
+ }
3951
+
3952
+ .x-tag--card.x-tag,
3953
+ .x-tag--card .x-tag {
3954
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3955
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3956
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3957
+ --x-size-border-radius-bottom-right-tag-default: var(
3958
+ --x-size-border-radius-bottom-right-tag-card
3959
+ );
3960
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3961
+ }
3961
3962
  :root {
3962
3963
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3963
3964
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -4499,14 +4500,6 @@
4499
4500
  --x-size-padding-row-05: var(--x-size-base-05);
4500
4501
  --x-size-padding-row-06: var(--x-size-base-06);
4501
4502
  }
4502
- /* @deprecated */
4503
- :root {
4504
- --x-size-padding-row-02: var(--x-size-base-02);
4505
- --x-size-padding-row-03: var(--x-size-base-03);
4506
- --x-size-padding-row-04: var(--x-size-base-04);
4507
- --x-size-padding-row-05: var(--x-size-base-05);
4508
- --x-size-padding-row-06: var(--x-size-base-06);
4509
- }
4510
4503
 
4511
4504
  /* @deprecated */
4512
4505
  .x-row--padding-02 {
@@ -4528,6 +4521,14 @@
4528
4521
  .x-row--padding-06 {
4529
4522
  --x-size-padding-row: var(--x-size-padding-row-06);
4530
4523
  }
4524
+ /* @deprecated */
4525
+ :root {
4526
+ --x-size-padding-row-02: var(--x-size-base-02);
4527
+ --x-size-padding-row-03: var(--x-size-base-03);
4528
+ --x-size-padding-row-04: var(--x-size-base-04);
4529
+ --x-size-padding-row-05: var(--x-size-base-05);
4530
+ --x-size-padding-row-06: var(--x-size-base-06);
4531
+ }
4531
4532
  :root {
4532
4533
  --x-size-gap-row-01: var(--x-size-base-01);
4533
4534
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -5050,6 +5051,13 @@
5050
5051
  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5051
5052
  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5052
5053
  }
5054
+ :root {
5055
+ --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5056
+ --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5057
+ --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5058
+ --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5059
+ --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5060
+ }
5053
5061
  :root {
5054
5062
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5055
5063
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5076,6 +5084,14 @@
5076
5084
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5077
5085
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5078
5086
  }
5087
+
5088
+ .x-picture--card.x-picture {
5089
+ --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5090
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5091
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5092
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5093
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5094
+ }
5079
5095
  :root {
5080
5096
  --x-color-background-option-list-button-default: transparent;
5081
5097
  --x-color-border-option-list-button-default: transparent;
@@ -5156,21 +5172,6 @@
5156
5172
  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5157
5173
  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5158
5174
  }
5159
- :root {
5160
- --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5161
- --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
5162
- --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
5163
- --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5164
- --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5165
- }
5166
-
5167
- .x-picture--card.x-picture {
5168
- --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
5169
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
5170
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
5171
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
5172
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
5173
- }
5174
5175
  :root {
5175
5176
  --x-color-background-option-list-button-default: transparent;
5176
5177
  --x-color-border-option-list-button-default: transparent;
@@ -5543,6 +5544,15 @@
5543
5544
  --x-modal-overlay-color: rgb(0, 0, 0);
5544
5545
  --x-modal-overlay-opacity: 0.7;
5545
5546
  }
5547
+ :root {
5548
+ --x-modal-overlay-color: rgb(0, 0, 0);
5549
+ --x-modal-overlay-opacity: 0.7;
5550
+ }
5551
+
5552
+ .x-modal__overlay {
5553
+ background-color: var(--x-modal-overlay-color) !important;
5554
+ opacity: var(--x-modal-overlay-opacity) !important;
5555
+ }
5546
5556
  :root {
5547
5557
  --x-string-justify-message-default: center;
5548
5558
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5564,15 +5574,6 @@
5564
5574
  --x-size-font-message-default: var(--x-size-font-title3);
5565
5575
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5566
5576
  }
5567
- :root {
5568
- --x-modal-overlay-color: rgb(0, 0, 0);
5569
- --x-modal-overlay-opacity: 0.7;
5570
- }
5571
-
5572
- .x-modal__overlay {
5573
- background-color: var(--x-modal-overlay-color) !important;
5574
- opacity: var(--x-modal-overlay-opacity) !important;
5575
- }
5576
5577
  :root {
5577
5578
  --x-string-justify-message-default: center;
5578
5579
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -6744,15 +6745,6 @@
6744
6745
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6745
6746
  --x-size-border-width-left-input-group-line: 0;
6746
6747
  }
6747
- :root {
6748
- --x-size-padding-left-input-group-line: 0;
6749
- --x-size-padding-right-input-group-line: 0;
6750
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6751
- --x-size-border-width-top-input-group-line: 0;
6752
- --x-size-border-width-right-input-group-line: 0;
6753
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6754
- --x-size-border-width-left-input-group-line: 0;
6755
- }
6756
6748
 
6757
6749
  .x-input-group--line .x-input-group,
6758
6750
  .x-input-group--line.x-input-group {
@@ -6792,8 +6784,60 @@
6792
6784
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6793
6785
  }
6794
6786
  :root {
6795
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6796
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6787
+ --x-size-padding-left-input-group-line: 0;
6788
+ --x-size-padding-right-input-group-line: 0;
6789
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6790
+ --x-size-border-width-top-input-group-line: 0;
6791
+ --x-size-border-width-right-input-group-line: 0;
6792
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6793
+ --x-size-border-width-left-input-group-line: 0;
6794
+ }
6795
+ :root {
6796
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6797
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6798
+ --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6799
+ --x-color-text-input-group-default: var(--x-color-text-input-default);
6800
+ --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6801
+ --x-size-height-input-group-default: var(--x-size-height-input-default);
6802
+ --x-size-gap-input-group-default: var(--x-size-base-03);
6803
+ --x-size-padding-left-input-group-default: var(--x-size-base-06);
6804
+ --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6805
+ --x-size-padding-input-group-default-action: var(--x-size-base-03);
6806
+ --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6807
+ --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6808
+ --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6809
+ --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6810
+ --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6811
+ --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6812
+ --x-size-border-radius-top-left-input-group-default: var(
6813
+ --x-size-border-radius-input-group-default
6814
+ );
6815
+ --x-size-border-radius-top-right-input-group-default: var(
6816
+ --x-size-border-radius-input-group-default
6817
+ );
6818
+ --x-size-border-radius-bottom-right-input-group-default: var(
6819
+ --x-size-border-radius-input-group-default
6820
+ );
6821
+ --x-size-border-radius-bottom-left-input-group-default: var(
6822
+ --x-size-border-radius-input-group-default
6823
+ );
6824
+ --x-font-family-input-group-default: var(--x-font-family-input-default);
6825
+ --x-size-font-input-group-default: var(--x-size-font-input-default);
6826
+ --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
6827
+ --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
6828
+ --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
6829
+ --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
6830
+ --x-size-line-height-input-group-placeholder-default: var(
6831
+ --x-size-line-height-input-group-default
6832
+ );
6833
+ --x-number-font-weight-input-group-placeholder-default: var(
6834
+ --x-number-font-weight-input-group-default
6835
+ );
6836
+ --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
6837
+ }
6838
+ :root {
6839
+ --x-color-background-input-group-default: var(--x-color-background-input-default);
6840
+ --x-color-border-input-group-default: var(--x-color-border-input-default);
6797
6841
  --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6798
6842
  --x-color-text-input-group-default: var(--x-color-text-input-default);
6799
6843
  --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
@@ -6968,49 +7012,6 @@
6968
7012
  [dir="rtl"] .x-input-group > .x-input-group__action:last-child {
6969
7013
  margin-left: calc(var(--x-size-border-width-right-input-group-default) * -1);
6970
7014
  }
6971
- :root {
6972
- --x-color-background-input-group-default: var(--x-color-background-input-default);
6973
- --x-color-border-input-group-default: var(--x-color-border-input-default);
6974
- --x-color-border-input-group-default-focus: var(--x-color-border-input-default-focus);
6975
- --x-color-text-input-group-default: var(--x-color-text-input-default);
6976
- --x-color-text-input-group-placeholder-default: var(--x-color-text-input-placeholder-default);
6977
- --x-size-height-input-group-default: var(--x-size-height-input-default);
6978
- --x-size-gap-input-group-default: var(--x-size-base-03);
6979
- --x-size-padding-left-input-group-default: var(--x-size-base-06);
6980
- --x-size-padding-right-input-group-default: var(--x-size-padding-left-input-group-default);
6981
- --x-size-padding-input-group-default-action: var(--x-size-base-03);
6982
- --x-size-border-width-input-group-default: var(--x-size-border-width-input-default);
6983
- --x-size-border-width-top-input-group-default: var(--x-size-border-width-input-group-default);
6984
- --x-size-border-width-right-input-group-default: var(--x-size-border-width-input-group-default);
6985
- --x-size-border-width-bottom-input-group-default: var(--x-size-border-width-input-group-default);
6986
- --x-size-border-width-left-input-group-default: var(--x-size-border-width-input-group-default);
6987
- --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-default);
6988
- --x-size-border-radius-top-left-input-group-default: var(
6989
- --x-size-border-radius-input-group-default
6990
- );
6991
- --x-size-border-radius-top-right-input-group-default: var(
6992
- --x-size-border-radius-input-group-default
6993
- );
6994
- --x-size-border-radius-bottom-right-input-group-default: var(
6995
- --x-size-border-radius-input-group-default
6996
- );
6997
- --x-size-border-radius-bottom-left-input-group-default: var(
6998
- --x-size-border-radius-input-group-default
6999
- );
7000
- --x-font-family-input-group-default: var(--x-font-family-input-default);
7001
- --x-size-font-input-group-default: var(--x-size-font-input-default);
7002
- --x-size-line-height-input-group-default: var(--x-size-line-height-input-default);
7003
- --x-number-font-weight-input-group-default: var(--x-number-font-weight-input-default);
7004
- --x-font-family-input-group-placeholder-default: var(--x-font-family-input-group-default);
7005
- --x-size-font-input-group-placeholder-default: var(--x-size-font-input-group-default);
7006
- --x-size-line-height-input-group-placeholder-default: var(
7007
- --x-size-line-height-input-group-default
7008
- );
7009
- --x-number-font-weight-input-group-placeholder-default: var(
7010
- --x-number-font-weight-input-group-default
7011
- );
7012
- --x-number-font-weight-input-group-default-button: var(--x-number-font-weight-base-light);
7013
- }
7014
7015
  :root {
7015
7016
  --x-size-border-radius-input-group-card: var(--x-size-border-radius-base-s);
7016
7017
  --x-size-border-radius-top-left-input-group-card: var(--x-size-border-radius-input-group-card);
@@ -7304,18 +7305,18 @@
7304
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7305
7306
  --x-size-height-icon-m: var(--x-size-base-05);
7306
7307
  }
7307
-
7308
- .x-icon--m {
7309
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7310
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7308
+ :root {
7309
+ --x-size-width-icon-l: var(--x-size-base-06);
7310
+ --x-size-height-icon-l: var(--x-size-base-06);
7311
7311
  }
7312
7312
  :root {
7313
7313
  --x-size-width-icon-m: var(--x-size-base-05);
7314
7314
  --x-size-height-icon-m: var(--x-size-base-05);
7315
7315
  }
7316
- :root {
7317
- --x-size-width-icon-l: var(--x-size-base-06);
7318
- --x-size-height-icon-l: var(--x-size-base-06);
7316
+
7317
+ .x-icon--m {
7318
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7319
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7319
7320
  }
7320
7321
  :root {
7321
7322
  --x-size-width-icon-l: var(--x-size-base-06);
@@ -7635,6 +7636,14 @@
7635
7636
  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7636
7637
  --x-size-border-width-left-facet-header-line: 0;
7637
7638
  }
7639
+ :root {
7640
+ --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
7641
+ --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
7642
+ --x-size-border-width-top-facet-header-line: 0;
7643
+ --x-size-border-width-right-facet-header-line: 0;
7644
+ --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
7645
+ --x-size-border-width-left-facet-header-line: 0;
7646
+ }
7638
7647
 
7639
7648
  .x-facet--line.x-facet,
7640
7649
  .x-facet--line .x-facet {
@@ -7823,6 +7832,18 @@
7823
7832
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7824
7833
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7825
7834
  }
7835
+ :root {
7836
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7837
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7838
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7839
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7840
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7841
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7842
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7843
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7844
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7845
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7846
+ }
7826
7847
 
7827
7848
  .x-facet--card.x-facet,
7828
7849
  .x-facet--card .x-facet {
@@ -7837,18 +7858,6 @@
7837
7858
  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-card);
7838
7859
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7839
7860
  }
7840
- :root {
7841
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7842
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7843
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7844
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7845
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7846
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7847
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7848
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7849
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7850
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7851
- }
7852
7861
  :root {
7853
7862
  --x-size-width-dropdown-xl: 282px;
7854
7863
  }
@@ -7923,13 +7932,13 @@
7923
7932
  :root {
7924
7933
  --x-size-width-dropdown-m: 130px;
7925
7934
  }
7926
- :root {
7927
- --x-size-width-dropdown-m: 130px;
7928
- }
7929
7935
 
7930
7936
  .x-dropdown.x-dropdown--m {
7931
7937
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7932
7938
  }
7939
+ :root {
7940
+ --x-size-width-dropdown-m: 130px;
7941
+ }
7933
7942
  :root {
7934
7943
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7935
7944
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -7954,6 +7963,9 @@
7954
7963
  --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7955
7964
  --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7956
7965
  }
7966
+ :root {
7967
+ --x-size-width-dropdown-l: 202px;
7968
+ }
7957
7969
  :root {
7958
7970
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7959
7971
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8017,16 +8029,6 @@
8017
8029
  --x-size-border-width-left-dropdown-list-line
8018
8030
  );
8019
8031
  }
8020
- :root {
8021
- --x-size-width-dropdown-l: 202px;
8022
- }
8023
- :root {
8024
- --x-size-width-dropdown-l: 202px;
8025
- }
8026
-
8027
- .x-dropdown.x-dropdown--l {
8028
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8029
- }
8030
8032
  :root {
8031
8033
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8032
8034
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8100,6 +8102,13 @@
8100
8102
  --x-string-overflow-dropdown-toggle-default: hidden;
8101
8103
  --x-string-overflow-dropdown-list-default: hidden;
8102
8104
  }
8105
+ :root {
8106
+ --x-size-width-dropdown-l: 202px;
8107
+ }
8108
+
8109
+ .x-dropdown.x-dropdown--l {
8110
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8111
+ }
8103
8112
  :root {
8104
8113
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8105
8114
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8467,16 +8476,6 @@
8467
8476
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8468
8477
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8469
8478
  }
8470
- :root {
8471
- --x-color-background-button-primary: var(--x-color-background-button-default);
8472
- --x-color-border-button-primary: var(--x-color-border-button-default);
8473
- --x-color-text-button-primary: var(--x-color-text-button-default);
8474
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8475
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8476
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8477
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8478
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8479
- }
8480
8479
  :root {
8481
8480
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8482
8481
  --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
@@ -8512,6 +8511,16 @@
8512
8511
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8513
8512
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8514
8513
  }
8514
+ :root {
8515
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8516
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8517
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8518
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8519
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8520
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8521
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8522
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8523
+ }
8515
8524
 
8516
8525
  .x-button--primary.x-button,
8517
8526
  .x-button--primary .x-button {
@@ -8530,13 +8539,6 @@
8530
8539
  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8531
8540
  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8532
8541
  }
8533
- :root {
8534
- --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8535
- --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8536
- --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8537
- --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8538
- --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8539
- }
8540
8542
 
8541
8543
  .x-button--pill.x-button,
8542
8544
  .x-button--pill .x-button {
@@ -8552,6 +8554,13 @@
8552
8554
  --x-size-border-radius-bottom-left-button-pill
8553
8555
  );
8554
8556
  }
8557
+ :root {
8558
+ --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8559
+ --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
8560
+ --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
8561
+ --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
8562
+ --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
8563
+ }
8555
8564
  :root {
8556
8565
  --x-color-background-button-ghost: transparent;
8557
8566
  --x-color-border-button-ghost: transparent;
@@ -8694,16 +8703,6 @@
8694
8703
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8695
8704
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8696
8705
  }
8697
- :root {
8698
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8699
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8700
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8701
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8702
- --x-size-border-width-badge-default: 0;
8703
- --x-size-width-badge-default: 1.5em;
8704
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8705
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8706
- }
8707
8706
  :root {
8708
8707
  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8709
8708
  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8736,6 +8735,38 @@
8736
8735
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8737
8736
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8738
8737
  }
8738
+ :root {
8739
+ --x-size-base-01: 2px;
8740
+ --x-size-base-02: 4px;
8741
+ --x-size-base-03: 8px;
8742
+ --x-size-base-04: 12px;
8743
+ --x-size-base-05: 16px;
8744
+ --x-size-base-06: 24px;
8745
+ --x-size-base-07: 32px;
8746
+ --x-size-base-08: 40px;
8747
+ --x-size-base-09: 48px;
8748
+ --x-size-base-10: 56px;
8749
+ --x-size-base-11: 64px;
8750
+ --x-size-base-12: 80px;
8751
+ --x-size-base-13: 80px;
8752
+ --x-size-base-14: 96px;
8753
+ --x-size-base-15: 128px;
8754
+ --x-size-base-16: 152px;
8755
+ --x-size-base-17: 184px;
8756
+ --x-size-base-18: 216px;
8757
+ --x-size-base-19: 280px;
8758
+ --x-size-base-20: 344px;
8759
+ }
8760
+ :root {
8761
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8762
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8763
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8764
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8765
+ --x-size-border-width-badge-default: 0;
8766
+ --x-size-width-badge-default: 1.5em;
8767
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8768
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8769
+ }
8739
8770
 
8740
8771
  [dir="ltr"] .x-badge {
8741
8772
  right: calc(var(--x-size-width-badge-default) / 4);
@@ -8775,28 +8806,6 @@
8775
8806
  .x-badge-container {
8776
8807
  position: relative;
8777
8808
  }
8778
- :root {
8779
- --x-size-base-01: 2px;
8780
- --x-size-base-02: 4px;
8781
- --x-size-base-03: 8px;
8782
- --x-size-base-04: 12px;
8783
- --x-size-base-05: 16px;
8784
- --x-size-base-06: 24px;
8785
- --x-size-base-07: 32px;
8786
- --x-size-base-08: 40px;
8787
- --x-size-base-09: 48px;
8788
- --x-size-base-10: 56px;
8789
- --x-size-base-11: 64px;
8790
- --x-size-base-12: 80px;
8791
- --x-size-base-13: 80px;
8792
- --x-size-base-14: 96px;
8793
- --x-size-base-15: 128px;
8794
- --x-size-base-16: 152px;
8795
- --x-size-base-17: 184px;
8796
- --x-size-base-18: 216px;
8797
- --x-size-base-19: 280px;
8798
- --x-size-base-20: 344px;
8799
- }
8800
8809
  :root {
8801
8810
  --x-color-base-lead: #243d48;
8802
8811
  --x-color-base-auxiliary: #bfe1ec;
@@ -8816,12 +8825,4 @@
8816
8825
  --x-size-border-radius-base-m: var(--x-size-base-06);
8817
8826
  --x-size-border-radius-base-pill: 99999px;
8818
8827
  --x-size-border-width-base: 1px;
8819
- }
8820
- :root {
8821
- --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
8822
- --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
8823
- --x-size-border-width-top-facet-header-line: 0;
8824
- --x-size-border-width-right-facet-header-line: 0;
8825
- --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
8826
- --x-size-border-width-left-facet-header-line: 0;
8827
- }
8828
+ }
package/docs/API-reference/api/x-components.baseswitch.md CHANGED
@@ -15,7 +15,7 @@ _default: import("vue").DefineComponent<{
15
15
  default: boolean;
16
16
  };
17
17
  }, {
18
- cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
18
+ cssClasses: import("vue").ComputedRef<VueCSSClasses>;
19
19
  toggle: () => void;
20
20
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
21
21
  modelValue: {
package/js/components/base-switch.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, ref } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n\n /**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\n export default defineComponent({\n name: 'BaseSwitch',\n /**\n * The selected value of the switch.\n *\n * @public\n */\n props: {\n modelValue: {\n type: Boolean,\n default: false\n }\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /**\n * Dynamic CSS classes to add to the switch component\n * depending on its internal state.\n *\n * @returns A boolean dictionary with dynamic CSS classes.\n * @internal\n */\n const cssClasses = ref<VueCSSClasses>({\n 'x-switch--is-selected x-selected': props.modelValue\n });\n\n /**\n * Emits an event with the new value of the switch.\n *\n * @internal\n */\n const toggle = (): void => {\n const newValue = !props.modelValue;\n cssClasses.value = {\n 'x-switch--is-selected': newValue,\n 'x-selected': newValue\n };\n\n emit('update:modelValue', newValue);\n };\n\n return {\n cssClasses,\n toggle\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-switch {\n --x-switch-height: 16px;\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: #b3b3b3;\n --x-switch-padding: 2px;\n --x-switch-handle-size: var(--x-switch-height);\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: 99999px;\n background: var(--x-switch-background);\n width: var(--x-switch-width);\n border: none;\n transition: 0.25s ease-out background-color;\n cursor: pointer;\n }\n\n .x-switch__handle {\n background: #ffffff;\n border-radius: 50%;\n height: var(--x-switch-handle-size);\n width: var(--x-switch-handle-size);\n transition: 0.25s ease-out transform;\n transform: translateX(var(--x-switch-translate-x, 0%));\n }\n\n .x-switch--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: #1a1a1a;\n }\n\n .x-switch--sm {\n --x-switch-height: 12px;\n }\n\n .x-switch--lg {\n --x-switch-height: 24px;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}
1
+ {"version":3,"file":"base-switch.vue.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n\n /**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\n export default defineComponent({\n name: 'BaseSwitch',\n /**\n * The selected value of the switch.\n *\n * @public\n */\n props: {\n modelValue: {\n type: Boolean,\n default: false\n }\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /**\n * Dynamic CSS classes to add to the switch component\n * depending on its internal state.\n *\n * @returns A boolean dictionary with dynamic CSS classes.\n * @internal\n */\n const cssClasses = computed<VueCSSClasses>(() => ({\n 'x-switch--is-selected x-selected': props.modelValue\n }));\n\n /**\n * Emits an event with the new value of the switch.\n *\n * @internal\n */\n const toggle = (): void => {\n const newValue = !props.modelValue;\n emit('update:modelValue', newValue);\n };\n\n return {\n cssClasses,\n toggle\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-switch {\n --x-switch-height: 16px;\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: #b3b3b3;\n --x-switch-padding: 2px;\n --x-switch-handle-size: var(--x-switch-height);\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: 99999px;\n background: var(--x-switch-background);\n width: var(--x-switch-width);\n border: none;\n transition: 0.25s ease-out background-color;\n cursor: pointer;\n }\n\n .x-switch__handle {\n background: #ffffff;\n border-radius: 50%;\n height: var(--x-switch-handle-size);\n width: var(--x-switch-handle-size);\n transition: 0.25s ease-out transform;\n transform: translateX(var(--x-switch-translate-x, 0%));\n }\n\n .x-switch--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: #1a1a1a;\n }\n\n .x-switch--sm {\n --x-switch-height: 12px;\n }\n\n .x-switch--lg {\n --x-switch-height: 24px;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":["_pushScopeId","_popScopeId","_createElementVNode","_openBlock","cssClasses","_normalizeClass"],"mappings":";;;;;AAQI,MAAA,YAAA,GAAA,CAAA,CAAA,MAAAA,WAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,EAAAC,UAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;MAAA,UAAgC,mBAAA,YAAA,CAAA,sBAAAC,kBAAA;AAAA,EAAA,KAAA;AAAA,EAAA,EAAA,KAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAAA;AAAA,CAAA,CAAA,CAAA;;;;AAN/B,SAAA,WAAA,CAAK,IAAE,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACP,EAAA,OAAAC,SAAA,uBAA4B,QAAS,EAAA;AAAA,IACrC,OAJL,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAIYC,CAAU,CAAA,GAAA,CAAA,GAAA,IAAA,KACZ,IAAU,CAAA,MAAA,IAAA,IAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAChB,cAAa,EAAA,IAAA,CAAA,UAAA,IAAA,KAAA,CAAA;AAAA,IANjB,KAAA,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,UAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IAAA,IAAA,EAAA,QAAA;;;;;;;"}
package/js/components/base-switch.vue2.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, ref } from 'vue';
1
+ import { defineComponent, computed } from 'vue';
2
2
 
3
3
  /**
4
4
  * Basic switch component to handle boolean values. This component receives
@@ -29,9 +29,9 @@ var _sfc_main = defineComponent({
29
29
  * @returns A boolean dictionary with dynamic CSS classes.
30
30
  * @internal
31
31
  */
32
- const cssClasses = ref({
32
+ const cssClasses = computed(() => ({
33
33
  'x-switch--is-selected x-selected': props.modelValue
34
- });
34
+ }));
35
35
  /**
36
36
  * Emits an event with the new value of the switch.
37
37
  *
@@ -39,10 +39,6 @@ var _sfc_main = defineComponent({
39
39
  */
40
40
  const toggle = () => {
41
41
  const newValue = !props.modelValue;
42
- cssClasses.value = {
43
- 'x-switch--is-selected': newValue,
44
- 'x-selected': newValue
45
- };
46
42
  emit('update:modelValue', newValue);
47
43
  };
48
44
  return {
package/js/components/base-switch.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import { defineComponent, ref } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n\n /**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\n export default defineComponent({\n name: 'BaseSwitch',\n /**\n * The selected value of the switch.\n *\n * @public\n */\n props: {\n modelValue: {\n type: Boolean,\n default: false\n }\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /**\n * Dynamic CSS classes to add to the switch component\n * depending on its internal state.\n *\n * @returns A boolean dictionary with dynamic CSS classes.\n * @internal\n */\n const cssClasses = ref<VueCSSClasses>({\n 'x-switch--is-selected x-selected': props.modelValue\n });\n\n /**\n * Emits an event with the new value of the switch.\n *\n * @internal\n */\n const toggle = (): void => {\n const newValue = !props.modelValue;\n cssClasses.value = {\n 'x-switch--is-selected': newValue,\n 'x-selected': newValue\n };\n\n emit('update:modelValue', newValue);\n };\n\n return {\n cssClasses,\n toggle\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-switch {\n --x-switch-height: 16px;\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: #b3b3b3;\n --x-switch-padding: 2px;\n --x-switch-handle-size: var(--x-switch-height);\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: 99999px;\n background: var(--x-switch-background);\n width: var(--x-switch-width);\n border: none;\n transition: 0.25s ease-out background-color;\n cursor: pointer;\n }\n\n .x-switch__handle {\n background: #ffffff;\n border-radius: 50%;\n height: var(--x-switch-handle-size);\n width: var(--x-switch-handle-size);\n transition: 0.25s ease-out transform;\n transform: translateX(var(--x-switch-translate-x, 0%));\n }\n\n .x-switch--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: #1a1a1a;\n }\n\n .x-switch--sm {\n --x-switch-height: 12px;\n }\n\n .x-switch--lg {\n --x-switch-height: 24px;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;QACF,MAAM,aAAa,GAAG,CAAgB;YACpC,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;YAClC,UAAU,CAAC,QAAQ;AACjB,gBAAA,uBAAuB,EAAE,QAAQ;AACjC,gBAAA,YAAY,EAAE,QAAO;aACtB,CAAA;AAED,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
1
+ {"version":3,"file":"base-switch.vue2.js","sources":["../../../src/components/base-switch.vue"],"sourcesContent":["<template>\n <button\n @click=\"toggle\"\n :aria-checked=\"modelValue || undefined\"\n :class=\"cssClasses\"\n class=\"x-switch\"\n role=\"switch\"\n >\n <div class=\"x-switch__handle\" />\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent } from 'vue';\n import { VueCSSClasses } from '../utils/types';\n\n /**\n * Basic switch component to handle boolean values. This component receives\n * its selected state using a prop, and emits a Vue event whenever the user\n * clicks it.\n *\n * @public\n */\n\n export default defineComponent({\n name: 'BaseSwitch',\n /**\n * The selected value of the switch.\n *\n * @public\n */\n props: {\n modelValue: {\n type: Boolean,\n default: false\n }\n },\n emits: ['update:modelValue'],\n setup(props, { emit }) {\n /**\n * Dynamic CSS classes to add to the switch component\n * depending on its internal state.\n *\n * @returns A boolean dictionary with dynamic CSS classes.\n * @internal\n */\n const cssClasses = computed<VueCSSClasses>(() => ({\n 'x-switch--is-selected x-selected': props.modelValue\n }));\n\n /**\n * Emits an event with the new value of the switch.\n *\n * @internal\n */\n const toggle = (): void => {\n const newValue = !props.modelValue;\n emit('update:modelValue', newValue);\n };\n\n return {\n cssClasses,\n toggle\n };\n }\n });\n</script>\n\n<style lang=\"css\" scoped>\n .x-switch {\n --x-switch-height: 16px;\n --x-switch-width: calc(2 * (var(--x-switch-height)) + 2 * var(--x-switch-padding));\n --x-switch-background: #b3b3b3;\n --x-switch-padding: 2px;\n --x-switch-handle-size: var(--x-switch-height);\n box-sizing: content-box;\n height: var(--x-switch-height);\n padding: var(--x-switch-padding);\n border-radius: 99999px;\n background: var(--x-switch-background);\n width: var(--x-switch-width);\n border: none;\n transition: 0.25s ease-out background-color;\n cursor: pointer;\n }\n\n .x-switch__handle {\n background: #ffffff;\n border-radius: 50%;\n height: var(--x-switch-handle-size);\n width: var(--x-switch-handle-size);\n transition: 0.25s ease-out transform;\n transform: translateX(var(--x-switch-translate-x, 0%));\n }\n\n .x-switch--is-selected {\n --x-switch-translate-x: calc(var(--x-switch-padding) + var(--x-switch-width) / 2);\n --x-switch-background: #1a1a1a;\n }\n\n .x-switch--sm {\n --x-switch-height: 12px;\n }\n\n .x-switch--lg {\n --x-switch-height: 24px;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n <BaseSwitch @update:modelValue=\"value = !value\" :modelValue=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n\nThe switch component also supports using the `v-model` directive, to automatically handle its state\nchange:\n\n```vue live\n<template>\n <BaseSwitch v-model=\"value\" />\n</template>\n\n<script>\n import { BaseSwitch } from '@empathyco/x-components';\n\n export default {\n name: 'BaseSwitchDemo',\n components: {\n BaseSwitch\n },\n data() {\n return {\n value: false\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAgBE;;;;;;AAME;AAEF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB;;;;AAIE;AACF,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACD,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB;;;;;;AAME;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAgB,OAAO;YAChD,kCAAkC,EAAE,KAAK,CAAC,UAAS;AACpD,SAAA,CAAC,CAAC,CAAA;AAEH;;;;AAIE;QACF,MAAM,SAAS,MAAY;AACzB,YAAA,MAAM,QAAO,GAAI,CAAC,KAAK,CAAC,UAAU,CAAA;AAClC,YAAA,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AACrC,SAAC,CAAA;QAED,OAAO;YACL,UAAU;YACV,MAAK;SACN,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
package/js/x-modules/related-prompts/components/related-prompt.vue.js CHANGED
@@ -3,21 +3,22 @@ import { resolveDirective, openBlock, createElementBlock, renderSlot, withDirect
3
3
  import './related-prompt.vue3.js';
4
4
  import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
5
5
 
6
- const _hoisted_1 = { class: "x-related-prompt" };
6
+ const _hoisted_1 = { class: "x-related-prompt x-gap-8" };
7
+ const _hoisted_2 = { class: "x-text-left x-grow" };
7
8
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
8
9
  const _directive_typing = resolveDirective("typing");
9
10
  return openBlock(), createElementBlock("button", _hoisted_1, [
10
11
  renderSlot(_ctx.$slots, "related-prompt-extra-content", { relatedPrompt: _ctx.relatedPrompt }),
11
12
  withDirectives(createElementVNode(
12
13
  "span",
13
- null,
14
+ _hoisted_2,
14
15
  null,
15
16
  512
16
17
  /* NEED_PATCH */
17
18
  ), [
18
19
  [_directive_typing, { text: _ctx.relatedPrompt.suggestionText, speed: 50 }]
19
20
  ]),
20
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.selected ? "CrossTinyIcon" : "PlusIcon"), { class: "x-icon-lg x-related-prompt-icon" }))
21
+ (openBlock(), createBlock(resolveDynamicComponent(_ctx.selected ? "CrossTinyIcon" : "PlusIcon"), { class: "x-icon-lg x-related-prompt-icon x-shrink-0" }))
21
22
  ]);
22
23
  }
23
24
  var RelatedPrompt = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
package/js/x-modules/related-prompts/components/related-prompt.vue.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":["_resolveDirective","_createElementBlock","_renderSlot","_withDirectives","_createElementVNode","selected"],"mappings":";;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAOS,QAPT,CAAA,CAAA;oBAEuE,EAAAC,kBAAA,CAAA,QAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,8BAAA,EAA/B,EAAc,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,IAAAC,cAAA,CAAAC,kBAAA;;;;;;;AACpD,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EAJJ,mCAKWC,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}
1
+ {"version":3,"file":"related-prompt.vue.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt x-gap-8\">\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" class=\"x-text-left x-grow\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon x-shrink-0\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":["_resolveDirective","_openBlock","_createElementBlock","_renderSlot","_withDirectives","_createElementVNode","selected"],"mappings":";;;;;;;;AACE,EAAA,MAAA,iBAAA,GAAAA,gBAAA,CAOS,QAPT,CAAA,CAAA;AAEE,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAgG,UAAhG,UAAgG,EAAA;AAAA,IAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,8BAAA,EAA1D,EAAc,aAAA,EAAA,IAAA,CAAA,aAAA,EAAA,CAAA;AAAA,IAAAC,cAAA,CAAAC,kBAAA;;;;;;;AACpD,MAAA,CAAA,iBAAA,EAAA,EAAA,IAAA,EAJJ,mCAKWC,KAAQ,EAAA,EAAA,EAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;"}
package/js/x-modules/related-prompts/components/related-prompt.vue2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt\">\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":[],"mappings":";;;;;AAiBE;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,MAAK;AACN,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
1
+ {"version":3,"file":"related-prompt.vue2.js","sources":["../../../../../src/x-modules/related-prompts/components/related-prompt.vue"],"sourcesContent":["<template>\n <button class=\"x-related-prompt x-gap-8\">\n <slot name=\"related-prompt-extra-content\" :relatedPrompt=\"relatedPrompt\" />\n <span v-typing=\"{ text: relatedPrompt.suggestionText, speed: 50 }\" class=\"x-text-left x-grow\" />\n <component\n :is=\"selected ? 'CrossTinyIcon' : 'PlusIcon'\"\n class=\"x-icon-lg x-related-prompt-icon x-shrink-0\"\n />\n </button>\n</template>\n<script lang=\"ts\">\n import { defineComponent, PropType } from 'vue';\n import { RelatedPrompt } from '@empathyco/x-types';\n import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';\n import PlusIcon from '../../../components/icons/plus.vue';\n import { typing } from '../../../directives/typing';\n\n /**\n * This component shows a suggested related prompt.\n */\n export default defineComponent({\n name: 'RelatedPrompt',\n directives: {\n typing\n },\n components: {\n CrossTinyIcon,\n PlusIcon\n },\n props: {\n relatedPrompt: {\n type: Object as PropType<RelatedPrompt>,\n required: true\n },\n selected: {\n type: Boolean,\n default: false\n }\n }\n });\n</script>\n<style lang=\"css\">\n .x-related-prompt {\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: start;\n padding: 8px;\n height: 100%;\n width: 100%;\n }\n\n .x-related-prompt-icon {\n align-self: start;\n }\n</style>\n"],"names":[],"mappings":";;;;;AAiBE;;AAEE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,UAAU,EAAE;QACV,MAAK;AACN,KAAA;AACD,IAAA,UAAU,EAAE;QACV,aAAa;QACb,QAAO;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACf,SAAA;AACF,KAAA;AACD,CAAA,CAAC;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "6.0.0-alpha.57",
3
+ "version": "6.0.0-alpha.59",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -138,5 +138,5 @@
138
138
  "access": "public",
139
139
  "directory": "dist"
140
140
  },
141
- "gitHead": "e58774716ce4f5492630e5230871b9b05220bdca"
141
+ "gitHead": "b75a8d015554ae85e4c8c7f59c13d3c2273e5b2c"
142
142
  }
package/report/x-components.api.json CHANGED
@@ -9354,30 +9354,21 @@
9354
9354
  },
9355
9355
  {
9356
9356
  "kind": "Reference",
9357
- "text": "Ref",
9358
- "canonicalReference": "@vue/reactivity!Ref:interface"
9359
- },
9360
- {
9361
- "kind": "Content",
9362
- "text": "<string | import(\"@empathyco/x-utils\")."
9363
- },
9364
- {
9365
- "kind": "Reference",
9366
- "text": "Dictionary",
9367
- "canonicalReference": "@empathyco/x-utils!Dictionary:type"
9357
+ "text": "ComputedRef",
9358
+ "canonicalReference": "@vue/reactivity!ComputedRef:interface"
9368
9359
  },
9369
9360
  {
9370
9361
  "kind": "Content",
9371
- "text": "<boolean> | (string | import(\"@empathyco/x-utils\")."
9362
+ "text": "<"
9372
9363
  },
9373
9364
  {
9374
9365
  "kind": "Reference",
9375
- "text": "Dictionary",
9376
- "canonicalReference": "@empathyco/x-utils!Dictionary:type"
9366
+ "text": "VueCSSClasses",
9367
+ "canonicalReference": "@empathyco/x-components!VueCSSClasses:type"
9377
9368
  },
9378
9369
  {
9379
9370
  "kind": "Content",
9380
- "text": "<boolean>)[]>;\n toggle: () => void;\n}, unknown, {}, {}, import(\"vue\")."
9371
+ "text": ">;\n toggle: () => void;\n}, unknown, {}, {}, import(\"vue\")."
9381
9372
  },
9382
9373
  {
9383
9374
  "kind": "Reference",
@@ -9440,7 +9431,7 @@
9440
9431
  "name": "BaseSwitch",
9441
9432
  "variableTypeTokenRange": {
9442
9433
  "startIndex": 1,
9443
- "endIndex": 24
9434
+ "endIndex": 22
9444
9435
  }
9445
9436
  },
9446
9437
  {
package/report/x-components.api.md CHANGED
@@ -1401,7 +1401,7 @@ type: BooleanConstructor;
1401
1401
  default: boolean;
1402
1402
  };
1403
1403
  }, {
1404
- cssClasses: Ref<string | Dictionary<boolean> | (string | Dictionary<boolean>)[]>;
1404
+ cssClasses: ComputedRef<VueCSSClasses>;
1405
1405
  toggle: () => void;
1406
1406
  }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", PublicProps, Readonly<ExtractPropTypes< {
1407
1407
  modelValue: {
package/types/components/base-switch.vue.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { VueCSSClasses } from '../utils/types';
1
2
  /**
2
3
  * Basic switch component to handle boolean values. This component receives
3
4
  * its selected state using a prop, and emits a Vue event whenever the user
@@ -11,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
11
12
  default: boolean;
12
13
  };
13
14
  }, {
14
- cssClasses: import("vue").Ref<string | import("@empathyco/x-utils").Dictionary<boolean> | (string | import("@empathyco/x-utils").Dictionary<boolean>)[]>;
15
+ cssClasses: import("vue").ComputedRef<VueCSSClasses>;
15
16
  toggle: () => void;
16
17
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
17
18
  modelValue: {
package/types/components/base-switch.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-switch.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAIE;;;;;;GAMG;;;;;;;;kBAiCoB,IAAI;;;;;;;;;;;AA/B3B,wBA8CG"}
1
+ {"version":3,"file":"base-switch.vue?vue&type=script&lang.d.ts","sourceRoot":"","sources":["../../../src/components/base-switch.vue?vue&type=script&lang.ts"],"names":[],"mappings":"AAEE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;GAMG;;;;;;;;kBAiCoB,IAAI;;;;;;;;;;;AA/B3B,wBAyCG"}