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

package/dist/es/components/tab/daikin-tab.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,27 +18,25 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaTab = cva(
   [
     "flex",
-    "w-full",
-    "min-w-14",
-    "h-10",
+    "size-full",
     "items-center",
     "justify-center",
     "px-4",
     "pt-2",
     "pb-3",
+    "leading-[130%]",
     "text-center",
     "font-daikinSerif",
     "tracking-wide",
-    "whitespace-nowrap",
     "relative",
     "focus-visible:outline-none",
     "focus-visible:before:absolute",
-    "focus-visible:before:-inset-[3px]",
+    "focus-visible:before:-inset-1",
     "focus-visible:before:z-[1]",
     "focus-visible:before:border",
     "focus-visible:before:border-2",
-    "focus-visible:before:border-system-state-focus",
-    "disabled:text-system-state-disabled",
+    "focus-visible:before:border-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled",
     "after:absolute",
     "after:inset-0",
     "after:top-auto"
@@ -44,32 +45,33 @@ const cvaTab = cva(
     variants: {
       active: {
         false: [
-          "enabled:text-system-state-neutral-active",
-          "enabled:hover:text-system-state-neutral-hover",
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:text-system-state-neutral-press",
-          "enabled:active:bg-system-background-surface-press",
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:active:bg-ddt-color-common-surface-press",
           "after:h-[1px]",
-          "after:bg-system-element-divider-secondary"
+          "after:bg-ddt-color-divider"
         ],
         true: [
           "font-bold",
-          "enabled:text-system-state-primary-active",
-          "enabled:hover:bg-system-state-primary-surface-hover",
-          "enabled:active:bg-system-state-primary-surface-press",
+          "enabled:text-ddt-color-common-brand-default",
+          "enabled:hover:bg-ddt-color-common-surface-brand-hover",
+          "enabled:active:bg-ddt-color-common-surface-brand-press",
           "after:h-1",
-          "enabled:after:bg-system-state-primary-active",
-          "disabled:after:bg-system-state-disabled"
+          "enabled:after:bg-ddt-color-common-brand-default",
+          "disabled:after:bg-ddt-color-common-disabled"
         ]
       }
     }
   }
 );
-let DaikinTab = class extends LitElement {
+let DaikinTab = class extends DDSElement {
   constructor() {
     super();
     this.value = "";
     this.disabled = false;
+    this.sizing = "stretch";
     this.active = false;
     this.addEventListener("click", (event) => {
       if (this.disabled) {
@@ -104,8 +106,18 @@ DaikinTab.styles = css`
 
     :host {
       display: block;
+      white-space: nowrap;
+      min-width: fit-content;
+      height: 2.5rem;
+    }
+
+    :host([sizing="stretch"]) {
       width: 100%;
     }
+
+    :host([sizing="fit"]) {
+      width: fit-content;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
@@ -113,6 +125,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTab.prototype, "sizing", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "active", 2);
@@ -120,7 +135,7 @@ __decorateClass([
   query("button")
 ], DaikinTab.prototype, "_button", 2);
 DaikinTab = __decorateClass([
-  customElement("daikin-tab")
+  ddsElement("daikin-tab")
 ], DaikinTab);
 export {
   DaikinTab

package/dist/es/components/tab-panels/daikin-tab-panels.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 /**
  * The tab panels component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
@@ -29,7 +29,7 @@ import { ARIARole } from "../../lit-analyzer-types.js";
  * </daikin-tab-panels>
  * ```
  */
-export declare class DaikinTabPanels extends LitElement {
+export declare class DaikinTabPanels extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The panel to be displayed.

package/dist/es/components/tab-panels/daikin-tab-panels.js

@@ -1,6 +1,9 @@
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTabPanels = class extends LitElement {
+let DaikinTabPanels = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -24,8 +27,7 @@ let DaikinTabPanels = class extends LitElement {
       this.panels,
       (value) => html`<div
           class=${this.value === value ? "contents" : "hidden"}
-          role=${// HACK: Workaround lit-analyzer not recognizing `nothing` (runem/lit-analyzer#207).
-      this.panelRole ?? nothing}
+          role=${this.panelRole ?? nothing}
           ?hidden=${this.value !== value}
         >
           <slot name=${`panel:${value}`}></slot>
@@ -49,7 +51,7 @@ __decorateClass([
   property({ type: String, reflect: true, attribute: "panel-role" })
 ], DaikinTabPanels.prototype, "panelRole", 2);
 DaikinTabPanels = __decorateClass([
-  customElement("daikin-tab-panels")
+  ddsElement("daikin-tab-panels")
 ], DaikinTabPanels);
 export {
   DaikinTabPanels

package/dist/es/components/table/daikin-table.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 export type HeaderType<T extends string = string> = {
     key: T;
     label: string;
@@ -26,6 +27,12 @@ export type HeaderType<T extends string = string> = {
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/table/index.js";
+ * import "@daikin-oss/design-system-web-components/components/table-cell/index.js";
+ * import "@daikin-oss/design-system-web-components/components/table-header-cell/index.js";
+ * ```
+ *
  * ```html
  * <daikin-table
  *   .headers="[
@@ -61,7 +68,7 @@ export type HeaderType<T extends string = string> = {
  */
 export declare class DaikinTable<T extends {
     id: string;
-} = any> extends LitElement {
+} = any> extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Headers of the table.

package/dist/es/components/table/daikin-table.js

@@ -1,8 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../checkbox/daikin-checkbox.js";
 import "../table-cell/daikin-table-cell.js";
@@ -21,25 +24,25 @@ const defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
 const cvaRow = cva(
   [
     "border-b",
-    "border-b-system-element-divider-secondary",
+    "border-b-ddt-color-divider",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       selected: {
-        false: ["hover:bg-system-background-surface-hover"],
+        false: ["hover:bg-ddt-color-common-surface-hover"],
         true: [
-          "bg-system-background-surface-selected",
-          "hover:bg-system-background-surface-selectedHover"
+          "bg-ddt-color-common-surface-selected-default",
+          "hover:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
   }
 );
-let DaikinTable = class extends LitElement {
+let DaikinTable = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.headers = [];
@@ -140,9 +143,9 @@ let DaikinTable = class extends LitElement {
           </td>`
     );
     return html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
-      <table class="w-full table-fixed">
+      <table class="w-full">
         <thead>
-          <tr class="border-b border-b-system-element-divider-primary">
+          <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? html`<td class="w-12 p-0">
                   <span
                     class="flex items-center justify-center size-full min-h-12"
@@ -242,7 +245,7 @@ __decorateClass([
   state()
 ], DaikinTable.prototype, "_currentView", 2);
 DaikinTable = __decorateClass([
-  customElement("daikin-table")
+  ddsElement("daikin-table")
 ], DaikinTable);
 export {
   DaikinTable

package/dist/es/components/table-cell/daikin-table-cell.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaCell: (props?: ({
     alignment?: "right" | "left" | "center" | null | undefined;
@@ -17,6 +17,10 @@ type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/table-cell/index.js";
+ * ```
+ *
  * ```html
  * <daikin-table-cell slot="cell:key:id">
  *   Table cell label
@@ -24,7 +28,7 @@ type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
  * </daikin-table-cell>
  * ```
  */
-export declare class DaikinTableCell extends LitElement {
+export declare class DaikinTableCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the direction of cell alignment.

package/dist/es/components/table-cell/daikin-table-cell.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,7 +25,7 @@ const cvaCell = cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-system-element-text-primary"
+    "text-ddt-color-common-text-primary"
   ],
   {
     variants: {
@@ -34,7 +37,7 @@ const cvaCell = cva(
     }
   }
 );
-let DaikinTableCell = class extends LitElement {
+let DaikinTableCell = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.alignment = "left";
@@ -44,7 +47,7 @@ let DaikinTableCell = class extends LitElement {
       <slot></slot>
       <slot
         name="subtitle"
-        class="text-system-element-text-secondary text-xs"
+        class="text-ddt-color-common-text-secondary text-xs"
       ></slot>
     </span>`;
   }
@@ -62,7 +65,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTableCell.prototype, "alignment", 2);
 DaikinTableCell = __decorateClass([
-  customElement("daikin-table-cell")
+  ddsElement("daikin-table-cell")
 ], DaikinTableCell);
 export {
   DaikinTableCell

package/dist/es/components/table-header-cell/daikin-table-header-cell.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaHeaderCell: (props?: ({
     alignment?: "right" | "left" | "center" | null | undefined;
@@ -22,13 +22,17 @@ type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/table-header-cell/index.js";
+ * ```
+ *
  * ```html
  * <daikin-table-header-cell slot="header:key">
  *   Table header cell label
  * </daikin-table-header-cell>
  * ```
  */
-export declare class DaikinTableHeaderCell extends LitElement {
+export declare class DaikinTableHeaderCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Alignment of cell contents.

package/dist/es/components/table-header-cell/daikin-table-header-cell.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,7 +24,7 @@ const cvaHeaderCell = cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-system-element-text-primary",
+    "text-ddt-color-common-text-primary",
     "font-bold"
   ],
   {
@@ -34,22 +37,21 @@ const cvaHeaderCell = cva(
       sortable: {
         false: [],
         true: [
-          "hover:bg-system-background-surface-hover",
-          "active:bg-system-background-surface-press",
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press",
           "focus-visible:outline",
           "focus-visible:outline-2",
           "focus-visible:-outline-offset-2",
-          "focus-visible:outline-system-state-focus",
+          "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
           "after:size-6",
-          "after:text-system-element-text-primary",
           "after:i-daikin-sort"
         ]
       }
     }
   }
 );
-let DaikinTableHeaderCell = class extends LitElement {
+let DaikinTableHeaderCell = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.alignment = "left";
@@ -87,7 +89,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTableHeaderCell.prototype, "sortable", 2);
 DaikinTableHeaderCell = __decorateClass([
-  customElement("daikin-table-header-cell")
+  ddsElement("daikin-table-header-cell")
 ], DaikinTableHeaderCell);
 export {
   DaikinTableHeaderCell

package/dist/es/components/tabs/daikin-tabs.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The tab group component manages a group of tabs and switches the content displayed using the panel switcher component.
  * It allows users to navigate between different sections of content by clicking on individual tabs.
@@ -38,12 +39,16 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-tabs>
  * ```
  */
-export declare class DaikinTabs extends LitElement {
+export declare class DaikinTabs extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * `value` of the currently selected tab (`daikin-tab`).
      */
     value: string;
+    /**
+     * Whether the tab width stretches or fits.
+     */
+    sizing: "stretch" | "fit";
     /**
      * Tab(s) in the default slot.
      */
@@ -77,6 +82,7 @@ export declare class DaikinTabs extends LitElement {
      * - the default slot's content is changed.
      */
     private _updateTabs;
+    private _updateTabStyle;
     /**
      * Updates `daikin-tab-panels` component(s)' properties in the slot.
      *

package/dist/es/components/tabs/daikin-tabs.js

@@ -1,5 +1,8 @@
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { scrollIntoViewOnlyParent } from "./scroller.js";
 var __defProp = Object.defineProperty;
@@ -12,10 +15,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTabs = class extends LitElement {
+let DaikinTabs = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
+    this.sizing = "stretch";
   }
   /**
    * Emits `beforechange` event if necessary and returns whether we should proceed.
@@ -85,6 +89,12 @@ let DaikinTabs = class extends LitElement {
     }
     scrollIntoViewOnlyParent(selectedTab);
   }
+  _updateTabStyle() {
+    const tabs = this._tabs;
+    for (const tab of tabs) {
+      tab.sizing = this.sizing;
+    }
+  }
   /**
    * Updates `daikin-tab-panels` component(s)' properties in the slot.
    *
@@ -168,7 +178,7 @@ let DaikinTabs = class extends LitElement {
   render() {
     return html`
       <div
-        class="flex flex-nowrap w-full p-[3px] overflow-auto relative before:absolute before:h-[1px] before:inset-[3px] before:top-auto before:bg-system-element-divider-secondary"
+        class="flex flex-nowrap w-full p-1 overflow-auto relative before:absolute before:h-[1px] before:inset-1 before:top-auto before:bg-ddt-color-divider"
         role="tablist"
         @click=${this._handleTabClick}
         @keydown=${this._handleKeyDown}
@@ -179,11 +189,13 @@ let DaikinTabs = class extends LitElement {
     `;
   }
   updated(changedProperties) {
-    if (!changedProperties.has("value")) {
-      return;
+    if (changedProperties.has("value")) {
+      this._updateTabs();
+      this._updateTabPanels();
+    }
+    if (changedProperties.has("sizing")) {
+      this._updateTabStyle();
     }
-    this._updateTabs();
-    this._updateTabPanels();
   }
 };
 DaikinTabs.styles = css`
@@ -197,6 +209,9 @@ DaikinTabs.styles = css`
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTabs.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTabs.prototype, "sizing", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-tab" })
 ], DaikinTabs.prototype, "_tabs", 2);
@@ -204,7 +219,7 @@ __decorateClass([
   queryAssignedElements({ slot: "panels", selector: "daikin-tab-panels" })
 ], DaikinTabs.prototype, "_panelSwitchers", 2);
 DaikinTabs = __decorateClass([
-  customElement("daikin-tabs")
+  ddsElement("daikin-tabs")
 ], DaikinTabs);
 export {
   DaikinTabs

package/dist/es/components/text-area/daikin-text-area.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * The text area component is designed for multiline text input, similar to the HTML `<textarea>` tag.
@@ -23,7 +24,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * <daikin-text-area name="name"></daikin-text-area>
  * ```
  */
-export declare class DaikinTextArea extends LitElement {
+export declare class DaikinTextArea extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     static readonly formAssociated = true;
     private _internals;
@@ -73,6 +74,10 @@ export declare class DaikinTextArea extends LitElement {
     private _handleInput;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
     reflectInputGroup(inputGroup: DaikinInputGroup): void;
 }
 declare global {