@almadar/std 16.238.0 → 16.239.0

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

@@ -21,6 +21,7 @@ orbital TooltipOrbital {
           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 TooltipOrbital {
         @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-top-nav-item.lolo

@@ -27,6 +27,7 @@ orbital TopNavItemOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -70,6 +71,10 @@ orbital TopNavItemOrbital {
         @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-upload-drop-zone.lolo

@@ -31,6 +31,7 @@ orbital UploadDropZoneOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -106,6 +107,10 @@ orbital UploadDropZoneOrbital {
         @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-version-diff.lolo

@@ -46,6 +46,7 @@ orbital VersionDiffOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -143,6 +144,10 @@ orbital VersionDiffOrbital {
         @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-violation-alert.lolo

@@ -34,6 +34,7 @@ orbital ViolationAlertOrbital {
           message: @config.message
           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 ViolationAlertOrbital {
         @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-vote-stack.lolo

@@ -23,6 +23,7 @@ orbital VoteStackOrbital {
           label: @config.label
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -94,6 +95,10 @@ orbital VoteStackOrbital {
         @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-wizard-container.lolo

@@ -140,6 +140,7 @@ orbital WizardContainerOrbital {
           completeEvent: @config.completeEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -240,6 +241,10 @@ orbital WizardContainerOrbital {
         @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-wizard-navigation.lolo

@@ -35,6 +35,7 @@ orbital WizardNavigationOrbital {
           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,7 @@ orbital WizardNavigationOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -113,6 +115,7 @@ orbital WizardNavigationOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -152,6 +155,7 @@ orbital WizardNavigationOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -292,6 +296,10 @@ orbital WizardNavigationOrbital {
         @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-wizard-progress.lolo

@@ -27,6 +27,7 @@ orbital WizardProgressOrbital {
           stepClickEvent: @config.stepClickEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -90,6 +91,10 @@ orbital WizardProgressOrbital {
         @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/organisms/ui-chat-bar.lolo

@@ -36,8 +36,10 @@ orbital ChatBarOrbital {
           runningIndicator: @config.runningIndicator
           placeholder: @config.placeholder
           context: @config.context
+          sendEvent: @config.sendEvent
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -56,6 +58,12 @@ orbital ChatBarOrbital {
         })
     }
 
+    emits {
+      @config.sendEvent -> external { }
+        @description "The event a message is sent as — `UI:{sendEvent}` with `{ message }`, from Enter or the send button. @default 'CHAT_SEND'"
+        @tier "essential"
+    }
+
     config {
       className : string
         @label "Class Name"
@@ -126,6 +134,10 @@ orbital ChatBarOrbital {
         @label "Context"
         @description "Agent context description"
         @tier "presentation"
+      sendEvent : event = "SEND"
+        @label "Send Event"
+        @description "The event a message is sent as — `UI:{sendEvent}` with `{ message }`, from Enter or the send button. @default 'CHAT_SEND'"
+        @tier "presentation"
       enter : "none" | "fade" | "rise" | "scale" | "slide"
         @label "Enter"
         @description "How this element animates in when it mounts (theme-styled); overrides the theme's default slot entry. `none` opts out."
@@ -134,6 +146,10 @@ orbital ChatBarOrbital {
         @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/organisms/ui-code-runner-panel.lolo

@@ -19,6 +19,7 @@ orbital CodeRunnerPanelOrbital {
           className: @config.className
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -66,6 +67,10 @@ orbital CodeRunnerPanelOrbital {
         @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/organisms/ui-dashboard-grid.lolo

@@ -36,11 +36,13 @@ orbital DashboardGridOrbital {
           totalCount: @config.totalCount
           activeFilters: @config.activeFilters
           selectedIds: @config.selectedIds
+          surface: @config.surface
           columns: @config.columns
           gap: @config.gap
           cells: @config.cells
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -105,6 +107,10 @@ orbital DashboardGridOrbital {
         @label "Selected Ids"
         @description "Currently selected item IDs"
         @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. Each cell is a tile."
+        @tier "presentation"
       columns : number = 3
         @label "Columns"
         @description "Number of columns"
@@ -125,6 +131,10 @@ orbital DashboardGridOrbital {
         @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/organisms/ui-detail-panel.lolo

@@ -46,8 +46,8 @@ orbital DetailPanelOrbital {
     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 DetailPanelFieldsItemColorMapValue
     labels : Map string string
     type : string
@@ -99,8 +99,8 @@ orbital DetailPanelOrbital {
     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 DetailPanelTotalsItemColorMapValue
     labels : Map string string
   }
@@ -152,6 +152,7 @@ orbital DetailPanelOrbital {
           totalCount: @config.totalCount
           activeFilters: @config.activeFilters
           selectedIds: @config.selectedIds
+          skeleton: @config.skeleton
           entity: @entity
           title: @config.title
           onTitleCommit: @config.onTitleCommit
@@ -165,6 +166,7 @@ orbital DetailPanelOrbital {
           closeEvent: @config.closeEvent
           footer: @config.footer
           slideOver: @config.slideOver
+          surface: @config.surface
           fields: @config.fields
           fieldNames: @config.fieldNames
           initialData: @entity
@@ -222,6 +224,7 @@ orbital DetailPanelOrbital {
           totalCount: @config.totalCount
           activeFilters: @config.activeFilters
           selectedIds: @config.selectedIds
+          skeleton: @config.skeleton
           entity: @entity
           title: @config.title
           onTitleCommit: @config.onTitleCommit
@@ -235,6 +238,7 @@ orbital DetailPanelOrbital {
           closeEvent: @config.closeEvent
           footer: @config.footer
           slideOver: @config.slideOver
+          surface: @config.surface
           fields: @config.fields
           fieldNames: @config.fieldNames
           initialData: @entity
@@ -295,6 +299,7 @@ orbital DetailPanelOrbital {
           totalCount: @config.totalCount
           activeFilters: @config.activeFilters
           selectedIds: @config.selectedIds
+          skeleton: @config.skeleton
           entity: @entity
           title: @config.title
           onTitleCommit: @config.onTitleCommit
@@ -308,6 +313,7 @@ orbital DetailPanelOrbital {
           closeEvent: @config.closeEvent
           footer: @config.footer
           slideOver: @config.slideOver
+          surface: @config.surface
           fields: @config.fields
           fieldNames: @config.fieldNames
           initialData: @entity
@@ -365,6 +371,7 @@ orbital DetailPanelOrbital {
           totalCount: @config.totalCount
           activeFilters: @config.activeFilters
           selectedIds: @config.selectedIds
+          skeleton: @config.skeleton
           entity: @payload.data
           title: @config.title
           onTitleCommit: @config.onTitleCommit
@@ -378,6 +385,7 @@ orbital DetailPanelOrbital {
           closeEvent: @config.closeEvent
           footer: @config.footer
           slideOver: @config.slideOver
+          surface: @config.surface
           fields: @config.fields
           fieldNames: @config.fieldNames
           initialData: @payload.data
@@ -488,6 +496,10 @@ orbital DetailPanelOrbital {
         @label "Selected Ids"
         @description "Currently selected item IDs"
         @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none" = detail
+        @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"
       title : string
         @label "Title"
         @description "title prop"
@@ -536,7 +548,11 @@ orbital DetailPanelOrbital {
         @label "Slide Over"
         @description "slideOver prop"
         @tier "presentation"
-      fields : [DetailPanelFieldsItem] = [{ name: "Name", label: "Label", icon: "circle", variant: h3, format: date, type: "Type", values: ["Item", "Item 2"], relation: { entity: "Entity", cardinality: one } }, { name: "Name 2", label: "Label 2", icon: "circle", variant: h4, format: datetime, type: "Type 2", values: ["Item", "Item 2"], relation: { entity: "Entity 2", cardinality: many } }]
+      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. Inline mode only; the slide-over is itself a surface."
+        @tier "presentation"
+      fields : [DetailPanelFieldsItem] = [{ name: "Name", label: "Label", icon: "circle", variant: h3, format: date, type: "Type", values: ["Item", "Item 2"], relation: { entity: "Entity", cardinality: one } }, { name: "Name 2", label: "Label 2", icon: "circle", variant: h4, format: time, type: "Type 2", values: ["Item", "Item 2"], relation: { entity: "Entity 2", cardinality: many } }]
         @label "Fields"
         @description "Fields to display: field names, or declared fields ({ name, label, variant, format, colorMap, labels })"
         @tier "presentation"

package/behaviors/lolo/ui/core/organisms/ui-dock-layout.lolo

@@ -47,6 +47,7 @@ orbital DockLayoutOrbital {
           secondarySidebarClassName: @config.secondarySidebarClassName
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           aria-label: @config.ariaLabel
           aria-labelledby: @config.ariaLabelledby
           aria-describedby: @config.ariaDescribedby
@@ -128,7 +129,7 @@ orbital DockLayoutOrbital {
         @tier "presentation"
       sidebarCollapsed : boolean
         @label "Sidebar Collapsed"
-        @description "Whether `sidebar` is collapsed. @default false"
+        @description "Whether `sidebar` is collapsed (controlled; the layout keeps its own state when omitted)."
         @tier "presentation"
       onSidebarCollapsedChange : event = "SIDEBAR_COLLAPSED_CHANGE"
         @label "On Sidebar Collapsed Change"
@@ -148,7 +149,7 @@ orbital DockLayoutOrbital {
         @tier "presentation"
       bottomPanelCollapsed : boolean
         @label "Bottom Panel Collapsed"
-        @description "Whether `bottomPanel` is collapsed. @default false"
+        @description "Whether `bottomPanel` is collapsed (controlled; the layout keeps its own state when omitted)."
         @tier "presentation"
       onBottomPanelCollapsedChange : event = "BOTTOM_PANEL_COLLAPSED_CHANGE"
         @label "On Bottom Panel Collapsed Change"
@@ -168,7 +169,7 @@ orbital DockLayoutOrbital {
         @tier "presentation"
       secondarySidebarCollapsed : boolean
         @label "Secondary Sidebar Collapsed"
-        @description "Whether `secondarySidebar` is collapsed. @default false"
+        @description "Whether `secondarySidebar` is collapsed (controlled; the layout keeps its own state when omitted)."
         @tier "presentation"
       onSecondarySidebarCollapsedChange : event = "SECONDARY_SIDEBAR_COLLAPSED_CHANGE"
         @label "On Secondary Sidebar Collapsed Change"
@@ -234,6 +235,10 @@ orbital DockLayoutOrbital {
         @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/organisms/ui-drawer-slot.lolo

@@ -31,6 +31,7 @@ orbital DrawerSlotOrbital {
           sourceTrait: @config.sourceTrait
           enter: @config.enter
           enterDelay: @config.enterDelay
+          skeleton: @config.skeleton
           type: drawer-slot
         })
     }
@@ -76,6 +77,10 @@ orbital DrawerSlotOrbital {
         @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/organisms/ui-form-section.lolo

@@ -146,6 +146,8 @@ orbital FormSectionOrbital {
       INIT -> idle when (and @config.selfFetch (!= (str/default ?id "") "") (!= @config.mode "create"))
         (fetch FormSectionItem { id: ?id, emit: { success: FormSectionLoaded } })
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -196,6 +198,8 @@ orbital FormSectionOrbital {
         })
       INIT -> idle when (not (and @config.selfFetch (!= (str/default ?id "") "") (!= @config.mode "create")))
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -249,6 +253,8 @@ orbital FormSectionOrbital {
     state idle {
       INIT -> idle
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -299,6 +305,8 @@ orbital FormSectionOrbital {
         })
       FormSectionLoaded -> idle
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -378,6 +386,14 @@ orbital FormSectionOrbital {
     }
 
     config {
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface (with card padding) behind this block unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none" = form
+        @label "Skeleton"
+        @description "The shape an empty slot shows while this form's server render is in flight (`none` opts out). @default 'form'"
+        @tier "presentation"
       children : node
         @label "Children"
         @description "Form fields (traditional React children)"

package/behaviors/lolo/ui/core/organisms/ui-form.lolo

@@ -146,6 +146,8 @@ orbital FormOrbital {
       INIT -> idle when (and @config.selfFetch (!= (str/default ?id "") "") (!= @config.mode "create"))
         (fetch FormItem { id: ?id, emit: { success: FormLoaded } })
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -196,6 +198,8 @@ orbital FormOrbital {
         })
       INIT -> idle when (not (and @config.selfFetch (!= (str/default ?id "") "") (!= @config.mode "create")))
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -249,6 +253,8 @@ orbital FormOrbital {
     state idle {
       INIT -> idle
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -299,6 +305,8 @@ orbital FormOrbital {
         })
       FormLoaded -> idle
         (render-ui main {
+          surface: @config.surface
+          skeleton: @config.skeleton
           children: @config.children
           onSubmit: @config.onSubmit
           onCancel: @config.onCancel
@@ -378,6 +386,14 @@ orbital FormOrbital {
     }
 
     config {
+      surface : "auto" | "none" = auto
+        @label "Surface"
+        @description "Content surface: `auto` paints the theme's surface (with card padding) behind this block unless it already sits on one (a card, dialog or another block); `none` opts out."
+        @tier "presentation"
+      skeleton : "header" | "table" | "list" | "grid" | "detail" | "stats" | "form" | "card" | "text" | "none" = form
+        @label "Skeleton"
+        @description "The shape an empty slot shows while this form's server render is in flight (`none` opts out). @default 'form'"
+        @tier "presentation"
       children : node
         @label "Children"
         @description "Form fields (traditional React children)"

package/behaviors/lolo/ui/core/organisms/ui-master-detail-layout.lolo

@@ -22,6 +22,7 @@ orbital MasterDetailLayoutOrbital {
           detailClassName: @config.detailClassName
           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 MasterDetailLayoutOrbital {
         @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)."