@daikin-oss/design-system-web-components 1.2.0 → 1.3.0-next.2

package/dist/es/components/accordion-item/daikin-accordion-item.js

@@ -105,6 +105,7 @@ let DaikinAccordionItem = class extends DDSElement {
     >
       <button
         id="summary"
+        type="button"
         ${ref(this._summaryRef)}
         class=${cvaSummary({
       open,

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

@@ -89,6 +89,7 @@ let DaikinAvatar = class extends LitElement {
       </span>`;
     } else if (this.type === "button") {
       return html`<button
+        type="button"
         class=${cvaWrapper({ type: "button" })}
         aria-label=${ifDefined(this.alt ?? void 0)}
         aria-haspopup=${ifDefined(this.avatarAriaHaspopup ?? void 0)}

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

@@ -261,6 +261,7 @@ let DaikinCalendar = class extends LitElement {
   }) {
     const variant = selected ? "selected" : today ? "today" : "default";
     return html`<button
+      type="button"
       class=${cvaContentButton({ variant, date: false })}
       ?disabled=${disabled}
       role="radio"
@@ -384,6 +385,7 @@ let DaikinCalendar = class extends LitElement {
         week,
         (date) => date.getTime(),
         (date) => html`<button
+                    type="button"
                     class=${cvaContentButton({
           variant: date.getTime() === (value == null ? void 0 : value.getTime()) ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
           date: true

package/dist/es/components/card-header/daikin-card-header.js

@@ -23,7 +23,7 @@ const cvaTitle = cva([
 ])();
 const cvaDescription = cva([
   "flex-none",
-  "text-ddt-color-common-text-secondary",
+  "text-ddt-color-common-text-primary",
   "font-daikinSerif",
   "text-sm",
   "leading-normal",

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

@@ -141,13 +141,16 @@ let DaikinCarousel = class extends DDSElement {
           <span class=${cvaButton({ intent: "previous" })}></span>
         </daikin-icon-button>
         <div
-          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
+          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus [container-type:inline-size]"
           aria-live="polite"
         >
           <div
-            class="flex w-[calc(100%*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
           >
-            <slot @slotchange=${this._handleSlotchange}></slot>
+            <slot
+              class="slotted:w-[calc(100%/var(--total))]"
+              @slotchange=${this._handleSlotchange}
+            ></slot>
           </div>
         </div>
         <daikin-icon-button
@@ -172,6 +175,7 @@ let DaikinCarousel = class extends DDSElement {
       this._items,
       (_, index) => index,
       (_, index) => html`<button
+                type="button"
                 class=${INDICATOR_CLASS_NAME}
                 aria-label="Slide ${index + 1}"
                 aria-selected=${this.currentIndex === index}

package/dist/es/components/carousel-item/daikin-carousel-item.js

@@ -38,12 +38,12 @@ let DaikinCarouselItem = class extends DDSElement {
       >
         <slot
           name="title"
-          class="leading-[130%] font-bold"
+          class="leading-[130%] font-bold natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
         <slot
           name="description"
-          class="text-sm"
+          class="text-sm natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
       </div>

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.
+ *
+ * @fires remove - A custom event emitted when a user clicks the remove button.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/chip/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-chip chip-aria-label="Chip Text">Text</daikin-chip>
+ * ```
+ */
+export declare class DaikinChip extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Provides an accessible name of the chip.
+     */
+    chipAriaLabel: string | null;
+    private _focusableElement;
+    private _handleRemoveClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner remove button
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-chip": DaikinChip;
+    }
+}

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

@@ -0,0 +1,107 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 cvaWrapper = cva([
+  "flex",
+  "items-center",
+  "rounded-[100px]",
+  "overflow-hidden",
+  "size-full",
+  "border",
+  "px-1",
+  "border-ddt-color-common-neutral-default"
+]);
+const cvaRemoveButton = cva([
+  "w-4",
+  "h-4",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "overflow-hidden",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:var-color-ddt-color-common-neutral-default/color-primary",
+  "enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+  "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+  "enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+  "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary",
+  "text-[--color-primary]",
+  "bg-[--color-secondary]"
+]);
+let DaikinChip = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.chipAriaLabel = null;
+  }
+  _handleRemoveClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
+  }
+  render() {
+    return html`
+      <div
+        role="group"
+        class=${cvaWrapper()}
+        aria-label=${ifDefined(this.chipAriaLabel)}
+      >
+        <slot
+          name="left-icon"
+          class="icon-size-4 text-ddt-color-common-text-primary"
+        ></slot>
+        <span class="text-ddt-color-common-text-primary px-1 mr-[2px]">
+          <slot></slot>
+        </span>
+        <button
+          type="button"
+          class=${cvaRemoveButton()}
+          aria-label="Remove"
+          @click=${this._handleRemoveClick}
+        >
+          <span class="i-daikin-close text-[--color-primary]"></span>
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * Focuses on the inner remove button
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+DaikinChip.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "chip-aria-label" })
+], DaikinChip.prototype, "chipAriaLabel", 2);
+__decorateClass([
+  query("button")
+], DaikinChip.prototype, "_focusableElement", 2);
+DaikinChip = __decorateClass([
+  customElement("daikin-chip")
+], DaikinChip);
+export {
+  DaikinChip
+};

package/dist/es/components/chip/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-chip.js";

package/dist/es/components/chip/index.js

@@ -0,0 +1,4 @@
+import { DaikinChip } from "./daikin-chip.js";
+export {
+  DaikinChip
+};

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

@@ -0,0 +1,134 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DaikinInputGroup } from "../input-group/index.js";
+/**
+ * Interface for combobox option object
+ */
+export interface ComboboxOption {
+    label: string;
+    disabled?: boolean;
+    value?: string;
+}
+/**
+ * Type for combobox items - can be string or object array
+ */
+export type ComboboxItem = string | ComboboxOption;
+export declare function defaultFilterFn(items: readonly ComboboxItem[], value: string): readonly ComboboxItem[];
+/**
+ * A combobox component.
+ * Unlike a dropdown component, a combobox primarily functions as a text field (using a native <input> tag) that can accept custom user input. The dropdown list serves as a helpful aid to expedite the user's input process.
+ *
+ * @fires change - A custom event emitted when a user selects a combobox item or inputs a custom value.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when the user types in the input field, clicks clear button, or selects from dropdown options.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-combobox></daikin-combobox>
+ *
+ * <script>
+ *   const combobox = document.querySelector("daikin-combobox");
+ *   combobox.items = [ "Apple", "Banana", "Cherry" ];
+ * </script>
+ * ```
+ */
+export declare class DaikinCombobox extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Placeholder text of the combobox.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the combobox is required.
+     */
+    required: boolean;
+    /**
+     * Whether the combobox is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the combobox menu is opened.
+     */
+    open: boolean;
+    /**
+     * An array of items for the combobox dropdown. Can be:
+     * - Array of strings: ['Option 1', 'Option 2']
+     * - Array of objects: [{label: 'Option 1', disabled: false}, {label: 'Option 2', disabled: true}]
+     */
+    items: ComboboxItem[];
+    private _viewItems;
+    private _currentFocusItemIndex;
+    /**
+     * This property accepts a function that allows users to customize the logic for matching options in the dropdown.
+     * Default implementation performs case-insensitive substring matching.
+     */
+    filter: typeof defaultFilterFn;
+    private _input;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _autoUpdateController;
+    private _clickOutsideController;
+    private _onClickOutside;
+    private _moveFocusByKeydown;
+    private _updateFormValue;
+    private _closePopup;
+    private _handleFocusOut;
+    private _handleClick;
+    private _handleArrowClick;
+    private _handleClickItem;
+    private _handleKeyDown;
+    /**
+     * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+     * The combobox menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.
+     * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
+     */
+    private _handleFloatingReady;
+    /**
+     * Handles the clear button click event.
+     * Clears the current value and triggers form value update.
+     */
+    private _handleClearClick;
+    /**
+     * Synchronizes the display items based on the current filter state.
+     * @param type - Whether to show all items or apply filtering
+     */
+    private _synchronizeShowItems;
+    /**
+     * Handles input events from the combobox input field.
+     * Updates the value, applies filtering, and opens dropdown if matches are found.
+     */
+    private _handleInput;
+    /**
+     * Handles change events from the combobox input field.
+     * Dispatches a custom change event when the input value changes and loses focus.
+     */
+    private _handleChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the input element.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+    protected 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 {
+    interface HTMLElementTagNameMap {
+        "daikin-combobox": DaikinCombobox;
+    }
+}