@astryx-vue/core 0.2.3 → 0.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -412,6 +412,7 @@
       "types": "./dist/locale/index.d.ts",
       "import": "./dist/locale/index.js"
     },
+    "./locales/*.json": "./locales/*.json",
     "./package.json": "./package.json",
     "./reset.css": {
       "types": "./css.d.ts",
@@ -456,6 +457,7 @@
     "THIRD_PARTY_NOTICES.md",
     "css.d.ts",
     "dist",
+    "locales",
     "reset.css",
     "styles",
     "styles.css"

package/styles/bottom-sheet.css

@@ -62,6 +62,33 @@
     pointer-events: none;
   }
 
+  .astryx-bottom-sheet__positioner--active {
+    z-index: 2;
+  }
+
+  .astryx-bottom-sheet__positioner--retained {
+    z-index: 1;
+    pointer-events: none;
+    animation: astryx-sheet-handoff 400ms var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)) forwards;
+  }
+
+  @keyframes astryx-sheet-handoff {
+    0% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    55% {
+      transform: translateY(var(--_sheet-align, 0px));
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateY(var(--_sheet-align, 0px));
+      opacity: 0;
+    }
+  }
+
   .astryx-bottom-sheet__positioner {
     position: absolute;
     inset-inline: 0;

package/styles/code.css

@@ -267,6 +267,68 @@
     background-color: var(--astryx-code-block-highlight-background, #0074e233);
   }
 
+  /*
+   * Diff layer. The glyph column is a fixed track so every code column starts
+   * at the same offset. Row tints use the syntax slots, and a highlight
+   * replaces the tint instead of stacking on it.
+   */
+  .astryx-code-block__line--diff {
+    display: grid;
+    grid-template-columns: 1ch 1fr;
+    column-gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-code-block__line--diff.astryx-code-block__line--numbered {
+    grid-template-columns: var(--astryx-code-block-gutter-width, 2ch) auto 1fr;
+    column-gap: 0;
+  }
+
+  .astryx-code-block__line[data-diff='added'],
+  .astryx-code-block__line[data-diff='removed'],
+  .astryx-code-block__line[data-diff='header'] {
+    margin-inline: calc(-1 * var(--astryx-spacing-4, 16px));
+    padding-inline: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-code-block__line[data-diff='added'] {
+    background-color: var(--astryx-code-syntax-added, color-mix(in srgb, var(--astryx-color-success-muted, #bbf7d0) 25%, transparent));
+  }
+
+  .astryx-code-block__line[data-diff='removed'] {
+    background-color: var(--astryx-code-syntax-removed, color-mix(in srgb, var(--astryx-color-error-muted, #fecaca) 25%, transparent));
+  }
+
+  .astryx-code-block__line[data-diff='header'] {
+    background-color: var(--astryx-code-syntax-diff-header, var(--astryx-color-background-muted, #f5f5f5));
+    color: var(--astryx-code-syntax-punctuation, #6a6a6a);
+  }
+
+  .astryx-code-block__line[data-diff='added']::before,
+  .astryx-code-block__line[data-diff='added'] > .astryx-code-block__diff-marker {
+    color: var(--astryx-code-syntax-added-marker, var(--astryx-color-text-green, #0b5615));
+  }
+
+  .astryx-code-block__line[data-diff='removed']::before,
+  .astryx-code-block__line[data-diff='removed'] > .astryx-code-block__diff-marker {
+    color: var(--astryx-code-syntax-removed-marker, var(--astryx-color-text-red, #8a0011));
+  }
+
+  .astryx-code-block__line[data-diff].astryx-code-block__line--highlighted {
+    background-color: var(--astryx-code-block-highlight-background, #0074e233);
+  }
+
+  .astryx-code-block__diff-marker {
+    color: var(--astryx-code-syntax-punctuation, #6a6a6a);
+    font-family: var(--astryx-font-family-code, monospace);
+    white-space: pre;
+    user-select: none;
+  }
+
+  .astryx-code-block__line--numbered.astryx-code-block__line--diff > .astryx-code-block__diff-marker {
+    margin-inline-start: calc(var(--astryx-spacing-3, 12px) + var(--astryx-border-width, 1px) + var(--astryx-spacing-4, 16px));
+    margin-inline-end: var(--astryx-spacing-2, 8px);
+  }
+
   /* Tints the resting glyph to the muted header color; Button owns the surface. */
   .astryx-code-block .astryx-code-block-copy-button {
     --astryx-button-ghost-foreground: var(--astryx-code-syntax-comment, #525252);

package/styles/container-reveal.css

@@ -0,0 +1,104 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-reveal {
+    --_hover-delay: 0s;
+    --_reveal-opacity: 0;
+    --_reveal-position: absolute;
+    --_conceal-opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .astryx-reveal:hover {
+      --_reveal-opacity: 1;
+      --_reveal-position: static;
+      --_conceal-opacity: 0;
+    }
+
+    .astryx-reveal--inactive:hover {
+      --_reveal-opacity: 0;
+      --_reveal-position: absolute;
+      --_conceal-opacity: 1;
+    }
+  }
+
+  .astryx-reveal:focus-within,
+  .astryx-reveal--active {
+    --_reveal-opacity: 1;
+    --_reveal-position: static;
+  }
+
+  @media (any-pointer: coarse) {
+    .astryx-reveal {
+      --_reveal-opacity: 1;
+      --_reveal-position: static;
+    }
+  }
+
+  .astryx-reveal__content,
+  .astryx-reveal__content--preserve,
+  .astryx-reveal__conceal,
+  .astryx-reveal__conceal--preserve {
+    transition-property: opacity, position;
+    transition-duration: var(--astryx-duration-fast-max, 165ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    transition-delay: var(--_reveal-delay, 0s);
+    transition-behavior: allow-discrete;
+  }
+
+  @media (hover: hover) {
+    .astryx-reveal:hover {
+      --_reveal-delay: var(--_hover-delay);
+    }
+  }
+
+  .astryx-reveal:focus-within .astryx-reveal__content,
+  .astryx-reveal:focus-within .astryx-reveal__content--preserve,
+  .astryx-reveal--active .astryx-reveal__content,
+  .astryx-reveal--active .astryx-reveal__content--preserve {
+    transition-delay: 0s;
+  }
+
+  .astryx-reveal__content,
+  .astryx-reveal__content--preserve {
+    opacity: var(--_reveal-opacity, 1);
+  }
+
+  .astryx-reveal__content {
+    position: var(--_reveal-position, static);
+  }
+
+  .astryx-reveal__conceal,
+  .astryx-reveal__conceal--preserve {
+    opacity: var(--_conceal-opacity, 1);
+  }
+
+  .astryx-reveal__shown {
+    position: static;
+    opacity: 1;
+  }
+
+  .astryx-reveal__hidden {
+    position: absolute;
+    opacity: 0;
+  }
+
+  .astryx-reveal__hidden--preserve {
+    opacity: 0;
+  }
+
+  .astryx-reveal:focus-within .astryx-reveal__hidden,
+  .astryx-reveal:focus-within .astryx-reveal__hidden--preserve {
+    position: static;
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-reveal__content,
+    .astryx-reveal__content--preserve,
+    .astryx-reveal__conceal,
+    .astryx-reveal__conceal--preserve {
+      transition-duration: 0.01s;
+    }
+  }
+}

package/styles/heading.css

@@ -118,6 +118,53 @@
     font-weight: var(--astryx-font-weight-bold, 700);
   }
 
+  .astryx-heading--wrap-wrap {
+    text-wrap: wrap;
+  }
+
+  .astryx-heading--wrap-nowrap {
+    text-wrap: nowrap;
+  }
+
+  .astryx-heading--wrap-balance {
+    text-wrap: balance;
+  }
+
+  .astryx-heading--wrap-pretty {
+    text-wrap: pretty;
+  }
+
+  .astryx-heading--word-break-word {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .astryx-heading--word-break-all {
+    word-break: break-all;
+  }
+
+  .astryx-heading--strike {
+    text-decoration: line-through;
+  }
+
+  .astryx-heading--justify-start {
+    text-align: start;
+  }
+
+  .astryx-heading--justify-center {
+    text-align: center;
+  }
+
+  .astryx-heading--justify-end {
+    text-align: end;
+  }
+
+  .astryx-heading--truncate-single,
+  .astryx-heading--truncate-multi {
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .astryx-heading--truncate-single {
     overflow: hidden;
     text-overflow: ellipsis;

package/styles/keyboard-hint.css

@@ -0,0 +1,28 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-keyboard-hint {
+    position: fixed;
+    z-index: 80;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    margin: 0;
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-color-background-popover, light-dark(#fff, #1b1b1b));
+    box-shadow: var(--astryx-shadow-low, 0 1px 2px rgb(0 0 0 / 12%));
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .astryx-keyboard-hint__keys {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+  }
+}

package/styles/link.css

@@ -54,4 +54,38 @@
     font-size: 0.75em;
     line-height: 1;
   }
+
+  .astryx-link--size-sm { font-size: var(--astryx-text-sm-size, 0.75rem); }
+  .astryx-link--size-md { font-size: var(--astryx-text-md-size, 0.875rem); }
+  .astryx-link--size-lg { font-size: var(--astryx-text-lg-size, 1rem); }
+  .astryx-link--size-xl { font-size: var(--astryx-text-xl-size, 1.25rem); }
+
+  .astryx-link--weight-regular { font-weight: var(--astryx-font-weight-regular, 400); }
+  .astryx-link--weight-medium { font-weight: var(--astryx-font-weight-medium, 500); }
+  .astryx-link--weight-semibold { font-weight: var(--astryx-font-weight-semibold, 600); }
+  .astryx-link--weight-bold { font-weight: var(--astryx-font-weight-bold, 700); }
+
+  .astryx-link__label {
+    min-width: 0;
+  }
+
+  .astryx-link__label--single {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-link.astryx-link--lines {
+    max-width: 100%;
+    align-items: flex-start;
+  }
+
+  .astryx-link__label--clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--astryx-link-max-lines);
+    line-clamp: var(--astryx-link-max-lines);
+  }
 }

package/styles/list.css

@@ -19,6 +19,7 @@
     min-width: 0;
     margin: 0;
     padding-inline-start: 0;
+    overflow-inline: clip;
     list-style-type: none;
   }
 
@@ -232,8 +233,94 @@
     -webkit-line-clamp: var(--astryx-item-clamp-lines, 2);
   }
 
+  .astryx-item.astryx-item--swipe {
+    position: relative;
+    overflow: clip;
+    padding: 0;
+    touch-action: pan-y;
+    --_item-swipe-dir: 1;
+    --_item-swipe-travel: 0;
+    --_item-swipe-duration: 0s;
+  }
+
+  .astryx-item--swipe > .astryx-item__surface {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--astryx-item-inset-inline);
+    background: var(--astryx-color-background-surface, light-dark(#fff, #262626));
+    transform: translateX(calc(var(--_item-swipe-travel) * var(--_item-swipe-dir) * 1px));
+    transition: transform var(--_item-swipe-duration) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-item--swipe[data-align='start'] > .astryx-item__surface {
+    align-items: flex-start;
+  }
+
+  .astryx-item--swipe[data-density='compact'] > .astryx-item__surface {
+    padding-block: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-item--swipe[data-density='balanced'] > .astryx-item__surface {
+    padding-block: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-item--swipe[data-density='spacious'] > .astryx-item__surface {
+    padding-block: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-item__swipe-panel {
+    position: absolute;
+    z-index: 0;
+    inset-block: 0;
+    display: flex;
+  }
+
+  .astryx-item__swipe-panel[data-side='leading'] {
+    inset-inline-start: 0;
+    flex-direction: row-reverse;
+  }
+
+  .astryx-item__swipe-panel[data-side='trailing'] {
+    inset-inline-end: 0;
+  }
+
+  .astryx-item__swipe-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 4.5rem;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    border: 0;
+    background: var(--astryx-color-background-muted, #e5e5e5);
+    color: var(--astryx-color-text-primary, #171717);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-item__swipe-action[data-variant='accent'] {
+    background: var(--astryx-color-accent, #25252a);
+    color: var(--astryx-color-on-accent, #fff);
+  }
+
+  .astryx-item__swipe-action[data-variant='destructive'] {
+    background: var(--astryx-color-error, #a50c25);
+    color: var(--astryx-color-on-error, #fff);
+  }
+
+  .astryx-item__swipe-action:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .astryx-item {
+    .astryx-item,
+    .astryx-item__surface {
       transition: none;
     }
   }

package/styles/markdown.css

@@ -349,6 +349,18 @@
     white-space: nowrap;
   }
 
+  .astryx-markdown__cite[data-citation-style='number'] {
+    justify-content: center;
+    max-width: none;
+    min-width: var(--astryx-spacing-5, 20px);
+    padding-inline: var(--astryx-spacing-1, 4px);
+    vertical-align: super;
+    border: 0;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background: var(--astryx-citation-number-background, var(--astryx-color-accent-muted, #e5e5e5));
+    font-weight: var(--astryx-citation-number-font-weight, var(--astryx-font-weight-semibold, 600));
+  }
+
   .astryx-markdown__table-wrap {
     max-width: 100%;
     overflow-x: auto;

package/styles/pagination.css

@@ -152,6 +152,36 @@
     opacity: 0.4;
   }
 
+  .astryx-pagination-input {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary);
+    white-space: nowrap;
+  }
+
+  .astryx-pagination-input-field {
+    box-sizing: border-box;
+    width: var(--astryx-size-element-md, 36px);
+    height: var(--astryx-size-element-md, 36px);
+    padding: 0;
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #d4d4d4);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: center;
+  }
+
+  .astryx-pagination--sm .astryx-pagination-input-field {
+    width: var(--astryx-size-element-sm, 28px);
+    height: var(--astryx-size-element-sm, 28px);
+  }
+
+  .astryx-pagination-input-field:disabled {
+    opacity: 0.4;
+  }
+
   .astryx-pagination-size-changer .astryx-selector {
     width: 7.5rem;
   }

package/styles/progress-bar.css

@@ -35,6 +35,55 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
   }
 
+  .astryx-progress-bar-rail {
+    position: relative;
+  }
+
+  .astryx-progress-bar-mark-anchor {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    display: inline-flex;
+    margin-inline-start: calc(var(--_progressbar-mark-width, 2px) / -2);
+    transform: translateY(-50%);
+  }
+
+  .astryx-progress-bar-mark {
+    box-sizing: border-box;
+    display: block;
+    width: var(--_progressbar-mark-width, 2px);
+    height: var(--_progressbar-mark-height, 8px);
+    padding: 0;
+    border: 0;
+    border-radius: 1px;
+    background: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-progress-bar-mark[data-placement='fill'] {
+    background: var(--astryx-color-on-accent, #fff);
+  }
+
+  .astryx-progress-bar[data-variant='success'] .astryx-progress-bar-mark[data-placement='fill'] {
+    background: var(--astryx-color-on-success, #fff);
+  }
+
+  .astryx-progress-bar[data-variant='warning'] .astryx-progress-bar-mark[data-placement='fill'] {
+    background: var(--astryx-color-on-warning, #171717);
+  }
+
+  .astryx-progress-bar[data-variant='error'] .astryx-progress-bar-mark[data-placement='fill'] {
+    background: var(--astryx-color-on-error, #fff);
+  }
+
+  .astryx-progress-bar[data-variant='neutral'] .astryx-progress-bar-mark[data-placement='fill'] {
+    background: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-progress-bar-mark: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-progress-bar-track {
     box-sizing: border-box;
     position: relative;

package/styles/side-nav.css

@@ -17,6 +17,22 @@
     width: var(--astryx-side-nav-collapsed-width, 48px);
   }
 
+  .astryx-side-nav-frame {
+    display: contents;
+  }
+
+  .astryx-side-nav-frame--resizable {
+    position: relative;
+    display: flex;
+    flex: none;
+    height: 100%;
+    overflow: clip;
+  }
+
+  .astryx-side-nav--resizing {
+    transition: none;
+  }
+
   .astryx-side-nav--topbar {
     display: flex;
     flex: 1 1 auto;
@@ -172,10 +188,29 @@
     border-radius: var(--astryx-radius-element, 0.625rem);
   }
 
-  .astryx-side-nav-heading--link:hover {
+  .astryx-side-nav-heading--link:hover,
+  .astryx-side-nav-heading--echo:hover {
     background: var(--astryx-color-overlay-hover);
   }
 
+  .astryx-side-nav-heading--echo {
+    width: 100%;
+    margin: 0 0 var(--astryx-spacing-1, 4px);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-side-nav-heading__end {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+  }
+
   .astryx-side-nav-heading__icon {
     display: inline-flex;
     flex: none;

package/styles/text.css

@@ -132,6 +132,18 @@
     text-decoration: line-through;
   }
 
+  .astryx-text--justify-start {
+    text-align: start;
+  }
+
+  .astryx-text--justify-center {
+    text-align: center;
+  }
+
+  .astryx-text--justify-end {
+    text-align: end;
+  }
+
   .astryx-text--tabular {
     font-variant-numeric: tabular-nums;
   }
@@ -152,6 +164,12 @@
     font-size: var(--astryx-text-xl-size, 1.25rem);
   }
 
+  .astryx-text--truncate-single,
+  .astryx-text--truncate-multi {
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .astryx-text--truncate-single {
     overflow: hidden;
     text-overflow: ellipsis;