@astryx-vue/core 0.1.0 → 0.1.3

package/styles/table.css

@@ -0,0 +1,256 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
+    margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
+    width: calc(100% + var(--container-padding-inline-start, 0px) + var(--container-padding-inline-end, 0px));
+  }
+
+  .astryx-table-scroll:first-child {
+    margin-top: calc(-1 * var(--container-padding-block-start, 0px));
+  }
+
+  .astryx-table-scroll:last-child {
+    margin-bottom: calc(-1 * var(--container-padding-block-end, 0px));
+  }
+
+  .astryx-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-family: inherit;
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-table :is(th, td) {
+    box-sizing: border-box;
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .astryx-table[data-valign='top'] :is(th, td) {
+    vertical-align: top;
+  }
+
+  .astryx-table[data-valign='bottom'] :is(th, td) {
+    vertical-align: bottom;
+  }
+
+  .astryx-table[data-density='compact'] :is(th, td) {
+    padding-block: var(--astryx-spacing-1, 4px);
+    padding-inline: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-table[data-density='balanced'] :is(th, td) {
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-table[data-density='spacious'] :is(th, td) {
+    padding-block: var(--astryx-spacing-3, 12px);
+    padding-inline: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-table[data-density='compact'] :is(th, td):first-child {
+    padding-inline-start: max(var(--container-padding-inline-start, var(--astryx-spacing-2, 8px)), var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='compact'] :is(th, td):last-child {
+    padding-inline-end: max(var(--container-padding-inline-end, var(--astryx-spacing-2, 8px)), var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='balanced'] :is(th, td):first-child {
+    padding-inline-start: max(var(--container-padding-inline-start, var(--astryx-spacing-3, 12px)), var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='balanced'] :is(th, td):last-child {
+    padding-inline-end: max(var(--container-padding-inline-end, var(--astryx-spacing-3, 12px)), var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='spacious'] :is(th, td):first-child {
+    padding-inline-start: max(var(--container-padding-inline-start, var(--astryx-spacing-4, 16px)), var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='spacious'] :is(th, td):last-child {
+    padding-inline-end: max(var(--container-padding-inline-end, var(--astryx-spacing-4, 16px)), var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table th {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-size: var(--astryx-text-label-size, 1rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 0;
+  }
+
+  .astryx-table[data-dividers='rows'] tbody tr:not(:last-child) > td,
+  .astryx-table[data-dividers='grid'] tbody tr:not(:last-child) > td {
+    border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-table[data-dividers='columns'] :is(th, td):not(:last-child),
+  .astryx-table[data-dividers='grid'] :is(th, td):not(:last-child) {
+    border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-table[data-overflow='truncate'] td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 0;
+  }
+
+  .astryx-table[data-overflow='wrap'] td {
+    overflow: hidden;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    max-width: 0;
+  }
+
+  .astryx-table[data-striped='true'] tbody tr:nth-child(even of :not([data-expansion-panel])) {
+    background-color: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+  }
+
+  .astryx-table[data-hover='true'] tbody tr {
+    transition: background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    .astryx-table[data-hover='true'] tbody tr:hover {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  .astryx-table tbody tr[aria-selected='true'] {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-table :is(th, td)[data-align='center'] {
+    text-align: center;
+  }
+
+  .astryx-table :is(th, td)[data-align='end'] {
+    text-align: end;
+  }
+
+  .astryx-table__sort {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-table__sort[data-align='center'] {
+    justify-content: center;
+  }
+
+  .astryx-table__sort[data-align='end'] {
+    justify-content: flex-end;
+  }
+
+  .astryx-table__sort-icon {
+    display: inline-flex;
+    opacity: 0.35;
+  }
+
+  .astryx-table th:hover .astryx-table__sort-icon,
+  .astryx-table__sort:focus-visible .astryx-table__sort-icon,
+  .astryx-table__sort-icon[data-active='true'] {
+    opacity: 1;
+  }
+
+  .astryx-table__sort-rank {
+    color: var(--astryx-color-accent, light-dark(#262626, #ebebeb));
+    font-size: 10px;
+    line-height: 1;
+  }
+
+  .astryx-table__header {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-table__resize {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  .astryx-table__empty {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    text-align: center;
+  }
+
+  .astryx-table__select {
+    width: 48px;
+    min-width: 48px;
+    max-width: 48px;
+  }
+
+  .astryx-table__filter {
+    min-width: 0;
+  }
+
+  .astryx-table__filter-popover {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 220px;
+  }
+
+  .astryx-table__filter-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-table__pagination {
+    display: flex;
+    margin-top: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-table__pagination[data-align='start'] {
+    justify-content: flex-start;
+  }
+
+  .astryx-table__pagination[data-align='center'] {
+    justify-content: center;
+  }
+
+  .astryx-table__pagination[data-align='end'] {
+    justify-content: flex-end;
+  }
+
+  .astryx-table-selection-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    margin-bottom: var(--astryx-spacing-2, 8px);
+  }
+}

package/styles/text-area.css

@@ -42,7 +42,6 @@
 
   .astryx-text-area-control:focus,
   .astryx-text-area-control:focus-visible {
-    outline: none;
     box-shadow: none;
   }
 
@@ -139,3 +138,9 @@
     }
   }
 }
+
+/* Unlayered: the field chrome owns focus. A page ring on the inner textarea stacks a second outline. */
+.astryx-text-area-control:focus,
+.astryx-text-area-control:focus-visible {
+  outline: none;
+}

package/styles/text-input.css

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

package/styles/thumbnail.css

@@ -0,0 +1,151 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-thumbnail {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    width: 64px;
+    isolation: isolate;
+  }
+
+  .astryx-thumbnail[data-disabled='true'] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .astryx-thumbnail__frame {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background-color: var(--astryx-color-neutral, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-thumbnail__image,
+  .astryx-thumbnail__open,
+  .astryx-thumbnail__placeholder,
+  .astryx-thumbnail .astryx-skeleton {
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-thumbnail__image {
+    display: block;
+    object-fit: cover;
+  }
+
+  .astryx-thumbnail__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+  }
+
+  .astryx-thumbnail__placeholder .astryx-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+
+  .astryx-thumbnail__border {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+    pointer-events: none;
+  }
+
+  .astryx-thumbnail__open {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .astryx-thumbnail__open::after,
+  .astryx-thumbnail__frame[data-interactive='true']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: transparent;
+    pointer-events: none;
+    transition: background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    .astryx-thumbnail__open:hover::after,
+    .astryx-thumbnail__frame[data-interactive='true']:hover::after {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+  }
+
+  .astryx-thumbnail__open:active::after,
+  .astryx-thumbnail__frame[data-interactive='true']:active::after {
+    background-color: var(--astryx-color-overlay-pressed, light-dark(#0000001a, #ffffff1a));
+  }
+
+  .astryx-thumbnail__loading {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    background-color: var(--astryx-color-overlay, light-dark(#00000080, #000000cc));
+  }
+
+  .astryx-thumbnail__remove {
+    position: absolute;
+    top: var(--astryx-spacing-1, 4px);
+    inset-inline-end: var(--astryx-spacing-1, 4px);
+    z-index: 1;
+    line-height: 0;
+  }
+
+  .astryx-thumbnail__remove[data-reveal='hover'] {
+    opacity: 0;
+  }
+
+  .astryx-thumbnail:focus-within .astryx-thumbnail__remove[data-reveal='hover'],
+  .astryx-thumbnail__remove[data-reveal='hover']:focus-within {
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .astryx-thumbnail:hover .astryx-thumbnail__remove[data-reveal='hover'] {
+      opacity: 1;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .astryx-thumbnail__remove[data-reveal='hover'] {
+      opacity: 1;
+    }
+
+    .astryx-thumbnail__remove .astryx-button::after {
+      content: '';
+      position: absolute;
+      inset: -2px;
+    }
+  }
+
+  .astryx-thumbnail__remove .astryx-button {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    border-radius: calc(var(--astryx-radius-element, 0.625rem) - var(--astryx-spacing-1, 4px));
+    background-color: var(--astryx-color-overlay, light-dark(#00000080, #000000cc));
+    color: var(--astryx-color-on-dark, #fff);
+  }
+}

package/styles/time-input.css

@@ -0,0 +1,51 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-time-input {
+    width: 100%;
+  }
+
+  .astryx-time-input-icon {
+    display: inline-flex;
+    flex: none;
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-time-input-control {
+    box-sizing: border-box;
+    display: block;
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    line-height: inherit;
+    appearance: none;
+  }
+
+  .astryx-time-input-control::placeholder {
+    color: var(--astryx-color-text-secondary, #525252);
+    opacity: 1;
+  }
+
+  .astryx-time-input-control:disabled {
+    color: inherit;
+    cursor: default;
+    -webkit-text-fill-color: currentcolor;
+  }
+
+  .astryx-time-input-control::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+}
+
+/* Unlayered: a page-level :focus-visible ring must not draw a second box
+   inside the field. The bordered control's focus-within border is the focus treatment. */
+.astryx-time-input-control:focus,
+.astryx-time-input-control:focus-visible {
+  outline: none;
+}

package/styles/timestamp.css

@@ -0,0 +1,93 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-timestamp {
+    display: inline;
+  }
+
+  /*
+   * Text's supporting type paints a secondary color, and that class is as
+   * specific as the color modifier. The color prop has to win, matching the
+   * original `.astryx-text[data-color]` override.
+   */
+  .astryx-timestamp[data-color='primary'] {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-timestamp[data-color='secondary'] {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-timestamp[data-color='accent'] {
+    color: var(--astryx-color-text-accent, #0074e2);
+  }
+
+  .astryx-timestamp[data-color='disabled'] {
+    color: var(--astryx-color-text-disabled, light-dark(#a3a3a3, #525252));
+  }
+
+  .astryx-timestamp__time {
+    display: inline;
+    font: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  .astryx-timestamp__card {
+    display: grid;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    column-gap: var(--astryx-spacing-4, 16px);
+    row-gap: var(--astryx-spacing-2, 8px);
+    max-width: 300px;
+  }
+
+  .astryx-timestamp__card[data-columns='label-value-action'] {
+    grid-template-columns: auto 1fr auto;
+  }
+
+  .astryx-timestamp__card[data-columns='label-value'] {
+    grid-template-columns: auto 1fr;
+  }
+
+  .astryx-timestamp__card[data-columns='value-action'] {
+    grid-template-columns: 1fr auto;
+  }
+
+  .astryx-timestamp__card[data-columns='value'] {
+    grid-template-columns: 1fr;
+  }
+
+  .astryx-timestamp__row {
+    display: contents;
+  }
+
+  .astryx-timestamp__label,
+  .astryx-timestamp__value {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  .astryx-timestamp__label {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-size: var(--astryx-text-supporting-size, 0.875rem);
+    font-weight: var(--astryx-font-weight-regular, 400);
+    line-height: var(--astryx-text-supporting-leading, 1.4286);
+  }
+
+  .astryx-timestamp__value {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.5);
+  }
+
+  .astryx-timestamp__action {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}