@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/System/Regular/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchEvent(new CustomEvent(\n            'pagination.click',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}

package/lib/components/pagination/pagination.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=pagination.styles.d.ts.map

package/lib/components/pagination/pagination.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../components/pagination/pagination.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAooBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/pagination/pagination.styles.js

@@ -0,0 +1,648 @@
+import { css } from 'lit';
+const styles = css `.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  font-family: var(--cre8-typography-body-default-font-family);
+  font-size: var(--cre8-typography-body-default-font-size);
+  font-weight: var(--cre8-typography-body-default-font-weight);
+  line-height: var(--cre8-typography-body-default-line-height);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: var(--pagination-display, inline-flex);
+  justify-content: var(--pagination-justify-content, center);
+  align-items: var(--pagination-align-items, center);
+  --cre8-button-width: 2rem;
+  --cre8-button-height: 2rem;
+  --cre8-button-min-width: 2rem;
+  --cre8-button-min-height: 2rem;
+  --cre8-button-padding-horizontal-small: 0px;
+  --cre8-button-padding-vertical-small: 0px;
+}
+
+*, ::slotted(*), *:before, *:after {
+  box-sizing: border-box;
+  width: auto;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  --cre8-button-margin-right: var(--cre8-spacing-2);
+  --cre8-button-margin-left: var(--cre8-spacing-2);
+  margin-right: var(--cre8-button-margin-right);
+  margin-left: var(--cre8-button-margin-left);
+  align-items: center;
+}
+
+[aria-current=true], #current {
+  --cre8-color-button-tertiary-bg: var( --cre8-color-bg-strong);
+  --cre8-color-button-tertiary-content: var(--cre8-color-content-knockout);
+  --cre8-color-button-tertiary-border: var(--cre8-color-border-transparent);
+}
+[aria-current=true]:hover, [aria-current=true]:active, #current:hover, #current:active {
+  border-radius: var(--cre8-border-radius-button);
+  --cre8-color-button-tertiary-bg-hover: var(--cre8-color-bg-strong);
+  --cre8-color-button-tertiary-content-hover: var(--cre8-color-content-knockout);
+}
+[aria-current=true]:hover:focus, [aria-current=true]:hover:focus-visible, [aria-current=true]:hover:focus-within, [aria-current=true]:active:focus, [aria-current=true]:active:focus-visible, [aria-current=true]:active:focus-within, #current:hover:focus, #current:hover:focus-visible, #current:hover:focus-within, #current:active:focus, #current:active:focus-visible, #current:active:focus-within {
+  border-radius: var(--cre8-border-radius-button);
+  --cre8-color-button-tertiary-bg-active: var(--cre8-color-bg-strong);
+  --cre8-color-button-tertiary-content-active: var(--cre8-color-content-knockout);
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+
+.cre8-c-pagination--compact, .cre8-c-pagination--icon-only, .cre8-c-pagination--range {
+  --cre8-button-width: 3rem;
+  --cre8-button-height: 3rem;
+  --cre8-button-min-width: 3rem;
+  --cre8-button-min-height: 3rem;
+}
+
+.cre8-c-pagionation__icon {
+  fill: var(--cre8-color-button-tertiary-content);
+}
+
+.cre8-c-pagination__icon:has(cre8-button:disabled) {
+  color: var(--cre8-color-button-tertiary-content-disabled);
+}
+
+.cre8-c-pagination [aria-disabled=true] {
+  fill: var(--cre8-color-content-default);
+  --cre8-color-button-tertiary-content: var(--cre8-color-content-default);
+}`;
+export default styles;
+//# sourceMappingURL=pagination.styles.js.map