@astryx-vue/core 0.2.5 → 0.3.0

package/styles/top-nav.css

@@ -232,24 +232,37 @@
 
   .astryx-top-nav-menu__drawer-items { padding-inline-start: var(--astryx-spacing-4, 16px); }
 
-  .astryx-top-nav-mega__panel { min-width: min(640px, calc(100vw - 32px)); padding: var(--astryx-spacing-3, 12px); }
+  .astryx-top-nav-mega__panel {
+    min-width: min(640px, calc(100vw - 32px));
+    max-width: min(1248px, calc(100vw - 32px));
+    padding: var(--astryx-spacing-3, 12px);
+  }
 
   .astryx-top-nav-mega__layout {
     display: flex;
     align-items: stretch;
-    gap: var(--astryx-spacing-4, 16px);
+    gap: var(--astryx-spacing-6, 24px);
   }
 
   .astryx-top-nav-mega__items {
     display: grid;
-    flex: 1 1 auto;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: var(--astryx-spacing-1, 4px);
+    flex: 2 1 300px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--astryx-spacing-2, 8px);
     min-width: 0;
   }
 
+  .astryx-top-nav-mega__drawer-items {
+    padding-inline-start: var(--astryx-spacing-4, 16px);
+  }
+
   .astryx-top-nav-mega__featured {
-    flex: 0 0 200px;
+    overflow: hidden;
+    border-radius: var(--astryx-radius-container, 0.75rem);
+  }
+
+  .astryx-top-nav-mega__layout > .astryx-top-nav-mega__featured {
+    flex: 1 1 200px;
   }
 
   .astryx-top-nav-mega-item,
@@ -264,6 +277,8 @@
     background: transparent;
     color: inherit;
     font: inherit;
+    font-size: var(--astryx-text-body-size, 0.875rem);
+    line-height: var(--astryx-text-body-leading, 1.4286);
     text-align: start;
     text-decoration: none;
     cursor: pointer;
@@ -275,7 +290,6 @@
     height: 100%;
     padding: 0;
     overflow: hidden;
-    background: var(--astryx-color-neutral);
     cursor: pointer;
   }
 
@@ -293,31 +307,32 @@
   .astryx-top-nav-mega-card__body {
     display: flex;
     flex-direction: column;
-    gap: var(--astryx-spacing-1, 4px);
-    padding: var(--astryx-spacing-3, 12px);
+    gap: var(--astryx-spacing-2, 8px);
+    padding: var(--astryx-spacing-4, 16px);
   }
 
   .astryx-top-nav-mega-card__link {
-    color: var(--astryx-color-text-accent, #0074e2);
+    color: var(--astryx-color-text-primary, #171717);
     font-size: var(--astryx-text-supporting-size, 0.75rem);
     font-weight: var(--astryx-font-weight-semibold, 600);
     line-height: var(--astryx-text-supporting-leading, 1.6667);
     text-decoration: none;
   }
 
-  .astryx-top-nav-mega-card__link:hover {
-    text-decoration: underline;
+  .astryx-top-nav-mega-item:hover,
+  .astryx-top-nav-mega-card:hover {
+    background: var(--astryx-color-overlay-hover);
   }
 
-  .astryx-top-nav-mega-item:hover,
   .astryx-top-nav-mega-item:focus-visible,
-  .astryx-top-nav-mega-card:hover {
+  .astryx-top-nav-mega-card:focus-visible {
     background: var(--astryx-color-overlay-hover);
-    outline: none;
+    outline: var(--astryx-focus-outline-width) var(--astryx-focus-outline-style) var(--astryx-focus-outline-color);
+    outline-offset: var(--astryx-focus-outline-offset);
   }
 
   .astryx-top-nav-mega-card--static:hover {
-    background: var(--astryx-color-neutral);
+    background: transparent;
   }
 
   .astryx-top-nav-mega-item__icon {
@@ -331,7 +346,19 @@
     background: var(--astryx-color-neutral);
   }
 
-  .astryx-top-nav-mega-item__glyph { display: block; width: 1.25rem; height: 1.25rem; }
+  /* 图标类（如 i-carbon-*）按父盒子的 100% 铺满，所以由这层固定为 20px。 */
+  .astryx-top-nav-mega-item__glyph-box {
+    display: block;
+    flex: none;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .astryx-top-nav-mega-item__glyph-box > .astryx-top-nav-mega-item__glyph {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 
   .astryx-top-nav-mega-item__text,
   .astryx-top-nav-mega-card {
@@ -343,7 +370,7 @@
 
   .astryx-top-nav-mega-item__title,
   .astryx-top-nav-mega-card__title {
-    font-weight: var(--astryx-font-weight-bold, 700);
+    font-weight: var(--astryx-font-weight-semibold, 600);
   }
 
   .astryx-top-nav-mega-item__description,
@@ -356,6 +383,6 @@
 
   @media (max-width: 720px) {
     .astryx-top-nav-mega__layout { flex-direction: column; }
-    .astryx-top-nav-mega__featured { flex-basis: auto; }
+    .astryx-top-nav-mega__layout > .astryx-top-nav-mega__featured { flex-basis: auto; }
   }
 }

package/styles/typeahead.css

@@ -179,6 +179,20 @@
     gap: var(--astryx-spacing-1, 4px);
   }
 
+  /* 分组只是把选项归堆，布局仍然由上面那层 flex 排。 */
+  .astryx-typeahead-group {
+    display: contents;
+  }
+
+  .astryx-typeahead-group-heading {
+    padding: var(--astryx-spacing-1-5, 6px) var(--astryx-spacing-2, 8px) var(--astryx-spacing-1, 4px);
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-medium, 500);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    text-align: start;
+  }
+
   .astryx-typeahead-option {
     box-sizing: border-box;
     display: flex;
@@ -216,6 +230,23 @@
     min-width: 0;
   }
 
+  /* 单独使用的 BaseTypeahead 只有裸输入：没有边框、底色、内边距，悬停和聚焦也不画外圈。 */
+  .astryx-typeahead-control.is-bare {
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .astryx-typeahead-control.is-bare:hover,
+  .astryx-typeahead-control.is-bare:focus-within,
+  .astryx-typeahead-control.is-bare.is-open {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
   .astryx-typeahead-item {
     display: flex;
     align-items: center;

package/styles.css

@@ -42,6 +42,7 @@
 @import './styles/heading.css';
 @import './styles/hover-card.css';
 @import './styles/icon.css';
+@import './styles/indicator-focus-ring.css';
 @import './styles/kbd.css';
 @import './styles/keyboard-hint.css';
 @import './styles/layout.css';
@@ -62,6 +63,7 @@
 @import './styles/overlay.css';
 @import './styles/popover.css';
 @import './styles/power-search.css';
+@import './styles/pressable.css';
 @import './styles/progress-bar.css';
 @import './styles/radio.css';
 @import './styles/radio-indicator.css';

package/dist/AvatarGroup-QyzSrpYA.js

@@ -1,60 +0,0 @@
-import { n as AvatarGroupContext, t as resolveSize } from "./utils-C9r3UD_y.js";
-import { computed, createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, toDisplayString } from "vue";
-import "../styles/avatar-group.css";
-//#region src/AvatarGroup/AvatarGroup.vue
-const _hoisted_1$1 = ["aria-label"];
-const OVERLAP_RATIO = .25;
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
-	__name: "AvatarGroup",
-	props: {
-		size: { default: "md" },
-		shape: { default: "circle" },
-		label: { default: "Avatar group" }
-	},
-	setup(__props) {
-		const props = __props;
-		const numericSize = computed(() => resolveSize(props.size));
-		const overlap = computed(() => Math.round(numericSize.value * OVERLAP_RATIO));
-		provide(AvatarGroupContext, {
-			size: computed(() => props.size),
-			shape: computed(() => props.shape),
-			overlap
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: "astryx-avatar-group",
-				role: "group",
-				"aria-label": __props.label
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
-		};
-	}
-});
-//#endregion
-//#region src/AvatarGroup/AvatarGroupOverflow.vue
-const _hoisted_1 = ["aria-label"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AvatarGroupOverflow",
-	__name: "AvatarGroupOverflow",
-	props: { count: {} },
-	setup(__props) {
-		const avatarGroup = inject(AvatarGroupContext, void 0);
-		const size = computed(() => avatarGroup?.size.value ?? "md");
-		const shape = computed(() => avatarGroup?.shape.value ?? "circle");
-		const numericSize = computed(() => resolveSize(size.value));
-		const rootStyle = computed(() => ({
-			width: `${numericSize.value}px`,
-			height: `${numericSize.value}px`,
-			marginInlineStart: `${-(avatarGroup?.overlap.value ?? 0)}px`
-		}));
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
-				class: normalizeClass(["astryx-avatar-group-overflow", [`astryx-avatar-group-overflow--${shape.value}`]]),
-				style: normalizeStyle(rootStyle.value),
-				role: "img",
-				"aria-label": `${__props.count} more avatars`
-			}, " +" + toDisplayString(__props.count), 15, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { _sfc_main$1 as n, _sfc_main as t };