@astryx-vue/core 0.2.2 → 0.2.4

package/styles/field.css

@@ -131,6 +131,25 @@
     border-radius: var(--astryx-radius-element, 0.625rem);
   }
 
+  /*
+   * Tooltip keeps the message node for the live region. The attached box
+   * rule above would put that node back in flow and lift a ghost toolbar
+   * control off the row, so the hidden treatment has to win.
+   */
+  .astryx-field-status[data-hidden='true'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    background: transparent;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
   :is(.astryx-field-status, .astryx-text-input)[data-type='error'],
   .astryx-text-input[data-status='error'] {
     --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
@@ -185,6 +204,35 @@
     outline-offset: 1px;
   }
 
+  button.astryx-field-status-glyph {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+  }
+
+  .astryx-field-status-glyph[data-status='error'] {
+    color: var(--astryx-icon-error-foreground, light-dark(#76000c, #ffc4be));
+  }
+
+  .astryx-field-status-glyph[data-status='warning'] {
+    color: var(--astryx-icon-warning-foreground, light-dark(#4b3900, #f8e2a0));
+  }
+
+  .astryx-field-status-glyph[data-status='success'] {
+    color: var(--astryx-icon-success-foreground, light-dark(#00490b, #b7ebc2));
+  }
+
+  .astryx-field-status-glyph:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: 1px;
+  }
+
   @media (pointer: coarse) {
     .astryx-field-info-tip::after,
     .astryx-input-clear-button::after {

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/icon.css

@@ -179,7 +179,7 @@
   }
   /* check */
   .astryx-icon--check {
-    --astryx-icon-artwork: var(--astryx-icon-check, 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='M5 13l4 4L19 7' /%3E%3C/svg%3E"));
+    --astryx-icon-artwork: var(--astryx-icon-check, 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E"));
   }
   /* moreHorizontal */
   .astryx-icon--more-horizontal {
@@ -235,11 +235,59 @@
   }
   /* warning */
   .astryx-icon--warning {
-    --astryx-icon-artwork: var(--astryx-icon-warning, 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='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"));
+    --astryx-icon-artwork: var(--astryx-icon-warning, 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"));
   }
   /* error */
   .astryx-icon--error {
-    --astryx-icon-artwork: var(--astryx-icon-error, 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='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"));
+    --astryx-icon-artwork: var(--astryx-icon-error, 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"));
+  }
+  /* success */
+  .astryx-icon--success {
+    --astryx-icon-artwork: var(--astryx-icon-success, 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"));
+  }
+  /* chevronsLeft */
+  .astryx-icon--chevrons-left {
+    --astryx-icon-artwork: var(--astryx-icon-chevrons-left, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M18 6l-6 6 6 6M11 6l-6 6 6 6%27/%3E%3C/svg%3E"));
+  }
+  /* chevronsRight */
+  .astryx-icon--chevrons-right {
+    --astryx-icon-artwork: var(--astryx-icon-chevrons-right, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 6l6 6-6 6M13 6l6 6-6 6%27/%3E%3C/svg%3E"));
+  }
+  /* success */
+  .astryx-icon--success {
+    --astryx-icon-artwork: var(--astryx-icon-success, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 3a9 9 0 100 18 9 9 0 000-18zm3.53 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0l-2-2a.75.75 0 111.06-1.06l1.47 1.47 3.72-3.72a.75.75 0 011.06 0z%27/%3E%3C/svg%3E"));
+  }
+  /* info */
+  .astryx-icon--info {
+    --astryx-icon-artwork: var(--astryx-icon-info, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27black%27%3E%3Cpath fill-rule=%27evenodd%27 d=%27M12 3a9 9 0 100 18 9 9 0 000-18zm0 4a1 1 0 100 2 1 1 0 000-2zm-.75 3.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5z%27/%3E%3C/svg%3E"));
+  }
+  /* externalLink */
+  .astryx-icon--external-link {
+    --astryx-icon-artwork: var(--astryx-icon-external-link, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14 5h5v5%27/%3E%3Cpath d=%27M19 5l-9 9%27/%3E%3Cpath d=%27M17 13.5V18a1 1 0 01-1 1H6a1 1 0 01-1-1V8a1 1 0 011-1h4.5%27/%3E%3C/svg%3E"));
+  }
+  /* menu */
+  .astryx-icon--menu {
+    --astryx-icon-artwork: var(--astryx-icon-menu, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 7h16M4 12h16M4 17h16%27/%3E%3C/svg%3E"));
+  }
+  /* arrowsUpDown */
+  .astryx-icon--arrows-up-down {
+    --astryx-icon-artwork: var(--astryx-icon-arrows-up-down, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 7l4-4 4 4%27/%3E%3Cpath d=%27M12 3v18%27/%3E%3Cpath d=%27M8 17l4 4 4-4%27/%3E%3C/svg%3E"));
+  }
+  /* eyeSlash */
+  .astryx-icon--eye-slash {
+    --astryx-icon-artwork: var(--astryx-icon-eye-slash, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 3l18 18%27/%3E%3Cpath d=%27M10.5 10.7A2 2 0 0013.3 13.5%27/%3E%3Cpath d=%27M9.9 5.2A10.8 10.8 0 0112 5c5 0 8.5 3.2 10 7-1 2.4-2.8 4.3-5 5.6%27/%3E%3Cpath d=%27M6.1 6.7C4.2 8 2.8 9.8 2 12c1.5 3.8 5 7 10 7 1.4 0 2.7-.3 3.9-.8%27/%3E%3C/svg%3E"));
+  }
+  /* viewColumns */
+  .astryx-icon--view-columns {
+    --astryx-icon-artwork: var(--astryx-icon-view-columns, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%274.5%27 width=%2717%27 height=%2715%27 rx=%271.5%27/%3E%3Cpath d=%27M9 4.5v15M15 4.5v15%27/%3E%3C/svg%3E"));
+  }
+  /* checkDouble */
+  .astryx-icon--check-double {
+    --astryx-icon-artwork: var(--astryx-icon-check-double, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 13l4 4L14 7%27/%3E%3Cpath d=%27M9 13l4 4L21 7%27/%3E%3C/svg%3E"));
+  }
+  /* wrench */
+  .astryx-icon--wrench {
+    --astryx-icon-artwork: var(--astryx-icon-wrench, url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M14.7 6.3a4.5 4.5 0 01-6.2 6.2L4 17l3 3 4.5-4.5a4.5 4.5 0 016.2-6.2l-2.2 2.2-2-2 2.2-2.2z%27/%3E%3C/svg%3E"));
   }
   /* ARTWORK: generated end */
 }

package/styles/input-group.css

@@ -33,12 +33,31 @@
     cursor: default;
   }
 
-  .astryx-input-group-addon {
+  .astryx-input-group.status-error {
+    --astryx-input-focus: var(--astryx-input-error, #e33f4a);
+    border-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-input-group.status-warning {
+    --astryx-input-focus: var(--astryx-input-warning, #a67a00);
+    border-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-input-group.status-success {
+    --astryx-input-focus: var(--astryx-input-success, #198100);
+    border-color: var(--astryx-input-success, #198100);
+  }
+
+  .astryx-input-group-shell {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-input-group-addon,
+  .astryx-input-group-text {
     display: flex;
     flex: none;
     align-items: center;
-    padding-inline: var(--astryx-spacing-2, 8px);
-    background: color-mix(in srgb, var(--astryx-color-text-primary, #171717) 5%, transparent);
     color: var(--astryx-color-text-secondary, #525252);
     font-family: var(--astryx-font-family-body, Figtree, sans-serif);
     font-size: var(--astryx-text-body-size, 0.875rem);
@@ -46,6 +65,16 @@
     white-space: nowrap;
   }
 
+  .astryx-input-group-addon {
+    align-self: stretch;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    background: var(--astryx-color-background-muted, #f1f1f1);
+  }
+
+  .astryx-input-group-addon .astryx-input-group-text {
+    background: transparent;
+  }
+
   .astryx-input-group-addon.before {
     border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border-emphasized, #d4d4d4);
   }

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/multi-selector.css

@@ -96,6 +96,11 @@
     box-shadow: none;
   }
 
+  .astryx-multi-selector-control.is-readonly,
+  .astryx-multi-selector-control.is-readonly .astryx-multi-selector-trigger {
+    cursor: default;
+  }
+
   .astryx-multi-selector-control.status-error {
     --astryx-input-status-color: var(--astryx-input-error, #e33f4a);
   }
@@ -222,7 +227,26 @@
   }
 
   .astryx-multi-selector-search {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
     padding: var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-multi-selector-search-icon,
+  .astryx-multi-selector-search-clear,
+  .astryx-multi-selector-spinner {
+    flex: none;
+  }
+
+  .astryx-multi-selector-search-clear {
+    display: inline-flex;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
   }
 
   .astryx-multi-selector-listbox.is-sheet {
@@ -243,6 +267,8 @@
 
   .astryx-multi-selector-search-input {
     box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
     width: 100%;
     padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px);
     border: 0;

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/radio-indicator.css

@@ -0,0 +1,90 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-radio-indicator {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-style: solid;
+    border-width: var(--astryx-border-width, 1px);
+    border-color: var(--astryx-input-status-color, var(--astryx-color-border-emphasized, #d4d4d4));
+    border-radius: var(--astryx-radius-full, 9999px);
+    color: var(--astryx-color-accent, #262626);
+    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-radio-indicator[data-size='sm'] {
+    width: 20px;
+    height: 20px;
+  }
+
+  .astryx-radio-indicator[data-state='checked'] {
+    color: var(--astryx-color-on-accent, #fff);
+    border-color: var(--astryx-input-status-color, var(--astryx-color-accent, #262626));
+    background: var(--astryx-input-status-color, var(--astryx-color-accent, #262626));
+  }
+
+  .astryx-radio-indicator[data-disabled='true'] {
+    opacity: 0.5;
+    border-color: var(--astryx-color-border, #d4d4d4);
+  }
+
+  .astryx-radio-indicator[data-disabled='true'][data-state='unchecked'] {
+    background: var(--astryx-color-background-muted, #f5f5f5);
+  }
+
+  .astryx-radio-indicator-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background: currentcolor;
+  }
+
+  .astryx-radio-indicator[data-size='sm'] > .astryx-radio-indicator-dot {
+    width: 8px;
+    height: 8px;
+  }
+
+  @media (hover: hover) {
+    .astryx-indicator-scope:hover .astryx-radio-indicator[data-state='unchecked']:not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-color-border-emphasized, #d4d4d4)), var(--astryx-color-tint-hover, black) 20%);
+      background-color: color-mix(in srgb, var(--astryx-color-background-surface, #fff), var(--astryx-color-tint-hover, black) 5%);
+    }
+
+    .astryx-indicator-scope:hover .astryx-radio-indicator[data-state='checked']:not([data-disabled='true']) {
+      border-color: color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+      background-color: color-mix(in srgb, var(--astryx-input-status-color, var(--astryx-color-accent, #262626)), var(--astryx-color-tint-hover, black) 15%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-radio-indicator { transition: none; }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-radio-indicator {
+      border-color: ButtonText;
+      background: Canvas;
+      color: CanvasText;
+      opacity: 1;
+    }
+
+    .astryx-radio-indicator[data-state='checked'] {
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    .astryx-radio-indicator-dot {
+      forced-color-adjust: none;
+      background: HighlightText;
+    }
+  }
+}