@kickstartds/ds-agency-premium 1.3.51--canary.674.14f816b.0 → 1.4.0--canary.14.677.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 (35) hide show
  1. package/dist/{BlogPostProps-f9a49428.d.ts → BlogPostProps-440f88a5.d.ts} +1 -1
  2. package/dist/{FooterProps-22e0307b.d.ts → FooterProps-2d0b03c2.d.ts} +2 -1
  3. package/dist/{HeaderProps-dd2071a8.d.ts → HeaderProps-c6c32ccf.d.ts} +2 -1
  4. package/dist/{SectionProps-03ff6d21.d.ts → SectionProps-83d399b4.d.ts} +1 -1
  5. package/dist/components/blog-overview/index.d.ts +1 -1
  6. package/dist/components/blog-post/index.d.ts +1 -1
  7. package/dist/components/footer/footer.schema.dereffed.json +23 -9
  8. package/dist/components/footer/index.d.ts +1 -1
  9. package/dist/components/header/header.schema.dereffed.json +23 -9
  10. package/dist/components/header/index.d.ts +1 -1
  11. package/dist/components/image-story/index.d.ts +1 -1
  12. package/dist/components/index/index.d.ts +5 -5
  13. package/dist/components/nav-dropdown/index.d.ts +1 -1
  14. package/dist/components/nav-dropdown/index.js +2 -2
  15. package/dist/components/nav-dropdown/nav-dropdown.css +25 -22
  16. package/dist/components/nav-flyout/index.d.ts +1 -2
  17. package/dist/components/nav-flyout/index.js +1 -1
  18. package/dist/components/nav-flyout/nav-flyout.css +2 -2
  19. package/dist/components/nav-main/index.d.ts +2 -1
  20. package/dist/components/nav-main/index.js +1 -1
  21. package/dist/components/nav-main/nav-main.schema.dereffed.json +23 -9
  22. package/dist/components/nav-main/nav-main.schema.json +20 -8
  23. package/dist/components/nav-topbar/index.d.ts +1 -2
  24. package/dist/components/nav-topbar/index.js +2 -2
  25. package/dist/components/nav-topbar/nav-topbar.css +55 -42
  26. package/dist/components/page-wrapper/tokens.css +2 -2
  27. package/dist/components/presets.json +40 -18
  28. package/dist/components/section/index.d.ts +1 -1
  29. package/dist/components/settings/settings.schema.dereffed.json +46 -18
  30. package/dist/tokens/themes.css +4 -4
  31. package/dist/tokens/tokens.css +2 -2
  32. package/dist/tokens/tokens.js +2 -2
  33. package/package.json +1 -1
  34. /package/dist/{BlogOverviewProps-525f7f9f.d.ts → BlogOverviewProps-f385fc47.d.ts} +0 -0
  35. /package/dist/{ImageStoryProps-03ff6d21.d.ts → ImageStoryProps-e853e1e7.d.ts} +0 -0
package/dist/{BlogPostProps-f9a49428.d.ts → BlogPostProps-440f88a5.d.ts} RENAMED
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { BlogHeadProps } from "./BlogHeadProps-f9a49428.js";
7
7
  import { BlogAsideProps } from "./BlogAsideProps-e1cbd5d3.js";
8
- import { SectionProps } from "./SectionProps-03ff6d21.js";
8
+ import { SectionProps } from "./SectionProps-83d399b4.js";
9
9
  import { CtaProps } from "./CtaProps-93230a76.js";
10
10
  import { SeoProps } from "./SeoProps-f2d6dcaa.js";
11
11
  /**
package/dist/{FooterProps-22e0307b.d.ts → FooterProps-2d0b03c2.d.ts} RENAMED
@@ -39,11 +39,12 @@ interface FooterProps {
39
39
  href: string;
40
40
  label: string;
41
41
  active?: boolean;
42
+ id?: string;
42
43
  items?: {
43
44
  href?: string;
44
- id?: string;
45
45
  label?: string;
46
46
  active?: boolean;
47
+ id?: string;
47
48
  }[];
48
49
  }[];
49
50
  }
package/dist/{HeaderProps-dd2071a8.d.ts → HeaderProps-c6c32ccf.d.ts} RENAMED
@@ -52,11 +52,12 @@ interface HeaderProps {
52
52
  href: string;
53
53
  label: string;
54
54
  active?: boolean;
55
+ id?: string;
55
56
  items?: {
56
57
  href?: string;
57
- id?: string;
58
58
  label?: string;
59
59
  active?: boolean;
60
+ id?: string;
60
61
  }[];
61
62
  }[];
62
63
  }
package/dist/{SectionProps-03ff6d21.d.ts → SectionProps-83d399b4.d.ts} RENAMED
@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
8
8
  import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
9
9
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
10
10
  import { HeroProps } from "./HeroProps-cf82a16d.js";
11
- import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
11
+ import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
12
12
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
13
13
  import { LogosProps } from "./LogosProps-f9474fe2.js";
14
14
  import { MosaicProps } from "./MosaicProps-d52c7151.js";
package/dist/components/blog-overview/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { BlogOverviewProps } from "../../BlogOverviewProps-525f7f9f.js";
2
+ import { BlogOverviewProps } from "../../BlogOverviewProps-f385fc47.js";
3
3
  declare const BlogOverview: {
4
4
  ({ latest, more }: BlogOverviewProps): import("react/jsx-runtime").JSX.Element;
5
5
  displayName: string;
package/dist/components/blog-post/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-f9a49428.js";
1
+ import { BlogPostProps } from "../../BlogPostProps-440f88a5.js";
2
2
  import { FC, PropsWithChildren } from "react";
3
3
  declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
4
4
  export { BlogPost };
package/dist/components/footer/footer.schema.dereffed.json CHANGED
@@ -78,6 +78,9 @@
78
78
  "active": {
79
79
  "type": "boolean"
80
80
  },
81
+ "id": {
82
+ "type": "string"
83
+ },
81
84
  "items": {
82
85
  "type": "array",
83
86
  "items": {
@@ -87,14 +90,14 @@
87
90
  "type": "string",
88
91
  "format": "uri"
89
92
  },
90
- "id": {
91
- "type": "string"
92
- },
93
93
  "label": {
94
94
  "type": "string"
95
95
  },
96
96
  "active": {
97
97
  "type": "boolean"
98
+ },
99
+ "id": {
100
+ "type": "string"
98
101
  }
99
102
  },
100
103
  "additionalProperties": false
@@ -109,17 +112,17 @@
109
112
  },
110
113
  "examples": [
111
114
  [
112
- {
113
- "label": "Navigation Item",
114
- "href": "#"
115
- },
116
115
  {
117
116
  "label": "Active Item",
118
117
  "href": "#",
119
118
  "active": true
120
119
  },
121
120
  {
122
- "label": "Item With Children",
121
+ "label": "Navigation Item",
122
+ "href": "#"
123
+ },
124
+ {
125
+ "label": "Dropdown",
123
126
  "href": "#",
124
127
  "items": [
125
128
  {
@@ -128,7 +131,18 @@
128
131
  "id": ""
129
132
  },
130
133
  {
131
- "label": "Another One",
134
+ "label": "Active Item",
135
+ "active": true,
136
+ "href": "#",
137
+ "id": ""
138
+ },
139
+ {
140
+ "label": "An Item with a longer Label",
141
+ "href": "#",
142
+ "id": ""
143
+ },
144
+ {
145
+ "label": "And One last one",
132
146
  "href": "#",
133
147
  "id": ""
134
148
  }
package/dist/components/footer/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { FC } from "react";
2
- import { FooterProps } from "../../FooterProps-22e0307b.js";
2
+ import { FooterProps } from "../../FooterProps-2d0b03c2.js";
3
3
  declare const Footer: FC<FooterProps>;
4
4
  export { Footer };
package/dist/components/header/header.schema.dereffed.json CHANGED
@@ -91,6 +91,9 @@
91
91
  "active": {
92
92
  "type": "boolean"
93
93
  },
94
+ "id": {
95
+ "type": "string"
96
+ },
94
97
  "items": {
95
98
  "type": "array",
96
99
  "items": {
@@ -100,14 +103,14 @@
100
103
  "type": "string",
101
104
  "format": "uri"
102
105
  },
103
- "id": {
104
- "type": "string"
105
- },
106
106
  "label": {
107
107
  "type": "string"
108
108
  },
109
109
  "active": {
110
110
  "type": "boolean"
111
+ },
112
+ "id": {
113
+ "type": "string"
111
114
  }
112
115
  },
113
116
  "additionalProperties": false
@@ -122,17 +125,17 @@
122
125
  },
123
126
  "examples": [
124
127
  [
125
- {
126
- "label": "Navigation Item",
127
- "href": "#"
128
- },
129
128
  {
130
129
  "label": "Active Item",
131
130
  "href": "#",
132
131
  "active": true
133
132
  },
134
133
  {
135
- "label": "Item With Children",
134
+ "label": "Navigation Item",
135
+ "href": "#"
136
+ },
137
+ {
138
+ "label": "Dropdown",
136
139
  "href": "#",
137
140
  "items": [
138
141
  {
@@ -141,7 +144,18 @@
141
144
  "id": ""
142
145
  },
143
146
  {
144
- "label": "Another One",
147
+ "label": "Active Item",
148
+ "active": true,
149
+ "href": "#",
150
+ "id": ""
151
+ },
152
+ {
153
+ "label": "An Item with a longer Label",
154
+ "href": "#",
155
+ "id": ""
156
+ },
157
+ {
158
+ "label": "And One last one",
145
159
  "href": "#",
146
160
  "id": ""
147
161
  }
package/dist/components/header/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { FC } from "react";
2
- import { HeaderProps } from "../../HeaderProps-dd2071a8.js";
2
+ import { HeaderProps } from "../../HeaderProps-c6c32ccf.js";
3
3
  declare const Header: FC<HeaderProps>;
4
4
  export { Header };
package/dist/components/image-story/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes } from "react";
3
- import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
3
+ import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
4
4
  declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
5
5
  declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
6
6
  declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
package/dist/components/index/index.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
5
5
  * and run json-schema-to-typescript to regenerate this file.
6
6
  */
7
- import { SectionProps } from "../../SectionProps-03ff6d21.js";
7
+ import { SectionProps } from "../../SectionProps-83d399b4.js";
8
8
  import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
9
9
  /* eslint-disable */
10
10
  /**
@@ -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-c6c32ccf.js";
16
+ import { FooterProps } from "../../FooterProps-2d0b03c2.js";
17
17
  /**
18
18
  * Collection of sections (with their contents) to render on the page
19
19
  */
@@ -72,6 +72,6 @@ interface SettingsProps {
72
72
  */
73
73
  seo: SeoProps;
74
74
  }
75
- export * from "../../BlogPostProps-f9a49428.js";
76
- export * from "../../BlogOverviewProps-525f7f9f.js";
75
+ export * from "../../BlogPostProps-440f88a5.js";
76
+ export * from "../../BlogOverviewProps-f385fc47.js";
77
77
  export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };
package/dist/components/nav-dropdown/index.d.ts CHANGED
@@ -13,9 +13,9 @@ interface NavDropdownProps {
13
13
  inverted?: DropdownInverted;
14
14
  items?: {
15
15
  href?: string;
16
- id?: string;
17
16
  label?: string;
18
17
  active?: boolean;
18
+ id?: string;
19
19
  }[];
20
20
  className?: string;
21
21
  }
package/dist/components/nav-dropdown/index.js CHANGED
@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
4
  import { Link } from '@kickstartds/base/lib/link';
5
5
 
6
- const NavDropdown = ({ items, inverted }) => (jsx("ul", { className: classnames(`dsa-nav-dropdown`), "ks-inverted": inverted?.toString(), children: items.map(({ label, href, id }) => {
7
- return (jsx("li", { className: classnames("dsa-nav-dropdown__item"), children: jsx(Link, { href: href, className: `dsa-nav-dropdown__link `, children: label }) }, id));
6
+ const NavDropdown = ({ items, inverted }) => (jsx("ul", { className: classnames(`dsa-nav-dropdown`), "ks-inverted": inverted?.toString(), children: items.map(({ label, active, href, id }) => {
7
+ return (jsx("li", { className: classnames("dsa-nav-dropdown__item", active && "dsa-nav-dropdown__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-dropdown__label`, children: label }) }, id));
8
8
  }) }));
9
9
 
10
10
  export { NavDropdown };
package/dist/components/nav-dropdown/nav-dropdown.css CHANGED
@@ -1,45 +1,48 @@
1
1
  .dsa-nav-dropdown {
2
2
  --dsa-nav-dropdown--padding: var(--ks-spacing-inset-stretch-xs);
3
- --dsa-nav-dropdown--background: var(--ks-background-color-default);
3
+ --dsa-nav-dropdown--background: var(--ks-background-color-card);
4
4
  --dsa-nav-dropdown--border-radius: var(--ks-border-radius-card);
5
5
  --dsa-nav-dropdown--box-shadow: var(--ks-box-shadow-card);
6
6
  --dsa-nav-dropdown--border: 1px solid var(--ks-border-color-card);
7
- --dsa-nav-dropdown__link--color: var(--ks-color-fg);
8
- --dsa-nav-dropdown__link--color_hover: var(--ks-text-color-interface-interactive-hover);
9
- --dsa-nav-dropdown__link--color_active: var(--ks-text-color-interface-interactive-active);
10
- --dsa-nav-dropdown__link--font: var(--ks-font-interface-m);
11
- --dsa-nav-dropdown__link--font-weight: var(--ks-font-weight-semi-bold);
12
- --dsa-nav-dropdown__link--font-weight_active: var(--ks-font-weight-semi-bold);
13
- --dsa-nav-dropdown__link--padding: 0.35em 0.25em;
14
- --dsa-nav-dropdown__link_dimmed--opacity: 0.6;
7
+ --dsa-nav-dropdown--min-width: 14em;
8
+ --dsa-nav-dropdown__label--color: var(--ks-color-fg);
9
+ --dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
10
+ --dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
11
+ --dsa-nav-dropdown__label--font: var(--ks-font-interface-m);
12
+ --dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
13
+ --dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-semi-bold);
14
+ --dsa-nav-dropdown__label--padding: 0.35em 0.25em;
15
+ --dsa-nav-dropdown__label_dimmed--opacity: 0.6;
15
16
  }
16
17
 
17
18
  .dsa-nav-dropdown {
18
- display: none;
19
+ font: var(--dsa-nav-dropdown__label--font);
20
+ min-width: var(--dsa-nav-dropdown--min-width);
19
21
  padding: var(--dsa-nav-dropdown--padding);
20
22
  position: absolute;
23
+ top: 100%;
21
24
  flex-direction: column;
22
- align-items: flex-start;
25
+ align-items: stretch;
23
26
  background-color: var(--dsa-nav-dropdown--background);
24
27
  border-radius: var(--dsa-nav-dropdown--border-radius);
25
28
  box-shadow: var(--dsa-nav-dropdown--box-shadow);
26
29
  border: var(--dsa-nav-dropdown--border);
27
30
  }
28
- .dsa-nav-dropdown:hover .dsa-nav-dropdown__link:not(:hover) {
29
- opacity: var(--dsa-nav-dropdown__link_dimmed--opacity);
31
+ .dsa-nav-dropdown:hover .dsa-nav-dropdown__label:not(:hover) {
32
+ opacity: var(--dsa-nav-dropdown__label_dimmed--opacity);
30
33
  }
31
- .dsa-nav-dropdown .dsa-nav-dropdown__link {
32
- font: var(--dsa-nav-dropdown__link--font);
33
- font-weight: var(--dsa-nav-dropdown__link--font-weight);
34
- color: var(--dsa-nav-dropdown__link--color);
34
+ .dsa-nav-dropdown .dsa-nav-dropdown__label {
35
+ font: inherit;
36
+ font-weight: var(--dsa-nav-dropdown__label--font-weight);
37
+ color: var(--dsa-nav-dropdown__label--color);
35
38
  position: relative;
36
39
  display: block;
37
- padding: var(--dsa-nav-dropdown__link--padding);
40
+ padding: var(--dsa-nav-dropdown__label--padding);
38
41
  text-align: left;
39
42
  }
40
- .dsa-nav-dropdown .dsa-nav-dropdown__link:hover {
41
- color: var(--dsa-nav-dropdown__link--color_hover);
43
+ .dsa-nav-dropdown .dsa-nav-dropdown__label:hover, .dsa-nav-dropdown .dsa-nav-dropdown__label:focus, .dsa-nav-dropdown .dsa-nav-dropdown__label:active {
44
+ color: var(--dsa-nav-dropdown__label--color_hover);
42
45
  }
43
- .dsa-nav-dropdown .dsa-nav-dropdown__link:active {
44
- color: var(--dsa-nav-dropdown__link--color_active);
46
+ .dsa-nav-dropdown .dsa-nav-dropdown__label--active {
47
+ color: var(--dsa-nav-dropdown__label--color_active);
45
48
  }
package/dist/components/nav-flyout/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  /// <reference types="react" />
2
- declare const NavFlyout: ({ items, inverted, logo, active }: {
2
+ declare const NavFlyout: ({ items, inverted, logo }: {
3
3
  items: any;
4
4
  inverted: any;
5
5
  logo: any;
6
- active: any;
7
6
  }) => import("react/jsx-runtime").JSX.Element;
8
7
  export { NavFlyout };
package/dist/components/nav-flyout/index.js CHANGED
@@ -6,7 +6,7 @@ import { Icon } from '@kickstartds/base/lib/icon';
6
6
  import { Logo } from '../logo/index.js';
7
7
  import '@kickstartds/base/lib/picture';
8
8
 
9
- const NavFlyout = ({ items, inverted, logo, active }) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout-list", children: items.map(({ label, href, id, items: subItems }) => {
9
+ const NavFlyout = ({ items, inverted, logo }) => items && items.length > 0 ? (jsxs("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Hauptnavigation", children: [jsx(Logo, { ...logo, className: "dsa-nav-flyout__logo" }), jsx("ul", { className: "dsa-nav-flyout-list", children: items.map(({ label, href, id, active, items: subItems }) => {
10
10
  const isActive = active === href ||
11
11
  subItems?.some((navItem) => active === navItem.href);
12
12
  return (jsxs("li", { className: classnames("dsa-nav-flyout__item", isActive && "dsa-nav-flyout__item--active"), children: [jsxs(Link, { href: href, className: `dsa-nav-flyout__link`, children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-flyout__link__icon", icon: "chevron-down" })) : ("")] }), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, id }) => {
package/dist/components/nav-flyout/nav-flyout.css CHANGED
@@ -23,8 +23,8 @@
23
23
  height: 100vh;
24
24
  overflow: hidden;
25
25
  position: fixed;
26
- width: 77vw;
27
- max-width: 23rem;
26
+ width: 100vw;
27
+ max-width: 36rem;
28
28
  transition: all var(--ks-duration-slow);
29
29
  padding: var(--dsa-nav-flyout--padding);
30
30
  right: 0;
package/dist/components/nav-main/index.d.ts CHANGED
@@ -37,11 +37,12 @@ interface NavMainProps {
37
37
  href: string;
38
38
  label: string;
39
39
  active?: boolean;
40
+ id?: string;
40
41
  items?: {
41
42
  href?: string;
42
- id?: string;
43
43
  label?: string;
44
44
  active?: boolean;
45
+ id?: string;
45
46
  }[];
46
47
  }[];
47
48
  cta?: CTA;
package/dist/components/nav-main/index.js CHANGED
@@ -14,6 +14,6 @@ import '../nav-dropdown/index.js';
14
14
  import '../logo/index.js';
15
15
  import '@kickstartds/base/lib/picture';
16
16
 
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;
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 }), jsx(NavFlyout, { items: items, inverted: flyoutInverted, logo: logo })] })) : null;
18
18
 
19
19
  export { NavMain };
package/dist/components/nav-main/nav-main.schema.dereffed.json CHANGED
@@ -93,6 +93,9 @@
93
93
  "active": {
94
94
  "type": "boolean"
95
95
  },
96
+ "id": {
97
+ "type": "string"
98
+ },
96
99
  "items": {
97
100
  "type": "array",
98
101
  "items": {
@@ -102,14 +105,14 @@
102
105
  "type": "string",
103
106
  "format": "uri"
104
107
  },
105
- "id": {
106
- "type": "string"
107
- },
108
108
  "label": {
109
109
  "type": "string"
110
110
  },
111
111
  "active": {
112
112
  "type": "boolean"
113
+ },
114
+ "id": {
115
+ "type": "string"
113
116
  }
114
117
  },
115
118
  "additionalProperties": false
@@ -124,17 +127,17 @@
124
127
  },
125
128
  "examples": [
126
129
  [
127
- {
128
- "label": "Navigation Item",
129
- "href": "#"
130
- },
131
130
  {
132
131
  "label": "Active Item",
133
132
  "href": "#",
134
133
  "active": true
135
134
  },
136
135
  {
137
- "label": "Item With Children",
136
+ "label": "Navigation Item",
137
+ "href": "#"
138
+ },
139
+ {
140
+ "label": "Dropdown",
138
141
  "href": "#",
139
142
  "items": [
140
143
  {
@@ -143,7 +146,18 @@
143
146
  "id": ""
144
147
  },
145
148
  {
146
- "label": "Another One",
149
+ "label": "Active Item",
150
+ "active": true,
151
+ "href": "#",
152
+ "id": ""
153
+ },
154
+ {
155
+ "label": "An Item with a longer Label",
156
+ "href": "#",
157
+ "id": ""
158
+ },
159
+ {
160
+ "label": "And One last one",
147
161
  "href": "#",
148
162
  "id": ""
149
163
  }
package/dist/components/nav-main/nav-main.schema.json CHANGED
@@ -27,15 +27,16 @@
27
27
  "href": { "type": "string", "format": "uri" },
28
28
  "label": { "type": "string" },
29
29
  "active": { "type": "boolean" },
30
+ "id": { "type": "string" },
30
31
  "items": {
31
32
  "type": "array",
32
33
  "items": {
33
34
  "type": "object",
34
35
  "properties": {
35
36
  "href": { "type": "string", "format": "uri" },
36
- "id": { "type": "string" },
37
37
  "label": { "type": "string" },
38
- "active": { "type": "boolean" }
38
+ "active": { "type": "boolean" },
39
+ "id": { "type": "string" }
39
40
  }
40
41
  }
41
42
  }
@@ -45,17 +46,17 @@
45
46
  },
46
47
  "examples": [
47
48
  [
48
- {
49
- "label": "Navigation Item",
50
- "href": "#"
51
- },
52
49
  {
53
50
  "label": "Active Item",
54
51
  "href": "#",
55
52
  "active": true
56
53
  },
57
54
  {
58
- "label": "Item With Children",
55
+ "label": "Navigation Item",
56
+ "href": "#"
57
+ },
58
+ {
59
+ "label": "Dropdown",
59
60
  "href": "#",
60
61
  "items": [
61
62
  {
@@ -64,7 +65,18 @@
64
65
  "id": ""
65
66
  },
66
67
  {
67
- "label": "Another One",
68
+ "label": "Active Item",
69
+ "active": true,
70
+ "href": "#",
71
+ "id": ""
72
+ },
73
+ {
74
+ "label": "An Item with a longer Label",
75
+ "href": "#",
76
+ "id": ""
77
+ },
78
+ {
79
+ "label": "And One last one",
68
80
  "href": "#",
69
81
  "id": ""
70
82
  }
package/dist/components/nav-topbar/index.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
- declare const NavTopbar: ({ items, active, dropdownInverted }: {
2
+ declare const NavTopbar: ({ items, dropdownInverted }: {
3
3
  items: any;
4
- active: any;
5
4
  dropdownInverted: any;
6
5
  }) => import("react/jsx-runtime").JSX.Element;
7
6
  export { NavTopbar };
package/dist/components/nav-topbar/index.js CHANGED
@@ -5,8 +5,8 @@ import { Link } from '@kickstartds/base/lib/link';
5
5
  import { Icon } from '@kickstartds/base/lib/icon';
6
6
  import { NavDropdown } from '../nav-dropdown/index.js';
7
7
 
8
- const NavTopbar = ({ items, active, dropdownInverted }) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: jsx("ul", { className: "dsa-nav-list", children: items.map(({ label, href, id, items: subItems }) => {
9
- return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active"), children: [jsxs(Link, { href: href, className: `dsa-nav-topbar__link`, children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__link__icon", icon: "chevron-down" })) : ("")] }), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: dropdownInverted })) : null] }, id));
8
+ const NavTopbar = ({ items, dropdownInverted }) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-main", "aria-label": "Hauptnavigation", children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, id, active, items: subItems }) => {
9
+ return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", { tabIndex: 0, className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down" })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: dropdownInverted })) : null] }, id));
10
10
  }) }) })) : null;
11
11
 
12
12
  export { NavTopbar };
package/dist/components/nav-topbar/nav-topbar.css CHANGED
@@ -1,14 +1,15 @@
1
1
  .dsa-nav-topbar {
2
- --dsa-nav-topbar__link--color: var(--ks-color-fg);
3
- --dsa-nav-topbar__link--color_hover: var(--ks-text-color-interface-interactive-hover);
4
- --dsa-nav-topbar__link--color_active: var(--ks-text-color-interface-interactive-active);
5
- --dsa-nav-topbar__link--font: var(--ks-font-interface-m);
6
- --dsa-nav-topbar__link--font-weight: var(--ks-font-weight-semi-bold);
7
- --dsa-nav-topbar__link--font-weight_active: var(--ks-font-weight-semi-bold);
8
- --dsa-nav-topbar__link--padding: 0 0.75em;
9
- --dsa-nav-topbar__link_dimmed--opacity: 0.6;
10
- --dsa-nav-topbar_floating__link_dimmed--opacity: 0.75;
11
- --dsa-nav-topbar_floating__link--color: var(--ks-color-fg);
2
+ --dsa-nav-topbar__label--color: var(--ks-color-fg);
3
+ --dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
4
+ --dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
5
+ --dsa-nav-topbar__label--font: var(--ks-font-interface-m);
6
+ --dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
7
+ --dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
8
+ --dsa-nav-topbar__label--padding: 0.75em 0.75em;
9
+ --dsa-nav-topbar__label_dimmed--opacity: 0.6;
10
+ --dsa-nav-topbar__label__icon--size: 1.5em;
11
+ --dsa-nav-topbar_floating__label_dimmed--opacity: 0.75;
12
+ --dsa-nav-topbar_floating__label--color: var(--ks-color-fg);
12
13
  }
13
14
 
14
15
  .dsa-nav-topbar {
@@ -23,60 +24,72 @@
23
24
  display: flex;
24
25
  }
25
26
  }
26
- .dsa-nav-topbar .dsa-nav-list {
27
+ .dsa-nav-topbar ul {
28
+ list-style: none;
29
+ }
30
+ .dsa-nav-topbar .dsa-nav-topbar__list {
31
+ margin: 0;
32
+ padding: 0;
27
33
  display: flex;
28
34
  flex-wrap: nowrap;
29
35
  align-items: stretch;
30
36
  }
31
- .dsa-nav-topbar .dsa-nav-list > ul.dsa-nav-main__list {
37
+ .dsa-nav-topbar .dsa-nav-topbar__list > ul.dsa-nav-main__list {
32
38
  display: none;
33
39
  }
34
- .dsa-nav-topbar .dsa-nav-list:hover .dsa-nav-topbar__link:not(:hover) {
35
- opacity: var(--dsa-nav-topbar__link_dimmed--opacity);
40
+ .dsa-nav-topbar .dsa-nav-topbar__list:hover .dsa-nav-topbar__item:not(:hover, .dsa-nav-topbar__item--active) .dsa-nav-topbar__label {
41
+ opacity: var(--dsa-nav-topbar__label_dimmed--opacity);
36
42
  }
37
- .dsa-header--floating .dsa-nav-topbar .dsa-nav-list:hover .dsa-nav-topbar__link:not(:hover) {
43
+ .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__list:hover .dsa-nav-topbar__item:not(:hover, .dsa-nav-topbar__item--active) {
38
44
  opacity: var(--dsa-nav-topbar_floating__link_dimmed--opacity);
39
45
  }
40
46
  .dsa-nav-topbar .dsa-nav-topbar__item {
41
- flex-shrink: 0;
42
47
  position: relative;
43
- outline: 0;
48
+ display: flex;
49
+ align-items: stretch;
50
+ }
51
+ .dsa-nav-topbar .dsa-nav-topbar__item .dsa-nav-dropdown {
52
+ transition: all var(--ks-transition-fade);
53
+ transform: translateY(-5%);
54
+ opacity: 0;
55
+ pointer-events: none;
44
56
  }
45
- .dsa-nav-topbar .dsa-nav-topbar__item:hover > .dsa-nav-dropdown {
57
+ .dsa-nav-topbar .dsa-nav-topbar__item--active .dsa-nav-topbar__label {
58
+ color: var(--dsa-nav-topbar__label--color_active);
59
+ font-weight: var(--dsa-nav-topbar__label--font-weight_active);
60
+ }
61
+ .dsa-nav-topbar .dsa-nav-topbar__item:hover > .dsa-nav-dropdown, .dsa-nav-topbar .dsa-nav-topbar__item:focus-within > .dsa-nav-dropdown {
46
62
  display: flex;
63
+ pointer-events: all;
64
+ transform: translateY(0);
65
+ opacity: 1;
47
66
  }
48
- .dsa-nav-topbar .dsa-nav-topbar__link {
49
- font: var(--dsa-nav-topbar__link--font);
50
- font-weight: var(--dsa-nav-topbar__link--font-weight);
51
- color: var(--dsa-nav-topbar__link--color);
52
- position: relative;
67
+ .dsa-nav-topbar .dsa-nav-topbar__label {
53
68
  display: flex;
69
+ font: var(--dsa-nav-topbar__label--font);
70
+ font-weight: var(--dsa-nav-topbar__label--font-weight);
71
+ color: var(--dsa-nav-topbar__label--color);
54
72
  height: 100%;
55
73
  align-items: center;
56
- padding: var(--dsa-nav-topbar__link--padding);
74
+ padding: var(--dsa-nav-topbar__label--padding);
57
75
  }
58
- .dsa-nav-topbar .dsa-nav-topbar__link:hover {
59
- color: var(--dsa-nav-topbar__link--color_hover);
76
+ .dsa-nav-topbar .dsa-nav-topbar__label:hover, .dsa-nav-topbar .dsa-nav-topbar__label:focus {
77
+ color: var(--dsa-nav-topbar__label--color_hover);
78
+ opacity: 1;
60
79
  }
61
- .dsa-nav-topbar .dsa-nav-topbar__link:active {
62
- color: var(--dsa-nav-topbar__link--color_active);
63
- }
64
- .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__link {
80
+ .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label {
65
81
  color: var(--dsa-nav-topbar_floating__link--color);
66
82
  }
67
- .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__link:hover {
68
- color: var(--dsa-nav-topbar__link--color_hover);
83
+ .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label:hover {
84
+ color: var(--dsa-nav-topbar__label--color_hover);
69
85
  }
70
- .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__link:active {
71
- color: var(--dsa-nav-topbar__link--color_active);
86
+ .dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label:active {
87
+ color: var(--dsa-nav-topbar__label--color_active);
72
88
  }
73
- .dsa-nav-topbar ul {
74
- box-sizing: border-box;
75
- margin: 0;
76
- padding: 0;
77
- list-style: none;
89
+ .dsa-nav-topbar .dsa-nav-topbar__label__icon {
90
+ width: var(--dsa-nav-topbar__label__icon--size);
91
+ height: var(--dsa-nav-topbar__label__icon--size);
78
92
  }
79
- .dsa-nav-topbar ul li {
80
- display: block;
81
- margin: 0;
93
+ .dsa-nav-topbar .dsa-nav-topbar__label:not(.dsa-nav-topbar__link) {
94
+ cursor: default;
82
95
  }
package/dist/components/page-wrapper/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 22 Aug 2024 07:24:30 GMT
3
+ * Generated on Thu, 22 Aug 2024 12:29:39 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -926,7 +926,7 @@
926
926
  --ks-timing-function-linear: linear;
927
927
  --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
928
928
  --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
929
- --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
929
+ --ks-transition-fade: var(--ks-duration-fast) var(--ks-timing-function-ease-out);
930
930
  --ks-font-family-display: Fredoka, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
931
931
  --ks-font-family-copy: Mulish, "Helvetica Neue", Helvetica, Arial, sans-serif;
932
932
  --ks-font-family-interface: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
package/dist/components/presets.json CHANGED
@@ -1284,7 +1284,7 @@
1284
1284
  "id": "layout-footer--footer",
1285
1285
  "group": "Layout/Footer",
1286
1286
  "name": "Footer",
1287
- "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 href: '#',\n label: 'Navigation Item'\n },\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n id: '',\n label: 'Level 2 Item'\n },\n {\n href: '#',\n id: '',\n label: 'Another One'\n }\n ],\n label: 'Item With Children'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
1287
+ "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 href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n label: 'Navigation Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n id: '',\n label: 'Level 2 Item'\n },\n {\n active: true,\n href: '#',\n id: '',\n label: 'Active Item'\n },\n {\n href: '#',\n id: '',\n label: 'An Item with a longer Label'\n },\n {\n href: '#',\n id: '',\n label: 'And One last one'\n }\n ],\n label: 'Dropdown'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
1288
1288
  "args": {
1289
1289
  "logo": {
1290
1290
  "src": "/logo.svg",
@@ -1300,26 +1300,37 @@
1300
1300
  "navItems": [
1301
1301
  {
1302
1302
  "href": "#",
1303
- "label": "Navigation Item"
1303
+ "label": "Active Item",
1304
+ "active": true
1304
1305
  },
1305
1306
  {
1306
1307
  "href": "#",
1307
- "label": "Active Item",
1308
- "active": true
1308
+ "label": "Navigation Item"
1309
1309
  },
1310
1310
  {
1311
1311
  "href": "#",
1312
- "label": "Item With Children",
1312
+ "label": "Dropdown",
1313
1313
  "items": [
1314
1314
  {
1315
1315
  "href": "#",
1316
- "id": "",
1317
- "label": "Level 2 Item"
1316
+ "label": "Level 2 Item",
1317
+ "id": ""
1318
+ },
1319
+ {
1320
+ "href": "#",
1321
+ "label": "Active Item",
1322
+ "active": true,
1323
+ "id": ""
1324
+ },
1325
+ {
1326
+ "href": "#",
1327
+ "label": "An Item with a longer Label",
1328
+ "id": ""
1318
1329
  },
1319
1330
  {
1320
1331
  "href": "#",
1321
- "id": "",
1322
- "label": "Another One"
1332
+ "label": "And One last one",
1333
+ "id": ""
1323
1334
  }
1324
1335
  ]
1325
1336
  },
@@ -1510,7 +1521,7 @@
1510
1521
  "id": "layout-header--header",
1511
1522
  "group": "Layout/Header",
1512
1523
  "name": "Header",
1513
- "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 href: '#',\n label: 'Navigation Item'\n },\n {\n active: true,\n href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n id: '',\n label: 'Level 2 Item'\n },\n {\n href: '#',\n id: '',\n label: 'Another One'\n }\n ],\n label: 'Item With Children'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
1524
+ "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 href: '#',\n label: 'Active Item'\n },\n {\n href: '#',\n label: 'Navigation Item'\n },\n {\n href: '#',\n items: [\n {\n href: '#',\n id: '',\n label: 'Level 2 Item'\n },\n {\n active: true,\n href: '#',\n id: '',\n label: 'Active Item'\n },\n {\n href: '#',\n id: '',\n label: 'An Item with a longer Label'\n },\n {\n href: '#',\n id: '',\n label: 'And One last one'\n }\n ],\n label: 'Dropdown'\n },\n {\n href: '#',\n label: 'One more Item'\n },\n {\n href: '#',\n label: 'Last Item'\n }\n ]}\n/>",
1514
1525
  "args": {
1515
1526
  "logo": {
1516
1527
  "src": "/logo.svg",
@@ -1527,26 +1538,37 @@
1527
1538
  "navItems": [
1528
1539
  {
1529
1540
  "href": "#",
1530
- "label": "Navigation Item"
1541
+ "label": "Active Item",
1542
+ "active": true
1531
1543
  },
1532
1544
  {
1533
1545
  "href": "#",
1534
- "label": "Active Item",
1535
- "active": true
1546
+ "label": "Navigation Item"
1536
1547
  },
1537
1548
  {
1538
1549
  "href": "#",
1539
- "label": "Item With Children",
1550
+ "label": "Dropdown",
1540
1551
  "items": [
1541
1552
  {
1542
1553
  "href": "#",
1543
- "id": "",
1544
- "label": "Level 2 Item"
1554
+ "label": "Level 2 Item",
1555
+ "id": ""
1556
+ },
1557
+ {
1558
+ "href": "#",
1559
+ "label": "Active Item",
1560
+ "active": true,
1561
+ "id": ""
1562
+ },
1563
+ {
1564
+ "href": "#",
1565
+ "label": "An Item with a longer Label",
1566
+ "id": ""
1545
1567
  },
1546
1568
  {
1547
1569
  "href": "#",
1548
- "id": "",
1549
- "label": "Another One"
1570
+ "label": "And One last one",
1571
+ "id": ""
1550
1572
  }
1551
1573
  ]
1552
1574
  },
package/dist/components/section/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { HTMLAttributes, FC, PropsWithChildren } from "react";
3
- import { SectionProps } from "../../SectionProps-03ff6d21.js";
3
+ import { SectionProps } from "../../SectionProps-83d399b4.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 & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
package/dist/components/settings/settings.schema.dereffed.json CHANGED
@@ -103,6 +103,9 @@
103
103
  "active": {
104
104
  "type": "boolean"
105
105
  },
106
+ "id": {
107
+ "type": "string"
108
+ },
106
109
  "items": {
107
110
  "type": "array",
108
111
  "items": {
@@ -112,14 +115,14 @@
112
115
  "type": "string",
113
116
  "format": "uri"
114
117
  },
115
- "id": {
116
- "type": "string"
117
- },
118
118
  "label": {
119
119
  "type": "string"
120
120
  },
121
121
  "active": {
122
122
  "type": "boolean"
123
+ },
124
+ "id": {
125
+ "type": "string"
123
126
  }
124
127
  },
125
128
  "additionalProperties": false
@@ -134,17 +137,17 @@
134
137
  },
135
138
  "examples": [
136
139
  [
137
- {
138
- "label": "Navigation Item",
139
- "href": "#"
140
- },
141
140
  {
142
141
  "label": "Active Item",
143
142
  "href": "#",
144
143
  "active": true
145
144
  },
146
145
  {
147
- "label": "Item With Children",
146
+ "label": "Navigation Item",
147
+ "href": "#"
148
+ },
149
+ {
150
+ "label": "Dropdown",
148
151
  "href": "#",
149
152
  "items": [
150
153
  {
@@ -153,7 +156,18 @@
153
156
  "id": ""
154
157
  },
155
158
  {
156
- "label": "Another One",
159
+ "label": "Active Item",
160
+ "active": true,
161
+ "href": "#",
162
+ "id": ""
163
+ },
164
+ {
165
+ "label": "An Item with a longer Label",
166
+ "href": "#",
167
+ "id": ""
168
+ },
169
+ {
170
+ "label": "And One last one",
157
171
  "href": "#",
158
172
  "id": ""
159
173
  }
@@ -256,6 +270,9 @@
256
270
  "active": {
257
271
  "type": "boolean"
258
272
  },
273
+ "id": {
274
+ "type": "string"
275
+ },
259
276
  "items": {
260
277
  "type": "array",
261
278
  "items": {
@@ -265,14 +282,14 @@
265
282
  "type": "string",
266
283
  "format": "uri"
267
284
  },
268
- "id": {
269
- "type": "string"
270
- },
271
285
  "label": {
272
286
  "type": "string"
273
287
  },
274
288
  "active": {
275
289
  "type": "boolean"
290
+ },
291
+ "id": {
292
+ "type": "string"
276
293
  }
277
294
  },
278
295
  "additionalProperties": false
@@ -287,17 +304,17 @@
287
304
  },
288
305
  "examples": [
289
306
  [
290
- {
291
- "label": "Navigation Item",
292
- "href": "#"
293
- },
294
307
  {
295
308
  "label": "Active Item",
296
309
  "href": "#",
297
310
  "active": true
298
311
  },
299
312
  {
300
- "label": "Item With Children",
313
+ "label": "Navigation Item",
314
+ "href": "#"
315
+ },
316
+ {
317
+ "label": "Dropdown",
301
318
  "href": "#",
302
319
  "items": [
303
320
  {
@@ -306,7 +323,18 @@
306
323
  "id": ""
307
324
  },
308
325
  {
309
- "label": "Another One",
326
+ "label": "Active Item",
327
+ "active": true,
328
+ "href": "#",
329
+ "id": ""
330
+ },
331
+ {
332
+ "label": "An Item with a longer Label",
333
+ "href": "#",
334
+ "id": ""
335
+ },
336
+ {
337
+ "label": "And One last one",
310
338
  "href": "#",
311
339
  "id": ""
312
340
  }
package/dist/tokens/themes.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 22 Aug 2024 07:24:32 GMT
3
+ * Generated on Thu, 22 Aug 2024 12:29:41 GMT
4
4
  */
5
5
  :root [ks-theme=business] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
2727
2727
  }
2728
2728
  /**
2729
2729
  * Do not edit directly
2730
- * Generated on Thu, 22 Aug 2024 07:24:37 GMT
2730
+ * Generated on Thu, 22 Aug 2024 12:29:45 GMT
2731
2731
  */
2732
2732
  :root [ks-theme=google] {
2733
2733
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
5458
5458
  }
5459
5459
  /**
5460
5460
  * Do not edit directly
5461
- * Generated on Thu, 22 Aug 2024 07:24:34 GMT
5461
+ * Generated on Thu, 22 Aug 2024 12:29:43 GMT
5462
5462
  */
5463
5463
  :root [ks-theme=ngo] {
5464
5464
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
8459
8459
  }
8460
8460
  /**
8461
8461
  * Do not edit directly
8462
- * Generated on Thu, 22 Aug 2024 07:24:39 GMT
8462
+ * Generated on Thu, 22 Aug 2024 12:29:47 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
package/dist/tokens/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 22 Aug 2024 07:24:30 GMT
3
+ * Generated on Thu, 22 Aug 2024 12:29:39 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -927,7 +927,7 @@
927
927
  --ks-timing-function-linear: linear;
928
928
  --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
929
929
  --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
930
- --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
930
+ --ks-transition-fade: var(--ks-duration-fast) var(--ks-timing-function-ease-out);
931
931
  --ks-font-family-display: Fredoka, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
932
932
  --ks-font-family-copy: Mulish, 'Helvetica Neue', Helvetica, Arial, sans-serif;
933
933
  --ks-font-family-interface: Mulish, system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif;
package/dist/tokens/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 22 Aug 2024 07:24:30 GMT
3
+ * Generated on Thu, 22 Aug 2024 12:29:39 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#230a2b";
@@ -930,7 +930,7 @@ export const KsTimingFunctionEaseInOut = "ease-in-out";
930
930
  export const KsTimingFunctionLinear = "linear";
931
931
  export const KsTransitionCollapse = "300ms ease-out";
932
932
  export const KsTransitionHover = "100ms ease-in-out";
933
- export const KsTransitionFade = "300ms ease-out";
933
+ export const KsTransitionFade = "100ms ease-out";
934
934
  export const KsFontFamilyDisplay = "Fredoka, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif";
935
935
  export const KsFontFamilyCopy = "Mulish, 'Helvetica Neue', Helvetica, Arial, sans-serif";
936
936
  export const KsFontFamilyInterface = "Mulish, system-ui, -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Avenir', 'Segoe UI', 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu', 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.3.51--canary.674.14f816b.0",
3
+ "version": "1.4.0--canary.14.677.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {