@empathyco/x-components 3.0.0-alpha.44 → 3.0.0-alpha.45

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 (95) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/core/index.js +3 -0
  3. package/core/index.js.map +1 -1
  4. package/design-system/default-theme.css +118 -6
  5. package/design-system/full-theme.css +96 -6
  6. package/design-system/suggestion-default.css +25 -2
  7. package/design-system/suggestion-group-default.css +27 -4
  8. package/design-system/tag-default.css +44 -0
  9. package/docs/API-reference/api/x-components.curatedcheckicon.md +11 -0
  10. package/docs/API-reference/api/x-components.lightbulboff.md +11 -0
  11. package/docs/API-reference/api/x-components.lightbulbon.md +11 -0
  12. package/docs/API-reference/api/x-components.md +3 -0
  13. package/docs/API-reference/api/x-components.urlhandler.initialextraparams.md +11 -0
  14. package/docs/API-reference/api/x-components.urlhandler.md +6 -0
  15. package/docs/API-reference/components/common/icons/x-components.curated-check.md +7 -0
  16. package/docs/API-reference/components/common/icons/x-components.light-bulb-off.md +7 -0
  17. package/docs/API-reference/components/common/icons/x-components.light-bulb-on.md +7 -0
  18. package/js/components/icons/curated-check.vue.js +60 -0
  19. package/js/components/icons/curated-check.vue.js.map +1 -0
  20. package/js/components/icons/curated-check.vue_rollup-plugin-vue=script.js +4 -0
  21. package/js/components/icons/curated-check.vue_rollup-plugin-vue=script.js.map +1 -0
  22. package/js/components/icons/light-bulb-off.vue.js +84 -0
  23. package/js/components/icons/light-bulb-off.vue.js.map +1 -0
  24. package/js/components/icons/light-bulb-off.vue_rollup-plugin-vue=script.js +4 -0
  25. package/js/components/icons/light-bulb-off.vue_rollup-plugin-vue=script.js.map +1 -0
  26. package/js/components/icons/light-bulb-on.vue.js +151 -0
  27. package/js/components/icons/light-bulb-on.vue.js.map +1 -0
  28. package/js/components/icons/light-bulb-on.vue_rollup-plugin-vue=script.js +4 -0
  29. package/js/components/icons/light-bulb-on.vue_rollup-plugin-vue=script.js.map +1 -0
  30. package/js/components/suggestions/base-suggestions.vue.js +3 -3
  31. package/js/components/suggestions/base-suggestions.vue.js.map +1 -1
  32. package/js/index.js +3 -0
  33. package/js/index.js.map +1 -1
  34. package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue=script.js +3 -0
  35. package/js/x-modules/extra-params/components/extra-params.vue_rollup-plugin-vue=script.js.map +1 -1
  36. package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue=script.js +3 -0
  37. package/js/x-modules/extra-params/components/renderless-extra-param.vue_rollup-plugin-vue=script.js.map +1 -1
  38. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue=script.js +3 -0
  39. package/js/x-modules/extra-params/components/snippet-config-extra-params.vue_rollup-plugin-vue=script.js.map +1 -1
  40. package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue=script.js +3 -0
  41. package/js/x-modules/facets/components/clear-filters.vue_rollup-plugin-vue=script.js.map +1 -1
  42. package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue=script.js +3 -0
  43. package/js/x-modules/facets/components/facets/facets-provider.vue_rollup-plugin-vue=script.js.map +1 -1
  44. package/js/x-modules/facets/components/filters/all-filter.vue_rollup-plugin-vue=script.js +3 -0
  45. package/js/x-modules/facets/components/filters/all-filter.vue_rollup-plugin-vue=script.js.map +1 -1
  46. package/js/x-modules/facets/components/filters/base-filter.vue_rollup-plugin-vue=script.js +3 -0
  47. package/js/x-modules/facets/components/filters/base-filter.vue_rollup-plugin-vue=script.js.map +1 -1
  48. package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue=script.js +3 -0
  49. package/js/x-modules/facets/components/filters/hierarchical-filter.vue_rollup-plugin-vue=script.js.map +1 -1
  50. package/js/x-modules/facets/components/filters/number-range-filter.vue_rollup-plugin-vue=script.js +3 -0
  51. package/js/x-modules/facets/components/filters/number-range-filter.vue_rollup-plugin-vue=script.js.map +1 -1
  52. package/js/x-modules/facets/components/filters/renderless-filter.vue_rollup-plugin-vue=script.js +3 -0
  53. package/js/x-modules/facets/components/filters/renderless-filter.vue_rollup-plugin-vue=script.js.map +1 -1
  54. package/js/x-modules/facets/components/filters/simple-filter.vue_rollup-plugin-vue=script.js +3 -0
  55. package/js/x-modules/facets/components/filters/simple-filter.vue_rollup-plugin-vue=script.js.map +1 -1
  56. package/js/x-modules/facets/components/lists/exclude-filters-with-no-results.vue_rollup-plugin-vue=script.js +3 -0
  57. package/js/x-modules/facets/components/lists/exclude-filters-with-no-results.vue_rollup-plugin-vue=script.js.map +1 -1
  58. package/js/x-modules/facets/components/lists/filters-list.vue_rollup-plugin-vue=script.js +3 -0
  59. package/js/x-modules/facets/components/lists/filters-list.vue_rollup-plugin-vue=script.js.map +1 -1
  60. package/js/x-modules/facets/components/lists/filters-search.vue_rollup-plugin-vue=script.js +3 -0
  61. package/js/x-modules/facets/components/lists/filters-search.vue_rollup-plugin-vue=script.js.map +1 -1
  62. package/js/x-modules/facets/components/lists/selected-filters.vue_rollup-plugin-vue=script.js +3 -0
  63. package/js/x-modules/facets/components/lists/selected-filters.vue_rollup-plugin-vue=script.js.map +1 -1
  64. package/js/x-modules/facets/components/lists/sliced-filters.vue_rollup-plugin-vue=script.js +3 -0
  65. package/js/x-modules/facets/components/lists/sliced-filters.vue_rollup-plugin-vue=script.js.map +1 -1
  66. package/js/x-modules/facets/components/lists/sorted-filters.vue_rollup-plugin-vue=script.js +3 -0
  67. package/js/x-modules/facets/components/lists/sorted-filters.vue_rollup-plugin-vue=script.js.map +1 -1
  68. package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue=script.js +3 -0
  69. package/js/x-modules/scroll/components/main-scroll-item.vue_rollup-plugin-vue=script.js.map +1 -1
  70. package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue=script.js +3 -0
  71. package/js/x-modules/scroll/components/scroll-to-top.vue_rollup-plugin-vue=script.js.map +1 -1
  72. package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue=script.js +3 -0
  73. package/js/x-modules/scroll/components/window-scroll.vue_rollup-plugin-vue=script.js.map +1 -1
  74. package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue=script.js +3 -0
  75. package/js/x-modules/search/components/sort-list.vue_rollup-plugin-vue=script.js.map +1 -1
  76. package/js/x-modules/search/components/sort.mixin.js +3 -0
  77. package/js/x-modules/search/components/sort.mixin.js.map +1 -1
  78. package/js/x-modules/search/components/spellcheck.vue_rollup-plugin-vue=script.js +3 -0
  79. package/js/x-modules/search/components/spellcheck.vue_rollup-plugin-vue=script.js.map +1 -1
  80. package/js/x-modules/url/components/url-handler.vue.js.map +1 -1
  81. package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue=script.js +118 -1
  82. package/js/x-modules/url/components/url-handler.vue_rollup-plugin-vue=script.js.map +1 -1
  83. package/package.json +2 -2
  84. package/report/x-components.api.json +95 -0
  85. package/report/x-components.api.md +11 -0
  86. package/types/components/icons/curated-check.vue.d.ts +3 -0
  87. package/types/components/icons/curated-check.vue.d.ts.map +1 -0
  88. package/types/components/icons/index.d.ts +3 -0
  89. package/types/components/icons/index.d.ts.map +1 -1
  90. package/types/components/icons/light-bulb-off.vue.d.ts +3 -0
  91. package/types/components/icons/light-bulb-off.vue.d.ts.map +1 -0
  92. package/types/components/icons/light-bulb-on.vue.d.ts +3 -0
  93. package/types/components/icons/light-bulb-on.vue.d.ts.map +1 -0
  94. package/types/x-modules/url/components/url-handler.vue.d.ts +1 -0
  95. package/types/x-modules/url/components/url-handler.vue.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,31 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.45](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.44...@empathyco/x-components@3.0.0-alpha.45) (2022-01-20)
7
+
8
+ ### Features
9
+
10
+ - **design-system:** allow suggestions to be tags
11
+ ([24c94bb](https://github.com/empathyco/x/commit/24c94bb604f87a2135a36be5a298f053eba80738)),
12
+ closes [EX-4917](https://searchbroker.atlassian.net/browse/EX-4917)
13
+
14
+ ### Bug Fixes
15
+
16
+ - **url:** default `extra params` are now properly restored
17
+ ([5540929](https://github.com/empathyco/x/commit/554092985a394e1d2b6087b1129282993da7e8c6)),
18
+ closes [EX-5203](https://searchbroker.atlassian.net/browse/EX-5203)
19
+
20
+ ### Testing
21
+
22
+ - **e2e:** make `tagging` tests wait for redirection before assertion
23
+ ([f98cd25](https://github.com/empathyco/x/commit/f98cd254084f60893b1eb723d4081bf0c0f44166)),
24
+ closes [EX-5273](https://searchbroker.atlassian.net/browse/EX-5273)
25
+
26
+ # Change Log
27
+
28
+ All notable changes to this project will be documented in this file. See
29
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
30
+
6
31
  ## [3.0.0-alpha.44](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.43...@empathyco/x-components@3.0.0-alpha.44) (2022-01-14)
7
32
 
8
33
  ### ⚠ BREAKING CHANGES
package/core/index.js CHANGED
@@ -63,6 +63,7 @@ export { default as ChevronTinyUpIcon } from '../js/components/icons/chevron-tin
63
63
  export { default as ChevronUpIcon } from '../js/components/icons/chevron-up.vue.js';
64
64
  export { default as CrossTinyIcon } from '../js/components/icons/cross-tiny.vue.js';
65
65
  export { default as CrossIcon } from '../js/components/icons/cross.vue.js';
66
+ export { default as CuratedCheckIcon } from '../js/components/icons/curated-check.vue.js';
66
67
  export { default as FiltersIcon } from '../js/components/icons/filters.vue.js';
67
68
  export { default as Grid1ColIcon } from '../js/components/icons/grid-1-col.vue.js';
68
69
  export { default as Grid2ColIcon } from '../js/components/icons/grid-2-col.vue.js';
@@ -70,6 +71,8 @@ export { default as Grid2RowsIcon } from '../js/components/icons/grid-2-rows.vue
70
71
  export { default as HideIcon } from '../js/components/icons/hide.vue.js';
71
72
  export { default as HistoryTinyIcon } from '../js/components/icons/history-tiny.vue.js';
72
73
  export { default as HistoryIcon } from '../js/components/icons/history.vue.js';
74
+ export { default as LightBulbOff } from '../js/components/icons/light-bulb-off.vue.js';
75
+ export { default as LightBulbOn } from '../js/components/icons/light-bulb-on.vue.js';
73
76
  export { default as MenuIcon } from '../js/components/icons/menu.vue.js';
74
77
  export { default as MinusTinyIcon } from '../js/components/icons/minus-tiny.vue.js';
75
78
  export { default as MinusIcon } from '../js/components/icons/minus.vue.js';
package/core/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/design-system/default-theme.css CHANGED
@@ -1821,11 +1821,22 @@
1821
1821
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
1822
1822
  --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
1823
1823
  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
1824
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
1824
1825
  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
1825
1826
  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
1826
1827
  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
1827
1828
  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
1828
1829
  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
1830
+ --x-size-border-width-suggestion-group-default: 0;
1831
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1832
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1833
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1834
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1835
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
1836
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1837
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1838
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1839
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1829
1840
  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
1830
1841
  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
1831
1842
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
@@ -1840,14 +1851,21 @@
1840
1851
  padding-right: var(--x-size-padding-right-suggestion-group-default); }
1841
1852
  [dir="rtl"] .x-suggestion-group {
1842
1853
  padding-left: var(--x-size-padding-right-suggestion-group-default); }
1854
+ [dir="ltr"] .x-suggestion-group {
1855
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default); }
1856
+ [dir="rtl"] .x-suggestion-group {
1857
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default); }
1858
+ [dir="ltr"] .x-suggestion-group {
1859
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default); }
1860
+ [dir="rtl"] .x-suggestion-group {
1861
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default); }
1843
1862
  .x-suggestion-group {
1844
1863
  display: flex;
1845
1864
  flex-flow: row nowrap;
1846
- align-items: flex-start;
1847
1865
  box-sizing: border-box;
1848
- border: none;
1849
1866
  background-color: var(--x-color-background-suggestion-group-default);
1850
1867
  color: var(--x-color-text-suggestion-group-default);
1868
+ border-color: var(--x-color-border-suggestion-group-default);
1851
1869
  font-family: var(--x-font-family-suggestion-group-default);
1852
1870
  font-size: var(--x-size-font-suggestion-group-default);
1853
1871
  line-height: var(--x-size-line-height-suggestion-group-default);
@@ -1855,7 +1873,11 @@
1855
1873
  cursor: pointer;
1856
1874
  padding-top: var(--x-size-padding-top-suggestion-group-default);
1857
1875
  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
1858
- gap: var(--x-size-gap-suggestion-group-default); }
1876
+ gap: var(--x-size-gap-suggestion-group-default);
1877
+ border-style: solid;
1878
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
1879
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
1880
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default); }
1859
1881
  @media not all and (min-resolution: 0.001dpcm) {
1860
1882
  .x-suggestion-group {
1861
1883
  gap: 0; }
@@ -1863,7 +1885,8 @@
1863
1885
  margin-right: var(--x-size-gap-suggestion-group-default); } }
1864
1886
  .x-suggestion-group .x-suggestion {
1865
1887
  padding: 0;
1866
- flex: 1 1 auto; }
1888
+ flex: 1 1 auto;
1889
+ border: none; }
1867
1890
  .x-suggestion-group .x-button {
1868
1891
  --x-color-background-button-default: transparent;
1869
1892
  --x-color-border-button-default: transparent;
@@ -1877,11 +1900,22 @@
1877
1900
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
1878
1901
  --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
1879
1902
  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
1903
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
1880
1904
  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
1881
1905
  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
1882
1906
  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
1883
1907
  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
1884
1908
  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
1909
+ --x-size-border-width-suggestion-group-default: 0;
1910
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1911
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1912
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1913
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
1914
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
1915
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1916
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1917
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1918
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
1885
1919
  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
1886
1920
  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
1887
1921
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
@@ -1893,11 +1927,22 @@
1893
1927
  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
1894
1928
  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
1895
1929
  --x-color-background-suggestion-default: transparent;
1930
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
1896
1931
  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
1897
1932
  --x-size-padding-right-suggestion-default: 0;
1898
1933
  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
1899
1934
  --x-size-padding-left-suggestion-default: 0;
1900
1935
  --x-size-gap-suggestion-default: var(--x-size-base-03);
1936
+ --x-size-border-width-suggestion-default: 0;
1937
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
1938
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
1939
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
1940
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
1941
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
1942
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
1943
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
1944
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
1945
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
1901
1946
  --x-font-family-suggestion-default: var(--x-font-family-text);
1902
1947
  --x-size-font-suggestion-default: var(--x-size-font-text);
1903
1948
  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
@@ -1930,14 +1975,22 @@
1930
1975
  padding-right: var(--x-size-padding-right-suggestion-default); }
1931
1976
  [dir="rtl"] .x-suggestion {
1932
1977
  padding-left: var(--x-size-padding-right-suggestion-default); }
1978
+ [dir="ltr"] .x-suggestion {
1979
+ border-left-width: var(--x-size-border-width-left-suggestion-default); }
1980
+ [dir="rtl"] .x-suggestion {
1981
+ border-right-width: var(--x-size-border-width-left-suggestion-default); }
1982
+ [dir="ltr"] .x-suggestion {
1983
+ border-right-width: var(--x-size-border-width-right-suggestion-default); }
1984
+ [dir="rtl"] .x-suggestion {
1985
+ border-left-width: var(--x-size-border-width-right-suggestion-default); }
1933
1986
  .x-suggestion {
1934
1987
  display: flex;
1935
1988
  flex-flow: row nowrap;
1936
1989
  box-sizing: border-box;
1937
1990
  align-items: var(--x-string-align-items-suggestion-default);
1938
- border: none;
1939
1991
  background-color: var(--x-color-background-suggestion-default);
1940
1992
  color: var(--x-color-text-suggestion-default);
1993
+ border-color: var(--x-color-border-suggestion-default);
1941
1994
  font-family: var(--x-font-family-suggestion-default);
1942
1995
  font-size: var(--x-size-font-suggestion-default);
1943
1996
  line-height: var(--x-size-line-height-suggestion-default);
@@ -1945,7 +1998,11 @@
1945
1998
  cursor: pointer;
1946
1999
  padding-top: var(--x-size-padding-top-suggestion-default);
1947
2000
  padding-bottom: var(--x-size-padding-bottom-suggestion-default);
1948
- gap: var(--x-size-gap-suggestion-default); }
2001
+ gap: var(--x-size-gap-suggestion-default);
2002
+ border-style: solid;
2003
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
2004
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
2005
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default); }
1949
2006
  @media not all and (min-resolution: 0.001dpcm) {
1950
2007
  .x-suggestion {
1951
2008
  gap: 0; }
@@ -1977,11 +2034,22 @@
1977
2034
  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
1978
2035
  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
1979
2036
  --x-color-background-suggestion-default: transparent;
2037
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
1980
2038
  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
1981
2039
  --x-size-padding-right-suggestion-default: 0;
1982
2040
  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
1983
2041
  --x-size-padding-left-suggestion-default: 0;
1984
2042
  --x-size-gap-suggestion-default: var(--x-size-base-03);
2043
+ --x-size-border-width-suggestion-default: 0;
2044
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
2045
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
2046
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
2047
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
2048
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
2049
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
2050
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
2051
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
2052
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
1985
2053
  --x-font-family-suggestion-default: var(--x-font-family-text);
1986
2054
  --x-size-font-suggestion-default: var(--x-size-font-text);
1987
2055
  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
@@ -2074,6 +2142,50 @@
2074
2142
  gap: 0; }
2075
2143
  .x-tag > *:not(:last-child) {
2076
2144
  margin-right: var(--x-size-gap-tag-default); } }
2145
+ .x-tag.x-suggestion {
2146
+ --x-color-background-suggestion-default: var(--x-color-background-tag-default);
2147
+ --x-color-text-suggestion-default: var(--x-color-text-tag-default);
2148
+ --x-color-border-suggestion-default: var(--x-color-border-tag-default);
2149
+ --x-size-padding-top-suggestion-default: 0;
2150
+ --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
2151
+ --x-size-padding-bottom-suggestion-default: 0;
2152
+ --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
2153
+ --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
2154
+ --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
2155
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
2156
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
2157
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
2158
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
2159
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
2160
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
2161
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
2162
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
2163
+ --x-font-family-suggestion-default: var(--x-font-family-tag-default);
2164
+ --x-size-font-suggestion-default: var(--x-size-font-tag-default);
2165
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
2166
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default); }
2167
+ .x-tag.x-suggestion-group {
2168
+ --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
2169
+ --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
2170
+ --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
2171
+ --x-size-padding-top-suggestion-group-default: 0;
2172
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
2173
+ --x-size-padding-bottom-suggestion-group-default: 0;
2174
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
2175
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
2176
+ --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
2177
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
2178
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
2179
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
2180
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
2181
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
2182
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
2183
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
2184
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
2185
+ --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
2186
+ --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
2187
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
2188
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default); }
2077
2189
  .x-tag.x-filter {
2078
2190
  --x-color-background-filter-default: transparent;
2079
2191
  --x-size-border-width-filter-default: 0;
package/design-system/full-theme.css CHANGED
@@ -3060,14 +3060,21 @@
3060
3060
  padding-right: var(--x-size-padding-right-suggestion-group-default); }
3061
3061
  [dir="rtl"] .x-suggestion-group{
3062
3062
  padding-left: var(--x-size-padding-right-suggestion-group-default); }
3063
+ [dir="ltr"] .x-suggestion-group{
3064
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default); }
3065
+ [dir="rtl"] .x-suggestion-group{
3066
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default); }
3067
+ [dir="ltr"] .x-suggestion-group{
3068
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default); }
3069
+ [dir="rtl"] .x-suggestion-group{
3070
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default); }
3063
3071
  .x-suggestion-group {
3064
3072
  display: flex;
3065
3073
  flex-flow: row nowrap;
3066
- align-items: flex-start;
3067
3074
  box-sizing: border-box;
3068
- border: none;
3069
3075
  background-color: var(--x-color-background-suggestion-group-default);
3070
3076
  color: var(--x-color-text-suggestion-group-default);
3077
+ border-color: var(--x-color-border-suggestion-group-default);
3071
3078
  font-family: var(--x-font-family-suggestion-group-default);
3072
3079
  font-size: var(--x-size-font-suggestion-group-default);
3073
3080
  line-height: var(--x-size-line-height-suggestion-group-default);
@@ -3075,7 +3082,11 @@
3075
3082
  cursor: pointer;
3076
3083
  padding-top: var(--x-size-padding-top-suggestion-group-default);
3077
3084
  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
3078
- gap: var(--x-size-gap-suggestion-group-default); }
3085
+ gap: var(--x-size-gap-suggestion-group-default);
3086
+ border-style: solid;
3087
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
3088
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
3089
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default); }
3079
3090
  @media not all and (min-resolution: 0.001dpcm) {
3080
3091
  .x-suggestion-group {
3081
3092
  gap: 0; }
@@ -3083,7 +3094,8 @@
3083
3094
  margin-right: var(--x-size-gap-suggestion-group-default); } }
3084
3095
  .x-suggestion-group .x-suggestion {
3085
3096
  padding: 0;
3086
- flex: 1 1 auto; }
3097
+ flex: 1 1 auto;
3098
+ border: none; }
3087
3099
  .x-suggestion-group .x-button {
3088
3100
  --x-color-background-button-default: transparent;
3089
3101
  --x-color-border-button-default: transparent;
@@ -3097,11 +3109,22 @@
3097
3109
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3098
3110
  --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
3099
3111
  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3112
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3100
3113
  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3101
3114
  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3102
3115
  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3103
3116
  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3104
3117
  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3118
+ --x-size-border-width-suggestion-group-default: 0;
3119
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3120
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3121
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3122
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3123
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3124
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3125
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3126
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3127
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3105
3128
  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3106
3129
  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3107
3130
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
@@ -3120,14 +3143,22 @@
3120
3143
  padding-right: var(--x-size-padding-right-suggestion-default); }
3121
3144
  [dir="rtl"] .x-suggestion{
3122
3145
  padding-left: var(--x-size-padding-right-suggestion-default); }
3146
+ [dir="ltr"] .x-suggestion{
3147
+ border-left-width: var(--x-size-border-width-left-suggestion-default); }
3148
+ [dir="rtl"] .x-suggestion{
3149
+ border-right-width: var(--x-size-border-width-left-suggestion-default); }
3150
+ [dir="ltr"] .x-suggestion{
3151
+ border-right-width: var(--x-size-border-width-right-suggestion-default); }
3152
+ [dir="rtl"] .x-suggestion{
3153
+ border-left-width: var(--x-size-border-width-right-suggestion-default); }
3123
3154
  .x-suggestion {
3124
3155
  display: flex;
3125
3156
  flex-flow: row nowrap;
3126
3157
  box-sizing: border-box;
3127
3158
  align-items: var(--x-string-align-items-suggestion-default);
3128
- border: none;
3129
3159
  background-color: var(--x-color-background-suggestion-default);
3130
3160
  color: var(--x-color-text-suggestion-default);
3161
+ border-color: var(--x-color-border-suggestion-default);
3131
3162
  font-family: var(--x-font-family-suggestion-default);
3132
3163
  font-size: var(--x-size-font-suggestion-default);
3133
3164
  line-height: var(--x-size-line-height-suggestion-default);
@@ -3135,7 +3166,11 @@
3135
3166
  cursor: pointer;
3136
3167
  padding-top: var(--x-size-padding-top-suggestion-default);
3137
3168
  padding-bottom: var(--x-size-padding-bottom-suggestion-default);
3138
- gap: var(--x-size-gap-suggestion-default); }
3169
+ gap: var(--x-size-gap-suggestion-default);
3170
+ border-style: solid;
3171
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
3172
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
3173
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default); }
3139
3174
  @media not all and (min-resolution: 0.001dpcm) {
3140
3175
  .x-suggestion {
3141
3176
  gap: 0; }
@@ -3167,11 +3202,22 @@
3167
3202
  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
3168
3203
  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
3169
3204
  --x-color-background-suggestion-default: transparent;
3205
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
3170
3206
  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
3171
3207
  --x-size-padding-right-suggestion-default: 0;
3172
3208
  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
3173
3209
  --x-size-padding-left-suggestion-default: 0;
3174
3210
  --x-size-gap-suggestion-default: var(--x-size-base-03);
3211
+ --x-size-border-width-suggestion-default: 0;
3212
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
3213
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
3214
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
3215
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
3216
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
3217
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3218
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3219
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3220
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3175
3221
  --x-font-family-suggestion-default: var(--x-font-family-text);
3176
3222
  --x-size-font-suggestion-default: var(--x-size-font-text);
3177
3223
  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
@@ -3251,6 +3297,50 @@
3251
3297
  gap: 0; }
3252
3298
  .x-tag > *:not(:last-child) {
3253
3299
  margin-right: var(--x-size-gap-tag-default); } }
3300
+ .x-tag.x-suggestion {
3301
+ --x-color-background-suggestion-default: var(--x-color-background-tag-default);
3302
+ --x-color-text-suggestion-default: var(--x-color-text-tag-default);
3303
+ --x-color-border-suggestion-default: var(--x-color-border-tag-default);
3304
+ --x-size-padding-top-suggestion-default: 0;
3305
+ --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
3306
+ --x-size-padding-bottom-suggestion-default: 0;
3307
+ --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
3308
+ --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
3309
+ --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
3310
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
3311
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
3312
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
3313
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
3314
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
3315
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
3316
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
3317
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
3318
+ --x-font-family-suggestion-default: var(--x-font-family-tag-default);
3319
+ --x-size-font-suggestion-default: var(--x-size-font-tag-default);
3320
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
3321
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default); }
3322
+ .x-tag.x-suggestion-group {
3323
+ --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
3324
+ --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
3325
+ --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
3326
+ --x-size-padding-top-suggestion-group-default: 0;
3327
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
3328
+ --x-size-padding-bottom-suggestion-group-default: 0;
3329
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
3330
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
3331
+ --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
3332
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
3333
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
3334
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
3335
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
3336
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
3337
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
3338
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
3339
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
3340
+ --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
3341
+ --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
3342
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
3343
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default); }
3254
3344
  .x-tag.x-filter {
3255
3345
  --x-color-background-filter-default: transparent;
3256
3346
  --x-size-border-width-filter-default: 0;
package/design-system/suggestion-default.css CHANGED
@@ -4,11 +4,22 @@
4
4
  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
5
5
  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
6
6
  --x-color-background-suggestion-default: transparent;
7
+ --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
7
8
  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
8
9
  --x-size-padding-right-suggestion-default: 0;
9
10
  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
10
11
  --x-size-padding-left-suggestion-default: 0;
11
12
  --x-size-gap-suggestion-default: var(--x-size-base-03);
13
+ --x-size-border-width-suggestion-default: 0;
14
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
15
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
16
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
17
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
18
+ --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
19
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
20
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
21
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
22
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
12
23
  --x-font-family-suggestion-default: var(--x-font-family-text);
13
24
  --x-size-font-suggestion-default: var(--x-size-font-text);
14
25
  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
@@ -41,14 +52,22 @@
41
52
  padding-right: var(--x-size-padding-right-suggestion-default); }
42
53
  [dir="rtl"] .x-suggestion {
43
54
  padding-left: var(--x-size-padding-right-suggestion-default); }
55
+ [dir="ltr"] .x-suggestion {
56
+ border-left-width: var(--x-size-border-width-left-suggestion-default); }
57
+ [dir="rtl"] .x-suggestion {
58
+ border-right-width: var(--x-size-border-width-left-suggestion-default); }
59
+ [dir="ltr"] .x-suggestion {
60
+ border-right-width: var(--x-size-border-width-right-suggestion-default); }
61
+ [dir="rtl"] .x-suggestion {
62
+ border-left-width: var(--x-size-border-width-right-suggestion-default); }
44
63
  .x-suggestion {
45
64
  display: flex;
46
65
  flex-flow: row nowrap;
47
66
  box-sizing: border-box;
48
67
  align-items: var(--x-string-align-items-suggestion-default);
49
- border: none;
50
68
  background-color: var(--x-color-background-suggestion-default);
51
69
  color: var(--x-color-text-suggestion-default);
70
+ border-color: var(--x-color-border-suggestion-default);
52
71
  font-family: var(--x-font-family-suggestion-default);
53
72
  font-size: var(--x-size-font-suggestion-default);
54
73
  line-height: var(--x-size-line-height-suggestion-default);
@@ -56,7 +75,11 @@
56
75
  cursor: pointer;
57
76
  padding-top: var(--x-size-padding-top-suggestion-default);
58
77
  padding-bottom: var(--x-size-padding-bottom-suggestion-default);
59
- gap: var(--x-size-gap-suggestion-default); }
78
+ gap: var(--x-size-gap-suggestion-default);
79
+ border-style: solid;
80
+ border-top-width: var(--x-size-border-width-top-suggestion-default);
81
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
82
+ border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default); }
60
83
  @media not all and (min-resolution: 0.001dpcm) {
61
84
  .x-suggestion {
62
85
  gap: 0; }
package/design-system/suggestion-group-default.css CHANGED
@@ -2,11 +2,22 @@
2
2
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3
3
  --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
4
4
  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
5
+ --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
5
6
  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
6
7
  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
7
8
  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
8
9
  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
9
10
  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
11
+ --x-size-border-width-suggestion-group-default: 0;
12
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
13
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
14
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
15
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
16
+ --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
17
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
18
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
19
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
20
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
10
21
  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
11
22
  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
12
23
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
@@ -21,14 +32,21 @@
21
32
  padding-right: var(--x-size-padding-right-suggestion-group-default); }
22
33
  [dir="rtl"] .x-suggestion-group {
23
34
  padding-left: var(--x-size-padding-right-suggestion-group-default); }
35
+ [dir="ltr"] .x-suggestion-group {
36
+ border-left-width: var(--x-size-border-width-left-suggestion-group-default); }
37
+ [dir="rtl"] .x-suggestion-group {
38
+ border-right-width: var(--x-size-border-width-left-suggestion-group-default); }
39
+ [dir="ltr"] .x-suggestion-group {
40
+ border-right-width: var(--x-size-border-width-right-suggestion-group-default); }
41
+ [dir="rtl"] .x-suggestion-group {
42
+ border-left-width: var(--x-size-border-width-right-suggestion-group-default); }
24
43
  .x-suggestion-group {
25
44
  display: flex;
26
45
  flex-flow: row nowrap;
27
- align-items: flex-start;
28
46
  box-sizing: border-box;
29
- border: none;
30
47
  background-color: var(--x-color-background-suggestion-group-default);
31
48
  color: var(--x-color-text-suggestion-group-default);
49
+ border-color: var(--x-color-border-suggestion-group-default);
32
50
  font-family: var(--x-font-family-suggestion-group-default);
33
51
  font-size: var(--x-size-font-suggestion-group-default);
34
52
  line-height: var(--x-size-line-height-suggestion-group-default);
@@ -36,7 +54,11 @@
36
54
  cursor: pointer;
37
55
  padding-top: var(--x-size-padding-top-suggestion-group-default);
38
56
  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
39
- gap: var(--x-size-gap-suggestion-group-default); }
57
+ gap: var(--x-size-gap-suggestion-group-default);
58
+ border-style: solid;
59
+ border-top-width: var(--x-size-border-width-top-suggestion-group-default);
60
+ border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
61
+ border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default); }
40
62
  @media not all and (min-resolution: 0.001dpcm) {
41
63
  .x-suggestion-group {
42
64
  gap: 0; }
@@ -44,7 +66,8 @@
44
66
  margin-right: var(--x-size-gap-suggestion-group-default); } }
45
67
  .x-suggestion-group .x-suggestion {
46
68
  padding: 0;
47
- flex: 1 1 auto; }
69
+ flex: 1 1 auto;
70
+ border: none; }
48
71
  .x-suggestion-group .x-button {
49
72
  --x-color-background-button-default: transparent;
50
73
  --x-color-border-button-default: transparent;
package/design-system/tag-default.css CHANGED
@@ -71,6 +71,50 @@
71
71
  gap: 0; }
72
72
  .x-tag > *:not(:last-child) {
73
73
  margin-right: var(--x-size-gap-tag-default); } }
74
+ .x-tag.x-suggestion {
75
+ --x-color-background-suggestion-default: var(--x-color-background-tag-default);
76
+ --x-color-text-suggestion-default: var(--x-color-text-tag-default);
77
+ --x-color-border-suggestion-default: var(--x-color-border-tag-default);
78
+ --x-size-padding-top-suggestion-default: 0;
79
+ --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
80
+ --x-size-padding-bottom-suggestion-default: 0;
81
+ --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
82
+ --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
83
+ --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
84
+ --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
85
+ --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
86
+ --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
87
+ --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
88
+ --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
89
+ --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
90
+ --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
91
+ --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
92
+ --x-font-family-suggestion-default: var(--x-font-family-tag-default);
93
+ --x-size-font-suggestion-default: var(--x-size-font-tag-default);
94
+ --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
95
+ --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default); }
96
+ .x-tag.x-suggestion-group {
97
+ --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
98
+ --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
99
+ --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
100
+ --x-size-padding-top-suggestion-group-default: 0;
101
+ --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
102
+ --x-size-padding-bottom-suggestion-group-default: 0;
103
+ --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
104
+ --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
105
+ --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
106
+ --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
107
+ --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
108
+ --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
109
+ --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
110
+ --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
111
+ --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
112
+ --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
113
+ --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
114
+ --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
115
+ --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
116
+ --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
117
+ --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default); }
74
118
  .x-tag.x-filter {
75
119
  --x-color-background-filter-default: transparent;
76
120
  --x-size-border-width-filter-default: 0;