@astryx-vue/core 0.2.2 → 0.2.3

package/styles/radio-indicator.css

@@ -0,0 +1,90 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-radio-indicator {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-style: solid;
+    border-width: var(--astryx-border-width, 1px);
+    border-color: var(--astryx-input-status-color, var(--astryx-color-border-emphasized, #d4d4d4));
+    border-radius: var(--astryx-radius-full, 9999px);
+    color: var(--astryx-color-accent, #262626);
+    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-radio-indicator[data-size='sm'] {
+    width: 20px;
+    height: 20px;
+  }
+
+  .astryx-radio-indicator[data-state='checked'] {
+    color: var(--astryx-color-on-accent, #fff);
+    border-color: var(--astryx-input-status-color, var(--astryx-color-accent, #262626));
+    background: var(--astryx-input-status-color, var(--astryx-color-accent, #262626));
+  }
+
+  .astryx-radio-indicator[data-disabled='true'] {
+    opacity: 0.5;
+    border-color: var(--astryx-color-border, #d4d4d4);
+  }
+
+  .astryx-radio-indicator[data-disabled='true'][data-state='unchecked'] {
+    background: var(--astryx-color-background-muted, #f5f5f5);
+  }
+
+  .astryx-radio-indicator-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background: currentcolor;
+  }
+
+  .astryx-radio-indicator[data-size='sm'] > .astryx-radio-indicator-dot {
+    width: 8px;
+    height: 8px;
+  }
+
+  @media (hover: hover) {
+    .astryx-indicator-scope:hover .astryx-radio-indicator[data-state='unchecked']:not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-color-border-emphasized, #d4d4d4)), var(--astryx-color-tint-hover, black) 20%);
+      background-color: color-mix(in srgb, var(--astryx-color-background-surface, #fff), var(--astryx-color-tint-hover, black) 5%);
+    }
+
+    .astryx-indicator-scope:hover .astryx-radio-indicator[data-state='checked']:not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+      background-color: color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-radio-indicator { transition: none; }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-radio-indicator {
+      border-color: ButtonText;
+      background: Canvas;
+      color: CanvasText;
+      opacity: 1;
+    }
+
+    .astryx-radio-indicator[data-state='checked'] {
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    .astryx-radio-indicator-dot {
+      forced-color-adjust: none;
+      background: HighlightText;
+    }
+  }
+}

package/styles/radio.css

@@ -36,35 +36,22 @@
     white-space: nowrap;
   }
 
-  .astryx-radio-indicator {
-    box-sizing: border-box;
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
+  /*
+   * A radio with no size keeps the 18px control. sm and md are 20px and 24px,
+   * and those sizes live on the indicator itself.
+   */
+  .astryx-radio:not([data-size]) > .astryx-radio-indicator {
     width: var(--astryx-radio-size, 18px);
     height: var(--astryx-radio-size, 18px);
-    border: 1px solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
-    border-radius: var(--astryx-radio-radius, 999px);
-    background: var(--astryx-input-background, #fff);
-    transition: border-color 130ms cubic-bezier(0.24, 1, 0.4, 1), background-color 130ms cubic-bezier(0.24, 1, 0.4, 1);
-  }
-
-  .astryx-radio-native:checked + .astryx-radio-indicator {
-    border-color: var(--astryx-input-status-color, var(--astryx-input-focus, #262626));
-    background: var(--astryx-input-status-color, var(--astryx-input-focus, #262626));
   }
 
-  .astryx-radio-native:checked + .astryx-radio-indicator::after {
+  .astryx-radio:not([data-size]) > .astryx-radio-indicator > .astryx-radio-indicator-dot {
     width: 8px;
     height: 8px;
-    border-radius: 999px;
-    background: var(--astryx-input-background, #fff);
-    content: '';
   }
 
   .astryx-radio-native:focus-visible + .astryx-radio-indicator {
-    outline: 2px solid var(--astryx-input-focus, #262626);
+    outline: 2px solid var(--astryx-focus-outline-color, var(--astryx-input-focus, #262626));
     outline-offset: 2px;
   }
 
@@ -87,19 +74,6 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
   }
 
-  .astryx-radio[data-size='sm'] {
-    --astryx-radio-size: 20px;
-  }
-
-  .astryx-radio[data-size='md'] {
-    --astryx-radio-size: 24px;
-  }
-
-  .astryx-radio[data-size='md'] .astryx-radio-native:checked + .astryx-radio-indicator::after {
-    width: 10px;
-    height: 10px;
-  }
-
   .astryx-radio-group[data-orientation='horizontal'] .astryx-radio-group-list {
     flex-direction: row;
     flex-wrap: wrap;
@@ -120,15 +94,8 @@
   }
 
   @media (forced-colors: active) {
-    .astryx-radio-indicator {
-      border-color: ButtonText;
-      background: Canvas;
-    }
-    .astryx-radio-native:checked + .astryx-radio-indicator {
-      background: Highlight;
-    }
-    .astryx-radio-native:checked + .astryx-radio-indicator::after {
-      background: Canvas;
+    .astryx-radio-native:focus-visible + .astryx-radio-indicator {
+      outline-color: Highlight;
     }
   }
 }

package/styles/selector.css

@@ -98,6 +98,11 @@
     box-shadow: none;
   }
 
+  .astryx-selector-field.is-readonly,
+  .astryx-selector-field.is-readonly .astryx-selector-trigger {
+    cursor: default;
+  }
+
   .astryx-selector-field.is-ghost {
     border-color: transparent;
     background: transparent;
@@ -121,6 +126,11 @@
     min-height: var(--astryx-input-height-md, 32px);
   }
 
+  .astryx-input-group .astryx-selector:has(.astryx-selector-value.is-grouped) .astryx-selector-field {
+    height: 100%;
+    min-height: 0;
+  }
+
   .astryx-selector-field.is-disabled .astryx-selector-trigger {
     cursor: default;
   }
@@ -138,7 +148,10 @@
   }
 
   .astryx-selector-value {
+    display: flex;
     flex: 1;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -146,6 +159,17 @@
     text-align: start;
   }
 
+  .astryx-selector-value-icon {
+    flex: none;
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-selector-value-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .astryx-selector-value.is-placeholder {
     color: var(--astryx-color-text-secondary, #525252);
   }
@@ -179,10 +203,15 @@
     cursor: pointer;
   }
 
-  .astryx-selector-clear:hover {
+  .astryx-selector-clear:hover,
+  .astryx-selector-search-clear:hover {
     color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
   }
 
+  .astryx-selector-spinner {
+    flex: none;
+  }
+
   /*
    * Astryx paints the menu on the popover surface. The list itself is
    * transparent; this element is that surface.
@@ -241,25 +270,46 @@
   }
 
   .astryx-selector-search {
-    padding: var(--astryx-spacing-1, 4px);
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    margin: var(--astryx-spacing-1, 4px);
+    padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-selector-search:focus-within {
+    box-shadow: inset 0 0 0 var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-color, var(--astryx-color-accent));
+  }
+
+  .astryx-selector-search-icon,
+  .astryx-selector-search-clear {
+    flex: none;
+  }
+
+  .astryx-selector-search-clear {
+    display: flex;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
   }
 
   .astryx-selector-search-input {
     box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
     width: 100%;
-    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
-    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border-emphasized, #d4d4d4);
-    border-radius: var(--astryx-radius-inner, 0.375rem);
+    padding: 0;
+    border: 0;
     background: transparent;
-    color: inherit;
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
     font: inherit;
     outline: none;
   }
 
-  .astryx-selector-search-input:focus {
-    border-color: var(--astryx-input-focus, #262626);
-  }
-
   .astryx-selector-options {
     display: flex;
     flex-direction: column;
@@ -269,8 +319,10 @@
   .astryx-selector-option {
     box-sizing: border-box;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--astryx-spacing-2, 8px);
     width: 100%;
     padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px);
     border: 0;
@@ -309,10 +361,54 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
   }
 
+  .astryx-selector-option-body {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-selector-option-copy {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+  }
+
+  /*
+   * The column stays mounted so a radio replacement can draw its empty circle.
+   * When the graphic draws nothing, :empty drops the column so an unchosen
+   * check does not reserve a gap.
+   */
+  .astryx-selector-option-mark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    min-width: 1rem;
+    color: var(--astryx-color-icon-primary, light-dark(#1b1b1b, #fafafa));
+  }
+
+  .astryx-selector-option-mark:empty {
+    display: none;
+  }
+
   .astryx-selector-option-icon {
+    flex: none;
+    align-self: center;
     width: 1rem;
     height: 1rem;
-    margin-bottom: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-selector-value.is-grouped {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   .astryx-selector-option-label {
@@ -350,6 +446,8 @@
 .astryx-selector-search-input:focus,
 .astryx-selector-search-input:focus-visible,
 .astryx-selector-clear:focus,
-.astryx-selector-clear:focus-visible {
+.astryx-selector-clear:focus-visible,
+.astryx-selector-search-clear:focus,
+.astryx-selector-search-clear:focus-visible {
   outline: none;
 }

package/styles.css

@@ -16,6 +16,7 @@
 @import './styles/carousel.css';
 @import './styles/center.css';
 @import './styles/chat.css';
+@import './styles/check-indicator.css';
 @import './styles/checkbox-indicator.css';
 @import './styles/checkbox-input.css';
 @import './styles/checkbox-list.css';
@@ -61,6 +62,7 @@
 @import './styles/power-search.css';
 @import './styles/progress-bar.css';
 @import './styles/radio.css';
+@import './styles/radio-indicator.css';
 @import './styles/resize-handle.css';
 @import './styles/scrollable-area.css';
 @import './styles/section.css';