@daikin-oss/design-system-web-components 1.4.1 → 1.5.0

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

@@ -9,7 +9,7 @@ import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { tryParseDateFromProperty, parseDateFromProperty, cloneDate, isMonthOutOfRange, getDateByMonthOffsetClamped, formatDateForProperty, clampDate, isSameYearMonth, createDateClamped, calcWeeksOnCalendar, toFirstDayOfMonth, isDateOutOfRange, cvaIconButton, normalizeDate, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from "../../utils/calendar-common.js";
+import { tryParseDateFromProperty, parseDateFromProperty, cloneDate, isMonthOutOfRange, getDateByMonthOffsetClamped, formatDateForProperty, clampDate, isSameYearMonth, createDateClamped, calcWeeksOnCalendar, toFirstDayOfMonth, isDateOutOfRange, cvaIconButton, getTodayForProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from "../../utils/calendar-common.js";
 import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
 import "../icon-button/daikin-icon-button.js";
 var __defProp = Object.defineProperty;
@@ -52,18 +52,18 @@ const cvaContentButton = cva(
     "justify-center",
     "rounded-full",
     "text-sm",
-    "outline",
+    "outline-solid",
     "outline-2",
     "outline-offset-2",
     "outline-transparent",
     "focus-visible:outline-ddt-color-common-border-focus",
-    "enabled:bg-[var(--color-primary)]",
+    "enabled:bg-(--color-primary)",
     "disabled:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       date: {
-        false: ["w-[calc((100%_-_3rem)/3)]", "h-8", "px-2"],
+        false: ["w-[calc((100%-3rem)/3)]", "h-8", "px-2"],
         true: ["size-8"]
       },
       variant: {
@@ -71,14 +71,14 @@ const cvaContentButton = cva(
           "enabled:text-ddt-color-common-neutral-default",
           "enabled:hover:text-ddt-color-common-neutral-hover",
           "enabled:active:text-ddt-color-common-neutral-press",
-          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
-          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+          "enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
         ],
         selected: [
           "enabled:text-ddt-color-common-text-inverse",
-          "var-color-ddt-color-common-brand-default/color-primary",
-          "hover:var-color-ddt-color-common-brand-hover/color-primary",
-          "active:var-color-ddt-color-common-brand-press/color-primary"
+          "[--color-primary:var(--dds-color-common-brand-default)]",
+          "hover:[--color-primary:var(--dds-color-common-brand-hover)]",
+          "active:[--color-primary:var(--dds-color-common-brand-press)]"
         ],
         today: [
           "enabled:text-ddt-color-common-neutral-default",
@@ -86,15 +86,15 @@ const cvaContentButton = cva(
           "enabled:active:text-ddt-color-common-neutral-press",
           "enabled:border",
           "enabled:border-ddt-color-common-neutral-default",
-          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
-          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+          "enabled:hover:[--color-primary:var(--dds-color-common-surface-neutral-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-surface-neutral-press)]"
         ]
       }
     }
   }
 );
 function getToday() {
-  return normalizeDate(/* @__PURE__ */ new Date());
+  return parseDateFromProperty(getTodayForProperty());
 }
 function getNextFocusDateByKey(date, event) {
   const cloned = cloneDate(date);
@@ -448,7 +448,7 @@ let DaikinCalendar = class extends DDSElement {
       day: this._createDatePicker
     }[view].call(this, renderState);
     return html`<div
-      class="flex items-stretch flex-col gap-2 w-[17.5rem] h-max pt-3 bg-ddt-color-common-background-default outline outline-1 -outline-offset-1 outline-ddt-color-divider rounded font-daikinSerif"
+      class="flex items-stretch flex-col gap-2 w-70 h-max pt-3 bg-ddt-color-common-background-default outline-solid outline-1 -outline-offset-1 outline-ddt-color-divider rounded-sm font-daikinSerif"
     >
       <div class="flex justify-between items-center pl-4 pr-3">
         <div class="flex items-center gap-2">

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

@@ -5,6 +5,7 @@ import { DDSElement } from "../../base/index.js";
  * Hierarchy:
  * - `daikin-card` > `daikin-card-header`
  * - `daikin-card` > `daikin-card-footer`
+ * - `daikin-card` > `daikin-empty-state`
  *
  * @slot - A slot for card header, body, card footer. Place `daikin-card-header`, custom body content, `daikin-card-footer` here in order.
  *

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

@@ -33,8 +33,8 @@ const cvaButton = cva(
   {
     variants: {
       intent: {
-        previous: ["i-daikin-chevron-left"],
-        next: ["i-daikin-chevron-right"]
+        previous: ["icon-[daikin--chevron-left]"],
+        next: ["icon-[daikin--chevron-right]"]
       }
     }
   }
@@ -56,7 +56,7 @@ const INDICATOR_CLASS_NAME = cva([
   "aria-selected:after:bg-ddt-color-common-brand-default",
   "aria-selected:after:absolute",
   "aria-selected:after:rounded-full",
-  "aria-selected:focus-visible:after:outline",
+  "aria-selected:focus-visible:after:outline-solid",
   "aria-selected:focus-visible:after:outline-1",
   "aria-selected:focus-visible:after:outline-offset-1",
   "aria-selected:focus-visible:after:outline-ddt-color-common-border-focus"
@@ -153,11 +153,11 @@ let DaikinCarousel = class extends DDSElement {
           <span class=${cvaButton({ intent: "previous" })}></span>
         </daikin-icon-button>
         <div
-          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus [container-type:inline-size]"
+          class="w-full overflow-clip relative focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus @container"
           aria-live="polite"
         >
           <div
-            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-(--ddc-transition-duration)"
           >
             <slot
               class="slotted:w-[calc(100%/var(--total))]"

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

@@ -22,41 +22,41 @@ const CHECKBOX_CLASS_NAME = cva([
   "size-4",
   "border-ddt-color-common-neutral-default",
   "border-2",
-  "rounded-sm",
+  "rounded-xs",
   "relative",
   "appearance-none",
   "before:text-ddt-color-common-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
-  "checked:before:i-daikin-checkbox-checked",
+  "checked:before:icon-[daikin--checkbox-checked]",
   "checked:before:size-3",
-  "indeterminate:before:i-daikin-checkbox-indeterminate",
+  "indeterminate:before:icon-[daikin--checkbox-indeterminate]",
   "indeterminate:before:size-2.5",
-  "focus-visible:outline",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:group-hover:border-ddt-color-common-neutral-hover",
-  "enabled:group-hover:bg-ddt-color-common-surface-hover",
-  "enabled:group-active:border-ddt-color-common-neutral-press",
-  "enabled:group-active:bg-ddt-color-common-surface-press",
+  "group-hover:enabled:border-ddt-color-common-neutral-hover",
+  "group-hover:enabled:bg-ddt-color-common-surface-hover",
+  "group-active:enabled:border-ddt-color-common-neutral-press",
+  "group-active:enabled:bg-ddt-color-common-surface-press",
   "enabled:checked:border-ddt-color-common-brand-default",
   "enabled:checked:bg-ddt-color-common-brand-default",
-  "enabled:checked:group-hover:bg-ddt-color-common-brand-hover",
-  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
-  "enabled:checked:group-hover:before:text-ddt-color-common-text-inverse",
-  "enabled:checked:group-active:bg-ddt-color-common-brand-press",
-  "enabled:checked:group-active:border-ddt-color-common-brand-press",
-  "enabled:checked:group-active:before:text-ddt-color-common-text-inverse",
+  "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
+  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+  "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
+  "group-active:checked:enabled:bg-ddt-color-common-brand-press",
+  "group-active:checked:enabled:border-ddt-color-common-brand-press",
+  "group-active:checked:enabled:before:text-ddt-color-common-text-inverse",
   "enabled:indeterminate:bg-ddt-color-common-brand-default",
   "enabled:indeterminate:border-ddt-color-common-brand-default",
-  "enabled:indeterminate:group-hover:bg-ddt-color-common-brand-hover",
-  "enabled:indeterminate:group-hover:border-ddt-color-common-brand-hover",
-  "enabled:indeterminate:group-hover:before:text-ddt-color-common-text-inverse",
-  "enabled:indeterminate:group-active:bg-ddt-color-common-brand-press",
-  "enabled:indeterminate:group-active:border-ddt-color-common-brand-press",
-  "enabled:indeterminate:group-active:before:text-ddt-color-common-text-inverse",
+  "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
+  "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
+  "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
+  "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
+  "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
+  "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
   "disabled:border-ddt-color-common-disabled",
   "disabled:bg-ddt-color-common-text-inverse",
   "disabled:checked:bg-ddt-color-common-disabled",

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

@@ -2,7 +2,7 @@ import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 declare const cvaCheckboxGroup: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type CheckboxGroupProps = MergeVariantProps<typeof cvaCheckboxGroup>;
 /**

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

@@ -2,7 +2,12 @@ import { DDSElement } from "../../base/index.js";
 /**
  * A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.
  *
- * @fires remove - A custom event emitted when a user clicks the remove button.
+ * @fires remove - When type is "input", a custom event emitted when a user clicks the remove button.
+ * @fires before-select - When type is "filter", a cancelable custom event emitted before changing the selected state of a filter type chip. Listeners can call `event.preventDefault()` to prevent the state change.
+ * @fires select - When type is "filter", a custom event emitted after the selected state of a filter type chip has changed. The new selected state is provided in `event.detail.checked`.
+ *
+ * @slot - A slot for the chip content.
+ * @slot left-icon - When type is "input", a slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *
@@ -17,14 +22,51 @@ import { DDSElement } from "../../base/index.js";
 export declare class DaikinChip extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Provides an accessible name of the chip.
+     * Type of the chip.
+     *
+     * @default "input"
+     */
+    type: "input" | "filter";
+    /**
+     * Specify the variant of the chip when type is "input".
+     *
+     * @default "outline"
+     */
+    variant: "fill" | "outline";
+    /**
+     * Specify the chip is selected when type is "filter".
+     */
+    checked: boolean;
+    /**
+     * Specify the chip disabled state when type is "filter".
+     */
+    disabled: boolean;
+    /**
+     * Specify the chip with a left checked icon when type is "filter".
+     */
+    withCheckedIcon: boolean;
+    /**
+     * Provides an accessible name of the chip when type is "input".
      */
     chipAriaLabel: string | null;
     private _focusableElement;
     private _handleRemoveClick;
+    /**
+     * Emits `before-select` event if necessary and returns whether we should proceed.
+     *
+     * 1. Emit "before-select" event.
+     * 2. Check and return whether the event is canceled.
+     *
+     * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+     */
+    private _emitBeforeSelect;
+    /**
+     * Handles "click" event emitted by `daikin-chip` component when "filter" type is used.
+     */
+    private _handleChipClick;
     render(): import('lit-html').TemplateResult<1>;
     /**
-     * Focuses on the inner remove button
+     * Focuses on the inner remove button or the chip button depending on the type.
      * @param options focus options
      */
     focus(options?: FocusOptions): void;

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

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -18,71 +18,255 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaWrapper = cva([
-  "flex",
-  "items-center",
-  "rounded-[100px]",
-  "overflow-hidden",
-  "size-full",
-  "border",
-  "px-1",
-  "border-ddt-color-common-neutral-default"
-]);
-const cvaRemoveButton = cva([
-  "w-4",
-  "h-4",
-  "flex",
-  "items-center",
-  "justify-center",
-  "rounded-full",
-  "overflow-hidden",
-  "focus-visible:outline",
-  "focus-visible:outline-2",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:var-color-ddt-color-common-neutral-default/color-primary",
-  "enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
-  "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
-  "enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
-  "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary",
-  "text-[--color-primary]",
-  "bg-[--color-secondary]"
-]);
+const cvaInputChipWrapper = cva(
+  [
+    "flex",
+    "items-center",
+    "rounded-full",
+    "size-full",
+    "border",
+    "py-0.5",
+    "px-1"
+  ],
+  {
+    variants: {
+      variant: {
+        fill: [
+          "border-ddt-color-common-brand-default",
+          "bg-ddt-color-common-brand-default"
+        ],
+        outline: ["border-ddt-color-common-neutral-default"]
+      }
+    }
+  }
+);
+const cvaInputChipIcon = cva(["icon-size-4", "slotted:flex-none"], {
+  variants: {
+    variant: {
+      fill: ["text-ddt-color-common-text-inverse"],
+      outline: ["text-ddt-color-common-text-primary"]
+    }
+  }
+});
+const cvaInputChipText = cva(
+  [
+    "text-sm",
+    "font-daikinSerif",
+    "leading-[130%]",
+    "px-1",
+    "mr-0.5",
+    "overflow-hidden",
+    "whitespace-nowrap",
+    "flex-1"
+  ],
+  {
+    variants: {
+      variant: {
+        fill: ["text-ddt-color-common-text-inverse"],
+        outline: ["text-ddt-color-common-text-primary"]
+      }
+    }
+  }
+);
+const cvaRemoveButton = cva(
+  [
+    "flex-none",
+    "relative",
+    "w-4",
+    "h-4",
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "text-(--color-primary)",
+    "bg-(--color-secondary)",
+    "after:absolute",
+    "after:bg-transparent",
+    "after:size-6",
+    "after:top-1/2",
+    "after:left-1/2",
+    "after:-translate-x-1/2",
+    "after:-translate-y-1/2",
+    "after:rounded-full"
+  ],
+  {
+    variants: {
+      variant: {
+        fill: [
+          "text-ddt-color-common-text-inverse",
+          "focus-visible:outline-ddt-color-common-border-inverse",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]"
+        ],
+        outline: [
+          "text-ddt-color-common-neutral-default",
+          "focus-visible:outline-ddt-color-common-border-focus",
+          "enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+          "enabled:hover:[--color-primary:var(--dds-color-common-neutral-hover)]",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-neutral-press)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
+        ]
+      }
+    }
+  }
+);
+const cvaFilterChipWrapper = cva(
+  [
+    "flex",
+    "items-center",
+    "rounded-full",
+    "overflow-hidden",
+    "size-full",
+    "border",
+    "py-0.5",
+    "px-1",
+    "min-h-6",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "text-(--color-primary)",
+    "bg-(--color-secondary)",
+    "border-(--color-tertiary)"
+  ],
+  {
+    variants: {
+      checked: {
+        true: [
+          "enabled:[--color-primary:var(--dds-color-common-text-inverse)]",
+          "enabled:[--color-secondary:var(--dds-color-common-brand-default)]",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]",
+          "enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
+          "enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
+          "disabled:[--color-primary:var(--dds-color-common-text-inverse)]",
+          "disabled:[--color-secondary:var(--dds-color-common-disabled)]",
+          "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
+        ],
+        false: [
+          "focus-visible:outline-ddt-color-common-border-focus",
+          "enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+          "enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
+          "enabled:hover:[--color-primary:var(--dds-color-common-brand-hover)]",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+          "enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-brand-press)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-surface-brand-press)]",
+          "enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
+          "disabled:[--color-primary:var(--dds-color-common-disabled)]",
+          "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
+        ]
+      }
+    }
+  }
+);
+const cvaFilterChipText = cva(
+  ["text-sm", "font-daikinSerif", "leading-[130%]", "px-1", "mr-0.5"],
+  {
+    variants: {
+      checked: {
+        true: ["text-ddt-color-common-text-inverse"],
+        false: ["text-(--color-primary)"]
+      }
+    }
+  }
+);
 let DaikinChip = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this.checked = false;
+    this.disabled = false;
+    this.withCheckedIcon = false;
     this.chipAriaLabel = null;
   }
   _handleRemoveClick(event) {
     event.stopPropagation();
     this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
   }
+  /**
+   * Emits `before-select` event if necessary and returns whether we should proceed.
+   *
+   * 1. Emit "before-select" event.
+   * 2. Check and return whether the event is canceled.
+   *
+   * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+   */
+  _emitBeforeSelect() {
+    return this.dispatchEvent(
+      new CustomEvent("before-select", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+  }
+  /**
+   * Handles "click" event emitted by `daikin-chip` component when "filter" type is used.
+   */
+  _handleChipClick(event) {
+    event.stopImmediatePropagation();
+    if (!this._emitBeforeSelect()) {
+      return;
+    }
+    this.checked = !this.checked;
+    this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: { checked: this.checked },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   render() {
-    return html`
-      <div
-        role="group"
-        class=${cvaWrapper()}
-        aria-label=${ifDefined(this.chipAriaLabel)}
-      >
-        <slot
-          name="left-icon"
-          class="icon-size-4 text-ddt-color-common-text-primary"
-        ></slot>
-        <span class="text-ddt-color-common-text-primary px-1 mr-[2px]">
-          <slot></slot>
-        </span>
-        <button
+    switch (this.type) {
+      case "input":
+        return html`
+          <div
+            role="group"
+            class=${cvaInputChipWrapper({ variant: this.variant })}
+            aria-label=${ifDefined(this.chipAriaLabel)}
+          >
+            <slot
+              name="left-icon"
+              class=${cvaInputChipIcon({ variant: this.variant })}
+            ></slot>
+            <span class=${cvaInputChipText({ variant: this.variant })}>
+              <slot></slot>
+            </span>
+            <button
+              type="button"
+              class=${cvaRemoveButton({ variant: this.variant })}
+              aria-label="Remove"
+              @click=${this._handleRemoveClick}
+            >
+              <span
+                class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
+              ></span>
+            </button>
+          </div>
+        `;
+      case "filter":
+        return html`<button
           type="button"
-          class=${cvaRemoveButton()}
-          aria-label="Remove"
-          @click=${this._handleRemoveClick}
+          class=${cvaFilterChipWrapper({ checked: this.checked })}
+          aria-pressed=${this.checked}
+          ?disabled=${this.disabled}
+          @click=${this._handleChipClick}
         >
-          <span class="i-daikin-close text-[--color-primary]"></span>
-        </button>
-      </div>
-    `;
+          ${this.withCheckedIcon && this.checked ? html`<span
+                class="icon-[daikin--check] text-(--color-primary) size-4 flex-none"
+              ></span>` : nothing}
+          <span class=${cvaFilterChipText({ checked: this.checked })}>
+            <slot></slot>
+          </span>
+        </button>`;
+    }
   }
   /**
-   * Focuses on the inner remove button
+   * Focuses on the inner remove button or the chip button depending on the type.
    * @param options focus options
    */
   focus(options) {
@@ -96,8 +280,34 @@ DaikinChip.styles = css`
     :host {
       display: inline-flex;
       width: max-content;
+      vertical-align: middle;
     }
   `;
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "input",
+    isAllowedValue: oneOf(["input", "filter"])
+  })
+], DaikinChip.prototype, "type", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "outline",
+    isAllowedValue: oneOf(["fill", "outline"])
+  })
+], DaikinChip.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinChip.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinChip.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "with-checked-icon" })
+], DaikinChip.prototype, "withCheckedIcon", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "chip-aria-label" })
 ], DaikinChip.prototype, "chipAriaLabel", 2);