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

package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs

@@ -17,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = classVarianceAuthority.cva(
   [
     "w-full",
-    "bg-daikinNeutral-200",
+    "bg-ddt-color-common-disabled",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -28,14 +28,17 @@ const cvaBar = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
-        completed: ["after:w-full", "after:bg-daikinGreen-500"],
+        inprogress: [
+          "after:w-[--bar-width]",
+          "after:bg-ddt-color-common-brand-default"
+        ],
+        completed: ["after:w-full", "after:bg-ddt-color-common-success"],
         indeterminate: [
           "after:w-1/2",
-          "after:bg-daikinBlue-500",
+          "after:bg-ddt-color-common-brand-default",
           "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
         ],
-        error: ["after:w-full", "after:bg-daikinRed-500"]
+        error: ["after:w-full", "after:bg-ddt-color-common-danger-default"]
       },
       size: {
         medium: ["h-1"],
@@ -45,20 +48,27 @@ const cvaBar = classVarianceAuthority.cva(
   }
 );
 const cvaBarContainer = classVarianceAuthority.cva(
-  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  [
+    "flex",
+    "justify-between",
+    "items-center",
+    "text-ddt-color-common-text-primary",
+    "leading-5",
+    "font-bold"
+  ],
   {
     variants: {
       variant: {
         inprogress: [],
         completed: [
           "after:size-4",
-          "after:text-daikinGreen-500",
+          "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
-          "after:text-daikinRed-500",
+          "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
       }
@@ -68,10 +78,10 @@ const cvaBarContainer = classVarianceAuthority.cva(
 const cvaHelper = classVarianceAuthority.cva(["text-sm"], {
   variants: {
     variant: {
-      inprogress: [],
-      completed: [],
-      indeterminate: [],
-      error: ["text-daikinRed-500", "font-bold"]
+      inprogress: ["text-ddt-color-common-text-primary"],
+      completed: ["text-ddt-color-common-text-primary"],
+      indeterminate: ["text-ddt-color-common-text-primary"],
+      error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {
       false: ["hidden"],

package/dist/cjs/components/progress-bar/{daikin-progress-bar.d.ts → daikin-progress-bar.d.cts}

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaBar: (props?: ({
     variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
     size?: "medium" | "large" | null | undefined;

package/dist/cjs/components/progress-bar/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-progress-bar.cjs";

package/dist/cjs/components/progress-indicator/daikin-progress-indicator.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const tailwind = require("../../tailwind.css.cjs");
@@ -37,7 +36,7 @@ exports.DaikinProgressIndicator = class DaikinProgressIndicator extends lit.LitE
   }
   render() {
     return lit.html`<div
-      class="flex justify-stretch items-start w-full font-daikinSerif"
+      class="flex justify-stretch items-start gap-2 w-full font-daikinSerif"
       role="list"
     >
       <slot @slotchange=${this._handleSlotChange}></slot>
@@ -56,10 +55,6 @@ exports.DaikinProgressIndicator.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --progress-indicator-border-color-error: ${lit.unsafeCSS(
-  variables_js.colorFeedbackNegative
-)};
-
       display: block;
       width: 100%;
     }

package/dist/cjs/components/progress-indicator/index.d.cts

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

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -22,33 +22,18 @@ const cvaContainer = classVarianceAuthority.cva(
     "flex-col",
     "gap-1",
     "w-full",
-    "text-system-element-text-primary",
-    "pt-1",
-    "border-t-4",
-    "font-daikinSerif"
+    "text-ddt-color-common-text-primary",
+    "pt-2",
+    "border-t-[0.25rem]",
+    "font-daikinSerif",
+    "leading-[130%]"
   ],
   {
     variants: {
       status: {
-        unfinished: ["border-system-state-disabled"],
-        inprogress: ["border-system-state-primary-active"],
-        finished: ["border-system-state-primary-active"]
-      }
-    }
-  }
-);
-const cvaLabel = classVarianceAuthority.cva(
-  ["flex", "items-center", "gap-2", "font-bold", "leading-5"],
-  {
-    variants: {
-      status: {
-        unfinished: [],
-        inprogress: [],
-        finished: [
-          "after:size-4",
-          "after:i-daikin-status-success",
-          "after:text-system-state-primary-active"
-        ]
+        unfinished: ["border-ddt-color-common-disabled"],
+        inprogress: ["border-ddt-color-common-brand-default"],
+        finished: ["border-ddt-color-common-brand-default"]
       }
     }
   }
@@ -61,14 +46,21 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
   }
   render() {
     return lit.html`<div
-      class=${cvaContainer({
-      status: this.status
-    })}
+      class=${cvaContainer({ status: this.status })}
       role="listitem"
       aria-current=${ifDefined_js.ifDefined(this.current ? "step" : void 0)}
     >
-      <slot class=${cvaLabel({ status: this.status })}></slot>
-      <slot name="description" class="text-sm leading-[18px]"></slot>
+      <div class="flex justify-between gap-1 font-bold">
+        <slot></slot>
+        ${this.status === "finished" ? lit.html`
+              <span
+                role="img"
+                class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
+                aria-label="Completed"
+              ></span>
+            ` : lit.nothing}
+      </div>
+      <slot name="description" class="text-sm"></slot>
     </div>`;
   }
 };
@@ -78,7 +70,7 @@ exports.DaikinProgressIndicatorItem.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      min-width: 142px;
+      min-width: 9rem;
     }
   `;
 __decorateClass([

package/dist/{cjs-dev/components/progress-indicator-item/daikin-progress-indicator-item.d.ts → cjs/components/progress-indicator-item/daikin-progress-indicator-item.d.cts}

@@ -1,12 +1,9 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 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>;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
 /**
  * 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.
  *

package/dist/cjs/components/progress-indicator-item/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-progress-indicator-item.cjs";

package/dist/cjs/components/radio/daikin-radio.cjs

@@ -26,22 +26,24 @@ const RADIO_CLASS_NAME = classVarianceAuthority.cva([
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-system-state-focus",
+  "focus-visible:outline-ddt-color-common-border-focus",
   "unchecked:border-2",
-  "enabled:unchecked:border-system-state-neutral-active",
-  "enabled:unchecked:hover:bg-system-background-surface-hover",
-  "enabled:unchecked:active:bg-system-background-surface-press",
+  "enabled:unchecked:border-ddt-color-common-neutral-default",
+  "enabled:unchecked:group-hover:border-ddt-color-common-neutral-hover",
+  "enabled:unchecked:group-active:border-ddt-color-common-neutral-press",
+  "enabled:unchecked:group-hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:unchecked:group-active:bg-ddt-color-common-surface-neutral-press",
   "checked:border-[5px]",
-  "enabled:checked:border-system-state-primary-active",
-  "enabled:checked:group-hover:border-system-state-primary-hover",
-  "enabled:checked:group-active:border-system-state-primary-press",
-  "disabled:border-system-state-disabled"
+  "enabled:checked:border-ddt-color-common-brand-default",
+  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "disabled:border-ddt-color-common-disabled"
 ])();
 const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
@@ -90,7 +92,7 @@ exports.DaikinRadio = class DaikinRadio extends lit.LitElement {
           class=${RADIO_CLASS_NAME}
           type="radio"
           name=${this.name}
-          value=${this.value}
+          .value=${this.value}
           aria-label=${this.labelPosition === "hidden" ? this.label : lit.nothing}
           ?disabled=${this.disabled}
           .checked=${this.checked}

package/dist/cjs/components/radio/{daikin-radio.d.ts → daikin-radio.d.cts}

@@ -22,11 +22,11 @@ import { LitElement } from 'lit';
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the radio button.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the radio button.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -40,11 +40,11 @@ export declare class DaikinRadio extends LitElement {
      */
     labelPosition: "right" | "hidden";
     /**
-     * Whether the radio button is checked.
+     * Specify the radio button checked state.
      */
     checked: boolean;
     /**
-     * Whether the radio button is disabled.
+     * Specify the radio button disabled state.
      */
     disabled: boolean;
     /**

package/dist/cjs/components/radio/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-radio.cjs";

package/dist/cjs/components/radio-group/daikin-radio-group.cjs

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const tailwind = require("../../tailwind.css.cjs");
+require("../radio/daikin-radio.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/cjs/components/radio-group/{daikin-radio-group.d.ts → daikin-radio-group.d.cts}

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-import { DaikinInputGroup } from '../input-group';
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { DaikinInputGroup } from "../input-group/index.cjs";
 declare const radioGroupCN: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/cjs/components/radio-group/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-radio-group.cjs";

package/dist/cjs/components/select/daikin-select.cjs

@@ -27,7 +27,7 @@ const cvaSelect = classVarianceAuthority.cva(
     "after:absolute",
     "after:top-0",
     "after:bottom-0",
-    "after:right-3",
+    "after:right-[calc(0.75rem+1px)]",
     "after:pointer-events-none",
     "slotted-[select]:!appearance-none",
     "slotted-[select]:!flex",
@@ -42,8 +42,7 @@ const cvaSelect = classVarianceAuthority.cva(
     "slotted-[select]:!font-daikinSerif",
     "slotted-[select]:!border",
     "slotted-[select]:!border-[--color-base]",
-    "slotted-[select]:!rounded-md",
-    "slotted-[select]:!font-daikinSerif",
+    "slotted-[select]:!rounded",
     "slotted-[select]:!leading-5",
     "slotted-[select]:!outline",
     "slotted-[select]:!outline-0",
@@ -51,26 +50,26 @@ const cvaSelect = classVarianceAuthority.cva(
     "slotted-[select:focus-visible]:!outline-2",
     "slotted-[select:focus-visible]:!outline-[--color-focus]",
     "slotted-[select:enabled]:!cursor-pointer",
-    "slotted-[select:enabled]:!text-daikinNeutral-800",
-    "slotted-[select:enabled:hover]:!bg-[#f2f2f2]",
-    "slotted-[select:enabled:active]:!bg-daikinNeutral-100",
-    "slotted-[select:disabled]:!text-daikinNeutral-200",
-    "slotted-[select:disabled]:!border-daikinNeutral-200"
+    "slotted-[select:enabled]:!text-ddt-color-common-text-primary",
+    "slotted-[select:enabled:hover]:!bg-ddt-color-common-surface-hover",
+    "slotted-[select:enabled:active]:!bg-ddt-color-common-surface-press",
+    "slotted-[select:disabled]:!text-ddt-color-common-disabled",
+    "slotted-[select:disabled]:!border-ddt-color-common-disabled"
   ],
   {
     variants: {
       disabled: {
-        false: ["after:text-daikinNeutral-900"],
-        true: ["after:text-daikinNeutral-200"]
+        false: ["after:text-ddt-color-common-text-primary"],
+        true: ["after:text-ddt-color-common-disabled"]
       },
       error: {
         false: [
-          "var-color-daikinNeutral-600/color-base",
-          "var-color-daikinBlue-700/color-focus"
+          "var-color-ddt-color-common-neutral-default/color-base",
+          "var-color-ddt-color-common-border-focus/color-focus"
         ],
         true: [
-          "var-color-daikinRed-500/color-base",
-          "var-color-daikinRed-500/color-focus"
+          "var-color-ddt-color-common-danger-default/color-base",
+          "var-color-ddt-color-common-danger-default/color-focus"
         ]
       }
     }
@@ -82,15 +81,19 @@ exports.DaikinSelect = class DaikinSelect extends lit.LitElement {
     this.error = false;
     this.required = false;
     this.disabled = false;
+    this._label = null;
   }
   get _select() {
     return this._selects[0] ?? null;
   }
   _updateSelect() {
     const select = this._select;
-    if (select) {
-      select.disabled = this.disabled;
+    if (!select) {
+      return;
     }
+    select.disabled = this.disabled;
+    select.required = this.required;
+    select.ariaLabel = this._label;
   }
   _handleSlotChange() {
     this._updateSelect();
@@ -102,7 +105,7 @@ exports.DaikinSelect = class DaikinSelect extends lit.LitElement {
     ></slot>`;
   }
   updated(changedProperties) {
-    if (changedProperties.has("disabled")) {
+    if (changedProperties.has("disabled") || changedProperties.has("required")) {
       this._updateSelect();
     }
   }
@@ -111,6 +114,8 @@ exports.DaikinSelect = class DaikinSelect extends lit.LitElement {
     this.disabled = !!inputGroup.disabled;
     this.required = !!inputGroup.required;
     this.error = isError;
+    this._label = inputGroup.label;
+    this._updateSelect();
   }
   /**
    * Focuses on the `<select>` element in the slot.
@@ -155,6 +160,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "select" })
 ], exports.DaikinSelect.prototype, "_selects", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinSelect.prototype, "_label", 2);
 exports.DaikinSelect = __decorateClass([
   decorators_js.customElement("daikin-select")
 ], exports.DaikinSelect);

package/dist/cjs/components/select/{daikin-select.d.ts → daikin-select.d.cts}

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { DaikinInputGroup } from '../input-group';
+import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * A select component.
  * This component accepts an HTML `<select>` element in the slot and applies styles to it.
@@ -41,6 +41,11 @@ export declare class DaikinSelect extends LitElement {
      */
     disabled: boolean;
     private readonly _selects;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
     private get _select();
     private _updateSelect;
     private _handleSlotChange;

package/dist/cjs/components/select/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-select.cjs";

package/dist/cjs/components/tab/daikin-tab.cjs

@@ -36,8 +36,8 @@ const cvaTab = classVarianceAuthority.cva(
     "focus-visible:before:z-[1]",
     "focus-visible:before:border",
     "focus-visible:before:border-2",
-    "focus-visible:before:border-system-state-focus",
-    "disabled:text-system-state-disabled",
+    "focus-visible:before:border-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled",
     "after:absolute",
     "after:inset-0",
     "after:top-auto"
@@ -46,22 +46,22 @@ const cvaTab = classVarianceAuthority.cva(
     variants: {
       active: {
         false: [
-          "enabled:text-system-state-neutral-active",
-          "enabled:hover:text-system-state-neutral-hover",
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:text-system-state-neutral-press",
-          "enabled:active:bg-system-background-surface-press",
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:active:bg-ddt-color-common-surface-press",
           "after:h-[1px]",
-          "after:bg-system-element-divider-secondary"
+          "after:bg-ddt-color-divider"
         ],
         true: [
           "font-bold",
-          "enabled:text-system-state-primary-active",
-          "enabled:hover:bg-system-state-primary-surface-hover",
-          "enabled:active:bg-system-state-primary-surface-press",
+          "enabled:text-ddt-color-common-brand-default",
+          "enabled:hover:bg-ddt-color-common-surface-brand-hover",
+          "enabled:active:bg-ddt-color-common-surface-brand-press",
           "after:h-1",
-          "enabled:after:bg-system-state-primary-active",
-          "disabled:after:bg-system-state-disabled"
+          "enabled:after:bg-ddt-color-common-brand-default",
+          "disabled:after:bg-ddt-color-common-disabled"
         ]
       }
     }

package/dist/cjs/components/tab/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-tab.cjs";

package/dist/{cjs-dev/components/tab-panels/daikin-tab-panels.d.ts → cjs/components/tab-panels/daikin-tab-panels.d.cts}

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { ARIARole } from '../../lit-analyzer-types';
+import { ARIARole } from "../../lit-analyzer-types.cjs";
 /**
  * The tab panels component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
  * When a user selects a tab, the tab panels component ensures the corresponding content panel is shown while hiding the others.

package/dist/cjs/components/tab-panels/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-tab-panels.cjs";