@almadar/std 16.238.0 → 16.239.0

package/behaviors/lolo/ui/core/molecules/ui-error-state.lolo

@@ -20,6 +20,7 @@ orbital ErrorStateOrbital {
           retryEvent: @config.retryEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -77,6 +78,10 @@ orbital ErrorStateOrbital {
         @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-feature-card.lolo

@@ -23,6 +23,7 @@ orbital FeatureCardOrbital {
           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,10 @@ orbital FeatureCardOrbital {
         @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-feature-grid.lolo

@@ -29,6 +29,7 @@ orbital FeatureGridOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -72,6 +73,10 @@ orbital FeatureGridOrbital {
         @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-file-tree.lolo

@@ -46,6 +46,7 @@ orbital FileTreeOrbital {
           indent: @config.indent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -146,6 +147,10 @@ orbital FileTreeOrbital {
         @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-filter-group.lolo

@@ -41,6 +41,7 @@ orbital FilterGroupOrbital {
           clearEvent: @config.clearEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -74,6 +75,7 @@ orbital FilterGroupOrbital {
           clearEvent: @config.clearEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -107,6 +109,7 @@ orbital FilterGroupOrbital {
           clearEvent: @config.clearEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -217,6 +220,10 @@ orbital FilterGroupOrbital {
         @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-flex.lolo

@@ -25,6 +25,7 @@ orbital FlexOrbital {
           children: @config.children
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -96,6 +97,10 @@ orbital FlexOrbital {
         @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-flip-card.lolo

@@ -21,6 +21,7 @@ orbital FlipCardOrbital {
           height: @config.height
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -78,6 +79,10 @@ orbital FlipCardOrbital {
         @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-floating-action-button.lolo

@@ -32,6 +32,7 @@ orbital FloatingActionButtonOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -104,6 +105,10 @@ orbital FloatingActionButtonOrbital {
         @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-floating-toolbar.lolo

@@ -31,6 +31,7 @@ orbital FloatingToolbarOrbital {
           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 FloatingToolbarOrbital {
         @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-form-actions.lolo

@@ -50,6 +50,7 @@ orbital FormActionsOrbital {
           look: @config.look
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -109,6 +110,10 @@ orbital FormActionsOrbital {
         @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-form-field.lolo

@@ -20,6 +20,7 @@ orbital FormFieldOrbital {
           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 FormFieldOrbital {
         @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-form-layout.lolo

@@ -34,6 +34,7 @@ orbital FormLayoutOrbital {
           dividers: @config.dividers
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -114,6 +115,10 @@ orbital FormLayoutOrbital {
         @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-form-section-header.lolo

@@ -24,6 +24,7 @@ orbital FormSectionHeaderOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -97,6 +98,10 @@ orbital FormSectionHeaderOrbital {
         @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-fx-overlay.lolo

@@ -38,6 +38,7 @@ orbital FxOverlayOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -81,6 +82,10 @@ orbital FxOverlayOrbital {
         @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-gantt.lolo

@@ -41,11 +41,13 @@ orbital GanttOrbital {
           showToday: @config.showToday
           dayWidth: @config.dayWidth
           barClickEvent: @config.barClickEvent
+          surface: @config.surface
           className: @config.className
           isLoading: @config.isLoading
           error: @config.error
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -78,11 +80,13 @@ orbital GanttOrbital {
           showToday: @config.showToday
           dayWidth: @config.dayWidth
           barClickEvent: @config.barClickEvent
+          surface: @config.surface
           className: @config.className
           isLoading: @config.isLoading
           error: @config.error
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -115,11 +119,13 @@ orbital GanttOrbital {
           showToday: @config.showToday
           dayWidth: @config.dayWidth
           barClickEvent: @config.barClickEvent
+          surface: @config.surface
           className: @config.className
           isLoading: @config.isLoading
           error: @config.error
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -203,6 +209,10 @@ orbital GanttOrbital {
         @label "Bar Click Event"
         @description "Event emitted when a bar is clicked: UI:{barClickEvent} with { id }"
         @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"
       className : string
         @label "Class Name"
         @description "Additional CSS classes"
@@ -223,6 +233,10 @@ orbital GanttOrbital {
         @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-geometric-pattern.lolo

@@ -22,6 +22,7 @@ orbital GeometricPatternOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           type: geometric-pattern
         })
     }
@@ -67,6 +68,10 @@ orbital GeometricPatternOrbital {
         @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-gradient-divider.lolo

@@ -16,6 +16,7 @@ orbital GradientDividerOrbital {
           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 GradientDividerOrbital {
         @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-graph-canvas.lolo

@@ -13,10 +13,16 @@ orbital GraphCanvasOrbital {
     x : number
     y : number
   }
-  type GraphCanvasNodesItemMark = {
+  type GraphCanvasNodesItemMark = GraphCanvasNodesItemMarkSuggested | GraphCanvasNodesItemMarkProposed
+  type GraphCanvasNodesItemMarkSuggested = {
     kind : "suggested"!
     suggestionId : string!
   }
+  type GraphCanvasNodesItemMarkProposed = {
+    kind : "proposed"!
+    suggestionId : string!
+    tint : string
+  }
   type GraphCanvasEdgesItem = {
     source : string!
     target : string!
@@ -60,10 +66,16 @@ orbital GraphCanvasOrbital {
     x : number
     y : number
   }
-  type GraphCanvasNODECLICKNodeMark = {
+  type GraphCanvasNODECLICKNodeMark = GraphCanvasNODECLICKNodeMarkSuggested | GraphCanvasNODECLICKNodeMarkProposed
+  type GraphCanvasNODECLICKNodeMarkSuggested = {
     kind : "suggested"!
     suggestionId : string!
   }
+  type GraphCanvasNODECLICKNodeMarkProposed = {
+    kind : "proposed"!
+    suggestionId : string!
+    tint : string
+  }
   type GraphCanvasMARKCLICKNode = {
     id : string!
     label : string
@@ -75,10 +87,16 @@ orbital GraphCanvasOrbital {
     x : number
     y : number
   }
-  type GraphCanvasMARKCLICKNodeMark = {
+  type GraphCanvasMARKCLICKNodeMark = GraphCanvasMARKCLICKNodeMarkSuggested | GraphCanvasMARKCLICKNodeMarkProposed
+  type GraphCanvasMARKCLICKNodeMarkSuggested = {
     kind : "suggested"!
     suggestionId : string!
   }
+  type GraphCanvasMARKCLICKNodeMarkProposed = {
+    kind : "proposed"!
+    suggestionId : string!
+    tint : string
+  }
   type GraphCanvasNODEDOUBLECLICKNode = {
     id : string!
     label : string
@@ -90,10 +108,16 @@ orbital GraphCanvasOrbital {
     x : number
     y : number
   }
-  type GraphCanvasNODEDOUBLECLICKNodeMark = {
+  type GraphCanvasNODEDOUBLECLICKNodeMark = GraphCanvasNODEDOUBLECLICKNodeMarkSuggested | GraphCanvasNODEDOUBLECLICKNodeMarkProposed
+  type GraphCanvasNODEDOUBLECLICKNodeMarkSuggested = {
     kind : "suggested"!
     suggestionId : string!
   }
+  type GraphCanvasNODEDOUBLECLICKNodeMarkProposed = {
+    kind : "proposed"!
+    suggestionId : string!
+    tint : string
+  }
   type GraphCanvasBADGECLICKNode = {
     id : string!
     label : string
@@ -105,10 +129,16 @@ orbital GraphCanvasOrbital {
     x : number
     y : number
   }
-  type GraphCanvasBADGECLICKNodeMark = {
+  type GraphCanvasBADGECLICKNodeMark = GraphCanvasBADGECLICKNodeMarkSuggested | GraphCanvasBADGECLICKNodeMarkProposed
+  type GraphCanvasBADGECLICKNodeMarkSuggested = {
     kind : "suggested"!
     suggestionId : string!
   }
+  type GraphCanvasBADGECLICKNodeMarkProposed = {
+    kind : "proposed"!
+    suggestionId : string!
+    tint : string
+  }
 
   entity GraphCanvasItem [runtime] {
     id : string!
@@ -147,6 +177,7 @@ orbital GraphCanvasOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -298,6 +329,10 @@ orbital GraphCanvasOrbital {
         @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-graph-view.lolo

@@ -46,12 +46,14 @@ orbital GraphViewOrbital {
           onNodeHover: @config.onNodeHover
           width: @config.width
           height: @config.height
+          surface: @config.surface
           className: @config.className
           showLabels: @config.showLabels
           zoomToFit: @config.zoomToFit
           layout: @config.layout
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -108,6 +110,10 @@ orbital GraphViewOrbital {
         @label "Height"
         @description "Height in pixels"
         @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"
       className : string
         @label "Class Name"
         @description "Additional CSS classes"
@@ -133,6 +139,10 @@ orbital GraphViewOrbital {
         @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-grid.lolo

@@ -25,6 +25,7 @@ orbital GridOrbital {
           children: @config.children
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -96,6 +97,10 @@ orbital GridOrbital {
         @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-header.lolo

@@ -55,6 +55,7 @@ orbital HeaderOrbital {
           error: @config.error
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -183,6 +184,10 @@ orbital HeaderOrbital {
         @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-icon-button.lolo

@@ -41,6 +41,7 @@ orbital IconButtonOrbital {
           tooltipPosition: @config.tooltipPosition
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -122,6 +123,10 @@ orbital IconButtonOrbital {
         @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-import-preview-tree.lolo

@@ -35,6 +35,7 @@ orbital ImportPreviewTreeOrbital {
     state idle {
       INIT -> idle
         (render-ui main {
+          surface: @config.surface
           units: @config.units
           skipped: @config.skipped
           entityDisplay: @config.entityDisplay
@@ -46,6 +47,7 @@ orbital ImportPreviewTreeOrbital {
           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 +76,10 @@ orbital ImportPreviewTreeOrbital {
     }
 
     config {
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface behind each group tile unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
       units : [ImportPreviewTreeUnitsItem] = []
         @label "Units"
         @description "Staged units to preview"
@@ -118,6 +124,10 @@ orbital ImportPreviewTreeOrbital {
         @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)."