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

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

@@ -14,100 +14,90 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadio = classVarianceAuthority.cva(
-  [
-    "appearance-none",
-    "relative",
-    "after:absolute",
-    "after:i-daikin-radio-unchecked",
-    "checked:after:i-daikin-radio-checked",
-    "enabled:after:text-[#8C8C8C]",
-    "enabled:checked:after:text-daikinBlue-500",
-    "aria-controllable:hover:after:i-daikin-radio-checked",
-    "aria-controllable:hover:after:text-daikinBlue-300",
-    "aria-controllable:active:after:i-daikin-radio-checked",
-    "aria-controllable:active:after:text-daikinBlue-500",
-    "focus-visible:outline-none",
-    "aria-controllable:focus-visible:after:i-daikin-radio-unchecked",
-    "aria-controllable:focus-visible:checked:after:i-daikin-radio-checked",
-    "aria-controllable:focus-visible:after:text-daikinBlue-700",
-    "disabled:after:text-daikinNeutral-200"
-  ],
-  {
-    variants: {
-      size: {
-        small: ["w-[14px]", "h-[14px]"],
-        large: ["w-4", "h-4"]
-      }
+const RADIO_CLASS_NAME = classVarianceAuthority.cva([
+  "flex",
+  "justify-center",
+  "items-center",
+  "size-4",
+  "bg-white",
+  "rounded-full",
+  "relative",
+  "appearance-none",
+  "focus-visible:outline",
+  "focus-visible:outline-1",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-daikinBlue-700",
+  "unchecked:border-2",
+  "enabled:unchecked:border-daikinNeutral-600",
+  "enabled:unchecked:hover:border-daikinNeutral-400",
+  "enabled:unchecked:active:border-daikinNeutral-700",
+  "checked:border-[5px]",
+  "enabled:checked:border-daikinBlue-500",
+  "enabled:checked:group-hover:border-daikinBlue-300",
+  "enabled:checked:group-active:border-daikinBlue-600",
+  "disabled:border-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"]
-      }
-    }
-  }
-);
+});
 exports.DaikinRadio = class DaikinRadio 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.checked = false;
-    this.name = "";
-    this.value = "";
-    this.error = false;
-  }
-  _handleClick(event) {
-    if (this.readonly || this.disabled) {
-      event.preventDefault();
-    }
+    this.disabled = false;
+    this._internals = this.attachInternals();
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
-  updated(changedProperties) {
-    if (changedProperties.has("checked")) {
-      this._updateFormValue();
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
     }
   }
   _handleChange(event) {
-    var _a;
-    const input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("input");
-    this.checked = input.checked;
+    this.checked = event.target.checked;
     this._updateFormValue();
-    const newEvent = new Event("change", event);
-    this.dispatchEvent(newEvent);
+    this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const labelClassName = cvaLabel({ size: this.size });
-    const radioClassName = cvaRadio({ size: this.size });
-    const labelText = this.label ? lit.html`<span class="${labelClassName}">${this.label}</span>` : lit.html``;
-    const inputTag = lit.html`<input
-      class=${radioClassName}
-      type="radio"
-      name=${this.name}
-      value=${this.value}
-      aria-readonly=${this.readonly}
-      ?disabled=${this.disabled}
-      .checked=${this.checked}
-      @click=${this._handleClick}
-      @change=${this._handleChange}
-    />`;
-    const inputArea = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
-    return lit.html`<label
-      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
-      >${inputArea}</label
-    >`;
+    return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
+      <div class="p-2">
+        <input
+          class=${RADIO_CLASS_NAME}
+          type="radio"
+          name=${this.name}
+          value=${this.value}
+          aria-label=${this.labelPosition === "hidden" ? this.label : lit.nothing}
+          ?disabled=${this.disabled}
+          .checked=${this.checked}
+          @click=${this._handleClick}
+          @change=${this._handleChange}
+        />
+      </div>
+      <span
+        class=${cvaLabel({
+      disabled: this.disabled
+    })}
+        ?hidden=${this.labelPosition === "hidden"}
+      >
+        ${this.label}
+      </span>
+    </label>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this._updateFormValue();
+    }
   }
 };
 exports.DaikinRadio.styles = lit.css`
@@ -119,32 +109,23 @@ exports.DaikinRadio.styles = lit.css`
   `;
 exports.DaikinRadio.formAssociated = true;
 __decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinRadio.prototype, "label", 2);
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadio.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadio.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
-], exports.DaikinRadio.prototype, "size", 2);
+], exports.DaikinRadio.prototype, "label", 2);
 __decorateClass([
   decorators_js.property({ type: String, attribute: "label-position" })
 ], exports.DaikinRadio.prototype, "labelPosition", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinRadio.prototype, "disabled", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinRadio.prototype, "readonly", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "checked", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinRadio.prototype, "error", 2);
+], exports.DaikinRadio.prototype, "disabled", 2);
 exports.DaikinRadio = __decorateClass([
   decorators_js.customElement("daikin-radio")
 ], exports.DaikinRadio);

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

@@ -1,13 +1,4 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-
-declare const cvaRadio: (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 RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
 /**
  * The radio button component is a UI element that allows users to select one options from a set of choices.
  * It functions similarly to the HTML `<input type="radio">` tag. \
@@ -17,60 +8,52 @@ type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
+ * ```
+ *
  * ```html
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    private _handleClick;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    updated(changedProperties: Map<string, unknown>): void;
-    private _handleChange;
-    /**
-     * Specify the label text for the radio
-     */
-    label: string;
     /**
-     * Specify the component size
+     * Form name of the radio button.
      */
-    size: RadioVariantProps["size"];
+    name: string;
     /**
-     * Specify the label position
-     * when `left` the label will be in left of radio, when `right` label will be in right of radio
+     * Form value of the radio button.
      */
-    labelPosition: "left" | "right";
+    value: string;
     /**
-     * Specify whether the Radio should be disabled
+     * Label text for the radio button.
      */
-    disabled: boolean;
+    label: string;
     /**
-     * Specify whether the radio is read only
+     * Label position.
+     * - `right` (default): The label will be placed to the right of the radio button.
+     * - `hidden`: The label will not be shown.
      */
-    readonly: boolean;
+    labelPosition: "right" | "hidden";
     /**
-     * Specify whether the radio is be checked
+     * Whether the radio button is checked.
      */
     checked: boolean;
     /**
-     * The form name.
-     */
-    name: string;
-    /**
-     * The form value.
-     */
-    value: string;
-    /**
-     * Specify whether the Radio is in a error state
+     * Whether the radio button is disabled.
      */
-    error: boolean;
+    disabled: boolean;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _handleClick;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: Map<string, unknown>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         "daikin-radio": DaikinRadio;
     }
 }
-export {};

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

@@ -21,38 +21,44 @@ const cvaTab = classVarianceAuthority.cva(
     "h-full",
     "items-center",
     "justify-center",
+    "px-4",
+    "pt-2",
+    "pb-3",
+    "text-base",
+    "font-bold",
     "text-center",
-    "relative",
     "font-daikinSerif",
-    "text-base",
+    "relative",
     "tracking-wide",
     "whitespace-nowrap",
     "contain-paint",
-    "disabled:cursor-default",
-    "after:content-['']",
-    "after:z-1",
-    "after:absolute",
-    "after:bottom-0",
-    "after:left-0",
-    "after:right-0",
-    "after:w-full",
-    "text-daikinBlue-500",
-    "hover:text-daikinBlue-400",
-    "active:text-daikinBlue-600",
-    "focus-visible:text-daikinBlue-700",
-    "disabled:text-daikinNeutral-300",
-    "aria-selected:after:h-1",
-    "aria-selected:after:bg-daikinBlue-500",
-    "hover:aria-selected:after:bg-daikinBlue-400",
-    "active:aria-selected:after:bg-daikinBlue-600",
-    "focus-visible:aria-selected:after:bg-daikinBlue-700",
-    "disabled:after:bg-daikinNeutral-300"
+    "focus-visible:outline-none",
+    "focus-visible:before:w-full",
+    "focus-visible:before:h-[calc(100%_-_4px)]",
+    "focus-visible:before:border",
+    "focus-visible:before:border-daikinBlue-700",
+    "focus-visible:before:absolute",
+    "focus-visible:before:top-0",
+    "disabled:text-daikinNeutral-200"
   ],
   {
     variants: {
-      size: {
-        default: ["px-4"],
-        condensed: ["px-[10px]"]
+      active: {
+        false: [
+          "hover:text-daikinNeutral-500",
+          "active:text-daikinNeutral-700"
+        ],
+        true: [
+          "text-daikinBlue-500",
+          "hover:text-daikinBlue-300",
+          "active:text-daikinBlue-600",
+          "after:w-full",
+          "after:h-1",
+          "after:absolute",
+          "after:bottom-0",
+          "enabled:after:bg-daikinBlue-500",
+          "disabled:after:bg-daikinNeutral-200"
+        ]
       }
     }
   }
@@ -61,31 +67,26 @@ exports.DaikinTab = class DaikinTab extends lit.LitElement {
   constructor() {
     super();
     this.value = "";
-    this.size = "default";
     this.disabled = false;
     this.active = false;
-    this.addEventListener("click", this._handleClick);
-  }
-  _handleClick(event) {
-    if (this.disabled) {
-      event.stopImmediatePropagation();
-    }
+    this.addEventListener("click", (event) => {
+      if (this.disabled) {
+        event.stopImmediatePropagation();
+      }
+    });
   }
   /**
    * 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);
+    var _a;
+    (_a = this._button) == null ? void 0 : _a.focus(options);
   }
   render() {
-    const cn = cvaTab({
-      size: this.size
-    });
     return lit.html`
       <button
-        class=${cn}
+        class=${cvaTab({ active: this.active })}
         ?disabled=${this.disabled}
         role="tab"
         aria-selected=${!this.disabled && this.active}
@@ -101,26 +102,20 @@ exports.DaikinTab.styles = lit.css`
 
     :host {
       display: inline-block;
-      width: fit-content;
-      height: 48px;
-    }
-
-    :host([size="condensed"]) {
-      height: 40px;
     }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTab.prototype, "value", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTab.prototype, "size", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTab.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTab.prototype, "active", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinTab.prototype, "_button", 2);
 exports.DaikinTab = __decorateClass([
   decorators_js.customElement("daikin-tab")
 ], exports.DaikinTab);

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

@@ -1,11 +1,10 @@
 import { LitElement } from 'lit';
-
 /**
- * The tab component is a child element within the `daikin-tab-group` component, representing a clickable button or label that users interact with to switch between different panels of content.
+ * The tab component is a child element within the `daikin-tabs` component, representing a clickable button or label that users interact with to switch between different panels of content.
  * Each tab corresponds to a specific panel and is typically labeled to indicate the content it reveals.
  *
  * Hierarchy:
- * - `daikin-tab-group` > `daikin-tab`
+ * - `daikin-tabs` > `daikin-tab`
  *
  * @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,
  *
@@ -13,8 +12,12 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tab/index.js";
+ * ```
+ *
  * ```html
- * <!-- See `daikin-tab-group` component for complete example. -->
+ * <!-- See `daikin-tabs` component for complete example. -->
  * <daikin-tab value="foo">Foo tab</daikin-tab>
  * ```
  */
@@ -22,30 +25,26 @@ export declare class DaikinTab extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * A unique string that identifies a tab.
-     * Must be unique within the `daikin-tab-group` component.
+     * Must be unique within the `daikin-tabs` component.
      */
     value: string;
     /**
-     * Size of tab
-     */
-    size: "default" | "condensed";
-    /**
-     * Whether to show the disabled state.
+     * Whether the tab is disabled.
      */
     disabled: boolean;
     /**
      * Whether to show the active (selected) state.
      * Ignored if `disabled` is `true`.
-     * Set automatically by `daikin-tab-group` component.
+     * Set automatically by `daikin-tabs` component.
      */
     active: boolean;
-    private _handleClick;
+    private _button;
     constructor();
     /**
      * Focuses on the inner button.
      * @param options focus options
      */
-    focus(options?: FocusOptions | undefined): void;
+    focus(options?: FocusOptions): void;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs/components/{panel-switcher/daikin-panel-switcher.cjs → tab-panels/daikin-tab-panels.cjs}

@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.DaikinPanelSwitcher = class DaikinPanelSwitcher extends lit.LitElement {
+exports.DaikinTabPanels = class DaikinTabPanels extends lit.LitElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -35,21 +35,21 @@ exports.DaikinPanelSwitcher = class DaikinPanelSwitcher extends lit.LitElement {
     );
   }
 };
-exports.DaikinPanelSwitcher.styles = lit.css`
+exports.DaikinTabPanels.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinPanelSwitcher.prototype, "value", 2);
+], exports.DaikinTabPanels.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({
     type: Array,
     hasChanged: (newValue, oldValue) => JSON.stringify(newValue) !== JSON.stringify(oldValue)
   })
-], exports.DaikinPanelSwitcher.prototype, "panels", 2);
+], exports.DaikinTabPanels.prototype, "panels", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true, attribute: "panel-role" })
-], exports.DaikinPanelSwitcher.prototype, "panelRole", 2);
-exports.DaikinPanelSwitcher = __decorateClass([
-  decorators_js.customElement("daikin-panel-switcher")
-], exports.DaikinPanelSwitcher);
+], exports.DaikinTabPanels.prototype, "panelRole", 2);
+exports.DaikinTabPanels = __decorateClass([
+  decorators_js.customElement("daikin-tab-panels")
+], exports.DaikinTabPanels);

package/dist/{cjs-dev/components/panel-switcher/daikin-panel-switcher.d.ts → cjs/components/tab-panels/daikin-tab-panels.d.ts}

@@ -1,51 +1,56 @@
 import { LitElement } from 'lit';
 import { ARIARole } from '../../lit-analyzer-types';
-
 /**
- * The panel switcher component is a child element within the `daikin-tab-group` that controls the display of the content panels associated with each tab.
+ * The panel switcher component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
  * When a user selects a tab, the panel switcher component ensures the corresponding content panel is shown while hiding the others.
  *
  * Hierarchy:
- * - `daikin-tab-group` > `daikin-panel-switcher` ("panels" slot)
+ * - `daikin-tabs` > `daikin-tab-panels` ("panels" slot)
  *
  * @slot panel:\<name\> - A slot for each panel content.
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/panel-switcher/index.js";
+ * ```
+ *
  * ```html
  * <!-- Note that `panels` must be set via property. -->
- * <daikin-panel-switcher
+ * <daikin-tab-panels
  *   class="block w-full h-full"
- *   .panels="${['foo', 'bar', 'baz']}"
+ *   panel-role="tabpanel"
  *   value="foo"
- *   panelRole="tabpanel"
+ *   .panels="${['foo', 'bar', 'baz']}"
  * >
  *   <div slot="panel:foo">Foo Panel (visible)</div>
  *   <div slot="panel:bar">Bar Panel (hidden)</div>
  *   <div slot="panel:baz">Baz Panel (hidden)</div>
- * </daikin-panel-switcher>
+ * </daikin-tab-panels>
  * ```
  */
-export declare class DaikinPanelSwitcher extends LitElement {
+export declare class DaikinTabPanels extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The panel to be displayed.
-     * Set automatically by `daikin-tab-group` if used within it.
+     * Set automatically by `daikin-tabs` if used within it.
      */
     value: string;
     /**
-     * Set automatically by `daikin-tab-group` if used within it.
+     * A list of panel names.
+     * This is used as the slot name for panels (`panel:<name>`).
+     * Set automatically by `daikin-tabs` if used within it.
      */
     panels: string[];
     /**
      * `role` attribute of the container.
-     * Set to "tablist" automatically by `daikin-tab-group` if used within it.
+     * Set to "tablist" automatically by `daikin-tabs` if used within it.
      */
     panelRole: ARIARole | null;
     render(): unknown;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "daikin-panel-switcher": DaikinPanelSwitcher;
+        "daikin-tab-panels": DaikinTabPanels;
     }
 }

package/dist/cjs/components/tab-panels/index.cjs

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

package/dist/cjs/components/tab-panels/index.d.ts

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