@astryx-vue/core 0.2.2 → 0.2.3

package/styles/calendar.css

@@ -79,6 +79,7 @@
     color: var(--astryx-color-text-secondary, #525252);
     font-size: var(--astryx-text-supporting-size, 0.75rem);
     font-weight: 400;
+    text-align: center;
   }
 
   .astryx-calendar-grid {
@@ -114,15 +115,49 @@
     box-shadow: inset 0 0 0 1px var(--astryx-color-border-emphasized, #d4d4d4);
   }
 
-  .astryx-calendar[data-months='2'] {
+  .astryx-calendar-months {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--astryx-spacing-4, 16px);
   }
 
-  .astryx-calendar[data-months='2'] .astryx-calendar-header {
+  .astryx-calendar-grid[data-week-numbers] .astryx-calendar-weekdays,
+  .astryx-calendar-grid[data-week-numbers] .astryx-calendar-row {
+    grid-template-columns: var(--astryx-spacing-6, 24px) repeat(7, var(--astryx-input-height-md, 32px));
+  }
+
+  .astryx-calendar-week-number {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+  }
+
+  .astryx-calendar-gridcell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .astryx-calendar-cell.is-in-range.is-round-start {
+    border-start-start-radius: var(--astryx-radius-full, 9999px);
+    border-end-start-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-calendar-cell.is-in-range.is-round-end {
+    border-start-end-radius: var(--astryx-radius-full, 9999px);
+    border-end-end-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-calendar-cell:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentColor);
+    outline-offset: 1px;
+  }
+
+  .astryx-calendar-nav-button:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentColor);
+    outline-offset: 1px;
   }
 
   .astryx-calendar-cell.is-in-range {

package/styles/check-indicator.css

@@ -0,0 +1,17 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-check-indicator {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    color: var(--astryx-icon-accent-foreground, var(--astryx-color-accent, #262626));
+  }
+
+  .astryx-check-indicator[data-disabled='true'] {
+    color: var(--astryx-icon-disabled-foreground, var(--astryx-color-icon-disabled, #a3a3a3));
+  }
+}

package/styles/checkbox-indicator.css

@@ -9,11 +9,15 @@
     justify-content: center;
     width: 24px;
     height: 24px;
-    border: 1px solid var(--astryx-checkbox-border, #d4d4d4);
-    border-radius: var(--astryx-radius-inner, 6px);
-    color: var(--astryx-checkbox-accent, #262626);
-    background: var(--astryx-checkbox-background, #fff);
-    transition: background-color 130ms ease-out, border-color 130ms ease-out;
+    border-style: solid;
+    border-width: var(--astryx-border-width, 1px);
+    border-color: var(--astryx-checkbox-border, var(--astryx-color-border-emphasized, #d4d4d4));
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    color: var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626));
+    background: var(--astryx-checkbox-background, var(--astryx-color-background-surface, #fff));
+    transition-property: background-color, border-color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
   .astryx-checkbox-indicator[data-size='sm'] {
@@ -22,17 +26,18 @@
   }
 
   .astryx-checkbox-indicator:not([data-state='unchecked']) {
-    color: var(--astryx-checkbox-on-accent, #fff);
-    background: var(--astryx-checkbox-accent, #262626);
-    border-color: var(--astryx-checkbox-accent, #262626);
+    color: var(--astryx-checkbox-on-accent, var(--astryx-color-on-accent, #fff));
+    background: var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626));
+    border-color: var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626));
   }
 
   .astryx-checkbox-indicator[data-disabled='true'] {
     opacity: 0.5;
+    border-color: var(--astryx-color-border, var(--astryx-checkbox-border, #d4d4d4));
   }
 
   .astryx-checkbox-indicator[data-disabled='true'][data-state='unchecked'] {
-    background: var(--astryx-checkbox-disabled-background, #f5f5f5);
+    background: var(--astryx-checkbox-disabled-background, var(--astryx-color-background-muted, #f5f5f5));
   }
 
   .astryx-checkbox-indicator-check {
@@ -45,7 +50,7 @@
     display: none;
     width: 12px;
     height: 2px;
-    border-radius: 9999px;
+    border-radius: var(--astryx-radius-full, 9999px);
     background: currentcolor;
   }
 
@@ -63,6 +68,18 @@
     display: block;
   }
 
+  @media (hover: hover) {
+    .astryx-indicator-scope:hover .astryx-checkbox-indicator[data-state='unchecked']:not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-checkbox-border, var(--astryx-color-border-emphasized, #d4d4d4)), var(--astryx-color-tint-hover, black) 20%);
+      background-color: color-mix(in srgb, var(--astryx-checkbox-background, var(--astryx-color-background-surface, #fff)), var(--astryx-color-tint-hover, black) 5%);
+    }
+
+    .astryx-indicator-scope:hover .astryx-checkbox-indicator:not([data-state='unchecked']):not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+      background-color: color-mix(in srgb, var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-checkbox-indicator { transition: none; }
   }
@@ -74,10 +91,12 @@
       border-color: CanvasText;
       background: Canvas;
     }
+
     .astryx-checkbox-indicator-dash {
       forced-color-adjust: none;
       background: CanvasText;
     }
+
     .astryx-checkbox-indicator[data-disabled='true'] {
       color: GrayText;
       border-color: GrayText;

package/styles/checkbox-input.css

@@ -45,17 +45,6 @@
   .astryx-checkbox-input[data-blocked='true'] .astryx-checkbox-native,
   .astryx-checkbox-input[data-blocked='true'] .astryx-field-label { cursor: default; }
 
-  @media (hover: hover) {
-    .astryx-checkbox-input:not([data-blocked='true']) .astryx-checkbox-row:hover .astryx-checkbox-indicator {
-      background: color-mix(in srgb, var(--astryx-checkbox-background, #fff), var(--astryx-checkbox-accent, #262626) 5%);
-      border-color: color-mix(in srgb, var(--astryx-checkbox-border, #d4d4d4), var(--astryx-checkbox-accent, #262626) 20%);
-    }
-    .astryx-checkbox-input:not([data-blocked='true']) .astryx-checkbox-row:hover .astryx-checkbox-indicator:not([data-state='unchecked']) {
-      background: color-mix(in srgb, var(--astryx-checkbox-accent, #262626), var(--astryx-checkbox-on-accent, #fff) 15%);
-      border-color: transparent;
-    }
-  }
-
   .astryx-checkbox-spinner {
     box-sizing: border-box;
     width: 12px;

package/styles/date-input.css

@@ -118,6 +118,54 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
+  .astryx-date-input-native {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .astryx-date-input-native .astryx-date-input-field {
+    color: transparent;
+    caret-color: transparent;
+  }
+
+  .astryx-date-input-native .astryx-date-input-field::-webkit-calendar-picker-indicator {
+    opacity: 0;
+  }
+
+  .astryx-date-input-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .astryx-date-input-overlay[data-placeholder] {
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-date-input-alert {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .astryx-date-input-spinner {
+    flex: none;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-date-input-wrapper {
       transition: none;

package/styles/dropdown-menu.css

@@ -194,6 +194,165 @@
     margin-block: var(--astryx-spacing-1, 4px);
   }
 
+  /*
+   * Header and footer sit beside the menu, in the same panel. The frame keeps
+   * the height cap; the menu between them scrolls.
+   */
+  .astryx-dropdown-menu-popover {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: var(--astryx-dropdown-menu-z-index, 1000);
+    display: flex;
+    flex-direction: column;
+    --_dropdown-menu-radius: var(--astryx-dropdown-menu-radius, var(--astryx-radius-container, 0.75rem));
+    --_dropdown-menu-padding: var(--astryx-dropdown-menu-padding, var(--astryx-spacing-1, 4px));
+    max-block-size: var(--_dropdown-menu-max-block, min(300px, calc(100dvh - 16px)));
+    overflow: hidden;
+    border-radius: var(--_dropdown-menu-radius);
+    background: var(--astryx-dropdown-menu-background, #fff);
+    box-shadow: var(
+      --astryx-dropdown-menu-shadow,
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))
+    );
+    color: var(--astryx-dropdown-menu-foreground, var(--astryx-color-text-primary, light-dark(#171717, #fafafa)));
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-dropdown-menu.is-in-frame {
+    position: static;
+    z-index: auto;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    max-block-size: none;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .astryx-dropdown-menu[data-region-focus='true'] {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: calc(-1 * var(--astryx-focus-outline-offset, 3px));
+  }
+
+  .astryx-dropdown-menu-region {
+    flex: none;
+    padding: var(--astryx-spacing-1, 4px);
+  }
+
+  /* Wrappers add no box, so the menu's own gap still runs between rows. */
+  .astryx-dropdown-menu-tree {
+    display: contents;
+  }
+
+  .astryx-dropdown-menu-tree[hidden] {
+    display: none;
+  }
+
+  .astryx-dropdown-menu-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+  }
+
+  .astryx-dropdown-submenu {
+    min-width: min(160px, calc(100vw - 16px));
+  }
+
+  .astryx-dropdown-menu-drill {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+    outline: none;
+  }
+
+  .astryx-dropdown-menu-drill[hidden] {
+    display: none;
+  }
+
+  /*
+   * The selection mark is decorative. On a coarse pointer it moves to the
+   * inline end, where a touch toggle is usually drawn.
+   */
+  .astryx-dropdown-menu-mark {
+    display: inline-flex;
+    flex: none;
+    pointer-events: none;
+  }
+
+  .astryx-dropdown-menu-radio {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--astryx-input-border, #d4d4d4);
+    border-radius: var(--astryx-radio-radius, 999px);
+    background: var(--astryx-input-background, #fff);
+    transition:
+      border-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-dropdown-menu-radio[data-size='sm'] {
+    width: 20px;
+    height: 20px;
+  }
+
+  .astryx-dropdown-menu-radio[data-checked='checked'] {
+    border-color: var(--astryx-input-focus, #262626);
+    background: var(--astryx-input-focus, #262626);
+  }
+
+  .astryx-dropdown-menu-radio-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  .astryx-dropdown-menu-radio[data-size='sm'] .astryx-dropdown-menu-radio-dot {
+    width: 6px;
+    height: 6px;
+  }
+
+  .astryx-dropdown-menu-radio[data-checked='checked'] .astryx-dropdown-menu-radio-dot {
+    background: var(--astryx-input-background, #fff);
+  }
+
+  .astryx-dropdown-menu-radio[data-disabled='true'] {
+    opacity: 0.5;
+  }
+
+  @media (pointer: coarse) {
+    .astryx-dropdown-menu-mark {
+      order: 1;
+      margin-inline-start: auto;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-dropdown-menu-radio {
+      border-color: ButtonText;
+      background: Canvas;
+    }
+
+    .astryx-dropdown-menu-radio[data-checked='checked'] {
+      background: Highlight;
+    }
+
+    .astryx-dropdown-menu-radio[data-checked='checked'] .astryx-dropdown-menu-radio-dot {
+      background: Canvas;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-dropdown-menu-enter-active,
     .astryx-dropdown-menu-leave-active {
@@ -207,5 +366,9 @@
       opacity: 1;
       transform: none;
     }
+
+    .astryx-dropdown-menu-radio {
+      transition: none;
+    }
   }
 }

package/styles/field.css

@@ -131,6 +131,25 @@
     border-radius: var(--astryx-radius-element, 0.625rem);
   }
 
+  /*
+   * Tooltip keeps the message node for the live region. The attached box
+   * rule above would put that node back in flow and lift a ghost toolbar
+   * control off the row, so the hidden treatment has to win.
+   */
+  .astryx-field-status[data-hidden='true'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    background: transparent;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
   :is(.astryx-field-status, .astryx-text-input)[data-type='error'],
   .astryx-text-input[data-status='error'] {
     --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
@@ -185,6 +204,35 @@
     outline-offset: 1px;
   }
 
+  button.astryx-field-status-glyph {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+  }
+
+  .astryx-field-status-glyph[data-status='error'] {
+    color: var(--astryx-icon-error-foreground, light-dark(#76000c, #ffc4be));
+  }
+
+  .astryx-field-status-glyph[data-status='warning'] {
+    color: var(--astryx-icon-warning-foreground, light-dark(#4b3900, #f8e2a0));
+  }
+
+  .astryx-field-status-glyph[data-status='success'] {
+    color: var(--astryx-icon-success-foreground, light-dark(#00490b, #b7ebc2));
+  }
+
+  .astryx-field-status-glyph:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: 1px;
+  }
+
   @media (pointer: coarse) {
     .astryx-field-info-tip::after,
     .astryx-input-clear-button::after {

package/styles/icon.css

@@ -179,7 +179,7 @@
   }
   /* check */
   .astryx-icon--check {
-    --astryx-icon-artwork: var(--astryx-icon-check, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7' /%3E%3C/svg%3E"));
+    --astryx-icon-artwork: var(--astryx-icon-check, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E"));
   }
   /* moreHorizontal */
   .astryx-icon--more-horizontal {
@@ -235,11 +235,59 @@
   }
   /* warning */
   .astryx-icon--warning {
-    --astryx-icon-artwork: var(--astryx-icon-warning, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"));
+    --astryx-icon-artwork: var(--astryx-icon-warning, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"));
   }
   /* error */
   .astryx-icon--error {
-    --astryx-icon-artwork: var(--astryx-icon-error, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"));
+    --astryx-icon-artwork: var(--astryx-icon-error, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"));
+  }
+  /* success */
+  .astryx-icon--success {
+    --astryx-icon-artwork: var(--astryx-icon-success, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"));
+  }
+  /* chevronsLeft */
+  .astryx-icon--chevrons-left {
+    --astryx-icon-artwork: var(--astryx-icon-chevrons-left, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M18 6l-6 6 6 6M11 6l-6 6 6 6%27/%3E%3C/svg%3E"));
+  }
+  /* chevronsRight */
+  .astryx-icon--chevrons-right {
+    --astryx-icon-artwork: var(--astryx-icon-chevrons-right, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 6l6 6-6 6M13 6l6 6-6 6%27/%3E%3C/svg%3E"));
+  }
+  /* success */
+  .astryx-icon--success {
+    --astryx-icon-artwork: var(--astryx-icon-success, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 3a9 9 0 100 18 9 9 0 000-18zm3.53 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 3.72-3.72a.75.75 0 011.06 0z%27/%3E%3C/svg%3E"));
+  }
+  /* info */
+  .astryx-icon--info {
+    --astryx-icon-artwork: var(--astryx-icon-info, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 3a9 9 0 100 18 9 9 0 000-18zm0 4a1 1 0 100 2 1 1 0 000-2zm-.75 3.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5z%27/%3E%3C/svg%3E"));
+  }
+  /* externalLink */
+  .astryx-icon--external-link {
+    --astryx-icon-artwork: var(--astryx-icon-external-link, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14 5h5v5%27/%3E%3Cpath d=%27M19 5l-9 9%27/%3E%3Cpath d=%27M17 13.5V18a1 1 0 01-1 1H6a1 1 0 01-1-1V8a1 1 0 011-1h4.5%27/%3E%3C/svg%3E"));
+  }
+  /* menu */
+  .astryx-icon--menu {
+    --astryx-icon-artwork: var(--astryx-icon-menu, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 7h16M4 12h16M4 17h16%27/%3E%3C/svg%3E"));
+  }
+  /* arrowsUpDown */
+  .astryx-icon--arrows-up-down {
+    --astryx-icon-artwork: var(--astryx-icon-arrows-up-down, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 7l4-4 4 4%27/%3E%3Cpath d=%27M12 3v18%27/%3E%3Cpath d=%27M8 17l4 4 4-4%27/%3E%3C/svg%3E"));
+  }
+  /* eyeSlash */
+  .astryx-icon--eye-slash {
+    --astryx-icon-artwork: var(--astryx-icon-eye-slash, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 3l18 18%27/%3E%3Cpath d=%27M10.5 10.7A2 2 0 0013.3 13.5%27/%3E%3Cpath d=%27M9.9 5.2A10.8 10.8 0 0112 5c5 0 8.5 3.2 10 7-1 2.4-2.8 4.3-5 5.6%27/%3E%3Cpath d=%27M6.1 6.7C4.2 8 2.8 9.8 2 12c1.5 3.8 5 7 10 7 1.4 0 2.7-.3 3.9-.8%27/%3E%3C/svg%3E"));
+  }
+  /* viewColumns */
+  .astryx-icon--view-columns {
+    --astryx-icon-artwork: var(--astryx-icon-view-columns, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%274.5%27 width=%2717%27 height=%2715%27 rx=%271.5%27/%3E%3Cpath d=%27M9 4.5v15M15 4.5v15%27/%3E%3C/svg%3E"));
+  }
+  /* checkDouble */
+  .astryx-icon--check-double {
+    --astryx-icon-artwork: var(--astryx-icon-check-double, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 13l4 4L14 7%27/%3E%3Cpath d=%27M9 13l4 4L21 7%27/%3E%3C/svg%3E"));
+  }
+  /* wrench */
+  .astryx-icon--wrench {
+    --astryx-icon-artwork: var(--astryx-icon-wrench, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14.7 6.3a4.5 4.5 0 01-6.2 6.2L4 17l3 3 4.5-4.5a4.5 4.5 0 016.2-6.2l-2.2 2.2-2-2 2.2-2.2z%27/%3E%3C/svg%3E"));
   }
   /* ARTWORK: generated end */
 }

package/styles/input-group.css

@@ -33,12 +33,31 @@
     cursor: default;
   }
 
-  .astryx-input-group-addon {
+  .astryx-input-group.status-error {
+    --astryx-input-focus: var(--astryx-input-error, #e33f4a);
+    border-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-input-group.status-warning {
+    --astryx-input-focus: var(--astryx-input-warning, #a67a00);
+    border-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-input-group.status-success {
+    --astryx-input-focus: var(--astryx-input-success, #198100);
+    border-color: var(--astryx-input-success, #198100);
+  }
+
+  .astryx-input-group-shell {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-input-group-addon,
+  .astryx-input-group-text {
     display: flex;
     flex: none;
     align-items: center;
-    padding-inline: var(--astryx-spacing-2, 8px);
-    background: color-mix(in srgb, var(--astryx-color-text-primary, #171717) 5%, transparent);
     color: var(--astryx-color-text-secondary, #525252);
     font-family: var(--astryx-font-family-body, Figtree, sans-serif);
     font-size: var(--astryx-text-body-size, 0.875rem);
@@ -46,6 +65,16 @@
     white-space: nowrap;
   }
 
+  .astryx-input-group-addon {
+    align-self: stretch;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    background: var(--astryx-color-background-muted, #f1f1f1);
+  }
+
+  .astryx-input-group-addon .astryx-input-group-text {
+    background: transparent;
+  }
+
   .astryx-input-group-addon.before {
     border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border-emphasized, #d4d4d4);
   }

package/styles/multi-selector.css

@@ -96,6 +96,11 @@
     box-shadow: none;
   }
 
+  .astryx-multi-selector-control.is-readonly,
+  .astryx-multi-selector-control.is-readonly .astryx-multi-selector-trigger {
+    cursor: default;
+  }
+
   .astryx-multi-selector-control.status-error {
     --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
   }
@@ -222,7 +227,26 @@
   }
 
   .astryx-multi-selector-search {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
     padding: var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-multi-selector-search-icon,
+  .astryx-multi-selector-search-clear,
+  .astryx-multi-selector-spinner {
+    flex: none;
+  }
+
+  .astryx-multi-selector-search-clear {
+    display: inline-flex;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
   }
 
   .astryx-multi-selector-listbox.is-sheet {
@@ -243,6 +267,8 @@
 
   .astryx-multi-selector-search-input {
     box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
     width: 100%;
     padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px);
     border: 0;