@daikin-oss/design-system-web-components 1.4.1 → 1.5.0

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

@@ -24,41 +24,41 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "size-4",
   "border-ddt-color-common-neutral-default",
   "border-2",
-  "rounded-sm",
+  "rounded-xs",
   "relative",
   "appearance-none",
   "before:text-ddt-color-common-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
-  "checked:before:i-daikin-checkbox-checked",
+  "checked:before:icon-[daikin--checkbox-checked]",
   "checked:before:size-3",
-  "indeterminate:before:i-daikin-checkbox-indeterminate",
+  "indeterminate:before:icon-[daikin--checkbox-indeterminate]",
   "indeterminate:before:size-2.5",
-  "focus-visible:outline",
+  "focus-visible:outline-solid",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:group-hover:border-ddt-color-common-neutral-hover",
-  "enabled:group-hover:bg-ddt-color-common-surface-hover",
-  "enabled:group-active:border-ddt-color-common-neutral-press",
-  "enabled:group-active:bg-ddt-color-common-surface-press",
+  "group-hover:enabled:border-ddt-color-common-neutral-hover",
+  "group-hover:enabled:bg-ddt-color-common-surface-hover",
+  "group-active:enabled:border-ddt-color-common-neutral-press",
+  "group-active:enabled:bg-ddt-color-common-surface-press",
   "enabled:checked:border-ddt-color-common-brand-default",
   "enabled:checked:bg-ddt-color-common-brand-default",
-  "enabled:checked:group-hover:bg-ddt-color-common-brand-hover",
-  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
-  "enabled:checked:group-hover:before:text-ddt-color-common-text-inverse",
-  "enabled:checked:group-active:bg-ddt-color-common-brand-press",
-  "enabled:checked:group-active:border-ddt-color-common-brand-press",
-  "enabled:checked:group-active:before:text-ddt-color-common-text-inverse",
+  "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
+  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+  "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
+  "group-active:checked:enabled:bg-ddt-color-common-brand-press",
+  "group-active:checked:enabled:border-ddt-color-common-brand-press",
+  "group-active:checked:enabled:before:text-ddt-color-common-text-inverse",
   "enabled:indeterminate:bg-ddt-color-common-brand-default",
   "enabled:indeterminate:border-ddt-color-common-brand-default",
-  "enabled:indeterminate:group-hover:bg-ddt-color-common-brand-hover",
-  "enabled:indeterminate:group-hover:border-ddt-color-common-brand-hover",
-  "enabled:indeterminate:group-hover:before:text-ddt-color-common-text-inverse",
-  "enabled:indeterminate:group-active:bg-ddt-color-common-brand-press",
-  "enabled:indeterminate:group-active:border-ddt-color-common-brand-press",
-  "enabled:indeterminate:group-active:before:text-ddt-color-common-text-inverse",
+  "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
+  "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
+  "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
+  "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
+  "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
+  "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
   "disabled:border-ddt-color-common-disabled",
   "disabled:bg-ddt-color-common-text-inverse",
   "disabled:checked:bg-ddt-color-common-disabled",

package/dist/cjs/components/checkbox-group/daikin-checkbox-group.d.cts

@@ -2,7 +2,7 @@ import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 declare const cvaCheckboxGroup: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type CheckboxGroupProps = MergeVariantProps<typeof cvaCheckboxGroup>;
 /**

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

@@ -20,71 +20,255 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaWrapper = classVarianceAuthority.cva([
-  "flex",
-  "items-center",
-  "rounded-[100px]",
-  "overflow-hidden",
-  "size-full",
-  "border",
-  "px-1",
-  "border-ddt-color-common-neutral-default"
-]);
-const cvaRemoveButton = classVarianceAuthority.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]"
-]);
+const cvaInputChipWrapper = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "rounded-full",
+    "size-full",
+    "border",
+    "py-0.5",
+    "px-1"
+  ],
+  {
+    variants: {
+      variant: {
+        fill: [
+          "border-ddt-color-common-brand-default",
+          "bg-ddt-color-common-brand-default"
+        ],
+        outline: ["border-ddt-color-common-neutral-default"]
+      }
+    }
+  }
+);
+const cvaInputChipIcon = classVarianceAuthority.cva(["icon-size-4", "slotted:flex-none"], {
+  variants: {
+    variant: {
+      fill: ["text-ddt-color-common-text-inverse"],
+      outline: ["text-ddt-color-common-text-primary"]
+    }
+  }
+});
+const cvaInputChipText = classVarianceAuthority.cva(
+  [
+    "text-sm",
+    "font-daikinSerif",
+    "leading-[130%]",
+    "px-1",
+    "mr-0.5",
+    "overflow-hidden",
+    "whitespace-nowrap",
+    "flex-1"
+  ],
+  {
+    variants: {
+      variant: {
+        fill: ["text-ddt-color-common-text-inverse"],
+        outline: ["text-ddt-color-common-text-primary"]
+      }
+    }
+  }
+);
+const cvaRemoveButton = classVarianceAuthority.cva(
+  [
+    "flex-none",
+    "relative",
+    "w-4",
+    "h-4",
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "text-(--color-primary)",
+    "bg-(--color-secondary)",
+    "after:absolute",
+    "after:bg-transparent",
+    "after:size-6",
+    "after:top-1/2",
+    "after:left-1/2",
+    "after:-translate-x-1/2",
+    "after:-translate-y-1/2",
+    "after:rounded-full"
+  ],
+  {
+    variants: {
+      variant: {
+        fill: [
+          "text-ddt-color-common-text-inverse",
+          "focus-visible:outline-ddt-color-common-border-inverse",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]"
+        ],
+        outline: [
+          "text-ddt-color-common-neutral-default",
+          "focus-visible:outline-ddt-color-common-border-focus",
+          "enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+          "enabled:hover:[--color-primary:var(--dds-color-common-neutral-hover)]",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-neutral-press)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
+        ]
+      }
+    }
+  }
+);
+const cvaFilterChipWrapper = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "rounded-full",
+    "overflow-hidden",
+    "size-full",
+    "border",
+    "py-0.5",
+    "px-1",
+    "min-h-6",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "text-(--color-primary)",
+    "bg-(--color-secondary)",
+    "border-(--color-tertiary)"
+  ],
+  {
+    variants: {
+      checked: {
+        true: [
+          "enabled:[--color-primary:var(--dds-color-common-text-inverse)]",
+          "enabled:[--color-secondary:var(--dds-color-common-brand-default)]",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]",
+          "enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
+          "enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
+          "disabled:[--color-primary:var(--dds-color-common-text-inverse)]",
+          "disabled:[--color-secondary:var(--dds-color-common-disabled)]",
+          "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
+        ],
+        false: [
+          "focus-visible:outline-ddt-color-common-border-focus",
+          "enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+          "enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
+          "enabled:hover:[--color-primary:var(--dds-color-common-brand-hover)]",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+          "enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
+          "enabled:active:[--color-primary:var(--dds-color-common-brand-press)]",
+          "enabled:active:[--color-secondary:var(--dds-color-common-surface-brand-press)]",
+          "enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
+          "disabled:[--color-primary:var(--dds-color-common-disabled)]",
+          "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
+        ]
+      }
+    }
+  }
+);
+const cvaFilterChipText = classVarianceAuthority.cva(
+  ["text-sm", "font-daikinSerif", "leading-[130%]", "px-1", "mr-0.5"],
+  {
+    variants: {
+      checked: {
+        true: ["text-ddt-color-common-text-inverse"],
+        false: ["text-(--color-primary)"]
+      }
+    }
+  }
+);
 exports.DaikinChip = class DaikinChip extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this.checked = false;
+    this.disabled = false;
+    this.withCheckedIcon = false;
     this.chipAriaLabel = null;
   }
   _handleRemoveClick(event) {
     event.stopPropagation();
     this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
   }
+  /**
+   * Emits `before-select` event if necessary and returns whether we should proceed.
+   *
+   * 1. Emit "before-select" event.
+   * 2. Check and return whether the event is canceled.
+   *
+   * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+   */
+  _emitBeforeSelect() {
+    return this.dispatchEvent(
+      new CustomEvent("before-select", {
+        bubbles: true,
+        cancelable: true
+      })
+    );
+  }
+  /**
+   * Handles "click" event emitted by `daikin-chip` component when "filter" type is used.
+   */
+  _handleChipClick(event) {
+    event.stopImmediatePropagation();
+    if (!this._emitBeforeSelect()) {
+      return;
+    }
+    this.checked = !this.checked;
+    this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: { checked: this.checked },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   render() {
-    return lit.html`
-      <div
-        role="group"
-        class=${cvaWrapper()}
-        aria-label=${ifDefined_js.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
+    switch (this.type) {
+      case "input":
+        return lit.html`
+          <div
+            role="group"
+            class=${cvaInputChipWrapper({ variant: this.variant })}
+            aria-label=${ifDefined_js.ifDefined(this.chipAriaLabel)}
+          >
+            <slot
+              name="left-icon"
+              class=${cvaInputChipIcon({ variant: this.variant })}
+            ></slot>
+            <span class=${cvaInputChipText({ variant: this.variant })}>
+              <slot></slot>
+            </span>
+            <button
+              type="button"
+              class=${cvaRemoveButton({ variant: this.variant })}
+              aria-label="Remove"
+              @click=${this._handleRemoveClick}
+            >
+              <span
+                class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
+              ></span>
+            </button>
+          </div>
+        `;
+      case "filter":
+        return lit.html`<button
           type="button"
-          class=${cvaRemoveButton()}
-          aria-label="Remove"
-          @click=${this._handleRemoveClick}
+          class=${cvaFilterChipWrapper({ checked: this.checked })}
+          aria-pressed=${this.checked}
+          ?disabled=${this.disabled}
+          @click=${this._handleChipClick}
         >
-          <span class="i-daikin-close text-[--color-primary]"></span>
-        </button>
-      </div>
-    `;
+          ${this.withCheckedIcon && this.checked ? lit.html`<span
+                class="icon-[daikin--check] text-(--color-primary) size-4 flex-none"
+              ></span>` : lit.nothing}
+          <span class=${cvaFilterChipText({ checked: this.checked })}>
+            <slot></slot>
+          </span>
+        </button>`;
+    }
   }
   /**
-   * Focuses on the inner remove button
+   * Focuses on the inner remove button or the chip button depending on the type.
    * @param options focus options
    */
   focus(options) {
@@ -98,8 +282,34 @@ exports.DaikinChip.styles = lit.css`
     :host {
       display: inline-flex;
       width: max-content;
+      vertical-align: middle;
     }
   `;
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "input",
+    isAllowedValue: ddsProperty.oneOf(["input", "filter"])
+  })
+], exports.DaikinChip.prototype, "type", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "outline",
+    isAllowedValue: ddsProperty.oneOf(["fill", "outline"])
+  })
+], exports.DaikinChip.prototype, "variant", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinChip.prototype, "checked", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinChip.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "with-checked-icon" })
+], exports.DaikinChip.prototype, "withCheckedIcon", 2);
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, attribute: "chip-aria-label" })
 ], exports.DaikinChip.prototype, "chipAriaLabel", 2);

package/dist/cjs/components/chip/daikin-chip.d.cts

@@ -2,7 +2,12 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * 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.
+ * @fires remove - When type is "input", a custom event emitted when a user clicks the remove button.
+ * @fires before-select - When type is "filter", a cancelable custom event emitted before changing the selected state of a filter type chip. Listeners can call `event.preventDefault()` to prevent the state change.
+ * @fires select - When type is "filter", a custom event emitted after the selected state of a filter type chip has changed. The new selected state is provided in `event.detail.checked`.
+ *
+ * @slot - A slot for the chip content.
+ * @slot left-icon - When type is "input", a slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *
@@ -17,14 +22,51 @@ import { DDSElement } from "../../base/index.cjs";
 export declare class DaikinChip extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Provides an accessible name of the chip.
+     * Type of the chip.
+     *
+     * @default "input"
+     */
+    type: "input" | "filter";
+    /**
+     * Specify the variant of the chip when type is "input".
+     *
+     * @default "outline"
+     */
+    variant: "fill" | "outline";
+    /**
+     * Specify the chip is selected when type is "filter".
+     */
+    checked: boolean;
+    /**
+     * Specify the chip disabled state when type is "filter".
+     */
+    disabled: boolean;
+    /**
+     * Specify the chip with a left checked icon when type is "filter".
+     */
+    withCheckedIcon: boolean;
+    /**
+     * Provides an accessible name of the chip when type is "input".
      */
     chipAriaLabel: string | null;
     private _focusableElement;
     private _handleRemoveClick;
+    /**
+     * Emits `before-select` event if necessary and returns whether we should proceed.
+     *
+     * 1. Emit "before-select" event.
+     * 2. Check and return whether the event is canceled.
+     *
+     * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+     */
+    private _emitBeforeSelect;
+    /**
+     * Handles "click" event emitted by `daikin-chip` component when "filter" type is used.
+     */
+    private _handleChipClick;
     render(): import('lit-html').TemplateResult<1>;
     /**
-     * Focuses on the inner remove button
+     * Focuses on the inner remove button or the chip button depending on the type.
      * @param options focus options
      */
     focus(options?: FocusOptions): void;

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

@@ -38,20 +38,22 @@ const cvaInput = classVarianceAuthority.cva(
     "py-3",
     "pl-4",
     "pr-16",
-    "rounded",
+    "rounded-sm",
     "overflow-hidden",
     "font-daikinSerif",
     "text-left",
     "leading-[130%]",
     "relative",
-    "outline",
+    "outline-solid",
     "outline-1",
     "-outline-offset-1",
     "whitespace-nowrap",
     "text-ellipsis",
+    "text-ddt-color-common-text-primary",
+    "placeholder:text-ddt-color-common-text-secondary",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "enabled:outline-[--color-base]",
+    "enabled:outline-(--color-base)",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
     "enabled:after:text-ddt-color-common-text-primary",
@@ -63,15 +65,11 @@ const cvaInput = classVarianceAuthority.cva(
     variants: {
       error: {
         false: [
-          "var-color-ddt-color-common-neutral-default/color-base",
-          "hover:var-color-ddt-color-common-neutral-hover/color-base",
-          "focus-visible:var-color-ddt-color-common-border-focus/color-base"
+          "[--color-base:var(--dds-color-common-neutral-default)]",
+          "hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+          "focus-visible:[--color-base:var(--dds-color-common-border-focus)]"
         ],
-        true: ["var-color-ddt-color-common-danger-default/color-base"]
-      },
-      placeholder: {
-        false: ["text-ddt-color-common-text-primary"],
-        true: ["text-ddt-color-common-text-secondary"]
+        true: ["[--color-base:var(--dds-color-common-danger-default)]"]
       }
     }
   }
@@ -88,24 +86,24 @@ const cvaOption = classVarianceAuthority.cva(
     "leading-[130%]",
     "text-left",
     "relative",
-    "data-[focus]:outline",
-    "data-[focus]:outline-2",
-    "data-[focus]:-outline-offset-2",
-    "data-[focus]:outline-ddt-color-common-border-focus"
+    "data-focus:outline-solid",
+    "data-focus:outline-2",
+    "data-focus:-outline-offset-2",
+    "data-focus:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       selected: {
         false: [
-          "var-color-ddt-color-common-background-default/color-primary",
-          "hover:var-color-ddt-color-common-surface-hover/color-primary",
-          "active:var-color-ddt-color-common-surface-press/color-primary"
+          "[--color-primary:var(--dds-color-common-background-default)]",
+          "hover:[--color-primary:var(--dds-color-common-surface-hover)]",
+          "active:[--color-primary:var(--dds-color-common-surface-press)]"
         ],
         true: [
-          "var-color-ddt-color-common-surface-selected-default/color-primary",
-          "hover:var-color-ddt-color-common-surface-selected-hover/color-primary",
-          "active:var-color-ddt-color-common-surface-selected-press/color-primary",
-          "after:i-daikin-dropdown-check",
+          "[--color-primary:var(--dds-color-common-surface-selected-default)]",
+          "hover:[--color-primary:var(--dds-color-common-surface-selected-hover)]",
+          "active:[--color-primary:var(--dds-color-common-surface-selected-press)]",
+          "after:icon-[daikin--dropdown-check]",
           "after:size-6",
           "pr-10",
           "after:absolute",
@@ -117,7 +115,7 @@ const cvaOption = classVarianceAuthority.cva(
       disabled: {
         false: [
           "text-ddt-color-common-text-primary",
-          "bg-[--color-primary]",
+          "bg-(--color-primary)",
           "cursor-pointer"
         ],
         true: [
@@ -130,9 +128,9 @@ const cvaOption = classVarianceAuthority.cva(
 );
 const cvaArrow = classVarianceAuthority.cva(
   [
-    "i-daikin-chevron-down",
+    "icon-[daikin--chevron-down]",
     "size-6",
-    "flex-shrink-0",
+    "shrink-0",
     "z-10",
     "pointer-events-auto"
   ],
@@ -426,8 +424,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
       <div class="w-full relative">
         <input
           class=${cvaInput({
-      error: this.error,
-      placeholder: !this.value || this.value.length === 0
+      error: this.error
     })}
           role="combobox"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
@@ -452,7 +449,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
           class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
         >
           ${!!this.value && !!this.value.length ? lit.html`<daikin-icon-button
-                class="size-6 flex-shrink-0"
+                class="size-6 shrink-0"
                 color="neutral"
                 variant="ghost"
                 ?disabled=${this.disabled}
@@ -461,7 +458,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
                 @click=${this._handleClearClick}
                 @focusout=${this._handleFocusOut}
               >
-                <span class="i-daikin-close"></span>
+                <span class="icon-[daikin--close] size-6"></span>
               </daikin-icon-button>` : lit.nothing}
           <span
             class=${cvaArrow({ open: this.open, disabled: this.disabled })}
@@ -477,7 +474,7 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
         id="combobox-items"
         popover="manual"
         tabindex="-1"
-        class="flex flex-col overflow-hidden rounded border border-ddt-color-divider floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] opacity-1 transition-[opacity] max-w-min"
+        class="flex flex-col overflow-hidden rounded-sm border border-ddt-color-divider floating-unready:hidden absolute left-(--floating-x,0) top-(--floating-y,0) min-w-(--floating-width) max-h-50 max-w-min"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >