@daikin-oss/design-system-web-components 1.5.1 → 1.5.2

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

@@ -161,6 +161,9 @@ exports.DaikinAccordionItem.styles = lit.css`
     :host::before {
       content: "";
       display: var(--divider-top-display, none);
+      position: absolute;
+      inset: 0;
+      bottom: auto;
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
@@ -169,6 +172,9 @@ exports.DaikinAccordionItem.styles = lit.css`
     :host::after {
       content: "";
       display: var(--divider-bottom-display, none);
+      position: absolute;
+      inset: 0;
+      top: auto;
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);

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

@@ -58,7 +58,10 @@ exports.DaikinBreadcrumb = class DaikinBreadcrumb extends ddsElement.DDSElement
     this._updateBreadcrumbs();
   }
   render() {
-    return lit.html`<nav class="inline-block" aria-label="Breadcrumbs">
+    return lit.html`<nav
+      class="inline-block"
+      aria-label=${this.breadcrumbAriaLabel}
+    >
       <div class="inline-block" role="list">
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
@@ -74,6 +77,14 @@ exports.DaikinBreadcrumb.styles = lit.css`
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], exports.DaikinBreadcrumb.prototype, "showVisited", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "breadcrumb-aria-label",
+    fallbackValue: "Breadcrumb"
+  })
+], exports.DaikinBreadcrumb.prototype, "breadcrumbAriaLabel", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], exports.DaikinBreadcrumb.prototype, "_items", 2);

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

@@ -60,6 +60,13 @@ export declare class DaikinBreadcrumb extends DDSElement {
      * Whether or not to change the color of visited links.
      */
     showVisited: boolean;
+    /**
+     * The aria-label of the breadcrumb.
+     * It's recommended to provide a more specific aria-label for the breadcrumb, especially when there are multiple breadcrumb components on the same page, to help users distinguish between them.
+     *
+     * @default "Breadcrumb"
+     */
+    breadcrumbAriaLabel: string;
     private readonly _items;
     private readonly _menus;
     private _rafId;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
@@ -45,6 +46,15 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
     this.appendDivider = false;
     this.breadcrumbAriaHaspopup = null;
     this.breadcrumbAriaExpanded = null;
+    this._focusableRef = ref_js.createRef();
+  }
+  /**
+   * Focuses on the inner focusable element.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
   }
   /**
    * _Internal use._
@@ -66,6 +76,7 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
   }
   render() {
     const link = this.variant === "normal" ? lit.html`<daikin-link
+            ${ref_js.ref(this._focusableRef)}
             href=${ifDefined_js.ifDefined(this.href)}
             target=${ifDefined_js.ifDefined(this.target)}
             ?no-underline=${true}
@@ -73,6 +84,7 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDS
           >
             <slot></slot>
           </daikin-link>` : this.variant === "ellipsis" ? lit.html`<button
+              ${ref_js.ref(this._focusableRef)}
               type="button"
               class=${LINK_CLASS_NAME}
               aria-label="Show more items"

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

@@ -61,6 +61,12 @@ export declare class DaikinBreadcrumbItem extends DDSElement implements DDSNavig
      * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
     breadcrumbAriaExpanded: "true" | "false" | "undefined" | null;
+    private readonly _focusableRef;
+    /**
+     * Focuses on the inner focusable element.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     /**
      * _Internal use._
      * Returns the navigation target information.

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

@@ -68,11 +68,58 @@ const cvaButton = classVarianceAuthority.cva(
         ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
       },
       size: {
-        small: ["px-2", "text-sm"],
-        medium: ["px-3", "text-base"],
-        large: ["px-4", "text-xl"]
+        small: ["text-sm"],
+        medium: ["text-base"],
+        large: ["text-xl"]
       }
-    }
+    },
+    compoundVariants: [
+      {
+        size: "small",
+        variant: "fill",
+        class: "px-2"
+      },
+      {
+        size: "small",
+        variant: "ghost",
+        class: "px-2"
+      },
+      {
+        size: "small",
+        variant: "outline",
+        class: "px-1.75"
+      },
+      {
+        size: "medium",
+        variant: "fill",
+        class: "px-3"
+      },
+      {
+        size: "medium",
+        variant: "ghost",
+        class: "px-3"
+      },
+      {
+        size: "medium",
+        variant: "outline",
+        class: "px-2.75"
+      },
+      {
+        size: "large",
+        variant: "fill",
+        class: "px-4"
+      },
+      {
+        size: "large",
+        variant: "ghost",
+        class: "px-4"
+      },
+      {
+        size: "large",
+        variant: "outline",
+        class: "px-3.75"
+      }
+    ]
   }
 );
 const cvaIcon = classVarianceAuthority.cva(["slotted:flex-none"], {

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

@@ -24,15 +24,14 @@ const cvaContainer = classVarianceAuthority.cva(
     "flex-col",
     "gap-4",
     "size-full",
-    "p-3",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
   ],
   {
     variants: {
       outline: {
-        true: ["border", "border-ddt-color-divider"],
-        false: []
+        true: ["border", "border-ddt-color-divider", "p-2.75"],
+        false: ["p-3"]
       }
     }
   }

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

@@ -23,7 +23,8 @@ const cvaTitle = classVarianceAuthority.cva([
   "text-base",
   "leading-[1.3]",
   "not-italic",
-  "font-bold"
+  "font-bold",
+  "natural-break"
 ])();
 const cvaDescription = classVarianceAuthority.cva([
   "flex-none",
@@ -32,7 +33,8 @@ const cvaDescription = classVarianceAuthority.cva([
   "text-sm",
   "leading-normal",
   "not-italic",
-  "font-normal"
+  "font-normal",
+  "natural-break"
 ])();
 exports.DaikinCardHeader = class DaikinCardHeader extends ddsElement.DDSElement {
   render() {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
@@ -64,7 +65,7 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "disabled:checked:bg-ddt-color-common-disabled",
   "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
-const cvaLabel = classVarianceAuthority.cva([], {
+const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
@@ -81,6 +82,15 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
     super(...arguments);
     this.disabled = false;
     this.disabledByParent = false;
+    this._inputRef = ref_js.createRef();
+  }
+  /**
+   * Focuses on the inner checkbox.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
   }
   get checked() {
     return this.checkState === "checked";
@@ -122,6 +132,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
     >
       <span class="p-2">
         <input
+          ${ref_js.ref(this._inputRef)}
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}

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

@@ -59,6 +59,12 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     disabledByParent: boolean;
+    private readonly _inputRef;
+    /**
+     * Focuses on the inner checkbox.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     get checked(): boolean;
     private get _labelHidden();
     /**

package/dist/cjs/components/date-picker/daikin-date-picker.cjs

@@ -493,6 +493,14 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       this._currentSelection = itemInfo.type;
     }
   }
+  /**
+   * Focuses on the inner date input.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._dateInputElement.value) == null ? void 0 : _a.focus(options);
+  }
   render() {
     const min = this._min;
     const max = this._max;

package/dist/cjs/components/date-picker/daikin-date-picker.d.cts

@@ -104,6 +104,11 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _updateInputSelection;
     private _updateSelection;
     label: string | null;
+    /**
+     * Focuses on the inner date input.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/dist/cjs/components/icon-button/daikin-icon-button.cjs

@@ -30,7 +30,6 @@ const cvaIconButton = classVarianceAuthority.cva(
     "font-daikinSerif",
     "font-bold",
     "rounded-sm",
-    "p-1",
     "tracking-wide",
     "text-nowrap",
     "focus-visible:outline-solid",
@@ -74,8 +73,44 @@ const cvaIconButton = classVarianceAuthority.cva(
           "border-(--color-primary)"
         ],
         ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
+      },
+      size: {
+        s: [],
+        m: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        size: "s",
+        variant: "fill",
+        class: "p-1"
+      },
+      {
+        size: "s",
+        variant: "ghost",
+        class: "p-1"
+      },
+      {
+        size: "s",
+        variant: "outline",
+        class: "p-0.75"
+      },
+      {
+        size: "m",
+        variant: "fill",
+        class: "p-2"
+      },
+      {
+        size: "m",
+        variant: "ghost",
+        class: "p-2"
+      },
+      {
+        size: "m",
+        variant: "outline",
+        class: "p-1.75"
+      }
+    ]
   }
 );
 exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
@@ -120,7 +155,8 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
   render() {
     const iconButtonCN = cvaIconButton({
       variant: this.variant,
-      color: this.color
+      color: this.color,
+      size: this.size
     });
     if (this.type === "link") {
       const linkDisabled = this.disabled || this.href == null;

package/dist/cjs/components/icon-button/daikin-icon-button.d.cts

@@ -4,6 +4,7 @@ import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaIconButton: (props?: ({
     color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
+    size?: "s" | "m" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
 /**

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
@@ -23,6 +24,7 @@ const LINK_CLASS_NAME = classVarianceAuthority.cva([
   "font-daikinSerif",
   "leading-[130%]",
   "relative",
+  "natural-break",
   "link-enabled:text-ddt-color-link-text-default",
   "hover:link-enabled:text-ddt-color-link-text-hover",
   "hover:link-enabled:bg-ddt-color-common-surface-brand-hover",
@@ -55,6 +57,15 @@ exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
     this.showVisited = false;
     this.size = "medium";
     this.noUnderline = false;
+    this._anchorRef = ref_js.createRef();
+  }
+  /**
+   * Focuses on the inner anchor.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._anchorRef.value) == null ? void 0 : _a.focus(options);
   }
   /**
    * _Internal use._
@@ -76,6 +87,7 @@ exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
   }
   render() {
     return lit.html`<a
+      ${ref_js.ref(this._anchorRef)}
       class=${LINK_CLASS_NAME}
       href=${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
       target=${ifDefined_js.ifDefined(this.target ?? void 0)}

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

@@ -45,6 +45,12 @@ export declare class DaikinLink extends DDSElement implements DDSNavigable {
      * Whether or not to display an underline.
      */
     noUnderline: boolean;
+    private readonly _anchorRef;
+    /**
+     * Focuses on the inner anchor.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     /**
      * _Internal use._
      * Returns the navigation target information.

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

@@ -50,6 +50,7 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
     this.open = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
+    this._staticPlacement = false;
   }
   static registerCSSCustomProperties() {
     if (!isClient.isClient) {
@@ -87,6 +88,7 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
    * These are typically set once when the slot changes and do not change frequently.
    */
   _reflectStaticProperties() {
+    this._staticPlacement = false;
     for (const control of this._controls) {
       if (control instanceof daikinButton.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button") {
         control.buttonAriaHaspopup = "menu";
@@ -94,6 +96,7 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         control.avatarAriaHaspopup = "menu";
       } else if (control instanceof daikinNavigationItem.DaikinNavigationItem && control.type === "menu") {
         control.navigationItemAriaHaspopup = "menu";
+        this._staticPlacement = true;
       } else if (control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem) {
         control.breadcrumbAriaHaspopup = "menu";
       }
@@ -167,6 +170,7 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
         <slot
           @click=${this._handleTriggerClick}
           @touchend=${this._handleTouchEnd}
+          @slotchange=${this._handleSlotChange}
         ></slot>
       </div>
       <span
@@ -184,11 +188,13 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
       ${// Activate auto update only when the menu is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     guard_js.guard(
-      [this.open, this.placement, spacing],
+      [this.open, this.placement, spacing, this._staticPlacement],
       () => this._autoUpdateController.directive(
         {
           placement: this.placement,
-          middleware: [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
+          // flip() and shift() are disabled when the trigger is a daikin-navigation-item
+          // (see _staticPlacement for the full explanation).
+          middleware: this._staticPlacement ? [dom.offset({ mainAxis: spacing })] : [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
         },
         this.open
       )
@@ -265,6 +271,9 @@ __decorateClass([
     isAllowedValue: ddsProperty.oneOf(["click", "manual"])
   })
 ], exports.DaikinMenu.prototype, "trigger", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinMenu.prototype, "_staticPlacement", 2);
 exports.DaikinMenu = __decorateClass([
   decorators.ddsElement("daikin-menu")
 ], exports.DaikinMenu);

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

@@ -75,6 +75,17 @@ export declare class DaikinMenu extends DDSElement {
     trigger: "click" | "manual";
     private _autoUpdateController;
     private _hostStyles;
+    /**
+     * Controls whether the floating-ui `flip()` and `shift()` middleware are active.
+     *
+     * - **`flip()`** — When there is insufficient space on the side specified by `placement`, the menu
+     *   is automatically repositioned to the opposite side (e.g. `bottom` → `top`).
+     * - **`shift()`** — Keeps the menu within the viewport by nudging it along the cross-axis when it
+     *   would otherwise overflow the screen edge.
+     *
+     * Both middlewares are disabled when the trigger element is a `daikin-navigation-item`.
+     */
+    private _staticPlacement;
     /**
      * Exposes the trigger element contained within the menu to the outside of the component.
      *

package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs

@@ -58,7 +58,8 @@ const cvaBarContainer = classVarianceAuthority.cva(
     "items-center",
     "text-ddt-color-common-text-primary",
     "leading-[130%]",
-    "font-bold"
+    "font-bold",
+    "natural-break"
   ],
   {
     variants: {
@@ -81,7 +82,7 @@ const cvaBarContainer = classVarianceAuthority.cva(
     }
   }
 );
-const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]"], {
+const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]", "natural-break"], {
   variants: {
     variant: {
       inprogress: ["text-ddt-color-common-text-secondary"],

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -49,7 +49,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       this.status === "inprogress" ? "step" : void 0
     )}
     >
-      <div class="flex flex-col gap-1 w-full overflow-auto">
+      <div class="flex flex-col gap-1 w-full overflow-auto natural-break">
         <slot class="font-bold leading-[130%]"></slot>
         <slot name="description" class="text-sm leading-[130%]"></slot>
       </div>

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

@@ -44,7 +44,7 @@ const RADIO_CLASS_NAME = classVarianceAuthority.cva([
   "group-active:checked:enabled:border-ddt-color-common-brand-press",
   "disabled:border-ddt-color-common-disabled"
 ])();
-const cvaLabel = classVarianceAuthority.cva([], {
+const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],

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

@@ -194,6 +194,14 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
     (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
     this._handleDrag(event);
   }
+  /**
+   * Focuses on the inner slider thumb.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._thumbRef.value) == null ? void 0 : _a.focus(options);
+  }
   render() {
     const progress = this._progress;
     return lit.html`

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

@@ -72,6 +72,11 @@ export declare class DaikinSlider extends DDSFormElement {
     private _calcMousePositionRatio;
     private _startDrag;
     private _startTouch;
+    /**
+     * Focuses on the inner slider thumb.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }

package/dist/cjs/components/table-header-cell/daikin-table-header-cell.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
+const ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
@@ -26,9 +27,10 @@ const cvaHeaderCell = classVarianceAuthority.cva(
     "size-full",
     "min-h-12",
     "px-4",
-    "py-3",
+    "py-2",
     "text-ddt-color-common-text-primary",
-    "font-bold"
+    "font-bold",
+    "natural-break"
   ],
   {
     variants: {
@@ -79,6 +81,16 @@ exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.D
     super(...arguments);
     this.sortable = false;
     this.order = null;
+    this._focusableRef = ref_js.createRef();
+  }
+  /**
+   * Focuses on the inner button.
+   * Only effective when `sortable` is `true`.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
   }
   render() {
     const headerCellCN = cvaHeaderCell({
@@ -86,9 +98,13 @@ exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.D
       sortable: this.sortable,
       order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
-    const content = lit.html`<slot name="left-icon" class="icon-size-6"></slot
+    const content = lit.html`<slot
+        name="left-icon"
+        class="flex-none slotted:flex-none icon-size-6"
+      ></slot
       ><slot></slot>`;
     return this.sortable ? lit.html`<button
+          ${ref_js.ref(this._focusableRef)}
           type="button"
           class=${headerCellCN}
           @click=${() => this.dispatchEvent(new Event("change-sort", { bubbles: true }))}

package/dist/cjs/components/table-header-cell/daikin-table-header-cell.d.cts

@@ -55,6 +55,13 @@ export declare class DaikinTableHeaderCell extends DDSElement {
      * Controlled by `daikin-table` component.
      */
     order: TableHeaderCellVariantProps["order"] | null;
+    private readonly _focusableRef;
+    /**
+     * Focuses on the inner button.
+     * Only effective when `sortable` is `true`.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {