@daikin-oss/design-system-web-components 0.4.0 → 0.5.0

package/dist/es/components/index.js

@@ -4,18 +4,23 @@ import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
+import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
+import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
 import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
 import { DaikinInputGroup } from "./input-group/daikin-input-group.js";
 import { DaikinList } from "./list/daikin-list.js";
 import { DaikinListItem } from "./list-item/daikin-list-item.js";
 import { DaikinNotification } from "./notification/daikin-notification.js";
 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 { DaikinSelect } from "./select/daikin-select.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
 import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
-import { DaikinTextInput } from "./text-input/daikin-text-input.js";
-import { DaikinTextarea } from "./textarea/daikin-textarea.js";
+import { DaikinTextArea } from "./text-area/daikin-text-area.js";
+import { DaikinTextField } from "./text-field/daikin-text-field.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
 export {
@@ -25,18 +30,23 @@ export {
   DaikinBreadcrumbItem,
   DaikinButton,
   DaikinCheckbox,
+  DaikinDropdown,
+  DaikinDropdownItem,
   DaikinIcon,
   DaikinInputGroup,
   DaikinList,
   DaikinListItem,
   DaikinNotification,
   DaikinProgressBar,
+  DaikinProgressIndicator,
+  DaikinProgressIndicatorItem,
   DaikinRadio,
+  DaikinSelect,
   DaikinTab,
   DaikinTabPanels,
   DaikinTabs,
-  DaikinTextInput,
-  DaikinTextarea,
+  DaikinTextArea,
+  DaikinTextField,
   DaikinToggle,
   DaikinTooltip,
   iconList

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

@@ -1,71 +1,109 @@
 import { LitElement } from 'lit';
-import { DaikinTextInput } from '../text-input/daikin-text-input';
-import { DaikinTextarea } from '../textarea/daikin-textarea';
-type ControlElement = DaikinTextInput | DaikinTextarea;
 /**
- * The input group component serves as a wrapper for a `daikin-text-input` or `daikin-textarea` component, providing additional elements such as labels, helper texts, or a counter.
+ * The input group component serves as a wrapper for an input control component (full list below), providing additional elements such as label text, helper text, or a counter.
  * It enhances the user experience by associating supplementary information or functionality directly with the input field.
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
- * - `daikin-input-group` > `daikin-text-input`
- * - `daikin-input-group` > `daikin-textarea`
+ * - `daikin-input-group` > `daikin-select`
+ * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
+ * - `daikin-input-group` > `daikin-text-area`
+ * - `daikin-input-group` > `daikin-text-field`
+ * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  *
- * @slot - A slot for a input component. Place a `daikin-text-input` or `daikin-textarea` element here.
+ * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
  * @example
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
- * import "@daikin-oss/design-system-web-components/components/text-input/index.js";
- * import "@daikin-oss/design-system-web-components/components/textarea/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";
  * ```
  *
- * With Text Input:
+ * With Dropdown:
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-text-input value="Content of Text Input"></daikin-text-input>
+ *   <daikin-dropdown value="Value of Dropdown">
+ *     <daikin-dropdown-item value="Value of Dropdown Item">
+ *       Dropdown item 1
+ *     </daikin-dropdown-item>
+ *   </daikin-dropdown>
  * </daikin-input-group>
  * ```
  *
- * With Textarea:
+ * With Select:
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-textarea value="Content of Textarea"></daikin-textarea>
+ *   <daikin-select>
+ *     <select name="select">
+ *       <option value="value1">Option 1</option>
+ *       <option value="value2">Option 2</option>
+ *       <option value="value3">Option 3</option>
+ *     </select>
+ *   </daikin-select>
  * </daikin-input-group>
  * ```
+ *
+ * With Text Field:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-text-field value="Content of Text Field"></daikin-text-field>
+ * </daikin-input-group>
+ * ```
+ *
+ * With TextArea:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-text-area value="Content of TextArea"></daikin-text-area>
+ * </daikin-input-group>
+ * ```
+ * ```
  */
 export declare class DaikinInputGroup extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Label text to place at the top of the field
+     * Label text displayed at the top of the field.
      */
-    label?: string;
+    label: string | null;
     /**
-     * Helper text to place at the bottom of the field. In error conditions, this text is hidden.
+     * Helper text displayed at the top of the field.
+     * If `error` is specified and `disabled` is `false`, that takes precedence and helper text is not displayed.
      */
-    helper?: string;
+    helper: string | null;
     /**
-     * Whether the field is disabled. Reflected in the `disabled` property of the input in the slot.
+     * Text indicating that the field is required.
+     * If a non-empty string is set,
+     * - the text will be displayed in red to the right of the label, and
+     * - the `required` attribute will be set for the input control in the slot.
+     * Ignored if `disabled` is `true`.
      */
-    disabled: boolean;
+    required: string | null;
     /**
-     * Whether the field is required. An additional star mark will be added if `true`.
+     * Error text displayed at the top of the field.
+     * Ignored if `disabled` is `true`.
+     * Reflected in presence of `error` attribute of the input control in the slot.
      */
-    required: boolean;
+    error: string | null;
     /**
-     * Error text to place at the bottom of the field. If specified, sets the `error` property of the element in the slot to `true`. Ignored if the `disabled` is `true`.
+     * Whether the field is disabled.
+     * Reflected in `disabled` attribute of the input control in the slot.
      */
-    error: string;
+    disabled: boolean;
     /**
-     * Whether to display the counter in the Textarea
+     * Maximum value to display on the counter. When `null`, the counter will be hidden.
      */
-    textareaCounter: boolean;
-    _textareas: DaikinTextarea[];
-    _controls: ControlElement[];
+    textareaMaxCount: number | null;
+    private readonly _textareas;
+    private readonly _controls;
+    private _textareaCount;
     private _handleSlotChange;
+    private _handleInput;
     private _reflectSlotProperties;
     render(): import('lit-html').TemplateResult<1>;
     updated(): void;

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

@@ -1,7 +1,7 @@
 import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,64 +13,116 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = cva(["text-base", "font-bold"], {
+const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-5"], {
   variants: {
-    variant: {
-      enabled: ["text-daikinNeutral-800"],
-      disabled: ["text-daikinNeutral-200"]
-    },
-    required: {
-      optional: [],
-      required: ["after:content-['*']", "after:ml-[2px]"]
+    disabled: {
+      false: [],
+      true: ["text-system-state-disabled"]
     }
   }
 });
-const cvaHelper = cva(["h-[22px]", "text-xs"], {
+const cvaHelper = cva(
+  ["flex", "gap-1", "items-center", "leading-5", "text-sm"],
+  {
+    variants: {
+      type: {
+        helper: [],
+        helperDisabled: ["text-system-state-disabled"],
+        error: [
+          "text-system-state-error-active",
+          "font-bold",
+          "before:size-4",
+          "before:i-daikin-status-error"
+        ],
+        none: ["hidden"]
+      }
+    }
+  }
+);
+const cvaCounter = cva(["text-sm", "font-bold"], {
+  variants: {
+    disabled: {
+      false: ["text-system-element-text-secondary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
+const cvaCounterValueLength = cva([], {
   variants: {
-    variant: {
-      enabled: ["text-daikinNeutral-800"],
-      disabled: ["text-daikinNeutral-200"]
+    error: {
+      false: [],
+      true: ["text-system-state-error-active"]
     }
   }
 });
 let DaikinInputGroup = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.label = null;
+    this.helper = null;
+    this.required = null;
+    this.error = null;
     this.disabled = false;
-    this.required = false;
-    this.error = "";
-    this.textareaCounter = false;
+    this.textareaMaxCount = null;
+    this._textareaCount = null;
   }
   _handleSlotChange() {
     this._reflectSlotProperties();
+    const textarea = this._textareas[0];
+    this._textareaCount = (textarea == null ? void 0 : textarea.count) ?? null;
+  }
+  _handleInput(event) {
+    if (event.target.tagName === "DAIKIN-TEXT-AREA") {
+      this._textareaCount = event.target.count;
+    }
   }
   _reflectSlotProperties() {
-    const isError = !this.disabled && !!this.error;
     for (const control of this._controls) {
-      control.disabled = !!this.disabled;
-      control.error = isError;
-    }
-    for (const item of this._textareas) {
-      item.counter = this.textareaCounter;
+      control.reflectInputGroup(this);
     }
   }
   render() {
-    const inputGroupLabelClassName = cvaLabel({
-      variant: this.disabled ? "disabled" : "enabled",
-      required: this.required ? "required" : "optional"
-    });
-    const inputGroupHelperClassName = cvaHelper({
-      variant: this.disabled ? "disabled" : "enabled"
-    });
+    const helperType = this.error && !this.disabled ? "error" : this.helper ? this.disabled ? "helperDisabled" : "helper" : "none";
+    const helperText = {
+      error: this.error,
+      helper: this.helper,
+      helperDisabled: this.helper,
+      none: ""
+    }[helperType];
     return html`<fieldset class="content" ?disabled=${this.disabled}>
-      <label class="flex flex-col justify-center w-max gap-1 font-daikinSerif">
-        ${this.label ? html`<span class=${inputGroupLabelClassName}>${this.label}</span>` : null}
-        <slot @slotchange=${this._handleSlotChange}></slot>
-        ${this.helper && !this.error ? html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
-        ${!this.disabled && !!this.error ? html`<span
-              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-error before:block before:w-[16px] before:h-[22px]"
-              >${this.error}</span
-            >` : null}
+      <label
+        class="flex flex-col justify-center gap-2 w-full text-system-element-text-primary font-daikinSerif"
+      >
+        <div class="flex justify-between items-center gap-2">
+          <div class="flex items-center gap-1 font-bold">
+            ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                  ${this.label}
+                </span>` : nothing}
+            ${this.required && !this.disabled ? html`<span class="text-system-state-error-active text-xs">
+                  ${this.required}
+                </span>` : nothing}
+          </div>
+          ${this.textareaMaxCount != null && this._textareaCount != null ? html`
+                <span class=${cvaCounter({ disabled: this.disabled })}>
+                  <span
+                    class=${cvaCounterValueLength({
+      error: this.textareaMaxCount < this._textareaCount
+    })}
+                    >${this._textareaCount}</span
+                  ><span>/</span><span>${this.textareaMaxCount}</span>
+                </span>
+              ` : nothing}
+        </div>
+        <span
+          class=${cvaHelper({ type: helperType })}
+          aria-live=${helperType === "error" ? "polite" : "off"}
+        >
+          ${helperText}
+        </span>
+        <slot
+          @slotchange=${this._handleSlotChange}
+          @input=${this._handleInput}
+        ></slot>
       </label>
     </fieldset>`;
   }
@@ -85,33 +137,38 @@ DaikinInputGroup.styles = css`
       --input-group-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
 
       display: block;
-      width: max-content;
+      width: 100%;
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "label", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "helper", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinInputGroup.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "required", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "error", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], DaikinInputGroup.prototype, "textareaCounter", 2);
+], DaikinInputGroup.prototype, "disabled", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "daikin-textarea" })
+  property({ type: Number, reflect: true, attribute: "textarea-max-count" })
+], DaikinInputGroup.prototype, "textareaMaxCount", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-text-area" })
 ], DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "daikin-text-input,daikin-textarea" })
+  queryAssignedElements({
+    selector: "daikin-dropdown,daikin-select,daikin-text-field,daikin-text-area,daikin-radio-group"
+  })
 ], DaikinInputGroup.prototype, "_controls", 2);
+__decorateClass([
+  state()
+], DaikinInputGroup.prototype, "_textareaCount", 2);
 DaikinInputGroup = __decorateClass([
   customElement("daikin-input-group")
 ], DaikinInputGroup);

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

@@ -22,15 +22,23 @@ const INNER_CN = cva([
   "before:h-full",
   "focus-visible:outline-none",
   "focus-visible:before:outline",
-  "focus-visible:before:outline-1",
-  "focus-visible:before:-outline-offset-1",
-  "focus-visible:before:outline-daikinBlue-700",
+  "focus-visible:before:outline-2",
+  "focus-visible:before:-outline-offset-2",
+  "focus-visible:before:outline-system-state-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-[#f2f2f2]",
-  "link-enabled:before:active:bg-daikinNeutral-100",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
+  "link-enabled:before:active:bg-system-background-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-[#f2f2f2]"
+  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
 ])();
+const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
+  variants: {
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
 let DaikinListItem = class extends LitElement {
   constructor() {
     super();
@@ -59,7 +67,7 @@ let DaikinListItem = class extends LitElement {
       <slot name="left-icon">
         <span class="block -ml-1"></span>
       </slot>
-      <slot class="block pl-2 pr-3 text-left"></slot>
+      <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;
     const list = {
       button: () => html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
@@ -76,9 +84,7 @@ let DaikinListItem = class extends LitElement {
       text: () => html`<span class=${INNER_CN}>${content}</span>`
     }[this.type]();
     return html`<div
-      class=${// We cannot directly write classes like `class="..."` as they include '&', which must be escaped. It can't be escaped either because TailwindCSS can't process it.
-    // Set the text color here to apply to the icons on both sides along with text.
-    "group flex justify-between items-center w-full min-h-12 p-3 text-left relative text-daikinNeutral-800 [&:has(a:not(:any-link),:disabled)]:text-daikinNeutral-200"}
+      class="group flex justify-between items-center w-full min-h-12 p-3 text-left relative"
       role="listitem"
     >
       ${list}

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

@@ -51,7 +51,7 @@ const cvaBarContainer = cva(
         completed: [
           "after:size-4",
           "after:text-daikinGreen-500",
-          "after:i-daikin-notification-status-positive"
+          "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [

package/dist/es/components/progress-indicator/daikin-progress-indicator.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The progress indicator is used to let the user know where they are in the task list.
+ *
+ * Hierarchy:
+ * - `daikin-progress-indicator` > `daikin-progress-indicator-item`
+ *
+ * @slot - A slot for progress indicator items. Place `daikin-progress-indicator-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-indicator>
+ *   <daikin-progress-indicator-item state="unfinished">
+ *     Title 1
+ *     <span slot="description">Description 1</span>
+ *   </daikin-progress-indicator-item>
+ *   <daikin-progress-indicator-item state="inprogress">
+ *     Title 2
+ *     <span slot="description">Description 2</span>
+ *   </daikin-progress-indicator-item>
+ *   <daikin-progress-indicator-item state="finished">
+ *     Title 3
+ *     <span slot="description">Description 3</span>
+ *   </daikin-progress-indicator-item>
+ * </daikin-progress-indicator>
+ * ```
+ */
+export declare class DaikinProgressIndicator extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the index number of the current location in the progress indicator.
+     */
+    currentItem: number | null;
+    private readonly _items;
+    private _setCurrentItem;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-indicator": DaikinProgressIndicator;
+    }
+}
+export default DaikinProgressIndicator;

package/dist/es/components/progress-indicator/daikin-progress-indicator.js

@@ -0,0 +1,76 @@
+import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let DaikinProgressIndicator = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.currentItem = null;
+  }
+  _setCurrentItem() {
+    const items = this._items;
+    if (!items || this.currentItem === null) {
+      return;
+    }
+    if (items.length - 1 < this.currentItem) {
+      return;
+    }
+    if (this.currentItem < 0) {
+      return;
+    }
+    items.forEach((item, i) => item.current = this.currentItem === i);
+  }
+  _handleSlotChange() {
+    this._setCurrentItem();
+  }
+  render() {
+    return html`<div
+      class="flex justify-stretch items-start w-full font-daikinSerif"
+      role="list"
+    >
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </div>`;
+  }
+  firstUpdated() {
+    this._setCurrentItem();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("currentItem")) {
+      this._setCurrentItem();
+    }
+  }
+};
+DaikinProgressIndicator.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --progress-indicator-border-color-error: ${unsafeCSS(
+  colorFeedbackNegative
+)};
+
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Number, attribute: "current-item", reflect: true })
+], DaikinProgressIndicator.prototype, "currentItem", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-progress-indicator-item" })
+], DaikinProgressIndicator.prototype, "_items", 2);
+DaikinProgressIndicator = __decorateClass([
+  customElement("daikin-progress-indicator")
+], DaikinProgressIndicator);
+export {
+  DaikinProgressIndicator
+};

package/dist/es/components/progress-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-progress-indicator';

package/dist/es/components/progress-indicator/index.js

@@ -0,0 +1,4 @@
+import { DaikinProgressIndicator } from "./daikin-progress-indicator.js";
+export {
+  DaikinProgressIndicator
+};

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaContainer: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaLabel: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaLabel>;
+/**
+ * The progress indicator item component is a child element within the `daikin-progress-indicator` component, this represents one of the tasks that the user is working on.
+ *
+ * In addition to the name of each task, the progress of the task can be indicated, such as whether it is in progress or has not yet started.
+ *
+ * Hierarchy:
+ * - `daikin-progress-indicator` > `daikin-progress-indicator-item`
+ *
+ * @slot - A slot for label content.
+ * @slot description - A slot for description content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-indicator-item state="unfinished">
+ *   Progress indicator label
+ *   <span slot="description">Progress indicator description</span>
+ * </daikin-progress-indicator-item>
+ * ```
+ */
+export declare class DaikinProgressIndicatorItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Status of the progress indicator item
+     */
+    status: ProgressIndicatorItemVariantProps["status"];
+    current: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-indicator-item": DaikinProgressIndicatorItem;
+    }
+}
+export default DaikinProgressIndicatorItem;