@asd20/ui-next 2.0.28 → 2.0.29

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.0.29](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.28...ui-next-v2.0.29) (2026-04-06)
+
 ## [2.0.28](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.27...ui-next-v2.0.28) (2026-04-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -39,6 +39,7 @@
 import Asd20BodyAccordion from '../../molecules/Asd20BodyAccordion'
 import Asd20TableauEmbed from '../../molecules/Asd20TableauEmbed'
 import { navigateInternalHref } from '../../../helpers/linkPolicy'
+import { applyRichListColumnExceptions } from '../../../helpers/richBodyListColumns'
 
 const BODY_BLOCK_PLACEHOLDER_PATTERN =
   /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
@@ -146,9 +147,17 @@ export default {
 
   mounted() {
     this.hasMounted = true
+    this.applyListColumnExceptions()
+  },
+
+  updated() {
+    this.applyListColumnExceptions()
   },
 
   methods: {
+    applyListColumnExceptions() {
+      applyRichListColumnExceptions(this.$el)
+    },
     onContentClick(event) {
       const anchor = event.target?.closest?.('a')
 

package/src/design/_typography.scss

@@ -140,6 +140,13 @@
     flex-basis: 40%;
   }
 
+  .asd20-messaging .asd20-rich-list--single-column {
+    > li:first-child:nth-last-child(n+20),
+    > li:first-child:nth-last-child(n+20) ~ li {
+      flex-basis: 100%;
+    }
+  }
+
   h1,
   h2,
   h3,

package/src/helpers/richBodyListColumns.js

@@ -0,0 +1,48 @@
+export const SINGLE_COLUMN_RICH_LIST_CLASS = 'asd20-rich-list--single-column'
+export const MULTI_COLUMN_LIST_ITEM_THRESHOLD = 20
+export const SIGNIFICANT_LIST_ITEM_TEXT_THRESHOLD = 120
+
+const COMPLEX_DIRECT_CHILD_SELECTOR =
+  'ul, ol, dl, blockquote, pre, table, figure, h1, h2, h3, h4, h5, h6'
+
+function isDomElement(value) {
+  return typeof Element !== 'undefined' && value instanceof Element
+}
+
+function normalizeTextContent(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+export function isSignificantRichListItem(listItem) {
+  if (!isDomElement(listItem)) return false
+
+  if (listItem.querySelector(COMPLEX_DIRECT_CHILD_SELECTOR)) return true
+  if (listItem.children.length > 1) return true
+  if (listItem.querySelectorAll('br').length >= 2) return true
+
+  const textContent = normalizeTextContent(listItem.textContent || '')
+  return textContent.length >= SIGNIFICANT_LIST_ITEM_TEXT_THRESHOLD
+}
+
+export function shouldPreventRichListColumns(listElement) {
+  if (!isDomElement(listElement)) return false
+
+  const listItems = Array.from(listElement.children).filter(
+    child => child.tagName === 'LI'
+  )
+
+  if (listItems.length < MULTI_COLUMN_LIST_ITEM_THRESHOLD) return false
+
+  return listItems.some(isSignificantRichListItem)
+}
+
+export function applyRichListColumnExceptions(rootElement) {
+  if (!isDomElement(rootElement)) return
+
+  rootElement.querySelectorAll('ul, ol').forEach(list => {
+    list.classList.toggle(
+      SINGLE_COLUMN_RICH_LIST_CLASS,
+      shouldPreventRichListColumns(list)
+    )
+  })
+}