@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/combobox-field/combobox.css

@@ -1,113 +1,206 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._control_u8epf_3 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._control_siwfv_3 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+  }
+  ._control_siwfv_3 {
+    --_field-fill: var(
+    	--field-bg,
+    	var(--sys-color-surface)
+    );
     align-items: center;
     box-sizing: border-box;
-    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
-    border: 1px solid var(--sys-color-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--sys-color-surface);
-    padding: var(--sys-unit-6);
-    color: var(--field-fg);
-    font: var(--sys-font-body-medium);
-  }
-  ._control_u8epf_3 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._control_u8epf_3[data-focus-visible] {
-    outline-width: var(--sys-focus-ring-width);
+    min-block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
+    border: var(--field-border-width, 1px) solid var(--field-border, var(--sys-color-border));
+    border-radius: var(--field-radius, var(--sys-radius-sm));
+    background: var(--_field-fill);
+    padding-block: var(--field-pad-y, var(--sys-unit-6));
+    padding-inline: var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6))) var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6)));
+    box-shadow: var(--field-shadow, none);
+    color: var(--_field-fg);
+    font: var(--field-font, var(--sys-font-body-medium));
+    caret-color: var(--_field-caret);
+    backdrop-filter: var(--field-backdrop-filter, none);
+  }
+  ._control_siwfv_3 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._control_siwfv_3[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._control_u8epf_3 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._control_siwfv_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard), box-shadow var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._control_u8epf_3:hover:not([data-disabled], [data-readonly]), ._control_u8epf_3[data-focused], ._control_u8epf_3[data-popup-open] {
-    border-color: var(--sys-color-primary);
+  ._control_siwfv_3:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._control_siwfv_3[data-focused], ._control_siwfv_3[data-popup-open] {
+    border-width: var(--field-focus-border-width, var(--field-border-width, 1px));
+    border-color: var(--field-focus-border, var(--sys-color-primary));
+    box-shadow: var(--field-focus-shadow, var(--field-shadow, none));
+  }
+  ._control_siwfv_3:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
   }
-  ._control_u8epf_3[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
+  ._control_siwfv_3[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
   }
-  ._control_u8epf_3[data-pending] {
+  ._control_siwfv_3[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._control_u8epf_3[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._control_u8epf_3[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._control_siwfv_3[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    border-width: var(--field-invalid-border-width, var(--field-border-width, 1px));
+    box-shadow: var(--field-invalid-shadow, var(--field-shadow, none));
+  }
+  ._control_siwfv_3[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background: var(--sys-color-disabled-bg);
+    --_field-fill: var(
+    	--field-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
   }
-  ._control_u8epf_3::-webkit-search-cancel-button {
+  ._control_siwfv_3::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._control_u8epf_3::-webkit-search-decoration {
+  ._control_siwfv_3::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._control_u8epf_3 {
+  ._control_siwfv_3 {
     display: inline-flex;
   }
-  ._control_u8epf_3::placeholder {
-    color: var(--field-placeholder-fg);
+  ._control_siwfv_3::placeholder {
+    color: var(--_field-placeholder-fg);
+  }
+  ._control_siwfv_3:autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._control_siwfv_3:-webkit-autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
   }
-  ._control_u8epf_3 {
+  ._control_siwfv_3:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._control_siwfv_3:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._control_siwfv_3 {
     position: relative;
-    gap: var(--combobox-gap, var(--sys-unit-6));
+    gap: var(--combobox-gap, var(--field-inlay-gap, var(--sys-unit-6)));
     justify-content: space-between;
     inline-size: 100%;
     min-inline-size: 0;
     cursor: pointer;
   }
-  ._control_u8epf_3[data-readonly] {
+  ._control_siwfv_3[data-readonly] {
     cursor: default;
   }
-  ._content_u8epf_84 {
+  ._content_siwfv_177 {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--sys-unit-2);
-    min-block-size: var(--sys-unit-14);
+    gap: var(--combobox-content-gap, var(--sys-unit-2));
+    min-block-size: var(--combobox-content-min-block-size, var(--sys-unit-14));
     min-inline-size: 0;
     overflow-wrap: normal;
     hyphens: auto;
     line-height: normal;
   }
-  ._control_u8epf_3[data-placeholder] ._content_u8epf_84 {
-    color: var(--field-placeholder-fg);
+  ._control_siwfv_3[data-placeholder] ._content_siwfv_177 {
+    color: var(--_field-placeholder-fg);
   }
-  ._trigger_u8epf_99 {
+  ._trigger_siwfv_192 {
     display: inline-flex;
     flex: 1;
     align-items: center;
-    gap: var(--combobox-gap, var(--sys-unit-6));
+    gap: var(--combobox-gap, var(--field-inlay-gap, var(--sys-unit-6)));
     min-inline-size: 0;
     text-align: start;
   }
-  ._content_u8epf_84 + ._trigger_u8epf_99 {
+  ._content_siwfv_177 + ._trigger_siwfv_192 {
     flex: none;
   }
-  ._spokenValue_u8epf_110 {
+  ._spokenValue_siwfv_203 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -115,165 +208,174 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._icon_u8epf_118 {
+  ._icon_siwfv_211 {
     display: inline-flex;
-    color: var(--field-muted-fg);
+    color: var(--combobox-icon-fg, var(--_field-muted-fg));
+    font-size: var(--combobox-icon-size, 1em);
   }
-  ._tags_u8epf_122 {
+  @media not (prefers-reduced-motion) {
+    ._icon_siwfv_211 {
+      transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._control_siwfv_3[data-popup-open] ._icon_siwfv_211 {
+    rotate: var(--combobox-icon-open-rotate, none);
+  }
+  ._tags_siwfv_224 {
     display: contents;
   }
-  ._tagList_u8epf_125 {
+  ._tagList_siwfv_227 {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--sys-unit-2);
+    gap: var(--combobox-tag-list-gap, var(--sys-unit-2));
     min-inline-size: 0;
   }
-  ._tag_u8epf_122[data-variant=subtle] {
-    --combobox-tag-bg: var(--sys-color-neutral-bg);
-    --combobox-tag-fg: var(--sys-color-neutral-fg);
-    --combobox-tag-border: transparent;
-  }
-  ._tag_u8epf_122[data-variant=solid] {
-    --combobox-tag-bg: var(--sys-color-neutral-fg);
-    --combobox-tag-fg: var(--sys-color-neutral-bg);
-    --combobox-tag-border: transparent;
-  }
-  ._tag_u8epf_122[data-variant=outline] {
-    --combobox-tag-bg: transparent;
-    --combobox-tag-fg: var(--sys-color-neutral-fg);
-    --combobox-tag-border: var(--sys-color-neutral-border);
-  }
-  ._tag_u8epf_122[data-tone=info][data-variant=subtle] {
-    --combobox-tag-bg: var(--sys-color-info-bg);
-    --combobox-tag-fg: var(--sys-color-info-fg);
-    --combobox-tag-border: transparent;
-  }
-  ._tag_u8epf_122[data-tone=info][data-variant=solid] {
-    --combobox-tag-bg: var(--sys-color-info-fg);
-    --combobox-tag-fg: var(--sys-color-info-bg);
-    --combobox-tag-border: transparent;
-  }
-  ._tag_u8epf_122[data-tone=info][data-variant=outline] {
-    --combobox-tag-bg: transparent;
-    --combobox-tag-fg: var(--sys-color-info-fg);
-    --combobox-tag-border: var(
+  ._tag_siwfv_224[data-variant=subtle] {
+    --_combobox-tag-bg: var(--sys-color-neutral-bg);
+    --_combobox-tag-fg: var(--sys-color-neutral-fg);
+    --_combobox-tag-border: transparent;
+  }
+  ._tag_siwfv_224[data-variant=solid] {
+    --_combobox-tag-bg: var(--sys-color-neutral-fg);
+    --_combobox-tag-fg: var(--sys-color-neutral-bg);
+    --_combobox-tag-border: transparent;
+  }
+  ._tag_siwfv_224[data-variant=outline] {
+    --_combobox-tag-bg: transparent;
+    --_combobox-tag-fg: var(--sys-color-neutral-fg);
+    --_combobox-tag-border: var(--sys-color-neutral-border);
+  }
+  ._tag_siwfv_224[data-tone=info][data-variant=subtle] {
+    --_combobox-tag-bg: var(--sys-color-info-bg);
+    --_combobox-tag-fg: var(--sys-color-info-fg);
+    --_combobox-tag-border: transparent;
+  }
+  ._tag_siwfv_224[data-tone=info][data-variant=solid] {
+    --_combobox-tag-bg: var(--sys-color-info-fg);
+    --_combobox-tag-fg: var(--sys-color-info-bg);
+    --_combobox-tag-border: transparent;
+  }
+  ._tag_siwfv_224[data-tone=info][data-variant=outline] {
+    --_combobox-tag-bg: transparent;
+    --_combobox-tag-fg: var(--sys-color-info-fg);
+    --_combobox-tag-border: var(
     	--sys-color-info-border
     );
   }
-  ._tag_u8epf_122[data-tone=success][data-variant=subtle] {
-    --combobox-tag-bg: var(--sys-color-success-bg);
-    --combobox-tag-fg: var(--sys-color-success-fg);
-    --combobox-tag-border: transparent;
+  ._tag_siwfv_224[data-tone=success][data-variant=subtle] {
+    --_combobox-tag-bg: var(--sys-color-success-bg);
+    --_combobox-tag-fg: var(--sys-color-success-fg);
+    --_combobox-tag-border: transparent;
   }
-  ._tag_u8epf_122[data-tone=success][data-variant=solid] {
-    --combobox-tag-bg: var(--sys-color-success-fg);
-    --combobox-tag-fg: var(--sys-color-success-bg);
-    --combobox-tag-border: transparent;
+  ._tag_siwfv_224[data-tone=success][data-variant=solid] {
+    --_combobox-tag-bg: var(--sys-color-success-fg);
+    --_combobox-tag-fg: var(--sys-color-success-bg);
+    --_combobox-tag-border: transparent;
   }
-  ._tag_u8epf_122[data-tone=success][data-variant=outline] {
-    --combobox-tag-bg: transparent;
-    --combobox-tag-fg: var(--sys-color-success-fg);
-    --combobox-tag-border: var(
+  ._tag_siwfv_224[data-tone=success][data-variant=outline] {
+    --_combobox-tag-bg: transparent;
+    --_combobox-tag-fg: var(--sys-color-success-fg);
+    --_combobox-tag-border: var(
     	--sys-color-success-border
     );
   }
-  ._tag_u8epf_122[data-tone=warning][data-variant=subtle] {
-    --combobox-tag-bg: var(--sys-color-warning-bg);
-    --combobox-tag-fg: var(--sys-color-warning-fg);
-    --combobox-tag-border: transparent;
+  ._tag_siwfv_224[data-tone=warning][data-variant=subtle] {
+    --_combobox-tag-bg: var(--sys-color-warning-bg);
+    --_combobox-tag-fg: var(--sys-color-warning-fg);
+    --_combobox-tag-border: transparent;
   }
-  ._tag_u8epf_122[data-tone=warning][data-variant=solid] {
-    --combobox-tag-bg: var(--sys-color-warning-fg);
-    --combobox-tag-fg: var(--sys-color-warning-bg);
-    --combobox-tag-border: transparent;
+  ._tag_siwfv_224[data-tone=warning][data-variant=solid] {
+    --_combobox-tag-bg: var(--sys-color-warning-fg);
+    --_combobox-tag-fg: var(--sys-color-warning-bg);
+    --_combobox-tag-border: transparent;
   }
-  ._tag_u8epf_122[data-tone=warning][data-variant=outline] {
-    --combobox-tag-bg: transparent;
-    --combobox-tag-fg: var(--sys-color-warning-fg);
-    --combobox-tag-border: var(
+  ._tag_siwfv_224[data-tone=warning][data-variant=outline] {
+    --_combobox-tag-bg: transparent;
+    --_combobox-tag-fg: var(--sys-color-warning-fg);
+    --_combobox-tag-border: var(
     	--sys-color-warning-border
     );
   }
-  ._tag_u8epf_122[data-tone=error][data-variant=subtle] {
-    --combobox-tag-bg: var(--sys-color-error-bg);
-    --combobox-tag-fg: var(--sys-color-error-fg);
-    --combobox-tag-border: transparent;
+  ._tag_siwfv_224[data-tone=error][data-variant=subtle] {
+    --_combobox-tag-bg: var(--sys-color-error-bg);
+    --_combobox-tag-fg: var(--sys-color-error-fg);
+    --_combobox-tag-border: transparent;
   }
-  ._tag_u8epf_122[data-tone=error][data-variant=solid] {
-    --combobox-tag-bg: var(--sys-color-error-fg);
-    --combobox-tag-fg: var(--sys-color-error-bg);
-    --combobox-tag-border: transparent;
+  ._tag_siwfv_224[data-tone=error][data-variant=solid] {
+    --_combobox-tag-bg: var(--sys-color-error-fg);
+    --_combobox-tag-fg: var(--sys-color-error-bg);
+    --_combobox-tag-border: transparent;
   }
-  ._tag_u8epf_122[data-tone=error][data-variant=outline] {
-    --combobox-tag-bg: transparent;
-    --combobox-tag-fg: var(--sys-color-error-fg);
-    --combobox-tag-border: var(
+  ._tag_siwfv_224[data-tone=error][data-variant=outline] {
+    --_combobox-tag-bg: transparent;
+    --_combobox-tag-fg: var(--sys-color-error-fg);
+    --_combobox-tag-border: var(
     	--sys-color-error-border
     );
   }
-  ._tag_u8epf_122 {
+  ._tag_siwfv_224 {
     display: inline-flex;
     align-items: center;
-    gap: var(--sys-unit-3);
+    gap: var(--tag-gap, var(--sys-unit-3));
     box-sizing: border-box;
-    min-block-size: var(--sys-unit-14);
-    border: 1px solid var(--combobox-tag-border);
-    border-radius: var(--sys-radius-full);
-    background: var(--combobox-tag-bg);
-    padding: var(--sys-unit-2) var(--sys-unit-6);
-    color: var(--combobox-tag-fg);
-    font: var(--sys-font-label-small);
-  }
-  ._tag_u8epf_122 {
+    min-block-size: var(--tag-min-block-size, var(--sys-unit-14));
+    border: var(--tag-border-width, 1px) solid var(--combobox-tag-border, var(--tag-border, var(--_combobox-tag-border)));
+    border-radius: var(--tag-radius, var(--sys-radius-full));
+    background: var(--combobox-tag-bg, var(--tag-bg, var(--_combobox-tag-bg)));
+    padding: var(--tag-pad-y, var(--sys-unit-2)) var(--tag-pad-x, var(--sys-unit-6));
+    color: var(--combobox-tag-fg, var(--tag-fg, var(--_combobox-tag-fg)));
+    font: var(--tag-font, var(--sys-font-label-small));
+  }
+  ._tag_siwfv_224 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tag_u8epf_122:focus-visible {
+  ._tag_siwfv_224:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tag_u8epf_122[data-focus-visible] {
+  ._tag_siwfv_224[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tag_u8epf_122 {
+  ._tag_siwfv_224 {
     max-inline-size: 100%;
   }
-  ._tagRemove_u8epf_242 {
+  ._tagRemove_siwfv_344 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    inline-size: var(--sys-unit-10);
-    block-size: var(--sys-unit-10);
+    inline-size: var(--tag-remove-size, var(--sys-unit-10));
+    block-size: var(--tag-remove-size, var(--sys-unit-10));
     margin-block: calc(-1 * var(--sys-unit-1));
-    margin-inline-start: var(--sys-unit-1);
+    margin-inline-start: var(--tag-remove-gap, var(--sys-unit-1));
     margin-inline-end: calc(-1 * var(--sys-unit-2));
     border: 0;
-    border-radius: var(--sys-radius-circle);
-    background: none;
+    border-radius: var(--tag-remove-radius, var(--sys-radius-circle));
+    background: var(--tag-remove-bg, none);
     padding: 0;
     color: inherit;
   }
-  ._tagRemove_u8epf_242 {
+  ._tagRemove_siwfv_344 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tagRemove_u8epf_242:focus-visible {
+  ._tagRemove_siwfv_344:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._tagRemove_u8epf_242 {
+    ._tagRemove_siwfv_344 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._tagRemove_u8epf_242:hover {
-    background: color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent);
+  ._tagRemove_siwfv_344:hover {
+    background: var(--tag-remove-hover-bg, color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent));
   }
-  ._tagRemove_u8epf_242:active {
-    background: color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent);
+  ._tagRemove_siwfv_344:active {
+    background: var(--tag-remove-pressed-bg, color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent));
   }
-  ._positioner_u8epf_276 {
+  ._positioner_siwfv_378 {
     --_popup-edge-padding: var(
     	--popup-edge-padding,
     	var(--sys-unit-16)
@@ -284,164 +386,258 @@
     inherits: false;
     initial-value: 0px;
   }
-  ._positioner_u8epf_276 {
+  ._positioner_siwfv_378 {
     outline: none;
   }
-  ._popup_u8epf_290 {
+  ._popup_siwfv_392 {
     box-sizing: border-box;
     border: none;
-    border-radius: var(--sys-radius-md);
-    background: var(--sys-color-surface-overlay);
-    padding: var(--sys-unit-4);
-    color: var(--sys-color-text);
+    border-radius: var(--popup-radius, var(--sys-radius-md));
+    background: var(--popup-bg, var(--sys-color-surface-overlay));
+    padding: var(--popup-pad, var(--sys-unit-4));
+    color: var(--popup-fg, var(--sys-color-text));
     transform-origin: var(--transform-origin);
     scrollbar-width: thin;
-    scrollbar-color: var(--sys-color-outline) transparent;
-    box-shadow: var(--sys-elevation-1);
+    scrollbar-color: var(--popup-scrollbar-fg, var(--sys-color-outline)) transparent;
+    box-shadow: var(--popup-shadow, var(--sys-elevation-1));
   }
   @media not (prefers-reduced-motion) {
-    ._popup_u8epf_290 {
+    ._popup_siwfv_392 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._popup_u8epf_290[data-starting-style], ._popup_u8epf_290[data-ending-style] {
+  ._popup_siwfv_392[data-starting-style], ._popup_siwfv_392[data-ending-style] {
     opacity: 0;
     transform: scale(0.96);
   }
-  ._popup_u8epf_290 {
+  ._popup_siwfv_392 {
     display: flex;
     flex-direction: column;
     min-inline-size: var(--anchor-width);
     max-inline-size: var(--available-width);
     max-block-size: min(var(--available-height, 22rem), var(--combobox-popup-max-block-size, 22rem));
   }
-  ._search_u8epf_318 {
-    --field-fg: var(--sys-color-text);
-    --field-muted-fg: var(--sys-color-text-muted);
-    --field-placeholder-fg: var(--sys-color-text-placeholder);
+  ._search_siwfv_420 {
+    --_field-fg: var(--field-fg, var(--sys-color-text));
+    --_field-muted-fg: var(
+    	--field-muted-fg,
+    	var(--sys-color-text-muted)
+    );
+    --_field-placeholder-fg: var(
+    	--field-placeholder-fg,
+    	var(--sys-color-text-placeholder)
+    );
+    --_field-caret: var(--field-caret, auto);
+  }
+  ._search_siwfv_420 {
+    --_field-fill: var(
+    	--field-bg,
+    	var(--sys-color-surface)
+    );
     align-items: center;
     box-sizing: border-box;
-    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
-    border: 1px solid var(--sys-color-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--sys-color-surface);
-    padding: var(--sys-unit-6);
-    color: var(--field-fg);
-    font: var(--sys-font-body-medium);
-  }
-  ._search_u8epf_318 {
-    outline: 0 solid var(--sys-color-focus-ring);
-    outline-offset: var(--sys-focus-ring-offset);
-  }
-  ._search_u8epf_318[data-focus-visible] {
-    outline-width: var(--sys-focus-ring-width);
+    min-block-size: var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px)));
+    border: var(--field-border-width, 1px) solid var(--field-border, var(--sys-color-border));
+    border-radius: var(--field-radius, var(--sys-radius-sm));
+    background: var(--_field-fill);
+    padding-block: var(--field-pad-y, var(--sys-unit-6));
+    padding-inline: var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6))) var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6)));
+    box-shadow: var(--field-shadow, none);
+    color: var(--_field-fg);
+    font: var(--field-font, var(--sys-font-body-medium));
+    caret-color: var(--_field-caret);
+    backdrop-filter: var(--field-backdrop-filter, none);
+  }
+  ._search_siwfv_420 {
+    outline: 0 solid var(--field-ring-color, var(--sys-color-focus-ring));
+    outline-offset: var(--field-ring-offset, var(--sys-focus-ring-offset));
+  }
+  ._search_siwfv_420[data-focus-visible] {
+    outline-width: var(--field-ring-width, var(--sys-focus-ring-width));
   }
   @media not (prefers-reduced-motion) {
-    ._search_u8epf_318 {
-      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    ._search_siwfv_420 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard), box-shadow var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._search_u8epf_318:hover:not([data-disabled], [data-readonly]), ._search_u8epf_318[data-focused], ._search_u8epf_318[data-popup-open] {
-    border-color: var(--sys-color-primary);
+  ._search_siwfv_420:hover:not([data-disabled],
+  [data-readonly],
+  [data-focused],
+  [data-popup-open]) {
+    border-color: var(--field-hover-border, var(--sys-color-primary));
+  }
+  ._search_siwfv_420[data-focused], ._search_siwfv_420[data-popup-open] {
+    border-width: var(--field-focus-border-width, var(--field-border-width, 1px));
+    border-color: var(--field-focus-border, var(--sys-color-primary));
+    box-shadow: var(--field-focus-shadow, var(--field-shadow, none));
+  }
+  ._search_siwfv_420:has(:autofill) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
   }
-  ._search_u8epf_318[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
+  ._search_siwfv_420[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
   }
-  ._search_u8epf_318[data-pending] {
+  ._search_siwfv_420[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._search_u8epf_318[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._search_u8epf_318[data-disabled] {
-    --field-fg: var(--sys-color-disabled-fg);
-    --field-muted-fg: var(--sys-color-disabled-fg);
-    --field-placeholder-fg: var(--sys-color-disabled-fg);
-    color: var(--sys-color-disabled-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._search_siwfv_420[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+    border-width: var(--field-invalid-border-width, var(--field-border-width, 1px));
+    box-shadow: var(--field-invalid-shadow, var(--field-shadow, none));
+  }
+  ._search_siwfv_420[data-disabled] {
+    --_field-fg: var(
+    	--field-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-disabled-muted-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-disabled-placeholder-fg,
+    	var(--field-disabled-fg, var(--sys-color-disabled-fg))
+    );
+    color: var(--field-disabled-fg, var(--sys-color-disabled-fg));
     cursor: not-allowed;
-    background: var(--sys-color-disabled-bg);
+    --_field-fill: var(
+    	--field-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
   }
-  ._search_u8epf_318::-webkit-search-cancel-button {
+  ._search_siwfv_420::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._search_u8epf_318::-webkit-search-decoration {
+  ._search_siwfv_420::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._search_u8epf_318 {
+  ._search_siwfv_420 {
     display: inline-flex;
   }
-  ._search_u8epf_318::placeholder {
-    color: var(--field-placeholder-fg);
+  ._search_siwfv_420::placeholder {
+    color: var(--_field-placeholder-fg);
+  }
+  ._search_siwfv_420:autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._search_siwfv_420:-webkit-autofill:not([data-readonly],
+  [data-invalid],
+  [data-disabled]) {
+    --_field-fill: var(
+    	--field-autofill-bg,
+    	var(--sys-color-autofill-bg)
+    );
+  }
+  ._search_siwfv_420:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
   }
-  ._search_u8epf_318 {
+  ._search_siwfv_420:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--_field-fill);
+    -webkit-text-fill-color: var(--_field-fg);
+    caret-color: var(--_field-caret, var(--_field-fg));
+    filter: none;
+  }
+  ._search_siwfv_420 {
     flex-shrink: 0;
-    margin-block-end: var(--sys-unit-4);
+    margin-block-end: var(--combobox-search-gap, var(--sys-unit-4));
     inline-size: 100%;
     min-inline-size: 0;
   }
-  ._statusArea_u8epf_394 {
+  ._statusArea_siwfv_589 {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     contain: inline-size;
   }
-  ._statusArea_u8epf_394 > * + * {
+  ._statusArea_siwfv_589 > * + * {
     align-self: flex-start;
   }
-  ._status_u8epf_394,
-  ._empty_u8epf_404 {
+  ._status_siwfv_589,
+  ._empty_siwfv_599 {
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    gap: var(--sys-unit-4);
+    gap: var(--popup-note-gap, var(--sys-unit-4));
     contain: inline-size;
     min-block-size: 1lh;
-    padding: var(--sys-unit-4) var(--sys-unit-6);
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-body-medium);
+    padding: var(--popup-note-pad-y, var(--sys-unit-4)) var(--popup-note-pad-x, var(--sys-unit-6));
+    color: var(--popup-note-fg, var(--sys-color-text-muted));
+    font: var(--popup-note-font, var(--sys-font-body-medium));
   }
-  ._status_u8epf_394:empty,
-  ._empty_u8epf_404:empty {
+  ._status_siwfv_589:empty,
+  ._empty_siwfv_599:empty {
     min-block-size: 0;
     padding: 0;
   }
-  ._list_u8epf_420 {
+  ._list_siwfv_615 {
     min-block-size: 0;
     overflow-y: auto;
     overscroll-behavior: contain;
     scroll-padding-block: var(--sys-unit-4);
     scrollbar-width: thin;
-    scrollbar-color: var(--sys-color-outline) transparent;
+    scrollbar-color: var(--popup-scrollbar-fg, var(--sys-color-outline)) transparent;
   }
-  ._option_u8epf_428 {
+  ._option_siwfv_623 {
     display: flex;
     align-items: center;
-    gap: var(--sys-unit-6);
+    gap: var(--popup-item-gap, var(--sys-unit-6));
     box-sizing: border-box;
-    min-block-size: var(--sys-unit-20);
-    border-radius: var(--sys-radius-sm);
-    padding: var(--sys-unit-4) var(--sys-unit-6);
-    color: var(--sys-color-text);
-    font: var(--sys-font-body-medium);
+    min-block-size: var(--popup-item-min-block-size, var(--sys-unit-20));
+    border-radius: var(--popup-item-radius, var(--sys-radius-sm));
+    background: var(--popup-item-bg, transparent);
+    padding: var(--popup-item-pad-y, var(--sys-unit-4)) var(--popup-item-pad-x, var(--sys-unit-6));
+    color: var(--popup-item-fg, var(--popup-fg, var(--sys-color-text)));
+    font: var(--popup-item-font, var(--sys-font-body-medium));
     user-select: none;
   }
-  ._option_u8epf_428 {
+  ._option_siwfv_623 {
     position: relative;
     isolation: isolate;
   }
-  ._option_u8epf_428::after {
+  ._option_siwfv_623::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -452,86 +648,105 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._option_u8epf_428::after {
+    ._option_siwfv_623::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_u8epf_428:hover:not(:disabled, [data-disabled])::after {
+  ._option_siwfv_623:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._option_u8epf_428:active:not(:disabled, [data-disabled])::after {
+  ._option_siwfv_623:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._option_u8epf_428 {
+  ._option_siwfv_623 {
     outline: none;
   }
-  ._option_u8epf_428[data-highlighted] {
-    background: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
+  ._option_siwfv_623[data-selected] {
+    background: var(--popup-item-selected-bg, var(--popup-item-bg, transparent));
+    color: var(--popup-item-selected-fg, var(--popup-item-fg, var(--popup-fg, var(--sys-color-text))));
+  }
+  ._option_siwfv_623[data-highlighted] {
+    background: var(--popup-item-highlighted-bg, var(--sys-color-primary-container));
+    color: var(--popup-item-highlighted-fg, var(--sys-color-on-primary-container));
   }
-  ._option_u8epf_428[data-disabled] {
-    color: var(--sys-color-disabled-fg);
+  ._option_siwfv_623[data-disabled] {
+    color: var(--popup-item-disabled-fg, var(--sys-color-disabled-fg));
   }
-  ._indicator_u8epf_475 {
+  ._indicator_siwfv_675 {
     display: inline-flex;
     flex-shrink: 0;
     color: var(--combobox-indicator-fg, var(--sys-color-primary));
   }
-  ._checkbox_u8epf_480 {
-    --box-border: var(--sys-color-border);
-    --box-bg: var(--sys-color-surface);
-    --box-fg: var(--sys-color-on-primary);
-    --box-checked-bg: var(--sys-color-primary);
+  ._checkbox_siwfv_680 {
+    --_checkbox-border: var(
+    	--checkbox-border,
+    	var(--sys-color-border)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-bg,
+    	var(--sys-color-surface)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-fg,
+    	var(--sys-color-on-primary)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-checked-bg,
+    	var(--sys-color-primary)
+    );
     display: grid;
     flex: 0 0 auto;
     place-items: center;
     box-sizing: border-box;
     inline-size: var(--checkbox-size, var(--sys-unit-16));
     block-size: var(--checkbox-size, var(--sys-unit-16));
-    border: 1px solid var(--box-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--box-bg);
-    color: var(--box-fg);
+    border: var(--checkbox-border-width, 1px) solid var(--_checkbox-border);
+    border-radius: var(--checkbox-radius, var(--sys-radius-sm));
+    background: var(--_checkbox-bg);
+    color: var(--_checkbox-fg);
   }
   @media not (prefers-reduced-motion) {
-    ._checkbox_u8epf_480 {
+    ._checkbox_siwfv_680 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_u8epf_428[data-selected] ._checkbox_u8epf_480 {
-    --box-border: var(--box-checked-bg);
-    --box-bg: var(--box-checked-bg);
+  ._option_siwfv_623[data-selected] ._checkbox_siwfv_680 {
+    --_checkbox-border: var(
+    	--checkbox-checked-border,
+    	var(--_checkbox-checked-bg)
+    );
+    --_checkbox-bg: var(--_checkbox-checked-bg);
   }
-  ._checkboxIndicator_u8epf_505 {
+  ._checkboxIndicator_siwfv_720 {
     display: grid;
     place-items: center;
   }
-  ._checkboxIndicator_u8epf_505 svg {
-    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
-    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  ._checkboxIndicator_siwfv_720 svg {
+    inline-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
+    block-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
   }
-  ._checkboxIndicator_u8epf_505 {
+  ._checkboxIndicator_siwfv_720 {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._checkboxIndicator_u8epf_505 {
+    ._checkboxIndicator_siwfv_720 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._checkboxIndicator_u8epf_505 {
+  ._checkboxIndicator_siwfv_720 {
     font-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
   }
-  ._checkboxIndicator_u8epf_505[data-selected] {
+  ._checkboxIndicator_siwfv_720[data-selected] {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._checkboxIndicator_u8epf_505[data-selected] {
+    ._checkboxIndicator_siwfv_720[data-selected] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._optionText_u8epf_534 {
+  ._optionText_siwfv_749 {
     flex: 1;
     min-inline-size: 0;
   }