@astryx-vue/core 0.1.0 → 0.1.3

package/styles/icon.css

@@ -159,5 +159,37 @@
   .astryx-icon--copy {
     --astryx-icon-artwork: var(--astryx-icon-copy, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v12a2 2 0 002 2h8a2 2 0 002-2V7.242a2 2 0 00-.602-1.43L16.083 2.57A2 2 0 0014.685 2H10a2 2 0 00-2 2z' /%3E%3Cpath d='M16 18v2a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2h2' /%3E%3C/svg%3E"));
   }
+  /* calendar */
+  .astryx-icon--calendar {
+    --astryx-icon-artwork: var(--astryx-icon-calendar, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"));
+  }
+  /* clock */
+  .astryx-icon--clock {
+    --astryx-icon-artwork: var(--astryx-icon-clock, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E"));
+  }
+  /* upload */
+  .astryx-icon--upload {
+    --astryx-icon-artwork: var(--astryx-icon-upload, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V5'/%3E%3Cpath d='M8 8.5 12 4.5 16 8.5'/%3E%3Cpath d='M5 15.5V18a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 18v-2.5'/%3E%3C/svg%3E"));
+  }
+  /* arrowUp */
+  .astryx-icon--arrow-up {
+    --astryx-icon-artwork: var(--astryx-icon-arrow-up, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6' /%3E%3C/svg%3E"));
+  }
+  /* arrowDown */
+  .astryx-icon--arrow-down {
+    --astryx-icon-artwork: var(--astryx-icon-arrow-down, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' /%3E%3C/svg%3E"));
+  }
+  /* close */
+  .astryx-icon--close {
+    --astryx-icon-artwork: var(--astryx-icon-close, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"));
+  }
+  /* funnel */
+  .astryx-icon--funnel {
+    --astryx-icon-artwork: var(--astryx-icon-funnel, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8z' /%3E%3C/svg%3E"));
+  }
+  /* image */
+  .astryx-icon--image {
+    --astryx-icon-artwork: var(--astryx-icon-image, url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2M8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-5.5z' /%3E%3C/svg%3E"));
+  }
   /* ARTWORK: generated end */
 }

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/metadata-list.css

@@ -0,0 +1,107 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-metadata-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .astryx-metadata-list__title {
+    margin-bottom: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-metadata-list__dl {
+    margin: 0;
+    padding: 0;
+  }
+
+  .astryx-metadata-list__dl[data-layout='single'] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--astryx-spacing-2, 8px) var(--astryx-spacing-4, 16px);
+    align-items: baseline;
+  }
+
+  .astryx-metadata-list__dl[data-layout='stacked-single'] {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-metadata-list__dl[data-layout='multi'],
+  .astryx-metadata-list__dl[data-layout='stacked-multi'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-metadata-list__dl[data-layout='horizontal'] {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-metadata-list__toggle {
+    appearance: none;
+    align-self: flex-start;
+    margin: 0;
+    padding: var(--astryx-spacing-2, 8px) 0;
+    border: 0;
+    background: transparent;
+    color: var(--astryx-color-accent, light-dark(#262626, #ebebeb));
+    font-family: inherit;
+    font-size: var(--astryx-text-body-size, 1rem);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    line-height: var(--astryx-text-body-leading, 1.5);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-metadata-list__toggle:disabled {
+    cursor: default;
+  }
+
+  .astryx-metadata-list__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+  }
+
+  .astryx-metadata-list__label,
+  .astryx-metadata-list__value,
+  .astryx-metadata-list__item-label,
+  .astryx-metadata-list__item-value {
+    margin: 0;
+    padding: 0;
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.5);
+    overflow-wrap: break-word;
+  }
+
+  .astryx-metadata-list__label,
+  .astryx-metadata-list__item-label {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  .astryx-metadata-list__label,
+  .astryx-metadata-list__value {
+    min-height: 24px;
+  }
+
+  .astryx-metadata-list__value,
+  .astryx-metadata-list__item-value {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-metadata-list__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+}

package/styles/number-input.css

@@ -109,3 +109,9 @@
     }
   }
 }
+
+/* Unlayered: the field chrome owns focus. A page ring on the inner input stacks a second outline. */
+.astryx-number-input-field:focus,
+.astryx-number-input-field:focus-visible {
+  outline: none;
+}

package/styles/radio.css

@@ -87,6 +87,38 @@
     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;
+    align-items: center;
+    gap: var(--astryx-spacing-5, 20px);
+  }
+
+  .astryx-radio-group[data-orientation='vertical'] .astryx-radio {
+    display: flex;
+    width: 100%;
+  }
+
+  .astryx-radio-end {
+    margin-inline-start: auto;
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-body-size, 14px);
+    line-height: 1.4286;
+  }
+
   @media (forced-colors: active) {
     .astryx-radio-indicator {
       border-color: ButtonText;

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