@astryx-vue/core 0.2.0 → 0.2.1

package/dist/{index-B8MbfMwV.d.ts → types-DDAAT1Xd.d.ts}

@@ -1,10 +1,17 @@
 import { a as ButtonProps } from "./types-WlmsNL1I.js";
-import { c as ItemTarget } from "./types-CAZY4Xua.js";
 import { n as LayerPlacement, t as LayerAlignment } from "./position-DFW5ymAF.js";
-import { Component, ComputedRef, InjectionKey, VNodeChild } from "vue";
+import { c as ItemTarget } from "./types-CAZY4Xua.js";
+import { Component, VNodeChild } from "vue";
 //#region src/DropdownMenu/types.d.ts
 /** Size of the menu, derived from the trigger button's size. */
 type DropdownMenuSize = 'sm' | 'md' | 'lg';
+/**
+ * Where the menu opens.
+ *
+ * `popover` hangs off the trigger. `bottom-sheet` rises from the bottom edge.
+ * `adaptive` uses the sheet only on a compact touch surface.
+ */
+type DropdownMenuPresentation = 'adaptive' | 'bottom-sheet' | 'popover';
 /** Visual variant of one menu row. */
 type DropdownMenuItemVariant = 'default' | 'destructive';
 /**
@@ -132,6 +139,13 @@ interface DropdownMenuProps {
    * @default 'below'
    */
   placement?: LayerPlacement;
+  /**
+   * `popover` anchors to the trigger. `bottom-sheet` uses a bottom sheet.
+   * `adaptive` chooses the sheet on a compact touch surface and a popover
+   * otherwise.
+   * @default 'popover'
+   */
+  presentation?: DropdownMenuPresentation;
   /**
    * How the menu aligns with the trigger along the placement axis.
    * @default 'start'
@@ -247,85 +261,25 @@ interface DropdownMenuGroupSlots {
   /** Rich content replacing the `title` prop, still used as the group's name. */
   title?: () => VNodeChild;
 }
-//#endregion
-//#region src/DropdownMenu/context.d.ts
-/**
- * What a `DropdownMenu` tells the rows inside it.
- *
- * `menuSize` is a computed ref rather than a plain value: a row reads it after
- * mount, so a snapshot would leave every row stuck at the size the trigger had
- * when the menu was created.
- */
-interface DropdownMenuContextValue {
-  /** Closes the menu and returns focus to the trigger. */
-  closeMenu: () => void;
-  /** Size of the menu, derived from the trigger button's size. */
-  menuSize: ComputedRef<DropdownMenuSize>;
+interface DropdownMenuSubMenuProps {
+  /** Row label. */
+  label?: string | number;
+  /** Icon before the label. A CSS class or a component. */
+  icon?: string | Component;
+  /** Secondary line under the label. */
+  description?: string | number;
+  /**
+   * Whether the row can open its flyout.
+   * @default false
+   */
+  isDisabled?: boolean;
+}
+interface DropdownMenuSubMenuSlots {
+  /** The rows of the nested menu. */
+  default?: () => VNodeChild;
+  icon?: () => VNodeChild;
+  label?: () => VNodeChild;
+  description?: () => VNodeChild;
 }
-/** The surrounding menu, or `undefined` when a row stands alone. */
-declare function useDropdownMenuContext(): DropdownMenuContextValue | undefined;
-//#endregion
-//#region src/DropdownMenu/DropdownMenu.vue.d.ts
-type __VLS_Props = DropdownMenuProps;
-type __VLS_Slots$2 = DropdownMenuSlots;
-type __VLS_ModelProps = {
-  'isMenuOpen'?: boolean | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base$2: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: () => any;
-  openChange: (isOpen: boolean) => any;
-  "update:isMenuOpen": (...args: unknown[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  onClick?: (() => any) | undefined;
-  onOpenChange?: ((isOpen: boolean) => any) | undefined;
-  "onUpdate:isMenuOpen"?: ((...args: unknown[]) => any) | undefined;
-}>, {
-  button: DropdownMenuButtonProps;
-  placement: LayerPlacement;
-  alignment: LayerAlignment;
-  hasChevron: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$3: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
-declare const _default$3: typeof __VLS_export$3;
-type __VLS_WithSlots$2<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-//#region src/DropdownMenu/DropdownMenuDivider.vue.d.ts
-declare const __VLS_export$2: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default$2: typeof __VLS_export$2;
-//#endregion
-//#region src/DropdownMenu/DropdownMenuGroup.vue.d.ts
-type __VLS_Slots$1 = DropdownMenuGroupSlots;
-declare const __VLS_base$1: import("vue").DefineComponent<DropdownMenuGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownMenuGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
-declare const _default$1: typeof __VLS_export$1;
-type __VLS_WithSlots$1<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-//#region src/DropdownMenu/DropdownMenuItem.vue.d.ts
-type __VLS_Slots = DropdownMenuItemSlots;
-declare const __VLS_base: import("vue").DefineComponent<DropdownMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<DropdownMenuItemProps> & Readonly<{
-  onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {
-  isDisabled: boolean;
-  variant: DropdownMenuItemVariant;
-  hasCloseOnSelect: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
 //#endregion
-export { DropdownMenuTriggerProps as S, DropdownMenuOption as _, DropdownMenuContextValue as a, DropdownMenuSize as b, DropdownMenuDividerData as c, DropdownMenuGroupSlots as d, DropdownMenuItemData as f, DropdownMenuItemVariant as g, DropdownMenuItemSlots as h, _default$3 as i, DropdownMenuEmits as l, DropdownMenuItemProps as m, _default$1 as n, useDropdownMenuContext as o, DropdownMenuItemEmits as p, _default$2 as r, DropdownMenuButtonProps as s, _default as t, DropdownMenuGroupProps as u, DropdownMenuProps as v, DropdownMenuSlots as x, DropdownMenuSection as y };
+export { DropdownMenuSubMenuProps as _, DropdownMenuGroupSlots as a, DropdownMenuItemProps as c, DropdownMenuOption as d, DropdownMenuPresentation as f, DropdownMenuSlots as g, DropdownMenuSize as h, DropdownMenuGroupProps as i, DropdownMenuItemSlots as l, DropdownMenuSection as m, DropdownMenuDividerData as n, DropdownMenuItemData as o, DropdownMenuProps as p, DropdownMenuEmits as r, DropdownMenuItemEmits as s, DropdownMenuButtonProps as t, DropdownMenuItemVariant as u, DropdownMenuSubMenuSlots as v, DropdownMenuTriggerProps as y };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -88,6 +88,10 @@
       "types": "./dist/Icon/index.d.ts",
       "import": "./dist/Icon/index.js"
     },
+    "./icons": {
+      "types": "./dist/Icon/plugin.d.ts",
+      "import": "./dist/Icon/plugin.js"
+    },
     "./Layout": {
       "types": "./dist/Layout/index.d.ts",
       "import": "./dist/Layout/index.js"
@@ -461,6 +465,7 @@
     "micromark-extension-gfm": "3.0.0"
   },
   "devDependencies": {
+    "@types/node": "26.6.4",
     "@vue/compiler-sfc": "3.5.43",
     "tsdown": "0.23.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",

package/styles/avatar.css

@@ -9,6 +9,20 @@
     vertical-align: middle;
   }
 
+  .astryx-avatar--interactive {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .astryx-avatar--interactive:focus-visible {
+    outline: 2px solid var(--astryx-color-border-focus, #0074e2);
+    outline-offset: 2px;
+  }
+
   .astryx-avatar--circle {
     border-radius: var(--astryx-radius-full, 9999px);
   }

package/styles/badge.css

@@ -17,6 +17,14 @@
     line-height: var(--astryx-text-supporting-leading, 1.6667);
     vertical-align: middle;
     white-space: nowrap;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .astryx-badge__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .astryx-badge[data-variant='neutral'] {

package/styles/breadcrumbs.css

@@ -68,9 +68,14 @@
     text-decoration: none;
   }
 
-  .astryx-breadcrumb-item__icon {
+  .astryx-breadcrumb-item__icon,
+  .astryx-breadcrumb-item__chevron {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
   }
+
+  .astryx-breadcrumb-item__chevron {
+    margin-inline-start: var(--astryx-spacing-0-5, 2px);
+  }
 }

package/styles/button.css

@@ -181,6 +181,19 @@
     font-size: 20px;
   }
 
+  /* The end slot has no fixed box of its own. A named icon still matches the leading slot. */
+  .astryx-button__end > .astryx-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+  }
+
+  .astryx-button[data-size='lg'] .astryx-button__end > .astryx-icon {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+  }
+
   .astryx-button__icon > *,
   .astryx-button__end > * {
     display: block;

package/styles/calendar.css

@@ -114,6 +114,22 @@
     box-shadow: inset 0 0 0 1px var(--astryx-color-border-emphasized, #d4d4d4);
   }
 
+  .astryx-calendar[data-months='2'] {
+    display: flex;
+    gap: var(--astryx-spacing-4, 16px);
+  }
+
+  .astryx-calendar[data-months='2'] .astryx-calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .astryx-calendar-cell.is-in-range {
+    background: color-mix(in srgb, light-dark(#1b1b1b, #f1f1f1) 12%, transparent);
+    border-radius: 0;
+  }
+
   .astryx-calendar-cell.is-selected {
     background: light-dark(#1b1b1b, #f1f1f1);
     color: light-dark(#ffffff, #111111);

package/styles/card.css

@@ -33,6 +33,8 @@
     --layout-padding-own-outer-y: initial;
     --layout-padding-outer-x: var(--_card-padding-inline-start);
     --layout-padding-outer-y: var(--_card-padding-block-start);
+    --layout-padding-inner-x: var(--_card-padding-inline-start);
+    --layout-padding-inner-y: var(--_card-padding-block-start);
   }
 
   .astryx-card[data-scrollable='true'] {

package/styles/chat.css

@@ -296,7 +296,7 @@
   .astryx-chat-message__metadata {
     box-sizing: border-box;
     max-width: min(100%, max(80%, 280px));
-    min-width: 0;
+    min-width: min(100%, 280px);
   }
 
   .astryx-chat-message-bubble__frame {
@@ -306,7 +306,10 @@
     box-sizing: border-box;
     width: fit-content;
     max-width: min(100%, max(80%, 280px));
-    min-width: 0;
+    /* fit-content with min-width: 0 collapses to a few characters when the
+       parent's width is cyclic. 280px is the original floor; cap it at the
+       column so a narrow thread wraps the text instead of overflowing. */
+    min-width: min(100%, 280px);
   }
 
   /* Same column gap as the original bubble stack. Metadata’s -6px / +4px

package/styles/dropdown-menu.css

@@ -20,6 +20,17 @@
     );
   }
 
+  .astryx-dropdown-menu.is-sheet {
+    position: static;
+    top: auto;
+    left: auto;
+    width: 100%;
+    max-width: none;
+    background: transparent;
+    box-shadow: none;
+    animation: none;
+  }
+
   .astryx-dropdown-menu {
     box-sizing: border-box;
     position: fixed;

package/styles/icon.css

@@ -7,8 +7,16 @@
     justify-content: center;
     flex-shrink: 0;
     box-sizing: border-box;
-    vertical-align: middle;
-    color: inherit;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    color: currentcolor;
+    /*
+     * A 1em box with vertical-align: middle sits on the descender, so the
+     * drawing looks low next to the letters. -0.125em is the Iconify offset
+     * that puts the box on the text baseline.
+     */
+    vertical-align: -0.125em;
   }
 
   /*
@@ -32,13 +40,35 @@
   }
 
   /*
-   * An icon passed as a component or written into the slot keeps the size its
-   * owner gives it; the box owns that size through width, height, and
-   * font-size.
+   * The wrapper keeps a box. display:contents would make the SVG's 100%
+   * resolve against the icon's parent, so a 1em icon would grow to the line.
    */
-  .astryx-icon > svg {
-    width: 1em;
-    height: 1em;
+  .astryx-icon__svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .astryx-icon > svg,
+  .astryx-icon__svg > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: currentcolor;
+  }
+
+  /*
+   * A class the caller supplies, such as an UnoCSS icon, paints this box.
+   * Those utilities are unlayered and set width/height to 100%, so they have
+   * to live on the inner element. On the box itself they would replace the
+   * size below and stretch the icon to its flex parent.
+   */
+  .astryx-icon__external {
+    display: block;
+    width: 100%;
+    height: 100%;
   }
 
   .astryx-icon[data-size='xsm'] {

package/styles/link.css

@@ -44,6 +44,11 @@
     color: inherit;
   }
 
+  .astryx-link.astryx-link--standalone {
+    font-size: var(--astryx-font-size-body, var(--text-body-size, 1rem));
+    line-height: var(--astryx-line-height-body, var(--text-body-leading, 1.5));
+  }
+
   .astryx-link__external {
     display: inline-block;
     font-size: 0.75em;

package/styles/number-input.css

@@ -26,6 +26,28 @@
     height: var(--astryx-input-height-lg, 36px);
   }
 
+  .astryx-number-input[data-status='error'] {
+    border-color: var(--astryx-input-error, #e33f4a);
+  }
+
+  .astryx-number-input[data-status='warning'] {
+    border-color: var(--astryx-input-warning, #a67a00);
+  }
+
+  .astryx-number-input[data-status='success'] {
+    border-color: var(--astryx-input-success, #198100);
+  }
+
+  .astryx-number-input-units,
+  .astryx-number-input-clear {
+    display: inline-flex;
+    align-items: center;
+    padding-inline: var(--astryx-spacing-2, 8px);
+    color: var(--astryx-color-text-secondary, #525252);
+    background: transparent;
+    border: 0;
+  }
+
   .astryx-number-input:focus-within {
     border-color: var(--astryx-input-focus, #262626);
     box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--astryx-input-focus, #262626) 15%, transparent);

package/styles/pagination.css

@@ -48,7 +48,8 @@
     flex-wrap: nowrap;
   }
 
-  .astryx-pagination-compact {
+  .astryx-pagination-compact,
+  .astryx-pagination-count {
     display: none;
     flex-shrink: 0;
     align-items: center;
@@ -56,6 +57,49 @@
     white-space: nowrap;
   }
 
+  .astryx-pagination-count {
+    display: inline-flex;
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+  }
+
+  .astryx-pagination-dots {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-spacing-2, 8px);
+  }
+
+  .astryx-pagination-dot {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--astryx-radius-full, 999px);
+    background: var(--astryx-color-border, #d4d4d4);
+    cursor: pointer;
+  }
+
+  .astryx-pagination-dot.is-active {
+    background: var(--astryx-color-text-primary, #171717);
+  }
+
+  .astryx-pagination-dot:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .astryx-pagination--sm .astryx-pagination-button,
+  .astryx-pagination--sm .astryx-pagination-page {
+    min-width: var(--astryx-size-element-sm, 28px);
+    height: var(--astryx-size-element-sm, 28px);
+    font-size: var(--astryx-text-supporting-size, 0.75rem);
+  }
+
+  .astryx-pagination--sm .astryx-pagination-dot {
+    width: 6px;
+    height: 6px;
+  }
+
   .astryx-pagination-button,
   .astryx-pagination-page {
     position: relative;

package/styles/progress-bar.css

@@ -76,6 +76,10 @@
     background: var(--astryx-progress-bar-error-fill, var(--astryx-input-error, #ff705d));
   }
 
+  .astryx-progress-bar[data-variant='accent'] .astryx-progress-bar-fill {
+    background: var(--astryx-progress-bar-accent-fill, var(--astryx-color-accent, #25252a));
+  }
+
   .astryx-progress-bar[data-variant='info'] .astryx-progress-bar-fill {
     background: var(--astryx-progress-bar-info-fill, var(--astryx-input-info, #6d9cfe));
   }

package/styles/selector.css

@@ -98,6 +98,29 @@
     box-shadow: none;
   }
 
+  .astryx-selector-field.is-ghost {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  @media (hover: hover) {
+    .astryx-selector-field.is-ghost:hover:not(.is-disabled) {
+      background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));
+      box-shadow: none;
+    }
+  }
+
+  .astryx-selector-field.is-ghost:focus-within,
+  .astryx-selector-field.is-ghost.is-open {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .astryx-selector:has(.astryx-selector-value.is-rich) .astryx-selector-field {
+    height: auto;
+    min-height: var(--astryx-input-height-md, 32px);
+  }
+
   .astryx-selector-field.is-disabled .astryx-selector-trigger {
     cursor: default;
   }
@@ -127,6 +150,11 @@
     color: var(--astryx-color-text-secondary, #525252);
   }
 
+  .astryx-selector-value.is-rich {
+    overflow: visible;
+    white-space: normal;
+  }
+
   .astryx-selector-icon {
     display: flex;
     flex: none;
@@ -188,6 +216,22 @@
     animation-timing-function: var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
   }
 
+  .astryx-selector-listbox.is-sheet {
+    position: static;
+    width: 100%;
+    max-width: none;
+    max-block-size: none;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    animation: none;
+  }
+
+  .astryx-selector-sheet-title {
+    margin-bottom: var(--astryx-spacing-2, 8px);
+    font-weight: var(--astryx-font-weight-medium, 500);
+  }
+
   .astryx-selector-listbox[data-placement='below'] {
     animation-name: astryx-selector-enter-below;
   }
@@ -257,6 +301,20 @@
     cursor: default;
   }
 
+  .astryx-selector-section {
+    padding: var(--astryx-spacing-2, 8px) 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);
+  }
+
+  .astryx-selector-option-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: var(--astryx-spacing-1, 4px);
+  }
+
   .astryx-selector-option-label {
     display: block;
   }

package/styles/tab-list.css

@@ -30,6 +30,21 @@
     padding-bottom: var(--astryx-spacing-1, 4px);
   }
 
+  /* Cancel the container's inline padding so the underline can span the
+     content box. The strip pads the labels back onto the content inset,
+     minus the padding each tab already has. */
+  .astryx-tab-list--full-bleed {
+    margin-inline-start: calc(-1 * var(--container-padding-inline-start, 0px));
+    margin-inline-end: calc(-1 * var(--container-padding-inline-end, 0px));
+    max-width: none;
+    width: calc(100% + var(--container-padding-inline-start, 0px) + var(--container-padding-inline-end, 0px));
+  }
+
+  .astryx-tab-list--full-bleed .astryx-tab-list__strip {
+    padding-inline-start: max(var(--container-padding-inline-start, 0px) - var(--astryx-spacing-3, 12px), 0px);
+    padding-inline-end: max(var(--container-padding-inline-end, 0px) - var(--astryx-spacing-3, 12px), 0px);
+  }
+
   .astryx-tab {
     display: inline-flex;
     align-items: center;

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; }