@astryx-vue/core 0.1.0 → 0.1.1

package/styles/tree-list.css

@@ -0,0 +1,229 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-tree-list {
+    position: relative;
+    --tree-list-indent: var(--astryx-spacing-4, 16px);
+    --tree-list-row-gap: var(--astryx-spacing-0-5, 2px);
+    /*
+     * A nested branch only indents 16px, while the guide is centered on the
+     * parent chevron (10px margin + 10px). The 1px line therefore ends about
+     * 4.5px inside that row. The fill starts one 4px step past that edge.
+     */
+    --_tree-guide-clearance: calc(
+      var(--astryx-spacing-2, 8px) + var(--astryx-spacing-0-5, 2px) + (var(--astryx-spacing-5, 20px) / 2) + 0.5px - var(--tree-list-indent, 16px) + var(--astryx-spacing-1, 4px)
+    );
+  }
+
+  .astryx-tree-list__header {
+    margin-bottom: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-tree-list__list,
+  .astryx-tree-list__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .astryx-tree-list__item {
+    position: relative;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    outline: none;
+  }
+
+  .astryx-tree-list__row {
+    position: relative;
+    padding-block: calc(var(--tree-list-row-gap, 0px) / 2);
+  }
+
+  .astryx-tree-list__content {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    margin-inline-start: var(--_tree-indent, 0px);
+    padding-inline: var(--astryx-spacing-2, 8px);
+    overflow: hidden;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    font-size: var(--astryx-text-body-size, 1rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    text-align: start;
+  }
+
+  .astryx-tree-list__content::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    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));
+  }
+
+  .astryx-tree-list__content[data-guide-inset]::before {
+    inset-inline-start: var(--_tree-guide-clearance, 8.5px);
+  }
+
+  .astryx-tree-list__content[data-density='compact'] {
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-tree-list__content[data-density='balanced'] {
+    padding-block: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-tree-list__content[data-density='spacious'] {
+    padding-block: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-tree-list__content[data-selected='true']::before {
+    background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+  }
+
+  .astryx-tree-list__content[data-interactive='true'] {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .astryx-tree-list__content[data-interactive='true']:hover::before {
+      background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+    }
+
+    .astryx-tree-list__content[data-selected='true']:hover::before {
+      background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
+    }
+  }
+
+  .astryx-tree-list__item:focus-visible > .astryx-tree-list__row > .astryx-tree-list__content {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-tree-list__content[data-disabled='true'] {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .astryx-tree-list__label {
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-tree-list__description {
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+    font-size: var(--astryx-text-supporting-size, 0.875rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-tree-list__main,
+  .astryx-tree-list__action {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    outline: none;
+    cursor: inherit;
+  }
+
+  .astryx-tree-list__start,
+  .astryx-tree-list__end {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  /*
+   * External icon classes (UnoCSS and the like) size themselves to 100% of
+   * their box. The box has to be explicit or the glyph collapses to nothing.
+   * 1rem matches Icon size sm, the size the original file-tree icons use.
+   */
+  .astryx-tree-list__icon {
+    display: inline-flex;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    color: var(--astryx-color-text-primary, currentcolor);
+  }
+
+  .astryx-tree-list__icon > i {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-tree-list__end {
+    margin-inline-start: auto;
+  }
+
+  .astryx-tree-list__chevron {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--astryx-spacing-4, 16px);
+    height: var(--astryx-spacing-4, 16px);
+    margin-inline: var(--astryx-spacing-1, 4px) calc(var(--astryx-spacing-1, 4px) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+    cursor: pointer;
+  }
+
+  .astryx-tree-list__chevron .astryx-icon {
+    width: var(--astryx-spacing-4, 16px);
+    height: var(--astryx-spacing-4, 16px);
+    font-size: var(--astryx-spacing-4, 16px);
+    transition: transform var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-tree-list__chevron[data-state='expanded'] .astryx-icon {
+    transform: rotate(90deg);
+  }
+
+  [dir='rtl'] .astryx-tree-list__chevron .astryx-icon {
+    transform: scaleX(-1);
+  }
+
+  [dir='rtl'] .astryx-tree-list__chevron[data-state='expanded'] .astryx-icon {
+    transform: scaleX(-1) rotate(90deg);
+  }
+
+  .astryx-tree-list__guide {
+    position: absolute;
+    width: var(--astryx-spacing-5, 20px);
+    height: 100%;
+  }
+
+  .astryx-tree-list__guide-line {
+    position: absolute;
+    inset-inline: 0;
+    width: 1px;
+    margin: auto;
+    border-radius: 1px;
+    background-color: var(--astryx-color-border-emphasized, light-dark(#d4d4d4, #525252));
+  }
+
+  .astryx-tree-list__guide-line[data-span='full'] {
+    height: calc(100% + 1px);
+  }
+
+  .astryx-tree-list__guide-line[data-span='last'] {
+    height: calc(100% - var(--tree-list-row-gap, 0px) / 2);
+  }
+}

package/styles.css

@@ -5,6 +5,7 @@
 @import './styles/badge.css';
 @import './styles/banner.css';
 @import './styles/blockquote.css';
+@import './styles/bordered-control.css';
 @import './styles/bottom-sheet.css';
 @import './styles/breadcrumbs.css';
 @import './styles/button.css';
@@ -14,16 +15,20 @@
 @import './styles/chat.css';
 @import './styles/checkbox-indicator.css';
 @import './styles/checkbox-input.css';
+@import './styles/checkbox-list.css';
 @import './styles/citation.css';
 @import './styles/code.css';
 @import './styles/collapsible.css';
 @import './styles/context-menu.css';
+@import './styles/date-range-input.css';
+@import './styles/date-time-input.css';
 @import './styles/dialog.css';
 @import './styles/dialog-header.css';
 @import './styles/divider.css';
 @import './styles/dropdown-menu.css';
 @import './styles/empty-state.css';
 @import './styles/field.css';
+@import './styles/file-input.css';
 @import './styles/grid.css';
 @import './styles/heading.css';
 @import './styles/hover-card.css';
@@ -32,6 +37,7 @@
 @import './styles/link.css';
 @import './styles/list.css';
 @import './styles/markdown.css';
+@import './styles/metadata-list.css';
 @import './styles/mobile-nav.css';
 @import './styles/more-menu.css';
 @import './styles/motion.css';
@@ -52,9 +58,13 @@
 @import './styles/status-dot.css';
 @import './styles/switch.css';
 @import './styles/tab-list.css';
+@import './styles/table.css';
 @import './styles/text.css';
 @import './styles/text-area.css';
 @import './styles/text-input.css';
+@import './styles/thumbnail.css';
+@import './styles/time-input.css';
+@import './styles/timestamp.css';
 @import './styles/toast.css';
 @import './styles/toggle-button.css';
 @import './styles/token.css';
@@ -62,5 +72,6 @@
 @import './styles/toolbar.css';
 @import './styles/tooltip.css';
 @import './styles/top-nav.css';
+@import './styles/tree-list.css';
 @import './styles/typeahead.css';
 @import './styles/visually-hidden.css';