@kickstartds/ds-agency-premium 1.3.50--canary.663.b100f6e.0 → 1.3.50

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 (40) hide show
  1. package/dist/{FooterProps-22e0307b.d.ts → FooterProps-10c950a6.d.ts} +0 -6
  2. package/dist/{HeaderProps-dd2071a8.d.ts → HeaderProps-7be94a61.d.ts} +2 -16
  3. package/dist/components/footer/footer.schema.dereffed.json +2 -36
  4. package/dist/components/footer/index.d.ts +1 -1
  5. package/dist/components/header/header.css +1 -3
  6. package/dist/components/header/header.schema.dereffed.json +6 -44
  7. package/dist/components/header/header.schema.json +3 -5
  8. package/dist/components/header/index.d.ts +1 -1
  9. package/dist/components/header/index.js +6 -10
  10. package/dist/components/headline/headline.css +1 -1
  11. package/dist/components/index/index.d.ts +2 -2
  12. package/dist/components/nav-main/index.d.ts +7 -33
  13. package/dist/components/nav-main/index.js +14 -14
  14. package/dist/components/nav-main/nav-main.css +194 -0
  15. package/dist/components/nav-main/nav-main.schema.dereffed.json +2 -70
  16. package/dist/components/nav-main/nav-main.schema.json +3 -52
  17. package/dist/components/page-wrapper/tokens.css +1 -1
  18. package/dist/components/presets.json +4 -29
  19. package/dist/components/settings/settings.schema.dereffed.json +8 -80
  20. package/dist/tokens/themes.css +4 -4
  21. package/dist/tokens/tokens.css +1 -1
  22. package/dist/tokens/tokens.js +1 -1
  23. package/package.json +1 -1
  24. package/dist/components/nav-dropdown/index.d.ts +0 -23
  25. package/dist/components/nav-dropdown/index.js +0 -9
  26. package/dist/components/nav-flyout/index.d.ts +0 -8
  27. package/dist/components/nav-flyout/index.js +0 -15
  28. package/dist/components/nav-flyout/nav-flyout.css +0 -63
  29. package/dist/components/nav-toggle/index.d.ts +0 -3
  30. package/dist/components/nav-toggle/index.js +0 -6
  31. package/dist/components/nav-topbar/index.d.ts +0 -7
  32. package/dist/components/nav-topbar/index.js +0 -12
  33. package/dist/components/nav-topbar/nav-topbar.css +0 -139
  34. /package/dist/components/{nav → nav-main}/js/NavToggle.client.d.ts +0 -0
  35. /package/dist/components/{nav → nav-main}/js/NavToggle.client.js +0 -0
  36. /package/dist/components/{nav → nav-main}/js/body.client.d.ts +0 -0
  37. /package/dist/components/{nav → nav-main}/js/body.client.js +0 -0
  38. /package/dist/components/{nav → nav-main}/js/navMainEvents.client.d.ts +0 -0
  39. /package/dist/components/{nav → nav-main}/js/navMainEvents.client.js +0 -0
  40. /package/dist/components/{nav-toggle → nav-main}/nav-toggle.css +0 -0
@@ -39,12 +39,6 @@ interface FooterProps {
39
39
  href: string;
40
40
  label: string;
41
41
  active?: boolean;
42
- items?: {
43
- href?: string;
44
- id?: string;
45
- label?: string;
46
- active?: boolean;
47
- }[];
48
42
  }[];
49
43
  }
50
44
  interface Logo {
@@ -27,10 +27,6 @@ type Height = number;
27
27
  * Toggle the inversion of the flyout navigation
28
28
  */
29
29
  type FlyoutInverted = boolean;
30
- /**
31
- * Toggle the inversion of the dropdown navigation
32
- */
33
- type DropdownInverted = boolean;
34
30
  /**
35
31
  * Make the header float over the first Section
36
32
  */
@@ -39,25 +35,15 @@ type Floating = boolean;
39
35
  * Invert the color scheme of the header
40
36
  */
41
37
  type Inverted = boolean;
42
- /**
43
- * Header layered on top by the CMS
44
- */
45
38
  interface HeaderProps {
46
- logo?: Logo;
39
+ logo: Logo;
47
40
  flyoutInverted?: FlyoutInverted;
48
- dropdownInverted?: DropdownInverted;
49
41
  floating?: Floating;
50
42
  inverted?: Inverted;
51
43
  navItems?: {
52
44
  href: string;
53
45
  label: string;
54
46
  active?: boolean;
55
- items?: {
56
- href?: string;
57
- id?: string;
58
- label?: string;
59
- active?: boolean;
60
- }[];
61
47
  }[];
62
48
  }
63
49
  interface Logo {
@@ -68,4 +54,4 @@ interface Logo {
68
54
  width?: Width;
69
55
  height?: Height;
70
56
  }
71
- export { Source, Source1, AltText, Width, Height, FlyoutInverted, DropdownInverted, Floating, Inverted, HeaderProps, Logo };
57
+ export { Source, Source1, AltText, Width, Height, FlyoutInverted, Floating, Inverted, HeaderProps, Logo };
@@ -77,28 +77,6 @@
77
77
  },
78
78
  "active": {
79
79
  "type": "boolean"
80
- },
81
- "items": {
82
- "type": "array",
83
- "items": {
84
- "type": "object",
85
- "properties": {
86
- "href": {
87
- "type": "string",
88
- "format": "uri"
89
- },
90
- "id": {
91
- "type": "string"
92
- },
93
- "label": {
94
- "type": "string"
95
- },
96
- "active": {
97
- "type": "boolean"
98
- }
99
- },
100
- "additionalProperties": false
101
- }
102
80
  }
103
81
  },
104
82
  "additionalProperties": false,
@@ -110,20 +88,8 @@
110
88
  "examples": [
111
89
  [
112
90
  {
113
- "label": "Nav With Children",
114
- "href": "#",
115
- "items": [
116
- {
117
- "label": "TEST1",
118
- "href": "#",
119
- "id": "TEST1"
120
- },
121
- {
122
- "label": "TEST2",
123
- "href": "#",
124
- "id": "TEST2"
125
- }
126
- ]
91
+ "label": "Nav Item",
92
+ "href": "#"
127
93
  },
128
94
  {
129
95
  "label": "Active Item",
@@ -1,4 +1,4 @@
1
1
  import { FC } from "react";
2
- import { FooterProps } from "../../FooterProps-22e0307b.js";
2
+ import { FooterProps } from "../../FooterProps-10c950a6.js";
3
3
  declare const Footer: FC<FooterProps>;
4
4
  export { Footer };
@@ -1,6 +1,4 @@
1
- :root,
2
- [ks-theme],
3
- [ks-inverted] {
1
+ :root, [ks-inverted], [ks-theme] {
4
2
  --dsa-header--spacing-vertical: var(--ks-spacing-stack-m);
5
3
  --dsa-header--spacing-horizontal: var(--l-section--content-padding);
6
4
  }
@@ -2,7 +2,6 @@
2
2
  "$schema": "http://json-schema.org/draft-07/schema#",
3
3
  "$id": "http://schema.mydesignsystem.com/header.schema.json",
4
4
  "title": "Header",
5
- "description": "Header layered on top by the CMS",
6
5
  "type": "object",
7
6
  "properties": {
8
7
  "logo": {
@@ -58,12 +57,6 @@
58
57
  "description": "Toggle the inversion of the flyout navigation",
59
58
  "default": false
60
59
  },
61
- "dropdownInverted": {
62
- "type": "boolean",
63
- "title": "Dropdown Inverted",
64
- "description": "Toggle the inversion of the dropdown navigation",
65
- "default": false
66
- },
67
60
  "floating": {
68
61
  "type": "boolean",
69
62
  "title": "Floating",
@@ -90,28 +83,6 @@
90
83
  },
91
84
  "active": {
92
85
  "type": "boolean"
93
- },
94
- "items": {
95
- "type": "array",
96
- "items": {
97
- "type": "object",
98
- "properties": {
99
- "href": {
100
- "type": "string",
101
- "format": "uri"
102
- },
103
- "id": {
104
- "type": "string"
105
- },
106
- "label": {
107
- "type": "string"
108
- },
109
- "active": {
110
- "type": "boolean"
111
- }
112
- },
113
- "additionalProperties": false
114
- }
115
86
  }
116
87
  },
117
88
  "additionalProperties": false,
@@ -123,20 +94,8 @@
123
94
  "examples": [
124
95
  [
125
96
  {
126
- "label": "Nav With Children",
127
- "href": "#",
128
- "items": [
129
- {
130
- "label": "TEST1",
131
- "href": "#",
132
- "id": "TEST1"
133
- },
134
- {
135
- "label": "TEST2",
136
- "href": "#",
137
- "id": "TEST2"
138
- }
139
- ]
97
+ "label": "Nav Item",
98
+ "href": "#"
140
99
  },
141
100
  {
142
101
  "label": "Active Item",
@@ -162,5 +121,8 @@
162
121
  "const": "header"
163
122
  }
164
123
  },
165
- "additionalProperties": false
124
+ "additionalProperties": false,
125
+ "required": [
126
+ "logo"
127
+ ]
166
128
  }
@@ -2,7 +2,6 @@
2
2
  "$schema": "http://json-schema.org/draft-07/schema#",
3
3
  "$id": "http://schema.mydesignsystem.com/header.schema.json",
4
4
  "title": "Header",
5
- "description": "Header layered on top by the CMS",
6
5
  "type": "object",
7
6
  "properties": {
8
7
  "logo": {
@@ -32,9 +31,6 @@
32
31
  "flyoutInverted": {
33
32
  "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutInverted"
34
33
  },
35
- "dropdownInverted": {
36
- "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/dropdownInverted"
37
- },
38
34
  "floating": {
39
35
  "type": "boolean",
40
36
  "title": "Floating",
@@ -50,5 +46,7 @@
50
46
  "navItems": {
51
47
  "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items"
52
48
  }
53
- }
49
+ },
50
+ "additionalProperties": false,
51
+ "required": ["logo"]
54
52
  }
@@ -1,4 +1,4 @@
1
1
  import { FC } from "react";
2
- import { HeaderProps } from "../../HeaderProps-dd2071a8.js";
2
+ import { HeaderProps } from "../../HeaderProps-7be94a61.js";
3
3
  declare const Header: FC<HeaderProps>;
4
4
  export { Header };
@@ -3,20 +3,16 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
4
  import { NavMain } from '../nav-main/index.js';
5
5
  import { Logo } from '../logo/index.js';
6
- import '../nav/js/NavToggle.client.js';
6
+ import 'react';
7
+ import '@kickstartds/base/lib/link';
8
+ import '../nav-main/js/NavToggle.client.js';
7
9
  import '@kickstartds/core/lib/component';
8
- import '../nav/js/navMainEvents.client.js';
10
+ import '../nav-main/js/navMainEvents.client.js';
9
11
  import '@kickstartds/core/lib/core';
10
- import '../nav/js/body.client.js';
11
- import '../nav-toggle/index.js';
12
- import '../nav-topbar/index.js';
13
- import '@kickstartds/base/lib/link';
14
- import '@kickstartds/base/lib/icon';
15
- import '../nav-dropdown/index.js';
16
- import '../nav-flyout/index.js';
12
+ import '../nav-main/js/body.client.js';
17
13
  import '@kickstartds/base/lib/picture';
18
14
 
19
- const Header = ({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, dropdownInverted: dropdownInverted, items: navItems, logo: {
15
+ const Header = ({ logo, floating, inverted = false, flyoutInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, items: navItems, logo: {
20
16
  ...logo,
21
17
  inverted: flyoutInverted,
22
18
  } })] }) }) }));
@@ -59,7 +59,7 @@
59
59
  .dsa-headline .dsa-headline__headline {
60
60
  font: var(--headline--font);
61
61
  color: var(--dsa-headline--color, var(--ks-text-color-display));
62
- font-weight: var(--headline--font-weight);
62
+ font-weight: var(--dsa-headline--font-weight);
63
63
  margin: 0;
64
64
  }
65
65
  .dsa-headline .dsa-headline__subheadline {
@@ -12,8 +12,8 @@ import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
12
12
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
13
13
  * and run json-schema-to-typescript to regenerate this file.
14
14
  */
15
- import { HeaderProps } from "../../HeaderProps-dd2071a8.js";
16
- import { FooterProps } from "../../FooterProps-22e0307b.js";
15
+ import { HeaderProps } from "../../HeaderProps-7be94a61.js";
16
+ import { FooterProps } from "../../FooterProps-10c950a6.js";
17
17
  /**
18
18
  * Collection of sections (with their contents) to render on the page
19
19
  */
@@ -10,49 +10,23 @@ import { LogoProps } from "../../LogoProps-01796f0a.js";
10
10
  * Toggle the inversion of the flyout navigation
11
11
  */
12
12
  type FlyoutInverted = boolean;
13
- /**
14
- * Toggle the inversion of the dropdown navigation
15
- */
16
- type DropdownInverted = boolean;
17
- /**
18
- * Toggle the CTA
19
- */
20
- type ToggleCTA = boolean;
21
- /**
22
- * Text content to display inside the button
23
- */
24
- type Label = string;
25
- /**
26
- * Target that should be linked, makes the button behave like a link semantically
27
- */
28
- type Target = string;
29
13
  interface NavMainProps {
30
14
  /**
31
15
  * Referenced component LogoProps
32
16
  */
33
17
  logo: LogoProps;
34
18
  flyoutInverted?: FlyoutInverted;
35
- dropdownInverted?: DropdownInverted;
36
19
  items?: {
37
20
  href: string;
38
21
  label: string;
39
22
  active?: boolean;
40
- items?: {
41
- href?: string;
42
- id?: string;
43
- label?: string;
44
- active?: boolean;
45
- }[];
46
23
  }[];
47
- cta?: CTA;
48
- }
49
- /**
50
- * Add a CTA to the Navigation
51
- */
52
- interface CTA {
53
- toggle?: ToggleCTA;
54
- label?: Label;
55
- target?: Target;
56
24
  }
25
+ declare const NavToggleComponent: FC;
26
+ declare const NavMainItem: FC<{
27
+ label: string;
28
+ href: string;
29
+ active: boolean;
30
+ }>;
57
31
  declare const NavMain: FC<NavMainProps>;
58
- export { NavMain };
32
+ export { NavToggleComponent, NavMainItem, NavMain };
@@ -1,19 +1,19 @@
1
+ import "./nav-main.css";
2
+ import "./nav-toggle.css";
3
+ import { createElement } from 'react';
1
4
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import '../nav/js/NavToggle.client.js';
3
- import '../nav/js/navMainEvents.client.js';
4
- import { NavToggleComponent } from '../nav-toggle/index.js';
5
- import { NavTopbar } from '../nav-topbar/index.js';
6
- import { NavFlyout } from '../nav-flyout/index.js';
5
+ import classnames from 'classnames';
6
+ import { Link } from '@kickstartds/base/lib/link';
7
+ import { Logo } from '../logo/index.js';
8
+ import './js/NavToggle.client.js';
9
+ import './js/navMainEvents.client.js';
10
+ import '@kickstartds/base/lib/picture';
7
11
  import '@kickstartds/core/lib/component';
8
- import '../nav/js/body.client.js';
12
+ import './js/body.client.js';
9
13
  import '@kickstartds/core/lib/core';
10
- import 'classnames';
11
- import '@kickstartds/base/lib/link';
12
- import '@kickstartds/base/lib/icon';
13
- import '../nav-dropdown/index.js';
14
- import '../logo/index.js';
15
- import '@kickstartds/base/lib/picture';
16
14
 
17
- const NavMain = ({ logo, items, flyoutInverted, dropdownInverted, }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main", children: [jsx(NavToggleComponent, {}), jsx(NavTopbar, { items: items, dropdownInverted: dropdownInverted, active: undefined }), jsx(NavFlyout, { items: items, active: undefined, inverted: flyoutInverted, logo: logo })] })) : null;
15
+ const NavToggleComponent = () => (jsxs("button", { type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "nav-main", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "toggle navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] }));
16
+ const NavMainItem = ({ label, href, active }) => (jsx("li", { className: classnames("dsa-nav-main__item", active === true ? "dsa-nav-main__item--active" : ""), children: jsx(Link, { className: "dsa-nav-main__link", href: href, children: label }) }));
17
+ const NavMain = ({ logo, items, flyoutInverted }) => items && items.length > 0 ? (jsxs("div", { className: "dsa-nav-main__wrap", children: [jsx(NavToggleComponent, {}), jsxs("nav", { "ks-inverted": flyoutInverted.toString(), className: classnames("dsa-nav-main", "dsa-nav-main--flyout", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-main__logo" }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] }), jsxs("nav", { className: classnames("dsa-nav-main", "dsa-nav-main--topbar", items.some((item) => item.active) ? "dsa-nav-main--active" : ""), id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-main__logo" }), jsx("ul", { className: "dsa-nav-main__list", children: items.map((item) => (createElement(NavMainItem, { ...item, active: item.active ?? false, key: item.href + item.label }))) })] })] })) : null;
18
18
 
19
- export { NavMain };
19
+ export { NavMain, NavMainItem, NavToggleComponent };
@@ -0,0 +1,194 @@
1
+ .dsa-nav-main {
2
+ --dsa-nav-main--background: linear-gradient(
3
+ 125deg,
4
+ var(--ks-background-color-default),
5
+ var(--ks-color-primary-to-bg-6)
6
+ );
7
+ --dsa-nav-main__link--color: var(--ks-color-fg);
8
+ --dsa-nav-main__link--opacity_hover: 0.6;
9
+ --dsa-nav-main__link--color_active: var(--ks-text-color-interface-interactive-active);
10
+ --dsa-nav-main__link--font: var(--ks-font-interface-l);
11
+ --dsa-nav-main__link--font-weight: var(--ks-font-weight-semi-bold);
12
+ --dsa-nav-main__link--font-weight_active: var(--ks-font-weight-semi-bold);
13
+ --dsa-nav-main_floating__link--color: var(--ks-color-fg);
14
+ --dsa-nav-main_floating__link--color_active: var(--ks-color-fg);
15
+ --dsa-nav-main_floating__link--opacity_hover: 0.6;
16
+ --dsa-nav-main__link--padding: 0.35em 0;
17
+ --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
18
+ }
19
+ @media (min-width: 62em) {
20
+ .dsa-nav-main {
21
+ --dsa-nav-main__link--padding: 0 0.75em;
22
+ --dsa-nav-main__link--font: var(--ks-font-interface-m);
23
+ }
24
+ }
25
+
26
+ .dsa-nav-main {
27
+ --g-link--text-decoration: none;
28
+ --g-link--text-decoration_hover: none;
29
+ display: flex;
30
+ flex-direction: column;
31
+ justify-content: flex-start;
32
+ }
33
+ .dsa-nav-main--active .dsa-nav-main__item .dsa-nav-main__link {
34
+ color: var(--dsa-nav-main__link--color);
35
+ }
36
+ .dsa-nav-main--active .dsa-nav-main__item--active .dsa-nav-main__link {
37
+ color: var(--dsa-nav-main__link--color_active);
38
+ font-weight: var(--dsa-nav-main__link--font-weight_active);
39
+ }
40
+ .dsa-nav-main ul {
41
+ /* critical:start */
42
+ box-sizing: border-box;
43
+ margin: 0;
44
+ padding: 0;
45
+ list-style: none;
46
+ /* critical:end */
47
+ }
48
+ .dsa-nav-main ul li {
49
+ display: block;
50
+ margin: 0;
51
+ }
52
+ .dsa-nav-main__item {
53
+ position: relative;
54
+ }
55
+ .dsa-nav-main__list:hover .dsa-nav-main__link {
56
+ opacity: var(--dsa-nav-main__link--opacity_hover);
57
+ }
58
+ .dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link {
59
+ /* critical:start */
60
+ font: var(--dsa-nav-main__link--font);
61
+ font-weight: var(--dsa-nav-main__link--font-weight);
62
+ color: var(--dsa-nav-main__link--color);
63
+ position: relative;
64
+ display: block;
65
+ padding: var(--dsa-nav-main__link--padding);
66
+ /* critical:end */
67
+ }
68
+ .dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:hover {
69
+ opacity: 1;
70
+ color: var(--dsa-nav-main__link--color_active);
71
+ }
72
+ .dsa-nav-main .dsa-nav-main__item a.dsa-nav-main__link:active {
73
+ color: var(--dsa-nav-main__link--color_active);
74
+ }
75
+ .dsa-nav-main__logo {
76
+ padding: var(--dsa-header--spacing-v) 0;
77
+ }
78
+ .dsa-nav-main__wrap {
79
+ flex-grow: 0;
80
+ flex-shrink: 1;
81
+ }
82
+ .dsa-nav-main.dsa-nav-main--flyout {
83
+ display: none;
84
+ }
85
+ @media (max-width: 62em) {
86
+ .dsa-nav-main.dsa-nav-main--flyout {
87
+ display: block;
88
+ /* critical:start */
89
+ left: -100%;
90
+ /* critical:end */
91
+ height: 100vh;
92
+ overflow: hidden;
93
+ position: fixed;
94
+ width: 77vw;
95
+ max-width: 23rem;
96
+ transition: all var(--ks-duration-slow);
97
+ padding: 0 var(--l-section--content-padding);
98
+ right: 0;
99
+ bottom: 0;
100
+ top: 0;
101
+ overflow-y: auto;
102
+ background: var(--dsa-nav-main--background);
103
+ backface-visibility: hidden;
104
+ -webkit-overflow-scrolling: touch;
105
+ box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
106
+ }
107
+ .dsa-nav-main.dsa-nav-main--flyout__item--icon {
108
+ border: 0;
109
+ clip: rect(1px, 1px, 1px, 1px);
110
+ clip-path: inset(100%);
111
+ height: 1px;
112
+ overflow: hidden;
113
+ padding: 0;
114
+ position: absolute;
115
+ white-space: nowrap;
116
+ width: 1px;
117
+ }
118
+ .overlay-open .dsa-nav-main.dsa-nav-main--flyout {
119
+ left: 0;
120
+ box-shadow: var(--dsa-nav-main--shadow);
121
+ }
122
+ .dsa-nav-main.dsa-nav-main--flyout > .dsa-nav-main__logo {
123
+ margin-top: var(--dsa-header--spacing-vertical);
124
+ margin-bottom: var(--dsa-header--spacing-vertical);
125
+ }
126
+ .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list {
127
+ padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
128
+ }
129
+ .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button {
130
+ margin-left: var(--dsa-header--spacing-horizontal);
131
+ margin-top: var(--dsa-header--spacing-vertical);
132
+ }
133
+ .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button .button {
134
+ --button--font: var(--ks-font-interface-s);
135
+ }
136
+ .dsa-nav-main.dsa-nav-main--flyout ul.dsa-nav-main__list .dsa-nav-main--button .button .button__content {
137
+ --button--padding: 0.4rem 1rem;
138
+ }
139
+ }
140
+ .dsa-nav-main.dsa-nav-main--topbar {
141
+ display: none;
142
+ }
143
+ @media (min-width: 62em) {
144
+ .dsa-nav-main.dsa-nav-main--topbar {
145
+ display: block;
146
+ /* critical:start */
147
+ /* critical:end */
148
+ }
149
+ .dsa-nav-main.dsa-nav-main--topbar > .dsa-nav-main__logo {
150
+ display: none;
151
+ }
152
+ .dsa-nav-main.dsa-nav-main--topbar .button--wrapper {
153
+ margin-left: var(--ks-spacing-inline-xs);
154
+ }
155
+ .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__wrap {
156
+ display: flex;
157
+ align-items: center;
158
+ }
159
+ .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list {
160
+ /* critical:start */
161
+ display: flex;
162
+ flex-wrap: nowrap;
163
+ align-items: center;
164
+ /* critical:end */
165
+ }
166
+ .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list .dsa-nav-main--button .button {
167
+ --button--font: var(--ks-font-interface-s);
168
+ }
169
+ .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list .dsa-nav-main--button .button span {
170
+ font-size: 98%;
171
+ }
172
+ .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list:hover .dsa-nav-main__link {
173
+ opacity: var(--dsa-nav-main_floating__link--opacity_hover);
174
+ }
175
+ .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__list:hover .dsa-nav-main__link:hover {
176
+ opacity: 1;
177
+ }
178
+ .dsa-nav-main.dsa-nav-main--topbar.dsa-nav-main__item {
179
+ /* critical:start */
180
+ flex-shrink: 0;
181
+ /* critical:end */
182
+ outline: 0;
183
+ }
184
+ .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar .dsa-nav-main__link {
185
+ color: var(--dsa-nav-main_floating__link--color);
186
+ }
187
+ .dsa-header--floating .dsa-nav-main.dsa-nav-main--topbar.dsa-nav-main--active .dsa-nav-main__link {
188
+ color: var(--dsa-nav-main_floating__link--color_active);
189
+ }
190
+ }
191
+
192
+ .dsa-nav-main-toggle[aria-expanded=true] + .dsa-nav-main {
193
+ display: block;
194
+ }
@@ -72,12 +72,6 @@
72
72
  "description": "Toggle the inversion of the flyout navigation",
73
73
  "default": false
74
74
  },
75
- "dropdownInverted": {
76
- "type": "boolean",
77
- "title": "Dropdown Inverted",
78
- "description": "Toggle the inversion of the dropdown navigation",
79
- "default": false
80
- },
81
75
  "items": {
82
76
  "type": "array",
83
77
  "items": {
@@ -92,28 +86,6 @@
92
86
  },
93
87
  "active": {
94
88
  "type": "boolean"
95
- },
96
- "items": {
97
- "type": "array",
98
- "items": {
99
- "type": "object",
100
- "properties": {
101
- "href": {
102
- "type": "string",
103
- "format": "uri"
104
- },
105
- "id": {
106
- "type": "string"
107
- },
108
- "label": {
109
- "type": "string"
110
- },
111
- "active": {
112
- "type": "boolean"
113
- }
114
- },
115
- "additionalProperties": false
116
- }
117
89
  }
118
90
  },
119
91
  "additionalProperties": false,
@@ -125,20 +97,8 @@
125
97
  "examples": [
126
98
  [
127
99
  {
128
- "label": "Nav With Children",
129
- "href": "#",
130
- "items": [
131
- {
132
- "label": "TEST1",
133
- "href": "#",
134
- "id": "TEST1"
135
- },
136
- {
137
- "label": "TEST2",
138
- "href": "#",
139
- "id": "TEST2"
140
- }
141
- ]
100
+ "label": "Nav Item",
101
+ "href": "#"
142
102
  },
143
103
  {
144
104
  "label": "Active Item",
@@ -160,34 +120,6 @@
160
120
  ]
161
121
  ]
162
122
  },
163
- "cta": {
164
- "type": "object",
165
- "title": "CTA",
166
- "description": "Add a CTA to the Navigation",
167
- "properties": {
168
- "toggle": {
169
- "title": "Toggle CTA",
170
- "description": "Toggle the CTA",
171
- "type": "boolean",
172
- "default": false
173
- },
174
- "label": {
175
- "type": "string",
176
- "title": "Label",
177
- "description": "Text content to display inside the button",
178
- "examples": [
179
- "Book a meeting"
180
- ]
181
- },
182
- "target": {
183
- "type": "string",
184
- "title": "Target",
185
- "description": "Target that should be linked, makes the button behave like a link semantically",
186
- "format": "uri"
187
- }
188
- },
189
- "additionalProperties": false
190
- },
191
123
  "type": {
192
124
  "const": "nav-main"
193
125
  }