@astryx-vue/core 0.1.1 → 0.2.0

package/styles/layout.css

@@ -0,0 +1,280 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-layout {
+    box-sizing: border-box;
+    margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
+    margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
+    margin-block-start: calc(-1 * var(--container-padding-block-start, 0px));
+    margin-block-end: calc(-1 * var(--container-padding-block-end, 0px));
+  }
+
+  .astryx-layout[data-height='fill'],
+  .astryx-layout[data-height='fill'] > .astryx-layout__inner {
+    height: calc(100% + var(--container-padding-block-start, 0px) + var(--container-padding-block-end, 0px));
+    max-height: var(--container-max-height, none);
+  }
+
+  .astryx-layout[data-height='auto'],
+  .astryx-layout[data-height='auto'] > .astryx-layout__inner {
+    min-height: 100%;
+  }
+
+  .astryx-layout__inner {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    --container-padding-inline-start: 0px;
+    --container-padding-inline-end: 0px;
+    --container-padding-block-start: 0px;
+    --container-padding-block-end: 0px;
+    --layout-content-width: 100cqi;
+    --layout-alignment-width: 100cqi;
+    --layout-padding-own-outer-x: initial;
+    --layout-padding-own-outer-y: initial;
+  }
+
+  .astryx-layout__inner[data-full-bleed] {
+    --layout-padding-own-outer-x: 0px;
+    --layout-padding-own-outer-y: 0px;
+  }
+
+  .astryx-layout__middle {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .astryx-layout__inner[data-width-mode='constrained'] > .astryx-layout__middle,
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='both'] > .astryx-layout__middle {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--layout-content-width, none);
+    margin-inline: auto;
+  }
+
+  .astryx-layout__inner[data-width-mode='internal']:not([data-panels='both']) > .astryx-layout__middle {
+    container-type: inline-size;
+  }
+
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='start'] > .astryx-layout__middle,
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='end'] > .astryx-layout__middle {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--layout-content-width, none);
+    margin-inline: auto;
+  }
+
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='start'] > .astryx-layout__middle:has(> .astryx-layout__content-slot > .astryx-layout-content),
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='end'] > .astryx-layout__middle:has(> .astryx-layout__content-slot > .astryx-layout-content) {
+    max-width: none;
+    margin-inline: 0;
+  }
+
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='start'] > .astryx-layout__middle:has(> .astryx-layout__content-slot > .astryx-layout-content) {
+    padding-inline-start: max(0px, calc((100% - var(--layout-content-width)) / 2));
+  }
+
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='end'] > .astryx-layout__middle:has(> .astryx-layout__content-slot > .astryx-layout-content) {
+    padding-inline-end: max(0px, calc((100% - var(--layout-content-width)) / 2));
+  }
+
+  .astryx-layout__content-slot {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='none'] > .astryx-layout__middle > .astryx-layout__content-slot {
+    width: 100%;
+    max-width: var(--layout-content-width, none);
+    margin-inline: auto;
+  }
+
+  .astryx-layout__inner[data-width-mode='internal'][data-panels='none'] > .astryx-layout__middle > .astryx-layout__content-slot:has(> .astryx-layout-content) {
+    max-width: none;
+  }
+
+  .astryx-layout-header,
+  .astryx-layout-footer {
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  .astryx-layout-header[data-divider] {
+    border-block-end: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-layout-footer[data-divider] {
+    border-block-start: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-layout-header__inner,
+  .astryx-layout-footer__inner {
+    box-sizing: border-box;
+    max-width: var(--layout-content-width, none);
+    margin-inline: auto;
+  }
+
+  .astryx-layout-header__inner {
+    padding-inline: var(--_layout-header-inline, var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px))));
+    padding-block-start: var(--_layout-header-block-start, var(--layout-padding-own-outer-y, var(--layout-padding-outer-y, var(--astryx-spacing-4, 16px))));
+    padding-block-end: var(--_layout-header-block-end, var(--layout-padding-inner-y, var(--astryx-spacing-4, 16px)));
+    --container-padding-inline-start: var(--_layout-header-inline, var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px))));
+    --container-padding-inline-end: var(--_layout-header-inline, var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px))));
+    --container-padding-block-start: var(--_layout-header-block-start, var(--layout-padding-own-outer-y, var(--layout-padding-outer-y, var(--astryx-spacing-4, 16px))));
+    --container-padding-block-end: var(--_layout-header-block-end, var(--layout-padding-inner-y, var(--astryx-spacing-4, 16px)));
+  }
+
+  .astryx-layout-footer__inner {
+    padding-inline: var(--_layout-footer-inline, var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px))));
+    padding-block-start: var(--_layout-footer-block-start, var(--layout-padding-inner-y, var(--astryx-spacing-4, 16px)));
+    padding-block-end: var(--_layout-footer-block-end, var(--layout-padding-own-outer-y, var(--layout-padding-outer-y, var(--astryx-spacing-4, 16px))));
+    --container-padding-inline-start: var(--_layout-footer-inline, var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px))));
+    --container-padding-inline-end: var(--_layout-footer-inline, var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px))));
+    --container-padding-block-start: var(--_layout-footer-block-start, var(--layout-padding-inner-y, var(--astryx-spacing-4, 16px)));
+    --container-padding-block-end: var(--_layout-footer-block-end, var(--layout-padding-own-outer-y, var(--layout-padding-outer-y, var(--astryx-spacing-4, 16px))));
+  }
+
+  .astryx-layout-header__inner[data-bleed],
+  .astryx-layout-footer__inner[data-bleed] {
+    padding: 0;
+    --container-padding-inline-start: 0px;
+    --container-padding-inline-end: 0px;
+    --container-padding-block-start: 0px;
+    --container-padding-block-end: 0px;
+  }
+
+  .astryx-layout-content,
+  .astryx-layout-panel {
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    --layout-pad-inline: var(--layout-padding-inner-x, var(--astryx-spacing-4, 16px));
+    --layout-pad-block: var(--layout-padding-inner-y, var(--astryx-spacing-4, 16px));
+    --layout-pad-outer-x: var(--layout-padding-own-outer-x, var(--layout-padding-outer-x, var(--astryx-spacing-4, 16px)));
+    --layout-pad-outer-y: var(--layout-padding-own-outer-y, var(--layout-padding-outer-y, var(--astryx-spacing-4, 16px)));
+  }
+
+  .astryx-layout-content {
+    height: 100%;
+    flex: 1;
+    overflow: clip;
+    padding-inline-start: var(--_layout-content-inline-start, var(--layout-pad-inline));
+    padding-inline-end: var(--_layout-content-inline-end, var(--layout-pad-inline));
+    padding-block-start: var(--_layout-content-block-start, var(--layout-pad-block));
+    padding-block-end: var(--_layout-content-block-end, var(--layout-pad-block));
+    --container-padding-inline-start: var(--_layout-content-inline-start, var(--layout-pad-inline));
+    --container-padding-inline-end: var(--_layout-content-inline-end, var(--layout-pad-inline));
+    --container-padding-block-start: var(--_layout-content-block-start, var(--layout-pad-block));
+    --container-padding-block-end: var(--_layout-content-block-end, var(--layout-pad-block));
+  }
+
+  .astryx-layout-content[data-edge-start]:not([data-explicit-padding]) {
+    padding-inline-start: var(--layout-pad-outer-x);
+    --container-padding-inline-start: var(--layout-pad-outer-x);
+    --container-padding-inline-end: var(--layout-pad-outer-x);
+  }
+
+  .astryx-layout-content[data-edge-end]:not([data-explicit-padding]) {
+    padding-inline-end: var(--layout-pad-outer-x);
+  }
+
+  .astryx-layout-content[data-edge-header]:not([data-explicit-padding]) {
+    padding-block-start: var(--layout-pad-outer-y);
+    --container-padding-block-start: var(--layout-pad-outer-y);
+  }
+
+  .astryx-layout-content[data-edge-footer]:not([data-explicit-padding]) {
+    padding-block-end: var(--layout-pad-outer-y);
+    --container-padding-block-end: var(--layout-pad-outer-y);
+  }
+
+  .astryx-layout__inner:has(> .astryx-layout-header:not([data-divider])) .astryx-layout-content:not([data-explicit-padding]) {
+    padding-block-start: 0;
+  }
+
+  .astryx-layout__inner:has(> .astryx-layout-footer:not([data-divider])) .astryx-layout-content:not([data-explicit-padding]) {
+    padding-block-end: 0;
+  }
+
+  .astryx-layout-content[data-scrollable] {
+    overflow: auto;
+  }
+
+  .astryx-layout-content[data-panels='none']:not([data-explicit-padding]) {
+    padding-inline-start: max(var(--container-padding-inline-start, 0px), calc((100cqi - var(--layout-alignment-width, 100cqi)) / 2 + var(--container-padding-inline-start, 0px)));
+    padding-inline-end: max(var(--container-padding-inline-end, 0px), calc((100cqi - var(--layout-alignment-width, 100cqi)) / 2 + var(--container-padding-inline-end, 0px)));
+  }
+
+  .astryx-layout-content[data-panels='start']:not([data-explicit-padding]) {
+    padding-inline-end: max(var(--container-padding-inline-end, 0px), calc(100cqi - var(--layout-alignment-width, 100cqi) + var(--container-padding-inline-end, 0px)));
+  }
+
+  .astryx-layout-content[data-panels='end']:not([data-explicit-padding]) {
+    padding-inline-start: max(var(--container-padding-inline-start, 0px), calc(100cqi - var(--layout-alignment-width, 100cqi) + var(--container-padding-inline-start, 0px)));
+  }
+
+  .astryx-layout-content[data-bleed],
+  .astryx-layout-panel[data-bleed] {
+    padding: 0;
+    --container-padding-inline-start: 0px;
+    --container-padding-inline-end: 0px;
+    --container-padding-block-start: 0px;
+    --container-padding-block-end: 0px;
+  }
+
+  .astryx-layout-panel {
+    flex-shrink: 0;
+    overflow: clip;
+    padding-inline-start: var(--_layout-panel-inline-start, var(--layout-pad-inline));
+    padding-inline-end: var(--_layout-panel-inline-end, var(--layout-pad-inline));
+    padding-block-start: var(--_layout-panel-block-start, var(--layout-pad-block));
+    padding-block-end: var(--_layout-panel-block-end, var(--layout-pad-block));
+    --container-padding-inline-start: var(--_layout-panel-inline-start, var(--layout-pad-inline));
+    --container-padding-inline-end: var(--_layout-panel-inline-end, var(--layout-pad-inline));
+    --container-padding-block-start: var(--_layout-panel-block-start, var(--layout-pad-block));
+    --container-padding-block-end: var(--_layout-panel-block-end, var(--layout-pad-block));
+  }
+
+  .astryx-layout-panel[data-area='start']:not([data-explicit-padding]) {
+    padding-inline-start: var(--layout-pad-outer-x);
+  }
+
+  .astryx-layout-panel[data-area='end']:not([data-explicit-padding]) {
+    padding-inline-end: var(--layout-pad-outer-x);
+  }
+
+  .astryx-layout-panel[data-edge-header]:not([data-explicit-padding]) {
+    padding-block-start: var(--layout-pad-outer-y);
+  }
+
+  .astryx-layout-panel[data-edge-footer]:not([data-explicit-padding]) {
+    padding-block-end: var(--layout-pad-outer-y);
+  }
+
+  .astryx-layout-panel[data-scrollable] {
+    overflow: auto;
+  }
+
+  .astryx-layout-panel[data-area='start'][data-divider] {
+    border-inline-end: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-layout-panel[data-area='end'][data-divider] {
+    border-inline-start: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-layout-panel[data-area='start'][data-collapse] {
+    margin-inline-end: calc(-1 * var(--layout-pad-inline));
+  }
+
+  .astryx-layout-panel[data-area='end'][data-collapse] {
+    margin-inline-start: calc(-1 * var(--layout-pad-inline));
+  }
+}

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/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/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;
+    }
+  }
+}