@kickstartds/ds-agency-premium 1.2.10--canary.171.76273d8.0 → 1.2.10--canary.178.33c3c92.0

package/dist/components/gallery/gallery.css

@@ -1,31 +1,41 @@
-.c-gallery__grid--stack {
+.dsa-gallery {
+  --dsa-gallery--gap-vertical: var(--ks-spacing-stack-m);
+  --dsa-gallery--gap-horizontal: var(--ks-spacing-inline-m);
+  --dsa-gallery--tile-min-width-small: 200px;
+  --dsa-gallery--tile-min-width-large: 400px;
+  --dsa-gallery--image-ratio-square: 1/1;
+  --dsa-gallery--image-ratio-wide: 4/3;
+  --dsa-gallery--image-ratio-landscape: 16/9;
+}
+
+.dsa-gallery__grid--stack {
   display: flex;
-  gap: var(--ks-spacing-stack-m);
+  gap: var(--dsa-gallery--gap-vertical);
   flex-direction: column;
 }
-.c-gallery__grid--small-tiles {
+.dsa-gallery__grid--small-tiles {
   display: grid;
-  gap: var(--ks-spacing-inline-m);
-  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+  gap: var(--dsa-gallery--gap-horizontal) var(--dsa-gallery--gap-vertical);
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--dsa-gallery--tile-min-width-small), 100%), 1fr));
 }
-.c-gallery__grid--large-tiles {
+.dsa-gallery__grid--large-tiles {
   display: grid;
-  gap: var(--ks-spacing-inline-m);
-  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
+  gap: var(--dsa-gallery--gap-horizontal) var(--dsa-gallery--gap-vertical);
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--dsa-gallery--tile-min-width-large), 100%), 1fr));
 }
-.c-gallery__image {
+.dsa-gallery__image {
   flex: 1 1;
 }
-.c-gallery__image--square img {
-  aspect-ratio: 1/1;
+.dsa-gallery__image--square img {
+  aspect-ratio: var(--dsa-gallery--image-ratio-square);
   object-fit: cover;
 }
-.c-gallery__image--wide img {
-  aspect-ratio: 4/3;
+.dsa-gallery__image--wide img {
+  aspect-ratio: var(--dsa-gallery--image-ratio-wide);
   object-fit: cover;
 }
-.c-gallery__image--landscape img {
-  aspect-ratio: 16/9;
+.dsa-gallery__image--landscape img {
+  aspect-ratio: var(--dsa-gallery--image-ratio-landscape);
   object-fit: cover;
 }
 
@@ -34,17 +44,15 @@
 }
 .pswp .pswp__caption {
   background-color: var(--ks-color-bg-alpha-3);
-  color: var(--ks-color-fg);
+  color: var(--dsa-text-color-on-primary);
 }
 
-:root,
-[ks-inverted],
-[ks-theme] {
-  --c-lightbox--bg: var(--ks-color-bg) !important;
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --c-lightbox--bg: var(--ks-background-color-default) !important;
   --c-lightbox--placeholder-bg: var(--ks-color-fg-to-bg-1) !important;
   --c-lightbox--root-z-index: var(--ks-depth-modal) !important;
-  --c-lightbox--icon-color: var(--ks-color-fg) !important;
-  --c-lightbox--icon-color-secondary: var(--ks-color-secondary) !important;
+  --c-lightbox--icon-color: var(--dsa-text-color-on-primary) !important;
+  --c-lightbox--icon-color-secondary: var(--ks-color-fg-inverted) !important;
   --c-lightbox--stroke-width: 0px !important;
-  --c-lightbox--error-text-color: var(--ks-color-fg-to-bg-9) !important;
+  --c-lightbox--error-text-color: var(--ks-color-error) !important;
 }

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

@@ -15,6 +15,7 @@
           "src": {
             "type": "string",
             "title": "src",
+            "format": "image",
             "description": "The source of the image",
             "examples": [
               "https://example.com/image1.jpg"
@@ -30,6 +31,7 @@
           },
           "caption": {
             "type": "string",
+            "format": "markdown",
             "title": "Caption",
             "description": "The caption of the image",
             "examples": [

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

@@ -15,6 +15,7 @@
           "src": {
             "type": "string",
             "title": "src",
+            "format": "image",
             "description": "The source of the image",
             "examples": ["https://example.com/image1.jpg"]
           },
@@ -26,6 +27,7 @@
           },
           "caption": {
             "type": "string",
+            "format": "markdown",
             "title": "Caption",
             "description": "The caption of the image",
             "examples": ["Caption Image"]

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

@@ -1,4 +1,7 @@
-import { HTMLAttributes, FC } from "react";
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
 import { GalleryProps } from "../../GalleryProps-76e7de44.js";
-declare const Gallery: FC<GalleryProps & HTMLAttributes<HTMLElement>>;
-export { Gallery };
+declare const GalleryContextDefault: import("react").ForwardRefExoticComponent<GalleryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const GalleryContext: import("react").Context<import("react").ForwardRefExoticComponent<GalleryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Gallery: import("react").ForwardRefExoticComponent<GalleryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { GalleryContextDefault, GalleryContext, Gallery };

package/dist/components/gallery/index.js

@@ -1,16 +1,16 @@
 import "./gallery.css";
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { forwardRef, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TextMedia } from '@kickstartds/base/lib/text-media';
 
-const Gallery = ({ lightbox = false, layout = "tiles", aspectRatio = "square", images = [], }) => {
+const GalleryContextDefault = forwardRef(({ lightbox = false, layout = "tiles", aspectRatio = "square", images = [], ...rest }, ref) => {
     const galleryId = useMemo(() => `gallery-${Date.now()}`, []);
-    return (jsx("div", { className: `c-gallery`, children: jsx("div", { className: classnames(`c-gallery__grid`, `c-gallery__grid--${layout === "smallTiles"
+    return (jsx("div", { ...rest, ref: ref, className: `dsa-gallery`, children: jsx("div", { className: classnames(`dsa-gallery__grid`, `dsa-gallery__grid--${layout === "smallTiles"
                 ? "small-tiles"
                 : layout === "largeTiles"
                     ? "large-tiles"
-                    : layout}`), children: images.map((image, index) => (jsx("div", { className: classnames("c-gallery__image", aspectRatio !== "unset" && `c-gallery__image--${aspectRatio}`), children: jsx(TextMedia, { media: [
+                    : layout}`), children: images.map((image, index) => (jsx("div", { className: classnames("dsa-gallery__image", aspectRatio !== "unset" && `dsa-gallery__image--${aspectRatio}`), children: jsx(TextMedia, { media: [
                         {
                             ...(lightbox && {
                                 lightboxImage: {
@@ -30,6 +30,11 @@ const Gallery = ({ lightbox = false, layout = "tiles", aspectRatio = "square", i
                             caption: image.caption,
                         },
                     ], text: undefined }) }, index))) }) }));
-};
+});
+const GalleryContext = createContext(GalleryContextDefault);
+const Gallery = forwardRef((props, ref) => {
+    const Component = useContext(GalleryContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 
-export { Gallery };
+export { Gallery, GalleryContext, GalleryContextDefault };

package/dist/components/header/header.css

@@ -1,76 +1,52 @@
-:root {
-  --g-logo--height: 2rem;
-  --g-header--spacing-v: var(--ks-spacing-stack-m);
-  --g-header-spacing-h: var(--l-section--content-padding);
-  --g-nav-toggle--color: var(--ks-color-fg);
-  --g-nav-toggle-open--color: var(--ks-color-fg);
-}
-@media (min-width: 42rem) {
-  :root {
-    --g-logo--height: 2.5rem;
-  }
-}
-@media (min-width: 62em) {
-  :root {
-    --g-logo--height: 3rem;
-  }
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --dsa-header--spacing-vertical: var(--ks-spacing-stack-m);
+  --dsa-header--spacing-horizontal: var(--l-section--content-padding);
 }
 
-:root {
-  --g-logo--height: 2rem;
-}
-@media (min-width: 42rem) {
-  :root {
-    --g-logo--height: 2.5rem;
-  }
-}
-@media (min-width: 62em) {
-  :root {
-    --g-logo--height: 3rem;
-  }
+.dsa-header {
+  --dsa-header--background-color: var(--ks-background-color-default);
+  --dsa-header__logo--height: var(--dsa-logo--height);
 }
 
-.c-header {
-  --g-header--spacing-v: var(--ks-spacing-stack-m);
-  --g-header-spacing-h: var(--l-section--content-padding);
+.dsa-header {
   position: relative;
-  background-color: var(--ks-background-color-default);
+  background-color: var(--dsa-header--background-color);
   z-index: 1;
   width: 100%;
   display: flex;
-  padding: var(--g-header--spacing-v) 0;
+  padding: var(--dsa-header--spacing-vertical) 0;
 }
-.c-header--floating {
+.dsa-header--floating {
   background: linear-gradient(var(--ks-color-bg-alpha-5), transparent);
   position: absolute;
   z-index: 999;
 }
-.c-header--floating .c-nav-main__link {
+.dsa-header--floating .c-nav-main__link {
   text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
 }
-.c-header__content {
-  padding: 0 var(--g-header-spacing-h);
+.dsa-header__content {
+  padding: 0 var(--dsa-header--spacing-horizontal);
   max-width: var(--l-section--content-width-max);
   width: 100%;
   margin: auto;
   display: flex;
   justify-content: space-between;
 }
-.c-header__logo {
+.dsa-header__logo {
   display: block;
 }
-.c-header__logo img {
-  height: var(--g-logo--height);
+.dsa-header__logo img {
+  height: var(--dsa-header__logo--height);
   width: auto;
 }
 
-.c-header--spacer {
+.dsa-header--spacer {
   display: none;
 }
 @media (min-width: 640px) {
-  .c-header--spacer {
+  .dsa-header--spacer {
     display: block;
-    height: var(--g-header-height);
+    height: var(--dsa-header--height);
     z-index: -1;
     position: relative;
     background-color: var(--ks-background-color-default);

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

@@ -5,10 +5,7 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "$id": "http://schema.kickstartds.com/base/picture.schema.json",
-      "title": "Picture",
-      "description": "Base component to display a picture",
+      "title": "Logo",
       "type": "object",
       "properties": {
         "src": {
@@ -20,12 +17,6 @@
             "https://picsum.photos/seed/kdspicture/300/300"
           ]
         },
-        "srcSet": {
-          "title": "Picture sourceset",
-          "description": "Use a srcSet to display picture",
-          "type": "string",
-          "format": "image"
-        },
         "alt": {
           "title": "Alt text",
           "description": "Alt text to display for picture",
@@ -48,84 +39,13 @@
           "examples": [
             300
           ]
-        },
-        "className": {
-          "title": "Additional Classes",
-          "description": "Add additional css classes that should be applied to the button",
-          "type": "string"
-        },
-        "component": {
-          "title": "`ks-component` attribute",
-          "description": "Optional custom component identifier",
-          "type": "string"
-        },
-        "id": {
-          "title": "Id",
-          "description": "Add id attribute to the image",
-          "type": "string"
-        },
-        "itemProp": {
-          "title": "`itemprop` attribute",
-          "description": "Define an itemprop attribute for the picture",
-          "type": "string"
-        },
-        "style": {
-          "title": "`style` attribute",
-          "description": "Define a style attribute for the picture",
-          "type": "string"
-        },
-        "noscript": {
-          "title": "Noscript",
-          "description": "Render noscript fallback",
-          "type": "boolean",
-          "default": true
-        },
-        "lazy": {
-          "title": "Lazy",
-          "description": "Load the picture lazily",
-          "type": "boolean",
-          "default": true
-        },
-        "sources": {
-          "title": "Sources",
-          "description": "Additional sources. This will result in a `picture`-Element",
-          "type": "array",
-          "items": {
-            "type": "object",
-            "properties": {
-              "srcSet": {
-                "title": "Picture sourceset",
-                "description": "Use a srcSet to display picture",
-                "type": "string",
-                "format": "image"
-              },
-              "media": {
-                "title": "TODO MEDIA TITLE",
-                "description": "TODO MEDIA DESCRIPTION",
-                "type": "string"
-              },
-              "type": {
-                "title": "TODO TYPE TITLE",
-                "description": "TODO TYPE DESCRIPTION",
-                "type": "string"
-              }
-            },
-            "additionalProperties": false
-          }
-        },
-        "pictureClassName": {
-          "title": "`class` attribute",
-          "description": "Set additional class(es) to the picture",
-          "type": "string"
-        },
-        "type": {
-          "const": "picture"
         }
       },
       "additionalProperties": false
     },
     "logoHref": {
       "type": "string",
+      "format": "uri",
       "default": "/"
     },
     "floating": {
@@ -140,10 +60,14 @@
         "type": "object",
         "properties": {
           "href": {
-            "type": "string"
+            "type": "string",
+            "format": "uri"
           },
           "label": {
             "type": "string"
+          },
+          "active": {
+            "type": "boolean"
           }
         },
         "additionalProperties": false,
@@ -155,24 +79,25 @@
       "examples": [
         [
           {
-            "href": "#about",
-            "label": "About us"
+            "label": "Nav Item",
+            "href": "#"
           },
           {
-            "href": "#services",
-            "label": "Our Services"
+            "label": "Active Item",
+            "href": "#",
+            "active": true
           },
           {
-            "href": "#project",
-            "label": "Project"
+            "label": "Another Item",
+            "href": "#"
           },
           {
-            "href": "#showcase",
-            "label": "Showcase"
+            "label": "One more Item",
+            "href": "#"
           },
           {
-            "href": "#blog",
-            "label": "Blog"
+            "label": "Last Item",
+            "href": "#"
           }
         ]
       ]

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

@@ -5,7 +5,37 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$ref": "http://schema.kickstartds.com/base/picture.schema.json"
+      "title": "Logo",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image",
+          "examples": ["https://picsum.photos/seed/kdspicture/300/300"]
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
+        },
+        "width": {
+          "title": "Width",
+          "description": "Width of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [300]
+        },
+        "height": {
+          "title": "Height",
+          "description": "Height of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [300]
+        }
+      },
+      "additionalProperties": false
     },
     "logoHref": {
       "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"

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

@@ -5,22 +5,41 @@ import { FC } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { PictureProps } from "@kickstartds/base/lib/picture/typing";
+/**
+ * Picture source
+ */
+type Source = string;
+/**
+ * Alt text to display for picture
+ */
+type AltText = string;
+/**
+ * Width of the picture
+ */
+type Width = number;
+/**
+ * Height of the picture
+ */
+type Height = number;
 /**
  * Make the header float over the first Section
  */
 type Floating = boolean;
 interface HeaderProps {
-    /**
-     * Referenced component PictureProps
-     */
-    logo: PictureProps;
+    logo: Logo;
     logoHref?: string;
     floating?: Floating;
     navItems?: {
         href: string;
         label: string;
+        active?: boolean;
     }[];
 }
+interface Logo {
+    src?: Source;
+    alt?: AltText;
+    width?: Width;
+    height?: Height;
+}
 declare const Header: FC<HeaderProps>;
 export { Header };

package/dist/components/header/index.js

@@ -11,6 +11,6 @@ import '../nav-main/js/navMainEvents.client.js';
 import '@kickstartds/core/lib/core';
 import '../nav-main/js/body.client.js';
 
-const Header = ({ logo, floating, logoHref = "/", navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("c-header", floating ? `c-header--floating` : ""), children: jsxs("div", { className: "c-header__content", children: [jsx(Link, { className: "c-header__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx(NavMain, { logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
+const Header = ({ logo, floating, logoHref = "/", navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), children: jsxs("div", { className: "dsa-header__content", children: [jsx(Link, { className: "dsa-header__logo", href: logoHref, children: jsx(Picture, { ...logo, lazy: false }) }), jsx(NavMain, { logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
 
 export { Header };