@daikin-oss/design-system-web-components 1.2.0 → 1.3.0-next.2

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

@@ -1,11 +1,13 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { iconRegistry } from "../../icon-registry.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { icons } from "./icons.json.js";
+import iconsJson from "./icons.json.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,47 +18,164 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const iconList = Object.keys(icons);
-const iconClassMap = Object.fromEntries(
-  Object.entries(icons).map(([name, object]) => [name, object.class])
+const { icons } = iconsJson;
+const iconList = Object.keys(icons).filter(
+  (key) => key !== "logo-positive" && key !== "logo-negative"
 );
-const cvaIcon = cva(["block"], {
+function svgToDataUrl(svg) {
+  const encoded = encodeURIComponent(svg).replaceAll("'", "%27");
+  return `url("data:image/svg+xml,${encoded}")`;
+}
+const cvaIcon = cva(["inline-flex size-full"], {
   variants: {
-    icon: iconClassMap,
     color: {
       black: ["text-ddt-color-common-background-overlay"],
       white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
+    },
+    mode: {
+      inline: [],
+      mask: [
+        "bg-current",
+        "[mask-size:100%_100%]",
+        "[-webkit-mask-size:100%_100%]",
+        "[mask-repeat:no-repeat]",
+        "[-webkit-mask-repeat:no-repeat]",
+        "[mask-image:var(--svg)]",
+        "[-webkit-mask-image:var(--svg)]"
+      ],
+      background: [
+        "bg-no-repeat",
+        "bg-[length:100%_100%]",
+        "bg-[image:var(--svg)]"
+      ],
+      static: []
+      // for static icons from icons.json
     }
   }
 });
 let DaikinIcon = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this.registry = iconRegistry;
     this.icon = null;
     this.color = "default";
     this.size = "current";
+    this._iconData = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadIcon().catch((error) => {
+      {
+        console.warn(
+          `Error loading icon${this.icon ? ` "${this.icon}"` : ""} in <${this.tagName.toLowerCase()}>:`,
+          error
+        );
+      }
+    });
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("icon")) {
+      this.loadIcon().catch((error) => {
+        {
+          console.warn(
+            `Error loading icon${this.icon ? ` "${this.icon}"` : ""} in <${this.tagName.toLowerCase()}>:`,
+            error
+          );
+        }
+      });
+    }
+  }
+  async loadIcon() {
+    if (!this.icon) {
+      this._iconData = null;
+      return;
+    }
+    const staticIcon = icons[this.icon];
+    if (staticIcon) {
+      this._iconData = {
+        mode: "static",
+        defaultColor: staticIcon.color,
+        class: staticIcon.class
+      };
+      return;
+    }
+    try {
+      const iconData = await this.registry.getIcon(this.icon);
+      if (true) {
+        if (!iconData) {
+          console.warn(`Icon "${this.icon}" not found in registry`);
+        }
+      }
+      this._iconData = iconData;
+    } catch (error) {
+      {
+        console.warn(`Failed to load custom icon "${this.icon}":`, error);
+      }
+      this._iconData = null;
+    }
   }
   render() {
-    var _a;
-    const defaultColor = (_a = icons[this.icon ?? ""]) == null ? void 0 : _a.color;
     {
       if (!this.icon) {
-        console.warn("icon property is not specified");
-      } else if (!(this.icon in icons)) {
-        console.warn(`There is no icon named "${this.icon}".`);
-      } else if (this.color === "default" && !defaultColor) {
+        console.warn("icon property is not specified for daikin-icon");
+      }
+    }
+    if (!this.icon) {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })}
+        title="Unknown icon"
+      ></span>`;
+    }
+    if (!this._iconData) {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode: "inline"
+      })}
+        title=${this.icon || "Unknown icon"}
+      ></span>`;
+    }
+    const defaultColor = this._iconData.defaultColor;
+    {
+      if (this.color === "default" && !defaultColor) {
         console.warn(`The icon "${this.icon}" does not have a default color.`);
       }
     }
+    if (this._iconData.mode === "static") {
+      return html`<span
+        class="${cvaIcon({
+        color: this.color,
+        mode: "static"
+      })} ${this._iconData.class}"
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+      ></span>`;
+    }
+    const mode = this._iconData.mode ?? "mask";
+    if (mode === "inline") {
+      return html`<span
+        class=${cvaIcon({
+        color: this.color,
+        mode
+      })}
+        style=${`--default-color:${defaultColor ?? "#000000"}`}
+        role="presentation"
+        >${unsafeHTML(this._iconData.svg)}</span
+      >`;
+    }
+    const svgDataUrl = svgToDataUrl(this._iconData.svg);
     return html`<span
       class=${cvaIcon({
-      icon: this.icon,
-      color: this.color
+      color: this.color,
+      mode
     })}
-      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      style=${`--default-color:${defaultColor ?? "#000000"};--svg:${svgDataUrl}`}
       role="presentation"
     ></span>`;
   }
@@ -65,7 +184,7 @@ DaikinIcon.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
       width: var(--ddc-icon-size, 100%);
       height: var(--ddc-icon-size, 100%);
     }
@@ -86,6 +205,9 @@ DaikinIcon.styles = css`
       --ddc-icon-size: 24px;
     }
   `;
+__decorateClass([
+  property({ attribute: false })
+], DaikinIcon.prototype, "registry", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "icon", 2);
@@ -95,6 +217,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIcon.prototype, "size", 2);
+__decorateClass([
+  state()
+], DaikinIcon.prototype, "_iconData", 2);
 DaikinIcon = __decorateClass([
   ddsElement("daikin-icon")
 ], DaikinIcon);

package/dist/es-dev/components/icon/icons.json.d.ts

@@ -63,18 +63,6 @@ declare const _default: {
     "sort": {
       "class": "i-daikin-sort",
       "color": null
-    },
-    "negative": {
-      "class": "i-daikin-error",
-      "color": null
-    },
-    "positive": {
-      "class": "i-daikin-success",
-      "color": null
-    },
-    "cross": {
-      "class": "i-daikin-close",
-      "color": null
     }
   }
 }

package/dist/es-dev/components/icon/icons.json.js

@@ -1,4 +1,8 @@
-const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null } };
+const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null } };
+const iconsJson = {
+  icons
+};
 export {
+  iconsJson as default,
   icons
 };

package/dist/es-dev/components/icon-button/daikin-icon-button.d.ts

@@ -75,6 +75,14 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
      * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
     buttonAriaExpanded: boolean | null;
+    /**
+     * Size of the button.
+     * - `s`: 32px * 32px
+     * - `m`: 48px * 48px
+     *
+     * Default is `s`.
+     */
+    size: "s" | "m";
     private _button;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/es-dev/components/icon-button/daikin-icon-button.js

@@ -87,6 +87,7 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
     this.buttonRole = null;
     this.buttonAriaHaspopup = null;
     this.buttonAriaExpanded = null;
+    this.size = "s";
     this.addEventListener("click", (event) => {
       if (this.disabled) {
         event.stopImmediatePropagation();
@@ -144,8 +145,14 @@ DaikinIconButton.styles = css`
 
     :host {
       display: inline-block;
-      width: 2rem;
-      height: 2rem;
+      width: var(--ddc-icon-button-size, 2rem);
+      height: var(--ddc-icon-button-size, 2rem);
+    }
+    :host([size="s"]) {
+      --ddc-icon-button-size: 2rem; /* 32px */
+    }
+    :host([size="m"]) {
+      --ddc-icon-button-size: 3rem; /* 48px */
     }
   `;
 __decorateClass([
@@ -175,6 +182,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
 ], DaikinIconButton.prototype, "buttonAriaExpanded", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   query("button")
 ], DaikinIconButton.prototype, "_button", 2);

package/dist/es-dev/components/index.d.ts

@@ -12,6 +12,8 @@ export * from "./carousel/index.js";
 export * from "./carousel-item/index.js";
 export * from "./checkbox/index.js";
 export * from "./checkbox-group/index.js";
+export * from "./chip/index.js";
+export * from "./combobox/index.js";
 export * from "./date-picker/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
@@ -33,6 +35,7 @@ export * from "./progress-bar/index.js";
 export * from "./progress-indicator/index.js";
 export * from "./progress-indicator-item/index.js";
 export * from "./radio/index.js";
+export * from "./radio-group/index.js";
 export * from "./select/index.js";
 export * from "./slider/index.js";
 export * from "./tab/index.js";
@@ -43,6 +46,8 @@ export * from "./table-header-cell/index.js";
 export * from "./tabs/index.js";
 export * from "./text-area/index.js";
 export * from "./text-field/index.js";
+export * from "./text-masked-field/index.js";
+export * from "./time-picker/index.js";
 export * from "./toast-notification/index.js";
 export * from "./toast-notification-manager/index.js";
 export * from "./toggle/index.js";

package/dist/es-dev/components/index.js

@@ -12,6 +12,8 @@ import { DaikinCarousel } from "./carousel/daikin-carousel.js";
 import { DaikinCarouselItem } from "./carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
 import { DaikinCheckboxGroup } from "./checkbox-group/daikin-checkbox-group.js";
+import { DaikinChip } from "./chip/daikin-chip.js";
+import { DaikinCombobox, defaultFilterFn } from "./combobox/daikin-combobox.js";
 import { DaikinDatePicker } from "./date-picker/daikin-date-picker.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
@@ -33,6 +35,7 @@ import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./progress-indicator/daikin-progress-indicator.js";
 import { DaikinProgressIndicatorItem } from "./progress-indicator-item/daikin-progress-indicator-item.js";
 import { DaikinRadio } from "./radio/daikin-radio.js";
+import { DaikinRadioGroup } from "./radio-group/daikin-radio-group.js";
 import { DaikinSelect } from "./select/daikin-select.js";
 import { DaikinSlider } from "./slider/daikin-slider.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
@@ -43,6 +46,8 @@ import { DaikinTableHeaderCell } from "./table-header-cell/daikin-table-header-c
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
 import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
+import { DaikinTextMaskedField } from "./text-masked-field/daikin-text-masked-field.js";
+import { DaikinTimePicker, calcDigitInput, formatPartsForUI, formatTimeForUI, from24HourFormat, getTimeItemInSelection, isTimeOutOfRange, isValidValueTime, parsePartsFromUIValue, to24HourFormat, tryParseTimeFromUIValue } from "./time-picker/daikin-time-picker.js";
 import { DaikinToastNotification } from "./toast-notification/daikin-toast-notification.js";
 import { DaikinToastNotificationManager } from "./toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
@@ -65,6 +70,8 @@ export {
   DaikinCarouselItem,
   DaikinCheckbox,
   DaikinCheckboxGroup,
+  DaikinChip,
+  DaikinCombobox,
   DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
@@ -86,6 +93,7 @@ export {
   DaikinProgressIndicator,
   DaikinProgressIndicatorItem,
   DaikinRadio,
+  DaikinRadioGroup,
   DaikinSelect,
   DaikinSlider,
   DaikinTab,
@@ -96,6 +104,8 @@ export {
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,
+  DaikinTextMaskedField,
+  DaikinTimePicker,
   DaikinToastNotification,
   DaikinToastNotificationManager,
   DaikinToggle,
@@ -103,6 +113,17 @@ export {
   DaikinTree,
   DaikinTreeItem,
   DaikinTreeSection,
+  calcDigitInput,
   cvaTreeChildren,
-  iconList
+  defaultFilterFn,
+  formatPartsForUI,
+  formatTimeForUI,
+  from24HourFormat,
+  getTimeItemInSelection,
+  iconList,
+  isTimeOutOfRange,
+  isValidValueTime,
+  parsePartsFromUIValue,
+  to24HourFormat,
+  tryParseTimeFromUIValue
 };

package/dist/es-dev/components/input-group/daikin-input-group.d.ts

@@ -5,12 +5,15 @@ import { DDSElement } from "../../base/index.js";
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
+ * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
+ * - `daikin-input-group` > `daikin-combobox`
  * - `daikin-input-group` > `daikin-date-picker`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
  * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-text-area`
  * - `daikin-input-group` > `daikin-text-field`
+ * - `daikin-input-group` > `daikin-time-picker`
  *
  * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
@@ -19,14 +22,43 @@ import { DDSElement } from "../../base/index.js";
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
  * <!-- Import the following as necessary. -->
+ * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
  * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
- * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/select/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-area/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
+ * import "@daikin-oss/design-system-web-components/components/time-picker/index.js";
+ * ```
+ *
+ * With Checkbox Group:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-checkbox-group>
+ *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ *   </daikin-checkbox-group>
+ * </daikin-input-group>
+ * ```
+ *
+ * With Combobox:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-combobox></daikin-combobox>
+ * </daikin-input-group>
+ *
+ * <script>
+ *   const combobox = document.querySelector("daikin-combobox");
+ *   combobox.items = ["Apple", "Banana", "Cherry"];
+ * </script>
  * ```
  *
  * With Date Picker:
@@ -67,18 +99,6 @@ import { DDSElement } from "../../base/index.js";
  * </daikin-input-group>
  * ```
  *
- * With Checkbox Group:
- *
- * ```html
- * <daikin-input-group>
- *   <daikin-checkbox-group>
- *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
- *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
- *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
- *   </daikin-checkbox-group>
- * </daikin-input-group>
- * ```
- *
  * With Select:
  *
  * ```html
@@ -108,6 +128,13 @@ import { DDSElement } from "../../base/index.js";
  *   <daikin-text-area value="Content of TextArea"></daikin-text-area>
  * </daikin-input-group>
  * ```
+ *
+ * With Time Picker:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-time-picker></daikin-time-picker>
+ * </daikin-input-group>
  * ```
  */
 export declare class DaikinInputGroup extends DDSElement {

package/dist/es-dev/components/input-group/daikin-input-group.js

@@ -182,7 +182,7 @@ __decorateClass([
 ], DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   queryAssignedElements({
-    selector: "daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-checkbox-group,daikin-select,daikin-text-field,daikin-text-area"
+    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"
   })
 ], DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

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

@@ -53,7 +53,7 @@ const WRAPPER = cva([
   "relative",
   "break-all"
 ])();
-const cvaIcon = cva(["icon-size-6"], {
+const cvaIcon = cva(["icon-size-6", "slotted:flex-none"], {
   variants: {
     position: {
       left: [],
@@ -95,7 +95,7 @@ let DaikinListItem = class extends DDSElement {
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}
       >
-        <span class="block -ml-1"></span>
+        <span class="flex-none block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;

package/dist/es-dev/components/modal-header/daikin-modal-header.js

@@ -29,7 +29,7 @@ const cvaTitle = cva([
 ])();
 const cvaDescription = cva([
   "flex-none",
-  "text-ddt-color-common-text-secondary",
+  "text-ddt-color-common-text-primary",
   "font-daikinSerif",
   "text-base",
   "leading-normal",

package/dist/es-dev/components/progress-bar/daikin-progress-bar.js

@@ -81,9 +81,9 @@ const cvaBarContainer = cva(
 const cvaHelper = cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
-      inprogress: ["text-ddt-color-common-text-primary"],
-      completed: ["text-ddt-color-common-text-primary"],
-      indeterminate: ["text-ddt-color-common-text-primary"],
+      inprogress: ["text-ddt-color-common-text-secondary"],
+      completed: ["text-ddt-color-common-text-secondary"],
+      indeterminate: ["text-ddt-color-common-text-secondary"],
       error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {

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

@@ -21,7 +21,7 @@ const cvaSelect = cva(
     "w-full",
     "h-full",
     "relative",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:w-6",
     "after:h-6",
     "after:m-auto",
@@ -148,6 +148,11 @@ DaikinSelect.styles = css`
       background: transparent;
     }
 
+    ::slotted(select) {
+      background-color: var(--dds-color-common-surface-default) !important;
+      color: var(--ddt-color-common-text-primary) !important;
+    }
+
     ${unsafeCSS(tailwindStyles)}
 
     :host {

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

@@ -90,6 +90,7 @@ let DaikinTab = class extends DDSElement {
   render() {
     return html`
       <button
+        type="button"
         class=${cvaTab({ active: this.active })}
         ?disabled=${this.disabled}
         role="tab"