@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/skeleton.md

@@ -0,0 +1,272 @@
+# Skeleton
+
+Rectangular skeleton loading placeholder.
+
+```yaml
+- id: basic_line
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 200
+    height: 16
+- id: basic_block
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 120
+    height: 40
+- id: basic_tall
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 80
+    height: 80
+```
+
+```yaml
+- id: active_thin
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 250
+    height: 12
+- id: active_medium
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 300
+    height: 16
+- id: active_thick
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 180
+    height: 24
+```
+
+```yaml
+- id: avatar_row
+  type: Box
+  layout:
+    gap: 12
+    align: center
+  blocks:
+    - id: avatar_circle
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: round
+    - id: avatar_lines
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: avatar_name
+          type: Skeleton
+          properties:
+            width: 180
+            height: 14
+        - id: avatar_desc
+          type: Skeleton
+          properties:
+            width: 120
+            height: 14
+```
+
+```yaml
+- id: paragraph_row_container
+  type: Box
+  layout:
+    gap: 10
+  blocks:
+    - id: para_row_1
+      type: Skeleton
+      properties:
+        width: 100%
+        height: 14
+    - id: para_row_2
+      type: Skeleton
+      properties:
+        width: 100%
+        height: 14
+    - id: para_row_3
+      type: Skeleton
+      properties:
+        width: 100%
+        height: 14
+    - id: para_row_4
+      type: Skeleton
+      properties:
+        width: 60%
+        height: 14
+```
+
+```yaml
+- id: width_full
+  type: Skeleton
+  properties:
+    width: 100%
+    height: 16
+- id: width_half
+  type: Skeleton
+  properties:
+    width: 50%
+    height: 16
+- id: width_quarter
+  type: Skeleton
+  properties:
+    width: 25%
+    height: 16
+- id: width_px
+  type: Skeleton
+  properties:
+    width: 300
+    height: 16
+```
+
+```yaml
+- id: height_thin
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 200
+    height: 8
+- id: height_default
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 200
+    height: 16
+- id: height_medium
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 200
+    height: 32
+- id: height_thick
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 200
+    height: 48
+```
+
+```yaml
+- id: pct_100
+  type: Skeleton
+  properties:
+    width: 100%
+    height: 14
+- id: pct_80
+  type: Skeleton
+  properties:
+    width: 80%
+    height: 14
+- id: pct_60
+  type: Skeleton
+  properties:
+    width: 60%
+    height: 14
+- id: pct_40
+  type: Skeleton
+  properties:
+    width: 40%
+    height: 14
+```
+
+```yaml
+- id: card_skeleton
+  type: Box
+  style:
+    padding: 16
+    border: 1px solid
+    borderRadius: 8
+    maxWidth: 360
+  layout:
+    gap: 12
+  blocks:
+    - id: card_image
+      type: Skeleton
+      properties:
+        width: 100%
+        height: 180
+    - id: card_title
+      type: Skeleton
+      properties:
+        width: 70%
+        height: 20
+    - id: card_desc_1
+      type: Skeleton
+      properties:
+        width: 100%
+        height: 14
+    - id: card_desc_2
+      type: Skeleton
+      properties:
+        width: 100%
+        height: 14
+    - id: card_desc_3
+      type: Skeleton
+      properties:
+        width: 50%
+        height: 14
+```
+
+```yaml
+- id: style_rounded
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 200
+    height: 20
+  style:
+    .element:
+      borderRadius: 10
+- id: style_square
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 60
+    height: 60
+  style:
+    .element:
+      borderRadius: 8
+- id: style_circle
+  type: Skeleton
+  layout:
+    flex: 0 0 auto
+  properties:
+    width: 60
+    height: 60
+  style:
+    .element:
+      borderRadius: 30
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `height` | number \| string | - | Height of the skeleton. |
+| `width` | number \| string | - | Width of the skeleton. |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Skeleton element. |
+
+No slots defined.

package/content/display-blocks/skeletonavatar.md

@@ -0,0 +1,222 @@
+# SkeletonAvatar
+
+Avatar-shaped skeleton loading placeholder.
+
+```yaml
+- id: shape_round
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    shape: round
+- id: shape_square
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    shape: square
+```
+
+```yaml
+- id: size_small_round
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    shape: round
+- id: size_medium_round
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    shape: round
+- id: size_large_round
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    shape: round
+```
+
+```yaml
+- id: size_small_square
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    shape: square
+- id: size_medium_square
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    shape: square
+- id: size_large_square
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    shape: square
+```
+
+```yaml
+- id: active_round_small
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    shape: round
+- id: active_round_medium
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    shape: round
+- id: active_round_large
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    shape: round
+- id: active_square_small
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    shape: square
+- id: active_square_medium
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    shape: square
+- id: active_square_large
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    shape: square
+```
+
+```yaml
+- id: custom_tiny
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    shape: round
+  style:
+    .element:
+      width: 16
+      height: 16
+- id: custom_xlarge
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    shape: round
+  style:
+    .element:
+      width: 64
+      height: 64
+      borderRadius: 32
+- id: custom_xxlarge
+  type: SkeletonAvatar
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    shape: round
+  style:
+    .element:
+      width: 96
+      height: 96
+      borderRadius: 48
+```
+
+```yaml
+- id: avatar_text_row
+  type: Box
+  layout:
+    gap: 12
+    align: center
+  blocks:
+    - id: avatar_icon
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: round
+    - id: avatar_text_col
+      type: Box
+      layout:
+        gap: 6
+      blocks:
+        - id: avatar_name_line
+          type: Skeleton
+          properties:
+            width: 160
+            height: 14
+        - id: avatar_desc_line
+          type: Skeleton
+          properties:
+            width: 100
+            height: 12
+- id: avatar_square_row
+  type: Box
+  layout:
+    gap: 12
+    align: center
+  blocks:
+    - id: avatar_sq_icon
+      type: SkeletonAvatar
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        shape: square
+    - id: avatar_sq_col
+      type: Box
+      layout:
+        gap: 6
+      blocks:
+        - id: avatar_sq_line_1
+          type: Skeleton
+          properties:
+            width: 200
+            height: 14
+        - id: avatar_sq_line_2
+          type: Skeleton
+          properties:
+            width: 140
+            height: 14
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | string | `"medium"` | Size of the skeleton. Enum: `small`, `medium`, `large`. |
+| `shape` | string | `"round"` | Shape of the skeleton. Enum: `square`, `round`. |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The SkeletonAvatar element. |
+
+No slots defined.

package/content/display-blocks/skeletonbutton.md

@@ -0,0 +1,245 @@
+# SkeletonButton
+
+Button-shaped skeleton loading placeholder.
+
+```yaml
+- id: shape_default
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 120
+- id: shape_round
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 120
+    shape: round
+```
+
+```yaml
+- id: size_small
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    width: 80
+- id: size_medium
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 100
+- id: size_large
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    width: 120
+```
+
+```yaml
+- id: size_small_round
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    width: 80
+    shape: round
+- id: size_medium_round
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 100
+    shape: round
+- id: size_large_round
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    width: 120
+    shape: round
+```
+
+```yaml
+- id: active_small
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: small
+    width: 80
+- id: active_medium
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 100
+- id: active_large
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    width: 120
+- id: active_round
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 120
+    shape: round
+```
+
+```yaml
+- id: block_small
+  type: SkeletonButton
+  properties:
+    size: small
+- id: block_medium
+  type: SkeletonButton
+  properties:
+    size: medium
+- id: block_large
+  type: SkeletonButton
+  properties:
+    size: large
+```
+
+```yaml
+- id: block_small_round
+  type: SkeletonButton
+  properties:
+    size: small
+    shape: round
+- id: block_medium_round
+  type: SkeletonButton
+  properties:
+    size: medium
+    shape: round
+- id: block_large_round
+  type: SkeletonButton
+  properties:
+    size: large
+    shape: round
+```
+
+```yaml
+- id: custom_px_80
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 80
+- id: custom_px_160
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 160
+- id: custom_px_240
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 240
+- id: custom_pct_50
+  type: SkeletonButton
+  properties:
+    size: medium
+    width: 50%
+```
+
+```yaml
+- id: btn_group_row
+  type: Box
+  layout:
+    gap: 8
+  blocks:
+    - id: btn_group_1
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 100
+        shape: round
+    - id: btn_group_2
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 80
+        shape: round
+    - id: btn_group_3
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 60
+        shape: round
+```
+
+```yaml
+- id: style_custom_radius
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 140
+  style:
+    .element:
+      borderRadius: 4
+- id: style_no_radius
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: medium
+    width: 140
+  style:
+    .element:
+      borderRadius: 0
+- id: style_circle
+  type: SkeletonButton
+  layout:
+    flex: 0 0 auto
+  properties:
+    size: large
+    width: 40
+  style:
+    .element:
+      borderRadius: 20
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | string | `"medium"` | Size of the skeleton. Enum: `small`, `medium`, `large`. |
+| `width` | number \| string | - | Width of the skeleton. |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The SkeletonButton element. |
+
+No slots defined.