@astryx-vue/core 0.2.6 → 0.4.0

package/locales/SOURCE.json

@@ -1,7 +1,7 @@
 {
   "repository": "https://github.com/facebook/astryx",
   "path": "packages/core/locales",
-  "commit": "fbc03f7b71eb093eb0283629dbc0820b12fb1710",
+  "commit": "25548b9e71d4243c5e3d922af22deb935bf68e5d",
   "files": [
     "af-ZA.json",
     "ar-SA.json",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/core",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.4.0",
   "description": "Vue 3 components for the unofficial astryx-vue port of Astryx. Not affiliated with Meta.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -140,6 +140,10 @@
       "types": "./dist/ScrollableArea/index.d.ts",
       "import": "./dist/ScrollableArea/index.js"
     },
+    "./Scrollbars": {
+      "types": "./dist/Scrollbars/index.d.ts",
+      "import": "./dist/Scrollbars/index.js"
+    },
     "./Section": {
       "types": "./dist/Section/index.d.ts",
       "import": "./dist/Section/index.js"
@@ -280,6 +284,10 @@
       "types": "./dist/TreeList/index.d.ts",
       "import": "./dist/TreeList/index.js"
     },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js"
+    },
     "./VisuallyHidden": {
       "types": "./dist/VisuallyHidden/index.d.ts",
       "import": "./dist/VisuallyHidden/index.js"
@@ -376,6 +384,18 @@
       "types": "./dist/Markdown/index.d.ts",
       "import": "./dist/Markdown/index.js"
     },
+    "./Markdown/parser": {
+      "types": "./dist/Markdown/parser/index.d.ts",
+      "import": "./dist/Markdown/parser/index.js"
+    },
+    "./Markdown/plugins": {
+      "types": "./dist/Markdown/plugin-protocol/index.d.ts",
+      "import": "./dist/Markdown/plugin-protocol/index.js"
+    },
+    "./Markdown/plugin-renderer": {
+      "types": "./dist/Markdown/plugin-renderer/index.d.ts",
+      "import": "./dist/Markdown/plugin-renderer/index.js"
+    },
     "./Chat": {
       "types": "./dist/Chat/index.d.ts",
       "import": "./dist/Chat/index.js"
@@ -484,7 +504,8 @@
     "@internationalized/date": "3.12.4",
     "mdast-util-from-markdown": "2.1.0",
     "mdast-util-gfm": "3.1.0",
-    "micromark-extension-gfm": "3.0.0"
+    "micromark-extension-gfm": "3.0.0",
+    "overlayscrollbars": "2.16.0"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -497,7 +518,7 @@
     "vue-tsc": "3.3.12"
   },
   "scripts": {
-    "build": "tsdown",
+    "build": "tsdown && node ./scripts/smoke-markdown-subpaths.mjs",
     "dev": "tsdown --watch",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   }

package/reset.css

@@ -1 +1,364 @@
-@layer astryx.reset;
+/*
+ * @astryx-vue/core/reset.css
+ *
+ * 全局 reset，给页面一个干净、各浏览器一致的起点。
+ * 和 Tailwind Preflight、modern-normalize 是同一类东西。
+ *
+ * 引入后会改变全局标签的默认样式：
+ * - 所有元素 box-sizing: border-box，边框默认 0 宽的实线。
+ * - 去掉标题、段落、列表等的默认外边距和内边距，列表去掉圆点。
+ * - 图片、视频、svg 等替换元素变成块级，img 和 video 自适应容器宽度。
+ * - 表单控件继承父元素的字体和颜色，按钮去掉浏览器自带外观。
+ * - 带交互的元素显示手型指针，禁用的元素显示默认指针。
+ * - ::before、::after、::placeholder 和搜索框的原生清除按钮一并重置。
+ *
+ * 所有选择器都包在 :where() 里，特异性为 0（伪元素写在 :where() 外面，
+ * 因为伪元素放进 :where() 会被整条丢掉）。规则放在最低优先级的
+ * `astryx.reset` 层，其他任何层和没有放进层的样式都能直接覆盖它。
+ *
+ * 用法：
+ *
+ *   import '@astryx-vue/core/reset.css'
+ *   import '@astryx-vue/core/styles.css'
+ *   import '@astryx-vue/themes/neutral.css'
+ *
+ * 层级顺序在每份样式表的第一行声明，所以无论引入顺序怎么排都成立。
+ * 只想在局部使用时，不要引入这个文件，改为给那一块区域自己写样式。
+ */
+
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.reset {
+
+  /* ===========================================================================
+     盒模型
+     =========================================================================== */
+
+  /*
+   * 全局 border-box，padding 和 border 不再撑大元素尺寸。
+   */
+  :where(*), :where(*)::before, :where(*)::after {
+    box-sizing: border-box;
+  }
+
+  /*
+   * 边框重置为 0 宽实线，之后只写 border-width 就能画出边框，
+   * 不必再补 border-style。
+   */
+  :where(*), :where(*)::before, :where(*)::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+
+  /* ===========================================================================
+     文档
+     =========================================================================== */
+
+  /*
+   * 统一行高，阻止 iOS 横竖屏切换时自动放大文字，设置合适的 tab 宽度。
+   *
+   * color-scheme: light dark 声明页面同时支持浅色和深色，
+   * 让 CSS 的 light-dark() 能正确取值。
+   */
+  :where(html) {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    color-scheme: light dark;
+  }
+
+  /*
+   * 去掉 body 默认外边距，开启字体平滑让 macOS / iOS 上的文字更锐利。
+   */
+  :where(body) {
+    margin: 0;
+    line-height: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* ===========================================================================
+     文字
+     =========================================================================== */
+
+  /*
+   * 标题继承字号和字重，由使用者自己决定样式，不依赖各浏览器不同的默认值。
+   */
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+   * 去掉块级文字元素的默认外边距。
+   */
+  :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dd) {
+    margin: 0;
+  }
+
+  /*
+   * 链接继承颜色和下划线，不使用浏览器默认的蓝紫色。
+   */
+  :where(a) {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+   * 修正 Chrome 和 Safari 里的字重。
+   */
+  :where(b, strong) {
+    font-weight: bolder;
+  }
+
+  /*
+   * 等宽字体栈，并修正浏览器给 code 元素的奇怪 em 字号。
+   */
+  :where(code, kbd, samp, pre) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+    font-size: 1em;
+  }
+
+  /*
+   * 修正 small 的字号。
+   */
+  :where(small) {
+    font-size: 80%;
+  }
+
+  /*
+   * sub 和 sup 不撑开行高。
+   */
+  :where(sub, sup) {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  :where(sub) {
+    bottom: -0.25em;
+  }
+
+  :where(sup) {
+    top: -0.5em;
+  }
+
+  /* ===========================================================================
+     列表
+     =========================================================================== */
+
+  /*
+   * 去掉列表的圆点、外边距和内边距。用来做导航或布局的列表
+   * 不该带正文排版样式，需要正文列表时自己写样式。
+   */
+  :where(ol, ul, menu) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ===========================================================================
+     媒体
+     =========================================================================== */
+
+  /*
+   * 替换元素变成块级，消除行内图片下方那条莫名其妙的空隙。
+   */
+  :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+    vertical-align: middle;
+  }
+
+  /*
+   * 图片和视频不超出容器，默认自适应宽度。
+   */
+  :where(img, video) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /*
+   * AspectRatio 的 fit 子元素尺寸。组件样式 `aspect-ratio.css` 里也有同样几条，
+   * 没引入 reset 时靠那里生效。这里再写一遍，是为了让它们排在上面
+   * `height: auto` 的后面：两者同在 reset 层、特异性都是 0，后出现的赢，
+   * 所以不管 reset.css 和组件样式谁先加载，fit 的子元素都能填满容器。
+   */
+  :where([data-astryx-aspect-ratio-override='cover'], [data-astryx-aspect-ratio-override='contain']) > :where(*) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :where([data-astryx-aspect-ratio-override='cover']) > :where(img, video) {
+    object-fit: cover;
+  }
+
+  :where([data-astryx-aspect-ratio-override='contain']) > :where(img, video) {
+    object-fit: contain;
+  }
+
+  /* ===========================================================================
+     表单
+     =========================================================================== */
+
+  /*
+   * 表单控件继承父元素的字体，不用浏览器自带字体。
+   */
+  :where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  /*
+   * 去掉按钮的浏览器默认外观，按钮由使用者自己设计。
+   */
+  :where(button, [type='button'], [type='reset'], [type='submit']) {
+    -webkit-appearance: button;
+    appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  /*
+   * 带交互的元素显示手型指针。
+   */
+  :where(button, [role='button']) {
+    cursor: pointer;
+  }
+
+  /*
+   * 禁用的元素收回一切交互指针：不会响应的控件不该让指针以为它会响应。
+   * 用 default 而不用 not-allowed：被 pointer-events: none 封住的禁用控件
+   * 显示的是祖先的指针，到处统一用一种，比只能画在一半控件上的强指针更好。
+   * 同时覆盖 [aria-disabled]：需要让原因保持可发现的禁用控件
+   * （带提示的按钮、Selector 的触发器、侧边栏导航项）会保持可聚焦，
+   * 用的就是这个属性。
+   */
+  :where(:disabled, [aria-disabled='true']) {
+    cursor: default;
+  }
+
+  /*
+   * textarea 只允许纵向拉伸，避免撑坏布局。
+   */
+  :where(textarea) {
+    resize: vertical;
+  }
+
+  /*
+   * 统一占位文字的不透明度（Firefox 默认会变淡），
+   * 颜色取 --astryx-color-text-secondary，没有这个变量时用中性主题的默认值。
+   */
+  :where(input, textarea)::placeholder {
+    opacity: 1;
+    color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
+  }
+
+  /*
+   * 去掉搜索框在 Chrome 和 Safari 里自带的内边距和清除按钮。
+   */
+  :where([type='search'])::-webkit-search-decoration,
+  :where([type='search'])::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  /*
+   * 去掉 fieldset 的默认样式。
+   */
+  :where(fieldset) {
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(legend) {
+    padding: 0;
+  }
+
+  /* ===========================================================================
+     表格
+     =========================================================================== */
+
+  /*
+   * 合并表格边框，修正 text-indent 和边框颜色的继承。
+   */
+  :where(table) {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  /* ===========================================================================
+     其他
+     =========================================================================== */
+
+  /*
+   * hr 简化成一条顶部边线。
+   */
+  :where(hr) {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  /*
+   * 修正 summary 的显示方式。
+   */
+  :where(summary) {
+    display: list-item;
+  }
+
+  /*
+   * 重置 dialog 的内边距和轮廓。
+   */
+  :where(dialog) {
+    padding: 0;
+    outline: none;
+  }
+
+  /*
+   * 保证 hidden 的元素真的被隐藏。hidden="until-found" 保留浏览器自己的渲染
+   * （content-visibility: hidden），页内查找和文本片段链接仍然能搜到
+   * 里面的内容并把它展开。
+   */
+  :where([hidden]:not([hidden='until-found' i])) {
+    display: none;
+  }
+
+  /*
+   * 去掉 iOS 上点按时的高亮。
+   */
+  :where(html) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* ===========================================================================
+     颜色模式
+     =========================================================================== */
+
+  /*
+   * 把 data-theme 属性映射成 CSS 的 color-scheme。
+   *
+   * 在 <html> 上设置 data-theme，浏览器就知道原生界面（滚动条、表单控件、
+   * 日期选择器）用哪种颜色模式，light-dark() 也能正确取值。
+   * 服务端渲染时直接写在 <html> 上，可以避免主题闪烁：
+   *
+   *   <html lang="en" data-theme="dark">
+   *
+   * 取值："light" | "dark" | 不写（默认 light dark，跟随系统）
+   */
+  :where(html[data-theme="light"]) {
+    color-scheme: light;
+  }
+
+  :where(html[data-theme="dark"]) {
+    color-scheme: dark;
+  }
+
+  :where(html:not([data-theme])) {
+    color-scheme: light dark;
+  }
+}

package/styles/avatar-group.css

@@ -4,13 +4,20 @@
   .astryx-avatar-group {
     display: inline-flex;
     align-items: center;
-    padding-inline-start: var(--astryx-avatar-group-overlap, 0px);
+    /* 每张头像都有负的重叠边距，包括被提示层包住的第一张。这里把起始边距补回来。 */
+    padding-inline-start: calc(-1 * var(--astryx-avatar-group-overlap, 0px));
+  }
+
+  .astryx-avatar-group:empty {
+    padding-inline-start: 0;
   }
 
   /* 组内头像的描边画在 size 之外：外框 = size + 2 × 描边宽度。 */
   .astryx-avatar--group-item {
     box-sizing: content-box;
+    margin-inline-start: var(--astryx-avatar-group-overlap, 0px);
     border-style: solid;
+    border-width: 2px;
     border-color: var(--astryx-avatar-group-border-color, #fff);
   }
 
@@ -30,6 +37,7 @@
     font-size: var(--astryx-avatar-group-overflow-font-size, var(--astryx-avatar-group-overflow-computed-font-size, 0.75rem));
     font-weight: var(--astryx-font-weight-medium, 500);
     line-height: 1;
+    margin-inline-start: var(--astryx-avatar-group-overlap, 0px);
     white-space: nowrap;
     user-select: none;
   }

package/styles/badge.css

@@ -7,13 +7,16 @@
     align-items: center;
     justify-content: center;
     gap: var(--astryx-spacing-1, 4px);
-    height: var(--astryx-spacing-5, 20px);
-    padding-block: 0;
-    padding-inline: var(--astryx-spacing-2, 8px);
-    border-radius: var(--astryx-radius-full, 9999px);
+    height: var(--astryx-badge-height, var(--astryx-spacing-5, 20px));
+    padding-block: var(--astryx-badge-padding-block, 0);
+    padding-inline: var(--astryx-badge-padding-inline, var(--astryx-spacing-2, 8px));
+    border-width: var(--astryx-badge-border-width, 0);
+    border-style: var(--astryx-badge-border-style, solid);
+    border-color: var(--astryx-badge-border-color, transparent);
+    border-radius: var(--astryx-badge-radius, var(--astryx-radius-full, 9999px));
     font-family: inherit;
     font-size: var(--astryx-text-supporting-size, 0.75rem);
-    font-weight: var(--astryx-font-weight-medium, 500);
+    font-weight: var(--astryx-badge-font-weight, var(--astryx-font-weight-medium, 500));
     line-height: var(--astryx-text-supporting-leading, 1.6667);
     vertical-align: middle;
     white-space: nowrap;

package/styles/banner.css

@@ -1,27 +1,39 @@
 @layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
 
 @layer astryx.components {
-  .astryx-banner {
+  .astryx-banner-frame {
     display: flex;
     flex-direction: column;
     min-width: 0;
     font-family: inherit;
-    border-radius: var(--astryx-radius-container, 12px);
+    border-radius: var(--astryx-banner-radius, var(--astryx-radius-container, 12px));
+  }
+
+  .astryx-banner {
+    --astryx-banner-surface: transparent;
+    --astryx-banner-icon-color: currentcolor;
+  }
+
+  .astryx-banner[data-status='info'] {
     --astryx-banner-surface: var(--astryx-banner-info-background, #f5f5f5);
-    --astryx-banner-foreground: var(--astryx-banner-info-foreground, #262626);
+    --astryx-banner-icon-color: var(--astryx-color-accent, #262626);
   }
+
   .astryx-banner[data-status='error'] {
     --astryx-banner-surface: var(--astryx-banner-error-background, #facecb);
-    --astryx-banner-foreground: var(--astryx-banner-error-foreground, #89001a);
+    --astryx-banner-icon-color: var(--astryx-color-error, #e33f4a);
   }
+
   .astryx-banner[data-status='warning'] {
     --astryx-banner-surface: var(--astryx-banner-warning-background, #f8da9d);
-    --astryx-banner-foreground: var(--astryx-banner-warning-foreground, #584400);
+    --astryx-banner-icon-color: var(--astryx-color-warning, #ffce2f);
   }
+
   .astryx-banner[data-status='success'] {
     --astryx-banner-surface: var(--astryx-banner-success-background, #c5e5c0);
-    --astryx-banner-foreground: var(--astryx-banner-success-foreground, #0c5700);
+    --astryx-banner-icon-color: var(--astryx-color-success, #198100);
   }
+
   .astryx-banner-header {
     display: flex;
     align-items: flex-start;
@@ -30,37 +42,123 @@
     row-gap: var(--astryx-spacing-3, 12px);
     padding: var(--astryx-spacing-3, 12px) var(--astryx-spacing-4, 16px);
     border-radius: inherit;
-    color: var(--astryx-banner-foreground);
+    color: var(--astryx-color-text-primary, #171717);
     background: var(--astryx-banner-surface);
   }
-  .astryx-banner-message { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
-  .astryx-banner-message[data-has-actions='true'] { flex-basis: 8rem; }
-  .astryx-banner-title { font-size: var(--astryx-text-label-size, 14px); font-weight: 600; line-height: 1.4286; }
-  .astryx-banner-description { font-size: var(--astryx-text-supporting-size, 12px); line-height: 1.6667; }
-  .astryx-banner-icon { display: inline-flex; flex: none; align-items: center; height: 20px; }
-  .astryx-banner-icon > * { width: 16px; height: 16px; }
-  .astryx-banner-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--astryx-spacing-2, 8px); max-width: 100%; margin-inline-start: auto; margin-block: -4px; }
-  .astryx-banner-actions .astryx-button { --astryx-button-ghost-foreground: var(--astryx-banner-foreground); }
-  .astryx-banner-chevron { width: 16px; height: 16px; transition: transform 130ms ease-out; }
-  .astryx-banner-chevron[data-expanded='true'] { transform: rotate(180deg); }
+
+  .astryx-banner-header[data-centered] {
+    align-items: center;
+  }
+
+  .astryx-banner-message {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .astryx-banner-message[data-has-actions] {
+    flex-basis: 8rem;
+  }
+
+  .astryx-banner-title {
+    color: var(--astryx-color-text-primary, #171717);
+    font-size: var(--astryx-text-label-size, 14px);
+    font-weight: var(--astryx-font-weight-semibold, 600);
+    line-height: var(--astryx-text-label-leading, 1.4286);
+    overflow-wrap: anywhere;
+  }
+
+  .astryx-banner-description {
+    color: var(--astryx-color-text-secondary, #525252);
+    font-size: var(--astryx-text-supporting-size, 12px);
+    font-weight: var(--astryx-font-weight-regular, 400);
+    line-height: var(--astryx-text-supporting-leading, 1.6667);
+    overflow-wrap: anywhere;
+  }
+
+  .astryx-banner-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    height: 20px;
+    color: var(--astryx-banner-icon-color);
+  }
+
+  .astryx-banner-icon > * {
+    width: 16px;
+    height: 16px;
+  }
+
+  .astryx-banner-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: var(--astryx-spacing-2, 8px);
+    max-width: 100%;
+    margin-inline-start: auto;
+    margin-block: -4px;
+  }
+
+  .astryx-banner-actions .astryx-button {
+    --astryx-button-ghost-foreground: var(--astryx-color-text-primary, #171717);
+  }
+
+  .astryx-banner-chevron {
+    width: 16px;
+    height: 16px;
+    transition: transform var(--astryx-duration-fast, 130ms) var(--astryx-ease-standard, ease-out);
+  }
+
+  .astryx-banner-chevron[data-expanded] {
+    transform: rotate(180deg);
+  }
+
   .astryx-banner-content {
     min-width: 0;
     padding: var(--astryx-spacing-3, 12px) var(--astryx-spacing-4, 16px);
-    border: 1px solid var(--astryx-banner-border, #e5e5e5);
+    border: 1px solid var(--astryx-banner-border, var(--astryx-color-border, #e5e5e5));
     border-top: 0;
     border-end-start-radius: inherit;
     border-end-end-radius: inherit;
     color: var(--astryx-color-text-primary, #171717);
-    background: var(--astryx-banner-content-background, #fff);
+    background: var(--astryx-banner-content-background, var(--astryx-color-background-card, #fff));
     font-size: var(--astryx-text-label-size, 14px);
     line-height: 1.5;
     overflow-wrap: anywhere;
   }
-  .astryx-banner[data-expanded='true'] .astryx-banner-header { border-end-start-radius: 0; border-end-end-radius: 0; }
-  .astryx-banner[data-container='section'] { border-radius: 0; }
-  .astryx-banner[data-elevation='low'] { box-shadow: var(--astryx-button-shadow-low); }
-  .astryx-banner[data-elevation='med'] { box-shadow: var(--astryx-button-shadow-med); }
-  .astryx-banner[data-elevation='high'] { box-shadow: var(--astryx-button-shadow-high); }
-  @media (prefers-reduced-motion: reduce) { .astryx-banner-chevron { transition: none; } }
-  @media (forced-colors: active) { .astryx-banner-header { border: 1px solid CanvasText; } }
+
+  .astryx-banner-frame[data-expanded] .astryx-banner-header {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .astryx-banner-frame[data-container='section'] {
+    border-radius: 0;
+  }
+
+  .astryx-banner-frame[data-elevation='low'] {
+    box-shadow: var(--astryx-button-shadow-low);
+  }
+
+  .astryx-banner-frame[data-elevation='med'] {
+    box-shadow: var(--astryx-button-shadow-med);
+  }
+
+  .astryx-banner-frame[data-elevation='high'] {
+    box-shadow: var(--astryx-button-shadow-high);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .astryx-banner-chevron {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .astryx-banner-header {
+      border: 1px solid CanvasText;
+    }
+  }
 }

package/styles/blockquote.css

@@ -7,6 +7,7 @@
     padding-inline-start: var(--astryx-spacing-4, 16px);
     border-inline-start: var(--astryx-spacing-0-5, 2px) solid var(--astryx-color-border-emphasized);
     color: var(--astryx-color-text-secondary);
+    overflow-wrap: break-word;
   }
 
   .astryx-blockquote__cite {