@astryx-vue/core 0.2.3 → 0.2.4

package/styles/top-nav.css

@@ -34,24 +34,126 @@
   .astryx-top-nav--centered .astryx-top-nav__end { justify-content: flex-end; }
   .astryx-top-nav__items { flex-wrap: nowrap; overflow: hidden; }
 
-  .astryx-top-nav-heading__icon {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-  }
-
   .astryx-top-nav-heading {
     display: inline-flex;
     align-items: center;
     gap: var(--astryx-spacing-2, 8px);
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 32px;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    border-radius: var(--astryx-radius-element, 0.625rem);
     color: var(--astryx-color-text-primary);
     font-size: var(--astryx-font-size-lg, 1.0625rem);
     font-weight: var(--astryx-font-weight-semibold, 600);
     line-height: 1.4118;
     text-decoration: none;
+  }
+
+  .astryx-top-nav-heading--link:hover,
+  .astryx-top-nav-heading--echo:hover {
+    background: var(--astryx-color-overlay-hover);
+  }
+
+  .astryx-top-nav-heading--echo {
+    width: 100%;
+    margin: 0 0 var(--astryx-spacing-1, 4px);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-top-nav-heading__icon,
+  .astryx-top-nav-heading__end {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .astryx-top-nav-heading__end {
+    margin-inline-start: auto;
+  }
+
+  .astryx-top-nav-heading__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .astryx-top-nav-heading__row {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-top-nav-heading__title {
+    overflow: hidden;
+    font-size: var(--astryx-font-size-lg, 1.0625rem);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    line-height: 1.4118;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  .astryx-top-nav-heading__super,
+  .astryx-top-nav-heading__sub {
+    overflow: hidden;
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-weight: var(--astryx-font-weight-regular, 400);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .astryx-top-nav-heading__link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .astryx-top-nav-heading__link:hover {
+    text-decoration: underline;
+  }
+
+  .astryx-top-nav-heading__chevron {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: transparent;
+    color: var(--astryx-color-text-secondary, #525252);
+    cursor: pointer;
+  }
+
+  .astryx-top-nav-heading__chevron:hover {
+    background: var(--astryx-color-overlay-hover);
+  }
+
+  .astryx-top-nav-heading__chevron: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-top-nav-heading__chevron-icon--open {
+    transform: rotate(180deg);
+  }
+
+  .astryx-top-nav-heading__menu {
+    min-width: 200px;
+  }
+
   .astryx-top-nav-item:not(.astryx-top-nav-item--drawer) {
     width: auto;
     height: auto;
@@ -169,11 +271,44 @@
 
   .astryx-top-nav-mega-card {
     flex-direction: column;
+    gap: 0;
     height: 100%;
+    padding: 0;
+    overflow: hidden;
     background: var(--astryx-color-neutral);
     cursor: pointer;
   }
 
+  .astryx-top-nav-mega-card--static {
+    cursor: default;
+  }
+
+  .astryx-top-nav-mega-card__image {
+    display: block;
+    width: 100%;
+    height: 140px;
+    object-fit: cover;
+  }
+
+  .astryx-top-nav-mega-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-1, 4px);
+    padding: var(--astryx-spacing-3, 12px);
+  }
+
+  .astryx-top-nav-mega-card__link {
+    color: var(--astryx-color-text-accent, #0074e2);
+    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-item:focus-visible,
   .astryx-top-nav-mega-card:hover {
@@ -181,6 +316,10 @@
     outline: none;
   }
 
+  .astryx-top-nav-mega-card--static:hover {
+    background: var(--astryx-color-neutral);
+  }
+
   .astryx-top-nav-mega-item__icon {
     display: inline-flex;
     flex: none;

package/styles/typeahead.css

@@ -211,6 +211,30 @@
     opacity: 0.5;
   }
 
+  .astryx-typeahead--bare {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-typeahead-item {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    min-width: 0;
+  }
+
+  .astryx-typeahead-item-icon {
+    display: inline-flex;
+    flex: none;
+  }
+
+  .astryx-typeahead-item-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+  }
+
   .astryx-typeahead-option-copy {
     display: flex;
     flex: 1;

package/styles.css

@@ -26,6 +26,7 @@
 @import './styles/collapsible.css';
 @import './styles/command-palette.css';
 @import './styles/complex-selector.css';
+@import './styles/container-reveal.css';
 @import './styles/context-menu.css';
 @import './styles/date-range-input.css';
 @import './styles/date-time-input.css';
@@ -42,6 +43,7 @@
 @import './styles/hover-card.css';
 @import './styles/icon.css';
 @import './styles/kbd.css';
+@import './styles/keyboard-hint.css';
 @import './styles/layout.css';
 @import './styles/lightbox.css';
 @import './styles/link.css';

package/dist/Heading-Dugosn6j.js

@@ -1,43 +0,0 @@
-import { computed, createBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
-import "../styles/heading.css";
-//#region src/Heading/Heading.vue
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	__name: "Heading",
-	props: {
-		level: {},
-		type: {},
-		color: { default: "primary" },
-		weight: {},
-		display: { default: "block" },
-		maxLines: { default: 0 }
-	},
-	setup(__props) {
-		const props = __props;
-		const tag = computed(() => `h${props.level}`);
-		const classes = computed(() => [
-			"astryx-heading",
-			`astryx-heading--level-${props.level}`,
-			props.type && `astryx-heading--type-${props.type}`,
-			`astryx-heading--color-${props.color}`,
-			props.weight && `astryx-heading--weight-${props.weight}`,
-			props.display === "inline" && "astryx-heading--inline",
-			props.maxLines === 1 && "astryx-heading--truncate-single",
-			props.maxLines > 1 && "astryx-heading--truncate-multi"
-		]);
-		const style = computed(() => {
-			if (props.maxLines > 1) return { WebkitLineClamp: props.maxLines };
-			return {};
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(tag.value), {
-				class: normalizeClass(["astryx-heading", classes.value]),
-				style: normalizeStyle(style.value)
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["class", "style"]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };

package/dist/Item-C1z6gXn8.js

@@ -1,289 +0,0 @@
-import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useAttrs, useId, useSlots, useTemplateRef, withCtx } from "vue";
-import "../styles/list.css";
-//#region src/List/context.ts
-const listContextKey = Symbol("astryx-list-context");
-/** The surrounding list, or `undefined` when the row stands alone. */
-function useListContext() {
-	return inject(listContextKey, void 0);
-}
-const itemDescriptionContextKey = Symbol("astryx-item-description");
-/**
-* The id of the description element of the nearest row, so a control rendered
-* in one of that row's slots can point `aria-describedby` at it. `null` when
-* the row renders no description.
-*/
-function useItemDescriptionId() {
-	return inject(itemDescriptionContextKey, computed(() => null));
-}
-//#endregion
-//#region src/List/Item.vue
-const _hoisted_1 = {
-	key: 0,
-	class: "astryx-item__start"
-};
-const _hoisted_2 = {
-	key: 1,
-	class: "astryx-item__end"
-};
-const NATIVE_CONTROL_SELECTOR = "button, a, input, select, textarea";
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxItem",
-	inheritAttrs: false,
-	__name: "Item",
-	props: {
-		as: { default: "div" },
-		align: { default: "center" },
-		layout: { default: "stacked" },
-		labelLines: {},
-		descriptionLines: {},
-		isHighlighted: {
-			type: Boolean,
-			default: false
-		},
-		label: {},
-		description: {},
-		density: { default: "balanced" },
-		onClick: {},
-		interactiveRef: {},
-		href: {},
-		target: {},
-		rel: {},
-		isDisabled: {
-			type: Boolean,
-			default: false
-		},
-		isSelected: {
-			type: Boolean,
-			default: false
-		}
-	},
-	setup(__props, { expose: __expose }) {
-		const props = __props;
-		const ARIA_SELECTED_ROLES = /* @__PURE__ */ new Set([
-			"option",
-			"tab",
-			"row",
-			"gridcell",
-			"columnheader",
-			"rowheader",
-			"treeitem"
-		]);
-		const INTERACTIVE_SELECTOR = [
-			"button",
-			"a",
-			"input",
-			"select",
-			"textarea",
-			"[role=\"button\"]",
-			"[role=\"link\"]",
-			"[role=\"checkbox\"]",
-			"[role=\"radio\"]",
-			"[role=\"switch\"]",
-			"[role=\"tab\"]",
-			"[role=\"menuitem\"]",
-			"[role=\"option\"]",
-			"[role=\"combobox\"]",
-			"[role=\"listbox\"]",
-			"[role=\"slider\"]",
-			"[role=\"spinbutton\"]"
-		].join(",");
-		const CONTROLLED_ATTRS = /* @__PURE__ */ new Set([
-			"class",
-			"style",
-			"role",
-			"aria-current",
-			"aria-disabled",
-			"aria-selected"
-		]);
-		const attrs = useAttrs();
-		const slots = useSlots();
-		const root = useTemplateRef("root");
-		function isRenderable(value) {
-			return value != null && value !== "";
-		}
-		function isInteractiveElement(element) {
-			return element.matches(INTERACTIVE_SELECTOR) && !element.matches("[aria-readonly=\"true\"]");
-		}
-		function toElement(value) {
-			if (value == null) return null;
-			if (value instanceof HTMLElement) return value;
-			return value.$el instanceof HTMLElement ? value.$el : null;
-		}
-		const element = computed(() => toElement(root.value));
-		const descriptionIdBase = `astryx-item-description-${useId()}`;
-		const hasDescription = computed(() => slots.description != null || isRenderable(props.description));
-		const hasLabel = computed(() => slots.label != null || isRenderable(props.label));
-		provide(itemDescriptionContextKey, computed(() => hasDescription.value ? descriptionIdBase : null));
-		const role = computed(() => attrs.role);
-		const hasParentRole = computed(() => role.value != null);
-		const allowsAriaSelected = computed(() => role.value != null && ARIA_SELECTED_ROLES.has(role.value));
-		const ariaCurrent = computed(() => attrs["aria-current"] ?? (props.isSelected && !allowsAriaSelected.value ? true : void 0));
-		const isDelegate = computed(() => props.interactiveRef != null);
-		const isInteractive = computed(() => props.onClick != null || props.href != null || isDelegate.value);
-		const isLinkRoot = computed(() => typeof props.as !== "string" && props.href != null);
-		const resolvedTarget = computed(() => props.target);
-		const resolvedRel = computed(() => {
-			const tokens = new Set((props.rel ?? "").split(/\s+/).filter(Boolean));
-			if (resolvedTarget.value === "_blank") {
-				tokens.add("noopener");
-				tokens.add("noreferrer");
-			}
-			return tokens.size > 0 ? [...tokens].join(" ") : void 0;
-		});
-		const isInline = computed(() => props.layout === "inline" && hasDescription.value);
-		function clampClass(lines) {
-			if (lines === 1) return "astryx-item__ellipsis";
-			return lines > 1 ? "astryx-item__clamp" : void 0;
-		}
-		function clampStyle(lines) {
-			return lines > 1 ? { "--astryx-item-clamp-lines": String(lines) } : void 0;
-		}
-		const labelClamp = computed(() => props.labelLines ?? (typeof props.label === "string" ? 1 : 0));
-		const descriptionClamp = computed(() => {
-			if (props.descriptionLines != null) return props.descriptionLines;
-			return typeof props.description === "string" || isInline.value ? 1 : 0;
-		});
-		const labelClasses = computed(() => clampClass(labelClamp.value));
-		const labelStyle = computed(() => clampStyle(labelClamp.value));
-		const descriptionClasses = computed(() => clampClass(descriptionClamp.value));
-		const descriptionStyle = computed(() => clampStyle(descriptionClamp.value));
-		const contentTag = computed(() => {
-			if (hasParentRole.value || isDelegate.value) return "span";
-			if (props.href != null && !isLinkRoot.value) return "a";
-			return props.onClick != null ? "button" : "span";
-		});
-		function handleContentClick(event) {
-			props.onClick?.(event);
-		}
-		const contentAttrs = computed(() => {
-			if (contentTag.value === "a") return {
-				"href": props.href,
-				"rel": resolvedRel.value,
-				"target": resolvedTarget.value,
-				"aria-disabled": props.isDisabled || void 0,
-				"tabindex": props.isDisabled ? -1 : void 0
-			};
-			if (contentTag.value === "button") return {
-				type: "button",
-				disabled: props.isDisabled,
-				onClick: handleContentClick
-			};
-			return {};
-		});
-		function hasTextSelection(node) {
-			const selection = node.ownerDocument.getSelection?.();
-			return selection != null && !selection.isCollapsed && selection.anchorNode != null && node.contains(selection.anchorNode);
-		}
-		function hasInteractiveAncestor(target, container) {
-			let current = target;
-			while (current != null && current !== container && current !== container.ownerDocument.body) {
-				if (isInteractiveElement(current)) return true;
-				current = current.parentElement;
-			}
-			return false;
-		}
-		function handleContainerClick(event) {
-			if (props.isDisabled) return;
-			const target = event.target;
-			if (target instanceof HTMLElement && target.closest(NATIVE_CONTROL_SELECTOR) != null) return;
-			props.onClick?.(event);
-		}
-		function handleDelegatedClick(event) {
-			if (props.isDisabled) return;
-			const container = element.value;
-			const target = event.target;
-			if (container == null || !(target instanceof HTMLElement)) return;
-			if (hasTextSelection(container)) return;
-			if (target !== event.currentTarget && hasInteractiveAncestor(target, container)) return;
-			const control = toValue(props.interactiveRef);
-			if (control == null) return;
-			control.dispatchEvent(new MouseEvent("click", {
-				altKey: event.altKey,
-				bubbles: event.bubbles,
-				button: event.button,
-				cancelable: event.cancelable,
-				ctrlKey: event.ctrlKey,
-				metaKey: event.metaKey,
-				shiftKey: event.shiftKey
-			}));
-			event.stopPropagation();
-		}
-		const rootClick = computed(() => {
-			if (isDelegate.value) return handleDelegatedClick;
-			if (hasParentRole.value) return props.onClick;
-			return isInteractive.value ? handleContainerClick : void 0;
-		});
-		const rootClass = computed(() => ["astryx-item", attrs.class]);
-		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => !CONTROLLED_ATTRS.has(key))));
-		function focus(options) {
-			(element.value?.querySelector("a[href], button:not([disabled])"))?.focus(options);
-		}
-		function blur() {
-			const active = element.value?.ownerDocument.activeElement;
-			if (active instanceof HTMLElement && element.value?.contains(active)) active.blur();
-		}
-		__expose({
-			element,
-			focus,
-			blur
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
-				ref_key: "root",
-				ref: root
-			}, forwardedAttrs.value, {
-				"aria-current": ariaCurrent.value,
-				"aria-disabled": __props.isDisabled || void 0,
-				"aria-selected": allowsAriaSelected.value && __props.isSelected ? true : void 0,
-				class: rootClass.value,
-				"data-align": __props.align,
-				"data-density": __props.density,
-				"data-disabled": __props.isDisabled || void 0,
-				"data-highlighted": __props.isHighlighted || void 0,
-				"data-inert": __props.isDisabled && !hasParentRole.value ? true : void 0,
-				"data-interactive": isInteractive.value || void 0,
-				"data-selected": __props.isSelected || void 0,
-				role: role.value,
-				style: unref(attrs).style,
-				onClick: rootClick.value
-			}), {
-				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "marker"),
-					_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "startContent")])) : createCommentVNode("v-if", true),
-					(openBlock(), createBlock(resolveDynamicComponent(contentTag.value), mergeProps(contentAttrs.value, { class: ["astryx-item__content", { "astryx-item__content--inline": isInline.value }] }), {
-						default: withCtx(() => [hasLabel.value ? (openBlock(), createElementBlock("span", {
-							key: 0,
-							class: normalizeClass(["astryx-item__label", labelClasses.value]),
-							style: normalizeStyle(labelStyle.value)
-						}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 6)) : createCommentVNode("v-if", true), hasDescription.value ? (openBlock(), createElementBlock("span", {
-							key: 1,
-							id: descriptionIdBase,
-							class: normalizeClass(["astryx-item__description", descriptionClasses.value]),
-							style: normalizeStyle(descriptionStyle.value)
-						}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 6)) : createCommentVNode("v-if", true)]),
-						_: 3
-					}, 16, ["class"])),
-					_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "endContent")])) : createCommentVNode("v-if", true)
-				]),
-				_: 3
-			}, 16, [
-				"aria-current",
-				"aria-disabled",
-				"aria-selected",
-				"class",
-				"data-align",
-				"data-density",
-				"data-disabled",
-				"data-highlighted",
-				"data-inert",
-				"data-interactive",
-				"data-selected",
-				"role",
-				"style",
-				"onClick"
-			]);
-		};
-	}
-});
-//#endregion
-export { useListContext as i, listContextKey as n, useItemDescriptionId as r, _sfc_main as t };