@astryx-vue/core 0.3.0 → 0.4.0

package/styles/bottom-sheet.css

@@ -217,7 +217,7 @@
     justify-content: center;
     height: var(--astryx-spacing-6, 24px);
     background-image: linear-gradient(to bottom, var(--astryx-bottom-sheet-background, var(--astryx-color-background-surface, #fff)) 60%, transparent);
-    touch-action: none;
+    touch-action: pinch-zoom;
     cursor: grab;
   }
 
@@ -239,7 +239,7 @@
     overflow: auto;
     overscroll-behavior: contain;
     background: var(--astryx-bottom-sheet-background, var(--astryx-color-background-surface, #fff));
-    touch-action: pan-y;
+    touch-action: pan-y pinch-zoom;
     outline-offset: -2px;
   }
 
@@ -253,16 +253,84 @@
   }
 
   /*
-   * The content box is a container: it carries the padding and preserves the
-   * body's block formatting and its percentage-height basis. The inset is the
-   * `padding` prop, then the theme's bottom-sheet padding, then `--spacing-4`.
+   * The content box is a container. It keeps the body's block formatting and
+   * its percentage-height basis, and it publishes the inset it applies.
+   * Omitted `padding` reads the theme's bottom-sheet padding, then spacing 4.
+   * An explicit step replaces that chain on every edge. Bleed children read
+   * the same variables they sit inside.
    */
   .astryx-bottom-sheet__content {
     box-sizing: border-box;
     display: flow-root;
     height: 100%;
     min-height: min-content;
-    padding: var(--_sheet-padding, var(--astryx-bottom-sheet-padding, var(--astryx-spacing-4, 1rem)));
+    --_sheet-pad-inline-start: var(--astryx-bottom-sheet-padding-inline-start, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding, var(--astryx-spacing-4, 1rem))));
+    --_sheet-pad-inline-end: var(--astryx-bottom-sheet-padding-inline-end, var(--astryx-bottom-sheet-padding-inline, var(--astryx-bottom-sheet-padding, var(--astryx-spacing-4, 1rem))));
+    --_sheet-pad-block-start: var(--astryx-bottom-sheet-padding-block-start, var(--astryx-bottom-sheet-padding, var(--astryx-spacing-4, 1rem)));
+    --_sheet-pad-block-end: var(--astryx-bottom-sheet-padding-block-end, var(--astryx-bottom-sheet-padding, var(--astryx-spacing-4, 1rem)));
+    --container-padding-inline-start: var(--_sheet-pad-inline-start);
+    --container-padding-inline-end: var(--_sheet-pad-inline-end);
+    --container-padding-block-start: var(--_sheet-pad-block-start);
+    --container-padding-block-end: var(--_sheet-pad-block-end);
+    padding-inline: var(--container-padding-inline-start) var(--container-padding-inline-end);
+    padding-block: var(--container-padding-block-start) var(--container-padding-block-end);
+    --layout-padding-own-outer-x: initial;
+    --layout-padding-own-outer-y: initial;
+    --layout-padding-outer-x: var(--_sheet-pad-inline-start);
+    --layout-padding-outer-y: var(--_sheet-pad-block-start);
+    --layout-padding-inner-x: var(--_sheet-pad-inline-start);
+    --layout-padding-inner-y: var(--_sheet-pad-block-start);
+  }
+
+  .astryx-bottom-sheet__content[data-padding] {
+    --_sheet-pad-inline-start: var(--_sheet-padding-step);
+    --_sheet-pad-inline-end: var(--_sheet-padding-step);
+    --_sheet-pad-block-start: var(--_sheet-padding-step);
+    --_sheet-pad-block-end: var(--_sheet-padding-step);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='0'] {
+    --_sheet-padding-step: var(--astryx-spacing-0, 0px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='0.5'] {
+    --_sheet-padding-step: var(--astryx-spacing-0-5, 2px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='1'] {
+    --_sheet-padding-step: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='1.5'] {
+    --_sheet-padding-step: var(--astryx-spacing-1-5, 6px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='2'] {
+    --_sheet-padding-step: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='3'] {
+    --_sheet-padding-step: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='4'] {
+    --_sheet-padding-step: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='5'] {
+    --_sheet-padding-step: var(--astryx-spacing-5, 20px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='6'] {
+    --_sheet-padding-step: var(--astryx-spacing-6, 24px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='8'] {
+    --_sheet-padding-step: var(--astryx-spacing-8, 32px);
+  }
+
+  .astryx-bottom-sheet__content[data-padding='10'] {
+    --_sheet-padding-step: var(--astryx-spacing-10, 40px);
   }
 
   /*

package/styles/breadcrumbs.css

@@ -33,6 +33,11 @@
     user-select: none;
   }
 
+  [dir='rtl'] .astryx-breadcrumb-item__slash {
+    display: inline-block;
+    transform: scaleX(-1);
+  }
+
   .astryx-breadcrumb-item__content.astryx-breadcrumb-item__content {
     display: inline-flex;
     align-items: center;
@@ -54,16 +59,25 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
   }
 
-  .astryx-breadcrumb-item__content.astryx-breadcrumb-item__content:hover:not(:disabled, [aria-disabled='true']) {
+  .astryx-breadcrumb-item__content.astryx-breadcrumb-item__content:hover:not(:disabled, [aria-disabled='true'], .astryx-breadcrumb-item__content--current) {
     text-decoration: underline;
   }
 
+  .astryx-breadcrumb-item__content.astryx-breadcrumb-item__content:focus-visible {
+    outline: var(--astryx-focus-outline-width) var(--astryx-focus-outline-style) var(--astryx-focus-outline-color);
+    outline-offset: var(--astryx-focus-outline-offset);
+  }
+
   .astryx-breadcrumb-item__content--current.astryx-breadcrumb-item__content--current {
     color: var(--astryx-color-text-primary, #171717);
-    font-weight: 600;
+    font-weight: var(--astryx-font-weight-semibold, 600);
     cursor: default;
   }
 
+  .astryx-breadcrumb-item--variant-supporting .astryx-breadcrumb-item__content--current.astryx-breadcrumb-item__content--current {
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
   .astryx-breadcrumb-item__content--current.astryx-breadcrumb-item__content--current:hover {
     text-decoration: none;
   }

package/styles/button-group.css

@@ -28,7 +28,9 @@
     box-shadow: none;
   }
 
-  .astryx-button-group > .astryx-button:active {
+  /* 组里的按钮不单独缩放，权重要比按钮自己的 :active / 按压更高。 */
+  .astryx-button-group > .astryx-button:not(:disabled):not([aria-disabled='true']):active,
+  .astryx-button-group > .astryx-button:not(:disabled):not([aria-disabled='true'])[data-astryx-press='on'] {
     transform: none;
   }
 

package/styles/button.css

@@ -42,6 +42,11 @@
   .astryx-button {
     --button-focus-offset: 3px;
     --button-icon-only-aspect: 1 / 1;
+    /* 悬停叠层和描边都先落到这两组内部变量，变体块只改内部变量。 */
+    --_button-hover-overlay: var(--astryx-button-hover-overlay, #0000000d);
+    --_button-border-width: var(--astryx-button-border-width, 0);
+    --_button-border-style: var(--astryx-button-border-style, solid);
+    --_button-border-color: var(--astryx-button-border-color, transparent);
 
     box-sizing: border-box;
     position: relative;
@@ -50,9 +55,13 @@
     justify-content: center;
     gap: var(--astryx-spacing-2, 8px);
     width: var(--astryx-button-width, auto);
-    padding-block: var(--astryx-spacing-2, 8px);
-    padding-inline: var(--astryx-spacing-3, 12px);
-    border: 0;
+    min-width: 0;
+    max-width: 100%;
+    padding-block: var(--astryx-button-padding-block, var(--astryx-spacing-2, 8px));
+    padding-inline: var(--astryx-button-padding-inline, var(--astryx-spacing-3, 12px));
+    border-width: var(--_button-border-width);
+    border-style: var(--_button-border-style);
+    border-color: var(--_button-border-color);
     border-radius: var(--astryx-button-radius, var(--astryx-radius-element, 0.625rem));
     outline: 0;
     color: inherit;
@@ -91,21 +100,40 @@
   }
 
   .astryx-button[data-variant='primary'] {
+    --_button-border-width: var(--astryx-button-primary-border-width, var(--astryx-button-border-width, 0));
+    --_button-border-style: var(--astryx-button-primary-border-style, var(--astryx-button-border-style, solid));
+    --_button-border-color: var(--astryx-button-primary-border-color, var(--astryx-button-border-color, transparent));
+
     color: var(--astryx-button-primary-foreground, #fff);
     background-color: var(--astryx-button-primary-background, #262626);
   }
 
+  /* 主题的次要按钮可以带描边、带自己的悬停叠层；次要样式的选择器类组件复用这几条。 */
   .astryx-button[data-variant='secondary'] {
+    --_button-border-width: var(--astryx-button-secondary-border-width, var(--astryx-button-border-width, 0));
+    --_button-border-style: var(--astryx-button-secondary-border-style, var(--astryx-button-border-style, solid));
+    --_button-border-color: var(--astryx-button-secondary-border-color, var(--astryx-button-border-color, transparent));
+    --_button-hover-overlay: var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d));
+
     color: var(--astryx-button-secondary-foreground, #171717);
     background-color: var(--astryx-button-secondary-background, #0000000f);
   }
 
   .astryx-button[data-variant='ghost'] {
+    --_button-border-width: var(--astryx-button-ghost-border-width, var(--astryx-button-border-width, 0));
+    --_button-border-style: var(--astryx-button-ghost-border-style, var(--astryx-button-border-style, solid));
+    --_button-border-color: var(--astryx-button-ghost-border-color, var(--astryx-button-border-color, transparent));
+    --_button-hover-overlay: var(--astryx-button-ghost-hover-overlay, var(--astryx-button-hover-overlay, #0000000d));
+
     color: var(--astryx-button-ghost-foreground, #171717);
     background-color: var(--astryx-button-ghost-background, transparent);
   }
 
   .astryx-button[data-variant='destructive'] {
+    --_button-border-width: var(--astryx-button-destructive-border-width, var(--astryx-button-border-width, 0));
+    --_button-border-style: var(--astryx-button-destructive-border-style, var(--astryx-button-border-style, solid));
+    --_button-border-color: var(--astryx-button-destructive-border-color, var(--astryx-button-border-color, transparent));
+
     color: var(--astryx-button-destructive-foreground, #a50c25);
     background-color: var(--astryx-button-destructive-background, #facecb);
   }
@@ -113,20 +141,32 @@
   @media (hover: hover) {
     .astryx-button:not(:disabled):not([aria-disabled='true']):hover {
       background-image: linear-gradient(
-        var(--astryx-button-hover-overlay, #0000000d),
-        var(--astryx-button-hover-overlay, #0000000d)
+        var(--_button-hover-overlay),
+        var(--_button-hover-overlay)
+      );
+    }
+  }
+
+  /* 鼠标按下才用 :active。粗指针落手就匹配 :active，滚动时还可能亮着，改看按压模型。 */
+  @media not all and (pointer: coarse) {
+    .astryx-button:not(:disabled):not([aria-disabled='true']):active {
+      background-image: linear-gradient(
+        var(--astryx-button-pressed-overlay, #0000001a),
+        var(--astryx-button-pressed-overlay, #0000001a)
       );
+      transform: scale(0.98);
     }
   }
 
-  .astryx-button:not(:disabled):not([aria-disabled='true']):active {
-    background-image: linear-gradient(
-      var(--astryx-button-pressed-overlay, #0000001a),
-      var(--astryx-button-pressed-overlay, #0000001a)
-    );
+  /* 和悬停、:active 同一权重，写在后面，按压盖过悬停。底色留给变体，按压只换上层图片。 */
+  .astryx-button:not(:disabled):not([aria-disabled='true'])[data-astryx-press='on'] {
     transform: scale(0.98);
   }
 
+  .astryx-button:not(:disabled):not([aria-disabled='true'])[data-astryx-press] {
+    background-image: var(--_press-paint-image);
+  }
+
   .astryx-button:focus-visible {
     outline: 2px solid var(--astryx-button-focus, currentcolor);
     outline-offset: var(--button-focus-offset);
@@ -140,7 +180,7 @@
   .astryx-button[aria-disabled='true'] {
     opacity: 0.5;
     background-image: none;
-    cursor: not-allowed;
+    cursor: default;
     transform: none;
   }
 
@@ -211,6 +251,8 @@
 
   .astryx-button[data-icon-only='true'] {
     aspect-ratio: var(--button-icon-only-aspect);
+    flex-shrink: 0;
+    max-width: none;
     padding: 0;
   }
 

package/styles/card.css

@@ -13,7 +13,7 @@
      */
     min-width: 0;
     overflow: clip;
-    --_card-radius: var(--astryx-radius-container, 0.75rem);
+    --_card-radius: var(--astryx-card-radius, var(--astryx-radius-container, 0.75rem));
     --_card-elevation: 0 0 transparent;
     --_card-ring: 0 0 transparent;
     --_card-padding-inline-start: var(--astryx-card-padding-inline-start, var(--astryx-card-padding-inline, var(--astryx-card-padding, var(--astryx-spacing-4, 16px))));

package/styles/chat.css

@@ -469,19 +469,19 @@
   }
 
   .astryx-chat-system-message__content {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--astryx-spacing-1-5, 6px);
+    display: inline-block;
     max-width: 100%;
     min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-wrap: anywhere;
+    text-align: center;
+    white-space: normal;
   }
 
   .astryx-chat-system-message__icon {
     display: inline-flex;
     flex-shrink: 0;
+    margin-inline-end: var(--astryx-spacing-1-5, 6px);
+    vertical-align: middle;
   }
 
   .astryx-chat-system-message[data-variant='divider'] {
@@ -1074,6 +1074,16 @@
     border-radius: var(--astryx-button-radius, var(--astryx-radius-full, 9999px));
   }
 
+  /* 没有可发送内容时不要留着实心强调色。停用只盖住发送，停止按钮不带 disabled。 */
+  .astryx-chat-send:disabled,
+  .astryx-chat-send[aria-disabled='true'] {
+    color: var(--astryx-color-text-secondary);
+    background-color: var(--astryx-color-neutral);
+    background-image: none;
+    opacity: 1;
+    cursor: default;
+  }
+
   .astryx-chat-drawer {
     position: relative;
     z-index: 1;

package/styles/checkbox-input.css

@@ -57,6 +57,16 @@
 
   @keyframes astryx-checkbox-spin { to { transform: rotate(360deg); } }
 
+  @media not all and (pointer: coarse) {
+    .astryx-checkbox-input:not([data-blocked='true']) .astryx-checkbox-row:active .astryx-checkbox-indicator {
+      background-image: linear-gradient(var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)), var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19)));
+    }
+  }
+
+  .astryx-checkbox-row[data-astryx-press] .astryx-checkbox-indicator {
+    background-image: var(--_press-paint-image);
+  }
+
   @media (pointer: coarse) {
     .astryx-checkbox-native {
       inset: 50% auto auto 50%;

package/styles/clickable-card.css

@@ -18,8 +18,15 @@
     transition: background-color var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
-  .astryx-clickable-card:active::after {
-    background-color: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  @media not all and (pointer: coarse) {
+    .astryx-clickable-card:active::after {
+      background-color: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+    }
+  }
+
+  .astryx-clickable-card[data-astryx-press]::after {
+    background-color: transparent;
+    background-image: var(--_press-paint-image);
   }
 
   @media (hover: hover) {
@@ -38,7 +45,7 @@
   }
 
   .astryx-clickable-card[data-disabled='true'] {
-    cursor: not-allowed;
+    cursor: default;
     opacity: 0.5;
   }
 

package/styles/collapsible.css

@@ -35,11 +35,18 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  .astryx-collapsible-trigger:not([aria-disabled='true']):active {
-    background-image: linear-gradient(
-      var(--astryx-collapsible-pressed-overlay, #0000001a),
-      var(--astryx-collapsible-pressed-overlay, #0000001a)
-    );
+  @media not all and (pointer: coarse) {
+    .astryx-collapsible-trigger:not([aria-disabled='true']):active {
+      background-image: linear-gradient(
+        var(--astryx-collapsible-pressed-overlay, #0000001a),
+        var(--astryx-collapsible-pressed-overlay, #0000001a)
+      );
+    }
+  }
+
+  .astryx-collapsible-trigger[data-astryx-press='on'],
+  .astryx-collapsible-trigger[data-astryx-press='fading'] {
+    background-image: var(--_press-paint-image);
   }
 
   .astryx-collapsible-trigger:focus-visible {

package/styles/command-palette.css

@@ -31,13 +31,7 @@
 
   .astryx-command-palette-search {
     flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--astryx-color-text-secondary, #525252);
-    mask-image: 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='11' cy='11' r='6'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: contain;
+    color: var(--astryx-color-text-secondary, #525252);
   }
 
   .astryx-command-palette-field {
@@ -59,8 +53,10 @@
   }
 
   @media (pointer: coarse) {
-    .astryx-command-palette-field {
-      font-size: max(1rem, var(--astryx-text-body-size, 0.875rem));
+    @supports (-webkit-touch-callout: none) {
+      .astryx-command-palette-field {
+        font-size: max(1rem, var(--astryx-text-body-size, 0.875rem));
+      }
     }
   }
 
@@ -128,10 +124,6 @@
     }
   }
 
-  .astryx-command-palette-item:active:not([data-disabled]) {
-    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
-  }
-
   .astryx-command-palette-item[data-highlighted='true'] {
     background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
   }
@@ -140,9 +132,32 @@
     background: var(--astryx-color-accent-muted, light-dark(#0082fb33, #0082fb3f));
   }
 
+  .astryx-command-palette-item:active:not([data-disabled]),
+  .astryx-command-palette-item[data-astryx-press='on']:not([data-disabled]) {
+    background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+  }
+
+  @media (pointer: coarse) {
+    .astryx-command-palette-item:active:not([data-disabled]) {
+      background: transparent;
+    }
+
+    .astryx-command-palette-item[data-highlighted='true']:active:not([data-disabled]) {
+      background: var(--astryx-color-overlay-hover, light-dark(#0536590c, #ffffff0c));
+    }
+
+    .astryx-command-palette-item[data-selected='true']:active:not([data-disabled]) {
+      background: var(--astryx-color-accent-muted, light-dark(#0082fb33, #0082fb3f));
+    }
+
+    .astryx-command-palette-item[data-astryx-press='on']:not([data-disabled]) {
+      background: var(--astryx-color-overlay-pressed, light-dark(#05365919, #ffffff19));
+    }
+  }
+
   .astryx-command-palette-item[data-disabled='true'] {
     opacity: 0.5;
-    cursor: not-allowed;
+    cursor: default;
   }
 
   .astryx-command-palette-empty {

package/styles/complex-selector.css

@@ -33,8 +33,10 @@
   }
 
   @media (pointer: coarse) {
-    .astryx-complex-selector {
-      font-size: max(1rem, var(--astryx-text-label-size, 0.875rem));
+    @supports (-webkit-touch-callout: none) {
+      .astryx-complex-selector {
+        font-size: max(1rem, var(--astryx-text-label-size, 0.875rem));
+      }
     }
   }
 
@@ -62,14 +64,29 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
-  .astryx-complex-selector[data-status='error'] {
+  .astryx-complex-selector[data-variant='input'][data-status='error'] {
     border-color: var(--astryx-input-error, #e33f4a);
   }
 
-  .astryx-complex-selector[data-status='warning'] {
+  .astryx-complex-selector[data-variant='input'][data-status='warning'] {
     border-color: var(--astryx-input-warning, #a67a00);
   }
 
+  .astryx-complex-selector[data-variant='secondary'] {
+    border-width: var(--astryx-button-secondary-border-width, 0);
+    border-style: var(--astryx-button-secondary-border-style, solid);
+    border-color: var(--astryx-button-secondary-border-color, transparent);
+    background-color: var(--astryx-button-secondary-background, #0000000f);
+    color: var(--astryx-button-secondary-foreground, #171717);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  @media (hover: hover) {
+    .astryx-complex-selector[data-variant='secondary']:not(:disabled):hover {
+      background-image: linear-gradient(var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d)), var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d)));
+    }
+  }
+
   .astryx-complex-selector:focus-visible {
     outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, var(--astryx-color-text-primary, #171717));
     outline-offset: var(--astryx-focus-outline-offset, 2px);
@@ -77,7 +94,7 @@
 
   .astryx-complex-selector:disabled {
     opacity: 0.5;
-    cursor: not-allowed;
+    cursor: default;
   }
 
   .astryx-complex-selector-start {

package/styles/context-menu.css

@@ -119,8 +119,8 @@
     font-size: var(--astryx-text-label-size, 0.875rem);
     line-height: var(--astryx-text-label-leading, 1.25);
     text-align: start;
-    /* Scroll ownership follows the menu's own overflow; see data-overflow. */
-    touch-action: none;
+    /* A menu that fits keeps the pinch gesture. Scrolling is opted in below. */
+    touch-action: pinch-zoom;
     -webkit-user-select: none;
     user-select: none;
     -webkit-touch-callout: none;
@@ -143,7 +143,7 @@
    * menu that does not scroll keeps the gesture for the press model.
    */
   .astryx-context-menu[data-overflow='true'] {
-    touch-action: pan-y;
+    touch-action: pan-y pinch-zoom;
   }
 
   .astryx-context-menu[data-placement='below'] {

package/styles/date-input.css

@@ -22,7 +22,7 @@
     width: 100%;
     min-width: 180px;
     height: var(--astryx-input-height-md, 32px);
-    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-input-padding-block, var(--astryx-spacing-1, 4px)) var(--astryx-input-padding-inline, var(--astryx-spacing-2, 8px));
     border: var(--astryx-border-width, 1px) solid var(--astryx-input-status-color, var(--astryx-input-border, #d4d4d4));
     border-radius: var(--astryx-radius-element, 0.625rem);
     background: var(--astryx-input-background, #fff);
@@ -171,6 +171,116 @@
       transition: none;
     }
   }
+
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+      .astryx-date-input-field {
+        font-size: max(1rem, var(--astryx-text-body-size, 14px));
+      }
+    }
+  }
+
+  .astryx-date-touch,
+  .astryx-time-touch,
+  .astryx-date-time-touch-time {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-3, 12px);
+    padding: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-date-touch-header,
+  .astryx-date-touch-nav,
+  .astryx-date-time-touch-tabs {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-date-touch-header {
+    justify-content: space-between;
+  }
+
+  .astryx-date-touch-title,
+  .astryx-date-touch-reset,
+  .astryx-date-touch-arrow,
+  .astryx-date-touch-save,
+  .astryx-date-touch-segment,
+  .astryx-date-time-touch-tabs > button,
+  .astryx-picker-wheel-option {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-date-touch-title,
+  .astryx-date-time-touch-tabs > button[aria-selected='true'] {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+  }
+
+  .astryx-date-touch-arrow,
+  .astryx-date-touch-reset,
+  .astryx-date-touch-save,
+  .astryx-date-touch-segment,
+  .astryx-picker-wheel-option {
+    min-height: var(--astryx-size-touch-target, 44px);
+  }
+
+  .astryx-date-touch-save:disabled,
+  .astryx-date-touch-segment:disabled,
+  .astryx-picker-wheel-option:disabled {
+    cursor: default;
+  }
+
+  .astryx-date-touch-wheels,
+  .astryx-time-wheels {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-picker-wheel {
+    display: flex;
+    flex-direction: column;
+    max-height: 14rem;
+    overflow: auto;
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, #e5e5e5);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+  }
+
+  .astryx-picker-wheel-option[aria-selected='true'] {
+    background: var(--astryx-color-background-selected, #eef2ff);
+  }
+
+  .astryx-date-touch-save {
+    width: 100%;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-color-background-neutral-bold, #171717);
+    color: var(--astryx-color-text-on-neutral-bold, #fff);
+  }
+
+  .astryx-date-touch-segment {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    min-width: 0;
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    border: var(--astryx-border-width, 1px) solid var(--astryx-input-border, #d4d4d4);
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-input-background, #fff);
+    text-align: start;
+  }
+
+  .astryx-date-touch-segment [data-placeholder] {
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-date-time-touch-tabs {
+    padding: var(--astryx-spacing-3, 12px) var(--astryx-spacing-3, 12px) 0;
+  }
 }
 
 /* Unlayered: a page-level :focus-visible ring must not draw a second box