@almadar/std 16.238.0 → 16.241.0

package/behaviors/lolo/ui/core/molecules/ui-alert.lolo

@@ -25,6 +25,7 @@ orbital AlertOrbital {
           dismissEvent: @config.dismissEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -105,6 +106,10 @@ orbital AlertOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-animated-counter.lolo

@@ -21,6 +21,7 @@ orbital AnimatedCounterOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -76,6 +77,10 @@ orbital AnimatedCounterOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-bloom-quiz-block.lolo

@@ -21,6 +21,7 @@ orbital BloomQuizBlockOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -76,6 +77,10 @@ orbital BloomQuizBlockOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-branching-logic-builder.lolo

@@ -34,12 +34,14 @@ orbital BranchingLogicBuilderOrbital {
         (render-ui main {
           questions: @config.questions
           rules: @config.rules
+          surface: @config.surface
           onRulesChange: @config.onRulesChange
           rulesChangeEvent: @config.rulesChangeEvent
           readOnly: @config.readOnly
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -75,6 +77,10 @@ orbital BranchingLogicBuilderOrbital {
         @label "Rules"
         @description "Rules. Accepts either a typed array (direct consumers) or the runtime payload shape from a render-ui binding (`@payload.data`). Narrowed to `[]` internally when the value isn't an array."
         @tier "presentation"
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface behind this block unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
       onRulesChange : event = "RULES_CHANGE"
         @label "On Rules Change"
         @description "onRulesChange prop"
@@ -99,6 +105,10 @@ orbital BranchingLogicBuilderOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-breadcrumb.lolo

@@ -30,6 +30,7 @@ orbital BreadcrumbOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -91,6 +92,10 @@ orbital BreadcrumbOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-calendar-grid.lolo

@@ -26,6 +26,7 @@ orbital CalendarGridOrbital {
           onDayClick: @config.onDayClick
           onEventClick: @config.onEventClick
           className: @config.className
+          surface: @config.surface
           longPressEvent: @config.longPressEvent
           longPressPayload: @config.longPressPayload
           swipeLeftEvent: @config.swipeLeftEvent
@@ -37,6 +38,7 @@ orbital CalendarGridOrbital {
           colorField: @config.colorField
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -62,6 +64,7 @@ orbital CalendarGridOrbital {
           onDayClick: @config.onDayClick
           onEventClick: @config.onEventClick
           className: @config.className
+          surface: @config.surface
           longPressEvent: @config.longPressEvent
           longPressPayload: @config.longPressPayload
           swipeLeftEvent: @config.swipeLeftEvent
@@ -73,6 +76,7 @@ orbital CalendarGridOrbital {
           colorField: @config.colorField
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -98,6 +102,7 @@ orbital CalendarGridOrbital {
           onDayClick: @config.onDayClick
           onEventClick: @config.onEventClick
           className: @config.className
+          surface: @config.surface
           longPressEvent: @config.longPressEvent
           longPressPayload: @config.longPressPayload
           swipeLeftEvent: @config.swipeLeftEvent
@@ -109,6 +114,7 @@ orbital CalendarGridOrbital {
           colorField: @config.colorField
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -187,6 +193,10 @@ orbital CalendarGridOrbital {
         @label "Class Name"
         @description "Additional CSS classes"
         @tier "presentation"
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface behind this block unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
       longPressEvent : event = "LONG_PRESS"
         @label "Long Press Event"
         @description "Event emitted on long-press of a time slot: UI:{longPressEvent} with { date, time, ...longPressPayload }"
@@ -231,6 +241,10 @@ orbital CalendarGridOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-carousel.lolo

@@ -29,6 +29,7 @@ orbital CarouselOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -100,6 +101,10 @@ orbital CarouselOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-change-list.lolo

@@ -26,6 +26,7 @@ orbital ChangeListOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -74,6 +75,10 @@ orbital ChangeListOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-chart-legend.lolo

@@ -22,6 +22,7 @@ orbital ChartLegendOrbital {
           direction: @config.direction
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -61,6 +62,10 @@ orbital ChartLegendOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-chart.lolo

@@ -49,6 +49,7 @@ orbital ChartOrbital {
     state idle {
       INIT -> idle
         (render-ui main {
+          surface: @config.surface
           title: @config.title
           subtitle: @config.subtitle
           chartType: @config.chartType
@@ -65,6 +66,7 @@ orbital ChartOrbital {
           drillEvent: @config.drillEvent
           actions: (array/filter @config.actions (fn action (or (= (array/len (object/get @action roles [])) 0) (array/includes (object/get @action roles []) @config.viewerRole))))
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           className: @config.className
           enter: @config.enter
@@ -88,6 +90,10 @@ orbital ChartOrbital {
     }
 
     config {
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface behind this block unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
       title : string
         @label "Title"
         @description "Chart title"
@@ -154,6 +160,10 @@ orbital ChartOrbital {
         @label "Is Loading"
         @description "Loading state"
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none" = card
+        @label "Skeleton"
+        @description "Skeleton drawn while loading, and the shape an empty slot shows while this element's server render is in flight (`none` opts out)."
+        @tier "presentation"
       error : ChartError
         @label "Error"
         @description "Error state"

package/behaviors/lolo/ui/core/molecules/ui-code-block.lolo

@@ -87,6 +87,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -143,6 +144,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -199,6 +201,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -255,6 +258,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -311,6 +315,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -367,6 +372,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -423,6 +429,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -479,6 +486,7 @@ orbital CodeBlockOrbital {
           lineNumbers: @config.lineNumbers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -701,6 +709,10 @@ orbital CodeBlockOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-command-palette.lolo

@@ -49,6 +49,7 @@ orbital CommandPaletteOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -77,6 +78,7 @@ orbital CommandPaletteOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -151,6 +153,10 @@ orbital CommandPaletteOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-commit-row.lolo

@@ -29,6 +29,7 @@ orbital CommitRowOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -62,6 +63,7 @@ orbital CommitRowOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -95,6 +97,7 @@ orbital CommitRowOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -192,6 +195,10 @@ orbital CommitRowOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-confirm-dialog.lolo

@@ -43,6 +43,7 @@ orbital ConfirmDialogOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -161,6 +162,10 @@ orbital ConfirmDialogOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-connection-block.lolo

@@ -16,6 +16,7 @@ orbital ConnectionBlockOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -51,6 +52,10 @@ orbital ConnectionBlockOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-container.lolo

@@ -20,6 +20,7 @@ orbital ContainerOrbital {
           children: @config.children
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -71,6 +72,10 @@ orbital ContainerOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-content-renderer.lolo

@@ -8,10 +8,6 @@ orbital ContentRendererOrbital {
     code : string
     stack : string
   }
-  type ContentRendererSegmentsItem = {
-    type : "markdown"!
-    content : string!
-  }
 
   entity ContentRendererItem [runtime] {
     id : string!
@@ -35,10 +31,10 @@ orbital ContentRendererOrbital {
           activeFilters: @config.activeFilters
           selectedIds: @config.selectedIds
           content: @config.content
-          segments: @config.segments
           direction: @config.direction
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -107,10 +103,6 @@ orbital ContentRendererOrbital {
         @label "Content"
         @description "Raw content string — auto-parsed into segments"
         @tier "presentation"
-      segments : [ContentRendererSegmentsItem] = []
-        @label "Segments"
-        @description "Pre-parsed segments (overrides content)"
-        @tier "presentation"
       direction : "rtl" | "ltr"
         @label "Direction"
         @description "Text direction for markdown"
@@ -123,6 +115,10 @@ orbital ContentRendererOrbital {
         @label "Enter Delay"
         @description "Stagger step for the entry: waits this many `--motion-enter-stagger` steps before animating."
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none"
+        @label "Skeleton"
+        @description "Skeleton shown while this element's server render is in flight: a shape (`table`, `list`, …), `{ variant, rows?, columns?, fields? }`, or `none`."
+        @tier "presentation"
       ariaLabel : string
         @label "Aria-label"
         @description "Accessible name read by screen readers when the visible text is missing or not descriptive (e.g. an icon-only control)."

package/behaviors/lolo/ui/core/molecules/ui-data-grid.lolo

@@ -12,8 +12,8 @@ orbital DataGridOrbital {
     name : string!
     label : string
     icon : icon
-    variant : "h3" | "h4" | "body" | "caption" | "badge" | "small" | "progress"
-    format : "date" | "datetime" | "currency" | "number" | "boolean" | "percent"
+    variant : "h3" | "h4" | "overline" | "avatar" | "body" | "caption" | "badge" | "small" | "progress"
+    format : "date" | "time" | "datetime" | "currency" | "number" | "boolean" | "percent"
     colorMap : Map string DataGridFieldsItemColorMapValue
     labels : Map string string
   }
@@ -22,8 +22,8 @@ orbital DataGridOrbital {
     name : string!
     label : string
     icon : icon
-    variant : "h3" | "h4" | "body" | "caption" | "badge" | "small" | "progress"
-    format : "date" | "datetime" | "currency" | "number" | "boolean" | "percent"
+    variant : "h3" | "h4" | "overline" | "avatar" | "body" | "caption" | "badge" | "small" | "progress"
+    format : "date" | "time" | "datetime" | "currency" | "number" | "boolean" | "percent"
     colorMap : Map string DataGridColumnsItemColorMapValue
     labels : Map string string
   }
@@ -86,6 +86,7 @@ orbital DataGridOrbital {
           minCardWidth: @config.minCardWidth
           className: @config.className
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           imageField: @config.imageField
           selectable: @config.selectable
@@ -95,6 +96,7 @@ orbital DataGridOrbital {
           hasMore: @config.hasMore
           pageSize: @config.pageSize
           look: @config.look
+          surface: @config.surface
           relationsData: @config.relationsData
           enter: @config.enter
           enterDelay: @config.enterDelay
@@ -140,6 +142,7 @@ orbital DataGridOrbital {
           minCardWidth: @config.minCardWidth
           className: @config.className
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           imageField: @config.imageField
           selectable: @config.selectable
@@ -149,6 +152,7 @@ orbital DataGridOrbital {
           hasMore: @config.hasMore
           pageSize: @config.pageSize
           look: @config.look
+          surface: @config.surface
           relationsData: @config.relationsData
           enter: @config.enter
           enterDelay: @config.enterDelay
@@ -194,6 +198,7 @@ orbital DataGridOrbital {
           minCardWidth: @config.minCardWidth
           className: @config.className
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           imageField: @config.imageField
           selectable: @config.selectable
@@ -203,6 +208,7 @@ orbital DataGridOrbital {
           hasMore: @config.hasMore
           pageSize: @config.pageSize
           look: @config.look
+          surface: @config.surface
           relationsData: @config.relationsData
           enter: @config.enter
           enterDelay: @config.enterDelay
@@ -344,6 +350,10 @@ orbital DataGridOrbital {
         @label "Is Loading"
         @description "Loading state"
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none" = grid
+        @label "Skeleton"
+        @description "Skeleton drawn while loading, and the shape an empty slot shows while this element's server render is in flight (`none` opts out)."
+        @tier "presentation"
       error : DataGridError
         @label "Error"
         @description "Error state"
@@ -380,6 +390,10 @@ orbital DataGridOrbital {
         @label "Look"
         @description "Layer 2 visual treatment — mirrors the `entity-table` look enum so data-grid / data-list / entity-table share one knob name from authors."
         @tier "presentation"
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface behind this block unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
       relationsData : Map string [DataGridRelationsDataValueItem] = {}
         @label "Relations Data"
         @description "Relation display data: { fieldName: [{value, label}] } — injected server-side by the runtime (relation-option injection) or bound by compiled codegen; resolves stored foreign ids to display names for a field whose type is relation. Same contract DetailPanel takes."