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

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);
@@ -312,20 +312,20 @@ h3 {
   --dsa-gradient--higlight: linear-gradient(135deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
   --dsa-section__content--padding: var(--ks-spacing-inset-l);
   --dsa-section__content_wide--width: 1440px;
-  --dsa-logo--height: 2rem;
+  --dsa-logo--height: 2.25rem;
 }
-@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));