@kickstartds/ds-agency-premium 1.6.71--canary.1957.4f76715.0 → 1.6.71--canary.45.1960.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 (87) hide show
  1. package/dist/{BlogOverviewProps-9f207f1c.d.ts → BlogOverviewProps-d62a0a9a.d.ts} +2 -2
  2. package/dist/{BlogPostProps-6b3cff22.d.ts → BlogPostProps-c760fd2a.d.ts} +2 -2
  3. package/dist/PageProps-aa29c554.d.ts +1 -1
  4. package/dist/{SectionProps-2fd5dbde.d.ts → SectionProps-21d04028.d.ts} +1 -1
  5. package/dist/components/blog-head/index.d.ts +1 -1
  6. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +1 -3
  7. package/dist/components/blog-overview/index.d.ts +1 -1
  8. package/dist/components/blog-post/blog-post.schema.dereffed.json +1 -3
  9. package/dist/components/blog-post/index.d.ts +1 -1
  10. package/dist/components/blog-teaser/index.d.ts +1 -1
  11. package/dist/components/business-card/business-card.css +2 -0
  12. package/dist/components/button/button.css +2 -2
  13. package/dist/components/footer/footer.css +3 -3
  14. package/dist/components/footer/footer.schema.dereffed.json +12 -20
  15. package/dist/components/header/header.schema.dereffed.json +12 -20
  16. package/dist/components/headline/headline.css +2 -44
  17. package/dist/components/hero/hero.css +0 -22
  18. package/dist/components/index/index.d.ts +2 -2
  19. package/dist/components/nav-dropdown/nav-dropdown.css +3 -3
  20. package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +12 -20
  21. package/dist/components/nav-main/nav-main.schema.dereffed.json +12 -20
  22. package/dist/components/nav-main/nav-main.schema.json +12 -20
  23. package/dist/components/nav-topbar/nav-topbar.css +3 -3
  24. package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +12 -20
  25. package/dist/components/page/page.schema.dereffed.json +1 -3
  26. package/dist/components/page-wrapper/index.js +0 -6
  27. package/dist/components/page-wrapper/tokens.css +249 -249
  28. package/dist/components/presets.json +26 -42
  29. package/dist/components/section/index.d.ts +1 -1
  30. package/dist/components/section/index.js +1 -3
  31. package/dist/components/section/section.css +19 -60
  32. package/dist/components/section/section.schema.dereffed.json +1 -3
  33. package/dist/components/section/section.schema.json +1 -1
  34. package/dist/components/settings/settings.schema.dereffed.json +24 -40
  35. package/dist/components/stats/stats.css +4 -4
  36. package/dist/components/teaser-card/teaser-card.css +12 -10
  37. package/dist/global.css +2 -2
  38. package/dist/static/favicon/android-chrome-192x192.png +0 -0
  39. package/dist/static/favicon/android-chrome-512x512.png +0 -0
  40. package/dist/static/favicon/apple-touch-icon.png +0 -0
  41. package/dist/static/favicon/browserconfig.xml +9 -0
  42. package/dist/static/favicon/favicon-16x16.png +0 -0
  43. package/dist/static/favicon/favicon-192-192.png +20 -0
  44. package/dist/static/favicon/favicon-32x32.png +0 -0
  45. package/dist/static/favicon/favicon.ico +0 -0
  46. package/dist/static/favicon/mstile-144x144.png +0 -0
  47. package/dist/static/favicon/mstile-150x150.png +0 -0
  48. package/dist/static/favicon/mstile-310x150.png +0 -0
  49. package/dist/static/favicon/mstile-310x310.png +0 -0
  50. package/dist/static/favicon/mstile-70x70.png +0 -0
  51. package/dist/static/favicon/safari-pinned-tab.svg +30 -0
  52. package/dist/static/favicon/site.webmanifest +19 -1
  53. package/dist/static/logo-inverted.svg +12 -27
  54. package/dist/static/logo.svg +12 -27
  55. package/dist/tokens/IconSprite.js +0 -6
  56. package/dist/tokens/icon-sprite.html +0 -2
  57. package/dist/tokens/themes.css +4 -4
  58. package/dist/tokens/tokens.css +249 -249
  59. package/dist/tokens/tokens.js +376 -377
  60. package/package.json +1 -1
  61. package/dist/static/guenther/brands/cadillac.png +0 -0
  62. package/dist/static/guenther/brands/corvette.png +0 -0
  63. package/dist/static/guenther/brands/infiniti.png +0 -0
  64. package/dist/static/guenther/brands/isuzu.png +0 -0
  65. package/dist/static/guenther/brands/kia.png +0 -0
  66. package/dist/static/guenther/brands/maserati.png +0 -0
  67. package/dist/static/guenther/brands/micro.png +0 -0
  68. package/dist/static/guenther/brands/msg.png +0 -0
  69. package/dist/static/guenther/brands/nissan.png +0 -0
  70. package/dist/static/guenther/brands/saab.png +0 -0
  71. package/dist/static/guenther/brands/subaru.png +0 -0
  72. package/dist/static/guenther/car-1.webp +0 -0
  73. package/dist/static/guenther/car-2.webp +0 -0
  74. package/dist/static/guenther/car-cutout-1.avif +0 -0
  75. package/dist/static/guenther/car-cutout-2.avif +0 -0
  76. package/dist/static/guenther/car-cutout-3.png +0 -0
  77. package/dist/static/guenther/car-red.png +0 -0
  78. package/dist/static/guenther/car-store.png +0 -0
  79. package/dist/static/guenther/car-yellow.webp +0 -0
  80. package/dist/static/guenther/contact.jpg +0 -0
  81. package/dist/static/guenther/header-2.png +0 -0
  82. package/dist/static/guenther/header.jpg +0 -0
  83. package/dist/static/guenther/header.png +0 -0
  84. package/dist/static/guenther/kia-header.webp +0 -0
  85. package/dist/static/guenther/visual.png +0 -0
  86. /package/dist/{BlogHeadProps-c04a5ed8.d.ts → BlogHeadProps-f5855e93.d.ts} +0 -0
  87. /package/dist/{BlogTeaserProps-f5855e93.d.ts → BlogTeaserProps-d62a0a9a.d.ts} +0 -0
@@ -2692,7 +2692,7 @@
2692
2692
  "id": "layout-footer--footer",
2693
2693
  "group": "Layout/Footer",
2694
2694
  "name": "Footer",
2695
- "code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Fahrzeugsuche',\n url: '#'\n },\n {\n items: [\n {\n label: 'Nissan',\n url: '#'\n },\n {\n active: true,\n label: 'Kia',\n url: '#'\n },\n {\n label: 'Maserati',\n url: '#'\n },\n {\n label: 'Corvette',\n url: '#'\n }\n ],\n label: 'Marken',\n url: '#'\n },\n {\n label: 'Standorte',\n url: '#'\n },\n {\n label: 'Bonusprogramm',\n url: '#'\n },\n {\n label: 'News',\n url: '#'\n },\n {\n label: 'Jobs',\n url: '#'\n },\n {\n label: 'Kontakt',\n url: '#'\n }\n ]}\n/>",
2695
+ "code": "<Footer\n byline=\"© 2024 systemics Inc. All rights reserved.\"\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n inverted: false,\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
2696
2696
  "args": {
2697
2697
  "logo": {
2698
2698
  "src": "/logo.svg",
@@ -2708,51 +2708,43 @@
2708
2708
  "navItems": [
2709
2709
  {
2710
2710
  "url": "#",
2711
- "label": "Fahrzeugsuche",
2711
+ "label": "Active Item",
2712
2712
  "active": true
2713
2713
  },
2714
2714
  {
2715
2715
  "url": "#",
2716
- "label": "Marken",
2716
+ "label": "Navigation Item"
2717
+ },
2718
+ {
2719
+ "url": "#",
2720
+ "label": "Dropdown",
2717
2721
  "items": [
2718
2722
  {
2719
2723
  "url": "#",
2720
- "label": "Nissan"
2724
+ "label": "Level 2 Item"
2721
2725
  },
2722
2726
  {
2723
2727
  "url": "#",
2724
- "label": "Kia",
2728
+ "label": "Active Item",
2725
2729
  "active": true
2726
2730
  },
2727
2731
  {
2728
2732
  "url": "#",
2729
- "label": "Maserati"
2733
+ "label": "An Item with a longer Label"
2730
2734
  },
2731
2735
  {
2732
2736
  "url": "#",
2733
- "label": "Corvette"
2737
+ "label": "And One last one"
2734
2738
  }
2735
2739
  ]
2736
2740
  },
2737
2741
  {
2738
2742
  "url": "#",
2739
- "label": "Standorte"
2740
- },
2741
- {
2742
- "url": "#",
2743
- "label": "Bonusprogramm"
2744
- },
2745
- {
2746
- "url": "#",
2747
- "label": "News"
2748
- },
2749
- {
2750
- "url": "#",
2751
- "label": "Jobs"
2743
+ "label": "One more Item"
2752
2744
  },
2753
2745
  {
2754
2746
  "url": "#",
2755
- "label": "Kontakt"
2747
+ "label": "Last Item"
2756
2748
  }
2757
2749
  ]
2758
2750
  },
@@ -2933,7 +2925,7 @@
2933
2925
  "id": "layout-header--header",
2934
2926
  "group": "Layout/Header",
2935
2927
  "name": "Header",
2936
- "code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Fahrzeugsuche',\n url: '#'\n },\n {\n items: [\n {\n label: 'Nissan',\n url: '#'\n },\n {\n active: true,\n label: 'Kia',\n url: '#'\n },\n {\n label: 'Maserati',\n url: '#'\n },\n {\n label: 'Corvette',\n url: '#'\n }\n ],\n label: 'Marken',\n url: '#'\n },\n {\n label: 'Standorte',\n url: '#'\n },\n {\n label: 'Bonusprogramm',\n url: '#'\n },\n {\n label: 'News',\n url: '#'\n },\n {\n label: 'Jobs',\n url: '#'\n },\n {\n label: 'Kontakt',\n url: '#'\n }\n ]}\n/>",
2928
+ "code": "<Header\n logo={{\n alt: 'Systemics Logo',\n height: 40,\n homepageHref: '#',\n src: '/logo.svg',\n srcInverted: '/logo-inverted.svg',\n width: 176\n }}\n navItems={[\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'Navigation Item',\n url: '#'\n },\n {\n items: [\n {\n label: 'Level 2 Item',\n url: '#'\n },\n {\n active: true,\n label: 'Active Item',\n url: '#'\n },\n {\n label: 'An Item with a longer Label',\n url: '#'\n },\n {\n label: 'And One last one',\n url: '#'\n }\n ],\n label: 'Dropdown',\n url: '#'\n },\n {\n label: 'One more Item',\n url: '#'\n },\n {\n label: 'Last Item',\n url: '#'\n }\n ]}\n/>",
2937
2929
  "args": {
2938
2930
  "logo": {
2939
2931
  "src": "/logo.svg",
@@ -2950,51 +2942,43 @@
2950
2942
  "navItems": [
2951
2943
  {
2952
2944
  "url": "#",
2953
- "label": "Fahrzeugsuche",
2945
+ "label": "Active Item",
2954
2946
  "active": true
2955
2947
  },
2956
2948
  {
2957
2949
  "url": "#",
2958
- "label": "Marken",
2950
+ "label": "Navigation Item"
2951
+ },
2952
+ {
2953
+ "url": "#",
2954
+ "label": "Dropdown",
2959
2955
  "items": [
2960
2956
  {
2961
2957
  "url": "#",
2962
- "label": "Nissan"
2958
+ "label": "Level 2 Item"
2963
2959
  },
2964
2960
  {
2965
2961
  "url": "#",
2966
- "label": "Kia",
2962
+ "label": "Active Item",
2967
2963
  "active": true
2968
2964
  },
2969
2965
  {
2970
2966
  "url": "#",
2971
- "label": "Maserati"
2967
+ "label": "An Item with a longer Label"
2972
2968
  },
2973
2969
  {
2974
2970
  "url": "#",
2975
- "label": "Corvette"
2971
+ "label": "And One last one"
2976
2972
  }
2977
2973
  ]
2978
2974
  },
2979
2975
  {
2980
2976
  "url": "#",
2981
- "label": "Standorte"
2982
- },
2983
- {
2984
- "url": "#",
2985
- "label": "Bonusprogramm"
2986
- },
2987
- {
2988
- "url": "#",
2989
- "label": "News"
2990
- },
2991
- {
2992
- "url": "#",
2993
- "label": "Jobs"
2977
+ "label": "One more Item"
2994
2978
  },
2995
2979
  {
2996
2980
  "url": "#",
2997
- "label": "Kontakt"
2981
+ "label": "Last Item"
2998
2982
  }
2999
2983
  ]
3000
2984
  },
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes, FC, PropsWithChildren } from "react";
3
- import { SectionProps } from "../../SectionProps-2fd5dbde.js";
3
+ import { SectionProps } from "../../SectionProps-21d04028.js";
4
4
  declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -42,9 +42,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
42
42
  spotlight,
43
43
  content?.mode === "slider",
44
44
  ]);
45
- return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style &&
46
- style !== "default" &&
47
- `dsa-section--style dsa-section--style-${style}`, transition &&
45
+ return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style && style !== "default" && `dsa-section-style--${style}`, transition &&
48
46
  transition !== "none" &&
49
47
  `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
50
48
  ? "default"
@@ -26,20 +26,18 @@
26
26
  --dsa-section--background-color_default: var(--ks-background-color-default);
27
27
  --dsa-section--background-color_accent: var(--ks-background-color-accent);
28
28
  --dsa-section--background-color_bold: var(--ks-background-color-bold);
29
- --dsa-section_shine-left--background-image: radial-gradient(
30
- 80% 150% at 20% 50%,
31
- var(--ks-color-fg-inverted),
32
- var(--ks-color-bg-inverted-alpha-8)
29
+ --dsa-section--transition_to-default: linear-gradient(
30
+ 178deg,
31
+ transparent 75%,
32
+ var(--ks-background-color-default) 75%
33
33
  );
34
- --dsa-section_shine-right--background-image: radial-gradient(
35
- 80% 150% at 80% 50%,
36
- var(--ks-color-fg-inverted),
37
- var(--ks-color-bg-inverted-alpha-8)
34
+ --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
35
+ --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
36
+ --dsa-section--transition_to-inverted: linear-gradient(
37
+ 178deg,
38
+ transparent 75%,
39
+ var(--ks-background-color-default-inverted) 75%
38
40
  );
39
- --dsa-section--transition_to-default: linear-gradient(transparent, var(--ks-background-color-default));
40
- --dsa-section--transition_to-accent: linear-gradient(transparent, var(--ks-background-color-accent));
41
- --dsa-section--transition_to-bold: linear-gradient(transparent, var(--ks-background-color-bold));
42
- --dsa-section--transition_to-inverted: linear-gradient(transparent, var(--ks-background-color-default-inverted));
43
41
  --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
44
42
  --dsa-section__slider-arrow--size: 2rem;
45
43
  --dsa-section__slider-arrow--padding: 0.5em;
@@ -51,18 +49,6 @@
51
49
  --dsa-section__spotlight--blur: 0%;
52
50
  --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
53
51
  }
54
- .dsa-section[ks-inverted=true] {
55
- --dsa-section_shine-left--background-image: radial-gradient(
56
- 70% 150% at 20% 50%,
57
- var(--ks-color-fg-inverted-alpha-8-base),
58
- var(--ks-color-bg)
59
- );
60
- --dsa-section_shine-right--background-image: radial-gradient(
61
- 70% 150% at 80% 50%,
62
- var(--ks-color-fg-inverted-alpha-87-base),
63
- var(--ks-color-bg)
64
- );
65
- }
66
52
 
67
53
  .l-section.dsa-section {
68
54
  --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));
@@ -95,14 +81,11 @@
95
81
  }
96
82
 
97
83
  .l-section.dsa-section {
98
- --dsa-section--background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
99
84
  background-image: var(--dsa-section--background-image);
100
- background-color: var(--dsa-section--background-color, var(--ks-color-bg));
85
+ background-color: var(--dsa-section--background-color_default, var(--ks-color-bg));
101
86
  position: relative;
102
87
  }
103
88
  .l-section.dsa-section .l-section__container {
104
- position: relative;
105
- z-index: 2;
106
89
  font: var(--ks-font-copy-m);
107
90
  }
108
91
  .l-section.dsa-section.l-section--gutter-large {
@@ -115,10 +98,10 @@
115
98
  --l-section--gutter: var(--dsa-section--gutter_none);
116
99
  }
117
100
  .l-section.dsa-section.l-section--accent {
118
- --dsa-section--background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
101
+ background-color: var(--dsa-section--background-color_accent, var(--ks-background-color-accent));
119
102
  }
120
103
  .l-section.dsa-section.l-section--bold {
121
- --dsa-section--background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
104
+ background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
122
105
  }
123
106
  .l-section.dsa-section.dsa-section--transition-to-accent {
124
107
  background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
@@ -141,43 +124,19 @@
141
124
  .l-section.dsa-section--header-spacing.l-section--space-before-small {
142
125
  padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
143
126
  }
144
- .l-section.dsa-section--style::before {
145
- content: "";
146
- position: absolute;
147
- top: 0;
148
- left: 0;
149
- width: 100%;
150
- height: 100%;
151
- z-index: 0;
152
- }
153
- .l-section.dsa-section--style-framed {
127
+ .l-section.dsa-section-style--framed {
154
128
  background-color: var(--ks-background-color-accent);
155
129
  }
156
- .l-section.dsa-section--style-framed .l-section__container--content .l-section__content {
130
+ .l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
157
131
  padding: var(--dsa-section--space_default);
158
132
  background-color: var(--ks-background-color-default);
159
133
  border-radius: var(--ks-border-radius-surface);
160
134
  }
161
- .l-section.dsa-section--style-shine-left::before {
162
- background-image: var(--dsa-section_shine-left--background-image, radial-gradient(70% 150% at 20% 50%, var(--ks-color-fg-inverted), var(--ks-color-bg-inverted-alpha-7)));
163
- }
164
- .l-section.dsa-section--style-shine-right::before {
165
- background-image: var(--dsa-section_shine-right--background-image, radial-gradient(70% 150% at 80% 50%, var(--ks-color-fg-inverted-alpha-8-base), var(--ks-color-bg)));
135
+ .l-section.dsa-section-style--deko {
136
+ background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
166
137
  }
167
- .l-section.dsa-section--style-carbon::before {
168
- background: radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 0 0, radial-gradient(var(--ks-color-fg-inverted-alpha-7) 15%, transparent 16%) 8px 8px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 0 1px, radial-gradient(var(--ks-color-fg-alpha-9) 15%, transparent 20%) 8px 9px;
169
- background-size: 16px 16px;
170
- z-index: 1;
171
- }
172
- .l-section.dsa-section--style-carbon::after {
173
- content: "";
174
- position: absolute;
175
- top: 0;
176
- left: 0;
177
- width: 100%;
178
- height: 100%;
179
- z-index: 0;
180
- background: linear-gradient(180deg, var(--ks-color-fg-alpha-9) 0%, transparent 10px), linear-gradient(180deg, transparent calc(100% - 10px), var(--ks-color-fg-alpha-9) 100%), radial-gradient(100% 100% at 50% 50%, var(--ks-color-bg), var(--ks-color-bg-to-fg-1));
138
+ .l-section.dsa-section-style--colorful {
139
+ background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
181
140
  }
182
141
  .l-section.dsa-section--spotlight {
183
142
  position: relative;
@@ -25,9 +25,7 @@
25
25
  "enum": [
26
26
  "default",
27
27
  "framed",
28
- "shine-left",
29
- "shine-right",
30
- "carbon"
28
+ "deko"
31
29
  ],
32
30
  "default": "default"
33
31
  },
@@ -16,7 +16,7 @@
16
16
  "type": "string",
17
17
  "title": "Style",
18
18
  "description": "Style of background",
19
- "enum": ["default", "framed", "shine-left", "shine-right", "carbon"],
19
+ "enum": ["default", "framed", "deko"],
20
20
  "default": "default"
21
21
  },
22
22
  "backgroundColor": {
@@ -132,51 +132,43 @@
132
132
  "examples": [
133
133
  [
134
134
  {
135
- "label": "Fahrzeugsuche",
135
+ "label": "Active Item",
136
136
  "url": "#",
137
137
  "active": true
138
138
  },
139
139
  {
140
- "label": "Marken",
140
+ "label": "Navigation Item",
141
+ "url": "#"
142
+ },
143
+ {
144
+ "label": "Dropdown",
141
145
  "url": "#",
142
146
  "items": [
143
147
  {
144
- "label": "Nissan",
148
+ "label": "Level 2 Item",
145
149
  "url": "#"
146
150
  },
147
151
  {
148
- "label": "Kia",
152
+ "label": "Active Item",
149
153
  "active": true,
150
154
  "url": "#"
151
155
  },
152
156
  {
153
- "label": "Maserati",
157
+ "label": "An Item with a longer Label",
154
158
  "url": "#"
155
159
  },
156
160
  {
157
- "label": "Corvette",
161
+ "label": "And One last one",
158
162
  "url": "#"
159
163
  }
160
164
  ]
161
165
  },
162
166
  {
163
- "label": "Standorte",
164
- "url": "#"
165
- },
166
- {
167
- "label": "Bonusprogramm",
168
- "url": "#"
169
- },
170
- {
171
- "label": "News",
172
- "url": "#"
173
- },
174
- {
175
- "label": "Jobs",
167
+ "label": "One more Item",
176
168
  "url": "#"
177
169
  },
178
170
  {
179
- "label": "Kontakt",
171
+ "label": "Last Item",
180
172
  "url": "#"
181
173
  }
182
174
  ]
@@ -294,51 +286,43 @@
294
286
  "examples": [
295
287
  [
296
288
  {
297
- "label": "Fahrzeugsuche",
289
+ "label": "Active Item",
298
290
  "url": "#",
299
291
  "active": true
300
292
  },
301
293
  {
302
- "label": "Marken",
294
+ "label": "Navigation Item",
295
+ "url": "#"
296
+ },
297
+ {
298
+ "label": "Dropdown",
303
299
  "url": "#",
304
300
  "items": [
305
301
  {
306
- "label": "Nissan",
302
+ "label": "Level 2 Item",
307
303
  "url": "#"
308
304
  },
309
305
  {
310
- "label": "Kia",
306
+ "label": "Active Item",
311
307
  "active": true,
312
308
  "url": "#"
313
309
  },
314
310
  {
315
- "label": "Maserati",
311
+ "label": "An Item with a longer Label",
316
312
  "url": "#"
317
313
  },
318
314
  {
319
- "label": "Corvette",
315
+ "label": "And One last one",
320
316
  "url": "#"
321
317
  }
322
318
  ]
323
319
  },
324
320
  {
325
- "label": "Standorte",
326
- "url": "#"
327
- },
328
- {
329
- "label": "Bonusprogramm",
330
- "url": "#"
331
- },
332
- {
333
- "label": "News",
334
- "url": "#"
335
- },
336
- {
337
- "label": "Jobs",
321
+ "label": "One more Item",
338
322
  "url": "#"
339
323
  },
340
324
  {
341
- "label": "Kontakt",
325
+ "label": "Last Item",
342
326
  "url": "#"
343
327
  }
344
328
  ]
@@ -1,15 +1,15 @@
1
1
  .dsa-stats {
2
2
  --dsa-stats--gap-vertical: var(--ks-spacing-stack-l);
3
3
  --dsa-stats--gap-horizontal: var(--ks-spacing-inline-m);
4
- --dsa-stats__item--gap: var(--ks-spacing-stack-s);
4
+ --dsa-stats__item--gap: var(--ks-spacing-stack-xs);
5
5
  --dsa-stats__icon--color: var(--ks-text-color-primary);
6
- --dsa-stats__icon--size: 4em;
7
- --dsa-stats__number--font: var(--ks-font-display-xxl);
6
+ --dsa-stats__icon--size: 5em;
7
+ --dsa-stats__number--font: var(--ks-font-display-xl);
8
8
  --dsa-stats__number--font-weight: var(--ks-font-weight-semi-bold);
9
9
  --dsa-stats__number--background: var(--dsa-typo--highlight);
10
10
  --dsa-stats__topic__font: var(--ks-font-interface-xl);
11
11
  --dsa-stats__topic--color: var(--ks-text-color-display);
12
- --dsa-stats__copy--font: var(--ks-font-copy-m);
12
+ --dsa-stats__copy--font: var(--ks-font-copy-s);
13
13
  --dsa-stats__copy--color: var(--ks-text-color-default);
14
14
  }
15
15
 
@@ -8,26 +8,27 @@
8
8
  --dsa-teaser-card--border-width: var(--ks-border-width-default);
9
9
  --dsa-teaser-card--border-color: var(--ks-border-color-card-interactive);
10
10
  --dsa-teaser-card--border-color_hover: var(--ks-border-color-card-interactive-hover);
11
- --dsa-teaser-card--border-radius: var(--ks-border-radius-card);
11
+ --dsa-teaser-card--border-radius: var(--ks-border-radius-card) var(--ks-border-radius-card)
12
+ var(--ks-border-radius-card) calc(var(--ks-border-radius-card) * 3);
12
13
  --dsa-teaser-card--shadow: none;
13
14
  --dsa-teaser-card--shadow_hover: none;
14
- --dsa-teaser-card__image--transform_hover: scale(1.1);
15
- --dsa-teaser-card__image--transition: transform var(--ks-transition-fade);
15
+ --dsa-teaser-card__image--transform_hover: scale(1.05);
16
+ --dsa-teaser-card__image--transition: transform var(--ks-transition-hover);
16
17
  --dsa-teaser-card__topic--color: var(--dsa-topic--color);
17
- --dsa-teaser-card__label--font: var(--ks-font-interface-xs);
18
+ --dsa-teaser-card__label--font: var(--ks-font-interface-s);
18
19
  --dsa-teaser-card__label--font-weight: var(--ks-font-weight-semi-bold);
19
- --dsa-teaser-card__label--color: var(--dsa-text-color-on-primary);
20
- --dsa-teaser-card__label--background-color: var(--ks-background-color-primary);
20
+ --dsa-teaser-card__label--color: var(--ks-text-color-primary);
21
+ --dsa-teaser-card__label--background-color: var(--ks-background-color-bold);
21
22
  --dsa-teaser-card__label--padding: 0.5em 1em;
22
23
  --dsa-teaser-card__label--border-radius: var(--ks-border-radius-pill);
23
- --dsa-teaser-card__label--border: 0;
24
+ --dsa-teaser-card__label--border: 1px solid var(--ks-border-color-interface);
24
25
  --dsa-teaser-card__button--font: var(--ks-font-interface-m);
25
26
  --dsa-teaser-card--padding: var(--ks-spacing-inset-m);
26
27
  --dsa-teaser-card__topic--font: var(--ks-font-display-m);
27
28
  --dsa-teaser-card__topic--font-weight: var(--dsa-topic--font-weight);
28
29
  --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
29
30
  --dsa-teaser-card__copy--color: var(--ks-text-color-default);
30
- --dsa-teaser-card__copy--margin-top: 0.85em;
31
+ --dsa-teaser-card__copy--margin-top: 0.5em;
31
32
  --dsa-teaser-card__button--font: var(--ks-font-interface-s);
32
33
  }
33
34
  @container teaser-card (min-width: 400px) {
@@ -123,12 +124,13 @@
123
124
  .dsa-teaser-card .dsa-teaser-card__label {
124
125
  position: absolute;
125
126
  z-index: 1;
126
- top: var(--ks-spacing-inset-xs);
127
- right: var(--ks-spacing-inset-xs);
127
+ top: 0;
128
+ right: 0;
128
129
  border-radius: var(--dsa-teaser-card__label--border-radius);
129
130
  border: var(--dsa-teaser-card__label--border, 0);
130
131
  pointer-events: initial;
131
132
  padding: var(--dsa-teaser-card__label--padding);
133
+ transform: translate(0.5em, -50%);
132
134
  font: var(--dsa-teaser-card__label--font);
133
135
  text-align: center;
134
136
  font-weight: var(--dsa-teaser-card__label--font-weight);
package/dist/global.css CHANGED
@@ -312,7 +312,7 @@ h3 {
312
312
  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
313
313
  --dsa-link--text-decoration: none;
314
314
  --dsa-link--text-decoration_hover: none;
315
- --dsa-typo--highlight: var(--ks-text-color-primary);
315
+ --dsa-typo--highlight: var(--ks-color-primary);
316
316
  --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
317
317
  --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
318
318
  --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
@@ -340,7 +340,7 @@ h3 {
340
340
  }
341
341
  @media (min-width: 62em) {
342
342
  :root, [ks-inverted], [ks-theme] {
343
- --dsa-logo--height: 3.5rem;
343
+ --dsa-logo--height: 2.5rem;
344
344
  }
345
345
  }
346
346
 
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <browserconfig>
3
+ <msapplication>
4
+ <tile>
5
+ <square150x150logo src="/mstile-150x150.png"/>
6
+ <TileColor>#da532c</TileColor>
7
+ </tile>
8
+ </msapplication>
9
+ </browserconfig>