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

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

@@ -14,125 +14,117 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaCheckbox = classVarianceAuthority.cva(
-  [
-    "appearance-none",
-    "inline-block",
-    "relative",
-    "rounded-sm",
-    "border-solid",
-    "border-2",
-    "after:absolute",
-    "after:text-white",
-    "checked:after:i-daikin-checkbox-checked",
-    "indeterminate:after:i-daikin-checkbox-indeterminate",
-    "focus-visible:outline-none",
-    "border-daikinNeutral-400",
-    "enabled:indeterminate:border-daikinBlue-600",
-    "enabled:indeterminate:bg-daikinBlue-600",
-    "enabled:checked:border-daikinBlue-600",
-    "enabled:checked:bg-daikinBlue-600",
-    "aria-controllable:focus-visible:border-daikinBlue-700",
-    "aria-controllable:hover:border-daikinBlue-300",
-    "aria-controllable:active:border-daikinBlue-600",
-    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
-    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
-    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
-    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
-    "aria-controllable:checked:hover:border-daikinBlue-300",
-    "aria-controllable:checked:hover:bg-daikinBlue-300",
-    "aria-controllable:checked:active:border-daikinBlue-600",
-    "aria-controllable:checked:active:bg-daikinBlue-600",
-    "aria-controllable:indeterminate:active:border-daikinBlue-600",
-    "aria-controllable:indeterminate:active:bg-daikinBlue-600",
-    "aria-controllable:indeterminate:hover:border-daikinBlue-300",
-    "aria-controllable:indeterminate:hover:bg-daikinBlue-300",
-    "aria-controllable:indeterminate:focus-visible:border-daikinBlue-700",
-    "aria-controllable:indeterminate:focus-visible:bg-daikinBlue-700",
-    "disabled:border-daikinNeutral-200",
-    "disabled:bg-white",
-    "disabled:indeterminate:bg-daikinNeutral-200",
-    "disabled:checked:bg-daikinNeutral-200"
-  ],
-  {
-    variants: {
-      size: {
-        small: ["w-[18px]", "h-[18px]"],
-        large: ["w-5", "h-5"]
-      }
+const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
+  "block",
+  "size-4",
+  "relative",
+  "bg-white",
+  "border-daikinNeutral-600",
+  "border-2",
+  "rounded-sm",
+  "appearance-none",
+  "before:text-white",
+  "before:absolute",
+  "before:m-auto",
+  "before:inset-0",
+  "checked:before:i-daikin-checkbox-checked",
+  "indeterminate:before:i-daikin-checkbox-indeterminate",
+  "indeterminate:before:size-2.5",
+  "focus-visible:outline",
+  "focus-visible:outline-1",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-daikinBlue-700",
+  "enabled:group-hover:border-daikinNeutral-400",
+  "enabled:group-active:border-daikinNeutral-700",
+  "enabled:checked:border-daikinBlue-500",
+  "enabled:checked:bg-daikinBlue-500",
+  "enabled:checked:group-hover:bg-daikinBlue-300",
+  "enabled:checked:group-hover:border-daikinBlue-300",
+  "enabled:checked:group-hover:before:text-white",
+  "enabled:checked:group-active:bg-daikinBlue-600",
+  "enabled:checked:group-active:border-daikinBlue-600",
+  "enabled:checked:group-active:before:text-white",
+  "enabled:indeterminate:bg-daikinBlue-500",
+  "enabled:indeterminate:border-daikinBlue-500",
+  "enabled:indeterminate:group-hover:bg-daikinBlue-300",
+  "enabled:indeterminate:group-hover:border-daikinBlue-300",
+  "enabled:indeterminate:group-hover:before:text-white",
+  "enabled:indeterminate:group-active:bg-daikinBlue-600",
+  "enabled:indeterminate:group-active:border-daikinBlue-600",
+  "enabled:indeterminate:group-active:before:text-white",
+  "disabled:border-daikinNeutral-200",
+  "disabled:bg-white",
+  "disabled:checked:bg-daikinNeutral-200",
+  "disabled:indeterminate:bg-daikinNeutral-200"
+])();
+const cvaLabel = classVarianceAuthority.cva([], {
+  variants: {
+    disabled: {
+      false: [],
+      true: ["text-daikinNeutral-200"]
     }
   }
-);
-const cvaLabel = classVarianceAuthority.cva(
-  ["leading-8", "not-italic", "font-normal", "align-middle"],
-  {
-    variants: {
-      size: {
-        small: ["text-sm"],
-        large: ["text-base"]
-      }
-    },
-    defaultVariants: {
-      size: "small"
-    }
-  }
-);
+});
 exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
     this.label = "";
-    this.size = "small";
     this.labelPosition = "right";
-    this.disabled = false;
-    this.readonly = false;
     this.checkState = "unchecked";
-    this.name = "";
-    this.value = "";
-    this.error = false;
+    this.disabled = false;
+    this._internals = this.attachInternals();
   }
-  _handleClick(event) {
-    if (this.readonly || this.disabled) {
-      event.preventDefault();
-    }
+  get checked() {
+    return this.checkState === "checked";
+  }
+  /**
+   * A property-only accessor for `checkState` provided for convenience.
+   * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
+   * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
+   */
+  set checked(value) {
+    this.checkState = value ? "checked" : "unchecked";
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
-  get checked() {
-    return this.checkState === "checked";
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+    }
   }
   _handleChange(event) {
-    if (!this._input) {
-      return;
-    }
-    this.checkState = this._input.checked ? "checked" : "unchecked";
+    this.checkState = event.target.checked ? "checked" : "unchecked";
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const checkboxClassName = cvaCheckbox({ size: this.size });
-    const labelClassName = cvaLabel({ size: this.size });
-    const isIndeterminate = this.checkState === "indeterminate";
-    const labelText = this.label ? lit.html`<span class=${labelClassName}>${this.label}</span>` : lit.html``;
-    const inputTag = lit.html`<input
-      class=${checkboxClassName}
-      type="checkbox"
-      name=${this.name}
-      value=${this.value}
-      aria-readonly=${this.readonly}
-      .indeterminate=${isIndeterminate}
-      .checked=${this.checked}
-      ?readonly=${this.readonly}
-      ?disabled=${this.disabled}
-      @change=${this._handleChange}
-      @click=${this._handleClick}
-    />`;
-    const content = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
-    return lit.html`<label
-      class="inline-flex gap-[10px] items-center font-daikinSerif"
-      >${content}</label
-    >`;
+    return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
+      <div class="p-2">
+        <input
+          class=${CHECKBOX_CLASS_NAME}
+          type="checkbox"
+          name=${this.name}
+          value=${this.value}
+          aria-label=${this.labelPosition === "hidden" ? this.label : lit.nothing}
+          .indeterminate=${this.checkState === "indeterminate"}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+          @click=${this._handleClick}
+        />
+      </div>
+      <span
+        class=${cvaLabel({
+      disabled: this.disabled
+    })}
+        ?hidden=${this.labelPosition === "hidden"}
+      >
+        ${this.label}
+      </span>
+    </label>`;
   }
   updated(changedProperties) {
     if (changedProperties.has("checkState")) {
@@ -144,40 +136,28 @@ exports.DaikinCheckbox.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
     }
   `;
 exports.DaikinCheckbox.formAssociated = true;
 __decorateClass([
-  decorators_js.query("input")
-], exports.DaikinCheckbox.prototype, "_input", 2);
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCheckbox.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinCheckbox.prototype, "label", 2);
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
-], exports.DaikinCheckbox.prototype, "size", 2);
+], exports.DaikinCheckbox.prototype, "label", 2);
 __decorateClass([
   decorators_js.property({ type: String, attribute: "label-position" })
 ], exports.DaikinCheckbox.prototype, "labelPosition", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinCheckbox.prototype, "disabled", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinCheckbox.prototype, "readonly", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true, attribute: "check-state" })
 ], exports.DaikinCheckbox.prototype, "checkState", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinCheckbox.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinCheckbox.prototype, "error", 2);
+], exports.DaikinCheckbox.prototype, "disabled", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators_js.customElement("daikin-checkbox")
 ], exports.DaikinCheckbox);

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

@@ -1,12 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-declare const cvaCheckbox: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaLabel: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLabel>;
 /**
  * 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.
@@ -16,56 +8,54 @@ type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLab
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * ```
+ *
  * ```html
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
 export declare class DaikinCheckbox extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    private _handleClick;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    private _input;
-    get checked(): boolean;
-    private _handleChange;
-    /**
-     * Specify the label text for check box
-     */
-    label: string;
     /**
-     * Specify the component size
+     * Form name of the checkbox.
      */
-    size: CheckboxVariantProps["size"];
+    name: string;
     /**
-     * Specify the label position
-     * when `left` the label will be in left of checkbox, when `right` label will be in right of checkbox
+     * Form value of the checkbox.
      */
-    labelPosition: "left" | "right";
+    value: string;
     /**
-     * Specify whether the Checkbox should be disabled
+     * Label text for the checkbox.
      */
-    disabled: boolean;
+    label: string;
     /**
-     * Specify whether the checkbox is read only
+     * Label position.
+     * - `right` (default): The label will be placed to the right of the checkbox.
+     * - `hidden`: The label will not be shown.
      */
-    readonly: boolean;
+    labelPosition: "right" | "hidden";
     /**
-     * Specify whether the checkbox is be checked
+     * Checked state of the checkbox.
      */
     checkState: "unchecked" | "indeterminate" | "checked";
     /**
-     * The form name.
+     * Whether the checkbox is disabled.
      */
-    name: string;
-    /**
-     * The value.
-     */
-    value: string;
+    disabled: boolean;
+    get checked(): boolean;
     /**
-     * Specify whether the Checkbox is in a error state
+     * A property-only accessor for `checkState` provided for convenience.
+     * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
+     * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
      */
-    error: boolean;
+    set checked(value: boolean);
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _handleClick;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }
@@ -74,4 +64,3 @@ declare global {
         "daikin-checkbox": DaikinCheckbox;
     }
 }
-export {};

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

@@ -20,6 +20,10 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * ```
+ *
  * ```html
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
  * ```

package/dist/cjs/components/icon/icons.json.cjs

@@ -24,6 +24,26 @@ const icons = {
   warning: {
     "class": "i-daikin-notification-status-warning",
     color: null
+  },
+  error: {
+    "class": "i-daikin-status-error",
+    color: "#ff4949"
+  },
+  "chevron-up": {
+    "class": "i-daikin-chevron-up",
+    color: null
+  },
+  "chevron-down": {
+    "class": "i-daikin-chevron-down",
+    color: null
+  },
+  "chevron-left": {
+    "class": "i-daikin-chevron-left",
+    color: null
+  },
+  "chevron-right": {
+    "class": "i-daikin-chevron-right",
+    color: null
   }
 };
 exports.icons = icons;

package/dist/cjs/components/icon/icons.json.d.ts

@@ -23,6 +23,26 @@ declare const _default: {
     "warning": {
       "class": "i-daikin-notification-status-warning",
       "color": null
+    },
+    "error": {
+      "class": "i-daikin-status-error",
+      "color": "#ff4949"
+    },
+    "chevron-up": {
+      "class": "i-daikin-chevron-up",
+      "color": null
+    },
+    "chevron-down": {
+      "class": "i-daikin-chevron-down",
+      "color": null
+    },
+    "chevron-left": {
+      "class": "i-daikin-chevron-left",
+      "color": null
+    },
+    "chevron-right": {
+      "class": "i-daikin-chevron-right",
+      "color": null
     }
   }
 }

package/dist/cjs/components/index.cjs

@@ -8,12 +8,14 @@ const daikinButton = require("./button/daikin-button.cjs");
 const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
 const daikinIcon = require("./icon/daikin-icon.cjs");
 const daikinInputGroup = require("./input-group/daikin-input-group.cjs");
+const daikinList = require("./list/daikin-list.cjs");
+const daikinListItem = require("./list-item/daikin-list-item.cjs");
 const daikinNotification = require("./notification/daikin-notification.cjs");
-const daikinPanelSwitcher = require("./panel-switcher/daikin-panel-switcher.cjs");
 const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
 const daikinRadio = require("./radio/daikin-radio.cjs");
 const daikinTab = require("./tab/daikin-tab.cjs");
-const daikinTabGroup = require("./tab-group/daikin-tab-group.cjs");
+const daikinTabPanels = require("./tab-panels/daikin-tab-panels.cjs");
+const daikinTabs = require("./tabs/daikin-tabs.cjs");
 const daikinTextInput = require("./text-input/daikin-text-input.cjs");
 const daikinTextarea = require("./textarea/daikin-textarea.cjs");
 const daikinToggle = require("./toggle/daikin-toggle.cjs");
@@ -51,13 +53,17 @@ Object.defineProperty(exports, "DaikinInputGroup", {
   enumerable: true,
   get: () => daikinInputGroup.DaikinInputGroup
 });
-Object.defineProperty(exports, "DaikinNotification", {
+Object.defineProperty(exports, "DaikinList", {
   enumerable: true,
-  get: () => daikinNotification.DaikinNotification
+  get: () => daikinList.DaikinList
+});
+Object.defineProperty(exports, "DaikinListItem", {
+  enumerable: true,
+  get: () => daikinListItem.DaikinListItem
 });
-Object.defineProperty(exports, "DaikinPanelSwitcher", {
+Object.defineProperty(exports, "DaikinNotification", {
   enumerable: true,
-  get: () => daikinPanelSwitcher.DaikinPanelSwitcher
+  get: () => daikinNotification.DaikinNotification
 });
 Object.defineProperty(exports, "DaikinProgressBar", {
   enumerable: true,
@@ -71,9 +77,13 @@ Object.defineProperty(exports, "DaikinTab", {
   enumerable: true,
   get: () => daikinTab.DaikinTab
 });
-Object.defineProperty(exports, "DaikinTabGroup", {
+Object.defineProperty(exports, "DaikinTabPanels", {
+  enumerable: true,
+  get: () => daikinTabPanels.DaikinTabPanels
+});
+Object.defineProperty(exports, "DaikinTabs", {
   enumerable: true,
-  get: () => daikinTabGroup.DaikinTabGroup
+  get: () => daikinTabs.DaikinTabs
 });
 Object.defineProperty(exports, "DaikinTextInput", {
   enumerable: true,

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

@@ -6,12 +6,14 @@ export * from './button';
 export * from './checkbox';
 export * from './icon';
 export * from './input-group';
+export * from './list';
+export * from './list-item';
 export * from './notification';
-export * from './panel-switcher';
 export * from './progress-bar';
 export * from './radio';
 export * from './tab';
-export * from './tab-group';
+export * from './tab-panels';
+export * from './tabs';
 export * from './text-input';
 export * from './textarea';
 export * from './toggle';

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

@@ -70,7 +70,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends lit.LitElement {
         <slot @slotchange=${this._handleSlotChange}></slot>
         ${this.helper && !this.error ? lit.html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
         ${!this.disabled && !!this.error ? lit.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]"
+              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-error before:block before:w-[16px] before:h-[22px]"
               >${this.error}</span
             >` : null}
       </label>

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

@@ -15,6 +15,12 @@ type ControlElement = DaikinTextInput | DaikinTextarea;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/text-input/index.js";
+ * import "@daikin-oss/design-system-web-components/components/textarea/index.js";
+ * ```
+ *
  * With Text Input:
  *
  * ```html

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("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;
+};
+exports.DaikinList = class DaikinList extends lit.LitElement {
+  render() {
+    return lit.html`<div role="list">
+      <slot></slot>
+    </div>`;
+  }
+};
+exports.DaikinList = __decorateClass([
+  decorators_js.customElement("daikin-list")
+], exports.DaikinList);

package/dist/cjs/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/cjs/components/list/index.cjs

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

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

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