@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/components/features/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { FeaturesProps } from "../../FeaturesProps-e58616a5.js";
+import { FeaturesProps } from "../../FeaturesProps-a9041d97.js";
 declare const FeaturesContextDefault: import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const FeaturesContext: import("react").Context<import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Features: import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/features/index.js

@@ -3,11 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createElement, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Feature } from '../feature/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/icon';
 import '../button/index.js';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/base/lib/link';
-import '@kickstartds/base/lib/rich-text';
+import 'markdown-to-jsx';
+
+const defaults = {
+    "layout": "largeTiles",
+    "style": "stack",
+    "ctas": {
+        "toggle": true,
+        "style": "link"
+    },
+    "feature": []
+};
 
 const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
@@ -20,15 +31,16 @@ const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
         const { icon, title, text, cta, ...rest } = feature;
         return (createElement(Feature, { ...rest, key: index, icon: icon, style: style, title: title, text: text, cta: {
                 label: cta?.label,
-                target: cta?.target,
+                url: cta?.url,
                 style: ctas.style,
                 toggle: ctas.toggle,
+                icon: cta?.icon,
             } }));
     }) })));
 const FeaturesContext = createContext(FeaturesContextDefault);
 const Features = forwardRef((props, ref) => {
     const Component = useContext(FeaturesContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Features.displayName = "Features";
 

package/dist/components/footer/footer.css

@@ -8,9 +8,10 @@
   --dsa-footer__links--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
   --dsa-footer__link--font: var(--ks-font-interface-s);
   --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
-  --dsa-footer__link--color: var(--dsa-link--color);
+  --dsa-footer__link--color: var(--ks-text-color-interface-interactive);
+  --dsa-footer__link--color_hover: var(--ks-text-color-interface-interactive-hover);
   --dsa-footer__link--text-tecoration: none;
-  --dsa-footer__link--text-tecoration_hover: underline;
+  --dsa-footer__link--text-tecoration_hover: none;
   --dsa-footer__logo--height: 1.5rem;
 }
 @media (min-width: 62em) {
@@ -27,7 +28,7 @@
   background-color: var(--dsa-footer--background-color, var(--ks-background-color-default));
 }
 .dsa-footer__content {
-  padding: var(--l-section--space-small) var(--dsa-content--spacing);
+  padding: var(--l-section--space-small) var(--dsa-content--horizontal-spacing);
   border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-default));
   max-width: var(--dsa-footer--max-width, var(--dsa-content--width_wide));
   width: 100%;

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

@@ -68,7 +68,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -83,7 +83,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "href": {
+                "url": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -100,7 +100,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "href",
+          "url",
           "label"
         ]
       },
@@ -108,49 +108,46 @@
         [
           {
             "label": "Active Item",
-            "href": "#",
+            "url": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Dropdown",
-            "href": "#",
+            "url": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "And One last one",
-                "href": "#"
+                "url": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Last Item",
-            "href": "#"
+            "url": "#"
           }
         ]
       ]
-    },
-    "type": {
-      "const": "footer"
     }
   },
   "required": [

package/dist/components/footer/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FooterProps } from "../../FooterProps-171a3067.js";
+import { FooterProps } from "../../FooterProps-a0a104ca.js";
 import { HTMLAttributes } from "react";
 declare const FooterContextDefault: import("react").ForwardRefExoticComponent<FooterProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const FooterContext: import("react").Context<import("react").ForwardRefExoticComponent<FooterProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/components/footer/index.js

@@ -4,13 +4,23 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { Link } from '@kickstartds/base/lib/link';
 import { Logo } from '../logo/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '@kickstartds/base/lib/picture';
 
-const FooterContextDefault = forwardRef(({ byline, navItems, inverted, logo }, ref) => navItems && navItems.length > 0 ? (jsx("div", { className: classnames("dsa-footer"), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-footer__content", children: [jsx(Logo, { ...logo, inverted: inverted }), byline && jsx("span", { className: "dsa-footer__byline", children: byline }), navItems.length > 0 ? (jsx("div", { className: "dsa-footer__links", children: navItems.map(({ label, active, ...linkProps }) => (createElement(Link, { ...linkProps, className: "dsa-footer__link", key: linkProps.href + label }, label))) })) : null] }) })) : null);
+const defaults = {
+    "logo": {
+        "homepageHref": "/"
+    },
+    "byline": "© 2024 systemics Inc. All rights reserved.",
+    "inverted": false,
+    "navItems": []
+};
+
+const FooterContextDefault = forwardRef(({ byline, navItems, inverted, logo }, ref) => navItems && navItems.length > 0 ? (jsx("div", { className: classnames("dsa-footer"), "ks-inverted": inverted.toString(), ref: ref, children: jsxs("div", { className: "dsa-footer__content", children: [jsx(Logo, { ...logo, inverted: inverted }), byline && jsx("span", { className: "dsa-footer__byline", children: byline }), navItems.length > 0 ? (jsx("div", { className: "dsa-footer__links", children: navItems.map(({ label, active, ...linkProps }) => (createElement(Link, { ...linkProps, className: "dsa-footer__link", key: linkProps.url + label }, label))) })) : null] }) })) : null);
 const FooterContext = createContext(FooterContextDefault);
 const Footer = forwardRef((props, ref) => {
     const Component = useContext(FooterContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Footer.displayName = "Footer";
 

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

@@ -55,7 +55,8 @@
         "stack",
         "smallTiles",
         "largeTiles"
-      ]
+      ],
+      "default": "smallTiles"
     },
     "aspectRatio": {
       "type": "string",
@@ -74,9 +75,6 @@
       "title": "Lightbox",
       "description": "Display images in a lightbox gallery",
       "default": false
-    },
-    "type": {
-      "const": "gallery"
     }
   },
   "additionalProperties": false,

package/dist/components/gallery/gallery.schema.json

@@ -43,7 +43,8 @@
       "type": "string",
       "title": "Layout",
       "description": "The layout of the gallery images",
-      "enum": ["stack", "smallTiles", "largeTiles"]
+      "enum": ["stack", "smallTiles", "largeTiles"],
+      "default": "smallTiles"
     },
     "aspectRatio": {
       "type": "string",

package/dist/components/gallery/index.js

@@ -3,8 +3,16 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMedia } from '@kickstartds/base/lib/text-media';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "tiles", aspectRatio = "square", images = [], ...rest }, ref) => {
+const defaults = {
+    "images": [],
+    "layout": "smallTiles",
+    "aspectRatio": "unset",
+    "lightbox": false
+};
+
+const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "smallTiles", aspectRatio = "square", images = [], ...rest }, ref) => {
     const galleryId = useMemo(() => `gallery-${Date.now()}`, []);
     return (jsx("div", { ...rest, ref: ref, className: `dsa-gallery`, children: jsx("div", { className: classnames(`dsa-gallery__grid`, `dsa-gallery__grid--${layout === "smallTiles"
                 ? "small-tiles"
@@ -34,7 +42,7 @@ const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "tiles",
 const GalleryContext = createContext(GalleryContextDefault);
 const Gallery = forwardRef((props, ref) => {
     const Component = useContext(GalleryContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Gallery.displayName = "Gallery";
 

package/dist/components/header/header.css

@@ -1,22 +1,25 @@
 :root,
 [ks-theme],
 [ks-inverted] {
+  --dsa-header--height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
   --dsa-header--spacing-vertical: var(--ks-spacing-inset-m);
   --dsa-header--spacing-horizontal: var(--ks-spacing-inset-xl);
+  --dsa-header_floating--spacing-horizontal: var(--ks-spacing-inset-l);
+  --dsa-header_open--shadow: 0 0 0 100px var(--ks-color-fg-alpha-3);
 }
 @media (min-width: 62em) {
   :root,
   [ks-theme],
   [ks-inverted] {
-    --dsa-header--spacing-vertical: var(--ks-spacing-stack-s);
-    --dsa-header--spacing-horizontal: var(--dsa-content--spacing);
+    --dsa-header--spacing-horizontal: var(--dsa-content--horizontal-spacing);
   }
 }
 
 .dsa-header {
-  --dsa-header--max-width: var(--dsa-content--width_max);
+  --dsa-header--max-width: var(--dsa-content--width_wide);
   --dsa-header--background: var(--ks-background-color-default);
-  --dsa-header_floating--background: linear-gradient(var(--ks-color-bg), transparent);
+  --dsa-header_floating--background: var(--dsa-overlay-box_opaque--background-color);
+  --dsa-header_floating--backdrop-filter: var(--dsa-overlay-box_opaque--backdrop-filter);
   --dsa-header__logo--height: var(--dsa-logo--height);
 }
 
@@ -26,23 +29,63 @@
   width: 100%;
   display: flex;
   padding: var(--dsa-header--spacing-vertical) 0;
-  position: relative;
+  transition: height var(--ks-transition-collapse);
+  height: calc(var(--dsa-logo--height) + var(--dsa-header--spacing-vertical) * 2);
+  justify-content: center;
+}
+.dsa-header--overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--ks-color-fg-alpha-3);
+  opacity: 0;
+  transition: opacity var(--ks-transition-fade);
+  pointer-events: none;
+}
+.overlay-open .dsa-header--overlay {
+  opacity: 1;
+}
+.overlay-open .dsa-header {
+  height: 100vh;
 }
 .dsa-header--floating {
-  background: var(--dsa-header_floating--background, linear-gradient(var(--ks-color-bg-alpha-5), transparent));
+  width: calc(100vw - var(--dsa-header_floating--spacing-horizontal) * 2);
+  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
+  top: 10px;
+  padding: var(--dsa-header--spacing-vertical) 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background: var(--dsa-header_floating--background, var(--dsa-overlay-box_opaque--background-color));
+  backdrop-filter: var(--dsa-header_floating--backdrop-filter, blur(10px));
   position: absolute;
+  border-radius: var(--ks-border-radius-surface);
+}
+.overlay-open .dsa-header--floating {
+  background: var(--dsa-header--background, var(--ks-background-color-default));
+  height: 95%;
 }
 .dsa-header--floating .c-nav-main__link {
   text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
 }
 .dsa-header__content {
   padding: 0 var(--dsa-header--spacing-horizontal);
-  max-width: var(--dsa-header--max-width);
+  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header--spacing-horizontal) * 2);
   width: 100%;
-  margin: auto;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+}
+@media (min-width: 62rem) {
+  .dsa-header__content {
+    align-items: center;
+  }
+}
+.dsa-header--floating .dsa-header__content {
+  max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
+  padding: 0 var(--dsa-header_floating--spacing-horizontal);
 }
 
 .dsa-header--spacer {

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

@@ -81,7 +81,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -96,7 +96,7 @@
             "items": {
               "type": "object",
               "properties": {
-                "href": {
+                "url": {
                   "type": "string",
                   "format": "uri"
                 },
@@ -113,7 +113,7 @@
         },
         "additionalProperties": false,
         "required": [
-          "href",
+          "url",
           "label"
         ]
       },
@@ -121,49 +121,46 @@
         [
           {
             "label": "Active Item",
-            "href": "#",
+            "url": "#",
             "active": true
           },
           {
             "label": "Navigation Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Dropdown",
-            "href": "#",
+            "url": "#",
             "items": [
               {
                 "label": "Level 2 Item",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "Active Item",
                 "active": true,
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "An Item with a longer Label",
-                "href": "#"
+                "url": "#"
               },
               {
                 "label": "And One last one",
-                "href": "#"
+                "url": "#"
               }
             ]
           },
           {
             "label": "One more Item",
-            "href": "#"
+            "url": "#"
           },
           {
             "label": "Last Item",
-            "href": "#"
+            "url": "#"
           }
         ]
       ]
-    },
-    "type": {
-      "const": "header"
     }
   },
   "additionalProperties": false

package/dist/components/header/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HeaderProps } from "../../HeaderProps-e22382f1.js";
+import { HeaderProps } from "../../HeaderProps-72763967.js";
 declare const HeaderContextDefault: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 declare const HeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>>;
 declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/header/index.js

@@ -1,9 +1,10 @@
 import "./header.css";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { forwardRef, createContext, useContext } from 'react';
 import { NavMain } from '../nav-main/index.js';
 import { Logo } from '../logo/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 import '../nav-main/js/NavToggle.client.js';
 import '@kickstartds/core/lib/component';
 import '../nav-main/js/navMainEvents.client.js';
@@ -17,14 +18,25 @@ import '../nav-dropdown/index.js';
 import '../nav-flyout/index.js';
 import '@kickstartds/base/lib/picture';
 
-const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsx("header", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), ref: ref, 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: {
-                    ...logo,
-                    inverted: flyoutInverted,
-                } })] }) })));
+const defaults = {
+    "logo": {
+        "homepageHref": "/"
+    },
+    "flyoutInverted": false,
+    "dropdownInverted": false,
+    "floating": false,
+    "inverted": false,
+    "navItems": []
+};
+
+const HeaderContextDefault = forwardRef(({ logo, floating, inverted = false, flyoutInverted = false, dropdownInverted = false, navItems = [], }, ref) => (jsxs(Fragment, { children: [jsx("header", { className: classnames("dsa-header", floating && `dsa-header--floating`), "ks-inverted": inverted.toString(), ref: ref, 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: {
+                            ...logo,
+                            inverted: flyoutInverted,
+                        } })] }) }), floating && jsx("div", { className: "dsa-header--overlay" })] })));
 const HeaderContext = createContext(HeaderContextDefault);
 const Header = forwardRef((props, ref) => {
     const Component = useContext(HeaderContext);
-    return jsx(Component, { ...props, ref: ref });
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
 });
 Header.displayName = "Header";
 

package/dist/components/headline/headline.css

@@ -1,50 +1,42 @@
 :root, [ks-inverted], [ks-theme] {
   --dsa-headline--color: var(--ks-text-color-display);
-  --dsa-headline--font-weight: var(--ks-font-weight-medium);
+  --dsa-headline--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-headline--text-transform: none;
-  --dsa-headline--gap: 0.25em;
+  --dsa-headline--gap: 0.35em;
   --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline--higlight-background: var(--dsa-typo--highlight);
-  --dsa-headline__subheadline--color: var(--ks-text-color-primary);
-  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-headline__subheadline--color: var(--ks-color-fg-alpha-4);
+  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-bold);
+  --dsa-headline__subheadline--text-transform: uppercase;
+  --dsa-headline__subheadline--letter-spacing: 0.045em;
+  --dsa-headline__subheadline--font-family: var(--ks-font-family-display);
   --dsa-headline_h1--font: var(--ks-font-display-xxl);
-  --dsa-headline_h1__subheadline--font: var(--ks-font-copy-l);
+  --dsa-headline_h1__subheadline--font-size: 50%;
   --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
   --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
   --dsa-headline_h2--font: var(--ks-font-display-xl);
-  --dsa-headline_h2__subheadline--font: var(--ks-font-copy-m);
+  --dsa-headline_h2__subheadline--font-size: 50%;
   --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
   --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
-  --dsa-headline_h2--space-after_minimum: var(--ks-spacing-stack-s);
+  --dsa-headline_h2--space-after_minimum: 0;
   --dsa-headline_h3--font: var(--ks-font-display-l);
-  --dsa-headline_h3__subheadline--font: var(--ks-font-copy-m);
+  --dsa-headline_h3__subheadline--font-size: 55%;
   --dsa-headline_h3--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h3--space-after_small: var(--ks-spacing-stack-s);
-  --dsa-headline_h3--space-after_minimum: var(--ks-spacing-stack-xs);
+  --dsa-headline_h3--space-after_minimum: 0;
   --dsa-headline_h4--font: var(--ks-font-display-m);
-  --dsa-headline_h4__subheadline--font: var(--ks-font-copy-s);
+  --dsa-headline_h4__subheadline--font-size: 65%;
   --dsa-headline_h4--space-after_large: var(--ks-spacing-stack-m);
   --dsa-headline_h4--space-after_small: var(--ks-spacing-stack-s);
-  --dsa-headline_h4--space-after_minimum: var(--ks-spacing-stack-xs);
+  --dsa-headline_h4--space-after_minimum: 0;
   --dsa-headline_p--font: var(--ks-font-copy-m);
-  --dsa-headline__subheadline_p--font: var(--ks-font-copy-s);
-  --dsa-headline_p__subheadline--font: var(--ks-font-copy-s);
+  --dsa-headline_p__subheadline--font-size: 75%;
   --dsa-headline_p--space-after_large: var(--ks-spacing-stack-xs);
   --dsa-headline_p--space-after_small: var(--ks-spacing-xxs);
-  --dsa-headline_p--space-after_minimum: none;
-}
-@media (min-width: 48em) {
-  :root, [ks-inverted], [ks-theme] {
-    --dsa-headline_h1__subheadline--font: var(--ks-font-copy-xl);
-  }
-}
-@media (min-width: 48em) {
-  :root, [ks-inverted], [ks-theme] {
-    --dsa-headline_h2__subheadline--font: var(--ks-font-copy-l);
-  }
+  --dsa-headline_p--space-after_minimum: 0;
 }
 
 .dsa-headline {
@@ -65,57 +57,57 @@
 .dsa-headline:hover .dsa-headline__anchor {
   visibility: visible;
 }
-.dsa-headline .dsa-headline__headline {
-  font: var(--headline--font);
-  text-transform: var(--dsa-headline--text-transform);
-}
 .dsa-headline--h1 {
-  --headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
-  --subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
+  --subheadline--font-size: var(--dsa-headline_h1__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h1--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
+  font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
 }
 .dsa-headline--h2 {
-  --headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
-  --subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
+  --subheadline--font-size: var(--dsa-headline_h2__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h2--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h2--space-after_large);
+  font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
 }
 .dsa-headline--h3 {
-  --headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
-  --subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
+  --subheadline--font-size: var(--dsa-headline_h3__subheadline--font-size, 50%);
   --headline--space-after_minimum: var(--dsa-headline_h3--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h3--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h3--space-after_large);
+  font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
 }
 .dsa-headline--h4 {
-  --headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
-  --subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
+  --subheadline--font-size: var(--dsa-headline_h4__subheadline--font-size, 75%);
   --headline--space-after_minimum: var(--dsa-headline_h4--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_h4--space-after_small);
   --headline--space-after_large: var(--dsa-headline_h4--space-after_large);
+  font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
 }
 .dsa-headline--p {
-  --headline--font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
-  --subheadline--font: var(--dsa-headline_p__subheadline--font, var(--ks-font-copy-s));
+  --subheadline--font-size: var(--dsa-headline_p__subheadline--font-size, 75%);
   --headline--space-after_minimum: var(--dsa-headline_p--space-after_minimum);
   --headline--space-after_small: var(--dsa-headline_p--space-after_small);
   --headline--space-after_large: var(--dsa-headline_p--space-after_large);
+  font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
 }
 .dsa-headline .dsa-headline__headline {
-  font: var(--headline--font);
   color: var(--dsa-headline--color, var(--ks-text-color-display));
+  font: inherit;
   font-weight: var(--dsa-headline--font-weight);
+  text-transform: var(--dsa-headline--text-transform);
   margin: 0;
 }
 .dsa-headline .dsa-headline__subheadline {
-  font: var(--subheadline--font);
+  font-family: var(--dsa-headline__subheadline--font-family);
+  font-size: var(--subheadline--font-size, 50%);
   margin: 0;
   max-width: var(--dsa-content--width_default);
   color: var(--dsa-headline__subheadline--color, var(--ks-text-color-primary));
-  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
+  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-bold));
+  text-transform: var(--dsa-headline__subheadline--text-transform, none);
+  letter-spacing: var(--dsa-headline__subheadline--letter-spacing, 0);
 }
 .dsa-headline--space-after-minimum {
   margin-bottom: var(--headline--space-after_minimum);

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

@@ -78,9 +78,6 @@
       "type": "string",
       "title": "ID",
       "description": "Set a custom id attribute"
-    },
-    "type": {
-      "const": "headline"
     }
   },
   "additionalProperties": false,