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

package/dist/es/components/{tab-group/daikin-tab-group.js → tabs/daikin-tabs.js}

@@ -12,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTabGroup = class extends LitElement {
+let DaikinTabs = class extends LitElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -20,22 +20,21 @@ let DaikinTabGroup = class extends LitElement {
   /**
    * Emits `beforechange` event if necessary and returns whether we should proceed.
    *
-   * 1. Check if `newValue` is different from `value`.
+   * 1. Check if `newTab.value` is different from `value`.
    * 2. Emit "beforechange" event.
-   * 3. Check if the event is canceled.
+   * 3. Check and return whether the event is canceled.
    *
-   * @param newValue The `value` of the newly active tab.
+   * @param newTab The newly active tab element.
    * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
    */
-  _emitBeforeChange(newValue) {
-    if (this.value === newValue) {
+  _emitBeforeChange(newTab) {
+    if (this.value === newTab.value) {
       return false;
     }
     if (!this.dispatchEvent(
       new CustomEvent("beforechange", {
-        detail: { oldValue: this.value, newValue },
+        detail: { newTab },
         bubbles: true,
-        composed: true,
         cancelable: true
       })
     )) {
@@ -46,18 +45,16 @@ let DaikinTabGroup = class extends LitElement {
   /**
    * Updates `this.value` and emit "change" event.
    *
-   * @param newValue The `value` of the newly active tab.
+   * @param newTab The newly active tab element.
    */
-  _updateValue(newValue) {
+  _updateValue(newTab) {
+    this.value = newTab.value;
     this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { oldValue: this.value, newValue },
+      new Event("change", {
         bubbles: true,
-        composed: true,
         cancelable: false
       })
     );
-    this.value = newValue;
   }
   /**
    * Updates `daikin-tab` component(s)' properties in the slot.
@@ -80,7 +77,7 @@ let DaikinTabGroup = class extends LitElement {
       selectedTab = tabs.find((tab) => !tab.disabled);
       if (selectedTab) {
         selectedTab.active = true;
-        this._updateValue(selectedTab.value);
+        this._updateValue(selectedTab);
       }
     }
     if (!selectedTab) {
@@ -89,14 +86,14 @@ let DaikinTabGroup = class extends LitElement {
     scrollIntoViewOnlyParent(selectedTab);
   }
   /**
-   * Updates `daikin-panel-switcher` component(s)' properties in the slot.
+   * Updates `daikin-tab-panels` component(s)' properties in the slot.
    *
    * Invoke when:
    * - `this.value` is changed.
    * - the default slot's content is changed.
    * - the panel slot's content is changed.
    */
-  _updatePanelSwitcher() {
+  _updateTabPanels() {
     const panelSwitchers = this._panelSwitchers;
     const tabs = this._tabs;
     const panels = Array.from(new Set(tabs.map((tab) => tab.value)));
@@ -119,13 +116,13 @@ let DaikinTabGroup = class extends LitElement {
     if (this.value === tab.value) {
       return;
     }
-    if (!this._emitBeforeChange(tab.value)) {
+    if (!this._emitBeforeChange(tab)) {
       return;
     }
     for (const element of tabs) {
       element.active = element === tab;
     }
-    this._updateValue(tab.value);
+    this._updateValue(tab);
   }
   /**
    * Handles keyboard interactions in the tab list.
@@ -163,10 +160,10 @@ let DaikinTabGroup = class extends LitElement {
   }
   _handleSlotChange() {
     this._updateTabs();
-    this._updatePanelSwitcher();
+    this._updateTabPanels();
   }
-  _handlePanelSwitcherSlotChange() {
-    this._updatePanelSwitcher();
+  _handleTabPanelsSlotChange() {
+    this._updateTabPanels();
   }
   render() {
     return html`
@@ -178,10 +175,7 @@ let DaikinTabGroup = class extends LitElement {
       >
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
-      <slot
-        name="panels"
-        @slotchange=${this._handlePanelSwitcherSlotChange}
-      ></slot>
+      <slot name="panels" @slotchange=${this._handleTabPanelsSlotChange}></slot>
     `;
   }
   updated(changedProperties) {
@@ -189,24 +183,24 @@ let DaikinTabGroup = class extends LitElement {
       return;
     }
     this._updateTabs();
-    this._updatePanelSwitcher();
+    this._updateTabPanels();
   }
 };
-DaikinTabGroup.styles = css`
+DaikinTabs.styles = css`
     ${unsafeCSS(tailwindStyles)}
   `;
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTabGroup.prototype, "value", 2);
+], DaikinTabs.prototype, "value", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-tab" })
-], DaikinTabGroup.prototype, "_tabs", 2);
+], DaikinTabs.prototype, "_tabs", 2);
 __decorateClass([
-  queryAssignedElements({ slot: "panels", selector: "daikin-panel-switcher" })
-], DaikinTabGroup.prototype, "_panelSwitchers", 2);
-DaikinTabGroup = __decorateClass([
-  customElement("daikin-tab-group")
-], DaikinTabGroup);
+  queryAssignedElements({ slot: "panels", selector: "daikin-tab-panels" })
+], DaikinTabs.prototype, "_panelSwitchers", 2);
+DaikinTabs = __decorateClass([
+  customElement("daikin-tabs")
+], DaikinTabs);
 export {
-  DaikinTabGroup
+  DaikinTabs
 };

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

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

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

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

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

@@ -9,9 +9,14 @@ import { LitElement, PropertyValues } from 'lit';
  * - `daikin-input-group` > `daikin-text-input`
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/text-input/index.js";
+ * ```
+ *
  * ```html
  * <!-- See `daikin-input-group` component for complete example. -->
  * <daikin-text-input name="name"></daikin-text-input>

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

@@ -16,8 +16,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaInput = cva(
   [
-    "w-[340px]",
-    "h-12",
+    "w-full",
+    "h-full",
     "text-daikinNeutral-900",
     "border",
     "border-solid",
@@ -99,7 +99,8 @@ DaikinTextInput.styles = css`
       --text-input-outline-color-hover: #54c3f1;
 
       display: block;
-      width: max-content;
+      width: 340px;
+      height: 48px;
     }
   `;
 DaikinTextInput.formAssociated = true;

package/dist/es/components/textarea/daikin-textarea.d.ts

@@ -9,9 +9,14 @@ import { LitElement, PropertyValues } from 'lit';
  * - `daikin-input-group` > `daikin-textarea`
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<textarea>` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/textarea/index.js";
+ * ```
+ *
  * ```html
  * <!-- See `daikin-input-group` component for complete example. -->
  * <daikin-textarea name="name"></daikin-textarea>

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

@@ -16,8 +16,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaTextarea = cva(
   [
-    "w-[340px]",
-    "h-[120px]",
+    "w-full",
+    "h-full",
     "text-daikinNeutral-900",
     "border",
     "border-solid",
@@ -125,7 +125,7 @@ DaikinTextarea.styles = css`
       --text-input-background-color: #ffffff;
 
       display: block;
-      width: max-content;
+      width: 340px;
       height: 120px;
       position: relative;
     }

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -1,9 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-declare const cvaToggle: (props?: ({
-    size?: "default" | "small" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ToggleVariantProps = MergeVariantProps<typeof cvaToggle>;
 /**
  * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
  * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
@@ -14,41 +9,36 @@ type ToggleVariantProps = MergeVariantProps<typeof cvaToggle>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/toggle/index.js";
+ * ```
+ *
  * ```html
  * <daikin-toggle name="name" value="value"></daikin-toggle>
  * ```
  */
 export declare class DaikinToggle extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    private _input;
-    private _handleChange;
     /**
-     * Specify the component size
+     * Form name of the toggle switch.
      */
-    size: ToggleVariantProps["size"];
+    name: string;
     /**
-     * Specify whether the Toggle should be disabled
+     * Form value of the toggle switch.
      */
-    disabled: boolean;
+    value: string;
     /**
-     * Specify whether the control is checked
+     * Whether the toggle switch is turned on.
      */
     checked: boolean;
     /**
-     * The form name.
-     */
-    name: string;
-    /**
-     * The value.
-     */
-    value: string;
-    /**
-     * Specify whether the Toggle is in a error state
+     * Whether the toggle switch is disabled.
      */
-    error: boolean;
+    disabled: boolean;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }
@@ -57,4 +47,3 @@ declare global {
         "daikin-toggle": DaikinToggle;
     }
 }
-export {};

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { query, property, customElement } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,79 +12,64 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaToggle = cva(
-  [
-    "appearance-none",
-    "cursor-pointer",
-    "relative",
-    "bg-daikinNeutral-200",
-    "rounded-3xl",
-    "transition-color",
-    "duration-300",
-    "disabled:bg-daikinNeutral-200",
-    "before:content-['']",
-    "before:absolute",
-    "before:rounded-full",
-    "before:transition",
-    "before:disabled:bg-daikinNeutral-400"
-  ],
-  {
-    variants: {
-      size: {
-        default: [
-          "w-[51px]",
-          "h-[31px]",
-          "checked:bg-daikinBlue-500",
-          "before:h-[27px]",
-          "before:w-[27px]",
-          "before:bg-white",
-          "before:top-[2px]",
-          "before:left-[2px]",
-          "before:checked:translate-x-5"
-        ],
-        small: [
-          "w-8",
-          "h-[14px]",
-          "checked:bg-daikinBlue-50",
-          "before:h-5",
-          "before:w-5",
-          "before:top-[-3px]",
-          "before:bg-daikinNeutral-600",
-          "before:checked:bg-daikinBlue-500",
-          "before:checked:translate-x-3"
-        ]
-      }
-    }
-  }
-);
+const TOGGLE_CLASS_NAME = cva([
+  "w-12",
+  "h-6",
+  "relative",
+  "bg-daikinNeutral-600",
+  "rounded-full",
+  "cursor-pointer",
+  "transition-colors",
+  "duration-300",
+  "appearance-none",
+  "enabled:hover:bg-daikinNeutral-400",
+  "enabled:active:bg-daikinNeutral-700",
+  "focus-visible:outline",
+  "focus-visible:outline-1",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-daikinBlue-700",
+  "enabled:checked:bg-daikinBlue-500",
+  "enabled:checked:hover:bg-daikinBlue-300",
+  "enabled:checked:active:bg-daikinBlue-600",
+  "disabled:bg-daikinNeutral-200",
+  "disabled:cursor-default",
+  "before:size-4",
+  "before:m-auto",
+  "before:rounded-full",
+  "before:absolute",
+  "before:top-0",
+  "before:bottom-0",
+  "before:left-1",
+  "before:transition",
+  "before:duration-300",
+  "before:checked:translate-x-6",
+  "enabled:before:bg-white",
+  "disabled:before:bg-daikinNeutral-100"
+])();
 let DaikinToggle = class extends LitElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.size = "default";
-    this.disabled = false;
-    this.checked = false;
     this.name = "";
     this.value = "";
-    this.error = false;
+    this.checked = false;
+    this.disabled = false;
+    this._internals = this.attachInternals();
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
   _handleChange(event) {
-    if (!this._input) {
-      return;
-    }
+    this.checked = event.target.checked;
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const toggleClassName = cvaToggle({ size: this.size });
     return html`<input
-      class=${toggleClassName}
+      class=${TOGGLE_CLASS_NAME}
       type="checkbox"
       name=${this.name}
       value=${this.value}
+      role="switch"
       .checked=${this.checked}
       ?disabled=${this.disabled}
       @change=${this._handleChange}
@@ -104,18 +89,6 @@ DaikinToggle.styles = css`
     }
   `;
 DaikinToggle.formAssociated = true;
-__decorateClass([
-  query("input")
-], DaikinToggle.prototype, "_input", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinToggle.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinToggle.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinToggle.prototype, "checked", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinToggle.prototype, "name", 2);
@@ -124,7 +97,10 @@ __decorateClass([
 ], DaikinToggle.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], DaikinToggle.prototype, "error", 2);
+], DaikinToggle.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToggle.prototype, "disabled", 2);
 DaikinToggle = __decorateClass([
   customElement("daikin-toggle")
 ], DaikinToggle);

package/dist/es/components/tooltip/daikin-tooltip.d.ts

@@ -12,6 +12,10 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tooltip/index.js";
+ * ```
+ *
  * ```html
  * </daikin-tooltip>
  *   <span slot="tooltip">This is a message</span>

package/dist/es/index.js

@@ -7,12 +7,14 @@ import { DaikinButton } from "./components/button/daikin-button.js";
 import { DaikinCheckbox } from "./components/checkbox/daikin-checkbox.js";
 import { DaikinIcon, iconList } from "./components/icon/daikin-icon.js";
 import { DaikinInputGroup } from "./components/input-group/daikin-input-group.js";
+import { DaikinList } from "./components/list/daikin-list.js";
+import { DaikinListItem } from "./components/list-item/daikin-list-item.js";
 import { DaikinNotification } from "./components/notification/daikin-notification.js";
-import { DaikinPanelSwitcher } from "./components/panel-switcher/daikin-panel-switcher.js";
 import { DaikinProgressBar } from "./components/progress-bar/daikin-progress-bar.js";
 import { DaikinRadio } from "./components/radio/daikin-radio.js";
 import { DaikinTab } from "./components/tab/daikin-tab.js";
-import { DaikinTabGroup } from "./components/tab-group/daikin-tab-group.js";
+import { DaikinTabPanels } from "./components/tab-panels/daikin-tab-panels.js";
+import { DaikinTabs } from "./components/tabs/daikin-tabs.js";
 import { DaikinTextInput } from "./components/text-input/daikin-text-input.js";
 import { DaikinTextarea } from "./components/textarea/daikin-textarea.js";
 import { DaikinToggle } from "./components/toggle/daikin-toggle.js";
@@ -26,12 +28,14 @@ export {
   DaikinCheckbox,
   DaikinIcon,
   DaikinInputGroup,
+  DaikinList,
+  DaikinListItem,
   DaikinNotification,
-  DaikinPanelSwitcher,
   DaikinProgressBar,
   DaikinRadio,
   DaikinTab,
-  DaikinTabGroup,
+  DaikinTabPanels,
+  DaikinTabs,
   DaikinTextInput,
   DaikinTextarea,
   DaikinToggle,