@astryx-vue/core 0.1.3 → 0.2.1

package/styles/heading.css

@@ -3,7 +3,7 @@
 @layer astryx.components {
   .astryx-heading {
     margin: 0;
-    color: var(--astryx-heading-foreground, var(--astryx-color-text-primary, #171717));
+    color: var(--astryx-heading-foreground, var(--astryx-color-text-primary, light-dark(#171717, #fafafa)));
     font-family: var(--astryx-font-family-body, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
     line-height: var(--astryx-heading-leading, 1.25);
   }
@@ -21,8 +21,12 @@
     display: inline;
   }
 
+  .astryx-heading--color-primary {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
   .astryx-heading--color-secondary {
-    color: var(--astryx-color-text-secondary, #525252);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
   }
 
   .astryx-heading--color-accent {

package/styles/icon.css

@@ -7,8 +7,16 @@
     justify-content: center;
     flex-shrink: 0;
     box-sizing: border-box;
-    vertical-align: middle;
-    color: inherit;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    color: currentcolor;
+    /*
+     * A 1em box with vertical-align: middle sits on the descender, so the
+     * drawing looks low next to the letters. -0.125em is the Iconify offset
+     * that puts the box on the text baseline.
+     */
+    vertical-align: -0.125em;
   }
 
   /*
@@ -32,13 +40,35 @@
   }
 
   /*
-   * An icon passed as a component or written into the slot keeps the size its
-   * owner gives it; the box owns that size through width, height, and
-   * font-size.
+   * The wrapper keeps a box. display:contents would make the SVG's 100%
+   * resolve against the icon's parent, so a 1em icon would grow to the line.
    */
-  .astryx-icon > svg {
-    width: 1em;
-    height: 1em;
+  .astryx-icon__svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-icon > svg,
+  .astryx-icon__svg > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: currentcolor;
+  }
+
+  /*
+   * A class the caller supplies, such as an UnoCSS icon, paints this box.
+   * Those utilities are unlayered and set width/height to 100%, so they have
+   * to live on the inner element. On the box itself they would replace the
+   * size below and stretch the icon to its flex parent.
+   */
+  .astryx-icon__external {
+    display: block;
+    width: 100%;
+    height: 100%;
   }
 
   .astryx-icon[data-size='xsm'] {

package/styles/lightbox.css

@@ -0,0 +1,144 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-lightbox {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    max-width: none;
+    height: 100vh;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    background: transparent;
+    outline: none;
+  }
+
+  .astryx-lightbox::backdrop {
+    background-color: var(--astryx-color-overlay, light-dark(#00000080, #000000cc));
+    backdrop-filter: blur(2px);
+  }
+
+  .astryx-lightbox__container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-lightbox__media {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .astryx-lightbox__frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    max-height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    user-select: none;
+    cursor: default;
+  }
+
+  .astryx-lightbox__frame[data-zoomable]:not([data-zoomed]) {
+    cursor: zoom-in;
+  }
+
+  .astryx-lightbox__frame[data-zoomed] {
+    cursor: grab;
+  }
+
+  .astryx-lightbox__frame[data-dragging] {
+    cursor: grabbing;
+  }
+
+  .astryx-lightbox__frame:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-lightbox__image,
+  .astryx-lightbox__video {
+    display: block;
+    max-width: min(100vw, 100%);
+    max-height: calc(100vh - 7rem);
+    object-fit: contain;
+    outline: none;
+  }
+
+  .astryx-lightbox__image {
+    pointer-events: none;
+    transform-origin: center center;
+    transition: transform 200ms ease-out;
+  }
+
+  .astryx-lightbox__image[data-dragging] {
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-lightbox__image {
+      transition-duration: 0ms;
+    }
+  }
+
+  .astryx-lightbox__caption {
+    flex-shrink: 0;
+    max-width: 600px;
+    margin: 0;
+    padding-block: var(--astryx-spacing-2, 8px) 0;
+    padding-inline: var(--astryx-spacing-3, 12px);
+    color: var(--astryx-color-on-dark, #fff);
+    font-size: var(--astryx-text-large-size, 1.125rem);
+    line-height: var(--astryx-text-large-leading, 1.3333);
+    text-align: center;
+  }
+
+  .astryx-lightbox__close,
+  .astryx-lightbox__nav,
+  .astryx-lightbox__counter {
+    position: absolute;
+    z-index: 1;
+    color: var(--astryx-color-on-dark, #fff);
+    --astryx-button-ghost-foreground: var(--astryx-color-on-dark, #fff);
+  }
+
+  .astryx-lightbox__close {
+    top: var(--astryx-spacing-3, 12px);
+    inset-inline-end: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-lightbox__nav {
+    top: 50%;
+    translate: 0 -50%;
+  }
+
+  .astryx-lightbox__nav--prev {
+    inset-inline-start: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-lightbox__nav--next {
+    inset-inline-end: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-lightbox__counter {
+    top: var(--astryx-spacing-3, 12px);
+    inset-inline-start: var(--astryx-spacing-3, 12px);
+    margin: 0;
+    color: var(--astryx-color-on-dark, #fff);
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+}

package/styles/link.css

@@ -44,6 +44,11 @@
     color: inherit;
   }
 
+  .astryx-link.astryx-link--standalone {
+    font-size: var(--astryx-font-size-body, var(--text-body-size, 1rem));
+    line-height: var(--astryx-line-height-body, var(--text-body-leading, 1.5));
+  }
+
   .astryx-link__external {
     display: inline-block;
     font-size: 0.75em;

package/styles/media-theme.css

@@ -0,0 +1,51 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-media-theme {
+    display: contents;
+  }
+
+  /*
+   * Inverted surfaces do not rely on `color-scheme` alone. Text and heading
+   * colors are their own variables, and a `display: contents` wrapper does not
+   * always establish a color-scheme for its children. These declarations set
+   * the text tokens to the on-dark / on-light colors directly.
+   */
+  [data-astryx-media='dark'] {
+    color-scheme: dark;
+    color: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-text-primary: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-text-secondary: #a3a3a3;
+    --astryx-text-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-text-supporting-foreground: #a3a3a3;
+    --astryx-heading-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-icon-primary: var(--astryx-color-on-dark, #ffffff);
+    --astryx-icon-primary-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-accent: var(--astryx-color-on-dark, #ffffff);
+    --astryx-color-on-accent: var(--astryx-color-on-light, #171717);
+    --astryx-button-primary-background: var(--astryx-color-on-dark, #ffffff);
+    --astryx-button-primary-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-button-secondary-background: #ffffff1a;
+    --astryx-button-secondary-foreground: var(--astryx-color-on-dark, #ffffff);
+    --astryx-button-ghost-foreground: var(--astryx-color-on-dark, #ffffff);
+  }
+
+  [data-astryx-media='light'] {
+    color-scheme: light;
+    color: var(--astryx-color-on-light, #171717);
+    --astryx-color-text-primary: var(--astryx-color-on-light, #171717);
+    --astryx-color-text-secondary: #525252;
+    --astryx-text-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-text-supporting-foreground: #525252;
+    --astryx-heading-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-color-icon-primary: var(--astryx-color-on-light, #171717);
+    --astryx-icon-primary-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-color-accent: var(--astryx-color-on-light, #171717);
+    --astryx-color-on-accent: #ffffff;
+    --astryx-button-primary-background: var(--astryx-color-on-light, #171717);
+    --astryx-button-primary-foreground: #ffffff;
+    --astryx-button-secondary-background: #0000000f;
+    --astryx-button-secondary-foreground: var(--astryx-color-on-light, #171717);
+    --astryx-button-ghost-foreground: var(--astryx-color-on-light, #171717);
+  }
+}

package/styles/number-input.css

@@ -26,6 +26,28 @@
     height: var(--astryx-input-height-lg, 36px);
   }
 
+  .astryx-number-input[data-status='error'] {
+    border-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-number-input[data-status='warning'] {
+    border-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-number-input[data-status='success'] {
+    border-color: var(--astryx-input-success, #198100);
+  }
+
+  .astryx-number-input-units,
+  .astryx-number-input-clear {
+    display: inline-flex;
+    align-items: center;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary, #525252);
+    background: transparent;
+    border: 0;
+  }
+
   .astryx-number-input:focus-within {
     border-color: var(--astryx-input-focus, #262626);
     box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-focus, #262626) 15%, transparent);

package/styles/outline.css

@@ -0,0 +1,124 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-outline {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    gap: var(--astryx-spacing-0-5, 2px);
+    width: 100%;
+  }
+
+  .astryx-outline__list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .astryx-outline__item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .astryx-outline__link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px) var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-size: var(--astryx-text-body-size, 1rem);
+    font-weight: var(--astryx-font-weight-regular, 400);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-outline[data-density='compact'] .astryx-outline__link {
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-outline__link[data-level='2'] {
+    padding-inline-start: var(--astryx-spacing-7, 28px);
+  }
+
+  .astryx-outline__link[data-level='3'] {
+    padding-inline-start: var(--astryx-spacing-11, 44px);
+  }
+
+  .astryx-outline__link[data-level='4'] {
+    padding-inline-start: var(--astryx-spacing-12, 48px);
+  }
+
+  @media (hover: hover) {
+    .astryx-outline__link:hover {
+      color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  .astryx-outline__link[data-active] {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-outline__link:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-outline__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-outline__track {
+    position: relative;
+    flex-shrink: 0;
+    order: -1;
+    width: 2px;
+  }
+
+  .astryx-outline__line,
+  .astryx-outline__indicator {
+    position: absolute;
+    inset-inline-start: 0;
+    width: 2px;
+    border-radius: var(--astryx-radius-full, 9999px);
+    pointer-events: none;
+  }
+
+  .astryx-outline__line {
+    inset-block: 0;
+    background-color: var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-outline__indicator {
+    top: var(--astryx-outline-indicator-top, 0px);
+    height: var(--astryx-outline-indicator-height, 0px);
+    background-color: var(--astryx-color-icon-primary, light-dark(#171717, #fafafa));
+    transition:
+      top var(--astryx-duration-fast-min, 95ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      height var(--astryx-duration-fast-min, 95ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-outline__indicator {
+      transition: none;
+    }
+  }
+}

package/styles/pagination.css

@@ -48,7 +48,8 @@
     flex-wrap: nowrap;
   }
 
-  .astryx-pagination-compact {
+  .astryx-pagination-compact,
+  .astryx-pagination-count {
     display: none;
     flex-shrink: 0;
     align-items: center;
@@ -56,6 +57,49 @@
     white-space: nowrap;
   }
 
+  .astryx-pagination-count {
+    display: inline-flex;
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-pagination-dots {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-pagination-dot {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-full, 999px);
+    background: var(--astryx-color-border, #d4d4d4);
+    cursor: pointer;
+  }
+
+  .astryx-pagination-dot.is-active {
+    background: var(--astryx-color-text-primary, #171717);
+  }
+
+  .astryx-pagination-dot:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .astryx-pagination--sm .astryx-pagination-button,
+  .astryx-pagination--sm .astryx-pagination-page {
+    min-width: var(--astryx-size-element-sm, 28px);
+    height: var(--astryx-size-element-sm, 28px);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+  }
+
+  .astryx-pagination--sm .astryx-pagination-dot {
+    width: 6px;
+    height: 6px;
+  }
+
   .astryx-pagination-button,
   .astryx-pagination-page {
     position: relative;

package/styles/progress-bar.css

@@ -76,6 +76,10 @@
     background: var(--astryx-progress-bar-error-fill, var(--astryx-input-error, #ff705d));
   }
 
+  .astryx-progress-bar[data-variant='accent'] .astryx-progress-bar-fill {
+    background: var(--astryx-progress-bar-accent-fill, var(--astryx-color-accent, #25252a));
+  }
+
   .astryx-progress-bar[data-variant='info'] .astryx-progress-bar-fill {
     background: var(--astryx-progress-bar-info-fill, var(--astryx-input-info, #6d9cfe));
   }

package/styles/selector.css

@@ -98,6 +98,29 @@
     box-shadow: none;
   }
 
+  .astryx-selector-field.is-ghost {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  @media (hover: hover) {
+    .astryx-selector-field.is-ghost:hover:not(.is-disabled) {
+      background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));
+      box-shadow: none;
+    }
+  }
+
+  .astryx-selector-field.is-ghost:focus-within,
+  .astryx-selector-field.is-ghost.is-open {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .astryx-selector:has(.astryx-selector-value.is-rich) .astryx-selector-field {
+    height: auto;
+    min-height: var(--astryx-input-height-md, 32px);
+  }
+
   .astryx-selector-field.is-disabled .astryx-selector-trigger {
     cursor: default;
   }
@@ -127,6 +150,11 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
+  .astryx-selector-value.is-rich {
+    overflow: visible;
+    white-space: normal;
+  }
+
   .astryx-selector-icon {
     display: flex;
     flex: none;
@@ -188,6 +216,22 @@
     animation-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
+  .astryx-selector-listbox.is-sheet {
+    position: static;
+    width: 100%;
+    max-width: none;
+    max-block-size: none;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    animation: none;
+  }
+
+  .astryx-selector-sheet-title {
+    margin-bottom: var(--astryx-spacing-2, 8px);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
   .astryx-selector-listbox[data-placement='below'] {
     animation-name: astryx-selector-enter-below;
   }
@@ -257,6 +301,20 @@
     cursor: default;
   }
 
+  .astryx-selector-section {
+    padding: var(--astryx-spacing-2, 8px) var(--astryx-spacing-2, 8px) var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-selector-option-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: var(--astryx-spacing-1, 4px);
+  }
+
   .astryx-selector-option-label {
     display: block;
   }

package/styles/tab-list.css

@@ -30,6 +30,21 @@
     padding-bottom: var(--astryx-spacing-1, 4px);
   }
 
+  /* Cancel the container's inline padding so the underline can span the
+     content box. The strip pads the labels back onto the content inset,
+     minus the padding each tab already has. */
+  .astryx-tab-list--full-bleed {
+    margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
+    margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
+    max-width: none;
+    width: calc(100% + var(--container-padding-inline-start, 0px) + var(--container-padding-inline-end, 0px));
+  }
+
+  .astryx-tab-list--full-bleed .astryx-tab-list__strip {
+    padding-inline-start: max(var(--container-padding-inline-start, 0px) - var(--astryx-spacing-3, 12px), 0px);
+    padding-inline-end: max(var(--container-padding-inline-end, 0px) - var(--astryx-spacing-3, 12px), 0px);
+  }
+
   .astryx-tab {
     display: inline-flex;
     align-items: center;

package/styles/text-area.css

@@ -18,6 +18,23 @@
     transition: border-color 130ms cubic-bezier(0.24, 1, 0.4, 1);
   }
 
+  .astryx-text-area-count {
+    position: absolute;
+    right: var(--astryx-spacing-2, 8px);
+    bottom: var(--astryx-spacing-1, 4px);
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-text-area-count[data-over='true'] {
+    color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-text-area:has(.astryx-text-area-count) {
+    padding-bottom: var(--astryx-spacing-5, 20px);
+  }
+
   .astryx-text-area[data-size='sm'] {
     min-height: var(--astryx-text-area-min-height-sm, 64px);
     padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);

package/styles/text-input.css

@@ -82,6 +82,11 @@
     height: 16px;
   }
 
+  .astryx-text-input-end > .astryx-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   .astryx-text-input > .astryx-field-icon {
     color: var(--astryx-input-status-color);
   }