@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

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

@@ -31,86 +31,66 @@ const cvaInputChipWrapper = cva(
   {
     variants: {
       variant: {
-        fill: [
-          "border-ddt-color-common-brand-default",
-          "bg-ddt-color-common-brand-default"
+        fill: ["border-(--border-color-fill)", "bg-(--bg-color-fill)"],
+        outline: ["border-(--border-color-outline)"]
+      },
+      elevated: {
+        true: [
+          "shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]",
+          ""
         ],
-        outline: ["border-ddt-color-common-neutral-default"]
+        false: []
       }
-    }
-  }
-);
-const cvaInputChipIcon = 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 = cva(
-  [
-    "text-(length:--dds-font-size-350)",
-    "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"]
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        elevated: true,
+        class: ["bg-(--dds-color-common-surface-elevated-lv1)"]
       }
-    }
-  }
-);
-const cvaRemoveButton = 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 cvaInputChipIcon = cva([
+  "icon-size-4",
+  "slotted:flex-none",
+  "text-ddt-color-common-text-primary"
+]);
+const cvaInputChipText = cva([
+  "text-(length:--dds-font-size-350)",
+  "px-1",
+  "mr-0.5",
+  "overflow-hidden",
+  "whitespace-nowrap",
+  "flex-1",
+  "text-ddt-color-common-text-primary"
+]);
+const cvaRemoveButton = 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",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:[--color-primary:var(--dds-color-common-text-primary)]",
+  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
+  "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]"
+]);
 const cvaFilterChipWrapper = cva(
   [
     "flex",
@@ -158,8 +138,32 @@ const cvaFilterChipWrapper = cva(
           "disabled:[--color-primary:var(--dds-color-common-disabled)]",
           "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
         ]
+      },
+      elevated: {
+        true: [
+          "shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]"
+        ],
+        false: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        checked: true,
+        elevated: true,
+        class: [
+          "enabled:[--color-secondary:var(--dds-color-common-brand-elevated-default)]!",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-elevated-hover)]!",
+          "enabled:active:[--color-secondary:var(--dds-color-common-brand-elevated-press)]!"
+        ]
+      },
+      {
+        checked: false,
+        elevated: true,
+        class: [
+          "enabled:[--color-secondary:var(--dds-color-common-surface-elevated-lv1)]"
+        ]
+      }
+    ]
   }
 );
 const cvaFilterChipText = cva(
@@ -176,6 +180,8 @@ const cvaFilterChipText = cva(
 let DaikinChip = class extends DDSElement {
   constructor() {
     super(...arguments);
+    this.elevated = false;
+    this.hideRemoveButton = false;
     this.checked = false;
     this.disabled = false;
     this.withCheckedIcon = false;
@@ -224,32 +230,37 @@ let DaikinChip = class extends DDSElement {
         return html`
           <div
             role="group"
-            class=${cvaInputChipWrapper({ variant: this.variant })}
+            part="chip"
+            class=${cvaInputChipWrapper({
+          variant: this.variant,
+          elevated: this.elevated
+        })}
             aria-label=${ifDefined(this.chipAriaLabel)}
           >
-            <slot
-              name="left-icon"
-              class=${cvaInputChipIcon({ variant: this.variant })}
-            ></slot>
-            <span class=${cvaInputChipText({ variant: this.variant })}>
+            <slot name="left-icon" class=${cvaInputChipIcon()}></slot>
+            <span class=${cvaInputChipText()}>
               <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>
+            ${this.hideRemoveButton ? nothing : html`<button
+                  type="button"
+                  class=${cvaRemoveButton()}
+                  aria-label="Remove"
+                  @click=${this._handleRemoveClick}
+                >
+                  <span
+                    class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
+                  ></span>
+                </button>`}
           </div>
         `;
       case "filter":
         return html`<button
           type="button"
-          class=${cvaFilterChipWrapper({ checked: this.checked })}
+          part="chip"
+          class=${cvaFilterChipWrapper({
+          checked: this.checked,
+          elevated: this.elevated
+        })}
           aria-pressed=${this.checked}
           ?disabled=${this.disabled}
           @click=${this._handleChipClick}
@@ -279,6 +290,83 @@ DaikinChip.styles = css`
       display: inline-flex;
       width: max-content;
       vertical-align: middle;
+
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --border-color-outline: var(--dds-color-common-accent-lv5-gray);
+    }
+
+    :host([color="gray"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --border-color-outline: var(--dds-color-common-accent-lv5-gray);
+    }
+    :host([color="red"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-red);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-red);
+      --border-color-outline: var(--dds-color-common-accent-lv5-red);
+    }
+    :host([color="blue"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-blue);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-blue);
+      --border-color-outline: var(--dds-color-common-accent-lv5-blue);
+    }
+    :host([color="yellow"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-yellow);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-yellow);
+      --border-color-outline: var(--dds-color-common-accent-lv5-yellow);
+    }
+    :host([color="green"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-green);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-green);
+      --border-color-outline: var(--dds-color-common-accent-lv5-green);
+    }
+    :host([color="orange"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-orange);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-orange);
+      --border-color-outline: var(--dds-color-common-accent-lv5-orange);
+    }
+    :host([color="purple"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-purple);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-purple);
+      --border-color-outline: var(--dds-color-common-accent-lv5-purple);
+    }
+
+    :host([elevated]),
+    :host([elevated][color="gray"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-gray);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-gray);
+      --border-color-outline: var(--dds-color-common-accent-lv5-gray);
+    }
+    :host([elevated][color="red"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-red);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-red);
+      --border-color-outline: var(--dds-color-common-accent-lv5-red);
+    }
+    :host([elevated][color="blue"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-blue);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-blue);
+      --border-color-outline: var(--dds-color-common-accent-lv5-blue);
+    }
+    :host([elevated][color="yellow"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-yellow);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-yellow);
+      --border-color-outline: var(--dds-color-common-accent-lv5-yellow);
+    }
+    :host([elevated][color="green"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-green);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-green);
+      --border-color-outline: var(--dds-color-common-accent-lv5-green);
+    }
+    :host([elevated][color="orange"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-orange);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-orange);
+      --border-color-outline: var(--dds-color-common-accent-lv5-orange);
+    }
+    :host([elevated][color="purple"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-purple);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-purple);
+      --border-color-outline: var(--dds-color-common-accent-lv5-purple);
     }
   `;
 __decorateClass([
@@ -297,6 +385,20 @@ __decorateClass([
     isAllowedValue: oneOf(["fill", "outline"])
   })
 ], DaikinChip.prototype, "variant", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "gray",
+    isAllowedValue: oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
+  })
+], DaikinChip.prototype, "color", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinChip.prototype, "elevated", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
+], DaikinChip.prototype, "hideRemoveButton", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinChip.prototype, "checked", 2);

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

@@ -29,6 +29,8 @@ export declare function defaultFilterFn(items: readonly ComboboxItem[], value: s
  * @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.
  * @fires toggle - A custom event emitted when the combobox menu opens or closes.
  *
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ *
  * @example
  *
  * ```js
@@ -67,6 +69,10 @@ export declare class DaikinCombobox extends DDSFormElement {
      * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
+    /**
+     * Whether the combobox is readonly.
+     */
+    readonly: boolean;
     /**
      * An array of items for the combobox dropdown. Can be:
      * - Array of strings: ['Option 1', 'Option 2']
@@ -86,12 +92,15 @@ export declare class DaikinCombobox extends DDSFormElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
+    private _hasLeftIcon;
+    private get _isPopupOpen();
     private _autoUpdateController;
     private _clickOutsideController;
     private _onClickOutside;
     private _moveFocusByKeydown;
     private _updateFormValue;
     private _closePopup;
+    private _handleLeftIconSlotChange;
     private _handleFocusOut;
     private _handleClick;
     private _handleArrowClick;
@@ -129,6 +138,7 @@ export declare class DaikinCombobox extends DDSFormElement {
      * @param options focus options
      */
     focus(options?: FocusOptions): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.