@almadar/std 16.238.0 → 16.239.0

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."

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

@@ -11,8 +11,8 @@ orbital DataListOrbital {
     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 DataListFieldsItemColorMapValue
     labels : Map string string
   }
@@ -21,8 +21,8 @@ orbital DataListOrbital {
     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 DataListColumnsItemColorMapValue
     labels : Map string string
   }
@@ -97,6 +97,7 @@ orbital DataListOrbital {
           emptyMessage: @config.emptyMessage
           className: @config.className
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           reorderable: @config.reorderable
           swipeLeftEvent: @config.swipeLeftEvent
@@ -111,6 +112,7 @@ orbital DataListOrbital {
           sortBy: @config.sortBy
           sortDirection: @config.sortDirection
           look: @config.look
+          surface: @config.surface
           relationsData: @config.relationsData
           enter: @config.enter
           enterDelay: @config.enterDelay
@@ -159,6 +161,7 @@ orbital DataListOrbital {
           emptyMessage: @config.emptyMessage
           className: @config.className
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           reorderable: @config.reorderable
           swipeLeftEvent: @config.swipeLeftEvent
@@ -173,6 +176,7 @@ orbital DataListOrbital {
           sortBy: @config.sortBy
           sortDirection: @config.sortDirection
           look: @config.look
+          surface: @config.surface
           relationsData: @config.relationsData
           enter: @config.enter
           enterDelay: @config.enterDelay
@@ -221,6 +225,7 @@ orbital DataListOrbital {
           emptyMessage: @config.emptyMessage
           className: @config.className
           isLoading: @config.isLoading
+          skeleton: @config.skeleton
           error: @config.error
           reorderable: @config.reorderable
           swipeLeftEvent: @config.swipeLeftEvent
@@ -235,6 +240,7 @@ orbital DataListOrbital {
           sortBy: @config.sortBy
           sortDirection: @config.sortDirection
           look: @config.look
+          surface: @config.surface
           relationsData: @config.relationsData
           enter: @config.enter
           enterDelay: @config.enterDelay
@@ -395,6 +401,10 @@ orbital DataListOrbital {
         @label "Is Loading"
         @description "Loading state"
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none" = list
+        @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 : DataListError
         @label "Error"
         @description "Error state"
@@ -451,6 +461,10 @@ orbital DataListOrbital {
         @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 [DataListRelationsDataValueItem] = {}
         @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."

package/behaviors/lolo/ui/core/molecules/ui-date-range-picker.lolo

@@ -35,6 +35,7 @@ orbital DateRangePickerOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -65,6 +66,7 @@ orbital DateRangePickerOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -147,6 +149,10 @@ orbital DateRangePickerOrbital {
         @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-date-range-selector.lolo

@@ -23,6 +23,7 @@ orbital DateRangeSelectorOrbital {
           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 DateRangeSelectorOrbital {
         @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-doc-breadcrumb.lolo

@@ -21,6 +21,7 @@ orbital DocBreadcrumbOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -56,6 +57,10 @@ orbital DocBreadcrumbOrbital {
         @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-doc-pagination.lolo

@@ -28,6 +28,7 @@ orbital DocPaginationOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -67,6 +68,10 @@ orbital DocPaginationOrbital {
         @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-doc-search.lolo

@@ -16,6 +16,7 @@ orbital DocSearchOrbital {
           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 DocSearchOrbital {
         @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-doc-sidebar.lolo

@@ -23,6 +23,7 @@ orbital DocSidebarOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -58,6 +59,10 @@ orbital DocSidebarOrbital {
         @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-doc-toc.lolo

@@ -23,6 +23,7 @@ orbital DocTocOrbital {
           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,10 @@ orbital DocTocOrbital {
         @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-document-details.lolo

@@ -43,6 +43,7 @@ orbital DocumentDetailsOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -69,6 +70,7 @@ orbital DocumentDetailsOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -98,6 +100,7 @@ orbital DocumentDetailsOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -124,6 +127,7 @@ orbital DocumentDetailsOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -199,6 +203,10 @@ orbital DocumentDetailsOrbital {
         @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-document-panel.lolo

@@ -44,6 +44,7 @@ orbital DocumentPanelOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -82,6 +83,7 @@ orbital DocumentPanelOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -120,6 +122,7 @@ orbital DocumentPanelOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -249,6 +252,10 @@ orbital DocumentPanelOrbital {
         @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-document-viewer.lolo

@@ -32,6 +32,7 @@ orbital DocumentViewerOrbital {
     state idle {
       INIT -> idle
         (render-ui main {
+          surface: @config.surface
           title: @config.title
           src: @config.src
           content: @config.content
@@ -49,6 +50,7 @@ orbital DocumentViewerOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -68,6 +70,10 @@ orbital DocumentViewerOrbital {
     }
 
     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 "Document title"
@@ -136,6 +142,10 @@ orbital DocumentViewerOrbital {
         @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-drawer.lolo

@@ -34,6 +34,7 @@ orbital DrawerOrbital {
           closeEvent: @config.closeEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -141,6 +142,10 @@ orbital DrawerOrbital {
         @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-edge-decoration.lolo

@@ -21,6 +21,7 @@ orbital EdgeDecorationOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           type: edge-decoration
         })
     }
@@ -62,6 +63,10 @@ orbital EdgeDecorationOrbital {
         @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"
     }
   }
 

package/behaviors/lolo/ui/core/molecules/ui-emoji-picker.lolo

@@ -19,6 +19,7 @@ orbital EmojiPickerOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -60,7 +61,7 @@ orbital EmojiPickerOrbital {
         @tier "presentation"
       triggerLabel : string
         @label "Trigger Label"
-        @description "Accessible label for the trigger button"
+        @description "Accessible label for the trigger button (the translated 'Add emoji' when omitted)"
         @tier "presentation"
       className : string
         @label "Class Name"
@@ -74,6 +75,10 @@ orbital EmojiPickerOrbital {
         @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-empty-state.lolo

@@ -25,6 +25,7 @@ orbital EmptyStateOrbital {
           look: @config.look
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -102,6 +103,10 @@ orbital EmptyStateOrbital {
         @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-error-boundary.lolo

@@ -16,6 +16,7 @@ orbital ErrorBoundaryOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           type: error-boundary
         })
     }
@@ -37,6 +38,10 @@ orbital ErrorBoundaryOrbital {
         @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"
     }
   }