@uh-design-system/component-library 1.5.2-rc.1 → 1.6.0-rc.0

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-item/stories/ds-pagination-item.stories.js

@@ -0,0 +1,40 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+const meta = {
+    title: 'Base Components/Pagination/Pagination Item',
+    component: 'ds-pagination-item',
+    argTypes: {
+        dsType: {
+            control: 'select',
+            options: ['first', 'previous', 'next', 'last'],
+        },
+        dsTag: {
+            control: 'select',
+            options: ['a', 'span'],
+        },
+        dsIcon: {
+            table: { disable: true },
+        },
+    },
+    args: {
+        dsType: 'next',
+        dsText: '',
+        dsHref: '#',
+        dsDisabled: false,
+    },
+    render: args => html `
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-item
+        slot="full"
+        ds-type=${args.dsType}
+        ds-text=${ifDefined(args.dsText || undefined)}
+        ds-href=${ifDefined(args.dsHref)}
+        ?ds-disabled=${args.dsDisabled}
+        ds-tag=${ifDefined(args.dsTag)}
+      ></ds-pagination-item>
+    </ds-pagination>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/ds-pagination-page.css

@@ -3,15 +3,13 @@
   align-items: center;
 }
 
-.ds-pagination-page__m9sbXh {
+.ds-pagination-page__cpPWV0 {
   --ds-link-cta-padding-inline: var(--ds-spacing-2xSmall);
   --ds-link-cta-padding-block: 0;
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
 
-.ds-pagination-page__m9sbXh--current {
+.ds-pagination-page__cpPWV0--current {
   pointer-events: none;
-  --ds-link-cta-bg-color: var(--ds-bgColor-primary);
-  --ds-link-cta-text-color: var(--ds-textColor-white);
 }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/ds-pagination-page.js

@@ -11,6 +11,7 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
     dsPage;
     dsHref;
     dsIsCurrent;
+    dsAriaLabel;
     dsTag;
     get isCurrent() {
         if (this.dsIsCurrent !== undefined)
@@ -19,6 +20,13 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
             return false;
         return this.dsPage === this.paginationContext.currentPage;
     }
+    get ariaLabel() {
+        if (this.dsAriaLabel === '')
+            return undefined;
+        if (this.dsAriaLabel == null)
+            return this.paginationContext?.texts.pageNumber(this.dsPage);
+        return this.dsAriaLabel;
+    }
     get DsLinkCta() {
         return transformTagName('ds-link-cta', 'ds-pagination-page', this.el);
     }
@@ -35,11 +43,13 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
         const linkProps = {
             'class': classes,
             'dsVariant': variant,
+            'dsColour': this.paginationContext.colour,
             'dsSize': this.paginationContext.variant,
             'dsTag': (isSpan ? 'span' : 'a'),
             'dsHref': isSpan ? undefined : this.dsHref,
             'aria-current': this.isCurrent ? 'page' : undefined,
             'dsText': String(this.dsPage),
+            'dsAriaLabel': this.ariaLabel,
             'dsHideIcon': true,
         };
         const hostClass = cx(`ds-pagination-page-variant--${this.paginationContext.variant}`);
@@ -116,6 +126,25 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
                 "reflect": false,
                 "attribute": "ds-is-current"
             },
+            "dsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the default `aria-label` (e.g. \"Page 1\") of the page link.\nPass an empty string to remove the aria-label entirely."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-label"
+            },
             "dsTag": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/stories/ds-pagination-page.features.stories.js

@@ -0,0 +1,53 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Pagination/Pagination Page/Features',
+    component: 'ds-pagination-page',
+};
+export default meta;
+export const CurrentPage = {
+    render: () => html `
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-page slot="full" ds-page="3" ds-is-current></ds-pagination-page>
+    </ds-pagination>
+  `,
+};
+export const AutoCurrentPage = {
+    render: () => html `
+    <p class="ds-bodytext-lg">Page is automatically marked as current when <code>ds-page</code> matches <code>ds-current-page</code> of the parent.</p>
+    <ds-pagination ds-current-page="5" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-page slot="full" ds-page="4" ds-href="#"></ds-pagination-page>
+      <ds-pagination-page slot="full" ds-page="5" ds-href="#"></ds-pagination-page>
+      <ds-pagination-page slot="full" ds-page="6" ds-href="#"></ds-pagination-page>
+    </ds-pagination>
+  `,
+};
+export const WithHref = {
+    render: () => html `
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-page slot="full" ds-page="5" ds-href="/page/5"></ds-pagination-page>
+    </ds-pagination>
+  `,
+};
+export const WithoutHref = {
+    render: () => html `
+    <p class="ds-bodytext-lg">Without href, the page renders as a span.</p>
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-page slot="full" ds-page="5"></ds-pagination-page>
+    </ds-pagination>
+  `,
+};
+export const SpanTag = {
+    render: () => html `
+    <p class="ds-bodytext-lg">Use <code>ds-tag="span"</code> when wrapping with a router link component (e.g., React Router's Link).</p>
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-page slot="full" ds-page="5" ds-tag="span"></ds-pagination-page>
+    </ds-pagination>
+  `,
+};
+export const CustomTagName = {
+    render: () => html `
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <custom-ds-pagination-page slot="full" ds-page="5" ds-href="#"></custom-ds-pagination-page>
+    </ds-pagination>
+  `,
+};

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/stories/ds-pagination-page.stories.js

@@ -0,0 +1,32 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+const meta = {
+    title: 'Base Components/Pagination/Pagination Page',
+    component: 'ds-pagination-page',
+    argTypes: {
+        dsTag: {
+            control: 'select',
+            options: ['a', 'span'],
+        },
+    },
+    args: {
+        dsPage: 5,
+        dsHref: '#',
+        dsIsCurrent: false,
+    },
+    render: args => html `
+    <ds-pagination ds-current-page="3" ds-total-pages="20" ds-layout="full">
+      <ds-pagination-page
+        slot="full"
+        ds-page=${args.dsPage}
+        ds-href=${ifDefined(args.dsHref)}
+        ?ds-is-current=${args.dsIsCurrent}
+        ds-tag=${ifDefined(args.dsTag)}
+        ds-aria-label=${ifDefined(args.dsAriaLabel)}
+      ></ds-pagination-page>
+    </ds-pagination>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page-info/ds-pagination-page-info.css

@@ -0,0 +1,25 @@
+.ds-no-style-leak * {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+}
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-pagination-page-info__cpPWV0 {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+  padding: 0;
+  font-size: var(--ds-pagination-font-size, var(--ds-fontSize-16));
+  font-weight: var(--ds-fontWeight-semibold);
+  text-align: center;
+  align-self: center;
+  white-space: nowrap;
+}

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page-info/ds-pagination-page-info.js

@@ -0,0 +1,30 @@
+import { h, Host, Mixin } from "@stencil/core";
+import { cx } from "../../../../utils/cx";
+import { paginationFactory } from "../../../00-foundations/factories/paginationFactory";
+export class DsPaginationPageInfo extends Mixin(paginationFactory) {
+    constructor() {
+        super();
+    }
+    el;
+    render() {
+        if (!this.paginationContext) {
+            return h(Host, null);
+        }
+        const baseClass = cx('ds-pagination-page-info');
+        const { currentPage, totalPages } = this.paginationContext;
+        return (h(Host, null, h("span", { class: baseClass }, currentPage, " / ", totalPages)));
+    }
+    static get is() { return "ds-pagination-page-info"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-pagination-page-info.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-pagination-page-info.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page-info/stories/ds-pagination-page-info.features.stories.js

@@ -0,0 +1,34 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Pagination/Pagination Page Info/Features',
+    component: 'ds-pagination-page-info',
+};
+export default meta;
+export const SmallVariant = {
+    render: () => html `
+    <ds-pagination ds-current-page="5" ds-total-pages="20" ds-variant="small" ds-layout="compact">
+      <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+    </ds-pagination>
+  `,
+};
+export const MediumVariant = {
+    render: () => html `
+    <ds-pagination ds-current-page="5" ds-total-pages="20" ds-variant="medium" ds-layout="compact">
+      <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+    </ds-pagination>
+  `,
+};
+export const FirstPage = {
+    render: () => html `
+    <ds-pagination ds-current-page="1" ds-total-pages="20" ds-layout="compact">
+      <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+    </ds-pagination>
+  `,
+};
+export const LastPage = {
+    render: () => html `
+    <ds-pagination ds-current-page="20" ds-total-pages="20" ds-layout="compact">
+      <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+    </ds-pagination>
+  `,
+};

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page-info/stories/ds-pagination-page-info.stories.js

@@ -0,0 +1,13 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Pagination/Pagination Page Info',
+    component: 'ds-pagination-page-info',
+    render: () => html `
+    <ds-pagination ds-current-page="5" ds-total-pages="20" ds-layout="compact">
+      <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+    </ds-pagination>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination.css

@@ -14,7 +14,7 @@
   }
 }
 
-.ds-pagination__m9sbXh {
+.ds-pagination__cpPWV0 {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,48 +26,55 @@
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__m9sbXh__compact slot, .ds-pagination__m9sbXh__full slot {
+.ds-pagination__cpPWV0__compact slot, .ds-pagination__cpPWV0__full slot {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__m9sbXh--compact .ds-pagination__m9sbXh__compact, .ds-pagination__m9sbXh--auto .ds-pagination__m9sbXh__compact {
+.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__compact, .ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-pagination__m9sbXh--compact .ds-pagination__m9sbXh__compact, .ds-pagination__m9sbXh--auto .ds-pagination__m9sbXh__compact {
+  .ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__compact, .ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact {
     width: auto;
   }
 }
-.ds-pagination__m9sbXh--compact .ds-pagination__m9sbXh__compact slot, .ds-pagination__m9sbXh--auto .ds-pagination__m9sbXh__compact slot {
+.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__compact slot, .ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact slot {
   display: grid;
   grid-template-columns: min-content min-content auto min-content min-content;
   gap: var(--ds-spacing-3xSmall);
   align-items: center;
   width: 100%;
 }
-.ds-pagination__m9sbXh ::slotted([class*=pagination-page-info]) {
+.ds-pagination__cpPWV0 ::slotted([class*=pagination-page-info]) {
   padding: 0 var(--ds-spacing-small);
   font-size: var(--ds-pagination-font-size, var(--ds-fontSize-16));
-  font-weight: var(--ds-fontWeight-semibold, 600);
+  font-weight: var(--ds-fontWeight-semibold);
   text-align: center;
   align-self: center;
+  white-space: nowrap;
 }
-.ds-pagination__m9sbXh--compact .ds-pagination__m9sbXh__full {
+.ds-pagination__cpPWV0--white {
+  --ds-pagination-ellipsis-colour: var(--ds-textColor-white);
+}
+.ds-pagination__cpPWV0--white ::slotted([class*=pagination-page-info]) {
+  color: var(--ds-textColor-white);
+}
+.ds-pagination__cpPWV0--compact .ds-pagination__cpPWV0__full {
   display: none;
 }
-.ds-pagination__m9sbXh--full .ds-pagination__m9sbXh__compact {
+.ds-pagination__cpPWV0--full .ds-pagination__cpPWV0__compact {
   display: none;
 }
-.ds-pagination__m9sbXh--auto .ds-pagination__m9sbXh__full {
+.ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__full {
   display: none;
 }
 @media (min-width: 60rem) {
-  .ds-pagination__m9sbXh--auto .ds-pagination__m9sbXh__full {
+  .ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__full {
     display: contents;
   }
-  .ds-pagination__m9sbXh--auto .ds-pagination__m9sbXh__compact {
+  .ds-pagination__cpPWV0--auto .ds-pagination__cpPWV0__compact {
     display: none;
   }
 }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination.js

@@ -2,7 +2,7 @@ import { h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { cx } from "../../../utils/cx";
 import { ellipsis } from "../../../utils/controls/controlUtils";
-import { pagination, firstPage, lastPage, previousPage, nextPage, goToFirstPage, goToLastPage, goToPreviousPage, goToNextPage, currentPage, } from "../../../utils/pagination/paginationUtils";
+import { pagination, firstPage, lastPage, previousPage, nextPage, goToFirstPage, goToLastPage, goToPreviousPage, goToNextPage, currentPage, pageNumber, } from "../../../utils/pagination/paginationUtils";
 import { providePaginationContextToSlots, storePaginationContext } from "./paginationContext";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
 export class DsPagination extends Mixin(componentFactory('ds-pagination', { stopRootTracking: true })) {
@@ -14,6 +14,7 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
     dsTotalPages = 1;
     dsLayout = 'auto';
     dsVariant = 'medium';
+    dsColour = 'blue';
     dsAriaLabel;
     get texts() {
         return {
@@ -27,9 +28,10 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
             goToNextPage: goToNextPage(),
             currentPage: currentPage(),
             ellipsis: ellipsis(),
+            pageNumber: (page) => pageNumber(page),
         };
     }
-    langObserver() {
+    configurationPropertyObserver() {
         this.updateContext();
     }
     dsCurrentPageObserver(newValue) {
@@ -69,6 +71,7 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
             currentPage: this.dsCurrentPage,
             totalPages: this.dsTotalPages,
             variant: this.dsVariant,
+            colour: this.dsColour,
             layout: this.dsLayout,
             isCompact: false,
             texts: this.texts,
@@ -76,13 +79,13 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
     }
     render() {
         const baseClass = cx('ds-pagination');
-        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`);
+        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`, `${baseClass}--${this.dsColour}`);
         const fontSize = this.dsVariant === 'small' ? 'var(--ds-fontSize-16)' : 'var(--ds-fontSize-18)';
         const minSize = this.dsVariant === 'small' ? 'var(--ds-spacing-large)' : 'calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))';
-        return (h("nav", { key: '37a0983233833510e18500c528483bf1bc01a3c1', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
+        return (h("nav", { key: 'd4e8f0e30aa6faa3948bc52016ef3936d608513b', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, h("div", { key: 'd61235ad8e8c3f1886e5cf4a555e6cbaf80a7dab', class: `${baseClass}__compact` }, h("slot", { key: 'a478f9bbdeb51e59af0a11b8dc24a90ad77b2400', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'dcf0e3b5ab81d3eec7f9ac614fe291901ff4f4cd', class: `${baseClass}__full` }, h("slot", { key: 'd4c69cbb062be42ed2af3b52764192348b332baa', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, h("div", { key: '0c5d0c00d6225f79a787c2a0682f7030e6813442', class: `${baseClass}__compact` }, h("slot", { key: '7d79b99bd138062bcf30aa931c5c77023ebbf0c4', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'f51fa4c578bcd41657ee287605b53c107aa4984f', class: `${baseClass}__full` }, h("slot", { key: 'a58ca32a29e1492554136ca24d897058d1ce2913', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get is() { return "ds-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -178,6 +181,26 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
                 "attribute": "ds-variant",
                 "defaultValue": "'medium'"
             },
+            "dsColour": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'blue' | 'black' | 'white'",
+                    "resolved": "\"black\" | \"blue\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour of the pagination. Inherited by child components."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-colour",
+                "defaultValue": "'blue'"
+            },
             "dsAriaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -203,7 +226,13 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
     static get watchers() {
         return [{
                 "propName": "lang",
-                "methodName": "langObserver"
+                "methodName": "configurationPropertyObserver"
+            }, {
+                "propName": "dsColour",
+                "methodName": "configurationPropertyObserver"
+            }, {
+                "propName": "dsVariant",
+                "methodName": "configurationPropertyObserver"
             }, {
                 "propName": "dsCurrentPage",
                 "methodName": "dsCurrentPageObserver"

package/dist/collection/components/01-base-components/ds-pagination/paginationContext.js

@@ -5,7 +5,8 @@ function getChildSelector(parentElement) {
     const itemTag = transformTagName('ds-pagination-item', 'ds-pagination', parentElement);
     const pageTag = transformTagName('ds-pagination-page', 'ds-pagination', parentElement);
     const ellipsisTag = transformTagName('ds-pagination-ellipsis', 'ds-pagination', parentElement);
-    return [itemTag, pageTag, ellipsisTag].join(', ');
+    const pageInfoTag = transformTagName('ds-pagination-page-info', 'ds-pagination', parentElement);
+    return [itemTag, pageTag, ellipsisTag, pageInfoTag].join(', ');
 }
 function dispatchContextUpdate(element, context, isCompact) {
     element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {

package/dist/collection/components/01-base-components/ds-pagination/stories/ds-pagination.examples.stories.js

@@ -0,0 +1,149 @@
+import { html } from "lit";
+import { calculatePaginationPages } from "../../../../utils/pagination/paginationUtils";
+const meta = {
+    title: 'Base Components/Pagination/Examples',
+    component: 'ds-pagination',
+};
+export default meta;
+export const FirstPage = {
+    args: {
+        dsLayout: 'auto',
+    },
+    argTypes: {
+        dsLayout: {
+            control: 'select',
+            options: ['auto', 'compact', 'full'],
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'First page example. Previous and First buttons are automatically disabled.',
+            },
+        },
+    },
+    render: args => {
+        const current = 1;
+        const total = 20;
+        const pages = calculatePaginationPages(current, total);
+        return html `
+      <ds-pagination ds-current-page="${current}" ds-total-pages="${total}" ds-layout="${args.dsLayout}" ds-variant="medium">
+        <!-- Compact layout -->
+        <ds-pagination-item slot="compact" ds-type="first" ds-href="?page=1"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+        <ds-pagination-item slot="compact" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="last" ds-href="?page=${total}"></ds-pagination-item>
+
+        <!-- Full layout -->
+        <ds-pagination-item slot="full" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        ${pages.map(page => page === 'ellipsis'
+            ? html `<ds-pagination-ellipsis slot="full"></ds-pagination-ellipsis>`
+            : html `<ds-pagination-page slot="full" ds-page="${page}" ds-href="${page === current ? undefined : `?page=${page}`}"></ds-pagination-page>`)}
+        <ds-pagination-item slot="full" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+      </ds-pagination>
+    `;
+    },
+};
+export const LastPage = {
+    args: {
+        dsLayout: 'auto',
+    },
+    argTypes: {
+        dsLayout: {
+            control: 'select',
+            options: ['auto', 'compact', 'full'],
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Last page example. Next and Last buttons are automatically disabled.',
+            },
+        },
+    },
+    render: args => {
+        const current = 20;
+        const total = 20;
+        const pages = calculatePaginationPages(current, total);
+        return html `
+      <ds-pagination ds-current-page="${current}" ds-total-pages="${total}" ds-layout="${args.dsLayout}" ds-variant="medium">
+        <!-- Compact layout -->
+        <ds-pagination-item slot="compact" ds-type="first" ds-href="?page=1"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+        <ds-pagination-item slot="compact" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="last" ds-href="?page=${total}"></ds-pagination-item>
+
+        <!-- Full layout -->
+        <ds-pagination-item slot="full" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        ${pages.map(page => page === 'ellipsis'
+            ? html `<ds-pagination-ellipsis slot="full"></ds-pagination-ellipsis>`
+            : html `<ds-pagination-page slot="full" ds-page="${page}" ds-href="${page === current ? undefined : `?page=${page}`}"></ds-pagination-page>`)}
+        <ds-pagination-item slot="full" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+      </ds-pagination>
+    `;
+    },
+};
+export const MiddlePage = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Middle page example with ellipsis on both sides.',
+            },
+        },
+    },
+    render: () => {
+        const current = 10;
+        const total = 20;
+        const pages = calculatePaginationPages(current, total);
+        return html `
+      <ds-pagination ds-current-page="${current}" ds-total-pages="${total}" ds-layout="auto" ds-variant="medium">
+        <!-- Compact layout -->
+        <ds-pagination-item slot="compact" ds-type="first" ds-href="?page=1"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+        <ds-pagination-item slot="compact" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="last" ds-href="?page=${total}"></ds-pagination-item>
+
+        <!-- Full layout -->
+        <ds-pagination-item slot="full" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        ${pages.map(page => page === 'ellipsis'
+            ? html `<ds-pagination-ellipsis slot="full"></ds-pagination-ellipsis>`
+            : html `<ds-pagination-page slot="full" ds-page="${page}" ds-href="${page === current ? undefined : `?page=${page}`}"></ds-pagination-page>`)}
+        <ds-pagination-item slot="full" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+      </ds-pagination>
+    `;
+    },
+};
+export const FewPages = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'When there are 7 or fewer pages, all pages are shown without ellipsis.',
+            },
+        },
+    },
+    render: () => {
+        const current = 3;
+        const total = 5;
+        const pages = calculatePaginationPages(current, total);
+        return html `
+      <ds-pagination ds-current-page="${current}" ds-total-pages="${total}" ds-layout="auto" ds-variant="medium">
+        <!-- Compact layout -->
+        <ds-pagination-item slot="compact" ds-type="first" ds-href="?page=1"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        <ds-pagination-page-info slot="compact"></ds-pagination-page-info>
+        <ds-pagination-item slot="compact" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+        <ds-pagination-item slot="compact" ds-type="last" ds-href="?page=${total}"></ds-pagination-item>
+
+        <!-- Full layout -->
+        <ds-pagination-item slot="full" ds-type="previous" ds-href="?page=${current - 1}"></ds-pagination-item>
+        ${pages.map(page => page === 'ellipsis'
+            ? html `<ds-pagination-ellipsis slot="full"></ds-pagination-ellipsis>`
+            : html `<ds-pagination-page slot="full" ds-page="${page}" ds-href="${page === current ? undefined : `?page=${page}`}"></ds-pagination-page>`)}
+        <ds-pagination-item slot="full" ds-type="next" ds-href="?page=${current + 1}"></ds-pagination-item>
+      </ds-pagination>
+    `;
+    },
+};