@igne-agency/react-web-ui 0.3.1 → 0.4.0

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

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._control_ksvpl_3 {
+  ._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);
@@ -14,33 +14,33 @@
     color: var(--field-fg);
     font: var(--sys-font-body-medium);
   }
-  ._control_ksvpl_3 {
+  ._control_u8epf_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._control_ksvpl_3[data-focus-visible] {
+  ._control_u8epf_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._control_ksvpl_3 {
+    ._control_u8epf_3 {
       transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._control_ksvpl_3:hover:not([data-disabled], [data-readonly]), ._control_ksvpl_3[data-focused], ._control_ksvpl_3[data-popup-open] {
+  ._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_ksvpl_3[data-readonly] {
+  ._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_ksvpl_3[data-pending] {
+  ._control_u8epf_3[data-pending] {
     cursor: progress;
     caret-color: var(--sys-color-text-muted);
   }
-  ._control_ksvpl_3[data-invalid] {
+  ._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);
@@ -48,7 +48,7 @@
     background-color: var(--sys-color-error-bg);
     color: var(--field-fg);
   }
-  ._control_ksvpl_3[data-disabled] {
+  ._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);
@@ -56,21 +56,21 @@
     cursor: not-allowed;
     background: var(--sys-color-disabled-bg);
   }
-  ._control_ksvpl_3::-webkit-search-cancel-button {
+  ._control_u8epf_3::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._control_ksvpl_3::-webkit-search-decoration {
+  ._control_u8epf_3::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._control_ksvpl_3 {
+  ._control_u8epf_3 {
     display: inline-flex;
   }
-  ._control_ksvpl_3::placeholder {
+  ._control_u8epf_3::placeholder {
     color: var(--field-placeholder-fg);
   }
-  ._control_ksvpl_3 {
+  ._control_u8epf_3 {
     position: relative;
     gap: var(--combobox-gap, var(--sys-unit-6));
     justify-content: space-between;
@@ -78,10 +78,10 @@
     min-inline-size: 0;
     cursor: pointer;
   }
-  ._control_ksvpl_3[data-readonly] {
+  ._control_u8epf_3[data-readonly] {
     cursor: default;
   }
-  ._content_ksvpl_84 {
+  ._content_u8epf_84 {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
@@ -93,10 +93,10 @@
     hyphens: auto;
     line-height: normal;
   }
-  ._control_ksvpl_3[data-placeholder] ._content_ksvpl_84 {
+  ._control_u8epf_3[data-placeholder] ._content_u8epf_84 {
     color: var(--field-placeholder-fg);
   }
-  ._trigger_ksvpl_99 {
+  ._trigger_u8epf_99 {
     display: inline-flex;
     flex: 1;
     align-items: center;
@@ -104,10 +104,10 @@
     min-inline-size: 0;
     text-align: start;
   }
-  ._content_ksvpl_84 + ._trigger_ksvpl_99 {
+  ._content_u8epf_84 + ._trigger_u8epf_99 {
     flex: none;
   }
-  ._spokenValue_ksvpl_110 {
+  ._spokenValue_u8epf_110 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -115,14 +115,14 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._icon_ksvpl_118 {
+  ._icon_u8epf_118 {
     display: inline-flex;
     color: var(--field-muted-fg);
   }
-  ._tags_ksvpl_122 {
+  ._tags_u8epf_122 {
     display: contents;
   }
-  ._tagList_ksvpl_125 {
+  ._tagList_u8epf_125 {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
@@ -130,90 +130,90 @@
     gap: var(--sys-unit-2);
     min-inline-size: 0;
   }
-  ._tag_ksvpl_122[data-variant=subtle] {
+  ._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_ksvpl_122[data-variant=solid] {
+  ._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_ksvpl_122[data-variant=outline] {
+  ._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_ksvpl_122[data-tone=info][data-variant=subtle] {
+  ._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_ksvpl_122[data-tone=info][data-variant=solid] {
+  ._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_ksvpl_122[data-tone=info][data-variant=outline] {
+  ._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(
     	--sys-color-info-border
     );
   }
-  ._tag_ksvpl_122[data-tone=success][data-variant=subtle] {
+  ._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_ksvpl_122[data-tone=success][data-variant=solid] {
+  ._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_ksvpl_122[data-tone=success][data-variant=outline] {
+  ._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(
     	--sys-color-success-border
     );
   }
-  ._tag_ksvpl_122[data-tone=warning][data-variant=subtle] {
+  ._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_ksvpl_122[data-tone=warning][data-variant=solid] {
+  ._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_ksvpl_122[data-tone=warning][data-variant=outline] {
+  ._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(
     	--sys-color-warning-border
     );
   }
-  ._tag_ksvpl_122[data-tone=error][data-variant=subtle] {
+  ._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_ksvpl_122[data-tone=error][data-variant=solid] {
+  ._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_ksvpl_122[data-tone=error][data-variant=outline] {
+  ._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(
     	--sys-color-error-border
     );
   }
-  ._tag_ksvpl_122 {
+  ._tag_u8epf_122 {
     display: inline-flex;
     align-items: center;
     gap: var(--sys-unit-3);
@@ -226,20 +226,20 @@
     color: var(--combobox-tag-fg);
     font: var(--sys-font-label-small);
   }
-  ._tag_ksvpl_122 {
+  ._tag_u8epf_122 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tag_ksvpl_122:focus-visible {
+  ._tag_u8epf_122:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tag_ksvpl_122[data-focus-visible] {
+  ._tag_u8epf_122[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tag_ksvpl_122 {
+  ._tag_u8epf_122 {
     max-inline-size: 100%;
   }
-  ._tagRemove_ksvpl_242 {
+  ._tagRemove_u8epf_242 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -255,25 +255,25 @@
     padding: 0;
     color: inherit;
   }
-  ._tagRemove_ksvpl_242 {
+  ._tagRemove_u8epf_242 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tagRemove_ksvpl_242:focus-visible {
+  ._tagRemove_u8epf_242:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._tagRemove_ksvpl_242 {
+    ._tagRemove_u8epf_242 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._tagRemove_ksvpl_242:hover {
+  ._tagRemove_u8epf_242:hover {
     background: color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent);
   }
-  ._tagRemove_ksvpl_242:active {
+  ._tagRemove_u8epf_242:active {
     background: color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent);
   }
-  ._positioner_ksvpl_276 {
+  ._positioner_u8epf_276 {
     --_popup-edge-padding: var(
     	--popup-edge-padding,
     	var(--sys-unit-16)
@@ -284,10 +284,10 @@
     inherits: false;
     initial-value: 0px;
   }
-  ._positioner_ksvpl_276 {
+  ._positioner_u8epf_276 {
     outline: none;
   }
-  ._popup_ksvpl_290 {
+  ._popup_u8epf_290 {
     box-sizing: border-box;
     border: none;
     border-radius: var(--sys-radius-md);
@@ -300,22 +300,22 @@
     box-shadow: var(--sys-elevation-1);
   }
   @media not (prefers-reduced-motion) {
-    ._popup_ksvpl_290 {
+    ._popup_u8epf_290 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._popup_ksvpl_290[data-starting-style], ._popup_ksvpl_290[data-ending-style] {
+  ._popup_u8epf_290[data-starting-style], ._popup_u8epf_290[data-ending-style] {
     opacity: 0;
     transform: scale(0.96);
   }
-  ._popup_ksvpl_290 {
+  ._popup_u8epf_290 {
     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_ksvpl_318 {
+  ._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);
@@ -329,33 +329,33 @@
     color: var(--field-fg);
     font: var(--sys-font-body-medium);
   }
-  ._search_ksvpl_318 {
+  ._search_u8epf_318 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._search_ksvpl_318[data-focus-visible] {
+  ._search_u8epf_318[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._search_ksvpl_318 {
+    ._search_u8epf_318 {
       transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._search_ksvpl_318:hover:not([data-disabled], [data-readonly]), ._search_ksvpl_318[data-focused], ._search_ksvpl_318[data-popup-open] {
+  ._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_ksvpl_318[data-readonly] {
+  ._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_ksvpl_318[data-pending] {
+  ._search_u8epf_318[data-pending] {
     cursor: progress;
     caret-color: var(--sys-color-text-muted);
   }
-  ._search_ksvpl_318[data-invalid] {
+  ._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);
@@ -363,7 +363,7 @@
     background-color: var(--sys-color-error-bg);
     color: var(--field-fg);
   }
-  ._search_ksvpl_318[data-disabled] {
+  ._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);
@@ -371,37 +371,37 @@
     cursor: not-allowed;
     background: var(--sys-color-disabled-bg);
   }
-  ._search_ksvpl_318::-webkit-search-cancel-button {
+  ._search_u8epf_318::-webkit-search-cancel-button {
     display: none;
     appearance: none;
   }
-  ._search_ksvpl_318::-webkit-search-decoration {
+  ._search_u8epf_318::-webkit-search-decoration {
     display: none;
     appearance: none;
   }
-  ._search_ksvpl_318 {
+  ._search_u8epf_318 {
     display: inline-flex;
   }
-  ._search_ksvpl_318::placeholder {
+  ._search_u8epf_318::placeholder {
     color: var(--field-placeholder-fg);
   }
-  ._search_ksvpl_318 {
+  ._search_u8epf_318 {
     flex-shrink: 0;
     margin-block-end: var(--sys-unit-4);
     inline-size: 100%;
     min-inline-size: 0;
   }
-  ._statusArea_ksvpl_394 {
+  ._statusArea_u8epf_394 {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     contain: inline-size;
   }
-  ._statusArea_ksvpl_394 > * + * {
+  ._statusArea_u8epf_394 > * + * {
     align-self: flex-start;
   }
-  ._status_ksvpl_394,
-  ._empty_ksvpl_404 {
+  ._status_u8epf_394,
+  ._empty_u8epf_404 {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -412,12 +412,12 @@
     color: var(--sys-color-text-muted);
     font: var(--sys-font-body-medium);
   }
-  ._status_ksvpl_394:empty,
-  ._empty_ksvpl_404:empty {
+  ._status_u8epf_394:empty,
+  ._empty_u8epf_404:empty {
     min-block-size: 0;
     padding: 0;
   }
-  ._list_ksvpl_420 {
+  ._list_u8epf_420 {
     min-block-size: 0;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -425,7 +425,7 @@
     scrollbar-width: thin;
     scrollbar-color: var(--sys-color-outline) transparent;
   }
-  ._option_ksvpl_428 {
+  ._option_u8epf_428 {
     display: flex;
     align-items: center;
     gap: var(--sys-unit-6);
@@ -437,11 +437,11 @@
     font: var(--sys-font-body-medium);
     user-select: none;
   }
-  ._option_ksvpl_428 {
+  ._option_u8epf_428 {
     position: relative;
     isolation: isolate;
   }
-  ._option_ksvpl_428::after {
+  ._option_u8epf_428::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -452,32 +452,32 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._option_ksvpl_428::after {
+    ._option_u8epf_428::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_ksvpl_428:hover:not(:disabled, [data-disabled])::after {
+  ._option_u8epf_428:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._option_ksvpl_428:active:not(:disabled, [data-disabled])::after {
+  ._option_u8epf_428:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._option_ksvpl_428 {
+  ._option_u8epf_428 {
     outline: none;
   }
-  ._option_ksvpl_428[data-highlighted] {
+  ._option_u8epf_428[data-highlighted] {
     background: var(--sys-color-primary-container);
     color: var(--sys-color-on-primary-container);
   }
-  ._option_ksvpl_428[data-disabled] {
+  ._option_u8epf_428[data-disabled] {
     color: var(--sys-color-disabled-fg);
   }
-  ._indicator_ksvpl_475 {
+  ._indicator_u8epf_475 {
     display: inline-flex;
     flex-shrink: 0;
     color: var(--combobox-indicator-fg, var(--sys-color-primary));
   }
-  ._checkbox_ksvpl_480 {
+  ._checkbox_u8epf_480 {
     --box-border: var(--sys-color-border);
     --box-bg: var(--sys-color-surface);
     --box-fg: var(--sys-color-on-primary);
@@ -494,41 +494,44 @@
     color: var(--box-fg);
   }
   @media not (prefers-reduced-motion) {
-    ._checkbox_ksvpl_480 {
+    ._checkbox_u8epf_480 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._option_ksvpl_428[data-selected] ._checkbox_ksvpl_480 {
+  ._option_u8epf_428[data-selected] ._checkbox_u8epf_480 {
     --box-border: var(--box-checked-bg);
     --box-bg: var(--box-checked-bg);
   }
-  ._checkboxIndicator_ksvpl_505 {
+  ._checkboxIndicator_u8epf_505 {
     display: grid;
     place-items: center;
   }
-  ._checkboxIndicator_ksvpl_505 svg {
+  ._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_ksvpl_505 {
+  ._checkboxIndicator_u8epf_505 {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._checkboxIndicator_ksvpl_505 {
+    ._checkboxIndicator_u8epf_505 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._checkboxIndicator_ksvpl_505[data-selected] {
+  ._checkboxIndicator_u8epf_505 {
+    font-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  }
+  ._checkboxIndicator_u8epf_505[data-selected] {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._checkboxIndicator_ksvpl_505[data-selected] {
+    ._checkboxIndicator_u8epf_505[data-selected] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }
-  ._optionText_ksvpl_531 {
+  ._optionText_u8epf_534 {
     flex: 1;
     min-inline-size: 0;
   }