@sky.ui/core 0.0.27 → 0.0.28

package/dist/custom-elements.json

@@ -453,83 +453,59 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/sky-avatar/sky-avatar.ts",
+      "path": "src/sky-appbar/sky-appbar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SkyAvatar",
+          "name": "SkyAppbar",
           "cssParts": [
             {
-              "description": "The avatar container element.",
-              "name": "avatar"
+              "description": "Wrapper that contains the leading slot, title, and actions.",
+              "name": "content"
             },
             {
-              "description": "The loading overlay container (shown when `loading` is true).",
-              "name": "loading-overlay"
+              "description": "Container for the leading slot (e.g. menu button).",
+              "name": "leading"
             },
             {
-              "description": "The spinner element shown when loading.",
-              "name": "spinner"
+              "description": "The title area (contains .title-text with the title string).",
+              "name": "title"
+            },
+            {
+              "description": "The trailing actions container.",
+              "name": "actions"
             }
           ],
           "slots": [
             {
-              "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
+              "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
+              "name": "button"
+            },
+            {
+              "description": "Trailing actions (icons/buttons). This is the default slot.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"50px\"",
-              "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Image URL; fallback slot is shown on load error.",
-              "attribute": "image"
-            },
-            {
-              "kind": "field",
-              "name": "fit",
-              "type": {
-                "text": "SkyAvatarFit"
-              },
-              "default": "\"cover\"",
-              "description": "Image fill mode: `cover` (default) or `contain`.",
-              "attribute": "fit",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "radius",
+              "name": "dependencies",
               "type": {
-                "text": "string"
+                "text": "Record<string, CustomElementConstructor>"
               },
-              "default": "\"md\"",
-              "description": "Border radius token or CSS value.",
-              "attribute": "radius"
+              "static": true,
+              "default": "{ \"sky-icon\": SkyIcon, }"
             },
             {
               "kind": "field",
-              "name": "alt",
+              "name": "title",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Accessible name when image content conveys meaning.",
-              "attribute": "alt"
+              "default": "\"App Bar\"",
+              "description": "Title text displayed in the app bar.",
+              "attribute": "title"
             },
             {
               "kind": "field",
@@ -537,325 +513,206 @@
               "type": {
                 "text": "string"
               },
-              "default": "\"dark\"",
-              "description": "Token or CSS color applied to fallback slot content.",
+              "default": "\"default\"",
+              "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
               "attribute": "color"
             },
             {
               "kind": "field",
-              "name": "outline",
+              "name": "url",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "CSS `outline` value.",
-              "attribute": "outline"
-            },
-            {
-              "kind": "field",
-              "name": "outlineOffset",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"2px\"",
-              "description": "CSS `outline-offset` value.",
-              "attribute": "outlineOffset"
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows loading overlay when true.",
-              "attribute": "loading",
-              "reflects": true
+              "description": "Background image URL.",
+              "attribute": "url"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "banner",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Dims and disables pointer interactions.",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "true",
+              "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
+              "attribute": "banner"
             },
             {
               "kind": "field",
-              "name": "interactive",
+              "name": "dense",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables interactive behavior with keyboard/click activation.",
-              "attribute": "interactive"
+              "description": "Enables compact vertical spacing.",
+              "attribute": "dense"
             },
             {
               "kind": "field",
-              "name": "shadow",
+              "name": "elevated",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
-              "attribute": "shadow",
-              "reflects": true
+              "description": "Applies elevated shadow styling.",
+              "attribute": "elevated"
             },
             {
               "kind": "field",
-              "name": "_imageError",
+              "name": "leadingLabel",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "description": "True when image failed to load; show slot instead."
-            },
-            {
-              "kind": "field",
-              "name": "_onImageLoad",
-              "privacy": "private",
-              "description": "Marks image load success and keeps image rendering active."
-            },
-            {
-              "kind": "field",
-              "name": "_onImageError",
-              "privacy": "private",
-              "description": "Marks image load failure and enables fallback slot rendering."
-            },
-            {
-              "kind": "method",
-              "name": "_handleInteractiveClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Re-dispatches click in interactive mode for host-level consumers."
+              "default": "\"Open menu\"",
+              "description": "Accessible label for default leading button fallback.",
+              "attribute": "leadingLabel"
             },
             {
               "kind": "method",
-              "name": "_handleInteractiveKeydown",
+              "name": "_applyColorSurface",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles keyboard activation in interactive mode."
+              "description": "Applies glass vs solid surface tokens from `color`."
             },
             {
               "kind": "method",
-              "name": "adjustSpinnerSize",
+              "name": "_applyBackgroundImage",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Derives spinner dimensions from current avatar size."
-            }
-          ],
-          "events": [
-            {
-              "name": "click",
-              "type": {
-                "text": "Event"
-              }
+              "description": "Sets background image CSS variable from `url`."
             }
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "title",
               "type": {
                 "text": "string"
               },
-              "default": "\"50px\"",
-              "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
-              "fieldName": "size"
+              "default": "\"App Bar\"",
+              "description": "Title text displayed in the app bar.",
+              "fieldName": "title"
             },
             {
-              "name": "image",
+              "name": "color",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Image URL; fallback slot is shown on load error.",
-              "fieldName": "image"
+              "default": "\"default\"",
+              "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
+              "fieldName": "color"
             },
             {
-              "name": "fit",
+              "name": "url",
               "type": {
-                "text": "SkyAvatarFit"
+                "text": "string"
               },
-              "default": "\"cover\"",
-              "description": "Image fill mode: `cover` (default) or `contain`.",
-              "fieldName": "fit"
+              "default": "\"\"",
+              "description": "Background image URL.",
+              "fieldName": "url"
             },
             {
-              "name": "radius",
+              "name": "banner",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"md\"",
-              "description": "Border radius token or CSS value.",
-              "fieldName": "radius"
+              "default": "true",
+              "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
+              "fieldName": "banner"
             },
             {
-              "name": "alt",
+              "name": "dense",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "Accessible name when image content conveys meaning.",
-              "fieldName": "alt"
+              "default": "false",
+              "description": "Enables compact vertical spacing.",
+              "fieldName": "dense"
             },
             {
-              "name": "color",
+              "name": "elevated",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"dark\"",
-              "description": "Token or CSS color applied to fallback slot content.",
-              "fieldName": "color"
+              "default": "false",
+              "description": "Applies elevated shadow styling.",
+              "fieldName": "elevated"
             },
             {
-              "name": "outline",
+              "name": "leadingLabel",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "CSS `outline` value.",
-              "fieldName": "outline"
-            },
-            {
-              "name": "outlineOffset",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"2px\"",
-              "description": "CSS `outline-offset` value.",
-              "fieldName": "outlineOffset"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows loading overlay when true.",
-              "fieldName": "loading"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Dims and disables pointer interactions.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables interactive behavior with keyboard/click activation.",
-              "fieldName": "interactive"
-            },
-            {
-              "name": "shadow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
-              "fieldName": "shadow"
+              "default": "\"Open menu\"",
+              "description": "Accessible label for default leading button fallback.",
+              "fieldName": "leadingLabel"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "sky-avatar",
+          "tagName": "sky-appbar",
           "customElement": true,
-          "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
+          "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkyAvatar",
+          "name": "SkyAppbar",
           "declaration": {
-            "name": "SkyAvatar",
-            "module": "src/sky-avatar/sky-avatar.ts"
+            "name": "SkyAppbar",
+            "module": "src/sky-appbar/sky-appbar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sky-avatar",
+          "name": "sky-appbar",
           "declaration": {
-            "name": "SkyAvatar",
-            "module": "src/sky-avatar/sky-avatar.ts"
+            "name": "SkyAppbar",
+            "module": "src/sky-appbar/sky-appbar.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/sky-appbar/sky-appbar.ts",
+      "path": "src/sky-badge/sky-badge.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SkyAppbar",
+          "name": "SkyBadge",
           "cssParts": [
             {
-              "description": "Wrapper that contains the leading slot, title, and actions.",
-              "name": "content"
-            },
-            {
-              "description": "Container for the leading slot (e.g. menu button).",
-              "name": "leading"
+              "description": "Wrapper around the slotted content and the badge.",
+              "name": "container"
             },
             {
-              "description": "The title area (contains .title-text with the title string).",
-              "name": "title"
+              "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
+              "name": "badge"
             },
             {
-              "description": "The trailing actions container.",
-              "name": "actions"
+              "description": "The icon element when `isIcon` is true.",
+              "name": "icon"
             }
           ],
           "slots": [
             {
-              "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
-              "name": "button"
+              "description": "The content the badge attaches to.",
+              "name": ""
             },
             {
-              "description": "Trailing actions (icons/buttons). This is the default slot.",
-              "name": ""
+              "description": "Optional slot to override the badge content entirely.",
+              "name": "badge"
             }
           ],
           "members": [
@@ -870,419 +727,690 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "statusColor",
               "type": {
                 "text": "string"
               },
-              "default": "\"App Bar\"",
-              "description": "Title text displayed in the app bar.",
-              "attribute": "title"
+              "default": "\"success\"",
+              "description": "Badge background token or CSS color.",
+              "attribute": "statusColor",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "textColor",
               "type": {
                 "text": "string"
               },
               "default": "\"default\"",
-              "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
-              "attribute": "color"
+              "description": "Text color token or CSS color.",
+              "attribute": "textColor",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "url",
+              "name": "iconColor",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Background image URL.",
-              "attribute": "url"
+              "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
+              "attribute": "iconColor",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "banner",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "SkyBadgePosition"
               },
-              "default": "true",
-              "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
-              "attribute": "banner"
+              "default": "\"default\"",
+              "description": "Layout mode: `default | floating | inline`.",
+              "attribute": "position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dense",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Enables compact vertical spacing.",
-              "attribute": "dense"
+              "default": "\"\"",
+              "description": "Badge text/count or icon name in icon mode.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "elevated",
+              "name": "isIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Applies elevated shadow styling.",
-              "attribute": "elevated"
+              "description": "Renders icon mode when true.",
+              "attribute": "isIcon",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "leadingLabel",
+              "name": "size",
               "type": {
                 "text": "string"
               },
-              "default": "\"Open menu\"",
-              "description": "Accessible label for default leading button fallback.",
-              "attribute": "leadingLabel"
+              "default": "\"\"",
+              "description": "Badge and icon size CSS length.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_applyColorSurface",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SkyBadgeShape"
               },
-              "description": "Applies glass vs solid surface tokens from `color`."
+              "default": "\"custom\"",
+              "description": "Badge shape: `circle | pill | custom`.",
+              "attribute": "shape",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "_applyBackgroundImage",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
               },
-              "description": "Sets background image CSS variable from `url`."
-            }
-          ],
-          "attributes": [
+              "default": "99",
+              "description": "Maximum numeric count before rendering overflow label.",
+              "attribute": "max"
+            },
             {
-              "name": "title",
+              "kind": "field",
+              "name": "hideWhenZero",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"App Bar\"",
-              "description": "Title text displayed in the app bar.",
-              "fieldName": "title"
+              "default": "false",
+              "description": "Hides badge when value resolves to numeric zero.",
+              "attribute": "hideWhenZero"
             },
             {
-              "name": "color",
+              "kind": "field",
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Forces badge visibility independent of value.",
+              "attribute": "show",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "offsetX",
               "type": {
                 "text": "string"
               },
-              "default": "\"default\"",
-              "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
-              "fieldName": "color"
+              "default": "\"0px\"",
+              "description": "Horizontal offset CSS length.",
+              "attribute": "offsetX"
             },
             {
-              "name": "url",
+              "kind": "field",
+              "name": "offsetY",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Background image URL.",
-              "fieldName": "url"
+              "default": "\"0px\"",
+              "description": "Vertical offset CSS length.",
+              "attribute": "offsetY"
             },
             {
-              "name": "banner",
+              "kind": "field",
+              "name": "ring",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
-              "fieldName": "banner"
+              "default": "false",
+              "description": "Enables visual ring around the badge.",
+              "attribute": "ring"
             },
             {
-              "name": "dense",
+              "kind": "field",
+              "name": "ringColor",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"primary\"",
+              "description": "Ring color token or CSS color.",
+              "attribute": "ringColor"
+            },
+            {
+              "kind": "field",
+              "name": "ringOffset",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"1px\"",
+              "description": "Ring offset CSS length.",
+              "attribute": "ringOffset"
+            },
+            {
+              "kind": "field",
+              "name": "badgeLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "ARIA label override.",
+              "attribute": "badgeLabel"
+            },
+            {
+              "kind": "field",
+              "name": "badgeAriaHidden",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables compact vertical spacing.",
-              "fieldName": "dense"
+              "description": "Hides badge from assistive technology when true.",
+              "attribute": "badgeAriaHidden"
             },
             {
-              "name": "elevated",
+              "kind": "field",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Applies elevated shadow styling.",
-              "fieldName": "elevated"
+              "description": "Enables focus/activation and `badge-click` emission.",
+              "attribute": "interactive"
             },
             {
-              "name": "leadingLabel",
+              "kind": "field",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "text": "SkyBadgePlacement"
               },
-              "default": "\"Open menu\"",
-              "description": "Accessible label for default leading button fallback.",
-              "fieldName": "leadingLabel"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "sky-appbar",
-          "customElement": true,
-          "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkyAppbar",
-          "declaration": {
-            "name": "SkyAppbar",
-            "module": "src/sky-appbar/sky-appbar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sky-appbar",
-          "declaration": {
-            "name": "SkyAppbar",
-            "module": "src/sky-appbar/sky-appbar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/sky-badge/sky-badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SkyBadge",
-          "cssParts": [
+              "default": "\"custom\"",
+              "description": "Anchor placement preset for badge positioning.",
+              "attribute": "placement",
+              "reflects": true
+            },
             {
-              "description": "Wrapper around the slotted content and the badge.",
-              "name": "container"
+              "kind": "field",
+              "name": "_badgeEl",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
-              "name": "badge"
+              "kind": "field",
+              "name": "badgeRef",
+              "privacy": "public",
+              "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
             },
             {
-              "description": "The icon element when `isIcon` is true.",
-              "name": "icon"
-            }
-          ],
-          "slots": [
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ mode: \"open\", delegatesFocus: true, }"
+            },
             {
-              "description": "The content the badge attaches to.",
-              "name": ""
+              "kind": "method",
+              "name": "showBadge",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Forces badge visibility on."
+            },
+            {
+              "kind": "method",
+              "name": "hideBadge",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Forces badge visibility off."
+            },
+            {
+              "kind": "method",
+              "name": "setValue",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "Badge value or icon name."
+                }
+              ],
+              "description": "Updates badge value for text/count or icon modes."
+            },
+            {
+              "kind": "field",
+              "name": "_onActivate",
+              "privacy": "private",
+              "description": "Emits `badge-click` for interactive activation."
+            },
+            {
+              "kind": "field",
+              "name": "_onKeydown",
+              "privacy": "private",
+              "description": "Handles keyboard activation with Enter and Space."
+            },
+            {
+              "kind": "method",
+              "name": "_computeAriaLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "displayValue",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ],
+              "description": "Computes accessible badge label from current render state."
+            },
+            {
+              "kind": "method",
+              "name": "_computeAnchors",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\r\n    top: string;\r\n    right: string;\r\n    bottom: string;\r\n    left: string;\r\n  }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "placement",
+                  "type": {
+                    "text": "SkyBadgePlacement"
+                  }
+                }
+              ],
+              "description": "Resolves anchor edges from placement preset."
             },
             {
-              "description": "Optional slot to override the badge content entirely.",
-              "name": "badge"
+              "kind": "method",
+              "name": "_resolveBadgeSurface",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\r\n    bg: string;\r\n    color: string;\r\n    border: string;\r\n  }"
+                }
+              },
+              "description": "Maps semantic status tokens to soft badge surface colors."
             }
           ],
-          "members": [
+          "events": [
             {
-              "kind": "field",
-              "name": "dependencies",
               "type": {
-                "text": "Record<string, CustomElementConstructor>"
+                "text": "CustomEvent<SkyBadgeClickEventDetail>"
               },
-              "static": true,
-              "default": "{ \"sky-icon\": SkyIcon, }"
-            },
+              "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
+              "name": "badge-click"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
               "name": "statusColor",
               "type": {
                 "text": "string"
               },
               "default": "\"success\"",
               "description": "Badge background token or CSS color.",
-              "attribute": "statusColor",
-              "reflects": true
+              "fieldName": "statusColor"
             },
             {
-              "kind": "field",
               "name": "textColor",
               "type": {
                 "text": "string"
               },
               "default": "\"default\"",
               "description": "Text color token or CSS color.",
-              "attribute": "textColor",
-              "reflects": true
+              "fieldName": "textColor"
             },
             {
-              "kind": "field",
               "name": "iconColor",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
-              "attribute": "iconColor",
-              "reflects": true
+              "fieldName": "iconColor"
             },
             {
-              "kind": "field",
               "name": "position",
               "type": {
                 "text": "SkyBadgePosition"
               },
               "default": "\"default\"",
               "description": "Layout mode: `default | floating | inline`.",
-              "attribute": "position",
-              "reflects": true
+              "fieldName": "position"
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Badge text/count or icon name in icon mode.",
-              "attribute": "value"
+              "fieldName": "value"
             },
             {
-              "kind": "field",
               "name": "isIcon",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Renders icon mode when true.",
-              "attribute": "isIcon",
-              "reflects": true
+              "fieldName": "isIcon"
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Badge and icon size CSS length.",
-              "attribute": "size",
-              "reflects": true
+              "fieldName": "size"
             },
             {
-              "kind": "field",
               "name": "shape",
               "type": {
                 "text": "SkyBadgeShape"
               },
               "default": "\"custom\"",
               "description": "Badge shape: `circle | pill | custom`.",
-              "attribute": "shape",
-              "reflects": true
+              "fieldName": "shape"
             },
             {
-              "kind": "field",
               "name": "max",
               "type": {
                 "text": "number"
               },
               "default": "99",
               "description": "Maximum numeric count before rendering overflow label.",
-              "attribute": "max"
+              "fieldName": "max"
             },
             {
-              "kind": "field",
               "name": "hideWhenZero",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Hides badge when value resolves to numeric zero.",
-              "attribute": "hideWhenZero"
+              "fieldName": "hideWhenZero"
             },
             {
-              "kind": "field",
               "name": "show",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
               "description": "Forces badge visibility independent of value.",
-              "attribute": "show",
-              "reflects": true
+              "fieldName": "show"
             },
             {
-              "kind": "field",
               "name": "offsetX",
               "type": {
                 "text": "string"
               },
               "default": "\"0px\"",
               "description": "Horizontal offset CSS length.",
-              "attribute": "offsetX"
+              "fieldName": "offsetX"
             },
             {
-              "kind": "field",
               "name": "offsetY",
               "type": {
                 "text": "string"
               },
               "default": "\"0px\"",
               "description": "Vertical offset CSS length.",
-              "attribute": "offsetY"
+              "fieldName": "offsetY"
             },
             {
-              "kind": "field",
               "name": "ring",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Enables visual ring around the badge.",
-              "attribute": "ring"
+              "fieldName": "ring"
             },
             {
-              "kind": "field",
               "name": "ringColor",
               "type": {
                 "text": "string"
               },
               "default": "\"primary\"",
               "description": "Ring color token or CSS color.",
-              "attribute": "ringColor"
+              "fieldName": "ringColor"
+            },
+            {
+              "name": "ringOffset",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"1px\"",
+              "description": "Ring offset CSS length.",
+              "fieldName": "ringOffset"
+            },
+            {
+              "name": "badgeLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "ARIA label override.",
+              "fieldName": "badgeLabel"
+            },
+            {
+              "name": "badgeAriaHidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides badge from assistive technology when true.",
+              "fieldName": "badgeAriaHidden"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables focus/activation and `badge-click` emission.",
+              "fieldName": "interactive"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "SkyBadgePlacement"
+              },
+              "default": "\"custom\"",
+              "description": "Anchor placement preset for badge positioning.",
+              "fieldName": "placement"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "sky-badge",
+          "customElement": true,
+          "summary": "Badge for status dots, counts, or icons anchored to slotted content."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkyBadge",
+          "declaration": {
+            "name": "SkyBadge",
+            "module": "src/sky-badge/sky-badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sky-badge",
+          "declaration": {
+            "name": "SkyBadge",
+            "module": "src/sky-badge/sky-badge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/sky-avatar/sky-avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SkyAvatar",
+          "cssParts": [
+            {
+              "description": "The avatar container element.",
+              "name": "avatar"
+            },
+            {
+              "description": "The loading overlay container (shown when `loading` is true).",
+              "name": "loading-overlay"
+            },
+            {
+              "description": "The spinner element shown when loading.",
+              "name": "spinner"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"50px\"",
+              "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Image URL; fallback slot is shown on load error.",
+              "attribute": "image"
+            },
+            {
+              "kind": "field",
+              "name": "fit",
+              "type": {
+                "text": "SkyAvatarFit"
+              },
+              "default": "\"cover\"",
+              "description": "Image fill mode: `cover` (default) or `contain`.",
+              "attribute": "fit",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "radius",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"md\"",
+              "description": "Border radius token or CSS value.",
+              "attribute": "radius"
+            },
+            {
+              "kind": "field",
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Accessible name when image content conveys meaning.",
+              "attribute": "alt"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"dark\"",
+              "description": "Token or CSS color applied to fallback slot content.",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "outline",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "CSS `outline` value.",
+              "attribute": "outline"
             },
             {
               "kind": "field",
-              "name": "ringOffset",
+              "name": "outlineOffset",
               "type": {
                 "text": "string"
               },
-              "default": "\"1px\"",
-              "description": "Ring offset CSS length.",
-              "attribute": "ringOffset"
+              "default": "\"2px\"",
+              "description": "CSS `outline-offset` value.",
+              "attribute": "outlineOffset"
             },
             {
               "kind": "field",
-              "name": "badgeLabel",
+              "name": "loading",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "ARIA label override.",
-              "attribute": "badgeLabel"
+              "default": "false",
+              "description": "Shows loading overlay when true.",
+              "attribute": "loading",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "badgeAriaHidden",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hides badge from assistive technology when true.",
-              "attribute": "badgeAriaHidden"
+              "description": "Dims and disables pointer interactions.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1291,318 +1419,190 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables focus/activation and `badge-click` emission.",
+              "description": "Enables interactive behavior with keyboard/click activation.",
               "attribute": "interactive"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "shadow",
               "type": {
-                "text": "SkyBadgePlacement"
+                "text": "boolean"
               },
-              "default": "\"custom\"",
-              "description": "Anchor placement preset for badge positioning.",
-              "attribute": "placement",
+              "default": "false",
+              "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
+              "attribute": "shadow",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "_badgeEl",
-              "type": {
-                "text": "HTMLSpanElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "badgeRef",
-              "privacy": "public",
-              "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
-            },
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "_imageError",
               "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{ mode: \"open\", delegatesFocus: true, }"
-            },
-            {
-              "kind": "method",
-              "name": "showBadge",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Forces badge visibility on."
-            },
-            {
-              "kind": "method",
-              "name": "hideBadge",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Forces badge visibility off."
-            },
-            {
-              "kind": "method",
-              "name": "setValue",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "Badge value or icon name."
-                }
-              ],
-              "description": "Updates badge value for text/count or icon modes."
+              "privacy": "private",
+              "default": "false",
+              "description": "True when image failed to load; show slot instead."
             },
             {
               "kind": "field",
-              "name": "_onActivate",
+              "name": "_onImageLoad",
               "privacy": "private",
-              "description": "Emits `badge-click` for interactive activation."
+              "description": "Marks image load success and keeps image rendering active."
             },
             {
               "kind": "field",
-              "name": "_onKeydown",
+              "name": "_onImageError",
               "privacy": "private",
-              "description": "Handles keyboard activation with Enter and Space."
+              "description": "Marks image load failure and enables fallback slot rendering."
             },
             {
               "kind": "method",
-              "name": "_computeAriaLabel",
+              "name": "_handleInteractiveClick",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "string | null"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "displayValue",
+                  "name": "e",
                   "type": {
-                    "text": "string | null"
+                    "text": "Event"
                   }
                 }
               ],
-              "description": "Computes accessible badge label from current render state."
+              "description": "Re-dispatches click in interactive mode for host-level consumers."
             },
             {
               "kind": "method",
-              "name": "_computeAnchors",
+              "name": "_handleInteractiveKeydown",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "{\r\n    top: string;\r\n    right: string;\r\n    bottom: string;\r\n    left: string;\r\n  }"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "placement",
+                  "name": "e",
                   "type": {
-                    "text": "SkyBadgePlacement"
+                    "text": "KeyboardEvent"
                   }
                 }
               ],
-              "description": "Resolves anchor edges from placement preset."
+              "description": "Handles keyboard activation in interactive mode."
             },
             {
               "kind": "method",
-              "name": "_resolveBadgeSurface",
+              "name": "adjustSpinnerSize",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "{\r\n    bg: string;\r\n    color: string;\r\n    border: string;\r\n  }"
+                  "text": "void"
                 }
               },
-              "description": "Maps semantic status tokens to soft badge surface colors."
+              "description": "Derives spinner dimensions from current avatar size."
             }
           ],
           "events": [
             {
+              "name": "click",
               "type": {
-                "text": "CustomEvent<SkyBadgeClickEventDetail>"
-              },
-              "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
-              "name": "badge-click"
+                "text": "Event"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "statusColor",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"success\"",
-              "description": "Badge background token or CSS color.",
-              "fieldName": "statusColor"
-            },
-            {
-              "name": "textColor",
+              "name": "size",
               "type": {
                 "text": "string"
               },
-              "default": "\"default\"",
-              "description": "Text color token or CSS color.",
-              "fieldName": "textColor"
+              "default": "\"50px\"",
+              "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
+              "fieldName": "size"
             },
             {
-              "name": "iconColor",
+              "name": "image",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
-              "fieldName": "iconColor"
+              "description": "Image URL; fallback slot is shown on load error.",
+              "fieldName": "image"
             },
             {
-              "name": "position",
+              "name": "fit",
               "type": {
-                "text": "SkyBadgePosition"
+                "text": "SkyAvatarFit"
               },
-              "default": "\"default\"",
-              "description": "Layout mode: `default | floating | inline`.",
-              "fieldName": "position"
+              "default": "\"cover\"",
+              "description": "Image fill mode: `cover` (default) or `contain`.",
+              "fieldName": "fit"
             },
             {
-              "name": "value",
+              "name": "radius",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Badge text/count or icon name in icon mode.",
-              "fieldName": "value"
-            },
-            {
-              "name": "isIcon",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Renders icon mode when true.",
-              "fieldName": "isIcon"
+              "default": "\"md\"",
+              "description": "Border radius token or CSS value.",
+              "fieldName": "radius"
             },
             {
-              "name": "size",
+              "name": "alt",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Badge and icon size CSS length.",
-              "fieldName": "size"
-            },
-            {
-              "name": "shape",
-              "type": {
-                "text": "SkyBadgeShape"
-              },
-              "default": "\"custom\"",
-              "description": "Badge shape: `circle | pill | custom`.",
-              "fieldName": "shape"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              },
-              "default": "99",
-              "description": "Maximum numeric count before rendering overflow label.",
-              "fieldName": "max"
-            },
-            {
-              "name": "hideWhenZero",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hides badge when value resolves to numeric zero.",
-              "fieldName": "hideWhenZero"
-            },
-            {
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Forces badge visibility independent of value.",
-              "fieldName": "show"
-            },
-            {
-              "name": "offsetX",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"0px\"",
-              "description": "Horizontal offset CSS length.",
-              "fieldName": "offsetX"
+              "description": "Accessible name when image content conveys meaning.",
+              "fieldName": "alt"
             },
             {
-              "name": "offsetY",
+              "name": "color",
               "type": {
                 "text": "string"
               },
-              "default": "\"0px\"",
-              "description": "Vertical offset CSS length.",
-              "fieldName": "offsetY"
-            },
-            {
-              "name": "ring",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enables visual ring around the badge.",
-              "fieldName": "ring"
+              "default": "\"dark\"",
+              "description": "Token or CSS color applied to fallback slot content.",
+              "fieldName": "color"
             },
             {
-              "name": "ringColor",
+              "name": "outline",
               "type": {
                 "text": "string"
               },
-              "default": "\"primary\"",
-              "description": "Ring color token or CSS color.",
-              "fieldName": "ringColor"
+              "default": "\"\"",
+              "description": "CSS `outline` value.",
+              "fieldName": "outline"
             },
             {
-              "name": "ringOffset",
+              "name": "outlineOffset",
               "type": {
                 "text": "string"
               },
-              "default": "\"1px\"",
-              "description": "Ring offset CSS length.",
-              "fieldName": "ringOffset"
+              "default": "\"2px\"",
+              "description": "CSS `outline-offset` value.",
+              "fieldName": "outlineOffset"
             },
             {
-              "name": "badgeLabel",
+              "name": "loading",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "ARIA label override.",
-              "fieldName": "badgeLabel"
+              "default": "false",
+              "description": "Shows loading overlay when true.",
+              "fieldName": "loading"
             },
             {
-              "name": "badgeAriaHidden",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hides badge from assistive technology when true.",
-              "fieldName": "badgeAriaHidden"
+              "description": "Dims and disables pointer interactions.",
+              "fieldName": "disabled"
             },
             {
               "name": "interactive",
@@ -1610,43 +1610,43 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enables focus/activation and `badge-click` emission.",
+              "description": "Enables interactive behavior with keyboard/click activation.",
               "fieldName": "interactive"
             },
             {
-              "name": "placement",
+              "name": "shadow",
               "type": {
-                "text": "SkyBadgePlacement"
+                "text": "boolean"
               },
-              "default": "\"custom\"",
-              "description": "Anchor placement preset for badge positioning.",
-              "fieldName": "placement"
+              "default": "false",
+              "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
+              "fieldName": "shadow"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "sky-badge",
+          "tagName": "sky-avatar",
           "customElement": true,
-          "summary": "Badge for status dots, counts, or icons anchored to slotted content."
+          "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkyBadge",
+          "name": "SkyAvatar",
           "declaration": {
-            "name": "SkyBadge",
-            "module": "src/sky-badge/sky-badge.ts"
+            "name": "SkyAvatar",
+            "module": "src/sky-avatar/sky-avatar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sky-badge",
+          "name": "sky-avatar",
           "declaration": {
-            "name": "SkyBadge",
-            "module": "src/sky-badge/sky-badge.ts"
+            "name": "SkyAvatar",
+            "module": "src/sky-avatar/sky-avatar.ts"
           }
         }
       ]
@@ -6975,128 +6975,129 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/sky-flexcol/sky-flexcol.ts",
+      "path": "src/sky-flexbox/sky-flexbox.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SkyFlexcol",
+          "name": "SkyFlexbox",
           "cssParts": [
             {
-              "description": "The flex item wrapper.",
-              "name": "col"
+              "description": "The flex container element.",
+              "name": "container"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for column content.",
+              "description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "span",
+              "name": "direction",
               "type": {
-                "text": "number"
+                "text": "SkyFlexboxDirection"
               },
-              "default": "1",
-              "description": "Base number of columns to span.",
+              "default": "\"row\"",
+              "description": "Flex direction.",
               "privacy": "public",
-              "attribute": "span"
+              "attribute": "direction"
             },
             {
               "kind": "field",
-              "name": "spanLg",
+              "name": "wrap",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxWrap"
               },
-              "description": "Span at large breakpoints.",
+              "default": "\"wrap\"",
+              "description": "Flex wrap behavior.",
               "privacy": "public",
-              "attribute": "spanLg"
+              "attribute": "wrap"
             },
             {
               "kind": "field",
-              "name": "spanMd",
+              "name": "justify",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxJustify"
               },
-              "description": "Span at medium breakpoints.",
+              "default": "\"flex-start\"",
+              "description": "Main-axis alignment.",
               "privacy": "public",
-              "attribute": "spanMd"
+              "attribute": "justify"
             },
             {
               "kind": "field",
-              "name": "spanSm",
+              "name": "align",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxAlign"
               },
-              "description": "Span at small breakpoints.",
+              "default": "\"stretch\"",
+              "description": "Cross-axis alignment.",
               "privacy": "public",
-              "attribute": "spanSm"
+              "attribute": "align"
             },
             {
               "kind": "field",
-              "name": "spanXs",
+              "name": "alignContent",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxAlignContent"
               },
-              "description": "Span at extra-small breakpoints.",
+              "default": "\"normal\"",
+              "description": "Multi-line cross-axis distribution.",
               "privacy": "public",
-              "attribute": "spanXs"
+              "attribute": "alignContent"
             },
             {
               "kind": "field",
-              "name": "grow",
+              "name": "gap",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "Flex grow factor.",
+              "default": "\"16px\"",
+              "description": "Shared row/column gap value.",
               "privacy": "public",
-              "attribute": "grow"
+              "attribute": "gap"
             },
             {
               "kind": "field",
-              "name": "shrink",
+              "name": "gapX",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
-              "description": "Flex shrink factor.",
+              "description": "Horizontal gap override.",
               "privacy": "public",
-              "attribute": "shrink"
+              "attribute": "gapX"
             },
             {
               "kind": "field",
-              "name": "basis",
+              "name": "gapY",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Flex basis override.",
+              "description": "Vertical gap override.",
               "privacy": "public",
-              "attribute": "basis"
+              "attribute": "gapY"
             },
             {
               "kind": "field",
-              "name": "order",
+              "name": "col",
               "type": {
-                "text": "number | undefined"
+                "text": "number"
               },
-              "description": "Flex order override.",
+              "default": "12",
+              "description": "Total column count used for span calculations.",
               "privacy": "public",
-              "attribute": "order"
+              "attribute": "col"
             },
             {
               "kind": "field",
-              "name": "alignSelf",
+              "name": "_childMo",
               "type": {
-                "text": "SkyFlexcolAlignSelf | undefined"
+                "text": "MutationObserver | undefined"
               },
-              "description": "Cross-axis alignment override.",
-              "privacy": "public",
-              "attribute": "alignSelf"
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -7106,25 +7107,51 @@
             },
             {
               "kind": "method",
-              "name": "refreshStyles",
+              "name": "recalculateSpans",
               "privacy": "public",
-              "description": "Forces resynchronization of CSS custom properties.\r\nUseful when properties are changed programmatically."
+              "description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
+            },
+            {
+              "kind": "field",
+              "name": "updateSpans",
+              "privacy": "private",
+              "description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
             },
             {
               "kind": "method",
-              "name": "getSpan",
-              "privacy": "public",
+              "name": "readSpanRaw",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "string | null"
                 }
               },
-              "description": "Gets the current span value."
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "attrName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "propName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Reads a span value from an HTML attribute or element property."
             },
             {
               "kind": "method",
-              "name": "setSpan",
-              "privacy": "public",
+              "name": "applySpanVar",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -7132,471 +7159,444 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "el",
                   "type": {
-                    "text": "number"
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "cssVar",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "raw",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ],
+              "description": "Sets or clears a span CSS variable on a slotted child."
+            },
+            {
+              "kind": "method",
+              "name": "clampSpan",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "raw",
+                  "type": {
+                    "text": "string | null"
                   },
-                  "description": "New span value"
+                  "description": "Raw span value from attribute"
                 }
               ],
-              "description": "Sets the span value and updates styles."
+              "description": "Clamps span value to valid range (1 to column count)."
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "Fired when slotted children change.",
+              "name": "slotchange"
             }
           ],
           "attributes": [
             {
-              "name": "span",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "description": "Base number of columns to span.",
-              "fieldName": "span"
-            },
-            {
-              "name": "spanLg",
+              "name": "direction",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxDirection"
               },
-              "description": "Span at large breakpoints.",
-              "fieldName": "spanLg"
+              "default": "\"row\"",
+              "description": "Flex direction.",
+              "fieldName": "direction"
             },
             {
-              "name": "spanMd",
+              "name": "wrap",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxWrap"
               },
-              "description": "Span at medium breakpoints.",
-              "fieldName": "spanMd"
+              "default": "\"wrap\"",
+              "description": "Flex wrap behavior.",
+              "fieldName": "wrap"
             },
             {
-              "name": "spanSm",
+              "name": "justify",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxJustify"
               },
-              "description": "Span at small breakpoints.",
-              "fieldName": "spanSm"
+              "default": "\"flex-start\"",
+              "description": "Main-axis alignment.",
+              "fieldName": "justify"
             },
             {
-              "name": "spanXs",
+              "name": "align",
               "type": {
-                "text": "number | undefined"
+                "text": "SkyFlexboxAlign"
               },
-              "description": "Span at extra-small breakpoints.",
-              "fieldName": "spanXs"
+              "default": "\"stretch\"",
+              "description": "Cross-axis alignment.",
+              "fieldName": "align"
             },
             {
-              "name": "grow",
+              "name": "alignContent",
               "type": {
-                "text": "number"
+                "text": "SkyFlexboxAlignContent"
               },
-              "default": "0",
-              "description": "Flex grow factor.",
-              "fieldName": "grow"
+              "default": "\"normal\"",
+              "description": "Multi-line cross-axis distribution.",
+              "fieldName": "alignContent"
             },
             {
-              "name": "shrink",
+              "name": "gap",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "Flex shrink factor.",
-              "fieldName": "shrink"
+              "default": "\"16px\"",
+              "description": "Shared row/column gap value.",
+              "fieldName": "gap"
             },
             {
-              "name": "basis",
+              "name": "gapX",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Flex basis override.",
-              "fieldName": "basis"
+              "description": "Horizontal gap override.",
+              "fieldName": "gapX"
             },
             {
-              "name": "order",
+              "name": "gapY",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Flex order override.",
-              "fieldName": "order"
+              "description": "Vertical gap override.",
+              "fieldName": "gapY"
             },
             {
-              "name": "alignSelf",
+              "name": "col",
               "type": {
-                "text": "SkyFlexcolAlignSelf | undefined"
+                "text": "number"
               },
-              "description": "Cross-axis alignment override.",
-              "fieldName": "alignSelf"
+              "default": "12",
+              "description": "Total column count used for span calculations.",
+              "fieldName": "col"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "sky-flexcol",
+          "tagName": "sky-flexbox",
           "customElement": true,
-          "summary": "Flex column item for `sky-flexbox` layouts with responsive span controls."
+          "summary": "Flexbox container with grid-like span support for slotted children."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkyFlexcol",
+          "name": "SkyFlexbox",
           "declaration": {
-            "name": "SkyFlexcol",
-            "module": "src/sky-flexcol/sky-flexcol.ts"
+            "name": "SkyFlexbox",
+            "module": "src/sky-flexbox/sky-flexbox.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sky-flexcol",
+          "name": "sky-flexbox",
           "declaration": {
-            "name": "SkyFlexcol",
-            "module": "src/sky-flexcol/sky-flexcol.ts"
+            "name": "SkyFlexbox",
+            "module": "src/sky-flexbox/sky-flexbox.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/sky-flexbox/sky-flexbox.ts",
+      "path": "src/sky-flexcol/sky-flexcol.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SkyFlexbox",
+          "name": "SkyFlexcol",
           "cssParts": [
             {
-              "description": "The flex container element.",
-              "name": "container"
+              "description": "The flex item wrapper.",
+              "name": "col"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
+              "description": "Default slot for column content.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "SkyFlexboxDirection"
-              },
-              "default": "\"row\"",
-              "description": "Flex direction.",
-              "privacy": "public",
-              "attribute": "direction"
-            },
-            {
-              "kind": "field",
-              "name": "wrap",
+              "name": "span",
               "type": {
-                "text": "SkyFlexboxWrap"
+                "text": "number"
               },
-              "default": "\"wrap\"",
-              "description": "Flex wrap behavior.",
+              "default": "1",
+              "description": "Base number of columns to span.",
               "privacy": "public",
-              "attribute": "wrap"
+              "attribute": "span"
             },
             {
               "kind": "field",
-              "name": "justify",
+              "name": "spanLg",
               "type": {
-                "text": "SkyFlexboxJustify"
+                "text": "number | undefined"
               },
-              "default": "\"flex-start\"",
-              "description": "Main-axis alignment.",
+              "description": "Span at large breakpoints.",
               "privacy": "public",
-              "attribute": "justify"
+              "attribute": "spanLg"
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "spanMd",
               "type": {
-                "text": "SkyFlexboxAlign"
+                "text": "number | undefined"
               },
-              "default": "\"stretch\"",
-              "description": "Cross-axis alignment.",
+              "description": "Span at medium breakpoints.",
               "privacy": "public",
-              "attribute": "align"
+              "attribute": "spanMd"
             },
             {
               "kind": "field",
-              "name": "alignContent",
+              "name": "spanSm",
               "type": {
-                "text": "SkyFlexboxAlignContent"
+                "text": "number | undefined"
               },
-              "default": "\"normal\"",
-              "description": "Multi-line cross-axis distribution.",
+              "description": "Span at small breakpoints.",
               "privacy": "public",
-              "attribute": "alignContent"
+              "attribute": "spanSm"
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "spanXs",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "\"16px\"",
-              "description": "Shared row/column gap value.",
+              "description": "Span at extra-small breakpoints.",
               "privacy": "public",
-              "attribute": "gap"
+              "attribute": "spanXs"
             },
             {
               "kind": "field",
-              "name": "gapX",
+              "name": "grow",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Horizontal gap override.",
+              "default": "0",
+              "description": "Flex grow factor.",
               "privacy": "public",
-              "attribute": "gapX"
+              "attribute": "grow"
             },
             {
               "kind": "field",
-              "name": "gapY",
+              "name": "shrink",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Vertical gap override.",
+              "default": "0",
+              "description": "Flex shrink factor.",
               "privacy": "public",
-              "attribute": "gapY"
+              "attribute": "shrink"
             },
             {
               "kind": "field",
-              "name": "col",
+              "name": "basis",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "12",
-              "description": "Total column count used for span calculations.",
+              "default": "null",
+              "description": "Flex basis override.",
               "privacy": "public",
-              "attribute": "col"
+              "attribute": "basis"
             },
             {
               "kind": "field",
-              "name": "_childMo",
+              "name": "order",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "number | undefined"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "syncVars",
-              "privacy": "private",
-              "description": "Syncs component properties to CSS custom properties."
-            },
-            {
-              "kind": "method",
-              "name": "recalculateSpans",
+              "description": "Flex order override.",
               "privacy": "public",
-              "description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
+              "attribute": "order"
             },
             {
               "kind": "field",
-              "name": "updateSpans",
-              "privacy": "private",
-              "description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
-            },
-            {
-              "kind": "method",
-              "name": "readSpanRaw",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string | null"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "el",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "attrName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "propName",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Reads a span value from an HTML attribute or element property."
+              "name": "alignSelf",
+              "type": {
+                "text": "SkyFlexcolAlignSelf | undefined"
+              },
+              "description": "Cross-axis alignment override.",
+              "privacy": "public",
+              "attribute": "alignSelf"
             },
             {
               "kind": "method",
-              "name": "applySpanVar",
+              "name": "syncVars",
               "privacy": "private",
+              "description": "Syncs component properties to CSS custom properties."
+            },
+            {
+              "kind": "method",
+              "name": "refreshStyles",
+              "privacy": "public",
+              "description": "Forces resynchronization of CSS custom properties.\r\nUseful when properties are changed programmatically."
+            },
+            {
+              "kind": "method",
+              "name": "getSpan",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "el",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "cssVar",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "raw",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ],
-              "description": "Sets or clears a span CSS variable on a slotted child."
+              "description": "Gets the current span value."
             },
             {
               "kind": "method",
-              "name": "clampSpan",
-              "privacy": "private",
+              "name": "setSpan",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "raw",
+                  "name": "value",
                   "type": {
-                    "text": "string | null"
+                    "text": "number"
                   },
-                  "description": "Raw span value from attribute"
+                  "description": "New span value"
                 }
               ],
-              "description": "Clamps span value to valid range (1 to column count)."
+              "description": "Sets the span value and updates styles."
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "span",
               "type": {
-                "text": "Event"
+                "text": "number"
               },
-              "description": "Fired when slotted children change.",
-              "name": "slotchange"
-            }
-          ],
-          "attributes": [
+              "default": "1",
+              "description": "Base number of columns to span.",
+              "fieldName": "span"
+            },
             {
-              "name": "direction",
+              "name": "spanLg",
               "type": {
-                "text": "SkyFlexboxDirection"
+                "text": "number | undefined"
               },
-              "default": "\"row\"",
-              "description": "Flex direction.",
-              "fieldName": "direction"
+              "description": "Span at large breakpoints.",
+              "fieldName": "spanLg"
             },
             {
-              "name": "wrap",
+              "name": "spanMd",
               "type": {
-                "text": "SkyFlexboxWrap"
+                "text": "number | undefined"
               },
-              "default": "\"wrap\"",
-              "description": "Flex wrap behavior.",
-              "fieldName": "wrap"
+              "description": "Span at medium breakpoints.",
+              "fieldName": "spanMd"
             },
             {
-              "name": "justify",
+              "name": "spanSm",
               "type": {
-                "text": "SkyFlexboxJustify"
+                "text": "number | undefined"
               },
-              "default": "\"flex-start\"",
-              "description": "Main-axis alignment.",
-              "fieldName": "justify"
+              "description": "Span at small breakpoints.",
+              "fieldName": "spanSm"
             },
             {
-              "name": "align",
+              "name": "spanXs",
               "type": {
-                "text": "SkyFlexboxAlign"
+                "text": "number | undefined"
               },
-              "default": "\"stretch\"",
-              "description": "Cross-axis alignment.",
-              "fieldName": "align"
+              "description": "Span at extra-small breakpoints.",
+              "fieldName": "spanXs"
             },
             {
-              "name": "alignContent",
+              "name": "grow",
               "type": {
-                "text": "SkyFlexboxAlignContent"
+                "text": "number"
               },
-              "default": "\"normal\"",
-              "description": "Multi-line cross-axis distribution.",
-              "fieldName": "alignContent"
+              "default": "0",
+              "description": "Flex grow factor.",
+              "fieldName": "grow"
             },
             {
-              "name": "gap",
+              "name": "shrink",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "\"16px\"",
-              "description": "Shared row/column gap value.",
-              "fieldName": "gap"
+              "default": "0",
+              "description": "Flex shrink factor.",
+              "fieldName": "shrink"
             },
             {
-              "name": "gapX",
+              "name": "basis",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "Horizontal gap override.",
-              "fieldName": "gapX"
+              "default": "null",
+              "description": "Flex basis override.",
+              "fieldName": "basis"
             },
             {
-              "name": "gapY",
+              "name": "order",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "Vertical gap override.",
-              "fieldName": "gapY"
+              "description": "Flex order override.",
+              "fieldName": "order"
             },
             {
-              "name": "col",
+              "name": "alignSelf",
               "type": {
-                "text": "number"
+                "text": "SkyFlexcolAlignSelf | undefined"
               },
-              "default": "12",
-              "description": "Total column count used for span calculations.",
-              "fieldName": "col"
+              "description": "Cross-axis alignment override.",
+              "fieldName": "alignSelf"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "sky-flexbox",
+          "tagName": "sky-flexcol",
           "customElement": true,
-          "summary": "Flexbox container with grid-like span support for slotted children."
+          "summary": "Flex column item for `sky-flexbox` layouts with responsive span controls."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkyFlexbox",
+          "name": "SkyFlexcol",
           "declaration": {
-            "name": "SkyFlexbox",
-            "module": "src/sky-flexbox/sky-flexbox.ts"
+            "name": "SkyFlexcol",
+            "module": "src/sky-flexcol/sky-flexcol.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sky-flexbox",
+          "name": "sky-flexcol",
           "declaration": {
-            "name": "SkyFlexbox",
-            "module": "src/sky-flexbox/sky-flexbox.ts"
+            "name": "SkyFlexcol",
+            "module": "src/sky-flexcol/sky-flexcol.ts"
           }
         }
       ]
@@ -12122,49 +12122,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/sky-row/sky-row.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SkyRow",
-          "slots": [
-            {
-              "description": "Default slot for child content.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "sky-row",
-          "customElement": true,
-          "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkyRow",
-          "declaration": {
-            "name": "SkyRow",
-            "module": "src/sky-row/sky-row.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sky-row",
-          "declaration": {
-            "name": "SkyRow",
-            "module": "src/sky-row/sky-row.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/sky-sheet/sky-sheet.ts",
@@ -12347,6 +12304,49 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/sky-row/sky-row.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SkyRow",
+          "slots": [
+            {
+              "description": "Default slot for child content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "sky-row",
+          "customElement": true,
+          "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkyRow",
+          "declaration": {
+            "name": "SkyRow",
+            "module": "src/sky-row/sky-row.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sky-row",
+          "declaration": {
+            "name": "SkyRow",
+            "module": "src/sky-row/sky-row.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/sky-simple-table/sky-simple-table.ts",