@synergy-design-system/metadata 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/data/core/asset/asset:sick2018-icons.json +1 -1
  3. package/data/core/asset/asset:sick2018-logos.json +1 -1
  4. package/data/core/asset/asset:sick2018-system-icons.json +1 -1
  5. package/data/core/asset/asset:sick2025-icons-fill.json +1 -1
  6. package/data/core/asset/asset:sick2025-icons-outline.json +1 -1
  7. package/data/core/asset/asset:sick2025-logos.json +1 -1
  8. package/data/core/asset/asset:sick2025-system-icons.json +1 -1
  9. package/data/core/setup/setup:angular-components-module.json +1 -1
  10. package/data/core/setup/setup:angular-forms-module.json +1 -1
  11. package/data/core/setup/setup:angular-package.json +2 -2
  12. package/data/core/setup/setup:angular-validators-module.json +1 -1
  13. package/data/core/setup/setup:assets-package.json +2 -2
  14. package/data/core/setup/setup:components-package.json +2 -2
  15. package/data/core/setup/setup:fonts-package.json +2 -2
  16. package/data/core/setup/setup:react-package.json +2 -2
  17. package/data/core/setup/setup:styles-package.json +2 -2
  18. package/data/core/setup/setup:tokens-package.json +2 -2
  19. package/data/core/setup/setup:vue-package.json +2 -2
  20. package/data/core/style/style:syn-body.json +1 -1
  21. package/data/core/style/style:syn-heading.json +1 -1
  22. package/data/core/style/style:syn-link-list.json +1 -1
  23. package/data/core/style/style:syn-link.json +1 -1
  24. package/data/core/style/style:syn-table-cell.json +1 -1
  25. package/data/core/style/style:syn-table.json +1 -1
  26. package/data/core/style/style:syn-weight.json +1 -1
  27. package/data/core/template/template:loading-screen.json +22 -0
  28. package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
  29. package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
  30. package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
  31. package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
  32. package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
  33. package/data/core/token/token:tokens-js-index-js.json +1 -1
  34. package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
  35. package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
  36. package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
  37. package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
  38. package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
  39. package/data/core/utility/utility:fonts-sick-intl.json +1 -1
  40. package/data/index.json +15 -1
  41. package/data/layers/examples/component/component:syn-combobox.md +14 -14
  42. package/data/layers/examples/style/style:syn-body.md +28 -1
  43. package/data/layers/examples/style/style:syn-heading.md +44 -1
  44. package/data/layers/examples/template/template:loading-screen.md +393 -0
  45. package/data/layers/full/component/component:syn-range/components/range.component.ts +2 -2
  46. package/data/layers/full/component/component:syn-validate/components/validate.component.ts +1 -1
  47. package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +20 -0
  48. package/data/layers/full/setup/setup:angular-package/angular/package.json +4 -4
  49. package/data/layers/full/setup/setup:assets-package/assets/CHANGELOG.md +8 -0
  50. package/data/layers/full/setup/setup:assets-package/assets/package.json +4 -4
  51. package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +18 -0
  52. package/data/layers/full/setup/setup:components-package/components/package.json +20 -20
  53. package/data/layers/full/setup/setup:fonts-package/fonts/CHANGELOG.md +8 -0
  54. package/data/layers/full/setup/setup:fonts-package/fonts/package.json +4 -4
  55. package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +20 -0
  56. package/data/layers/full/setup/setup:react-package/react/package.json +2 -2
  57. package/data/layers/full/setup/setup:styles-package/styles/CHANGELOG.md +21 -0
  58. package/data/layers/full/setup/setup:styles-package/styles/package.json +6 -6
  59. package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +21 -0
  60. package/data/layers/full/setup/setup:tokens-package/tokens/package.json +6 -6
  61. package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +20 -0
  62. package/data/layers/full/setup/setup:vue-package/vue/package.json +6 -6
  63. package/data/layers/full/styles/typography/body.css +6 -2
  64. package/data/layers/full/styles/typography/heading.css +9 -1
  65. package/data/layers/full/tokens/js/index.d.ts +16 -1
  66. package/data/layers/full/tokens/js/index.js +16 -1
  67. package/data/layers/full/tokens/scss/_tokens.scss +4 -1
  68. package/data/layers/full/tokens/themes/sick2018_dark.css +4 -1
  69. package/data/layers/full/tokens/themes/sick2018_light.css +4 -1
  70. package/data/layers/full/tokens/themes/sick2025_dark.css +4 -1
  71. package/data/layers/full/tokens/themes/sick2025_light.css +4 -1
  72. package/data/manifest.json +1 -1
  73. package/dist/public/domains/tokens.js +4 -4
  74. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1273](https://github.com/synergy-design-system/synergy-design-system/pull/1273) [`930328a`](https://github.com/synergy-design-system/synergy-design-system/commit/930328af3af87ba91738b89984ad7b11edd78ec5) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-29
8
+
9
+ feat: ✨ add new headline styles ([#1268](https://github.com/synergy-design-system/synergy-design-system/issues/1268))
10
+
11
+ This Release adds missing typographic classes:
12
+ - `.syn-heading--medium`
13
+ - `.syn-heading--4x-large`
14
+ - `.syn-body--2x-small`
15
+
16
+ ## 3.0.1
17
+
18
+ ### Patch Changes
19
+
20
+ - [#1263](https://github.com/synergy-design-system/synergy-design-system/pull/1263) [`f422a1f`](https://github.com/synergy-design-system/synergy-design-system/commit/f422a1f5e7c8d8970b086d914dbba3a5b3bb8d0b) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-04-28
21
+
22
+ fix: 🐛 dependency updates ([#258](https://github.com/synergy-design-system/synergy-design-system/issues/258))
23
+
3
24
  ## 3.0.0
4
25
 
5
26
  ### Major Changes
@@ -89029,7 +89029,7 @@
89029
89029
  "name": "sick2018 Icons",
89030
89030
  "package": "assets",
89031
89031
  "relations": [],
89032
- "since": "2.1.0",
89032
+ "since": "2.1.1",
89033
89033
  "sources": [
89034
89034
  "packages/assets/src/sick2018/js/index.ts"
89035
89035
  ],
@@ -17,7 +17,7 @@
17
17
  "name": "sick2018 Logos",
18
18
  "package": "assets",
19
19
  "relations": [],
20
- "since": "2.1.0",
20
+ "since": "2.1.1",
21
21
  "sources": [],
22
22
  "status": "stable",
23
23
  "tags": [
@@ -41,7 +41,7 @@
41
41
  "name": "sick2018 System Icons",
42
42
  "package": "assets",
43
43
  "relations": [],
44
- "since": "2.1.0",
44
+ "since": "2.1.1",
45
45
  "sources": [],
46
46
  "status": "stable",
47
47
  "tags": [
@@ -152200,7 +152200,7 @@
152200
152200
  "name": "sick2025 Icons (Fill)",
152201
152201
  "package": "assets",
152202
152202
  "relations": [],
152203
- "since": "2.1.0",
152203
+ "since": "2.1.1",
152204
152204
  "sources": [
152205
152205
  "packages/assets/src/sick2025/js/filled.ts"
152206
152206
  ],
@@ -152200,7 +152200,7 @@
152200
152200
  "name": "sick2025 Icons (Outline)",
152201
152201
  "package": "assets",
152202
152202
  "relations": [],
152203
- "since": "2.1.0",
152203
+ "since": "2.1.1",
152204
152204
  "sources": [
152205
152205
  "packages/assets/src/sick2025/js/outline.ts"
152206
152206
  ],
@@ -23,7 +23,7 @@
23
23
  "name": "sick2025 Logos",
24
24
  "package": "assets",
25
25
  "relations": [],
26
- "since": "2.1.0",
26
+ "since": "2.1.1",
27
27
  "sources": [],
28
28
  "status": "stable",
29
29
  "tags": [
@@ -41,7 +41,7 @@
41
41
  "name": "sick2025 System Icons",
42
42
  "package": "assets",
43
43
  "relations": [],
44
- "since": "2.1.0",
44
+ "since": "2.1.1",
45
45
  "sources": [],
46
46
  "status": "stable",
47
47
  "tags": [
@@ -21,7 +21,7 @@
21
21
  "name": "Angular Components Module",
22
22
  "package": "angular",
23
23
  "relations": [],
24
- "since": "3.12.0",
24
+ "since": "3.13.0",
25
25
  "sources": [
26
26
  "packages/angular/modules/synergy/synergy.module.ts",
27
27
  "packages/angular/components/index.ts"
@@ -22,7 +22,7 @@
22
22
  "name": "Angular Forms Module",
23
23
  "package": "angular",
24
24
  "relations": [],
25
- "since": "3.12.0",
25
+ "since": "3.13.0",
26
26
  "sources": [
27
27
  "packages/angular/modules/forms/forms.module.ts"
28
28
  ],
@@ -2,7 +2,7 @@
2
2
  "custom": {
3
3
  "framework": "angular",
4
4
  "packageName": "@synergy-design-system/angular",
5
- "packageVersion": "3.12.0",
5
+ "packageVersion": "3.13.0",
6
6
  "subpathExports": [
7
7
  ".",
8
8
  "./components/*",
@@ -39,7 +39,7 @@
39
39
  "name": "Angular Framework Package",
40
40
  "package": "angular",
41
41
  "relations": [],
42
- "since": "3.12.0",
42
+ "since": "3.13.0",
43
43
  "sources": [
44
44
  "packages/angular/README.md",
45
45
  "packages/angular/CHANGELOG.md",
@@ -22,7 +22,7 @@
22
22
  "name": "Angular Validators Module",
23
23
  "package": "angular",
24
24
  "relations": [],
25
- "since": "3.12.0",
25
+ "since": "3.13.0",
26
26
  "sources": [
27
27
  "packages/angular/directives/validators/validators.ts"
28
28
  ],
@@ -14,7 +14,7 @@
14
14
  "./src/sick2025/*"
15
15
  ],
16
16
  "packageName": "@synergy-design-system/assets",
17
- "packageVersion": "2.1.0"
17
+ "packageVersion": "2.1.1"
18
18
  },
19
19
  "id": "setup:assets-package",
20
20
  "kind": "setup",
@@ -41,7 +41,7 @@
41
41
  "name": "Assets Package",
42
42
  "package": "assets",
43
43
  "relations": [],
44
- "since": "2.1.0",
44
+ "since": "2.1.1",
45
45
  "sources": [
46
46
  "packages/assets/README.md",
47
47
  "packages/assets/CHANGELOG.md",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "custom": {
3
3
  "packageName": "@synergy-design-system/components",
4
- "packageVersion": "3.12.0"
4
+ "packageVersion": "3.13.0"
5
5
  },
6
6
  "id": "setup:components-package",
7
7
  "kind": "setup",
@@ -40,7 +40,7 @@
40
40
  "name": "Components Package",
41
41
  "package": "components",
42
42
  "relations": [],
43
- "since": "3.12.0",
43
+ "since": "3.13.0",
44
44
  "sources": [
45
45
  "packages/components/README.md",
46
46
  "packages/components/CHANGELOG.md",
@@ -9,7 +9,7 @@
9
9
  "./src/*"
10
10
  ],
11
11
  "packageName": "@synergy-design-system/fonts",
12
- "packageVersion": "1.0.5"
12
+ "packageVersion": "1.0.6"
13
13
  },
14
14
  "id": "setup:fonts-package",
15
15
  "kind": "setup",
@@ -32,7 +32,7 @@
32
32
  "name": "Fonts Package",
33
33
  "package": "fonts",
34
34
  "relations": [],
35
- "since": "1.0.5",
35
+ "since": "1.0.6",
36
36
  "sources": [
37
37
  "packages/fonts/README.md",
38
38
  "packages/fonts/CHANGELOG.md",
@@ -2,7 +2,7 @@
2
2
  "custom": {
3
3
  "framework": "react",
4
4
  "packageName": "@synergy-design-system/react",
5
- "packageVersion": "3.12.0",
5
+ "packageVersion": "3.13.0",
6
6
  "subpathExports": [
7
7
  ".",
8
8
  "./components/*",
@@ -42,7 +42,7 @@
42
42
  "name": "React Framework Package",
43
43
  "package": "react",
44
44
  "relations": [],
45
- "since": "3.12.0",
45
+ "since": "3.13.0",
46
46
  "sources": [
47
47
  "packages/react/README.md",
48
48
  "packages/react/CHANGELOG.md",
@@ -6,7 +6,7 @@
6
6
  "./package.json"
7
7
  ],
8
8
  "packageName": "@synergy-design-system/styles",
9
- "packageVersion": "2.0.3"
9
+ "packageVersion": "2.1.0"
10
10
  },
11
11
  "id": "setup:styles-package",
12
12
  "kind": "setup",
@@ -33,7 +33,7 @@
33
33
  "name": "Styles Package",
34
34
  "package": "styles",
35
35
  "relations": [],
36
- "since": "2.0.3",
36
+ "since": "2.1.0",
37
37
  "sources": [
38
38
  "packages/styles/README.md",
39
39
  "packages/styles/CHANGELOG.md",
@@ -24,7 +24,7 @@
24
24
  "./themes/*"
25
25
  ],
26
26
  "packageName": "@synergy-design-system/tokens",
27
- "packageVersion": "3.12.0"
27
+ "packageVersion": "3.13.0"
28
28
  },
29
29
  "id": "setup:tokens-package",
30
30
  "kind": "setup",
@@ -51,7 +51,7 @@
51
51
  "name": "Tokens Package",
52
52
  "package": "tokens",
53
53
  "relations": [],
54
- "since": "3.12.0",
54
+ "since": "3.13.0",
55
55
  "sources": [
56
56
  "packages/tokens/BREAKING_CHANGES.md",
57
57
  "packages/tokens/CHANGELOG.md",
@@ -2,7 +2,7 @@
2
2
  "custom": {
3
3
  "framework": "vue",
4
4
  "packageName": "@synergy-design-system/vue",
5
- "packageVersion": "3.12.0"
5
+ "packageVersion": "3.13.0"
6
6
  },
7
7
  "id": "setup:vue-package",
8
8
  "kind": "setup",
@@ -33,7 +33,7 @@
33
33
  "name": "Vue Framework Package",
34
34
  "package": "vue",
35
35
  "relations": [],
36
- "since": "3.12.0",
36
+ "since": "3.13.0",
37
37
  "sources": [
38
38
  "packages/vue/README.md",
39
39
  "packages/vue/CHANGELOG.md",
@@ -21,7 +21,7 @@
21
21
  "name": "syn-body",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/typography/body.css"
27
27
  ],
@@ -21,7 +21,7 @@
21
21
  "name": "syn-heading",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/typography/heading.css"
27
27
  ],
@@ -21,7 +21,7 @@
21
21
  "name": "syn-link-list",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/link-list/index.css"
27
27
  ],
@@ -21,7 +21,7 @@
21
21
  "name": "syn-link",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/link/index.css"
27
27
  ],
@@ -21,7 +21,7 @@
21
21
  "name": "syn-table-cell",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/tables/table-cell.css"
27
27
  ],
@@ -21,7 +21,7 @@
21
21
  "name": "syn-table",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/tables/table.css"
27
27
  ],
@@ -21,7 +21,7 @@
21
21
  "name": "syn-weight",
22
22
  "package": "styles",
23
23
  "relations": [],
24
- "since": "2.0.3",
24
+ "since": "2.1.0",
25
25
  "sources": [
26
26
  "packages/styles/src/typography/weight.css"
27
27
  ],
@@ -0,0 +1,22 @@
1
+ {
2
+ "custom": {},
3
+ "id": "template:loading-screen",
4
+ "kind": "template",
5
+ "layers": {
6
+ "examples": [
7
+ {
8
+ "layer": "examples",
9
+ "path": "layers/examples/template/template:loading-screen.md"
10
+ }
11
+ ]
12
+ },
13
+ "name": "Loading Screen",
14
+ "package": "docs",
15
+ "relations": [],
16
+ "since": "1.0.0",
17
+ "sources": [],
18
+ "status": "stable",
19
+ "tags": [
20
+ "template"
21
+ ]
22
+ }
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018-dark.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2018-dark.json"
24
24
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018-light.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2018-light.json"
24
24
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025-dark.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2025-dark.json"
24
24
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025-light.json",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/src/figma-variables/output/sick2025-light.json"
24
24
  ],
@@ -17,7 +17,7 @@
17
17
  "name": "index.d.ts",
18
18
  "package": "tokens",
19
19
  "relations": [],
20
- "since": "3.12.0",
20
+ "since": "3.13.0",
21
21
  "sources": [
22
22
  "packages/tokens/dist/js/index.d.ts"
23
23
  ],
@@ -17,7 +17,7 @@
17
17
  "name": "index.js",
18
18
  "package": "tokens",
19
19
  "relations": [],
20
- "since": "3.12.0",
20
+ "since": "3.13.0",
21
21
  "sources": [
22
22
  "packages/tokens/dist/js/index.js"
23
23
  ],
@@ -17,7 +17,7 @@
17
17
  "name": "_tokens.scss",
18
18
  "package": "tokens",
19
19
  "relations": [],
20
- "since": "3.12.0",
20
+ "since": "3.13.0",
21
21
  "sources": [
22
22
  "packages/tokens/dist/scss/_tokens.scss"
23
23
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018_dark.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2018_dark.css"
24
24
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2018_light.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2018_light.css"
24
24
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025_dark.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2025_dark.css"
24
24
  ],
@@ -18,7 +18,7 @@
18
18
  "name": "sick2025_light.css",
19
19
  "package": "tokens",
20
20
  "relations": [],
21
- "since": "3.12.0",
21
+ "since": "3.13.0",
22
22
  "sources": [
23
23
  "packages/tokens/dist/themes/sick2025_light.css"
24
24
  ],
@@ -20,7 +20,7 @@
20
20
  "name": "SICK Intl Font Source",
21
21
  "package": "fonts",
22
22
  "relations": [],
23
- "since": "1.0.5",
23
+ "since": "1.0.6",
24
24
  "sources": [
25
25
  "packages/fonts/src/sick-intl/font.css",
26
26
  "packages/fonts/src/sick-intl/LICENSE"
package/data/index.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "builtAt": "2026-04-27T09:17:35.205Z",
2
+ "builtAt": "2026-04-29T12:24:03.622Z",
3
3
  "entities": [
4
4
  {
5
5
  "corePath": "data/core/asset/asset:sick2018-icons.json",
@@ -1503,6 +1503,20 @@
1503
1503
  "template"
1504
1504
  ]
1505
1505
  },
1506
+ {
1507
+ "corePath": "data/core/template/template:loading-screen.json",
1508
+ "id": "template:loading-screen",
1509
+ "kind": "template",
1510
+ "layers": {
1511
+ "examples": 1
1512
+ },
1513
+ "name": "Loading Screen",
1514
+ "search": [
1515
+ "template:loading-screen",
1516
+ "Loading Screen",
1517
+ "template"
1518
+ ]
1519
+ },
1506
1520
  {
1507
1521
  "corePath": "data/core/template/template:localization.json",
1508
1522
  "id": "template:localization",
@@ -492,20 +492,20 @@ The filtered options shown in the list can be customized by passing a function t
492
492
  // import { highlightOptionRenderer } from '@synergy-design-system/components';
493
493
 
494
494
  // preview-ignore:start
495
- const highlightOptionRenderer = (t, e) => {
496
- if (!e) return t;
497
- const o = t.cloneNode(!0),
498
- s = o.getTextLabel();
499
- o.selected = t.selected;
500
- const n = s.toLowerCase().indexOf(e.toLowerCase()),
501
- l = o.innerHTML.indexOf(s),
502
- h = document.createElement("mark");
503
- ((h.textContent = s.slice(n, n + e.length)),
504
- h.classList.add("syn-highlight-style"));
505
- const c = s.replace(new RegExp(e, "i"), h.outerHTML),
506
- f = o.innerHTML.slice(0, l),
507
- T = o.innerHTML.slice(l + s.length);
508
- return ((o.innerHTML = f.concat(c, T)), o);
495
+ const highlightOptionRenderer = (e, t) => {
496
+ if (!t) return e;
497
+ let n = e.cloneNode(!0),
498
+ r = n.getTextLabel();
499
+ n.selected = e.selected;
500
+ let i = r.toLowerCase().indexOf(t.toLowerCase()),
501
+ a = n.innerHTML.indexOf(r),
502
+ o = document.createElement(`mark`);
503
+ ((o.textContent = r.slice(i, i + t.length)),
504
+ o.classList.add(`syn-highlight-style`));
505
+ let s = r.replace(new RegExp(t, `i`), o.outerHTML),
506
+ c = n.innerHTML.slice(0, a),
507
+ l = n.innerHTML.slice(a + r.length);
508
+ return ((n.innerHTML = c.concat(s, l)), n);
509
509
  };
510
510
  // preview-ignore:end
511
511
 
@@ -1,5 +1,32 @@
1
1
  ## Default
2
2
 
3
3
  ```html
4
- <span class="syn-body--x-small"> This is a default body text </span>
4
+ <span class="syn-body--2x-small"> This is a default body text </span>
5
+ ```
6
+
7
+ ---
8
+
9
+ ## Available Body Text
10
+
11
+ ```html
12
+ <section class="body-stories-list">
13
+ <p class="syn-body--2x-small">
14
+ The quick brown fox jumped over the lazy dog.
15
+ </p>
16
+ <p class="syn-body--x-small">The quick brown fox jumped over the lazy dog.</p>
17
+ <p class="syn-body--small">The quick brown fox jumped over the lazy dog.</p>
18
+ <p class="syn-body--medium">The quick brown fox jumped over the lazy dog.</p>
19
+ <p class="syn-body--large">The quick brown fox jumped over the lazy dog.</p>
20
+ </section>
21
+ <style>
22
+ section.body-stories-list {
23
+ display: flex;
24
+ gap: var(--syn-spacing-medium);
25
+ flex-direction: column;
26
+
27
+ p {
28
+ margin: 0;
29
+ }
30
+ }
31
+ </style>
5
32
  ```
@@ -1,5 +1,48 @@
1
1
  ## Default
2
2
 
3
3
  ```html
4
- <span class="syn-heading--3x-large"> This is a default heading text </span>
4
+ <span class="syn-heading--4x-large"> This is a default heading text </span>
5
+ ```
6
+
7
+ ---
8
+
9
+ ## Available Headings
10
+
11
+ ```html
12
+ <section class="heading-stories-list">
13
+ <h6 class="syn-heading--medium">
14
+ The quick brown fox jumped over the lazy dog.
15
+ </h6>
16
+ <h5 class="syn-heading--large">
17
+ The quick brown fox jumped over the lazy dog.
18
+ </h5>
19
+ <h4 class="syn-heading--x-large">
20
+ The quick brown fox jumped over the lazy dog.
21
+ </h4>
22
+ <h3 class="syn-heading--2x-large">
23
+ The quick brown fox jumped over the lazy dog.
24
+ </h3>
25
+ <h2 class="syn-heading--3x-large">
26
+ The quick brown fox jumped over the lazy dog.
27
+ </h2>
28
+ <h1 class="syn-heading--4x-large">
29
+ The quick brown fox jumped over the lazy dog.
30
+ </h1>
31
+ </section>
32
+ <style>
33
+ section.heading-stories-list {
34
+ display: flex;
35
+ gap: var(--syn-spacing-medium);
36
+ flex-direction: column;
37
+
38
+ h1,
39
+ h2,
40
+ h3,
41
+ h4,
42
+ h5,
43
+ h6 {
44
+ margin: 0;
45
+ }
46
+ }
47
+ </style>
5
48
  ```