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

package/dist/cjs-dev/components/index.d.cts

@@ -0,0 +1,31 @@
+export * from "./accordion/index.cjs";
+export * from "./accordion-item/index.cjs";
+export * from "./breadcrumb/index.cjs";
+export * from "./breadcrumb-item/index.cjs";
+export * from "./button/index.cjs";
+export * from "./checkbox/index.cjs";
+export * from "./dropdown/index.cjs";
+export * from "./dropdown-item/index.cjs";
+export * from "./icon/index.cjs";
+export * from "./icon-button/index.cjs";
+export * from "./input-group/index.cjs";
+export * from "./link/index.cjs";
+export * from "./list/index.cjs";
+export * from "./list-item/index.cjs";
+export * from "./notification/index.cjs";
+export * from "./pagination/index.cjs";
+export * from "./progress-bar/index.cjs";
+export * from "./progress-indicator/index.cjs";
+export * from "./progress-indicator-item/index.cjs";
+export * from "./radio/index.cjs";
+export * from "./select/index.cjs";
+export * from "./tab/index.cjs";
+export * from "./tab-panels/index.cjs";
+export * from "./table/index.cjs";
+export * from "./table-cell/index.cjs";
+export * from "./table-header-cell/index.cjs";
+export * from "./tabs/index.cjs";
+export * from "./text-area/index.cjs";
+export * from "./text-field/index.cjs";
+export * from "./toggle/index.cjs";
+export * from "./tooltip/index.cjs";

package/dist/cjs-dev/components/input-group/daikin-input-group.cjs

@@ -165,7 +165,7 @@ __decorateClass([
 ], exports.DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({
-    selector: "daikin-dropdown,daikin-select,daikin-text-field,daikin-text-area,daikin-radio-group"
+    selector: "daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-field,daikin-text-area"
   })
 ], exports.DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

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

@@ -5,11 +5,11 @@ import { LitElement } from 'lit';
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
- * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
+ * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
+ * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-text-area`
  * - `daikin-input-group` > `daikin-text-field`
- * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  *
  * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
@@ -17,6 +17,11 @@ import { LitElement } from 'lit';
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
+ * <!-- Import the following as necessary. -->
+ * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio/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";
@@ -34,6 +39,16 @@ import { LitElement } from 'lit';
  * </daikin-input-group>
  * ```
  *
+ * With Radio Group:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-radio-group value="Value of Radio Group">
+ *     <daikin-radio value="Value of Radio Group" label="Option1"></daikin-radio>
+ *   </daikin-radio-group>
+ * </daikin-input-group>
+ * ```
+ *
  * With Select:
  *
  * ```html

package/dist/cjs-dev/components/input-group/index.d.cts

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

package/dist/cjs-dev/components/link/daikin-link.cjs

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+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");
+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 LINK_CLASS_NAME = classVarianceAuthority.cva([
+  "flex",
+  "justify-center",
+  "items-center",
+  "gap-0.5",
+  "size-fit",
+  "font-daikinSerif",
+  "rounded-[1px]",
+  "relative",
+  "link-enabled:text-system-state-link-active",
+  "link-enabled:hover:text-system-state-link-hover",
+  "link-enabled:hover:bg-system-state-link-surface-hover",
+  "link-enabled:active:text-system-state-link-press",
+  "link-disabled:text-system-state-disabled",
+  "focus-visible:outline-none",
+  "focus-visible:before:block",
+  "focus-visible:before:rounded-none",
+  "focus-visible:before:absolute",
+  "focus-visible:before:inset-[-1px]",
+  "focus-visible:before:outline",
+  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-2",
+  "after:h-[1px]",
+  "after:absolute",
+  "after:inset-[auto_0_0_0]",
+  "after:bg-current"
+])();
+exports.DaikinLink = class DaikinLink extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = null;
+    this.target = null;
+    this.disabled = false;
+    this.showVisited = false;
+  }
+  render() {
+    return lit.html`
+      <a
+        class=${LINK_CLASS_NAME}
+        href=${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+        target=${ifDefined_js.ifDefined(this.target ?? void 0)}
+        aria-disabled=${ifDefined_js.ifDefined(this.disabled ? "true" : void 0)}
+      >
+        <slot name="left-icon" class="icon-size-4"></slot>
+        <slot></slot>
+        <slot name="right-icon" class="icon-size-4"></slot>
+      </a>
+    `;
+  }
+};
+exports.DaikinLink.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: fit-content;
+      height: fit-content;
+    }
+
+    :host([show-visited]:not([disabled])) a:visited {
+      color: #5c2365; /* system-state-visited-active */
+    }
+
+    :host([show-visited]:not([disabled])) a:hover:visited {
+      color: #4a1c51; /* system-state-visited-hover */
+    }
+
+    :host([show-visited]:not([disabled])) a:hover:visited {
+      background-color: #f0ddf3; /* system-state-visited-hover */
+    }
+
+    :host([show-visited]:not([disabled])) a:active:visited {
+      color: #37153d; /* system-state-visited-press */
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinLink.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinLink.prototype, "target", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinLink.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], exports.DaikinLink.prototype, "showVisited", 2);
+exports.DaikinLink = __decorateClass([
+  decorators_js.customElement("daikin-link")
+], exports.DaikinLink);

package/dist/cjs-dev/components/link/daikin-link.d.cts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * The link component uses the standard HTML <a> tag. Unlike the link used in the button component, it provides the style of the text as it is.
+ *
+ * @slot - A slot for the link content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/link/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-link href="https://www.example.com">
+ *   Link label
+ * </daikin-link>
+ * ```
+ */
+export declare class DaikinLink extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Link `href`.
+     */
+    href: string | null;
+    /**
+     * Link `target`.
+     */
+    target: string | null;
+    /**
+     * Whether or not disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether or not to change the color of visited links.
+     */
+    showVisited: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-link": DaikinLink;
+    }
+}

package/dist/cjs-dev/components/link/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinLink = require("./daikin-link.cjs");
+Object.defineProperty(exports, "DaikinLink", {
+  enumerable: true,
+  get: () => daikinLink.DaikinLink
+});

package/dist/cjs-dev/components/link/index.d.cts

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

package/dist/cjs-dev/components/list/index.d.cts

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

package/dist/cjs-dev/components/list-item/daikin-list-item.cjs

@@ -5,7 +5,6 @@ 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("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -41,6 +40,18 @@ const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-le
     }
   }
 });
+const cvaIcon = classVarianceAuthority.cva(["icon-size-6"], {
+  variants: {
+    position: {
+      left: [],
+      right: ["pointer-events-none"]
+    },
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
 exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
   constructor() {
     super();
@@ -66,7 +77,10 @@ exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
   render() {
     const disabled = this._disabled;
     const content = lit.html`<span class="flex items-center w-full relative">
-      <slot name="left-icon">
+      <slot
+        name="left-icon"
+        class=${cvaIcon({ disabled: this.disabled, position: "left" })}
+      >
         <span class="block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
@@ -95,7 +109,10 @@ exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
         class="flex items-center gap-3"
         @click=${this._handleClickAction}
       >
-        <slot name="right-icon" class="pointer-events-none">
+        <slot
+          name="right-icon"
+          class=${cvaIcon({ disabled: this.disabled, position: "right" })}
+        >
           <span class="block -mr-1"></span>
         </slot>
       </slot>

package/dist/cjs-dev/components/list-item/index.d.cts

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

package/dist/cjs-dev/components/notification/daikin-notification.cjs

@@ -6,7 +6,6 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const events = require("../../constants/events.cjs");
 const tailwind = require("../../tailwind.css.cjs");
-require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -45,15 +44,35 @@ const cvaContainer = classVarianceAuthority.cva(
   }
 );
 const cvaIconContainer = classVarianceAuthority.cva(
-  ["flex-none", "flex", "justify-center", "items-center", "w-[44px]"],
+  [
+    "flex-none",
+    "flex",
+    "justify-center",
+    "items-center",
+    "w-[2.75rem]",
+    "after:size-6",
+    "after:text-white"
+  ],
   {
     variants: {
       status: {
-        positive: ["bg-[--colorFeedbackPositive]"],
-        negative: ["bg-[--colorFeedbackNegative]"],
-        warning: ["bg-[--colorFeedbackWarning]"],
-        alarm: ["bg-[--colorFeedbackAlarm]"],
-        information: ["bg-[--colorFeedbackInformation]"]
+        positive: [
+          "bg-[--colorFeedbackPositive]",
+          "after:i-daikin-status-positive"
+        ],
+        negative: [
+          "bg-[--colorFeedbackNegative]",
+          "after:i-daikin-status-negative"
+        ],
+        warning: [
+          "bg-[--colorFeedbackWarning]",
+          "after:i-daikin-status-warning"
+        ],
+        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
+        information: [
+          "bg-[--colorFeedbackInformation]",
+          "after:i-daikin-status-information"
+        ]
       }
     },
     defaultVariants: {
@@ -85,7 +104,7 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
     this.closeButton = false;
   }
   /**
-   * Call the event registered in "close"
+   * Call the event registered in "close".
    */
   _handleClickClose() {
     const event = new CustomEvent(events.EVENT_CLOSE);
@@ -108,13 +127,7 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
             class=${cvaIconContainer({
       status: this.status
     })}
-          >
-            <daikin-icon
-              icon=${this.status}
-              color="white"
-              size="xl"
-            ></daikin-icon>
-          </div>
+          ></div>
           <div
             class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
           >
@@ -134,15 +147,9 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
                   <div class="flex items-center gap-5">
                     <button
                       aria-label="Close"
-                      class="relative flex w-5 h-5"
+                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
                       @click=${this._handleClickClose}
-                    >
-                      <daikin-icon
-                        icon="close"
-                        size="l"
-                        color="default"
-                      ></daikin-icon>
-                    </button>
+                    ></button>
                   </div>
                 ` : lit.nothing}
           </div>
@@ -183,7 +190,7 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinNotification.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean })
+  decorators_js.property({ type: Boolean, attribute: "close-button" })
 ], exports.DaikinNotification.prototype, "closeButton", 2);
 exports.DaikinNotification = __decorateClass([
   decorators_js.customElement("daikin-notification")

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

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaContainer: (props?: ({
     variant?: "toast" | "inline" | null | undefined;
     status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
@@ -44,27 +44,27 @@ type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof c
 export declare class DaikinNotification extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Type of notification
+     * Type of notification.
      */
     variant: NotificationVariantProps["variant"];
     /**
-     * Status of notification
+     * Status of notification.
      */
     status: NotificationVariantProps["status"];
     /**
-     * Display in single or multiple lines
+     * Display in single or multiple lines.
      */
     line: NotificationVariantProps["line"];
     /**
-     * Whether the component is open
+     * Specify the notification's open state.
      */
     open: boolean;
     /**
-     * Whether to display the close button
+     * Whether to display the close button.
      */
     closeButton: boolean;
     /**
-     * Call the event registered in "close"
+     * Call the event registered in "close".
      */
     private _handleClickClose;
     render(): import('lit-html').TemplateResult<1> | typeof nothing;

package/dist/cjs-dev/components/notification/index.d.cts

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

package/dist/cjs-dev/components/pagination/daikin-pagination.cjs

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const repeat_js = require("lit/directives/repeat.js");
+const tailwind = require("../../tailwind.css.cjs");
+const paginationUtils = require("./pagination-utils.cjs");
+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 cvaPageButton = classVarianceAuthority.cva(
+  [
+    "border-0",
+    "no-underline",
+    "flex",
+    "relative",
+    "items-center",
+    "justify-center",
+    "min-w-12",
+    "min-h-12",
+    "font-daikinSerif",
+    "text-base",
+    "not-italic",
+    "leading-6",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-1",
+    "focus-visible:outline-[#0081C0]"
+  ],
+  {
+    variants: {
+      active: {
+        true: [
+          "text-daikinBlue-500",
+          "focus-visible:text-daikinBlue-500",
+          "font-bold",
+          "hover:text-[#0081C0]",
+          "hover:bg-[#DDF3FC]",
+          "active:text-[#00689A]",
+          "active:bg-[#BBE7F9]",
+          "after:bg-daikinBlue-500",
+          "after:content-['']",
+          "after:h-1",
+          "after:absolute",
+          "after:inset-0",
+          "after:top-auto"
+        ],
+        false: [
+          "text-inherit",
+          "font-normal",
+          "text-daikinNeutral-700",
+          "active:bg-daikinNeutral-100",
+          "active:text-daikinNeutral-800",
+          "hover:bg-[#F2F2F2]",
+          "hover:text-[#515151]"
+        ]
+      }
+    }
+  }
+);
+const cvaEllipsis = classVarianceAuthority.cva([
+  "relative",
+  "text-inherit",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6"
+]);
+const cvaChevronButton = classVarianceAuthority.cva([
+  "text-inherit",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "text-[#515151]",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6",
+  "enabled:hover:bg-[#F2F2F2]",
+  "enabled:hover:text-daikinNeutral-800",
+  "enabled:active:bg-daikinNeutral-100",
+  "enabled:active:text-daikinNeutral-900",
+  "disabled:!text-daikinNeutral-400",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-[#0081C0]"
+]);
+exports.DaikinPagination = class DaikinPagination extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.current = 1;
+    this.total = 1;
+    this.window = 5;
+  }
+  _goto(page) {
+    this.current = this.current = Math.max(Math.min(page, this.total), 1);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  _gotoOffset(offset) {
+    this._goto(this.current + offset);
+  }
+  render() {
+    const cvaChevron = cvaChevronButton();
+    const pageArray = paginationUtils.calculatePagination(
+      this.total,
+      this.current,
+      this.window
+    );
+    return lit.html`
+      <div aria-label="Pagination" class="inline-flex gap-1">
+        <button
+          class=${cvaChevron}
+          type="button"
+          aria-label="Go to the previous page."
+          ?disabled=${this.current === 1}
+          @click=${() => this._gotoOffset(-1)}
+        >
+          <span class="i-daikin-pagination-chevron-left w-4 h-4"></span>
+        </button>
+        ${repeat_js.repeat(
+      pageArray,
+      (item, index) => item.type === "page" ? `p${item.page}` : `e${index}`,
+      (item) => {
+        if (item.type === "page") {
+          const buttonClassName = cvaPageButton({
+            active: this.current === item.page
+          });
+          return lit.html`
+                <button
+                  type="button"
+                  class=${buttonClassName}
+                  @click=${() => this._goto(item.page)}
+                  aria-label="Go to page ${item.page}"
+                  aria-current=${ifDefined_js.ifDefined(
+            item.page === this.current ? "page" : void 0
+          )}
+                >
+                  ${item.page}
+                </button>
+              `;
+        } else {
+          return lit.html`
+                <span class=${cvaEllipsis()}>
+                  <button
+                    type="button"
+                    disabled
+                    aria-label="Expand the omitted pages."
+                    class="after:content-['._._.']"
+                  ></button>
+                </span>
+              `;
+        }
+      }
+    )}
+        <button
+          type="button"
+          class=${cvaChevron}
+          aria-label="Go to the next page."
+          ?disabled=${this.current === this.total}
+          @click=${() => this._gotoOffset(1)}
+        >
+          <span class="i-daikin-pagination-chevron-right w-4 h-4"></span>
+        </button>
+      </div>
+    `;
+  }
+};
+exports.DaikinPagination.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinPagination.prototype, "current", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinPagination.prototype, "total", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinPagination.prototype, "window", 2);
+exports.DaikinPagination = __decorateClass([
+  decorators_js.customElement("daikin-pagination")
+], exports.DaikinPagination);