@astryx-vue/core 0.1.3 → 0.2.1

package/dist/types-BKcxXW--.d.ts

@@ -0,0 +1,114 @@
+import { Component, VNodeChild } from "vue";
+//#region src/Icon/types.d.ts
+/**
+ * Icon sizes are expressed in `rem` so they scale with the root font-size.
+ * Values are the px-equivalents at a 16px root: 12, 16, 20, and 24px.
+ */
+type IconSize = 'xsm' | 'sm' | 'md' | 'lg';
+interface IconColorMap {
+  accent: true;
+  blue: true;
+  cyan: true;
+  disabled: true;
+  error: true;
+  gray: true;
+  green: true;
+  inherit: true;
+  orange: true;
+  pink: true;
+  primary: true;
+  purple: true;
+  red: true;
+  secondary: true;
+  success: true;
+  teal: true;
+  tertiary: true;
+  warning: true;
+  yellow: true;
+}
+type IconColor = Extract<keyof IconColorMap, string>;
+/**
+ * The semantic names of the artwork astryx-vue keeps for its own chrome.
+ *
+ * A name describes what the icon is for, not one particular drawing, so a theme
+ * can replace the artwork with one declaration. Applications never pass these
+ * names: the artwork is a library implementation detail, and a `icon` prop or
+ * slot takes a CSS icon class or the application's own component instead.
+ */
+type IconName = 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'check' | 'moreHorizontal' | 'copy' | 'calendar' | 'clock' | 'upload' | 'arrowUp' | 'arrowDown' | 'close' | 'funnel' | 'image';
+/**
+ * A built-in name, or any other string.
+ *
+ * The `(string & {})` intersection keeps the built-in names available for
+ * autocomplete while allowing keys contributed by a component or application.
+ */
+type ExtendedIconName = IconName | (string & {});
+interface IconProps {
+  /**
+   * Iconify icon to draw, as `collection:icon`.
+   *
+   * `carbon:settings` reads the `settings` icon from the Carbon collection.
+   * `carbon-settings` is the same icon when that collection is registered.
+   * The component does not ship the artwork: install `@iconify-json/carbon`
+   * (or another collection) and register it with the `astryxIcons` Vite
+   * plugin, or call `addIcon` / `addCollection`.
+   *
+   * With no `size`, the icon is `1em` square and uses `currentColor`, so it
+   * follows the surrounding text and the sized slots on Button, IconButton,
+   * and fields.
+   */
+  name?: string;
+  /**
+   * The icon to render. Three forms are accepted:
+   *
+   * - a string, treated as a CSS icon class you provide — for example an
+   *   UnoCSS icon such as `'i-carbon-search'`, or your own class. The class
+   *   paints the inside of the sized box, so a utility that sets
+   *   `width`/`height: 100%` fills the icon instead of replacing its size;
+   * - a name from the library's own chrome, which only the components use;
+   * - a component, rendered as it is.
+   *
+   * Omit it when `name` or the default slot provides the artwork instead.
+   * `name` wins when both are set.
+   */
+  icon?: ExtendedIconName | Component;
+  /**
+   * The color of the icon.
+   *
+   * `inherit` (the default) leaves the icon at the surrounding text color,
+   * which is what you want for an icon next to a label. Use a semantic color
+   * only when the color itself carries meaning.
+   *
+   * @default 'inherit'
+   */
+  color?: IconColor;
+  /**
+   * The size of the icon.
+   *
+   * An explicit value wins. When omitted, a `name` icon stays `1em` so it
+   * scales with the text around it. Any other icon uses the nearest default
+   * supplied by an owning astryx-vue component, then falls back to `md`.
+   */
+  size?: IconSize;
+  /**
+   * Accessible name for the icon.
+   *
+   * Set it only when the icon is meaningful on its own, such as a standalone
+   * status glyph with no adjacent text. A non-empty `label` renders the icon as
+   * `role="img"` with this string as `aria-label`; omitting it (or passing an
+   * empty string) keeps the icon `aria-hidden="true"` as decoration.
+   *
+   * Do not set `label` when an interactive parent such as a button or a link
+   * already names the control, or screen readers announce the name twice.
+   */
+  label?: string;
+}
+interface IconSlots {
+  /**
+   * The SVG markup to render. Use it instead of the `icon` prop when the
+   * artwork is written inline.
+   */
+  default?: () => VNodeChild;
+}
+//#endregion
+export { IconSize as a, IconProps as i, IconColor as n, IconSlots as o, IconName as r, ExtendedIconName as t };

package/dist/types-Bt-lSgYX.d.ts

@@ -0,0 +1,65 @@
+//#region src/Text/types.d.ts
+type TextType = 'body' | 'large' | 'label' | 'supporting' | 'code' | 'display-1' | 'display-2' | 'display-3';
+type TextSize = 'sm' | 'md' | 'lg' | 'xl';
+type TextColor = 'primary' | 'secondary' | 'accent' | 'disabled' | 'placeholder' | 'inherit';
+type TextWeight = 'regular' | 'normal' | 'medium' | 'semibold' | 'bold';
+type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
+type TextWordBreak = 'normal' | 'break-word' | 'break-all';
+type TextDisplay = 'block' | 'inline';
+type TextAs = 'span' | 'p' | 'div' | 'label';
+interface TextProps {
+  /**
+   * Semantic text type. Determines size, weight, and line-height.
+   * @default 'body'
+   */
+  type?: TextType;
+  /**
+   * Explicit font size override.
+   */
+  size?: TextSize;
+  /**
+   * Text color.
+   * @default 'primary'
+   */
+  color?: TextColor;
+  /**
+   * Font weight override. `normal` is the same weight as `regular`.
+   */
+  weight?: TextWeight;
+  /**
+   * CSS `text-wrap` behavior.
+   */
+  textWrap?: TextWrap;
+  /**
+   * How long unbroken strings break inside a constrained width.
+   */
+  wordBreak?: TextWordBreak;
+  /**
+   * Draws a line through the text.
+   * @default false
+   */
+  hasStrikethrough?: boolean;
+  /**
+   * Uses tabular figures so digits line up across rows.
+   * @default false
+   */
+  hasTabularNumbers?: boolean;
+  /**
+   * Display type.
+   * @default 'inline'
+   */
+  display?: TextDisplay;
+  /**
+   * HTML element to render.
+   * @default 'span'
+   */
+  as?: TextAs;
+  /**
+   * Maximum lines before truncation. 0 means no truncation.
+   * A positive value forces block layout so the ellipsis has a width.
+   * @default 0
+   */
+  maxLines?: number;
+}
+//#endregion
+export { TextSize as a, TextWordBreak as c, TextProps as i, TextWrap as l, TextColor as n, TextType as o, TextDisplay as r, TextWeight as s, TextAs as t };

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.1.3",
+  "version": "0.2.1",
   "description": "Vue components for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -44,6 +44,10 @@
       "types": "./dist/AvatarGroup/index.d.ts",
       "import": "./dist/AvatarGroup/index.js"
     },
+    "./Carousel": {
+      "types": "./dist/Carousel/index.d.ts",
+      "import": "./dist/Carousel/index.js"
+    },
     "./CheckboxList": {
       "types": "./dist/CheckboxList/index.d.ts",
       "import": "./dist/CheckboxList/index.js"
@@ -80,14 +84,30 @@
       "types": "./dist/FormLayout/index.d.ts",
       "import": "./dist/FormLayout/index.js"
     },
+    "./Icon": {
+      "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"
     },
+    "./Lightbox": {
+      "types": "./dist/Lightbox/index.d.ts",
+      "import": "./dist/Lightbox/index.js"
+    },
     "./MetadataList": {
       "types": "./dist/MetadataList/index.d.ts",
       "import": "./dist/MetadataList/index.js"
     },
+    "./Outline": {
+      "types": "./dist/Outline/index.d.ts",
+      "import": "./dist/Outline/index.js"
+    },
     "./RadioList": {
       "types": "./dist/RadioList/index.d.ts",
       "import": "./dist/RadioList/index.js"
@@ -168,6 +188,10 @@
       "types": "./dist/Table/index.d.ts",
       "import": "./dist/Table/index.js"
     },
+    "./Theme": {
+      "types": "./dist/Theme/index.d.ts",
+      "import": "./dist/Theme/index.js"
+    },
     "./Thumbnail": {
       "types": "./dist/Thumbnail/index.d.ts",
       "import": "./dist/Thumbnail/index.js"
@@ -176,6 +200,10 @@
       "types": "./dist/TimeInput/index.d.ts",
       "import": "./dist/TimeInput/index.js"
     },
+    "./Timer": {
+      "types": "./dist/Timer/index.d.ts",
+      "import": "./dist/Timer/index.js"
+    },
     "./Timestamp": {
       "types": "./dist/Timestamp/index.d.ts",
       "import": "./dist/Timestamp/index.js"
@@ -437,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/carousel.css

@@ -0,0 +1,120 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  .astryx-carousel {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .astryx-carousel__scroller {
+    display: flex;
+    align-items: center;
+    gap: var(--astryx-carousel-gap, var(--astryx-spacing-1, 4px));
+    width: 100%;
+    min-width: 0;
+    padding-inline: var(--astryx-carousel-padding, 0);
+    padding-bottom: 1px;
+    margin-bottom: -1px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scroll-behavior: smooth;
+    scroll-padding-inline: var(--astryx-carousel-padding, 0);
+    scrollbar-width: none;
+  }
+
+  .astryx-carousel__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-carousel__scroller {
+      scroll-behavior: auto;
+    }
+  }
+
+  .astryx-carousel__scroller:focus-visible {
+    outline: var(--astryx-focus-outline-width, 2px) var(--astryx-focus-outline-style, solid) var(--astryx-focus-outline-color, var(--astryx-color-accent, #0074e2));
+    outline-offset: var(--astryx-focus-outline-offset, 3px);
+  }
+
+  .astryx-carousel__scroller[data-snap] {
+    scroll-snap-type: x mandatory;
+  }
+
+  .astryx-carousel__scroller[data-fade='start'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__scroller[data-fade='end'] {
+    mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__scroller[data-fade='both'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px), #000 calc(100% - var(--astryx-spacing-1, 4px)), rgb(0 0 0 / 30%) calc(100% - 2px), transparent 100%);
+  }
+
+  [dir='rtl'] .astryx-carousel__scroller[data-fade='start'] {
+    mask-image: linear-gradient(to left, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  [dir='rtl'] .astryx-carousel__scroller[data-fade='end'] {
+    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 30%) 2px, #000 var(--astryx-spacing-1, 4px));
+  }
+
+  .astryx-carousel__item {
+    display: flex;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+
+  .astryx-carousel__controls {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    pointer-events: none;
+  }
+
+  .astryx-carousel__pill {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--astryx-radius-full, 9999px);
+    background-color: var(--astryx-color-background-popover, #fff);
+    box-shadow: var(--astryx-shadow-med, 0 2px 4px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 10%));
+    pointer-events: auto;
+    opacity: 1;
+    transition: opacity var(--astryx-duration-fast, 125ms) var(--astryx-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
+    --astryx-button-radius: var(--astryx-radius-full, 9999px);
+  }
+
+  .astryx-carousel__pill--start {
+    transform: translateX(-50%);
+  }
+
+  .astryx-carousel__pill--end {
+    transform: translateX(50%);
+  }
+
+  [dir='rtl'] .astryx-carousel__pill--start {
+    transform: translateX(50%);
+  }
+
+  [dir='rtl'] .astryx-carousel__pill--end {
+    transform: translateX(-50%);
+  }
+
+  .astryx-carousel__pill[data-hidden] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  [dir='rtl'] .astryx-carousel__pill .astryx-icon {
+    transform: scaleX(-1);
+  }
+}

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;