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

package/dist/cjs-dev/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-dev/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 {

package/dist/cjs-dev/components/text-area/daikin-text-area.cjs

@@ -4,6 +4,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 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");
@@ -78,6 +79,7 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElem
     this.error = false;
     this.resizable = false;
     this._label = null;
+    this._textareaRef = ref_js.createRef();
   }
   get count() {
     return this.value.length;
@@ -89,8 +91,17 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElem
     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 lit.html`<textarea
+      ${ref_js.ref(this._textareaRef)}
       class=${cvaTextArea({
       error: !this.disabled && this.error,
       resize: this.resizable

package/dist/cjs-dev/components/text-area/daikin-text-area.d.cts

@@ -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/cjs-dev/components/text-field/daikin-text-field.cjs

@@ -4,6 +4,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 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");
@@ -143,6 +144,15 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
     this._label = null;
     this._hasLeftSlot = false;
     this._hasRightSlot = false;
+    this._inputRef = ref_js.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));
@@ -329,6 +339,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
     const role = this.type === "number" ? "spinbutton" : void 0;
     const inputMode = this.type === "number" ? "numeric" : void 0;
     return lit.html`<input
+        ${ref_js.ref(this._inputRef)}
         class=${cvaInput({
       error,
       leftIcon: this._hasLeftSlot,

package/dist/cjs-dev/components/text-field/daikin-text-field.d.cts

@@ -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/cjs-dev/components/text-masked-field/daikin-text-masked-field.cjs

@@ -167,6 +167,14 @@ exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormEleme
   _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 lit.html`<span
         class=${cvaIcon({

package/dist/cjs-dev/components/text-masked-field/daikin-text-masked-field.d.cts

@@ -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/cjs-dev/components/time-picker/daikin-time-picker.cjs

@@ -475,6 +475,14 @@ exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSForm
       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 lit.html`<div
       role="group"

package/dist/cjs-dev/components/time-picker/daikin-time-picker.d.cts

@@ -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/cjs-dev/components/toggle/daikin-toggle.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");
@@ -58,6 +59,15 @@ exports.DaikinToggle = class DaikinToggle extends ddsFormElement.DDSFormElement
     super(...arguments);
     this.checked = false;
     this.disabled = false;
+    this._inputRef = ref_js.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);
@@ -69,6 +79,7 @@ exports.DaikinToggle = class DaikinToggle extends ddsFormElement.DDSFormElement
   }
   render() {
     return lit.html`<input
+      ${ref_js.ref(this._inputRef)}
       class=${TOGGLE_CLASS_NAME}
       type="checkbox"
       name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}

package/dist/cjs-dev/components/toggle/daikin-toggle.d.cts

@@ -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/cjs-dev/components/tree-item/daikin-tree-item.cjs

@@ -32,6 +32,7 @@ const cvaTreeChildren = classVarianceAuthority.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",