@kickstartds/ds-agency-premium 1.4.0--canary.12.465.0 → 1.4.0--canary.14.677.0

package/dist/components/section/index.js

@@ -1,14 +1,13 @@
 import "./section.css";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { useKsComponent } from '@kickstartds/core/lib/react';
-import { HeadlineLevelProvider } from '../headline-level-context/index.js';
-import { SectionContextDefault, SectionContext } from '@kickstartds/base/lib/section';
+import { SectionContextDefault as SectionContextDefault$1, SectionContext as SectionContext$1 } from '@kickstartds/base/lib/section';
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const Section = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -17,33 +16,38 @@ const Section = forwardRef(({ headline, content, headerSpacing, width = "default
         spotlight,
         content?.mode === "slider",
     ]);
-    return (jsx(HeadlineLevelProvider, { children: jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
-                `dsa-section-style--${style === "verticalGradient"
-                    ? "vertical-gradient"
-                    : style === "horizontalGradient"
-                        ? "horizontal-gradient"
-                        : style === "accentTransition"
-                            ? "accent-transition"
-                            : style === "boldTransition"
-                                ? "bold-transition"
-                                : style === "symmetricGlow"
-                                    ? "symmetric-glow"
-                                    : style === "anchorGlow"
-                                        ? "anchor-glow"
-                                        : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
-                ...headlineRest,
-                spaceAfter: "large",
-                // @ts-expect-error
-                content: headlineRest.text,
-                level: "h2",
-                style: headlineLarge ? "h1" : "h2",
-            }, buttons: {
-                buttons,
-                // @ts-expect-error
-                items: buttons,
-            }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }) }));
+    return (jsx(SectionContextDefault$1, { ...props, ...componentProps, className: classnames("dsa-section", style !== "default" &&
+            `dsa-section-style--${style === "verticalGradient"
+                ? "vertical-gradient"
+                : style === "horizontalGradient"
+                    ? "horizontal-gradient"
+                    : style === "accentTransition"
+                        ? "accent-transition"
+                        : style === "boldTransition"
+                            ? "bold-transition"
+                            : style === "symmetricGlow"
+                                ? "symmetric-glow"
+                                : style === "anchorGlow"
+                                    ? "anchor-glow"
+                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, content: content, headline: {
+            ...headlineRest,
+            spaceAfter: "large",
+            // @ts-expect-error
+            content: headlineRest.text,
+            level: "h2",
+            style: headlineLarge ? "h1" : "h2",
+        }, buttons: {
+            buttons,
+            // @ts-expect-error
+            items: buttons,
+        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
+});
+const SectionContext = createContext(SectionContextDefault);
+const Section = forwardRef((props, ref) => {
+    const Component = useContext(SectionContext);
+    return jsx(Component, { ...props, ref: ref });
 });
 Section.displayName = "Section";
-const SectionProvider = (props) => (jsx(SectionContext.Provider, { ...props, value: Section }));
+const SectionProvider = (props) => (jsx(SectionContext$1.Provider, { ...props, value: Section }));
 
-export { Section, SectionProvider };
+export { Section, SectionContext, SectionContextDefault, SectionProvider };

package/dist/components/section/section.css

@@ -66,8 +66,8 @@
     var(--ks-color-primary-alpha-5) 0%,
     var(--ks-color-secondary-alpha-5) 100%
   );
-  --dsa-section__spotlight--left: 50%;
-  --dsa-section__spotlight--top: 50%;
+  --dsa-section__spotlight--size: 150px;
+  --dsa-section__spotlight--blur: 100%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
@@ -166,7 +166,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  background-image: radial-gradient(150px circle at var(--dsa-section__spotlight--left) var(--dsa-section__spotlight--top), var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) 80%, transparent 80%, transparent 100%);
+  background-image: radial-gradient(var(--dsa-section__spotlight--size) circle, var(--dsa-section__spotlight--color) 0%, var(--dsa-section__spotlight--color) calc(100% - var(--dsa-section__spotlight--blur)), transparent 100%, transparent 100%);
 }
 .l-section.dsa-section .l-section__content {
   --l-section_buttons--space-before: var(--dsa-section__buttons--space-before, var(--l-section--gutter));

package/dist/components/section/section.schema.dereffed.json

@@ -972,23 +972,33 @@
                     "type": "string",
                     "format": "image"
                   },
-                  "ratio": {
-                    "title": "Image aspect ratio",
-                    "description": "Select an aspect ratio to use for cropping and displaying the image",
+                  "aspectRatio": {
                     "type": "string",
+                    "title": "Aspect Ratio",
+                    "description": "The aspect ratio of the image",
                     "enum": [
-                      "4:3",
-                      "3:2",
-                      "16:9",
-                      "1:1",
-                      "none"
+                      "unset",
+                      "square",
+                      "wide",
+                      "landscape"
                     ],
-                    "default": "none"
+                    "default": "unset"
                   },
                   "alt": {
                     "title": "Alt text",
                     "description": "Image description",
                     "type": "string"
+                  },
+                  "vAlign": {
+                    "title": "Image vertical alignment",
+                    "description": "Select a vertical alignment for the image",
+                    "type": "string",
+                    "enum": [
+                      "center",
+                      "top",
+                      "bottom"
+                    ],
+                    "default": "top"
                   }
                 },
                 "additionalProperties": false
@@ -1099,8 +1109,6 @@
                 "title": "Logos",
                 "description": "The logos to display",
                 "items": {
-                  "$schema": "http://json-schema.org/draft-07/schema#",
-                  "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                   "title": "Logo",
                   "description": "Logo entry for Logos component",
                   "type": "object",
@@ -1126,9 +1134,6 @@
                       "examples": [
                         "Logo 1"
                       ]
-                    },
-                    "type": {
-                      "const": "logo"
                     }
                   },
                   "additionalProperties": false,
@@ -2076,8 +2081,6 @@
                           "title": "Logos",
                           "description": "The logos to display",
                           "items": {
-                            "$schema": "http://json-schema.org/draft-07/schema#",
-                            "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                             "title": "Logo",
                             "description": "Logo entry for Logos component",
                             "type": "object",
@@ -2103,9 +2106,6 @@
                                 "examples": [
                                   "Logo 1"
                                 ]
-                              },
-                              "type": {
-                                "const": "logo"
                               }
                             },
                             "additionalProperties": false,

package/dist/components/settings/settings.schema.dereffed.json

@@ -14,6 +14,7 @@
       "$schema": "http://json-schema.org/draft-07/schema#",
       "$id": "http://schema.mydesignsystem.com/header.schema.json",
       "title": "Header",
+      "description": "Header layered on top by the CMS",
       "type": "object",
       "properties": {
         "logo": {
@@ -24,16 +25,24 @@
               "title": "Source",
               "description": "Picture source",
               "type": "string",
-              "format": "image",
-              "examples": [
-                "https://picsum.photos/seed/kdspicture/300/300"
-              ]
+              "format": "image"
+            },
+            "srcInverted": {
+              "title": "Source",
+              "description": "Picture source",
+              "type": "string",
+              "format": "image"
             },
             "alt": {
               "title": "Alt text",
               "description": "Alt text to display for picture",
               "type": "string"
             },
+            "homepageHref": {
+              "type": "string",
+              "format": "uri",
+              "default": "/"
+            },
             "width": {
               "title": "Width",
               "description": "Width of the picture",
@@ -55,10 +64,17 @@
           },
           "additionalProperties": false
         },
-        "logoHref": {
-          "type": "string",
-          "format": "uri",
-          "default": "/"
+        "flyoutInverted": {
+          "type": "boolean",
+          "title": "Flyout Inverted",
+          "description": "Toggle the inversion of the flyout navigation",
+          "default": false
+        },
+        "dropdownInverted": {
+          "type": "boolean",
+          "title": "Dropdown Inverted",
+          "description": "Toggle the inversion of the dropdown navigation",
+          "default": false
         },
         "floating": {
           "type": "boolean",
@@ -86,6 +102,31 @@
               },
               "active": {
                 "type": "boolean"
+              },
+              "id": {
+                "type": "string"
+              },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "href": {
+                      "type": "string",
+                      "format": "uri"
+                    },
+                    "label": {
+                      "type": "string"
+                    },
+                    "active": {
+                      "type": "boolean"
+                    },
+                    "id": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                }
               }
             },
             "additionalProperties": false,
@@ -96,19 +137,42 @@
           },
           "examples": [
             [
-              {
-                "label": "Nav Item",
-                "href": "#"
-              },
               {
                 "label": "Active Item",
                 "href": "#",
                 "active": true
               },
               {
-                "label": "Another Item",
+                "label": "Navigation Item",
                 "href": "#"
               },
+              {
+                "label": "Dropdown",
+                "href": "#",
+                "items": [
+                  {
+                    "label": "Level 2 Item",
+                    "href": "#",
+                    "id": ""
+                  },
+                  {
+                    "label": "Active Item",
+                    "active": true,
+                    "href": "#",
+                    "id": ""
+                  },
+                  {
+                    "label": "An Item with a longer Label",
+                    "href": "#",
+                    "id": ""
+                  },
+                  {
+                    "label": "And One last one",
+                    "href": "#",
+                    "id": ""
+                  }
+                ]
+              },
               {
                 "label": "One more Item",
                 "href": "#"
@@ -124,10 +188,7 @@
           "const": "header"
         }
       },
-      "additionalProperties": false,
-      "required": [
-        "logo"
-      ]
+      "additionalProperties": false
     },
     "footer": {
       "$schema": "http://json-schema.org/draft-07/schema#",
@@ -143,16 +204,24 @@
               "title": "Source",
               "description": "Picture source",
               "type": "string",
-              "format": "image",
-              "examples": [
-                "https://picsum.photos/seed/kdspicture/300/300"
-              ]
+              "format": "image"
+            },
+            "srcInverted": {
+              "title": "Source",
+              "description": "Picture source",
+              "type": "string",
+              "format": "image"
             },
             "alt": {
               "title": "Alt text",
               "description": "Alt text to display for picture",
               "type": "string"
             },
+            "homepageHref": {
+              "type": "string",
+              "format": "uri",
+              "default": "/"
+            },
             "width": {
               "title": "Width",
               "description": "Width of the picture",
@@ -174,11 +243,6 @@
           },
           "additionalProperties": false
         },
-        "logoHref": {
-          "type": "string",
-          "format": "uri",
-          "default": "/"
-        },
         "byline": {
           "title": "Byline",
           "description": "Small line of text displayed below the logo",
@@ -205,6 +269,31 @@
               },
               "active": {
                 "type": "boolean"
+              },
+              "id": {
+                "type": "string"
+              },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "href": {
+                      "type": "string",
+                      "format": "uri"
+                    },
+                    "label": {
+                      "type": "string"
+                    },
+                    "active": {
+                      "type": "boolean"
+                    },
+                    "id": {
+                      "type": "string"
+                    }
+                  },
+                  "additionalProperties": false
+                }
               }
             },
             "additionalProperties": false,
@@ -215,19 +304,42 @@
           },
           "examples": [
             [
-              {
-                "label": "Nav Item",
-                "href": "#"
-              },
               {
                 "label": "Active Item",
                 "href": "#",
                 "active": true
               },
               {
-                "label": "Another Item",
+                "label": "Navigation Item",
                 "href": "#"
               },
+              {
+                "label": "Dropdown",
+                "href": "#",
+                "items": [
+                  {
+                    "label": "Level 2 Item",
+                    "href": "#",
+                    "id": ""
+                  },
+                  {
+                    "label": "Active Item",
+                    "active": true,
+                    "href": "#",
+                    "id": ""
+                  },
+                  {
+                    "label": "An Item with a longer Label",
+                    "href": "#",
+                    "id": ""
+                  },
+                  {
+                    "label": "And One last one",
+                    "href": "#",
+                    "id": ""
+                  }
+                ]
+              },
               {
                 "label": "One more Item",
                 "href": "#"

package/dist/components/slider/slider.schema.dereffed.json

@@ -717,8 +717,6 @@
                 "title": "Logos",
                 "description": "The logos to display",
                 "items": {
-                  "$schema": "http://json-schema.org/draft-07/schema#",
-                  "$id": "http://schema.mydesignsystem.com/logo.schema.json",
                   "title": "Logo",
                   "description": "Logo entry for Logos component",
                   "type": "object",
@@ -744,9 +742,6 @@
                       "examples": [
                         "Logo 1"
                       ]
-                    },
-                    "type": {
-                      "const": "logo"
                     }
                   },
                   "additionalProperties": false,

package/dist/components/teaser-card/teaser-card.css

@@ -23,7 +23,7 @@
   --dsa-teaser-card__copy--color: var(--ks-text-color-default);
   --dsa-teaser-card--padding: var(--ks-spacing-inset-l);
 }
-@media (min-width: 48rem) {
+@media (min-width: 48em) {
   .dsa-teaser-card {
     --dsa-teaser-card__topic--font: var(--ks-font-display-s);
     --dsa-teaser-card__copy--font: var(--ks-font-copy-s);
@@ -87,7 +87,7 @@
   aspect-ratio: 1/1;
 }
 .c-teaser.dsa-teaser-card .c-rich-text {
-  font: var(--dsa-teaser-card-card--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
+  font: var(--dsa-teaser-card__copy--font, var(--dsa-rich-text--font), var(--ks-font-copy-m));
 }
 .c-teaser.dsa-teaser-card .c-teaser__topic {
   font: var(--dsa-teaser-card__topic--font, var(--dsa-topic--font));

package/dist/components/text/text.css

@@ -1,4 +1,4 @@
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --dsa-text--font: var(--dsa-rich-text--font);
   --dsa-text--color: var(--dsa-rich-text--color);
   --dsa-text_highlight--color: var(--ks-text-color-default);

package/dist/global.css

@@ -296,7 +296,7 @@ h3 {
     --c-rich-text_headline--margin:1.5em 0 1em;
   }
 }
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --dsa-text-color-on-primary: var(--ks-color-fg);
   --dsa-text-color-on-primary-inverted: var(--ks-color-fg-inverted);
   --dsa-topic--font: var(--ks-font-display-m);
@@ -314,18 +314,18 @@ h3 {
   --dsa-section__content_wide--width: 1440px;
   --dsa-logo--height: 2rem;
 }
-@media (min-width: 42rem) {
-  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
     --dsa-section__content--padding: var(--ks-spacing-inset-xl);
   }
 }
-@media (min-width: 42rem) {
-  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+@media (min-width: 48em) {
+  :root, [ks-inverted], [ks-theme] {
     --dsa-logo--height: 2.5rem;
   }
 }
 @media (min-width: 62em) {
-  :root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  :root, [ks-inverted], [ks-theme] {
     --dsa-logo--height: 3rem;
   }
 }
@@ -438,7 +438,7 @@ h3 {
   --dsa-form-field__placeholder--color: var(--ks-color-fg-alpha-5);
 }
 
-:root .c-form-check, :root #root .c-form-check, [ks-inverted] .c-form-check, [ks-inverted] #root .c-form-check, #root [ks-inverted] .c-form-check, [ks-inverted] #root .c-form-check, [ks-theme] .c-form-check, [ks-theme] #root .c-form-check, #root [ks-theme] .c-form-check {
+:root .c-form-check, [ks-inverted] .c-form-check, [ks-theme] .c-form-check {
   --c-form-check_box--size: var(--dsa-form-check--size, 1rem);
   --c-form-check_box--border: var(--dsa-form-check--border, var(--ks-border-width-default)) solid;
   --c-form-check_box--border-color: var(--dsa-form-check--border-color, var(--ks-border-color-interface-interactive));
@@ -462,7 +462,7 @@ h3 {
   --c-form-check_box-focus--shadow: var(--dsa-form-check--shadow_focus, 0 0 4px 0);
   --c-form-check_checkmark--color: var(--dsa-form-check__checkmark--color, var(--dsa-text-color-on-primary));
 }
-:root .c-form-field, :root #root .c-form-field, [ks-inverted] .c-form-field, [ks-inverted] #root .c-form-field, #root [ks-inverted] .c-form-field, [ks-inverted] #root .c-form-field, [ks-theme] .c-form-field, [ks-theme] #root .c-form-field, #root [ks-theme] .c-form-field {
+:root .c-form-field, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
   --c-form-field--border: var(--dsa-form-field--border, var(--ks-border-width-default)) solid;
   --c-form-field--border-color: var(--dsa-form-field--border-color, var(--ks-border-color-interface-interactive));
   --c-form-field-hover--border-color: var(
@@ -492,7 +492,7 @@ h3 {
   --c-form-field_icon--size: calc(var(--ks-line-height-interface-m) * 0.75em);
   --c-form-field_icon--color: var(--ks-color-fg-alpha-3);
 }
-:root .c-form-field__input::placeholder, :root #root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-inverted] #root .c-form-field__input::placeholder, #root [ks-inverted] .c-form-field__input::placeholder, [ks-inverted] #root .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder, [ks-theme] #root .c-form-field__input::placeholder, #root [ks-theme] .c-form-field__input::placeholder {
+:root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder {
   color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
 }
 
@@ -626,14 +626,14 @@ h3 {
   font-weight: normal;
   src: url("static/fonts/google/google-sans-text.woff2") format("woff2");
 }
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --dsa-rich-text__headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-medium));
   --dsa-rich-text__headline--color: var(--dsa-headline--color, var(--ks-text-color-display));
   --dsa-rich-text--color: var(--ks-text-color-copy);
   --dsa-rich-text--font: var(--ks-font-copy-m);
 }
 
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --c-rich-text--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
   --c-rich-text--color: var(--dsa-rich-text--color, var(--ks-text-color-default));
   --c-rich-text_headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-bold));
@@ -659,12 +659,12 @@ body {
   background: var(--ks-background-color-default);
 }
 
-:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+:root, [ks-inverted], [ks-theme] {
   --g-link--font-weight: var(--dsa-link--font-weight, var(--ks-font-weight-semi-bold));
   --g-link--text-decoration: var(--dsa-link--text-decoration, underline);
   --g-link--text-decoration-hover: var(--dsa-link--text-decoration_hover, none);
   --g-link--color: var(--dsa-link--color, var(--ks-text-color-default-interactive));
-  --g-link--color-hover: var(--dsa-link_hover--color, var(--ks-text-color-default-interactive-hover));
+  --g-link--color-hover: var(--dsa-link--color_hover, var(--ks-text-color-default-interactive-hover));
   --g-link--background: var(--dsa-link--background, transparent);
   --g-link--border-radius: var(--dsa-link--border-radius, 0);
   --l-section_col--min-width: var(--dsa-section__col--min-width, var(--l-section_tile-width--default));