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

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.d.ts

@@ -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 {

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.js

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
 import { property, oneOf } from "../../base/dds-property.js";
@@ -24,9 +25,10 @@ const cvaHeaderCell = 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: {
@@ -77,6 +79,16 @@ let DaikinTableHeaderCell = class extends DDSElement {
     super(...arguments);
     this.sortable = false;
     this.order = null;
+    this._focusableRef = 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({
@@ -84,9 +96,13 @@ let DaikinTableHeaderCell = class extends DDSElement {
       sortable: this.sortable,
       order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
-    const content = html`<slot name="left-icon" class="icon-size-6"></slot
+    const content = html`<slot
+        name="left-icon"
+        class="flex-none slotted:flex-none icon-size-6"
+      ></slot
       ><slot></slot>`;
     return this.sortable ? html`<button
+          ${ref(this._focusableRef)}
           type="button"
           class=${headerCellCN}
           @click=${() => this.dispatchEvent(new Event("change-sort", { bubbles: true }))}

package/dist/es-dev/components/text-area/daikin-text-area.d.ts

@@ -66,9 +66,15 @@ export declare class DaikinTextArea extends DDSFormElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
+    private readonly _textareaRef;
     get count(): number;
     private _updateValue;
     private _handleInput;
+    /**
+     * Focuses on the inner textarea.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
     /**

package/dist/es-dev/components/text-area/daikin-text-area.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
 import { property } from "../../base/dds-property.js";
@@ -76,6 +77,7 @@ let DaikinTextArea = class extends DDSFormElement {
     this.error = false;
     this.resizable = false;
     this._label = null;
+    this._textareaRef = createRef();
   }
   get count() {
     return this.value.length;
@@ -87,8 +89,17 @@ let DaikinTextArea = class extends DDSFormElement {
     this.value = e.target.value;
     this._updateValue(this.value);
   }
+  /**
+   * Focuses on the inner textarea.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._textareaRef.value) == null ? void 0 : _a.focus(options);
+  }
   render() {
     return html`<textarea
+      ${ref(this._textareaRef)}
       class=${cvaTextArea({
       error: !this.disabled && this.error,
       resize: this.resizable

package/dist/es-dev/components/text-field/daikin-text-field.d.ts

@@ -124,6 +124,12 @@ export declare class DaikinTextField extends DDSFormElement {
     private _label;
     private _hasLeftSlot;
     private _hasRightSlot;
+    private readonly _inputRef;
+    /**
+     * Focuses on the inner input.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     private _handleChange;
     private _handleSlotChange;
     private _handleInput;

package/dist/es-dev/components/text-field/daikin-text-field.js

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html, nothing } from "lit";
 import { state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
 import { property } from "../../base/dds-property.js";
@@ -141,6 +142,15 @@ let DaikinTextField = class extends DDSFormElement {
     this._label = null;
     this._hasLeftSlot = false;
     this._hasRightSlot = false;
+    this._inputRef = createRef();
+  }
+  /**
+   * Focuses on the inner input.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
   }
   _handleChange(event) {
     this.dispatchEvent(new Event("change", event));
@@ -327,6 +337,7 @@ let DaikinTextField = class extends DDSFormElement {
     const role = this.type === "number" ? "spinbutton" : void 0;
     const inputMode = this.type === "number" ? "numeric" : void 0;
     return html`<input
+        ${ref(this._inputRef)}
         class=${cvaInput({
       error,
       leftIcon: this._hasLeftSlot,

package/dist/es-dev/components/text-masked-field/daikin-text-masked-field.d.ts

@@ -127,6 +127,11 @@ export declare class DaikinTextMaskedField extends DDSFormElement {
     private _handleChange;
     private _handleSlotChange;
     private _handleInput;
+    /**
+     * Focuses on the inner input.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     private _createIcon;
     render(): TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;

package/dist/es-dev/components/text-masked-field/daikin-text-masked-field.js

@@ -165,6 +165,14 @@ let DaikinTextMaskedField = class extends DDSFormElement {
   _handleInput(event) {
     this.value = event.target.value;
   }
+  /**
+   * Focuses on the inner input.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
+  }
   _createIcon() {
     return html`<span
         class=${cvaIcon({

package/dist/es-dev/components/time-picker/daikin-time-picker.d.ts

@@ -170,6 +170,11 @@ export declare class DaikinTimePicker extends DDSFormElement {
     private _updateInputSelection;
     private _updateSelection;
     private _handleDropdownChange;
+    /**
+     * Focuses on the inner time 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/es-dev/components/time-picker/daikin-time-picker.js

@@ -473,6 +473,14 @@ let DaikinTimePicker = class extends DDSFormElement {
       this._updateValue();
     }
   }
+  /**
+   * Focuses on the inner time input.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._timeInputElement.value) == null ? void 0 : _a.focus(options);
+  }
   render() {
     return html`<div
       role="group"

package/dist/es-dev/components/toggle/daikin-toggle.d.ts

@@ -35,6 +35,12 @@ export declare class DaikinToggle extends DDSFormElement {
      * Specify the toggle switch disabled state.
      */
     disabled: boolean;
+    private readonly _inputRef;
+    /**
+     * Focuses on the inner input.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     private _updateFormValue;
     private _handleChange;
     render(): import('lit-html').TemplateResult<1>;

package/dist/es-dev/components/toggle/daikin-toggle.js

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
 import { property } from "../../base/dds-property.js";
@@ -56,6 +57,15 @@ let DaikinToggle = class extends DDSFormElement {
     super(...arguments);
     this.checked = false;
     this.disabled = false;
+    this._inputRef = createRef();
+  }
+  /**
+   * Focuses on the inner input.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
   }
   _updateFormValue() {
     this.setFormValue(this.checked ? this.value : null);
@@ -67,6 +77,7 @@ let DaikinToggle = class extends DDSFormElement {
   }
   render() {
     return html`<input
+      ${ref(this._inputRef)}
       class=${TOGGLE_CLASS_NAME}
       type="checkbox"
       name=${ifDefined(this.getBackingProperty("name"))}

package/dist/es-dev/components/tree-item/daikin-tree-item.js

@@ -30,6 +30,7 @@ const cvaTreeChildren = cva(
     "pr-4",
     "pl-[calc((var(--level)+1)*1rem)]",
     "leading-[130%]",
+    "natural-break",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",