@astryx-vue/core 0.2.0 → 0.2.2

package/styles/table.css

@@ -115,7 +115,8 @@
     max-width: 0;
   }
 
-  .astryx-table[data-striped='true'] tbody tr:nth-child(even of :not([data-expansion-panel])) {
+  .astryx-table[data-striped='true'] tbody tr:nth-child(even of :not([data-expansion-panel], [data-group-header])) {
+    --table-row-overlay: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
     background-color: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
   }
 
@@ -125,11 +126,13 @@
 
   @media (hover: hover) {
     .astryx-table[data-hover='true'] tbody tr:hover {
+      --table-row-overlay: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
       background-color: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
     }
   }
 
   .astryx-table tbody tr[aria-selected='true'] {
+    --table-row-overlay: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
     background-color: var(--astryx-color-accent-muted, light-dark(#f1f1f1, #262626));
   }
 
@@ -191,6 +194,18 @@
     min-width: 0;
   }
 
+  .astryx-table__header-line {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-table__header-line > .astryx-table__sort {
+    flex: 1;
+    min-width: 0;
+  }
+
   .astryx-table__resize {
     position: absolute;
     top: 0;
@@ -253,4 +268,292 @@
     gap: var(--astryx-spacing-2, 8px);
     margin-bottom: var(--astryx-spacing-2, 8px);
   }
+
+  .astryx-table__clickable {
+    cursor: pointer;
+  }
+
+  .astryx-table tr[data-group-header] {
+    cursor: pointer;
+    user-select: none;
+    background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+    border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-table td.astryx-table__group {
+    max-width: none;
+    overflow: visible;
+    padding-inline-start: 0;
+    background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+  }
+
+  .astryx-table__group-inner,
+  .astryx-table__tree {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-1, 4px);
+    min-width: 0;
+  }
+
+  .astryx-table__group-inner {
+    padding-inline-start: var(--astryx-spacing-1, 4px);
+  }
+
+  .astryx-table__group-inner[data-pinned] {
+    position: sticky;
+    inset-inline-start: 0;
+    width: fit-content;
+  }
+
+  .astryx-table__group-chevron[data-pinned] {
+    position: sticky;
+    inset-inline-start: var(--astryx-spacing-1, 4px);
+    z-index: 1;
+  }
+
+  .astryx-table__group-chevron,
+  .astryx-table__expander {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+    cursor: pointer;
+  }
+
+  .astryx-table__group-chevron {
+    color: var(--astryx-color-icon-secondary, light-dark(#737373, #a3a3a3));
+  }
+
+  .astryx-table__expander {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    transition: color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  @media (hover: hover) {
+    .astryx-table__group-chevron:hover,
+    .astryx-table__expander:hover {
+      color: var(--astryx-color-icon-primary, light-dark(#171717, #fafafa));
+    }
+
+    .astryx-table__expander:hover {
+      background-image: linear-gradient(var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d)), var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d)));
+    }
+  }
+
+  .astryx-table__chevron-icon {
+    display: inline-flex;
+    transition: transform var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-table__chevron-icon.is-expanded {
+    transform: rotate(90deg);
+  }
+
+  [dir='rtl'] .astryx-table__chevron-icon {
+    transform: scaleX(-1);
+  }
+
+  [dir='rtl'] .astryx-table__chevron-icon.is-expanded {
+    transform: scaleX(-1) rotate(90deg);
+  }
+
+  .astryx-table__group-label {
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    color: var(--astryx-color-text-primary, light-dark(#171717, #fafafa));
+  }
+
+  .astryx-table__group-count {
+    font-weight: var(--astryx-font-weight-normal, 400);
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-table__tree {
+    padding-inline-start: calc(var(--astryx-table-tree-level, 0) * var(--astryx-table-tree-step, var(--astryx-spacing-4, 16px)));
+  }
+
+  .astryx-table__tree-spacer {
+    flex: none;
+    width: 24px;
+    height: 24px;
+  }
+
+  .astryx-table__tree-label {
+    min-width: 0;
+  }
+
+  .astryx-table :is(th, td)[data-column='__expansion'] {
+    width: 40px;
+    min-width: 40px;
+    max-width: 40px;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  .astryx-table[data-density='compact'] .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='balanced'] .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-3, 12px));
+  }
+
+  .astryx-table[data-density='spacious'] .astryx-table__expander--column {
+    margin-inline-start: calc((40px - min(var(--astryx-spacing-6, 24px), 40px)) / 2 - var(--astryx-spacing-4, 16px));
+  }
+
+  .astryx-table[data-dividers='rows'] tbody tr[data-expanded] > td,
+  .astryx-table[data-dividers='grid'] tbody tr[data-expanded] > td {
+    border-bottom-width: 0;
+  }
+
+  .astryx-table__panel-row[data-variant='muted'] {
+    background: var(--astryx-color-background-muted, light-dark(#f1f1f1, #1b1b1b));
+  }
+
+  .astryx-table__panel {
+    max-width: none;
+    padding-inline-end: var(--astryx-spacing-5, 20px);
+    padding-block: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-table[data-density='compact'] .astryx-table__panel {
+    padding-inline-start: calc(40px + var(--astryx-spacing-2, 8px));
+  }
+
+  .astryx-table[data-density='balanced'] .astryx-table__panel {
+    padding-inline-start: calc(40px + var(--astryx-spacing-3, 12px));
+  }
+
+  .astryx-table[data-density='spacious'] .astryx-table__panel {
+    padding-inline-start: calc(40px + var(--astryx-spacing-4, 16px));
+  }
+
+  .astryx-table[data-dividers='rows'] .astryx-table__panel,
+  .astryx-table[data-dividers='grid'] .astryx-table__panel {
+    border-bottom: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+  }
+
+  .astryx-table tbody tr:last-child > .astryx-table__panel {
+    border-bottom-width: 0;
+  }
+
+  .astryx-table__row-index {
+    font-family: var(--astryx-font-family-code, ui-monospace, monospace);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    color: var(--astryx-color-text-secondary, light-dark(#525252, #a3a3a3));
+  }
+
+  .astryx-table__status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .astryx-table__status-dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  .astryx-table__sticky {
+    position: sticky;
+    background-color: var(--table-sticky-background, var(--astryx-color-background-card, #fff));
+    background-clip: padding-box;
+    overflow: visible;
+  }
+
+  .astryx-table__sticky::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-color: var(--table-row-overlay, transparent);
+    transition: background-color var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+  }
+
+  .astryx-table__sticky--start::after,
+  .astryx-table__sticky--end::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 6px;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .astryx-table__sticky--start::after {
+    inset-inline-end: 0;
+    transform: translateX(100%);
+    opacity: var(--table-sticky-shadow-start, 0);
+    background-image: linear-gradient(to right, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  .astryx-table__sticky--end::after {
+    inset-inline-start: 0;
+    transform: translateX(-100%);
+    opacity: var(--table-sticky-shadow-end, 0);
+    background-image: linear-gradient(to left, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  [dir='rtl'] .astryx-table__sticky--start::after {
+    transform: translateX(-100%);
+    background-image: linear-gradient(to left, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  [dir='rtl'] .astryx-table__sticky--end::after {
+    transform: translateX(100%);
+    background-image: linear-gradient(to right, var(--astryx-color-shadow, #0000001a), transparent);
+  }
+
+  .astryx-table-menu {
+    position: fixed;
+    z-index: var(--astryx-popover-z-index, 1000);
+    min-width: 10rem;
+    padding: var(--astryx-spacing-1, 4px);
+    border: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#ebebeb, #ffffff1a));
+    border-radius: var(--astryx-radius-element, 0.625rem);
+    background: var(--astryx-color-background-card, #fff);
+    box-shadow: var(--astryx-popover-shadow, 0 4px 8px #0000001a);
+  }
+
+  .astryx-table-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+    width: 100%;
+    margin: 0;
+    padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);
+    border: 0;
+    border-radius: var(--astryx-radius-inner, 0.375rem);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .astryx-table-menu__item:hover,
+  .astryx-table-menu__item:focus-visible {
+    background: var(--astryx-color-overlay-hover, light-dark(#0000000d, #ffffff0d));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-table__chevron-icon,
+    .astryx-table__sticky::before,
+    .astryx-table__sticky--start::after,
+    .astryx-table__sticky--end::after {
+      transition: none;
+    }
+  }
 }

package/styles/text-area.css

@@ -18,6 +18,23 @@
     transition: border-color 130ms cubic-bezier(0.24, 1, 0.4, 1);
   }
 
+  .astryx-text-area-count {
+    position: absolute;
+    right: var(--astryx-spacing-2, 8px);
+    bottom: var(--astryx-spacing-1, 4px);
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--astryx-color-text-secondary, #525252);
+  }
+
+  .astryx-text-area-count[data-over='true'] {
+    color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-text-area:has(.astryx-text-area-count) {
+    padding-bottom: var(--astryx-spacing-5, 20px);
+  }
+
   .astryx-text-area[data-size='sm'] {
     min-height: var(--astryx-text-area-min-height-sm, 64px);
     padding: var(--astryx-spacing-1, 4px) var(--astryx-spacing-2, 8px);

package/styles/text-input.css

@@ -82,6 +82,11 @@
     height: 16px;
   }
 
+  .astryx-text-input-end > .astryx-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   .astryx-text-input > .astryx-field-icon {
     color: var(--astryx-input-status-color);
   }

package/styles/toast.css

@@ -155,6 +155,13 @@
     overflow-wrap: anywhere;
   }
 
+  .astryx-toast__end {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
   .astryx-toast__close {
     display: inline-flex;
     align-items: center;

package/styles/toolbar.css

@@ -47,6 +47,17 @@
     min-width: 0;
   }
 
+  /*
+   * The start slot is a row. A title stack inside it is another row whose
+   * column of text would otherwise shrink to its longest word (min-content)
+   * and stack one word per line. Give those stacks the slot's width instead.
+   */
+  .astryx-toolbar__slot--start > *,
+  .astryx-toolbar__slot--start .astryx-stack {
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .astryx-toolbar__slot--center { justify-content: center; overflow: hidden; }
   .astryx-toolbar__slot--end { justify-content: flex-end; margin-inline-start: auto; }
   .astryx-toolbar--centered .astryx-toolbar__slot--end { margin-inline-start: 0; }

package/styles.css

@@ -58,6 +58,7 @@
 @import './styles/overflow-list.css';
 @import './styles/overlay.css';
 @import './styles/popover.css';
+@import './styles/power-search.css';
 @import './styles/progress-bar.css';
 @import './styles/radio.css';
 @import './styles/resize-handle.css';

package/dist/Avatar-5s3HSrtN.js

@@ -1,136 +0,0 @@
-import { n as AvatarGroupContext, t as resolveSize } from "./utils-C9r3UD_y.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref } from "vue";
-import "../styles/avatar.css";
-//#region src/Avatar/Avatar.vue
-const _hoisted_1$1 = { class: "astryx-avatar__content" };
-const _hoisted_2 = ["src"];
-const _hoisted_3 = ["src"];
-const _hoisted_4 = {
-	key: 0,
-	class: "astryx-avatar__status"
-};
-const INITIALS_FONT_SIZE_RATIO = 16 / 36;
-const DEFAULT_ICON_RATIO = .6;
-const _sfc_main$1 = /*@__PURE__*/ defineComponent({
-	__name: "Avatar",
-	props: {
-		alt: {},
-		fallbackSrc: {},
-		name: {},
-		size: { default: "md" },
-		shape: { default: "circle" },
-		src: {}
-	},
-	emits: ["error"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const erroredSrc = ref(void 0);
-		const erroredFallbackSrc = ref(void 0);
-		const avatarGroup = inject(AvatarGroupContext, void 0);
-		const resolvedSize = computed(() => avatarGroup?.size.value ?? props.size);
-		const resolvedShape = computed(() => avatarGroup?.shape.value ?? props.shape);
-		const numericSize = computed(() => resolveSize(resolvedSize.value));
-		const groupStyle = computed(() => {
-			if (!avatarGroup) return {};
-			return {
-				marginInlineStart: `${-avatarGroup.overlap.value}px`,
-				borderWidth: "2px"
-			};
-		});
-		const rootStyle = computed(() => ({
-			width: `${numericSize.value}px`,
-			height: `${numericSize.value}px`
-		}));
-		const showImage = computed(() => props.src && erroredSrc.value !== props.src);
-		const showFallbackImage = computed(() => !showImage.value && props.fallbackSrc && erroredFallbackSrc.value !== props.fallbackSrc);
-		const meaningfulName = computed(() => {
-			return typeof props.name === "string" && props.name.trim() !== "" ? props.name.trim() : void 0;
-		});
-		const meaningfulAlt = computed(() => {
-			return typeof props.alt === "string" && props.alt.trim() !== "" ? props.alt.trim() : void 0;
-		});
-		const initials = computed(() => {
-			if (!meaningfulName.value) return "";
-			const words = meaningfulName.value.split(/\s+/);
-			const first = words.at(0);
-			const last = words.length > 1 ? words.at(-1) : void 0;
-			const initial = (word) => {
-				if (!word) return "";
-				const match = word.match(/[\p{L}\p{N}]/u);
-				return match ? match[0].toUpperCase() : "";
-			};
-			return `${initial(first)}${initial(last)}`;
-		});
-		const showInitials = computed(() => !showImage.value && !showFallbackImage.value && initials.value !== "");
-		const showIcon = computed(() => !showImage.value && !showFallbackImage.value && initials.value === "");
-		const accessibleName = computed(() => {
-			return meaningfulAlt.value || meaningfulName.value;
-		});
-		const a11yProps = computed(() => {
-			if (accessibleName.value) return {
-				"role": "img",
-				"aria-label": accessibleName.value
-			};
-			return {
-				"role": "presentation",
-				"aria-hidden": "true"
-			};
-		});
-		function handleImageError(event) {
-			if (props.src) erroredSrc.value = props.src;
-			emit("error", event);
-		}
-		function handleFallbackError() {
-			if (props.fallbackSrc) erroredFallbackSrc.value = props.fallbackSrc;
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({
-				class: ["astryx-avatar", [`astryx-avatar--${resolvedShape.value}`, { "astryx-avatar--group-item": unref(avatarGroup) }]],
-				style: [rootStyle.value, groupStyle.value]
-			}, a11yProps.value), [createElementVNode("span", _hoisted_1$1, [showImage.value ? (openBlock(), createElementBlock("img", {
-				key: 0,
-				class: "astryx-avatar__image",
-				src: __props.src,
-				alt: "",
-				onError: handleImageError
-			}, null, 40, _hoisted_2)) : showFallbackImage.value ? (openBlock(), createElementBlock("img", {
-				key: 1,
-				class: "astryx-avatar__image",
-				src: __props.fallbackSrc,
-				alt: "",
-				onError: handleFallbackError
-			}, null, 40, _hoisted_3)) : showInitials.value ? (openBlock(), createElementBlock("span", {
-				key: 2,
-				class: "astryx-avatar__fallback astryx-avatar__fallback--initials",
-				style: normalizeStyle({ fontSize: `${numericSize.value * INITIALS_FONT_SIZE_RATIO}px` })
-			}, toDisplayString(initials.value), 5)) : showIcon.value ? (openBlock(), createElementBlock("span", {
-				key: 3,
-				class: "astryx-avatar__fallback astryx-avatar__fallback--icon",
-				style: normalizeStyle({ fontSize: `${numericSize.value * DEFAULT_ICON_RATIO}px` })
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
-				viewBox: "0 0 24 24",
-				fill: "currentColor",
-				"aria-hidden": "true"
-			}, [createElementVNode("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })], -1))])], 4)) : createCommentVNode("v-if", true)]), _ctx.$slots.status ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "status")])) : createCommentVNode("v-if", true)], 16);
-		};
-	}
-});
-//#endregion
-//#region src/Avatar/AvatarStatusDot.vue
-const _hoisted_1 = ["data-variant"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	__name: "AvatarStatusDot",
-	props: { variant: { default: "neutral" } },
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
-				class: "astryx-avatar-status-dot",
-				"data-variant": __props.variant,
-				"aria-hidden": "true"
-			}, null, 8, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { _sfc_main$1 as n, _sfc_main as t };

package/dist/Badge-Ba0EwsTj.js

@@ -1,19 +0,0 @@
-import { createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
-import "../styles/badge.css";
-//#region src/Badge/Badge.vue
-const _hoisted_1 = ["data-variant"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "Badge",
-	__name: "Badge",
-	props: { variant: { default: "neutral" } },
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
-				class: "astryx-badge",
-				"data-variant": __props.variant
-			}, [renderSlot(_ctx.$slots, "icon"), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };