@kickstartds/ds-agency-premium 1.6.69--canary.45.1736.0 → 1.6.70--canary.45.1743.0

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:02 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:01 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9-base);

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

@@ -7,6 +7,28 @@ import { HTMLAttributes } from "react";
  * and run json-schema-to-typescript to regenerate this file.
  */
 interface PaginationProps {
+    ariaLabels?: {
+        /**
+         * Aria label for the previous page link
+         */
+        previousPage: string;
+        /**
+         * Aria label for the next page link
+         */
+        nextPage: string;
+        /**
+         * Aria label for the link to skip to the first page
+         */
+        skipToFirstPage: string;
+        /**
+         * Aria label for the link to skip to the last page
+         */
+        skipToLastPage: string;
+        /**
+         * Aria label for the link to go to a specific page (will be placed before the page number)
+         */
+        goToPage?: string;
+    };
     pages?: {
         /**
          * The URL to the page

package/dist/components/pagination/index.js

@@ -5,8 +5,8 @@ import { forwardRef, createContext, useContext } from 'react';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Link } from '@kickstartds/base/lib/link';
 
-const PaginationContextDefault = forwardRef(({ pages }, ref) => {
-    return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: (() => {
+const PaginationContextDefault = forwardRef(({ pages, ariaLabels }, ref) => {
+    return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { "aria-label": ariaLabels.skipToFirstPage || "Skip to first page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { "aria-label": ariaLabels.previousPage || "Go to previous page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: (() => {
                             const activeIndex = pages.findIndex((page) => page.active);
                             // Use the url of the next item after the active one, or "#" if at the end
                             return pages[activeIndex - 1]?.url || "#";
@@ -31,15 +31,16 @@ const PaginationContextDefault = forwardRef(({ pages }, ref) => {
                         }
                         return;
                     }
-                    result.push(jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), href: page.url, children: (index + 1).toString() }, index));
+                    result.push(jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), "aria-label": `${ariaLabels.goToPage} ${index + 1}` ||
+                            `Go to page ${index + 1}`, href: page.url, children: (index + 1).toString() }, index));
                     lastRenderedIndex = index;
                 });
                 return result;
-            })(), pages.findIndex((page) => page.active) !== pages.length - 1 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", href: (() => {
+            })(), pages.findIndex((page) => page.active) !== pages.length - 1 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", "aria-label": ariaLabels.nextPage || "Go to next page", href: (() => {
                             const activeIndex = pages.findIndex((page) => page.active);
                             // Use the url of the next item after the active one, or "#" if at the end
                             return pages[activeIndex + 1]?.url || "#";
-                        })(), children: jsx(Icon, { icon: "chevron-right" }) }), jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-forward", href: pages[pages.length - 1]?.url, children: jsx(Icon, { icon: "skip-forward" }) })] }))] }));
+                        })(), children: jsx(Icon, { icon: "chevron-right" }) }), jsx(Link, { "aria-label": ariaLabels.skipToLastPage || "Skip to last page", className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-forward", href: pages[pages.length - 1]?.url, children: jsx(Icon, { icon: "skip-forward" }) })] }))] }));
 });
 const PaginationContext = createContext(PaginationContextDefault);
 const Pagination = forwardRef((props, ref) => {

package/dist/components/pagination/pagination.css

@@ -1,32 +1,62 @@
+.dsa-pagination {
+  --dsa-pagination--gap: var(--ks-spacing-stack-xs);
+  --dsa-pagination--background: transparent;
+  --dsa-pagination--background_hover: var(--ks-color-fg-alpha-8);
+  --dsa-pagination--color: var(--ks-text-color-interface-interactive);
+  --dsa-pagination--color_hover: var(--ks-text-color-interface-interactive);
+  --dsa-pagination--border-radius: var(--ks-border-radius-control);
+  --dsa-pagination--border: var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive);
+  --dsa-pagination--width: 3.75em;
+  --dsa-pagination--font: var(--ks-font-interface-s);
+  --dsa-pagination--padding: 0.5em;
+  --dsa-pagination__icon--size: 1.25em;
+  --dsa-pagination--background_active: var(--ks-background-color-primary-interactive);
+  --dsa-pagination--background_active_hover: var(--ks-background-color-primary-interactive-hover);
+  --dsa-pagination--color_active: var(--dsa-text-color-on-primary);
+  --dsa-pagination--color_active_hover: var(--dsa-text-color-on-primary);
+}
+@media (min-width: 768px) {
+  .dsa-pagination {
+    --dsa-pagination--border: none;
+    --dsa-pagination--width: 3em;
+  }
+}
+
 .dsa-pagination {
   display: flex;
   gap: var(--dsa-pagination--gap, var(--ks-spacing-stack-xs));
+  flex-wrap: wrap;
+  justify-content: center;
 }
 .dsa-pagination__link, .dsa-pagination__placeholder {
-  --g-link--background: transparent;
-  --g-link--background-hover: var(--ks-color-fg-alpha-8);
-  --g-link--color: var(--ks-text-color-interface-interactive);
-  --g-link--color-hover: var(--ks-text-color-interface-interactive);
-  --g-link--border-radius: var(--ks-border-radius-control);
-  font: var(--ks-font-interface-s);
+  --g-link--background: var(--dsa-pagination--background, transparent);
+  --g-link--background-hover: var(--dsa-pagination--background_hover, var(--ks-color-fg-alpha-8));
+  --g-link--color: var(--dsa-pagination--color, var(--ks-text-color-interface-interactive));
+  --g-link--color-hover: var(--dsa-pagination--color_hover, var(--ks-text-color-interface-interactive));
+  --g-link--border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
+  border: var(--dsa-pagination--border, var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive));
+  border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
+  width: var(--dsa-pagination--width, 4em);
+  font: var(--dsa-pagination--font, var(--ks-font-interface-s));
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 3em;
-  padding: 0.5em;
+  padding: var(--dsa-pagination--padding, 0.5em);
   aspect-ratio: 1;
 }
 .dsa-pagination__link--icon .icon, .dsa-pagination__placeholder--icon .icon {
-  width: 1.25em;
-  height: 1.25em;
-  fill: var(--g-link--color);
+  width: var(--dsa-pagination__icon--size, 1.25em);
+  height: var(--dsa-pagination__icon--size, 1.25em);
 }
 .dsa-pagination__link--active, .dsa-pagination__placeholder--active {
-  --g-link--background: var(--ks-background-color-primary-interactive);
-  --g-link--background-hover: var(--ks-background-color-primary-interactive-hover);
-  --g-link--color: var(--dsa-text-color-on-primary);
-  --g-link--color-hover: var(--dsa-text-color-on-primary);
+  --g-link--background: var(--dsa-pagination--background_active, var(--ks-background-color-primary-interactive));
+  --g-link--background-hover: var(
+    --dsa-pagination--background_active,
+    var(--ks-background-color-primary-interactive-hover)
+  );
+  --g-link--color: var(--dsa-pagination--color_active, var(--dsa-text-color-on-primary));
+  --g-link--color-hover: var(--dsa-pagination--color_active_hover, var(--dsa-text-color-on-primary));
 }
 .dsa-pagination__placeholder {
   line-height: 0.25;

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

@@ -4,6 +4,43 @@
   "title": "Pagination",
   "type": "object",
   "properties": {
+    "ariaLabels": {
+      "type": "object",
+      "properties": {
+        "previousPage": {
+          "type": "string",
+          "description": "Aria label for the previous page link",
+          "default": "Go to previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "Aria label for the next page link",
+          "default": "Go to next page"
+        },
+        "skipToFirstPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the first page",
+          "default": "Skip to first page"
+        },
+        "skipToLastPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the last page",
+          "default": "Skip to last page"
+        },
+        "goToPage": {
+          "type": "string",
+          "description": "Aria label for the link to go to a specific page (will be placed before the page number)",
+          "default": "Go to page"
+        }
+      },
+      "required": [
+        "previousPage",
+        "nextPage",
+        "skipToFirstPage",
+        "skipToLastPage"
+      ],
+      "additionalProperties": false
+    },
     "pages": {
       "type": "array",
       "items": {

package/dist/components/pagination/pagination.schema.json

@@ -4,6 +4,42 @@
   "title": "Pagination",
   "type": "object",
   "properties": {
+    "ariaLabels": {
+      "type": "object",
+      "properties": {
+        "previousPage": {
+          "type": "string",
+          "description": "Aria label for the previous page link",
+          "default": "Go to previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "Aria label for the next page link",
+          "default": "Go to next page"
+        },
+        "skipToFirstPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the first page",
+          "default": "Skip to first page"
+        },
+        "skipToLastPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the last page",
+          "default": "Skip to last page"
+        },
+        "goToPage": {
+          "type": "string",
+          "description": "Aria label for the link to go to a specific page (will be placed before the page number)",
+          "default": "Go to page"
+        }
+      },
+      "required": [
+        "previousPage",
+        "nextPage",
+        "skipToFirstPage",
+        "skipToLastPage"
+      ]
+    },
     "pages": {
       "type": "array",
       "items": {

package/dist/components/presets.json

@@ -3012,8 +3012,15 @@
     "id": "industry-pagination--default",
     "group": "Industry/Pagination",
     "name": "Default",
-    "code": "<Pagination\n  pages={[\n    {\n      active: false,\n      url: 'https://example.com/page1'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page2'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page3'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page4'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page5'\n    },\n    {\n      active: true,\n      url: 'https://example.com/page6'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page7'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page8'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page9'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page10'\n    },\n    {\n      url: 'https://example.com/page11'\n    },\n    {\n      url: 'https://example.com/page12'\n    }\n  ]}\n />",
+    "code": "<Pagination\n  ariaLabels={{\n    goToPage: 'Go to page',\n    nextPage: 'Go to next page',\n    previousPage: 'Go to previous page',\n    skipToFirstPage: 'Skip to first page',\n    skipToLastPage: 'Skip to last page'\n  }}\n  pages={[\n    {\n      active: false,\n      url: 'https://example.com/page1'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page2'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page3'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page4'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page5'\n    },\n    {\n      active: true,\n      url: 'https://example.com/page6'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page7'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page8'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page9'\n    },\n    {\n      active: false,\n      url: 'https://example.com/page10'\n    },\n    {\n      url: 'https://example.com/page11'\n    },\n    {\n      url: 'https://example.com/page12'\n    }\n  ]}\n/>",
     "args": {
+      "ariaLabels": {
+        "previousPage": "Go to previous page",
+        "nextPage": "Go to next page",
+        "skipToFirstPage": "Skip to first page",
+        "skipToLastPage": "Skip to last page",
+        "goToPage": "Go to page"
+      },
       "pages": [
         {
           "active": false,

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:04 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:05 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:08 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:12 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:06 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:09 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:10 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:16 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:02 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:01 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 26 Jun 2025 12:39:02 GMT
+ * Generated on Fri, 27 Jun 2025 07:25:02 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#f3f3f4";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.69--canary.45.1736.0",
+  "version": "1.6.70--canary.45.1743.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {