@astryx-vue/core 0.1.1 → 0.2.0

package/styles/resize-handle.css

@@ -0,0 +1,128 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-resize-handle {
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--astryx-divider-color-subtle, #00000014);
+    transition-property: background-color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    touch-action: none;
+  }
+
+  .astryx-resize-handle:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-resize-handle[data-direction='horizontal'] {
+    width: 1px;
+    height: 100%;
+    cursor: col-resize;
+  }
+
+  .astryx-resize-handle[data-direction='vertical'] {
+    width: 100%;
+    height: 1px;
+    cursor: row-resize;
+  }
+
+  .astryx-resize-handle[data-direction='horizontal']:not([data-divider]) {
+    width: 0;
+    background-color: transparent;
+  }
+
+  .astryx-resize-handle[data-direction='vertical']:not([data-divider]) {
+    height: 0;
+    background-color: transparent;
+  }
+
+  .astryx-resize-handle[data-divider][data-resizing] {
+    background-color: var(--astryx-color-border-emphasized, #d4d4d4);
+  }
+
+  .astryx-resize-handle[data-position='overlay'] {
+    position: absolute;
+    z-index: 2;
+    background-color: transparent;
+  }
+
+  .astryx-resize-handle[data-position='overlay'][data-direction='horizontal'] {
+    inset-inline-end: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--resize-handle-hit-area, 16px);
+  }
+
+  .astryx-resize-handle[data-position='overlay'][data-direction='vertical'] {
+    inset-block-end: 0;
+    inset-inline: 0;
+    height: var(--resize-handle-hit-area, 16px);
+  }
+
+  .astryx-resize-handle[data-disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .astryx-resize-handle__hit {
+    position: absolute;
+    z-index: 1;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle__hit {
+    width: var(--astryx-spacing-4, 16px);
+    top: 0;
+    bottom: 0;
+    cursor: col-resize;
+  }
+
+  .astryx-resize-handle[data-direction='vertical'] > .astryx-resize-handle__hit {
+    height: var(--astryx-spacing-4, 16px);
+    inset-inline: 0;
+    cursor: row-resize;
+  }
+
+  .astryx-resize-handle-pill {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background-color: var(--astryx-divider-color-subtle, #00000014);
+    transition-property: opacity, background-color, transform;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    opacity: 1;
+  }
+
+  .astryx-resize-handle[data-direction='horizontal'] > .astryx-resize-handle-pill {
+    width: 3px;
+    height: var(--astryx-spacing-8, 32px);
+    top: 50%;
+  }
+
+  .astryx-resize-handle[data-direction='vertical'] > .astryx-resize-handle-pill {
+    width: var(--astryx-spacing-8, 32px);
+    height: 3px;
+    inset-inline-start: 50%;
+  }
+
+  .astryx-resize-handle-pill[data-hidden] {
+    opacity: 0;
+  }
+
+  .astryx-resize-handle[data-active] > .astryx-resize-handle-pill {
+    opacity: 1;
+  }
+
+  .astryx-resize-handle[data-resizing] > .astryx-resize-handle-pill {
+    opacity: 1;
+    background-color: var(--astryx-color-border-emphasized, #d4d4d4);
+  }
+}

package/styles/scrollable-area.css

@@ -0,0 +1,50 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-scrollable-area {
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    max-block-size: 100%;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-color: var(--astryx-color-neutral, #0000000f) transparent;
+    scrollbar-width: auto;
+  }
+
+  .astryx-scrollable-area:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-scrollable-area[data-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-inline-size: calc(100% + var(--container-padding-inline-start, 0px) + var(--container-padding-inline-end, 0px));
+  }
+
+  .astryx-scrollable-area[data-full-bleed]:first-child {
+    margin-block-start: calc(-1 * var(--container-padding-block-start, 0px));
+  }
+
+  .astryx-scrollable-area[data-full-bleed]:last-child {
+    margin-block-end: calc(-1 * var(--container-padding-block-end, 0px));
+  }
+
+  .astryx-scrollable-area__content {
+    box-sizing: border-box;
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    padding-inline-start: var(--_pad-inline-start, 0px);
+    padding-inline-end: var(--_pad-inline-end, 0px);
+    padding-block-start: var(--_pad-block-start, 0px);
+    padding-block-end: var(--_pad-block-end, 0px);
+    --container-padding-inline-start: var(--_pad-inline-start, 0px);
+    --container-padding-inline-end: var(--_pad-inline-end, 0px);
+    --container-padding-block-start: var(--_pad-block-start, 0px);
+    --container-padding-block-end: var(--_pad-block-end, 0px);
+  }
+
+  .astryx-scrollable-area[data-axis='inline'] > .astryx-scrollable-area__content,
+  .astryx-scrollable-area[data-axis='both'] > .astryx-scrollable-area__content {
+    inline-size: max-content;
+  }
+}

package/styles/section.css

@@ -0,0 +1,60 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-section {
+    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));
+  }
+
+  .astryx-section:first-child {
+    margin-block-start: calc(-1 * var(--container-padding-block-start, 0px));
+  }
+
+  .astryx-section:last-child {
+    margin-block-end: calc(-1 * var(--container-padding-block-end, 0px));
+  }
+
+  .astryx-section__inner {
+    box-sizing: border-box;
+    height: 100%;
+    --layout-padding-own-outer-x: initial;
+    --layout-padding-own-outer-y: initial;
+    --_section-pad: var(--astryx-section-padding, var(--astryx-spacing-4, 16px));
+    padding-inline-start: var(--_section-inline-start, var(--_section-pad));
+    padding-inline-end: var(--_section-inline-end, var(--_section-pad));
+    padding-block-start: var(--_section-block-start, var(--_section-pad));
+    padding-block-end: var(--_section-block-end, var(--_section-pad));
+    --container-padding-inline-start: var(--_section-inline-start, var(--_section-pad));
+    --container-padding-inline-end: var(--_section-inline-end, var(--_section-pad));
+    --container-padding-block-start: var(--_section-block-start, var(--_section-pad));
+    --container-padding-block-end: var(--_section-block-end, var(--_section-pad));
+    --layout-padding-outer-x: var(--container-padding-inline-start);
+    --layout-padding-outer-y: var(--container-padding-block-start);
+    background-color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-section__inner[data-variant='transparent'] {
+    background-color: transparent;
+  }
+
+  .astryx-section__inner[data-variant='muted'] {
+    background-color: var(--astryx-color-background-muted, #f1f1f1);
+  }
+
+  .astryx-section__inner[data-divider-top] {
+    border-block-start: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-section__inner[data-divider-bottom] {
+    border-block-end: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-section__inner[data-divider-start] {
+    border-inline-start: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+
+  .astryx-section__inner[data-divider-end] {
+    border-inline-end: 1px solid var(--astryx-color-border, #ebebeb);
+  }
+}

package/styles/side-nav.css

@@ -17,6 +17,32 @@
     width: var(--astryx-side-nav-collapsed-width, 48px);
   }
 
+  .astryx-side-nav--topbar {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: auto;
+    height: var(--astryx-spacing-12, 48px);
+    min-width: 0;
+    overflow: hidden;
+    background: inherit;
+  }
+
+  .astryx-side-nav--drawer {
+    width: 100%;
+    height: auto;
+  }
+
+  .astryx-side-nav__topbar-icons {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    margin-inline-start: auto;
+  }
+
   .astryx-side-nav__top,
   .astryx-side-nav__bottom {
     display: flex;

package/styles/stepper.css

@@ -0,0 +1,357 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-stepper-root {
+    width: 100%;
+  }
+
+  .astryx-stepper-root[data-collapsed] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-stepper {
+    display: flex;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    gap: var(--astryx-spacing-0-5, 2px);
+  }
+
+  .astryx-stepper[data-orientation='horizontal'] {
+    gap: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-stepper[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  .astryx-stepper[data-indicator-position='on-track'] {
+    gap: 0;
+  }
+
+  .astryx-stepper[data-collapsible='true'] {
+    container-type: inline-size;
+    container-name: astryx-stepper;
+  }
+
+  .astryx-step {
+    position: relative;
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    color: var(--astryx-color-text-primary, #171717);
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+  }
+
+  .astryx-step[data-orientation='horizontal'] {
+    flex-direction: column;
+  }
+
+  .astryx-step[data-orientation='vertical'] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-density='compact'] { --_step-space: var(--astryx-spacing-1, 4px); }
+  .astryx-step[data-density='balanced'] { --_step-space: var(--astryx-spacing-2, 8px); }
+  .astryx-step[data-density='spacious'] { --_step-space: var(--astryx-spacing-3, 12px); }
+
+  .astryx-step-bar,
+  .astryx-step-connector {
+    background: var(--astryx-color-border, #00000014);
+    border-radius: var(--astryx-radius-full, 999px);
+  }
+
+  .astryx-step-bar[data-filled],
+  .astryx-step-connector[data-filled] {
+    background: var(--astryx-color-accent, #0082fb);
+  }
+
+  .astryx-step[data-orientation='horizontal'] > .astryx-step-bar {
+    height: var(--astryx-spacing-1, 4px);
+    width: 100%;
+    margin-block-end: var(--astryx-spacing-0-5, 2px);
+    border-radius: 9999px;
+  }
+
+  .astryx-step[data-orientation='vertical'] > .astryx-step-bar {
+    width: var(--astryx-spacing-1, 4px);
+    align-self: stretch;
+    min-height: var(--astryx-spacing-4, 16px);
+    border-radius: var(--astryx-radius-full, 999px);
+  }
+
+  .astryx-step-rail {
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track'] > .astryx-step-rail {
+    height: var(--astryx-spacing-1, 4px);
+    margin-block: calc(var(--astryx-spacing-5, 20px) / 2 - 2px) var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-orientation='vertical'][data-indicator-position='on-track'] {
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-orientation='vertical'][data-indicator-position='on-track'] > .astryx-step-rail {
+    flex-direction: column;
+    align-self: stretch;
+    width: 16px;
+  }
+
+  .astryx-step-connector {
+    flex: 1 1 auto;
+    min-width: var(--astryx-spacing-2, 8px);
+    border-radius: 0;
+  }
+
+  .astryx-step[data-orientation='horizontal'] .astryx-step-connector {
+    height: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-step[data-orientation='vertical'] .astryx-step-connector {
+    width: var(--astryx-spacing-1, 4px);
+    min-height: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-step:first-child .astryx-step-connector-lead,
+  .astryx-step:last-child .astryx-step-connector-trail {
+    visibility: hidden;
+  }
+
+  .astryx-step-control {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    margin: 0;
+    padding-block: var(--_step-space);
+    padding-inline: var(--_step-space);
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+  }
+
+  button.astryx-step-control {
+    cursor: pointer;
+    transition: background-color var(--astryx-duration-fast-min, 80ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    button.astryx-step-control:hover {
+      background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+    }
+  }
+
+  button.astryx-step-control:active {
+    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  }
+
+  button.astryx-step-control:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, var(--astryx-color-text-primary, #171717));
+    outline-offset: 2px;
+  }
+
+  .astryx-step-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 9999px;
+    background: transparent;
+    color: var(--astryx-color-text-primary, #171717);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .astryx-step-indicator svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .astryx-step-indicator[data-glyph='number'] {
+    background: var(--astryx-color-accent-muted, #f1f1f1);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-step[data-progress='completed'] .astryx-step-indicator[data-glyph='number'],
+  .astryx-step[data-progress='in-progress'] .astryx-step-indicator[data-glyph='number'] {
+    background: var(--astryx-color-accent, #262626);
+    color: var(--astryx-color-background-surface, #fff);
+  }
+
+  .astryx-step[data-status='accent'] .astryx-step-indicator {
+    color: var(--astryx-color-accent, #262626);
+  }
+
+  .astryx-step[data-status='success'] .astryx-step-indicator {
+    background: transparent;
+    color: var(--astryx-color-success, #16a34a);
+  }
+
+  .astryx-step[data-status='warning'] .astryx-step-indicator {
+    background: transparent;
+    color: var(--astryx-color-warning, #ca8a04);
+  }
+
+  .astryx-step[data-status='error'] .astryx-step-indicator {
+    background: transparent;
+    color: var(--astryx-color-error, #dc2626);
+  }
+
+  .astryx-step[data-progress='not-started'] .astryx-step-label,
+  .astryx-step[data-progress='completed'] .astryx-step-label {
+    font-weight: var(--astryx-font-weight-regular, 400);
+  }
+
+  .astryx-step[data-progress='in-progress'] .astryx-step-label {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-step-copy {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--astryx-spacing-0-5, 2px);
+  }
+
+  .astryx-step-label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-step-label,
+  .astryx-step-description,
+  .astryx-step-optional {
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-step-description,
+  .astryx-step-optional {
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: 16px;
+  }
+
+  .astryx-step-content {
+    padding-block-start: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='separated'] .astryx-step-control {
+    align-items: center;
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track'] .astryx-step-control {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .astryx-step[data-orientation='horizontal'][data-indicator-position='on-track'] .astryx-step-indicator {
+    margin-block-start: -10px;
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-stepper {
+    width: auto;
+    justify-content: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-step {
+    flex: 0 0 32px;
+    width: 32px;
+    min-width: 32px;
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-step-control,
+  .astryx-stepper-root[data-collapsed] .astryx-step-content,
+  .astryx-stepper-root[data-collapsed] .astryx-step-rail {
+    display: none;
+  }
+
+  .astryx-stepper-root[data-collapsed] .astryx-step-bar {
+    margin-block-end: 0;
+  }
+
+  .astryx-stepper-summary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--astryx-spacing-3, 12px);
+    min-width: 0;
+  }
+
+  .astryx-stepper-summary-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+  }
+
+  .astryx-stepper-summary-row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-stepper-summary .astryx-step-label {
+    color: var(--astryx-color-text-primary, #171717);
+    font-weight: 600;
+  }
+
+  .astryx-stepper-nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: var(--astryx-color-text-primary, #171717);
+    cursor: pointer;
+  }
+
+  .astryx-stepper-nav svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .astryx-stepper-nav:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  @container astryx-stepper (max-width: 480px) {
+    .astryx-stepper[data-collapsible='true'][data-orientation='horizontal'] .astryx-step:not([data-progress='in-progress']) .astryx-step-copy {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    button.astryx-step-control {
+      transition-duration: 0s;
+    }
+  }
+}