@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
@@ -3,8 +3,8 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-2fd5dbde.js";
7
- import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
6
+ import { SectionProps } from "./SectionProps-21d04028.js";
7
+ import { BlogTeaserProps } from "./BlogTeaserProps-d62a0a9a.js";
8
8
  import { CtaProps } from "./CtaProps-789f8508.js";
9
9
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
10
10
  /**
@@ -3,9 +3,9 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
6
+ import { BlogHeadProps } from "./BlogHeadProps-f5855e93.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
8
- import { SectionProps } from "./SectionProps-2fd5dbde.js";
8
+ import { SectionProps } from "./SectionProps-21d04028.js";
9
9
  import { CtaProps } from "./CtaProps-789f8508.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
@@ -3,7 +3,7 @@
3
3
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
- import { SectionProps } from "./SectionProps-2fd5dbde.js";
6
+ import { SectionProps } from "./SectionProps-21d04028.js";
7
7
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
8
8
  /**
9
9
  * Collection of sections (with their contents) to render on the page
@@ -28,7 +28,7 @@ type Width = "full" | "max" | "wide" | "default" | "narrow";
28
28
  /**
29
29
  * Style of background
30
30
  */
31
- type Style = "default" | "framed" | "shine-left" | "shine-right" | "carbon";
31
+ type Style = "default" | "framed" | "deko";
32
32
  /**
33
33
  * Color of background
34
34
  */
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { BlogHeadProps } from "../../BlogHeadProps-c04a5ed8.js";
2
+ import { BlogHeadProps } from "../../BlogHeadProps-f5855e93.js";
3
3
  declare const BlogHeadContextDefault: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;
4
4
  declare const BlogHeadContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>>;
5
5
  declare const BlogHead: import("react").ForwardRefExoticComponent<BlogHeadProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -39,9 +39,7 @@
39
39
  "enum": [
40
40
  "default",
41
41
  "framed",
42
- "shine-left",
43
- "shine-right",
44
- "carbon"
42
+ "deko"
45
43
  ],
46
44
  "default": "default"
47
45
  },
@@ -1,4 +1,4 @@
1
- import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
1
+ import { BlogOverviewProps } from "../../BlogOverviewProps-d62a0a9a.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
4
4
  export type { BlogOverviewProps };
@@ -311,9 +311,7 @@
311
311
  "enum": [
312
312
  "default",
313
313
  "framed",
314
- "shine-left",
315
- "shine-right",
316
- "carbon"
314
+ "deko"
317
315
  ],
318
316
  "default": "default"
319
317
  },
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-c760fd2a.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export type { BlogPostProps };
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
3
+ import { BlogTeaserProps } from "../../BlogTeaserProps-d62a0a9a.js";
4
4
  declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
@@ -163,11 +163,13 @@
163
163
  --g-link--color-hover: var(--dsa-business-card__contact--color_hover, var(--dsa-link--color_hover));
164
164
  --g-link--font-weight: var(--dsa-business-card__contact--font-weight, var(--ks-font-weight-semi-bold));
165
165
  text-align: center;
166
+ white-space: nowrap;
166
167
  }
167
168
  .dsa-business-card__contact-item .icon {
168
169
  width: var(--dsa-business-card__contact--icon-size, 1.25em);
169
170
  height: var(--dsa-business-card__contact--icon-size, 1.25em);
170
171
  margin-right: 0.35em;
172
+ flex-shrink: 0;
171
173
  }
172
174
  .dsa-business-card__buttons {
173
175
  display: flex;
@@ -1,8 +1,8 @@
1
1
  .dsa-button {
2
- --dsa-button--padding: 0.65em 1.5em;
2
+ --dsa-button--padding: 0.75em 1.5em;
3
3
  --dsa-button--border-width: var(--ks-border-width-default);
4
4
  --dsa-button--border-radius: var(--ks-border-radius-control);
5
- --dsa-button--font-weight: var(--ks-font-weight-regular);
5
+ --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
6
6
  --dsa-button--text-transform: default;
7
7
  --dsa-button_small--font: var(--ks-font-interface-s);
8
8
  --dsa-button_medium--font: var(--ks-font-interface-m);
@@ -1,6 +1,6 @@
1
1
  .dsa-footer {
2
2
  --dsa-footer--background-color: var(--ks-background-color-default);
3
- --dsa-footer--border-top: none;
3
+ --dsa-footer--border-top: 1px solid var(--ks-border-color-default);
4
4
  --dsa-footer--max-width: var(--dsa-content--width_wide);
5
5
  --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
6
6
  --dsa-footer__byline--font: var(--ks-font-copy-xs);
@@ -8,9 +8,9 @@
8
8
  --dsa-footer__links--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
9
9
  --dsa-footer__link--font: var(--ks-font-interface-s);
10
10
  --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
11
- --dsa-footer__link--color: var(--ks-text-color-interface-interactive);
11
+ --dsa-footer__link--color: var(--dsa-link--color);
12
12
  --dsa-footer__link--text-tecoration: none;
13
- --dsa-footer__link--text-tecoration_hover: none;
13
+ --dsa-footer__link--text-tecoration_hover: underline;
14
14
  --dsa-footer__logo--height: 1.5rem;
15
15
  }
16
16
  @media (min-width: 62em) {
@@ -107,51 +107,43 @@
107
107
  "examples": [
108
108
  [
109
109
  {
110
- "label": "Fahrzeugsuche",
110
+ "label": "Active Item",
111
111
  "url": "#",
112
112
  "active": true
113
113
  },
114
114
  {
115
- "label": "Marken",
115
+ "label": "Navigation Item",
116
+ "url": "#"
117
+ },
118
+ {
119
+ "label": "Dropdown",
116
120
  "url": "#",
117
121
  "items": [
118
122
  {
119
- "label": "Nissan",
123
+ "label": "Level 2 Item",
120
124
  "url": "#"
121
125
  },
122
126
  {
123
- "label": "Kia",
127
+ "label": "Active Item",
124
128
  "active": true,
125
129
  "url": "#"
126
130
  },
127
131
  {
128
- "label": "Maserati",
132
+ "label": "An Item with a longer Label",
129
133
  "url": "#"
130
134
  },
131
135
  {
132
- "label": "Corvette",
136
+ "label": "And One last one",
133
137
  "url": "#"
134
138
  }
135
139
  ]
136
140
  },
137
141
  {
138
- "label": "Standorte",
139
- "url": "#"
140
- },
141
- {
142
- "label": "Bonusprogramm",
143
- "url": "#"
144
- },
145
- {
146
- "label": "News",
147
- "url": "#"
148
- },
149
- {
150
- "label": "Jobs",
142
+ "label": "One more Item",
151
143
  "url": "#"
152
144
  },
153
145
  {
154
- "label": "Kontakt",
146
+ "label": "Last Item",
155
147
  "url": "#"
156
148
  }
157
149
  ]
@@ -120,51 +120,43 @@
120
120
  "examples": [
121
121
  [
122
122
  {
123
- "label": "Fahrzeugsuche",
123
+ "label": "Active Item",
124
124
  "url": "#",
125
125
  "active": true
126
126
  },
127
127
  {
128
- "label": "Marken",
128
+ "label": "Navigation Item",
129
+ "url": "#"
130
+ },
131
+ {
132
+ "label": "Dropdown",
129
133
  "url": "#",
130
134
  "items": [
131
135
  {
132
- "label": "Nissan",
136
+ "label": "Level 2 Item",
133
137
  "url": "#"
134
138
  },
135
139
  {
136
- "label": "Kia",
140
+ "label": "Active Item",
137
141
  "active": true,
138
142
  "url": "#"
139
143
  },
140
144
  {
141
- "label": "Maserati",
145
+ "label": "An Item with a longer Label",
142
146
  "url": "#"
143
147
  },
144
148
  {
145
- "label": "Corvette",
149
+ "label": "And One last one",
146
150
  "url": "#"
147
151
  }
148
152
  ]
149
153
  },
150
154
  {
151
- "label": "Standorte",
152
- "url": "#"
153
- },
154
- {
155
- "label": "Bonusprogramm",
156
- "url": "#"
157
- },
158
- {
159
- "label": "News",
160
- "url": "#"
161
- },
162
- {
163
- "label": "Jobs",
155
+ "label": "One more Item",
164
156
  "url": "#"
165
157
  },
166
158
  {
167
- "label": "Kontakt",
159
+ "label": "Last Item",
168
160
  "url": "#"
169
161
  }
170
162
  ]
@@ -2,12 +2,12 @@
2
2
  --dsa-headline--color: var(--ks-text-color-display);
3
3
  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
4
4
  --dsa-headline--text-transform: none;
5
- --dsa-headline--gap: 0.5em;
5
+ --dsa-headline--gap: 0.35em;
6
6
  --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
7
7
  --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
8
8
  --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
9
9
  --dsa-headline--higlight-background: var(--dsa-typo--highlight);
10
- --dsa-headline__subheadline--color: var(--ks-color-fg-to-bg-4);
10
+ --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
11
11
  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
12
12
  --dsa-headline__subheadline--text-transform: uppercase;
13
13
  --dsa-headline__subheadline--letter-spacing: 0.045em;
@@ -64,48 +64,6 @@
64
64
  --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
65
65
  --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
66
66
  }
67
- .dsa-headline--h1 .dsa-headline__headline:not(:last-child),
68
- .dsa-headline--h1 .dsa-headline__headline:only-child {
69
- display: flex;
70
- flex-direction: column;
71
- }
72
- .dsa-headline--h1 .dsa-headline__headline:not(:last-child):after,
73
- .dsa-headline--h1 .dsa-headline__headline:only-child:after {
74
- content: "";
75
- font-size: inherit;
76
- background-color: var(--ks-color-primary);
77
- height: 3px;
78
- width: 17%;
79
- min-width: 5rem;
80
- max-width: 10rem;
81
- margin-top: var(--dsa-headline--gap);
82
- }
83
- .dsa-headline--h1 .dsa-headline__headline:not(:first-child) {
84
- display: flex;
85
- flex-direction: column;
86
- }
87
- .dsa-headline--h1 .dsa-headline__headline:not(:first-child):before {
88
- content: "";
89
- font-size: inherit;
90
- background-color: var(--ks-color-primary);
91
- height: 3px;
92
- width: 30%;
93
- min-width: 3rem;
94
- max-width: 4rem;
95
- margin-bottom: var(--dsa-headline--gap);
96
- }
97
- .dsa-headline--h1.dsa-headline--align-center .dsa-headline__headline,
98
- .dsa-headline--h1.dsa-headline--align-center .dsa-headline__subheadline {
99
- align-items: center;
100
- }
101
- .dsa-headline--h1.dsa-headline--align-left .dsa-headline__headline,
102
- .dsa-headline--h1.dsa-headline--align-left .dsa-headline__subheadline {
103
- align-items: flex-start;
104
- }
105
- .dsa-headline--h1.dsa-headline--align-right .dsa-headline__headline,
106
- .dsa-headline--h1.dsa-headline--align-right .dsa-headline__subheadline {
107
- align-items: flex-end;
108
- }
109
67
  .dsa-headline--h2 {
110
68
  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
111
69
  --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
@@ -32,16 +32,6 @@
32
32
  var(--ks-color-primary-alpha-5) 0%,
33
33
  var(--ks-color-bg-alpha-4) 100%
34
34
  );
35
- --dsa-hero_corner__overlay--background: linear-gradient(
36
- 40deg,
37
- var(--ks-background-color-default) 15%,
38
- transparent 50%
39
- );
40
- --dsa-hero_left__overlay--background: radial-gradient(
41
- 100% 200% at 0% 50%,
42
- var(--ks-color-bg-alpha-3) 15%,
43
- var(--ks-color-bg-alpha-9) 50%
44
- );
45
35
  --dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
46
36
  --dsa-hero_offset__textbox--offset: -10%;
47
37
  --dsa-hero_offset__overlay--background: linear-gradient(
@@ -138,18 +128,6 @@
138
128
  .c-visual.dsa-hero .dsa-headline .dsa-headline__subheadline {
139
129
  color: var(--dsa-hero__subheadline--color, var(--dsa-headline__subheadline--color, var(--ks-text-color-primary)));
140
130
  }
141
- .c-visual.dsa-hero--content-corner {
142
- --c-visual_overlay--background: var(
143
- --dsa-hero_corner__overlay--background,
144
- linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
145
- );
146
- }
147
- .c-visual.dsa-hero--content-left {
148
- --c-visual_overlay--background: var(
149
- --dsa-hero_left__overlay--background,
150
- linear-gradient(40deg, var(--ks-background-color-default) 15%, transparent 50%)
151
- );
152
- }
153
131
  .c-visual.dsa-hero .c-button-group {
154
132
  --c-button-group--vertical-gutter: var(--ks-spacing-stack-m);
155
133
  --c-button-group--horizontal-gutter: var(--ks-spacing-inline-m);
@@ -29,8 +29,8 @@ interface SettingsProps {
29
29
  seo: SeoProps;
30
30
  iconSprite?: IconSprite;
31
31
  }
32
- export * from "../../BlogPostProps-6b3cff22.js";
33
- export * from "../../BlogOverviewProps-9f207f1c.js";
32
+ export * from "../../BlogPostProps-c760fd2a.js";
33
+ export * from "../../BlogOverviewProps-d62a0a9a.js";
34
34
  export * from "../../PageProps-aa29c554.js";
35
35
  export { IconSprite, SettingsProps };
36
36
  export * from "../../EventDetailProps-42a7eebe.js";
@@ -1,5 +1,5 @@
1
1
  .dsa-nav-dropdown {
2
- --dsa-nav-dropdown--padding: var(--ks-spacing-xs) var(--ks-spacing-xxs);
2
+ --dsa-nav-dropdown--padding: var(--ks-spacing-xxs) var(--ks-spacing-xxs) var(--ks-spacing-m) var(--ks-spacing-xxs);
3
3
  --dsa-nav-dropdown--background: var(--ks-background-color-default);
4
4
  --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
5
5
  --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
@@ -8,7 +8,7 @@
8
8
  --dsa-nav-dropdown__label--color: var(--ks-color-fg);
9
9
  --dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
10
10
  --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
11
- --dsa-nav-dropdown__label--background-color_hover: unset;
11
+ --dsa-nav-dropdown__label--background-color_hover: var(--ks-color-fg-alpha-8);
12
12
  --dsa-nav-dropdown__label--background-color_active: unset;
13
13
  --dsa-nav-dropdown__label--border-radius: var(--ks-border-radius-control);
14
14
  --dsa-nav-dropdown__label--font: var(--ks-font-interface-s);
@@ -16,7 +16,7 @@
16
16
  --dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
17
17
  --dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-bold);
18
18
  --dsa-nav-dropdown__label--padding: 0.45em 0.75em;
19
- --dsa-nav-dropdown__label_dimmed--opacity: 0.6;
19
+ --dsa-nav-dropdown__label_dimmed--opacity: 1;
20
20
  }
21
21
  .dsa-nav-dropdown[ks-inverted=true] {
22
22
  --dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
@@ -48,51 +48,43 @@
48
48
  "examples": [
49
49
  [
50
50
  {
51
- "label": "Fahrzeugsuche",
51
+ "label": "Active Item",
52
52
  "url": "#",
53
53
  "active": true
54
54
  },
55
55
  {
56
- "label": "Marken",
56
+ "label": "Navigation Item",
57
+ "url": "#"
58
+ },
59
+ {
60
+ "label": "Dropdown",
57
61
  "url": "#",
58
62
  "items": [
59
63
  {
60
- "label": "Nissan",
64
+ "label": "Level 2 Item",
61
65
  "url": "#"
62
66
  },
63
67
  {
64
- "label": "Kia",
68
+ "label": "Active Item",
65
69
  "active": true,
66
70
  "url": "#"
67
71
  },
68
72
  {
69
- "label": "Maserati",
73
+ "label": "An Item with a longer Label",
70
74
  "url": "#"
71
75
  },
72
76
  {
73
- "label": "Corvette",
77
+ "label": "And One last one",
74
78
  "url": "#"
75
79
  }
76
80
  ]
77
81
  },
78
82
  {
79
- "label": "Standorte",
80
- "url": "#"
81
- },
82
- {
83
- "label": "Bonusprogramm",
84
- "url": "#"
85
- },
86
- {
87
- "label": "News",
88
- "url": "#"
89
- },
90
- {
91
- "label": "Jobs",
83
+ "label": "One more Item",
92
84
  "url": "#"
93
85
  },
94
86
  {
95
- "label": "Kontakt",
87
+ "label": "Last Item",
96
88
  "url": "#"
97
89
  }
98
90
  ]
@@ -119,51 +119,43 @@
119
119
  "examples": [
120
120
  [
121
121
  {
122
- "label": "Fahrzeugsuche",
122
+ "label": "Active Item",
123
123
  "url": "#",
124
124
  "active": true
125
125
  },
126
126
  {
127
- "label": "Marken",
127
+ "label": "Navigation Item",
128
+ "url": "#"
129
+ },
130
+ {
131
+ "label": "Dropdown",
128
132
  "url": "#",
129
133
  "items": [
130
134
  {
131
- "label": "Nissan",
135
+ "label": "Level 2 Item",
132
136
  "url": "#"
133
137
  },
134
138
  {
135
- "label": "Kia",
139
+ "label": "Active Item",
136
140
  "active": true,
137
141
  "url": "#"
138
142
  },
139
143
  {
140
- "label": "Maserati",
144
+ "label": "An Item with a longer Label",
141
145
  "url": "#"
142
146
  },
143
147
  {
144
- "label": "Corvette",
148
+ "label": "And One last one",
145
149
  "url": "#"
146
150
  }
147
151
  ]
148
152
  },
149
153
  {
150
- "label": "Standorte",
151
- "url": "#"
152
- },
153
- {
154
- "label": "Bonusprogramm",
155
- "url": "#"
156
- },
157
- {
158
- "label": "News",
159
- "url": "#"
160
- },
161
- {
162
- "label": "Jobs",
154
+ "label": "One more Item",
163
155
  "url": "#"
164
156
  },
165
157
  {
166
- "label": "Kontakt",
158
+ "label": "Last Item",
167
159
  "url": "#"
168
160
  }
169
161
  ]
@@ -45,51 +45,43 @@
45
45
  "examples": [
46
46
  [
47
47
  {
48
- "label": "Fahrzeugsuche",
48
+ "label": "Active Item",
49
49
  "url": "#",
50
50
  "active": true
51
51
  },
52
52
  {
53
- "label": "Marken",
53
+ "label": "Navigation Item",
54
+ "url": "#"
55
+ },
56
+ {
57
+ "label": "Dropdown",
54
58
  "url": "#",
55
59
  "items": [
56
60
  {
57
- "label": "Nissan",
61
+ "label": "Level 2 Item",
58
62
  "url": "#"
59
63
  },
60
64
  {
61
- "label": "Kia",
65
+ "label": "Active Item",
62
66
  "active": true,
63
67
  "url": "#"
64
68
  },
65
69
  {
66
- "label": "Maserati",
70
+ "label": "An Item with a longer Label",
67
71
  "url": "#"
68
72
  },
69
73
  {
70
- "label": "Corvette",
74
+ "label": "And One last one",
71
75
  "url": "#"
72
76
  }
73
77
  ]
74
78
  },
75
79
  {
76
- "label": "Standorte",
77
- "url": "#"
78
- },
79
- {
80
- "label": "Bonusprogramm",
81
- "url": "#"
82
- },
83
- {
84
- "label": "News",
85
- "url": "#"
86
- },
87
- {
88
- "label": "Jobs",
80
+ "label": "One more Item",
89
81
  "url": "#"
90
82
  },
91
83
  {
92
- "label": "Kontakt",
84
+ "label": "Last Item",
93
85
  "url": "#"
94
86
  }
95
87
  ]
@@ -3,16 +3,16 @@
3
3
  --dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
4
4
  --dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
5
5
  --dsa-nav-topbar__label--background-color: transparent;
6
- --dsa-nav-topbar__label--background-color_hover: transparent;
6
+ --dsa-nav-topbar__label--background-color_hover: var(--ks-color-fg-alpha-8);
7
7
  --dsa-nav-topbar__label--background-color_active: transparent;
8
- --dsa-nav-topbar__label--font-size: calc(var(--ks-font-size-interface-s) * 1.15);
8
+ --dsa-nav-topbar__label--font-size: var(--ks-font-size-interface-s);
9
9
  --dsa-nav-topbar__label--font-family: var(--ks-font-family-display);
10
10
  --dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
11
11
  --dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
12
12
  --dsa-nav-topbar__label--padding: 0.45em 0.75em;
13
13
  --dsa-nav-topbar__label--text-decoration: none;
14
14
  --dsa-nav-topbar__label--text-decoration_hover: none;
15
- --dsa-nav-topbar__label_dimmed--opacity: 0.6;
15
+ --dsa-nav-topbar__label_dimmed--opacity: 1;
16
16
  --dsa-nav-topbar__label--transition: var(--ks-transition-hover);
17
17
  --dsa-nav-topbar__label--transition-property: background-color, color, opacity;
18
18
  --dsa-nav-topbar__label__icon--size: 1.5em;