@astryx-vue/core 0.2.2 → 0.2.4

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/side-nav.css

@@ -17,6 +17,22 @@
     width: var(--astryx-side-nav-collapsed-width, 48px);
   }
 
+  .astryx-side-nav-frame {
+    display: contents;
+  }
+
+  .astryx-side-nav-frame--resizable {
+    position: relative;
+    display: flex;
+    flex: none;
+    height: 100%;
+    overflow: clip;
+  }
+
+  .astryx-side-nav--resizing {
+    transition: none;
+  }
+
   .astryx-side-nav--topbar {
     display: flex;
     flex: 1 1 auto;
@@ -172,10 +188,29 @@
     border-radius: var(--astryx-radius-element, 0.625rem);
   }
 
-  .astryx-side-nav-heading--link:hover {
+  .astryx-side-nav-heading--link:hover,
+  .astryx-side-nav-heading--echo:hover {
     background: var(--astryx-color-overlay-hover);
   }
 
+  .astryx-side-nav-heading--echo {
+    width: 100%;
+    margin: 0 0 var(--astryx-spacing-1, 4px);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-side-nav-heading__end {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+  }
+
   .astryx-side-nav-heading__icon {
     display: inline-flex;
     flex: none;

package/styles/text.css

@@ -132,6 +132,18 @@
     text-decoration: line-through;
   }
 
+  .astryx-text--justify-start {
+    text-align: start;
+  }
+
+  .astryx-text--justify-center {
+    text-align: center;
+  }
+
+  .astryx-text--justify-end {
+    text-align: end;
+  }
+
   .astryx-text--tabular {
     font-variant-numeric: tabular-nums;
   }
@@ -152,6 +164,12 @@
     font-size: var(--astryx-text-xl-size, 1.25rem);
   }
 
+  .astryx-text--truncate-single,
+  .astryx-text--truncate-multi {
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .astryx-text--truncate-single {
     overflow: hidden;
     text-overflow: ellipsis;

package/styles/top-nav.css

@@ -34,24 +34,126 @@
   .astryx-top-nav--centered .astryx-top-nav__end { justify-content: flex-end; }
   .astryx-top-nav__items { flex-wrap: nowrap; overflow: hidden; }
 
-  .astryx-top-nav-heading__icon {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-  }
-
   .astryx-top-nav-heading {
     display: inline-flex;
     align-items: center;
     gap: var(--astryx-spacing-2, 8px);
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 32px;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-element, 0.625rem);
     color: var(--astryx-color-text-primary);
     font-size: var(--astryx-font-size-lg, 1.0625rem);
     font-weight: var(--astryx-font-weight-semibold, 600);
     line-height: 1.4118;
     text-decoration: none;
+  }
+
+  .astryx-top-nav-heading--link:hover,
+  .astryx-top-nav-heading--echo:hover {
+    background: var(--astryx-color-overlay-hover);
+  }
+
+  .astryx-top-nav-heading--echo {
+    width: 100%;
+    margin: 0 0 var(--astryx-spacing-1, 4px);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-top-nav-heading__icon,
+  .astryx-top-nav-heading__end {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .astryx-top-nav-heading__end {
+    margin-inline-start: auto;
+  }
+
+  .astryx-top-nav-heading__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .astryx-top-nav-heading__row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-top-nav-heading__title {
+    overflow: hidden;
+    font-size: var(--astryx-font-size-lg, 1.0625rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    line-height: 1.4118;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  .astryx-top-nav-heading__super,
+  .astryx-top-nav-heading__sub {
+    overflow: hidden;
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-regular, 400);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-top-nav-heading__link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .astryx-top-nav-heading__link:hover {
+    text-decoration: underline;
+  }
+
+  .astryx-top-nav-heading__chevron {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: var(--astryx-color-text-secondary, #525252);
+    cursor: pointer;
+  }
+
+  .astryx-top-nav-heading__chevron:hover {
+    background: var(--astryx-color-overlay-hover);
+  }
+
+  .astryx-top-nav-heading__chevron:focus-visible {
+    outline: var(--astryx-focus-outline-width) var(--astryx-focus-outline-style) var(--astryx-focus-outline-color);
+    outline-offset: var(--astryx-focus-outline-offset);
+  }
+
+  .astryx-top-nav-heading__chevron-icon--open {
+    transform: rotate(180deg);
+  }
+
+  .astryx-top-nav-heading__menu {
+    min-width: 200px;
+  }
+
   .astryx-top-nav-item:not(.astryx-top-nav-item--drawer) {
     width: auto;
     height: auto;
@@ -169,11 +271,44 @@
 
   .astryx-top-nav-mega-card {
     flex-direction: column;
+    gap: 0;
     height: 100%;
+    padding: 0;
+    overflow: hidden;
     background: var(--astryx-color-neutral);
     cursor: pointer;
   }
 
+  .astryx-top-nav-mega-card--static {
+    cursor: default;
+  }
+
+  .astryx-top-nav-mega-card__image {
+    display: block;
+    width: 100%;
+    height: 140px;
+    object-fit: cover;
+  }
+
+  .astryx-top-nav-mega-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-1, 4px);
+    padding: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-top-nav-mega-card__link {
+    color: var(--astryx-color-text-accent, #0074e2);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    text-decoration: none;
+  }
+
+  .astryx-top-nav-mega-card__link:hover {
+    text-decoration: underline;
+  }
+
   .astryx-top-nav-mega-item:hover,
   .astryx-top-nav-mega-item:focus-visible,
   .astryx-top-nav-mega-card:hover {
@@ -181,6 +316,10 @@
     outline: none;
   }
 
+  .astryx-top-nav-mega-card--static:hover {
+    background: var(--astryx-color-neutral);
+  }
+
   .astryx-top-nav-mega-item__icon {
     display: inline-flex;
     flex: none;

package/styles/typeahead.css

@@ -211,6 +211,30 @@
     opacity: 0.5;
   }
 
+  .astryx-typeahead--bare {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-typeahead-item {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-typeahead-item-icon {
+    display: inline-flex;
+    flex: none;
+  }
+
+  .astryx-typeahead-item-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+  }
+
   .astryx-typeahead-option-copy {
     display: flex;
     flex: 1;

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';
@@ -25,6 +26,7 @@
 @import './styles/collapsible.css';
 @import './styles/command-palette.css';
 @import './styles/complex-selector.css';
+@import './styles/container-reveal.css';
 @import './styles/context-menu.css';
 @import './styles/date-range-input.css';
 @import './styles/date-time-input.css';
@@ -41,6 +43,7 @@
 @import './styles/hover-card.css';
 @import './styles/icon.css';
 @import './styles/kbd.css';
+@import './styles/keyboard-hint.css';
 @import './styles/layout.css';
 @import './styles/lightbox.css';
 @import './styles/link.css';
@@ -61,6 +64,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';