@daikin-oss/design-system-web-components 0.2.0 → 0.3.1

package/README.md

@@ -8,26 +8,66 @@ This project is an implementation of the Daikin Design Kit using Web Components.
 
 Start by installing the package:
 
-```bash
-npm i @daikin-oss/design-system-web-components
+```sh
+npm install @daikin-oss/design-system-web-components
 ```
 
-You can then import necessary components in your bundle:
+You can then import necessary components in your bundle (the .js extension is optional):
 
-```javascript
-import "@daikin-oss/design-system-web-components/dist/components/button/index.js";
+```js
+import "@daikin-oss/design-system-web-components/components/button/index.js";
 ```
 
 By default, out-of-the-box, the styles are for Daikin brand in light mode.
 
+### Fonts
+
+We use Roboto as the font for our UI components.
+This font is not included in our package, so developers will need to include it in their apps.
+
+The required weights and variants are as follows:
+
+- Regular (400), Normal
+- Bold (700), Normal
+
+#### With Google Fonts
+
+If you can use an external CDN, you can use Google Fonts to load it.
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+#### With Fontsource
+
+If you want to deliver fonts within your app without relying on an external CDN, you can use a package like [Fontsource](https://fontsource.org/fonts/roboto) to do this.
+
+Install the package with:
+
+```sh
+npm install @fontsource/roboto
+```
+
+Then import it in your app:
+
+```js
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/700.css";
+```
+
 ### Dark Mode and Brands/Themes
 
 _Due to the encapsulation of styles by the Web Components specification, how themes are applied may change in the future._
 
 For dark-mode support and non-daikin brands, you need to add the `tokens` package and include the CSS reference in your html:
 
-```bash
-npm install '@daikin-oss/dds-tokens
+```sh
+npm install @daikin-oss/dds-tokens
 ```
 
 #### Dark Mode

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.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;
+};
+exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
+  render() {
+    return lit.html`<div class="w-full border-y-[1px] border-y-[#CECECE]">
+      <slot></slot>
+    </div>`;
+  }
+};
+exports.DaikinAccordion.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ::slotted(daikin-accordion-item:not(:last-child)) {
+      border-bottom: 1px solid #cecece;
+    }
+  `;
+exports.DaikinAccordion = __decorateClass([
+  decorators_js.customElement("daikin-accordion")
+], exports.DaikinAccordion);

package/dist/cjs/components/accordion/daikin-accordion.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+
+/**
+ * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
+ * Currently it only provides appropriate styles for individual accordion items.
+ *
+ * Hierarchy:
+ * - `daikin-accordion` > `daikin-accordion-item`
+ *
+ * @slot - A slot for the accordion items. Place `daikin-accordion-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-accordion>
+ *   <daikin-accordion-item title="The first accordion item">
+ *     Accordion 1 content.
+ *   </daikin-accordion-item>
+ *   <daikin-accordion-item title="The second accordion item" open>
+ *     Accordion 2 content.
+ *   </daikin-accordion-item>
+ *   <daikin-accordion-item title="The third accordion item" disabled>
+ *     Accordion 3 content.
+ *   </daikin-accordion-item>
+ *   <daikin-accordion-item title="The fourth accordion item" open disabled>
+ *     Accordion 4 content.
+ *   </daikin-accordion-item>
+ * </daikin-accordion>
+ * ```
+ */
+export declare class DaikinAccordion extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-accordion": DaikinAccordion;
+    }
+}
+export default DaikinAccordion;

package/dist/cjs/components/accordion/index.cjs

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

package/dist/cjs/components/accordion/index.d.ts

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

package/dist/cjs/components/accordion-item/daikin-accordion-item.cjs

@@ -0,0 +1,177 @@
+"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 ref_js = require("lit/directives/ref.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 cvaDetails = classVarianceAuthority.cva(
+  ["flex", "w-full", "h-max", "bg-white", "font-daikinSerif", "overflow-clip"],
+  {
+    variants: {
+      status: {
+        enabled: [],
+        disabled: ["text-[#DCDCDC]"]
+      }
+    }
+  }
+);
+const cvaSummary = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "h-12",
+    "px-5",
+    "outline-none",
+    "relative",
+    "after:block",
+    "after:w-5",
+    "after:h-5",
+    "after:m-auto",
+    "after:top-0",
+    "after:right-4",
+    "after:bottom-0",
+    "after:absolute",
+    "after:i-daikin-accordion-chevron-up",
+    "after:transition-all"
+  ],
+  {
+    variants: {
+      visible: {
+        open: ["after:rotate-0"],
+        close: ["after:-rotate-180"]
+      },
+      status: {
+        enabled: [
+          "hover:bg-[#DCDCDC]",
+          "hover:bg-[#DCDCDC]",
+          "hover:cursor-pointer",
+          "focus-visible:outline",
+          "focus-visible:outline-[2px]",
+          "focus-visible:outline-[#0097E0]",
+          "focus-visible:outline-offset-[-2px]",
+          "after:text-[#828282]"
+        ],
+        disabled: ["text-[#DCDCDC]", "after:text-[#DCDCDC]"]
+      }
+    }
+  }
+);
+const animationOption = {
+  duration: 250,
+  easing: "ease-in-out"
+};
+const contentCloseKeyframe = {
+  height: 0
+};
+const getContentOpenKeyframe = (content) => ({
+  height: `${content.offsetHeight}px`
+});
+exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._contentRef = ref_js.createRef();
+    this.title = "";
+    this.open = false;
+    this.disabled = false;
+    this._detailsOpen = false;
+  }
+  _contentAnimate() {
+    const content = this._contentRef.value;
+    if (!content || this.open === this._detailsOpen) {
+      return;
+    }
+    if (this.open) {
+      this._detailsOpen = this.open;
+      content.animate(
+        [contentCloseKeyframe, getContentOpenKeyframe(content)],
+        animationOption
+      );
+    } else {
+      const animation = content.animate(
+        [getContentOpenKeyframe(content), contentCloseKeyframe],
+        animationOption
+      );
+      animation.onfinish = () => {
+        this._detailsOpen = this.open;
+      };
+    }
+  }
+  _handleSummaryClick(e) {
+    e.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  render() {
+    const accordionDetailsClassName = cvaDetails({
+      status: this.disabled ? "disabled" : "enabled"
+    });
+    const accordionSummaryClassName = cvaSummary({
+      status: this.disabled ? "disabled" : "enabled",
+      visible: this.open ? "open" : "close"
+    });
+    return lit.html`<details
+      class=${accordionDetailsClassName}
+      ?open=${this._detailsOpen}
+      ?data-open=${this.open}
+      aria-disabled=${this.disabled}
+    >
+      <summary
+        class=${accordionSummaryClassName}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this._handleSummaryClick}
+      >
+        ${this.title}
+      </summary>
+      <div ${ref_js.ref(this._contentRef)}>
+        <div class="pt-2 pb-6 px-5 text-sm">
+          <slot></slot>
+        </div>
+      </div>
+    </details>`;
+  }
+  firstUpdated() {
+    this._detailsOpen = this.open;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      this._contentAnimate();
+    }
+  }
+};
+exports.DaikinAccordionItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinAccordionItem.prototype, "title", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAccordionItem.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinAccordionItem.prototype, "_detailsOpen", 2);
+exports.DaikinAccordionItem = __decorateClass([
+  decorators_js.customElement("daikin-accordion-item")
+], exports.DaikinAccordionItem);

package/dist/cjs/components/accordion-item/daikin-accordion-item.d.ts

@@ -0,0 +1,56 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The accordion item component is a child element within the `daikin-accordion` component.
+ * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
+ * This component is responsible for displaying the specific content within the accordion and allowing users to interact with each section independently.
+ *
+ * Hierarchy:
+ * - `daikin-accordion` > `daikin-accordion-item`
+ *
+ * @slot - A slot for the accordion item content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-accordion-item title="The first accordion item">
+ *   Accordion 1 content.
+ * </daikin-accordion-item>
+ * ```
+ */
+export declare class DaikinAccordionItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _contentRef;
+    /**
+     * Heading of accordion
+     */
+    title: string;
+    /**
+     * Whether the accordion is open
+     */
+    open: boolean;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled: boolean;
+    /**
+     * Open attribute of the actual details element
+     *
+     * The default `open` attribute of the default details element does not allow the display of content to have transitions.
+     * To solve this, the `open` property that `daikin-accordion-item` receives manages the opening and closing of items independently of the open attribute.
+     *
+     * The `open` attribute, which should be present, is taken over by `_detailsOpen`.
+     */
+    private _detailsOpen;
+    private _contentAnimate;
+    private _handleSummaryClick;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-accordion-item": DaikinAccordionItem;
+    }
+}
+export default DaikinAccordionItem;

package/dist/cjs/components/accordion-item/index.cjs

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

package/dist/cjs/components/accordion-item/index.d.ts

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

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

@@ -5,6 +5,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.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) => {
@@ -15,16 +16,21 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const BUTTON_ICON_SIZE_MAP = {
+  default: "m",
+  condensed: "s"
+};
 const cvaButton = classVarianceAuthority.cva(
   [
     "inline-flex",
     "justify-center",
     "items-center",
+    "gap-2",
     "font-daikinSerif",
     "font-bold",
     "rounded-lg",
     "tracking-wide",
-    "text-wrap",
+    "text-nowrap",
     "disabled:cursor-default",
     "w-full",
     "h-full"
@@ -92,8 +98,8 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
     super(...arguments);
     this.variant = "primary";
     this.disabled = false;
-    this.rightIcon = "";
-    this.leftIcon = "";
+    this.rightIcon = null;
+    this.leftIcon = null;
     this.href = "";
     this.size = "default";
     this.type = "button";
@@ -106,12 +112,20 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
       size: this.size
     });
     const content = lit.html`
-      <slot name="leftIcon"></slot>
-      <span><slot></slot></span>
-      <slot name="rightIcon"></slot>
+      ${this.leftIcon ? lit.html`<daikin-icon
+            icon=${this.leftIcon}
+            size=${BUTTON_ICON_SIZE_MAP[this.size]}
+            color="current"
+          ></daikin-icon>` : null}
+      <slot></slot>
+      ${this.rightIcon ? lit.html`<daikin-icon
+            icon=${this.rightIcon}
+            size=${BUTTON_ICON_SIZE_MAP[this.size]}
+            color="current"
+          ></daikin-icon>` : null}
     `;
     if (this.href) {
-      return lit.html` <a
+      return lit.html`<a
         href="${this.href}"
         class="${buttonClassName}"
         role="${this.role}"
@@ -130,6 +144,10 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
       </button>
     `;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a, _b;
     (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus(options);

package/dist/cjs/components/button/daikin-button.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import { ARIARole } from '../../lit-analyzer-types';
 import { MergeVariantProps } from '../../type-utils';
+import { IconType } from '../icon/daikin-icon';
 
 declare const cvaButton: (props?: ({
     intent?: "primary" | "secondary" | "tertiary" | "primaryDanger" | null | undefined;
@@ -8,7 +9,20 @@ declare const cvaButton: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
 /**
- * Primary UI component for user interaction
+ * The button component is a versatile UI element that triggers actions or submits forms when clicked.
+ * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @slot - A slot for the button content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-button>
+ *   Button label
+ * </daikin-button>
+ * ```
  */
 export declare class DaikinButton extends LitElement {
     static readonly styles: import('lit').CSSResult;
@@ -23,11 +37,11 @@ export declare class DaikinButton extends LitElement {
     /**
      * Set a icon in the right of button label.
      */
-    rightIcon: string;
+    rightIcon: IconType | null;
     /**
      * Set a icon in the left of button label.
      */
-    leftIcon: string;
+    leftIcon: IconType | null;
     /**
      * Link `href`. If present, this button is rendered as `<a>`.
      */
@@ -49,6 +63,10 @@ export declare class DaikinButton extends LitElement {
      */
     isLoading: boolean;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions | undefined): void;
 }
 declare global {

package/dist/cjs/components/button/index.cjs

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

package/dist/cjs/components/checkbox/daikin-checkbox.d.ts

@@ -9,7 +9,17 @@ declare const cvaLabel: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLabel>;
 /**
- * Primary UI component for user interaction
+ * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
+ * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
+ * This component is ideal for cases where multiple selections are allowed or required.
+ *
+ * @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 type="checkbox">` element.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
+ * ```
  */
 export declare class DaikinCheckbox extends LitElement {
     static readonly styles: import('lit').CSSResult;

package/dist/cjs/components/checkbox/index.cjs

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

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+const icons = require("./icons.json.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 iconList = Object.keys(icons.icons);
+const iconClassMap = Object.fromEntries(
+  Object.entries(icons.icons).map(([name, object]) => [name, object.class])
+);
+const cvaIcon = classVarianceAuthority.cva(["block"], {
+  variants: {
+    icon: iconClassMap,
+    size: {
+      s: [`w-[--size-s]`, `h-[--size-s]`],
+      m: [`w-[--size-m]`, `h-[--size-m]`],
+      l: [`w-[--size-l]`, `h-[--size-l]`],
+      xl: [`w-[--size-xl]`, `h-[--size-xl]`]
+    },
+    color: {
+      black: ["text-black"],
+      white: ["text-white"],
+      default: ["text-[--default-color]"],
+      current: []
+      // uses `currentColor`
+    }
+  }
+});
+exports.DaikinIcon = class DaikinIcon extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = null;
+    this.color = "default";
+    this.size = "m";
+  }
+  render() {
+    var _a;
+    const defaultColor = (_a = icons.icons[this.icon ?? ""]) == null ? void 0 : _a.color;
+    return lit.html`<span
+      class=${cvaIcon({
+      icon: this.icon,
+      color: this.color,
+      size: this.size
+    })}
+      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      role="presentation"
+    ></span>`;
+  }
+};
+exports.DaikinIcon.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --size-s: ${lit.unsafeCSS(variables_js.space12)};
+      --size-m: ${lit.unsafeCSS(variables_js.space16)};
+      --size-l: ${lit.unsafeCSS(variables_js.space20)};
+      --size-xl: ${lit.unsafeCSS(variables_js.space24)};
+
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIcon.prototype, "icon", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIcon.prototype, "color", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIcon.prototype, "size", 2);
+exports.DaikinIcon = __decorateClass([
+  decorators_js.customElement("daikin-icon")
+], exports.DaikinIcon);
+exports.iconList = iconList;