@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs/components/input-group/daikin-input-group.cjs

@@ -20,16 +20,51 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = classVarianceAuthority.cva(["flex", "items-center", "font-bold"], {
-  variants: {
-    disabled: {
-      false: [],
-      true: ["text-ddt-color-common-disabled"]
+const cvaLayout = classVarianceAuthority.cva(
+  ["flex", "w-full", "text-ddt-color-common-text-primary"],
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col", "justify-center", "gap-(--dds-gap-20)"],
+        horizontal: ["flex-row", "gap-6"]
+      }
+    }
+  }
+);
+const cvaContentArea = classVarianceAuthority.cva(
+  ["flex", "flex-col", "gap-(--dds-gap-20)", "natural-break"],
+  {
+    variants: {
+      orientation: {
+        vertical: [],
+        horizontal: ["w-50", "shrink-0"]
+      }
     }
   }
-});
+);
+const cvaLabel = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "font-bold",
+    "text-(length:--dds-font-size-label-text)"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [],
+        true: ["text-ddt-color-common-disabled"]
+      }
+    }
+  }
+);
 const cvaHelper = classVarianceAuthority.cva(
-  ["flex", "gap-1", "items-center", "text-(length:--dds-font-size-350)"],
+  [
+    "flex",
+    "gap-1",
+    "items-center",
+    "text-(length:--dds-font-size-helper-text)"
+  ],
   {
     variants: {
       type: {
@@ -55,7 +90,7 @@ const cvaHelper = classVarianceAuthority.cva(
   }
 );
 const cvaCounter = classVarianceAuthority.cva(
-  ["text-(length:--dds-font-size-350)", "font-bold", "ml-auto"],
+  ["text-(length:--dds-font-size-helper-text)", "font-bold", "ml-auto"],
   {
     variants: {
       variant: {
@@ -74,6 +109,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
     this.required = null;
     this.error = null;
     this.disabled = false;
+    this.readonly = false;
     this.textareaMaxCount = null;
     this.textareaLimitExceedError = null;
     this._textareaCount = null;
@@ -122,6 +158,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
         case "error":
         case "textareaLimitExceedError":
           return lit.html`<daikin-status-message
+            class="part-status-message:text-(length:--dds-font-size-helper-text)"
             status="negative"
             status-message-role="alert"
             size="small"
@@ -137,30 +174,37 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
       }
     };
     return lit.html`<fieldset class="contents" ?disabled=${this.disabled}>
-      <label
-        class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary"
-      >
-        <div class="flex items-center flex-wrap gap-1 font-bold">
-          ${this.label ? lit.html`<span class=${cvaLabel({ disabled: this.disabled })}>
-                ${this.label}
-              </span>` : lit.nothing}
-          ${this.required && !this.disabled ? lit.html`<span
-                class="text-ddt-color-common-danger-default text-(length:--dds-font-size-300)"
-              >
-                ${this.required}
-              </span>` : lit.nothing}
+      <label class=${cvaLayout({ orientation: this.orientation })}>
+        <div class=${cvaContentArea({ orientation: this.orientation })}>
+          <div class="flex items-center flex-wrap gap-(--dds-gap-10) font-bold">
+            ${this.label ? lit.html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                  ${this.label}
+                </span>` : lit.nothing}
+            ${this.required && !this.disabled ? lit.html`<span
+                  class="text-ddt-color-common-danger-default text-(length:--dds-font-size-300)"
+                >
+                  ${this.required}
+                </span>` : lit.nothing}
+          </div>
+          ${formatHelperText(helperTextVariant, helperText)}
         </div>
-        ${formatHelperText(helperTextVariant, helperText)}
-        <slot
-          @slotchange=${this._handleSlotChange}
-          @input=${this._handleInput}
-        ></slot>
-        ${this.textareaMaxCount != null && this._textareaCount != null ? lit.html`<span
-              class=${cvaCounter({
+        ${this.textareaMaxCount != null ? lit.html`<div class="flex flex-col gap-2 w-full min-w-0">
+              <slot
+                @slotchange=${this._handleSlotChange}
+                @input=${this._handleInput}
+              ></slot>
+              ${this._textareaCount != null ? lit.html`<div class="flex">
+                    <span
+                      class=${cvaCounter({
       variant: this.disabled ? "disabled" : this.textareaLimitExceeded ? "error" : "normal"
     })}
-              >${this._textareaCount}/${this.textareaMaxCount}</span
-            >` : lit.nothing}
+                      >${this._textareaCount}/${this.textareaMaxCount}</span
+                    >
+                  </div>` : lit.nothing}
+            </div>` : lit.html`<slot
+              @slotchange=${this._handleSlotChange}
+              @input=${this._handleInput}
+            ></slot>`}
       </label>
     </fieldset>`;
   }
@@ -176,6 +220,17 @@ exports.DaikinInputGroup.styles = lit.css`
       width: 100%;
     }
   `;
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "vertical",
+      "horizontal"
+    ])
+  })
+], exports.DaikinInputGroup.prototype, "orientation", 2);
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "label", 2);
@@ -191,6 +246,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinInputGroup.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinInputGroup.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], exports.DaikinInputGroup.prototype, "textareaMaxCount", 2);
@@ -206,7 +264,7 @@ __decorateClass([
 ], exports.DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({
-    selector: "daikin-checkbox-group,daikin-combobox,daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-area,daikin-text-field,daikin-time-picker"
+    selector: "daikin-checkbox-group,daikin-combobox,daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-area,daikin-text-field,daikin-time-picker,daikin-text-masked-field"
   })
 ], exports.DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

package/dist/cjs/components/input-group/daikin-input-group.d.cts

@@ -139,6 +139,11 @@ import { DDSElement } from "../../base/index.cjs";
  */
 export declare class DaikinInputGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * Orientation of the input group.
+     * Possible values are `"vertical"` and `"horizontal"`.
+     */
+    orientation: "vertical" | "horizontal";
     /**
      * Label text displayed at the top of the field.
      */
@@ -167,6 +172,11 @@ export declare class DaikinInputGroup extends DDSElement {
      * Reflected in `disabled` attribute of the input control in the slot.
      */
     disabled: boolean;
+    /**
+     * Whether the field is readonly.
+     * Reflected in `readonly` attribute of the input control in the slot.
+     */
+    readonly: boolean;
     /**
      * The maximum number of characters that can be input into the text area.
      * If set, a counter will be displayed at the bottom of the text area.

package/dist/cjs/components/list-item/daikin-list-item.cjs

@@ -44,27 +44,38 @@ const INNER_CN = classVarianceAuthority.cva([
   // For text
   "group-hover:[&:not(a,button)]:before:bg-ddt-color-common-surface-hover"
 ])();
-const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "mt-0.5", "text-left"], {
-  variants: {
-    disabled: {
-      false: ["text-ddt-color-common-text-primary"],
-      true: ["text-ddt-color-common-disabled"]
+const cvaContent = classVarianceAuthority.cva(
+  [
+    "block",
+    "pt-(--dds-padding-05)",
+    "pl-(--dds-space-100)",
+    "pr-(--dds-space-300)",
+    "pb-px",
+    "text-left"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
+      }
     }
   }
-});
+);
 const WRAPPER = classVarianceAuthority.cva([
   "group",
   "flex",
   "justify-between",
   "items-start",
+  "p-(--dds-padding-30)",
   "w-full",
-  "min-h-12",
-  "p-3",
+  "p-(--dds-padding-30)",
+  "text-(length:--dds-font-size-label-text)",
   "text-left",
   "relative",
   "natural-break"
 ])();
-const cvaIcon = classVarianceAuthority.cva(["icon-size-6", "slotted:flex-none"], {
+const cvaIcon = classVarianceAuthority.cva(["icon-size-token", "slotted:flex-none"], {
   variants: {
     position: {
       left: [],
@@ -118,7 +129,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
   }
   render() {
     const disabled = this._disabled;
-    const content = lit.html`<span class="flex items-start w-full relative">
+    const content = lit.html`<span class="flex items-start w-full relative gap-1">
       <slot
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}

package/dist/cjs/components/list-item/daikin-list-item.d.cts

@@ -29,6 +29,15 @@ import { DDSElement, DDSNavigable, NavigationTarget } from "../../base/index.cjs
  *
  * ```html
  * <daikin-list-item>List item label</daikin-list-item>
+ * <!-- With description -->
+ * <daikin-list-item>
+ *   <div class="flex flex-col gap-0.5">
+ *     <span>List item label</span>
+ *     <span class="text-xs text-(--dds-color-common-text-secondary)">
+ *       Description
+ *     </span>
+ *   </div>
+ * </daikin-list-item>
  * ```
  */
 export declare class DaikinListItem extends DDSElement implements DDSNavigable {

package/dist/cjs/components/logo/daikin-logo.cjs

@@ -102,7 +102,7 @@ exports.DaikinLogo.styles = lit.css`
     :host {
       display: inline-flex;
       width: 171px;
-      aspect-ratio: 171 / 37;
+      aspect-ratio: 171 / 36;
     }
   `;
 __decorateClass([

package/dist/cjs/components/logo/daikin-logo.d.cts

@@ -37,8 +37,8 @@ export declare class DaikinLogo extends DDSElement implements DDSNavigable {
      */
     logoAriaLabel: string | null;
     /**
-     * Specify the the logo mode.
-     * Notice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.
+     * Specify the logo mode.
+     * Notice: "negative" mode can only be used in dark mode.
      *
      * @default "positive"
      */

package/dist/cjs/components/menu/daikin-menu.cjs

@@ -34,7 +34,7 @@ const cvaMenu = classVarianceAuthority.cva([
   "left-(--floating-x,0)",
   "top-(--floating-y,0)",
   "w-max",
-  "py-2",
+  "py-(--dds-padding-20)",
   "border",
   "rounded-lg",
   "absolute",
@@ -248,7 +248,7 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         id="menu"
         part="menu"
         class=${cvaMenu()}
-        popover=${this.popoverValue}
+        .popover=${this.popoverValue}
         @click=${this._handleClick}
         @beforetoggle=${this._handleBeforeToggle}
         @toggle=${this._handleToggle}

package/dist/cjs/components/modal-header/daikin-modal-header.cjs

@@ -52,10 +52,16 @@ exports.DaikinModalHeader = class DaikinModalHeader extends ddsElement.DDSElemen
     );
   }
   render() {
-    return lit.html`<div class="flex w-full gap-2">
-      <div class="flex-1 flex flex-col pt-0.5 gap-2 natural-break">
-        <slot class=${cvaTitle}></slot>
-        <slot name="description" class=${cvaDescription}></slot>
+    return lit.html`<div class="flex w-full gap-2 justify-between">
+      <div class="flex flex-row gap-1 pt-0.5">
+        <slot
+          name="left-icon"
+          class="flex-none icon-size-6 text-ddt-color-common-text-primary"
+        ></slot>
+        <div class="flex-1 flex flex-col gap-2 natural-break">
+          <slot class=${cvaTitle}></slot>
+          <slot name="description" class=${cvaDescription}></slot>
+        </div>
       </div>
       ${this.withCloseButton ? lit.html`<div class="flex-none">
             <daikin-icon-button

package/dist/cjs/components/modal-header/daikin-modal-header.d.cts

@@ -6,6 +6,7 @@ import { DDSElement } from "../../base/index.cjs";
  * - `daikin-modal` > `daikin-modal-header`
  *
  * @slot description - An optional slot for description.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the title. Place a `daikin-icon` element or something similar.
  * @slot - A slot for modal title.
  *
  * @example

package/dist/cjs/components/navigation/daikin-navigation.cjs

@@ -38,8 +38,29 @@ exports.DaikinNavigation.styles = lit.css`
       display: flex;
       min-width: 100%;
       width: max-content;
+
+      --ddc-navigation-horizontal-padding: 2rem;
+    }
+    :host([horizontal-padding="medium"]) {
+      --ddc-navigation-horizontal-padding: 1.5rem;
+    }
+    :host([horizontal-padding="narrow"]) {
+      --ddc-navigation-horizontal-padding: 1rem;
     }
   `;
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "wide",
+    isAllowedValue: ddsProperty.oneOf([
+      "wide",
+      "narrow",
+      "medium"
+    ]),
+    attribute: "horizontal-padding"
+  })
+], exports.DaikinNavigation.prototype, "horizontalPadding", 2);
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, attribute: "navigation-aria-label" })
 ], exports.DaikinNavigation.prototype, "navigationAriaLabel", 2);

package/dist/cjs/components/navigation/daikin-navigation.d.cts

@@ -43,6 +43,15 @@ import { DDSElement } from "../../base/index.cjs";
  */
 export declare class DaikinNavigation extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * The horizontal padding of all navigation items in the navigation.
+     * - `wide`: 2rem;
+     * - `narrow`: 1rem;
+     * - `medium`: 1.5rem;
+     *
+     * @default "wide"
+     */
+    horizontalPadding?: "wide" | "narrow" | "medium";
     /**
      * The aria-label of the navigation.
      */

package/dist/cjs/components/navigation-item/daikin-navigation-item.cjs

@@ -25,13 +25,11 @@ const cvaBaseClasses = [
   "relative",
   "h-full",
   "w-full",
-  "gap-1",
   "justify-center",
   "items-center",
-  "min-h-12",
-  "px-8",
-  "pt-2",
-  "pb-3",
+  "px-(--ddc-navigation-horizontal-padding,2rem)",
+  "py-(--dds-padding-30)",
+  "text-(length:--dds-font-size-label-text)",
   "font-bold",
   "focus-visible:outline-hidden",
   "focus-visible:before:absolute",
@@ -75,8 +73,14 @@ const cvaBaseVariants = {
     }
   }
 };
-const cvaLinkItem = classVarianceAuthority.cva(cvaBaseClasses, cvaBaseVariants);
-const cvaMenuItem = classVarianceAuthority.cva(cvaBaseClasses, cvaBaseVariants);
+const cvaLinkItem = classVarianceAuthority.cva([...cvaBaseClasses, "gap-1"], cvaBaseVariants);
+const cvaMenuItem = classVarianceAuthority.cva(
+  [
+    ...cvaBaseClasses,
+    "gap-(--ddc-navigation-menu-item-gap,var(--dds-space-100))"
+  ],
+  cvaBaseVariants
+);
 exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDSElement {
   constructor() {
     super();
@@ -126,9 +130,10 @@ exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDS
               aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
               ><slot
                 name="left-icon"
-                class="icon-size-6 slotted:flex-none"
+                class="icon-size-token slotted:flex-none"
               ></slot
-              ><span class="px-1 natural-break text-left"><slot></slot></span
+              ><span class="px-1 natural-break text-left leading-normal"
+                ><slot></slot></span
             ></a>
           </div>
         `;
@@ -149,11 +154,12 @@ exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDS
             >
               <slot
                 name="left-icon"
-                class="icon-size-6 slotted:flex-none"
+                class="icon-size-token slotted:flex-none"
               ></slot
-              ><span class="px-1 natural-break text-left"><slot></slot></span
+              ><span class="px-1 natural-break text-left leading-normal"
+                ><slot></slot></span
               ><span
-                class="icon-[daikin--chevron-down] size-6 flex-none rotate-(--chevron-rotation)"
+                class="icon-[daikin--chevron-down] size-(--dds-icon) flex-none rotate-(--chevron-rotation)"
               ></span>
             </button>
           </div>
@@ -175,8 +181,6 @@ exports.DaikinNavigationItem.styles = lit.css`
     :host {
       display: block;
       width: fit-content;
-
-      --chevron-rotation: 0deg;
     }
   `;
 __decorateClass([

package/dist/cjs/components/pagination/daikin-pagination.cjs

@@ -29,12 +29,13 @@ const cvaPageButton = classVarianceAuthority.cva(
     "relative",
     "items-center",
     "justify-center",
-    "min-w-12",
-    "min-h-12",
+    "min-w-[var(--ddc-pagination-item-size)]",
+    "min-h-[var(--ddc-pagination-item-size)]",
+    "h-[var(--ddc-pagination-item-size)]",
     "p-1",
-    "text-base",
+    "text-[length:var(--ddc-pagination-font-size)]",
     "not-italic",
-    "leading-6",
+    "leading-[var(--ddc-pagination-line-height)]",
     "bg-clip-content",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
@@ -54,9 +55,9 @@ const cvaPageButton = classVarianceAuthority.cva(
           "active:bg-ddt-color-common-surface-brand-press",
           "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
-          "after:h-1",
+          "after:h-[var(--ddc-pagination-active-indicator-size)]",
           "after:absolute",
-          "after:inset-1",
+          "after:inset-[var(--ddc-pagination-active-indicator-size)]",
           "after:top-auto"
         ],
         false: [
@@ -78,12 +79,14 @@ const cvaEllipsis = classVarianceAuthority.cva([
   "flex",
   "items-center",
   "justify-center",
-  "w-12",
-  "h-12",
-  "text-base",
+  "min-w-[var(--ddc-pagination-item-size)]",
+  "min-h-[var(--ddc-pagination-item-size)]",
+  "w-[var(--ddc-pagination-item-size)]",
+  "h-[var(--ddc-pagination-item-size)]",
+  "text-[length:var(--ddc-pagination-font-size)]",
   "not-italic",
   "font-normal",
-  "leading-6",
+  "leading-[var(--ddc-pagination-line-height)]",
   "text-ddt-color-common-neutral-default"
 ]);
 const cvaChevronButton = classVarianceAuthority.cva([
@@ -92,13 +95,15 @@ const cvaChevronButton = classVarianceAuthority.cva([
   "flex",
   "items-center",
   "justify-center",
-  "w-12",
-  "h-12",
+  "min-w-[var(--ddc-pagination-item-size)]",
+  "min-h-[var(--ddc-pagination-item-size)]",
+  "w-[var(--ddc-pagination-item-size)]",
+  "h-[var(--ddc-pagination-item-size)]",
   "text-ddt-color-common-neutral-default",
-  "text-base",
+  "text-[length:var(--ddc-pagination-font-size)]",
   "not-italic",
   "font-normal",
-  "leading-6",
+  "leading-[var(--ddc-pagination-line-height)]",
   "enabled:hover:bg-ddt-color-common-surface-neutral-hover",
   "enabled:hover:text-ddt-color-common-neutral-hover",
   "enabled:active:bg-ddt-color-common-surface-neutral-press",
@@ -115,6 +120,7 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
     this.current = 1;
     this.total = 1;
     this.window = 5;
+    this.size = "medium";
   }
   _goto(page) {
     const newPage = Math.max(Math.min(page, this.total), 1);
@@ -151,16 +157,18 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
       <div
         aria-label=${landmarkLabel}
         role="navigation"
-        class="inline-flex flex-wrap"
+        class="inline-flex flex-wrap max-w-full"
       >
         <button
           class=${cvaChevron}
           type="button"
           aria-label="Go to the previous page."
-          ?disabled=${this.current === 1}
+          ?disabled=${this.total <= 1 || this.current === 1}
           @click=${() => this._gotoOffset(-1)}
         >
-          <span class="icon-[daikin--pagination-chevron-left] w-4 h-4"></span>
+          <span
+            class="icon-[daikin--chevron-left] w-(--ddc-pagination-icon-size) h-(--ddc-pagination-icon-size)"
+          ></span>
         </button>
         ${repeat_js.repeat(
       pageArray,
@@ -201,10 +209,12 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
           type="button"
           class=${cvaChevron}
           aria-label="Go to the next page."
-          ?disabled=${this.current === this.total}
+          ?disabled=${this.total <= 1 || this.current === this.total}
           @click=${() => this._gotoOffset(1)}
         >
-          <span class="icon-[daikin--pagination-chevron-right] w-4 h-4"></span>
+          <span
+            class="icon-[daikin--chevron-right] w-(--ddc-pagination-icon-size) h-(--ddc-pagination-icon-size)"
+          ></span>
         </button>
       </div>
     `;
@@ -215,6 +225,29 @@ exports.DaikinPagination.styles = lit.css`
 
     :host {
       display: inline-flex;
+      --ddc-pagination-item-size: 3rem;
+      --ddc-pagination-font-size: 1rem;
+      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+      --ddc-pagination-active-indicator-size: 0.25rem;
+      --ddc-pagination-icon-size: 2rem;
+    }
+
+    :host([size="small"]) {
+      --ddc-pagination-item-size: 2.25rem;
+      --ddc-pagination-font-size: 0.875rem;
+      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+      --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
+      --ddc-pagination-icon-size: 1.5rem;
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        --ddc-pagination-item-size: 2.25rem;
+        --ddc-pagination-font-size: var(--text-sm);
+        --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+        --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
+        --ddc-pagination-icon-size: 1.5rem;
+      }
     }
   `;
 __decorateClass([
@@ -226,6 +259,14 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinPagination.prototype, "window", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: ddsProperty.oneOf(["small", "medium"])
+  })
+], exports.DaikinPagination.prototype, "size", 2);
 exports.DaikinPagination = __decorateClass([
   decorators.ddsElement("daikin-pagination")
 ], exports.DaikinPagination);

package/dist/cjs/components/pagination/daikin-pagination.d.cts

@@ -35,6 +35,17 @@ export declare class DaikinPagination extends DDSElement {
      * If a value less than 5 is specified, it will be treated as 5.
      */
     window: number;
+    /**
+     * Size of the pagination.
+     *
+     * - `medium`: Default size. Page button min size is `48px`.
+     * - `small`: Compact size. Page button min size is `36px`.
+     *
+     * Page buttons grow horizontally when content gets wider while keeping horizontal padding.
+     *
+     * On mobile viewport (`<= 767px`), pagination is always rendered in the small size.
+     */
+    size: "small" | "medium";
     private _goto;
     private _gotoOffset;
     render(): import('lit-html').TemplateResult<1>;