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

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

@@ -0,0 +1,82 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+import { DaikinInputGroup } from '../input-group';
+declare const radioGroupCN: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RadioGroupProps = MergeVariantProps<typeof radioGroupCN>;
+/**
+ * Radio groups are used to group multiple radio buttons so that make sure that only one will be selected in the group
+ *
+ * Hierarchies:
+ * - `daikin-radio-group` > `daikin-radio`
+ * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
+ *
+ * @fires change - A custom event emitted when current checked radio changed.
+ *
+ * @slot - A slot for radio buttons. Place `daikin-radio` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-radio-group name="name">
+ *   <daikin-radio value="value1" label="Option1"></daikin-radio>
+ *   <daikin-radio value="value2" label="Option2"></daikin-radio>
+ *   <daikin-radio value="value3" label="Option3"></daikin-radio>
+ * </daikin-radio-group>
+ * ```
+ *
+ * ```html
+ * <daikin-input-group label="Label text" helper="Helper text">
+ *   <daikin-radio-group name="name">
+ *     <daikin-radio value="value1" label="Option1"></daikin-radio>
+ *     <daikin-radio value="value2" label="Option2"></daikin-radio>
+ *     <daikin-radio value="value3" label="Option3"></daikin-radio>
+ *   </daikin-radio-group>
+ * </daikin-input-group>
+ * ```
+ */
+export declare class DaikinRadioGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private readonly _radios;
+    /**
+     * Specify the radio group orientation
+     */
+    orientation: RadioGroupProps["orientation"];
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * `value` of the currently selected radio.
+     * see {@link DaikinRadio.value}
+     */
+    value: string;
+    /**
+     * Whether the radio group is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _updateRadios;
+    private readonly _handleRadioChange;
+    private _handleSlotChange;
+    /**
+     * Handles keyboard interactions in the radio list.
+     * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+     */
+    private _handleKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-radio-group": DaikinRadioGroup;
+    }
+}
+export {};

package/dist/cjs/components/radio-group/index.cjs

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

package/dist/cjs/components/radio-group/index.d.ts

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

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

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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;
+};
+const cvaSelect = classVarianceAuthority.cva(
+  [
+    "block",
+    "w-full",
+    "h-full",
+    "relative",
+    "after:i-daikin-dropdown-chevron-down",
+    "after:w-6",
+    "after:h-6",
+    "after:m-auto",
+    "after:absolute",
+    "after:top-0",
+    "after:bottom-0",
+    "after:right-3",
+    "after:pointer-events-none",
+    "slotted-[select]:!appearance-none",
+    "slotted-[select]:!flex",
+    "slotted-[select]:!items-center",
+    "slotted-[select]:!gap-2",
+    "slotted-[select]:!w-full",
+    "slotted-[select]:!h-full",
+    "slotted-[select]:!min-h-12",
+    "slotted-[select]:!pl-4",
+    "slotted-[select]:!pr-12",
+    "slotted-[select]:!text-base",
+    "slotted-[select]:!font-daikinSerif",
+    "slotted-[select]:!border",
+    "slotted-[select]:!border-[--color-base]",
+    "slotted-[select]:!rounded-md",
+    "slotted-[select]:!font-daikinSerif",
+    "slotted-[select]:!leading-5",
+    "slotted-[select]:!outline",
+    "slotted-[select]:!outline-0",
+    "slotted-[select]:!-outline-offset-2",
+    "slotted-[select:focus-visible]:!outline-2",
+    "slotted-[select:focus-visible]:!outline-[--color-focus]",
+    "slotted-[select:enabled]:!cursor-pointer",
+    "slotted-[select:enabled]:!text-daikinNeutral-800",
+    "slotted-[select:enabled:hover]:!bg-[#f2f2f2]",
+    "slotted-[select:enabled:active]:!bg-daikinNeutral-100",
+    "slotted-[select:disabled]:!text-daikinNeutral-200",
+    "slotted-[select:disabled]:!border-daikinNeutral-200"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["after:text-daikinNeutral-900"],
+        true: ["after:text-daikinNeutral-200"]
+      },
+      error: {
+        false: [
+          "var-color-daikinNeutral-600/color-base",
+          "var-color-daikinBlue-700/color-focus"
+        ],
+        true: [
+          "var-color-daikinRed-500/color-base",
+          "var-color-daikinRed-500/color-focus"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinSelect = class DaikinSelect extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.error = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  get _select() {
+    return this._selects[0] ?? null;
+  }
+  _updateSelect() {
+    const select = this._select;
+    if (select) {
+      select.disabled = this.disabled;
+    }
+  }
+  _handleSlotChange() {
+    this._updateSelect();
+  }
+  render() {
+    return lit.html`<slot
+      class=${cvaSelect({ disabled: this.disabled, error: this.error })}
+      @slotchange=${this._handleSlotChange}
+    ></slot>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this._updateSelect();
+    }
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+  }
+  /**
+   * Focuses on the `<select>` element in the slot.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._select) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinSelect.styles = lit.css`
+    ::slotted(select) {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      border: 0 solid;
+
+      font: inherit;
+      font-feature-settings: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+      background: transparent;
+    }
+
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "select" })
+], exports.DaikinSelect.prototype, "_selects", 2);
+exports.DaikinSelect = __decorateClass([
+  decorators_js.customElement("daikin-select")
+], exports.DaikinSelect);

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

@@ -0,0 +1,60 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from '../input-group';
+/**
+ * A select component.
+ * This component accepts an HTML `<select>` element in the slot and applies styles to it.
+ * The `disabled` property of the component is also reflected in the `<select>` element in the slot.
+ *
+ * Hierarchy:
+ * - `daikin-input-group` > `daikin-select`
+ *
+ * @slot - A slot for an HTML `<select>` element which may contain `<option>` and `<optgroup>`.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-select>
+ *   <select name="select">
+ *     <option value="value1">Option 1</option>
+ *     <option value="value2">Option 2</option>
+ *     <optgroup label="Group">
+ *       <option value="value3">Option 3</option>
+ *       <option value="value4">Option 4</option>
+ *     </optgroup>
+ *   </select>
+ * </daikin-select>
+ * ```
+ */
+export declare class DaikinSelect extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Whether the select component is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the select component is required.
+     */
+    required: boolean;
+    /**
+     * Whether the select component is disabled.
+     * This value will also be applied to the `disabled` property of the `<select>` element in the slot.
+     */
+    disabled: boolean;
+    private readonly _selects;
+    private get _select();
+    private _updateSelect;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+    /**
+     * Focuses on the `<select>` element in the slot.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-select": DaikinSelect;
+    }
+}

package/dist/cjs/components/select/index.cjs

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

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

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

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

@@ -18,41 +18,51 @@ const cvaTab = classVarianceAuthority.cva(
   [
     "flex",
     "w-full",
-    "h-full",
+    "min-w-14",
+    "h-10",
     "items-center",
     "justify-center",
+    "px-4",
+    "pt-2",
+    "pb-3",
     "text-center",
-    "relative",
     "font-daikinSerif",
-    "text-base",
     "tracking-wide",
     "whitespace-nowrap",
-    "contain-paint",
-    "disabled:cursor-default",
-    "after:content-['']",
-    "after:z-1",
+    "relative",
+    "focus-visible:outline-none",
+    "focus-visible:before:absolute",
+    "focus-visible:before:-inset-[3px]",
+    "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",
     "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"
+    "after:inset-0",
+    "after:top-auto"
   ],
   {
     variants: {
-      size: {
-        default: ["px-4"],
-        condensed: ["px-[10px]"]
+      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",
+          "after:h-[1px]",
+          "after:bg-system-element-divider-secondary"
+        ],
+        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",
+          "after:h-1",
+          "enabled:after:bg-system-state-primary-active",
+          "disabled:after:bg-system-state-disabled"
+        ]
       }
     }
   }
@@ -61,31 +71,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}
@@ -100,27 +105,22 @@ exports.DaikinTab.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      display: inline-block;
-      width: fit-content;
-      height: 48px;
-    }
-
-    :host([size="condensed"]) {
-      height: 40px;
+      display: block;
+      width: 100%;
     }
   `;
 __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,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/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/components/tab-panels/daikin-tab-panels.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { ARIARole } from '../../lit-analyzer-types';
+/**
+ * The tab panels 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 tab panels component ensures the corresponding content panel is shown while hiding the others.
+ *
+ * Hierarchy:
+ * - `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/tab-panels/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- Note that `panels` must be set via property. -->
+ * <daikin-tab-panels
+ *   class="block w-full h-full"
+ *   panel-role="tabpanel"
+ *   value="foo"
+ *   .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-tab-panels>
+ * ```
+ */
+export declare class DaikinTabPanels extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The panel to be displayed.
+     * Set automatically by `daikin-tabs` if used within it.
+     */
+    value: string;
+    /**
+     * 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-tabs` if used within it.
+     */
+    panelRole: ARIARole | null;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "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';