@astryx-vue/core 0.2.6 → 0.4.0

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

package/styles/dialog-header.css

@@ -47,8 +47,11 @@
   }
 
   /* 关闭按钮的视觉内边距由按钮自身承担，此处抵消以对齐边缘 */
-  .astryx-dialog-header__actions--compensated {
+  .astryx-dialog-header__actions--compensate-block {
     margin-block: calc(-1 * var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-dialog-header__actions--compensate-inline {
     margin-inline-end: calc(-1 * var(--astryx-spacing-2, 8px));
   }
 }

package/styles/dialog.css

@@ -85,6 +85,13 @@
     padding-inline-end: max(var(--astryx-spacing-4, 1rem), env(safe-area-inset-right, 0px));
   }
 
+  /*
+   * 浮层挂载点。它自己不占地方，里面的浮层都是 fixed 定位，不参与对话框的排版。
+   */
+  .astryx-dialog__layer-host {
+    display: contents;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .astryx-dialog[open] {
       animation: none;

package/styles/dropdown-menu.css

@@ -64,15 +64,23 @@
     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);
-    /* A held pointer drives the highlight; the browser's own press and preview
-       affordances must not compete with it. */
-    touch-action: pan-y;
+    /* A menu that fits keeps the pinch gesture. Scrolling is opted in below. */
+    touch-action: pinch-zoom;
     user-select: none;
     -webkit-touch-callout: none;
     /* The surface is an internal focus target for pointer opens, not a control. */
     outline: none;
   }
 
+  .astryx-dropdown-menu[data-overflow='true'] {
+    touch-action: pan-y pinch-zoom;
+  }
+
+  /* A pointer close returns focus without painting the button's focus ring. */
+  .astryx-button[data-astryx-focus-ring='off']:focus-visible {
+    outline: none;
+  }
+
   .astryx-dropdown-menu-enter-active,
   .astryx-dropdown-menu-leave-active {
     transition:
@@ -269,6 +277,7 @@
     gap: var(--astryx-spacing-0-5, 2px);
     min-width: 0;
     outline: none;
+    touch-action: pinch-zoom;
   }
 
   .astryx-dropdown-menu-drill[hidden] {

package/styles/field.css

@@ -190,6 +190,7 @@
 
   .astryx-field .astryx-field-info-tip,
   .astryx-field .astryx-input-clear-button {
+    position: relative;
     flex: none;
     width: 20px;
     height: 20px;
@@ -244,6 +245,10 @@
     outline-offset: 1px;
   }
 
+  .astryx-input-clear-button {
+    position: relative;
+  }
+
   @media (pointer: coarse) {
     .astryx-field-info-tip::after,
     .astryx-input-clear-button::after {

package/styles/form-layout.css

@@ -25,6 +25,7 @@
     .astryx-form-layout[data-direction='horizontal-labels'] {
       display: flex;
       flex-direction: column;
+      align-items: stretch;
       gap: var(--astryx-spacing-4, 16px);
     }
   }

package/styles/heading.css

@@ -39,46 +39,56 @@
 
   .astryx-heading--level-1 {
     font-size: var(--astryx-heading-level-1-size, 2rem);
+    font-weight: var(--astryx-text-heading-1-weight, 600);
+    line-height: var(--astryx-text-heading-1-leading, var(--astryx-heading-leading, 1.25));
   }
 
   .astryx-heading--level-2 {
     font-size: var(--astryx-heading-level-2-size, 1.75rem);
+    font-weight: var(--astryx-text-heading-2-weight, 600);
+    line-height: var(--astryx-text-heading-2-leading, var(--astryx-heading-leading, 1.25));
   }
 
   .astryx-heading--level-3 {
     font-size: var(--astryx-heading-level-3-size, 1.5rem);
+    font-weight: var(--astryx-text-heading-3-weight, 600);
+    line-height: var(--astryx-text-heading-3-leading, var(--astryx-heading-leading, 1.25));
   }
 
   .astryx-heading--level-4 {
     font-size: var(--astryx-heading-level-4-size, 0.875rem);
-    font-weight: var(--astryx-font-weight-bold, 700);
-    line-height: var(--astryx-text-heading-4-leading, 1.4286);
+    font-weight: var(--astryx-text-heading-4-weight, 700);
+    line-height: var(--astryx-text-heading-4-leading, var(--astryx-heading-leading, 1.25));
   }
 
   .astryx-heading--level-5 {
     font-size: var(--astryx-heading-level-5-size, 1.125rem);
+    font-weight: var(--astryx-text-heading-5-weight, 600);
+    line-height: var(--astryx-text-heading-5-leading, var(--astryx-heading-leading, 1.25));
   }
 
   .astryx-heading--level-6 {
     font-size: var(--astryx-heading-level-6-size, 1rem);
+    font-weight: var(--astryx-text-heading-6-weight, 600);
+    line-height: var(--astryx-text-heading-6-leading, var(--astryx-heading-leading, 1.25));
   }
 
   .astryx-heading--type-display-1 {
     font-size: var(--astryx-heading-display-1-size, 3rem);
-    font-weight: var(--astryx-heading-display-weight, 300);
-    line-height: 1.1;
+    font-weight: var(--astryx-heading-display-weight, var(--astryx-text-display-1-weight, 300));
+    line-height: var(--astryx-text-display-1-leading, 1.1);
   }
 
   .astryx-heading--type-display-2 {
     font-size: var(--astryx-heading-display-2-size, 2.25rem);
-    font-weight: var(--astryx-heading-display-weight, 300);
-    line-height: 1.15;
+    font-weight: var(--astryx-heading-display-weight, var(--astryx-text-display-2-weight, 300));
+    line-height: var(--astryx-text-display-2-leading, 1.15);
   }
 
   .astryx-heading--type-display-3 {
     font-size: var(--astryx-heading-display-3-size, 1.75rem);
-    font-weight: var(--astryx-heading-display-weight, 300);
-    line-height: 1.2;
+    font-weight: var(--astryx-heading-display-weight, var(--astryx-text-display-3-weight, 300));
+    line-height: var(--astryx-text-display-3-leading, 1.2);
   }
 
   .astryx-heading--type-body {

package/styles/icon.css

@@ -289,5 +289,9 @@
   .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"));
   }
+  /* numberInput:stepperDown */
+  .astryx-icon--number-input-stepper-down {
+    --astryx-icon-artwork: var(--astryx-icon-number-input-stepper-down, 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='M7.5 9.75l4.5 4.5 4.5-4.5' /%3E%3C/svg%3E"));
+  }
   /* ARTWORK: generated end */
 }

package/styles/kbd.css

@@ -19,7 +19,7 @@
     padding-inline: var(--astryx-spacing-1, 4px);
     border-bottom: 2px solid var(--astryx-kbd-border-color, var(--astryx-color-border-emphasized, #d4d4d4));
     border-radius: var(--astryx-radius-inner, 0.375rem);
-    color: var(--astryx-kbd-foreground, var(--astryx-color-text-secondary, #525252));
+    color: var(--astryx-kbd-foreground, var(--astryx-color-text-primary, #171717));
     background-color: var(--astryx-kbd-background, #e5e5e5);
     font-family: var(--astryx-font-family-body, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
     font-size: var(--astryx-text-supporting-size, 0.75rem);

package/styles/layer.css

@@ -0,0 +1,72 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /*
+   * 浮层根元素的公共重置。上游规范 AST-038 和 AST-059。
+   *
+   * 浮层被 Teleport 到页面别处（通常是 body，Dialog 打开时是 Dialog 里面），
+   * 但 CSS 继承跟的是 DOM 树，不跟视觉位置。所以浮层会继承触发器所在位置的
+   * 排版：在一个加粗的大标题里打开 Tooltip，Tooltip 的字也是粗的、大的、居中的。
+   * 这里把文字排版重新声明成正文的基准，浮层里的内容不再跟着外面走。
+   *
+   * 选择器用 `:where()` 包起来，优先级是 0：组件自己的字号、颜色、行高照旧生效，
+   * 这条只负责切断「外面传进来」的那部分。
+   *
+   * `.astryx-layer` 是给自定义浮层根元素用的名字，组件自己的浮层类名也列进来了，
+   * 这样已经存在的浮层不用改模板就能拿到同样的重置。
+   */
+  :where(
+    .astryx-layer,
+    .astryx-popover,
+    .astryx-tooltip,
+    .astryx-hover-card,
+    .astryx-dropdown-menu-popover,
+    .astryx-dropdown-menu,
+    .astryx-context-menu,
+    .astryx-tab-menu-dropdown,
+    .astryx-selector-listbox
+  ) {
+    font-family: var(--astryx-font-family-body, Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    font-weight: var(--astryx-text-body-weight, 400);
+    line-height: var(--astryx-text-body-leading, 1.4286);
+    font-style: normal;
+    text-align: start;
+    text-align-last: auto;
+    text-indent: 0;
+    text-transform: none;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-shadow: none;
+    white-space: normal;
+    word-break: normal;
+    overflow-wrap: normal;
+    hyphens: manual;
+
+    /*
+     * 容器内边距系统停在这里（上游 #5231、#7287）。
+     *
+     * 带内边距的容器（Card、Layout、Section、Table）通过继承的自定义属性告诉
+     * 后代自己有多大的内边距，后代有的直接读它，有的用负外边距把它抵消掉。
+     * 浮层已经离开了那个盒子，屏幕上根本没有这份内边距，可继承值还在：
+     * 于是浮层里的 Divider 会为了抵消 24px 而向两边各伸出 24px。
+     *
+     * 两族变量处理方式相反：
+     * - `--container-padding-*` 是后代要减掉的量，浮层根自己没有内边距要避开，所以归零。
+     * - `--layout-padding-*` 是后代要加上的量，交还给每个读者自己的默认值。
+     */
+    --container-padding-inline-start: 0px;
+    --container-padding-inline-end: 0px;
+    --container-padding-block-start: 0px;
+    --container-padding-block-end: 0px;
+    --layout-padding-outer-x: initial;
+    --layout-padding-outer-y: initial;
+    --layout-padding-own-outer-x: initial;
+    --layout-padding-own-outer-y: initial;
+    --layout-padding-inner-x: initial;
+    --layout-padding-inner-y: initial;
+    --_section-padding-propagated: initial;
+    /* 步骤条的连接线空隙只属于外面那条轨道。浮层里的步骤条回到自己的 0。 */
+    --astryx-step-connector-gap: initial;
+  }
+}

package/styles/list.css

@@ -153,8 +153,15 @@
     }
   }
 
-  .astryx-item[data-interactive='true']:not([data-disabled='true']):not([data-selected='true']):active {
-    background-color: var(--astryx-list-item-pressed-background, light-dark(#05365919, #ffffff19));
+  /* 鼠标按下才用 :active。粗指针改看按压模型写的 data-astryx-press，滚动时不会误亮。 */
+  @media not all and (pointer: coarse) {
+    .astryx-item[data-interactive='true']:not([data-disabled='true']):not([data-selected='true']):active {
+      background-color: var(--astryx-list-item-pressed-background, light-dark(#05365919, #ffffff19));
+    }
+  }
+
+  .astryx-item[data-astryx-press]:not([data-disabled='true']):not([data-selected='true']) {
+    background-image: var(--_press-paint-image);
   }
 
   .astryx-item:has(:focus-visible) {

package/styles/metadata-list.css

@@ -77,6 +77,7 @@
     font-size: var(--astryx-text-body-size, 1rem);
     line-height: var(--astryx-text-body-leading, 1.5);
     overflow-wrap: break-word;
+    word-break: break-word;
   }
 
   .astryx-metadata-list__label,

package/styles/mobile-nav.css

@@ -13,7 +13,9 @@
     padding: 0;
     border: 0;
     background: transparent;
-    overflow: hidden;
+    overflow: clip;
+    overscroll-behavior: contain;
+    touch-action: pinch-zoom;
   }
 
   .astryx-mobile-nav:not([open]) { display: none; }
@@ -70,6 +72,7 @@
     min-height: 0;
     padding: var(--astryx-spacing-2, 8px);
     overflow: auto;
+    touch-action: pan-y pinch-zoom;
   }
 
   .astryx-mobile-nav__close,

package/styles/multi-selector.css

@@ -40,7 +40,7 @@
     width: 100%;
     min-width: 0;
     min-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);
@@ -90,6 +90,53 @@
     box-shadow: none;
   }
 
+  .astryx-multi-selector-control[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);
+    box-shadow: none;
+    color: var(--astryx-button-secondary-foreground, #171717);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
+  @media (hover: hover) {
+    .astryx-multi-selector-control[data-variant='secondary']:hover:not(.is-disabled):not(:focus-within) {
+      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)));
+      box-shadow: none;
+    }
+  }
+
+  .astryx-multi-selector-control[data-variant='secondary']:focus-within,
+  .astryx-multi-selector-control[data-variant='secondary'].is-open {
+    border-color: var(--astryx-button-secondary-border-color, transparent);
+    box-shadow: none;
+  }
+
+  .astryx-multi-selector-listbox[role='grid'] .astryx-multi-selector-option {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .astryx-multi-selector-option-main,
+  .astryx-multi-selector-option-action {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-multi-selector-option-main {
+    padding: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-multi-selector-option-action.is-active {
+    outline: var(--astryx-focus-outline-width, 2px) solid var(--astryx-focus-outline-color, currentcolor);
+    outline-offset: -2px;
+  }
+
   .astryx-multi-selector-control.is-disabled {
     cursor: default;
     opacity: 0.5;

package/styles/nav-item.css

@@ -54,8 +54,15 @@
     background: var(--astryx-color-overlay-hover);
   }
 
-  .astryx-nav-item:active:not(:disabled, .astryx-nav-item--plain, .astryx-nav-item--selected) {
-    background: var(--astryx-color-overlay-pressed);
+  /* 鼠标按下才用 :active。粗指针改看按压模型写的 data-astryx-press，滚动时不会误亮。 */
+  @media not all and (pointer: coarse) {
+    .astryx-nav-item:active:not(:disabled, .astryx-nav-item--plain, .astryx-nav-item--selected) {
+      background: var(--astryx-color-overlay-pressed);
+    }
+  }
+
+  .astryx-nav-item[data-astryx-press]:not(:disabled, .astryx-nav-item--plain, .astryx-nav-item--selected) {
+    background-image: var(--_press-paint-image);
   }
 
   .astryx-nav-item--selected {

package/styles/nav-menu.css

@@ -55,15 +55,25 @@
   .astryx-nav-menu-item--md { padding: var(--astryx-spacing-2, 8px); }
   .astryx-nav-menu-item--lg { padding: var(--astryx-spacing-3, 12px); }
 
-  .astryx-nav-menu-item:hover:not(:disabled),
+  .astryx-nav-menu-item:hover:not(:disabled, .astryx-nav-menu-item--disabled),
   .astryx-nav-menu-item:focus-visible {
     background: var(--astryx-color-overlay-hover);
     outline: none;
   }
 
+  @media not all and (pointer: coarse) {
+    .astryx-nav-menu-item:active:not(:disabled, .astryx-nav-menu-item--disabled) {
+      background: var(--astryx-color-overlay-pressed);
+    }
+  }
+
+  .astryx-nav-menu-item[data-astryx-press]:not(:disabled, .astryx-nav-menu-item--disabled) {
+    background-image: var(--_press-paint-image);
+  }
+
   .astryx-nav-menu-item--disabled,
   .astryx-nav-menu-item:disabled {
-    cursor: not-allowed;
+    cursor: default;
     opacity: 0.5;
   }
 

package/styles/number-input.css

@@ -90,7 +90,7 @@
     box-sizing: border-box;
     flex: 1;
     min-width: 0;
-    padding: 0 var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-input-padding-block, 0) var(--astryx-input-padding-inline, var(--astryx-spacing-2, 8px));
     border: 0;
     outline: none;
     background: transparent;
@@ -113,6 +113,14 @@
     cursor: default;
   }
 
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+      .astryx-number-input-field {
+        font-size: max(1rem, var(--astryx-text-body-size, 14px));
+      }
+    }
+  }
+
   .astryx-number-input-buttons {
     display: flex;
     flex-direction: column;

package/styles/overflow-list.css

@@ -69,7 +69,7 @@
     outline-offset: var(--astryx-focus-outline-offset);
   }
 
-  .astryx-overflow-list__chip:disabled { cursor: not-allowed; opacity: 0.5; }
+  .astryx-overflow-list__chip:disabled { cursor: default; opacity: 0.5; }
 
   .astryx-overflow-list__glyph {
     display: inline-block;

package/styles/popover.css

@@ -60,7 +60,8 @@
     z-index: var(--astryx-popover-z-index, 1000);
     display: flex;
     flex-direction: column;
-    max-inline-size: calc(100vw - 16px);
+    /* 视口上限：两边空隙都要减，由 LayerProvider 写在根元素上。 */
+    max-inline-size: var(--astryx-layer-max-inline-size, calc(100vw - 32px));
     border-radius: var(--astryx-radius-container, 0.75rem);
     background: var(--astryx-popover-background, #fff);
     color: var(--astryx-popover-foreground, #171717);

package/styles/power-search.css

@@ -175,8 +175,10 @@
     position: fixed;
     z-index: var(--astryx-popover-z-index, 1000);
     box-sizing: border-box;
-    min-width: min(400px, calc(100vw - 16px));
-    max-width: min(720px, calc(100vw - 16px));
+    min-width: min(400px, var(--astryx-layer-max-inline-size, calc(100vw - 32px)));
+    max-width: min(720px, var(--astryx-layer-max-inline-size, calc(100vw - 32px)));
+    container-type: inline-size;
+    container-name: power-search-editor;
     padding: var(--astryx-spacing-3, 12px);
     border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
     border-radius: var(--astryx-radius-element, 0.625rem);
@@ -275,7 +277,7 @@
     padding: 0;
   }
 
-  @media (max-width: 399px) {
+  @container power-search-editor (max-width: 399px) {
     .astryx-power-search-editor-row > * {
       flex-basis: 100%;
     }