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

package/dist/es/components/index.js

@@ -4,16 +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 { DaikinPanelSwitcher } from "./panel-switcher/daikin-panel-switcher.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 { DaikinTabGroup } from "./tab-group/daikin-tab-group.js";
-import { DaikinTextInput } from "./text-input/daikin-text-input.js";
-import { DaikinTextarea } from "./textarea/daikin-textarea.js";
+import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
+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 { DaikinToggle } from "./toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
 export {
@@ -23,16 +30,23 @@ export {
   DaikinBreadcrumbItem,
   DaikinButton,
   DaikinCheckbox,
+  DaikinDropdown,
+  DaikinDropdownItem,
   DaikinIcon,
   DaikinInputGroup,
+  DaikinList,
+  DaikinListItem,
   DaikinNotification,
-  DaikinPanelSwitcher,
   DaikinProgressBar,
+  DaikinProgressIndicator,
+  DaikinProgressIndicatorItem,
   DaikinRadio,
+  DaikinSelect,
   DaikinTab,
-  DaikinTabGroup,
-  DaikinTextInput,
-  DaikinTextarea,
+  DaikinTabPanels,
+  DaikinTabs,
+  DaikinTextArea,
+  DaikinTextField,
   DaikinToggle,
   DaikinTooltip,
   iconList

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

@@ -1,65 +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
  *
- * With Text Input:
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/input-group/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 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-negative 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/daikin-list.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * The list component is used to list items using the list item component.
+ *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ *
+ * @slot - A slot for the list items. Place `daikin-list-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-list>
+ *   <daikin-list-item>List item label 1</daikin-list-item>
+ *   <daikin-list-item>List item label 2</daikin-list-item>
+ *   <daikin-list-item>List item label 3</daikin-list-item>
+ * </daikin-list>
+ * ```
+ */
+export declare class DaikinList extends LitElement {
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-list": DaikinList;
+    }
+}
+export default DaikinList;

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

@@ -0,0 +1,25 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.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 DaikinList = class extends LitElement {
+  render() {
+    return html`<div role="list">
+      <slot></slot>
+    </div>`;
+  }
+};
+DaikinList = __decorateClass([
+  customElement("daikin-list")
+], DaikinList);
+export {
+  DaikinList
+};

package/dist/es/components/list/index.d.ts

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

package/dist/es/components/list/index.js

@@ -0,0 +1,4 @@
+import { DaikinList } from "./daikin-list.js";
+export {
+  DaikinList
+};

package/dist/es/components/list-item/daikin-list-item.d.ts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+/**
+ * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
+ *
+ * The following types are available:
+ *
+ * - `button`: Uses `<button>` tag.
+ * - `link`: Uses `<a>` tag.
+ * - `text`: Uses `<span>` tag.
+ *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event). Suppressed if `disabled` is true.
+ *
+ * @slot - A slot for the list item label content.
+ * @slot action - An optional slot for an interaction item to be placed to the right of the text. Place `daikin-checkbox`, `daikin-toggle`, or something similar.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ * @slot right-icon - An optional slot for an icon to be placed to the left of the text. Ignored if `action` slot is used. Place `daikin-icon` or something similar.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-list-item>List item label</daikin-list-item>
+ * ```
+ */
+export declare class DaikinListItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Type of the list item.
+     * - `button` (default): The list item will be rendered as a `<button>` element.
+     * - `link`: The list item will be rendered as an `<a>` element.
+     * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
+     */
+    type: "button" | "link" | "text";
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.
+     */
+    href: string | null;
+    /**
+     * Whether the list item is disabled.
+     * Ignored if the `type` is `"text"`.
+     */
+    disabled: boolean;
+    private _focusableElement;
+    private get _disabled();
+    private _handleClickAction;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * It will have no effect if the `type` is "text" or `disabled` is `true`.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-list-item": DaikinListItem;
+    }
+}
+export default DaikinListItem;

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

@@ -0,0 +1,132 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../icon/daikin-icon.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;
+};
+const INNER_CN = cva([
+  "text-left",
+  "before:absolute",
+  "before:inset-0",
+  "before:w-full",
+  "before:h-full",
+  "focus-visible:outline-none",
+  "focus-visible:before:outline",
+  "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-system-background-surface-hover",
+  "link-enabled:before:active:bg-system-background-surface-press",
+  // For text
+  "[&: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();
+    this.type = "button";
+    this.href = null;
+    this.disabled = false;
+    this.addEventListener("click", (event) => {
+      if (this._disabled) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  get _disabled() {
+    return (
+      // False if `type` is "text".
+      this.type !== "text" && // True if `this.disabled`, or if `type` is "link" and `href` is missing.
+      (this.disabled || this.type === "link" && this.href == null)
+    );
+  }
+  _handleClickAction(event) {
+    event.stopPropagation();
+  }
+  render() {
+    const disabled = this._disabled;
+    const content = html`<span class="flex items-center w-full relative">
+      <slot name="left-icon">
+        <span class="block -ml-1"></span>
+      </slot>
+      <slot class=${cvaContent({ disabled: this.disabled })}></slot>
+    </span>`;
+    const list = {
+      button: () => html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
+          ${content}
+        </button>`,
+      link: () => html`<a
+          class=${INNER_CN}
+          href=${ifDefined(!disabled ? this.href ?? void 0 : void 0)}
+          role=${ifDefined(disabled ? "link" : void 0)}
+          aria-disabled=${ifDefined(disabled ? "true" : void 0)}
+        >
+          ${content}
+        </a>`,
+      text: () => html`<span class=${INNER_CN}>${content}</span>`
+    }[this.type]();
+    return html`<div
+      class="group flex justify-between items-center w-full min-h-12 p-3 text-left relative"
+      role="listitem"
+    >
+      ${list}
+      <slot
+        name="action"
+        class="flex items-center gap-3"
+        @click=${this._handleClickAction}
+      >
+        <slot name="right-icon" class="pointer-events-none">
+          <span class="block -mr-1"></span>
+        </slot>
+      </slot>
+    </div>`;
+  }
+  /**
+   * Focuses on the inner button or link.
+   * It will have no effect if the `type` is "text" or `disabled` is `true`.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+DaikinListItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinListItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinListItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinListItem.prototype, "disabled", 2);
+__decorateClass([
+  query("a,button")
+], DaikinListItem.prototype, "_focusableElement", 2);
+DaikinListItem = __decorateClass([
+  customElement("daikin-list-item")
+], DaikinListItem);
+export {
+  DaikinListItem
+};

package/dist/es/components/list-item/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-list-item';

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

@@ -0,0 +1,4 @@
+import { DaikinListItem } from "./daikin-list-item.js";
+export {
+  DaikinListItem
+};