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

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @daikin-oss/design-system-web-components
 
+## 0.6.0
+
+### Minor Changes
+
+- [#89](https://github.com/dsv-rp/DDS/pull/89) [`c9bd3a7`](https://github.com/dsv-rp/DDS/commit/c9bd3a77932d1f4c3f2547f35daa7b026eff7a08) Thanks [@poetrainy](https://github.com/poetrainy)! - Dropdown: Update appearance.
+  Select: Update appearance.
+  Text Area: Update appearance.
+  Text Input: Update appearance.
+
+- [#53](https://github.com/dsv-rp/DDS/pull/53) [`651bc76`](https://github.com/dsv-rp/DDS/commit/651bc767f92be4a5b48b4c8c48b3378ef0e13855) Thanks [@yodas7](https://github.com/yodas7)! - **BREAKING CHANGE** Some attributes and properties have been renamed or removed.
+
+  The following attributes (not properties) have been renamed to kebab case:
+
+  - `<daikin-notification>`: ~~`closeButton`~~ -> `close-button`
+
+- [#91](https://github.com/dsv-rp/DDS/pull/91) [`a188387`](https://github.com/dsv-rp/DDS/commit/a188387a0da9a452be1ebad4898a54c205d73b8e) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Dropdown: The `label` attribute has been removed.
+
+### Patch Changes
+
+- [#95](https://github.com/dsv-rp/DDS/pull/95) [`0d78d58`](https://github.com/dsv-rp/DDS/commit/0d78d585963b229c68971d7558b63c2c7d073db9) Thanks [@poetrainy](https://github.com/poetrainy)! - Tooltip: Fixed an issue where the tooltip would remain opened after clicking on the trigger element. (DDS-1631)
+
+- [#88](https://github.com/dsv-rp/DDS/pull/88) [`90e1625`](https://github.com/dsv-rp/DDS/commit/90e1625f6455b60670920e397a51370eba70ace8) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Icon: The `size` attribute now defaults to `current`.
+  Icon Button: Add Icon Button Component. (DDS-1536)
+  Icon: The `size` attribute now accepts `current`, which references `--dds-icon-size` CSS variable.
+
+- [#96](https://github.com/dsv-rp/DDS/pull/96) [`bdd827f`](https://github.com/dsv-rp/DDS/commit/bdd827fe1bc400de68f11a63bb6312d368cdadd9) Thanks [@poetrainy](https://github.com/poetrainy)! - Accordion: Update appearance.
+
+- [#49](https://github.com/dsv-rp/DDS/pull/49) [`c1f44f8`](https://github.com/dsv-rp/DDS/commit/c1f44f825e0de8422be87a3efdae2e1e84d5d4da) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add pagination component
+
+- [#79](https://github.com/dsv-rp/DDS/pull/79) [`2e351b8`](https://github.com/dsv-rp/DDS/commit/2e351b8137f5d0aac1c5feb9520d25e35e81f138) Thanks [@yodas7](https://github.com/yodas7)! - Correct package type definitions. (DDS-1529)
+
+- [#93](https://github.com/dsv-rp/DDS/pull/93) [`39a5a8f`](https://github.com/dsv-rp/DDS/commit/39a5a8f27079610bf62094486888b9c7c0af3416) Thanks [@poetrainy](https://github.com/poetrainy)! - Link: Initial Implementation. (DDS-1600)
+
+- [#85](https://github.com/dsv-rp/DDS/pull/85) [`82b4fa9`](https://github.com/dsv-rp/DDS/commit/82b4fa95c1c9c60640ca3ce3d336ed00485908e4) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modified the descriptions of some properties.
+
+- [#44](https://github.com/dsv-rp/DDS/pull/44) [`d51e2ee`](https://github.com/dsv-rp/DDS/commit/d51e2eed13d3772542fb8141bb524489e2570602) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Table Component.
+
+## 0.5.0
+
+### Minor Changes
+
+- [#80](https://github.com/dsv-rp/DDS/pull/80) [`108e3c1`](https://github.com/dsv-rp/DDS/commit/108e3c152e7ad0589f34eb32f6f0345ec167fb73) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tab: The `tablist` CSS part has been removed since we started providing default styles. (DDS-1430)
+  Tab: Updated appearance. (DDS-1430)
+
+- [#86](https://github.com/dsv-rp/DDS/pull/86) [`923224e`](https://github.com/dsv-rp/DDS/commit/923224e8f90b34c58e9cd32d88d42b6bb9a4b233) Thanks [@poetrainy](https://github.com/poetrainy)! - Radio: Update appearance. (DDS-1350)
+  Checkbox: Update appearance. (DDS-1288)
+  Toggle: Update appearance. (DDS-1374)
+  Accordion: Update appearance. (DDS-1414)
+  List: Update appearance. (DDS-1414)
+
+- [#74](https://github.com/dsv-rp/DDS/pull/74) [`3151097`](https://github.com/dsv-rp/DDS/commit/3151097362d40e58e18e70914c5dd2ee83f6c430) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tooltip: The `closeOnClick` attribute has been removed. (DDS-1501)
+  **BREAKING CHANGE** Tooltip: The `trigger` and `tooltip` CSS parts have been removed. (DDS-1501)
+  **BREAKING CHANGE** Tooltip: The `tooltip` slot has been renamed to `description`. (DDS-1501)
+  Tooltip: The `trigger` attribute now accepts value of `"click"`. (DDS-1501)
+  Tooltip: The `popover-value` attribute has been added. (DDS-1501)
+
+- [#64](https://github.com/dsv-rp/DDS/pull/64) [`d0c031d`](https://github.com/dsv-rp/DDS/commit/d0c031d28a6eeac5043546ee01209e86c9f5fc2a) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Text Area: Renamed Textarea (`daikin-textarea`) to Text Area (`daikin-text-area`). (DDS-1327)
+  **BREAKING CHANGE** Text Area: The `maxlength` attribute have been removed. (DDS-1327)
+  **BREAKING CHANGE** Input Group: The `textareaCounter` attribute has been removed and the `textareaMaxCount` attribute has been added. (DDS-1327)
+  Text Area: The `resizable`, `name` and `error` attributes has been added. (DDS-1327)
+  Text Area: Updated appearance. (DDS-1327)
+
+- [#62](https://github.com/dsv-rp/DDS/pull/62) [`94d6548`](https://github.com/dsv-rp/DDS/commit/94d65484625bebb2f17f023bb55b565d29d8c972) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Text Field: Renamed Text Input to Text Field. (DDS-1325)
+  **BREAKING CHANGE** Input Group: The value accepted by `required` attribute has been changed from `boolean` to `string` (DDS-1325)
+  Text Field: The `left-icon` and `right-icon` slots have been accepted. (DDS-1325)
+  Text Field: Updated appearance. (DDS-1325)
+  Input Group: Updated appearance. (DDS-1325)
+
+### Patch Changes
+
+- [#25](https://github.com/dsv-rp/DDS/pull/25) [`2a59211`](https://github.com/dsv-rp/DDS/commit/2a592110b5e5b1aaf23060832403acba21336845) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Dropdown Component.
+
+- [#65](https://github.com/dsv-rp/DDS/pull/65) [`c72d763`](https://github.com/dsv-rp/DDS/commit/c72d76356cb42c36b3c782a12654e95790ecc837) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add radio group component. (DDS-1361)
+
+- [#83](https://github.com/dsv-rp/DDS/pull/83) [`9eae0b8`](https://github.com/dsv-rp/DDS/commit/9eae0b866bbff612c33b8920e9dda95835007dc1) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Select Component. (DDS-1566)
+
+- [#47](https://github.com/dsv-rp/DDS/pull/47) [`32ed03c`](https://github.com/dsv-rp/DDS/commit/32ed03cdb2cafb562c57776ac136a3f7be90d8c3) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Progress Indicator Component. (DDS-921)
+
 ## 0.4.0
 
 ### Minor Changes

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

@@ -16,21 +16,14 @@ var __decorateClass = (decorators, target, key, kind) => {
 exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
   _handleMoveFocus(event) {
     const moveOffset = event.detail.direction === "up" ? -1 : 1;
-    const items = this._items;
+    const items = this._items.filter(({ disabled }) => !disabled);
     const activeElement = document.activeElement;
     const focusedItemIndex = activeElement ? items.findIndex((item) => item === activeElement) : -1;
     if (focusedItemIndex < 0) {
       return;
     }
-    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
-      index = Math.sign(index % items.length) === -1 ? items.length - 1 : index % items.length;
-      const item = items[index];
-      if (item.disabled) {
-        continue;
-      }
-      item.focus();
-      break;
-    }
+    const nextItem = items[(focusedItemIndex + moveOffset + items.length) % items.length];
+    nextItem.focus();
   }
   render() {
     return lit.html`<div class="w-full">
@@ -42,7 +35,7 @@ exports.DaikinAccordion.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      min-width: 160px;
+      min-width: 10rem;
     }
 
     ::slotted(daikin-accordion-item) {

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

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

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

@@ -23,13 +23,11 @@ const cvaSummary = classVarianceAuthority.cva(
     "gap-2",
     "w-full",
     "min-h-12",
-    "py-3",
-    "pr-3",
-    "pl-4",
+    "p-3",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-daikinBlue-700",
+    "focus-visible:outline-system-state-focus",
     "after:size-6",
     "after:transition-all",
     "after:i-daikin-chevron-down"
@@ -42,11 +40,14 @@ const cvaSummary = classVarianceAuthority.cva(
       },
       disabled: {
         false: [
-          "hover:bg-daikinNeutral-100",
           "cursor-pointer",
-          "active:bg-daikinNeutral-200"
+          "hover:bg-system-background-surface-hover",
+          "active:bg-system-background-surface-press"
         ],
-        true: ["text-daikinNeutral-200", "after:text-daikinNeutral-200"]
+        true: [
+          "text-system-state-disabled",
+          "after:text-system-state-disabled"
+        ]
       }
     }
   }
@@ -128,7 +129,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
     const detailsOpen = !this.disabled && this._detailsOpen;
     const open = !this.disabled && this.open;
     return lit.html`<details
-      class="flex w-full bg-white font-daikinSerif overflow-clip"
+      class="w-full text-system-element-text-primary font-daikinSerif overflow-clip"
       ?open=${detailsOpen}
       ?data-open=${open}
       aria-disabled=${this.disabled}
@@ -152,7 +153,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
         aria-labelledby="summary"
         ?hidden=${this.disabled}
       >
-        <div class="pt-2 pr-3 pb-3 pl-4">
+        <div class="pt-2 px-3 pb-3">
           <slot></slot>
         </div>
       </div>
@@ -179,11 +180,11 @@ exports.DaikinAccordionItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --divider-top-display: none;
-      --divider-bottom-display: none;
-
       display: block;
       position: relative;
+
+      --divider-top-display: none;
+      --divider-bottom-display: none;
     }
 
     :host::before {
@@ -191,7 +192,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-top-display, none);
       width: 100%;
       height: 1px;
-      background: #828282;
+      background: #828282; /* system-element-divider-primary */
       position: absolute;
       top: 0;
     }
@@ -201,7 +202,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-bottom-display, none);
       width: 100%;
       height: 1px;
-      background: #828282;
+      background: #828282; /* system-element-divider-primary */
       position: absolute;
       bottom: 0;
     }

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

@@ -60,7 +60,7 @@ export declare class DaikinAccordionItem extends LitElement {
      * Focuses on the inner summary.
      * @param options focus options
      */
-    focus(options?: FocusOptions | undefined): void;
+    focus(options?: FocusOptions): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

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

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

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

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

@@ -57,7 +57,6 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement
     this.target = null;
     this.trailingSlash = false;
     this.last = false;
-    this.hidden = false;
   }
   render() {
     const slash = this.trailingSlash ? lit.html`<span
@@ -90,7 +89,7 @@ exports.DaikinBreadcrumbItem.styles = lit.css`
     :host {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
+      gap: 0.5rem;
       flex-shrink: 0;
     }
 
@@ -116,9 +115,6 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "last", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "hidden", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
   decorators_js.customElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaLink: (props?: ({
     variant?: "normal" | "ellipsis" | null | undefined;
     disabled?: boolean | null | undefined;
@@ -57,11 +57,6 @@ export declare class DaikinBreadcrumbItem extends LitElement {
      * Automatically set by `daikin-breadcrumb` component.
      */
     last: boolean;
-    /**
-     * Whether the link should be hidden when ellipsis mode.
-     * Set automatically by `daikin-breadcrumb`.
-     */
-    hidden: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs/components/breadcrumb-item/index.d.cts

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

package/dist/cjs/components/button/daikin-button.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) => {
@@ -21,8 +20,7 @@ const cvaButton = classVarianceAuthority.cva(
     "inline-flex",
     "justify-center",
     "items-center",
-    "w-full",
-    "h-full",
+    "size-full",
     "font-daikinSerif",
     "font-bold",
     "rounded",
@@ -32,30 +30,30 @@ const cvaButton = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
-    "focus-visible:outline-[#0081C0]",
+    "focus-visible:outline-system-state-focus",
     "var-color-transparent/color-secondary",
-    "link-disabled:var-color-daikinNeutral-400/color-primary"
+    "link-disabled:var-color-system-state-disabled/color-primary"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-daikinBlue-500/color-primary",
-          "link-enabled:hover:var-color-[#0081C0]/color-primary",
-          "link-enabled:hover:var-color-[#DDF3FC]/color-secondary",
-          "link-enabled:active:var-color-[#00689A]/color-primary",
-          "link-enabled:active:var-color-[#BBE7F9]/color-secondary"
+          "link-enabled:var-color-system-state-primary-active/color-primary",
+          "link-enabled:hover:var-color-system-state-primary-hover/color-primary",
+          "link-enabled:hover:var-color-system-state-primary-surface-hover/color-secondary",
+          "link-enabled:active:var-color-system-state-primary-press/color-primary",
+          "link-enabled:active:var-color-system-state-primary-surface-press/color-secondary"
         ],
         danger: [
-          "link-enabled:var-color-[#D80C18]/color-primary",
-          "link-enabled:hover:var-color-[#B90A15]/color-primary",
-          "link-enabled:hover:var-color-[#FDD9DB]/color-secondary",
-          "link-enabled:active:var-color-[#9A0911]/color-primary",
-          "link-enabled:active:var-color-[#FBB3B7]/color-secondary"
+          "link-enabled:var-color-system-state-error-active/color-primary",
+          "link-enabled:hover:var-color-system-state-error-hover/color-primary",
+          "link-enabled:hover:var-color-system-state-error-surface-hover/color-secondary",
+          "link-enabled:active:var-color-system-state-error-press/color-primary",
+          "link-enabled:active:var-color-system-state-error-surface-press/color-secondary"
         ]
       },
       variant: {
-        fill: ["text-white", "bg-[--color-primary]"],
+        fill: ["text-system-element-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",
@@ -103,9 +101,13 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
       )}
         aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
       >
-        <slot name="left-icon"><span class="block -ml-1"></span></slot>
+        <slot name="left-icon" class="icon-size-6">
+          <span class="block -ml-1"></span>
+        </slot>
         <span class="px-2"><slot></slot></span>
-        <slot name="right-icon"><span class="block -mr-1"></span></slot>
+        <slot name="right-icon" class="icon-size-6">
+          <span class="block -mr-1"></span>
+        </slot>
       </a>`;
     }
     return lit.html`
@@ -115,9 +117,13 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
         type=${this.type}
         role=${ifDefined_js.ifDefined(this.buttonRole ?? void 0)}
       >
-        <slot name="left-icon"><span class="block -ml-1"></span></slot>
+        <slot name="left-icon" class="icon-size-6">
+          <span class="block -ml-1"></span>
+        </slot>
         <span class="px-2"><slot></slot></span>
-        <slot name="right-icon"><span class="block -mr-1"></span></slot>
+        <slot name="right-icon" class="icon-size-6">
+          <span class="block -mr-1"></span>
+        </slot>
       </button>
     `;
   }
@@ -138,13 +144,13 @@ exports.DaikinButton.styles = lit.css`
     }
 
     :host([size="small"]) {
-      min-width: 52px;
-      height: 32px;
+      min-width: 3.25em;
+      height: 2rem;
     }
 
     :host([size="medium"]) {
-      min-width: 60px;
-      height: 48px;
+      min-width: 3.75em;
+      height: 3rem;
     }
   `;
 __decorateClass([

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { ARIARole } from '../../lit-analyzer-types';
-import { MergeVariantProps } from '../../type-utils';
+import { ARIARole } from "../../lit-analyzer-types.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaButton: (props?: ({
     color?: "default" | "danger" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
@@ -44,7 +44,7 @@ export declare class DaikinButton extends LitElement {
      */
     color: ButtonVariantProps["color"];
     /**
-     * Whether the button is disabled.
+     * Specify the button disabled state.
      */
     disabled: boolean;
     /**

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

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

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

@@ -17,13 +17,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "block",
   "size-4",
-  "relative",
-  "bg-white",
-  "border-daikinNeutral-600",
+  "border-system-state-neutral-active",
   "border-2",
   "rounded-sm",
+  "relative",
   "appearance-none",
-  "before:text-white",
+  "before:text-system-element-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
@@ -31,37 +30,39 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "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"
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-2",
+  "focus-visible:outline-system-state-focus",
+  "enabled:group-hover:border-system-state-neutral-hover",
+  "enabled:group-hover:bg-system-background-surface-hover",
+  "enabled:group-active:border-system-state-neutral-press",
+  "enabled:group-active:bg-system-background-surface-press",
+  "enabled:checked:border-system-state-primary-active",
+  "enabled:checked:bg-system-state-primary-active",
+  "enabled:checked:group-hover:bg-system-state-primary-hover",
+  "enabled:checked:group-hover:border-system-state-primary-hover",
+  "enabled:checked:group-hover:before:text-system-element-text-inverse",
+  "enabled:checked:group-active:bg-system-state-primary-press",
+  "enabled:checked:group-active:border-system-state-primary-press",
+  "enabled:checked:group-active:before:text-system-element-text-inverse",
+  "enabled:indeterminate:bg-system-state-primary-active",
+  "enabled:indeterminate:border-system-state-primary-active",
+  "enabled:indeterminate:group-hover:bg-system-state-primary-hover",
+  "enabled:indeterminate:group-hover:border-system-state-primary-hover",
+  "enabled:indeterminate:group-hover:before:text-system-element-text-inverse",
+  "enabled:indeterminate:group-active:bg-system-state-primary-press",
+  "enabled:indeterminate:group-active:border-system-state-primary-press",
+  "enabled:indeterminate:group-active:before:text-system-element-text-inverse",
+  "disabled:border-system-state-disabled",
+  "disabled:bg-system-element-text-inverse",
+  "disabled:checked:bg-system-state-disabled",
+  "disabled:indeterminate:bg-system-state-disabled"
 ])();
-const cvaLabel = classVarianceAuthority.cva([], {
+const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
   variants: {
     disabled: {
-      false: [],
-      true: ["text-daikinNeutral-200"]
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
     }
   }
 });
@@ -102,20 +103,20 @@ exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
   }
   render() {
     return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
-      <div class="p-2">
+      <span 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}
+          .value=${this.value}
           .indeterminate=${this.checkState === "indeterminate"}
           .checked=${this.checked}
           ?disabled=${this.disabled}
           @change=${this._handleChange}
           @click=${this._handleClick}
         />
-      </div>
+      </span>
       <span
         class=${cvaLabel({
       disabled: this.disabled

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

@@ -19,11 +19,11 @@ import { LitElement, PropertyValues } from 'lit';
 export declare class DaikinCheckbox extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the checkbox.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the checkbox.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -37,11 +37,11 @@ export declare class DaikinCheckbox extends LitElement {
      */
     labelPosition: "right" | "hidden";
     /**
-     * Checked state of the checkbox.
+     * Specify the checkbox checked state.
      */
     checkState: "unchecked" | "indeterminate" | "checked";
     /**
-     * Whether the checkbox is disabled.
+     * Specify the checkbox disabled state.
      */
     disabled: boolean;
     get checked(): boolean;

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

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