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

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

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
@@ -12,100 +12,90 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadio = 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 = 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 = cva([], {
+  variants: {
+    disabled: {
+      false: [],
+      true: ["text-daikinNeutral-200"]
     }
   }
-);
-const cvaLabel = cva(
-  ["leading-8", "not-italic", "font-normal", "align-middle"],
-  {
-    variants: {
-      size: {
-        small: ["text-sm"],
-        large: ["text-base"]
-      }
-    }
-  }
-);
+});
 let DaikinRadio = class extends 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 ? html`<span class="${labelClassName}">${this.label}</span>` : html``;
-    const inputTag = 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" ? html`${labelText}${inputTag}` : html`${inputTag}${labelText}`;
-    return html`<label
-      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
-      >${inputArea}</label
-    >`;
+    return 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 : 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();
+    }
   }
 };
 DaikinRadio.styles = css`
@@ -117,32 +107,23 @@ DaikinRadio.styles = css`
   `;
 DaikinRadio.formAssociated = true;
 __decorateClass([
-  property({ type: String })
-], DaikinRadio.prototype, "label", 2);
+  property({ type: String, reflect: true })
+], DaikinRadio.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinRadio.prototype, "value", 2);
 __decorateClass([
   property({ type: String })
-], DaikinRadio.prototype, "size", 2);
+], DaikinRadio.prototype, "label", 2);
 __decorateClass([
   property({ type: String, attribute: "label-position" })
 ], DaikinRadio.prototype, "labelPosition", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinRadio.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinRadio.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadio.prototype, "checked", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinRadio.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinRadio.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], DaikinRadio.prototype, "error", 2);
+], DaikinRadio.prototype, "disabled", 2);
 DaikinRadio = __decorateClass([
   customElement("daikin-radio")
 ], DaikinRadio);

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

@@ -1,10 +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,
  *
@@ -12,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>
  * ```
  */
@@ -21,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/es/components/tab/daikin-tab.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, query, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -19,38 +19,44 @@ const cvaTab = 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"
+        ]
       }
     }
   }
@@ -59,31 +65,26 @@ let DaikinTab = class extends 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 html`
       <button
-        class=${cn}
+        class=${cvaTab({ active: this.active })}
         ?disabled=${this.disabled}
         role="tab"
         aria-selected=${!this.disabled && this.active}
@@ -99,26 +100,20 @@ DaikinTab.styles = css`
 
     :host {
       display: inline-block;
-      width: fit-content;
-      height: 48px;
-    }
-
-    :host([size="condensed"]) {
-      height: 40px;
     }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTab.prototype, "value", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinTab.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "disabled", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "active", 2);
+__decorateClass([
+  query("button")
+], DaikinTab.prototype, "_button", 2);
 DaikinTab = __decorateClass([
   customElement("daikin-tab")
 ], DaikinTab);

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

@@ -1,50 +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/es/components/{panel-switcher/daikin-panel-switcher.js → tab-panels/daikin-tab-panels.js}

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

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

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

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

@@ -0,0 +1,4 @@
+import { DaikinTabPanels } from "./daikin-tab-panels.js";
+export {
+  DaikinTabPanels
+};

package/dist/es/components/{tab-group/daikin-tab-group.d.ts → tabs/daikin-tabs.d.ts}

@@ -9,34 +9,40 @@ import { LitElement, PropertyValues } from 'lit';
  * > Otherwise, unexpected behavior may be encountered.
  *
  * Hierarchies:
- * - `daikin-tab-group` > `daikin-tab`
- * - `daikin-tab-group` > `daikin-panel-switcher` ("panels" slot)
+ * - `daikin-tabs` > `daikin-tab`
+ * - `daikin-tabs` > `daikin-tab-panels` ("panels" slot)
  *
- * @fires beforechange - _Cancellable._ A custom event emitted when the current tab is about to be changed by user interaction.
- * @fires change - A custom event emitted when the current tab is changed.
+ * @fires beforechange - _Cancellable._ A custom event emitted when the current tab is about to be changed by user interaction. The current value can be obtained with `event.target.value` and the new value with `event.detail.newTab.value`.
+ * @fires change - A custom event emitted when the current tab is changed. The new value can be obtained with `event.target.value`.
  *
  * @slot - A slot for tab buttons. Place `daikin-tab` elements here.
- * @slot panels - A slot for a panel switcher component. Place `daikin-panel-switcher` element(s) here.
+ * @slot panels - A slot for tab panels component. Place a `daikin-tab-panels` element here.
  *
  * @csspart tablist - The container element for the default (tab list) slot. Has "tablist" role.
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tab/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tab-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/panel-switcher/index.js";
+ * ```
+ *
  * ```html
  * <!-- See storybook for styling tab group. You'll need `::part(tablist)` to style the tab container. -->
- * <daikin-tab-group value="foo">
+ * <daikin-tabs value="foo">
  *   <daikin-tab value="foo">Foo tab</daikin-tab>
  *   <daikin-tab value="bar">Bar tab</daikin-tab>
- *   <!-- At least one "daikin-panel-switcher" is needed to switch the content. -->
- *   <daikin-panel-switcher slot="panels">
+ *   <!-- At least one "daikin-tab-panels" is needed to switch the content. -->
+ *   <daikin-tab-panels slot="panels">
  *     <!-- Mind the "panel:" prefix. -->
  *     <p slot="panel:foo">Foo tab content.</p>
  *     <p slot="panel:bar">Bar tab content.</p>
- *   </daikin-panel-switcher>
- * </daikin-tab-group>
+ *   </daikin-tab-panels>
+ * </daikin-tabs>
  * ```
  */
-export declare class DaikinTabGroup extends LitElement {
+export declare class DaikinTabs extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * `value` of the currently selected tab (`daikin-tab`).
@@ -45,26 +51,26 @@ export declare class DaikinTabGroup extends LitElement {
     /**
      * Tab(s) in the default slot.
      */
-    private _tabs;
+    private readonly _tabs;
     /**
      * Panel switcher(s) in the `panels` slot.
      */
-    private _panelSwitchers;
+    private readonly _panelSwitchers;
     /**
      * Emits `beforechange` event if necessary and returns whether we should proceed.
      *
-     * 1. Check if `newValue` is different from `value`.
+     * 1. Check if `newTab.value` is different from `value`.
      * 2. Emit "beforechange" event.
-     * 3. Check if the event is canceled.
+     * 3. Check and return whether the event is canceled.
      *
-     * @param newValue The `value` of the newly active tab.
+     * @param newTab The newly active tab element.
      * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
      */
     private _emitBeforeChange;
     /**
      * Updates `this.value` and emit "change" event.
      *
-     * @param newValue The `value` of the newly active tab.
+     * @param newTab The newly active tab element.
      */
     private _updateValue;
     /**
@@ -76,14 +82,14 @@ export declare class DaikinTabGroup extends LitElement {
      */
     private _updateTabs;
     /**
-     * Updates `daikin-panel-switcher` component(s)' properties in the slot.
+     * Updates `daikin-tab-panels` component(s)' properties in the slot.
      *
      * Invoke when:
      * - `this.value` is changed.
      * - the default slot's content is changed.
      * - the panel slot's content is changed.
      */
-    private _updatePanelSwitcher;
+    private _updateTabPanels;
     /**
      * Handles "click" event emitted by `daikin-tab` component.
      */
@@ -93,12 +99,12 @@ export declare class DaikinTabGroup extends LitElement {
      */
     private _handleKeyDown;
     private _handleSlotChange;
-    private _handlePanelSwitcherSlotChange;
+    private _handleTabPanelsSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "daikin-tab-group": DaikinTabGroup;
+        "daikin-tabs": DaikinTabs;
     }
 }