@astryx-vue/core 0.2.2 → 0.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -92,6 +92,10 @@
       "types": "./dist/Icon/plugin.d.ts",
       "import": "./dist/Icon/plugin.js"
     },
+    "./Indicator": {
+      "types": "./dist/Indicator/index.d.ts",
+      "import": "./dist/Indicator/index.js"
+    },
     "./Layout": {
       "types": "./dist/Layout/index.d.ts",
       "import": "./dist/Layout/index.js"
@@ -408,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",
@@ -452,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/calendar.css

@@ -79,6 +79,7 @@
     color: var(--astryx-color-text-secondary, #525252);
     font-size: var(--astryx-text-supporting-size, 0.75rem);
     font-weight: 400;
+    text-align: center;
   }
 
   .astryx-calendar-grid {
@@ -114,15 +115,49 @@
     box-shadow: inset 0 0 0 1px var(--astryx-color-border-emphasized, #d4d4d4);
   }
 
-  .astryx-calendar[data-months='2'] {
+  .astryx-calendar-months {
     display: flex;
+    flex-wrap: wrap;
     gap: var(--astryx-spacing-4, 16px);
   }
 
-  .astryx-calendar[data-months='2'] .astryx-calendar-header {
+  .astryx-calendar-grid[data-week-numbers] .astryx-calendar-weekdays,
+  .astryx-calendar-grid[data-week-numbers] .astryx-calendar-row {
+    grid-template-columns: var(--astryx-spacing-6, 24px) repeat(7, var(--astryx-input-height-md, 32px));
+  }
+
+  .astryx-calendar-week-number {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+  }
+
+  .astryx-calendar-gridcell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .astryx-calendar-cell.is-in-range.is-round-start {
+    border-start-start-radius: var(--astryx-radius-full, 9999px);
+    border-end-start-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-calendar-cell.is-in-range.is-round-end {
+    border-start-end-radius: var(--astryx-radius-full, 9999px);
+    border-end-end-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-calendar-cell:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentColor);
+    outline-offset: 1px;
+  }
+
+  .astryx-calendar-nav-button:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentColor);
+    outline-offset: 1px;
   }
 
   .astryx-calendar-cell.is-in-range {

package/styles/check-indicator.css

@@ -0,0 +1,17 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-check-indicator {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    color: var(--astryx-icon-accent-foreground, var(--astryx-color-accent, #262626));
+  }
+
+  .astryx-check-indicator[data-disabled='true'] {
+    color: var(--astryx-icon-disabled-foreground, var(--astryx-color-icon-disabled, #a3a3a3));
+  }
+}

package/styles/checkbox-indicator.css

@@ -9,11 +9,15 @@
     justify-content: center;
     width: 24px;
     height: 24px;
-    border: 1px solid var(--astryx-checkbox-border, #d4d4d4);
-    border-radius: var(--astryx-radius-inner, 6px);
-    color: var(--astryx-checkbox-accent, #262626);
-    background: var(--astryx-checkbox-background, #fff);
-    transition: background-color 130ms ease-out, border-color 130ms ease-out;
+    border-style: solid;
+    border-width: var(--astryx-border-width, 1px);
+    border-color: var(--astryx-checkbox-border, var(--astryx-color-border-emphasized, #d4d4d4));
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    color: var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626));
+    background: var(--astryx-checkbox-background, var(--astryx-color-background-surface, #fff));
+    transition-property: background-color, border-color;
+    transition-duration: var(--astryx-duration-fast, 125ms);
+    transition-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
   .astryx-checkbox-indicator[data-size='sm'] {
@@ -22,17 +26,18 @@
   }
 
   .astryx-checkbox-indicator:not([data-state='unchecked']) {
-    color: var(--astryx-checkbox-on-accent, #fff);
-    background: var(--astryx-checkbox-accent, #262626);
-    border-color: var(--astryx-checkbox-accent, #262626);
+    color: var(--astryx-checkbox-on-accent, var(--astryx-color-on-accent, #fff));
+    background: var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626));
+    border-color: var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626));
   }
 
   .astryx-checkbox-indicator[data-disabled='true'] {
     opacity: 0.5;
+    border-color: var(--astryx-color-border, var(--astryx-checkbox-border, #d4d4d4));
   }
 
   .astryx-checkbox-indicator[data-disabled='true'][data-state='unchecked'] {
-    background: var(--astryx-checkbox-disabled-background, #f5f5f5);
+    background: var(--astryx-checkbox-disabled-background, var(--astryx-color-background-muted, #f5f5f5));
   }
 
   .astryx-checkbox-indicator-check {
@@ -45,7 +50,7 @@
     display: none;
     width: 12px;
     height: 2px;
-    border-radius: 9999px;
+    border-radius: var(--astryx-radius-full, 9999px);
     background: currentcolor;
   }
 
@@ -63,6 +68,18 @@
     display: block;
   }
 
+  @media (hover: hover) {
+    .astryx-indicator-scope:hover .astryx-checkbox-indicator[data-state='unchecked']:not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-checkbox-border, var(--astryx-color-border-emphasized, #d4d4d4)), var(--astryx-color-tint-hover, black) 20%);
+      background-color: color-mix(in srgb, var(--astryx-checkbox-background, var(--astryx-color-background-surface, #fff)), var(--astryx-color-tint-hover, black) 5%);
+    }
+
+    .astryx-indicator-scope:hover .astryx-checkbox-indicator:not([data-state='unchecked']):not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+      background-color: color-mix(in srgb, var(--astryx-checkbox-accent, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-checkbox-indicator { transition: none; }
   }
@@ -74,10 +91,12 @@
       border-color: CanvasText;
       background: Canvas;
     }
+
     .astryx-checkbox-indicator-dash {
       forced-color-adjust: none;
       background: CanvasText;
     }
+
     .astryx-checkbox-indicator[data-disabled='true'] {
       color: GrayText;
       border-color: GrayText;

package/styles/checkbox-input.css

@@ -45,17 +45,6 @@
   .astryx-checkbox-input[data-blocked='true'] .astryx-checkbox-native,
   .astryx-checkbox-input[data-blocked='true'] .astryx-field-label { cursor: default; }
 
-  @media (hover: hover) {
-    .astryx-checkbox-input:not([data-blocked='true']) .astryx-checkbox-row:hover .astryx-checkbox-indicator {
-      background: color-mix(in srgb, var(--astryx-checkbox-background, #fff), var(--astryx-checkbox-accent, #262626) 5%);
-      border-color: color-mix(in srgb, var(--astryx-checkbox-border, #d4d4d4), var(--astryx-checkbox-accent, #262626) 20%);
-    }
-    .astryx-checkbox-input:not([data-blocked='true']) .astryx-checkbox-row:hover .astryx-checkbox-indicator:not([data-state='unchecked']) {
-      background: color-mix(in srgb, var(--astryx-checkbox-accent, #262626), var(--astryx-checkbox-on-accent, #fff) 15%);
-      border-color: transparent;
-    }
-  }
-
   .astryx-checkbox-spinner {
     box-sizing: border-box;
     width: 12px;

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/date-input.css

@@ -118,6 +118,54 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
+  .astryx-date-input-native {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .astryx-date-input-native .astryx-date-input-field {
+    color: transparent;
+    caret-color: transparent;
+  }
+
+  .astryx-date-input-native .astryx-date-input-field::-webkit-calendar-picker-indicator {
+    opacity: 0;
+  }
+
+  .astryx-date-input-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .astryx-date-input-overlay[data-placeholder] {
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-date-input-alert {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .astryx-date-input-spinner {
+    flex: none;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-date-input-wrapper {
       transition: none;

package/styles/dropdown-menu.css

@@ -194,6 +194,165 @@
     margin-block: var(--astryx-spacing-1, 4px);
   }
 
+  /*
+   * Header and footer sit beside the menu, in the same panel. The frame keeps
+   * the height cap; the menu between them scrolls.
+   */
+  .astryx-dropdown-menu-popover {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: var(--astryx-dropdown-menu-z-index, 1000);
+    display: flex;
+    flex-direction: column;
+    --_dropdown-menu-radius: var(--astryx-dropdown-menu-radius, var(--astryx-radius-container, 0.75rem));
+    --_dropdown-menu-padding: var(--astryx-dropdown-menu-padding, var(--astryx-spacing-1, 4px));
+    max-block-size: var(--_dropdown-menu-max-block, min(300px, calc(100dvh - 16px)));
+    overflow: hidden;
+    border-radius: var(--_dropdown-menu-radius);
+    background: var(--astryx-dropdown-menu-background, #fff);
+    box-shadow: var(
+      --astryx-dropdown-menu-shadow,
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))
+    );
+    color: var(--astryx-dropdown-menu-foreground, var(--astryx-color-text-primary, light-dark(#171717, #fafafa)));
+    font-family: var(--astryx-font-family-body, Figtree, sans-serif);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+  }
+
+  .astryx-dropdown-menu.is-in-frame {
+    position: static;
+    z-index: auto;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    max-block-size: none;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .astryx-dropdown-menu[data-region-focus='true'] {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: calc(-1 * var(--astryx-focus-outline-offset, 3px));
+  }
+
+  .astryx-dropdown-menu-region {
+    flex: none;
+    padding: var(--astryx-spacing-1, 4px);
+  }
+
+  /* Wrappers add no box, so the menu's own gap still runs between rows. */
+  .astryx-dropdown-menu-tree {
+    display: contents;
+  }
+
+  .astryx-dropdown-menu-tree[hidden] {
+    display: none;
+  }
+
+  .astryx-dropdown-menu-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+  }
+
+  .astryx-dropdown-submenu {
+    min-width: min(160px, calc(100vw - 16px));
+  }
+
+  .astryx-dropdown-menu-drill {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-0-5, 2px);
+    min-width: 0;
+    outline: none;
+  }
+
+  .astryx-dropdown-menu-drill[hidden] {
+    display: none;
+  }
+
+  /*
+   * The selection mark is decorative. On a coarse pointer it moves to the
+   * inline end, where a touch toggle is usually drawn.
+   */
+  .astryx-dropdown-menu-mark {
+    display: inline-flex;
+    flex: none;
+    pointer-events: none;
+  }
+
+  .astryx-dropdown-menu-radio {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--astryx-input-border, #d4d4d4);
+    border-radius: var(--astryx-radio-radius, 999px);
+    background: var(--astryx-input-background, #fff);
+    transition:
+      border-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1)),
+      background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-dropdown-menu-radio[data-size='sm'] {
+    width: 20px;
+    height: 20px;
+  }
+
+  .astryx-dropdown-menu-radio[data-checked='checked'] {
+    border-color: var(--astryx-input-focus, #262626);
+    background: var(--astryx-input-focus, #262626);
+  }
+
+  .astryx-dropdown-menu-radio-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  .astryx-dropdown-menu-radio[data-size='sm'] .astryx-dropdown-menu-radio-dot {
+    width: 6px;
+    height: 6px;
+  }
+
+  .astryx-dropdown-menu-radio[data-checked='checked'] .astryx-dropdown-menu-radio-dot {
+    background: var(--astryx-input-background, #fff);
+  }
+
+  .astryx-dropdown-menu-radio[data-disabled='true'] {
+    opacity: 0.5;
+  }
+
+  @media (pointer: coarse) {
+    .astryx-dropdown-menu-mark {
+      order: 1;
+      margin-inline-start: auto;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-dropdown-menu-radio {
+      border-color: ButtonText;
+      background: Canvas;
+    }
+
+    .astryx-dropdown-menu-radio[data-checked='checked'] {
+      background: Highlight;
+    }
+
+    .astryx-dropdown-menu-radio[data-checked='checked'] .astryx-dropdown-menu-radio-dot {
+      background: Canvas;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-dropdown-menu-enter-active,
     .astryx-dropdown-menu-leave-active {
@@ -207,5 +366,9 @@
       opacity: 1;
       transform: none;
     }
+
+    .astryx-dropdown-menu-radio {
+      transition: none;
+    }
   }
 }