use-wc 1.0.0-pre.71 → 1.0.0-pre.73

package/custom-elements.json

@@ -89,76 +89,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-avatar/use-avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
-          "name": "UseAvatar",
-          "cssParts": [
-            {
-              "description": "The span that renders the `name` fallback.",
-              "name": "initials"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "name",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "name"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-avatar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseAvatar",
-          "declaration": {
-            "name": "UseAvatar",
-            "module": "src/elements/use-avatar/use-avatar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-avatar",
-          "declaration": {
-            "name": "UseAvatar",
-            "module": "src/elements/use-avatar/use-avatar.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-badge/use-badge.ts",
@@ -302,6 +232,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-avatar/use-avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
+          "name": "UseAvatar",
+          "cssParts": [
+            {
+              "description": "The span that renders the `name` fallback.",
+              "name": "initials"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "name",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseAvatar",
+          "declaration": {
+            "name": "UseAvatar",
+            "module": "src/elements/use-avatar/use-avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-avatar",
+          "declaration": {
+            "name": "UseAvatar",
+            "module": "src/elements/use-avatar/use-avatar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-calendar-base/use-calendar-base.ts",
@@ -3097,6 +3097,241 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-layout/use-layout.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-layout` is a configurable flex-container primitive, styled entirely by the design\nsystem's theme layer (`theme/layout.css`) rather than by any shadow DOM here — this element\nrenders its light-DOM children exactly as given and exists only to give its attributes real,\ntyped properties, so an author gets autocomplete and a type checker gets something to check\ninstead of a bag of untyped strings.\n\nDirection, alignment, justification, named gap/padding scales, wrapping, and inline vs. block\ndisplay are all driven by these properties, reflected onto the matching attribute for the\ntheme's CSS to read. Five variant classes (`page`, `entry`, `message`, `card`, `media`) and\ntheir modifiers (`.divided`, `.compact`, `.outlined`, `.flush`) stay plain classes rather than\nproperties here — the same as any other themed class in this system, like `use-avatar`'s\n`.circle`/`.square`.\n\n```html\n<use-layout direction=\"row\" gap=\"small\">\n  <button type=\"button\">One</button>\n  <button type=\"button\">Two</button>\n</use-layout>\n```\n\nWhen a direct child `use-layout` carries `fill`, that child grows to consume the remaining\nspace and its siblings are pinned so they can't shrink; with no such child, `use-layout` is a\nbare flex container that leaves its children alone.",
+          "name": "UseLayout",
+          "slots": [
+            {
+              "description": "The container's content. Untouched otherwise — `use-layout` renders no shadow DOM and arranges its children with CSS alone.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "Direction"
+              },
+              "default": "\"column\"",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "Align"
+              },
+              "default": "\"\"",
+              "attribute": "align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "justify",
+              "type": {
+                "text": "Justify"
+              },
+              "default": "\"\"",
+              "attribute": "justify",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gap",
+              "type": {
+                "text": "Gap"
+              },
+              "default": "\"\"",
+              "attribute": "gap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "attribute": "padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingBlock",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "attribute": "padding-block",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingInline",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "attribute": "padding-inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "fill",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "description": "`column` (the default) or `row`.",
+              "name": "direction",
+              "type": {
+                "text": "Direction"
+              },
+              "default": "\"column\"",
+              "fieldName": "direction"
+            },
+            {
+              "description": "Maps to `align-items`: `start`, `center`, `end`, or `stretch`. Left empty, no attribute is set and the browser's own default applies.",
+              "name": "align",
+              "type": {
+                "text": "Align"
+              },
+              "default": "\"\"",
+              "fieldName": "align"
+            },
+            {
+              "description": "Maps to `justify-content`: `start`, `center`, `end`, `space-between`, or `space-around`. Left empty, no attribute is set.",
+              "name": "justify",
+              "type": {
+                "text": "Justify"
+              },
+              "default": "\"\"",
+              "fieldName": "justify"
+            },
+            {
+              "description": "A named scale from `xsmall` to `super`. Left empty, no attribute is set and the container has no gap of its own.",
+              "name": "gap",
+              "type": {
+                "text": "Gap"
+              },
+              "default": "\"\"",
+              "fieldName": "gap"
+            },
+            {
+              "description": "A named scale from `xsmall` to `super`, or `none` for an explicit zero, applied to all four sides. Left empty, no attribute is set. Set `padding-block`/`padding-inline` instead for different values per axis.",
+              "name": "padding",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "fieldName": "padding"
+            },
+            {
+              "description": "A named scale from `xsmall` to `super`, or `none`, applied to the block axis only. Left empty, no attribute is set.",
+              "name": "padding-block",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "fieldName": "paddingBlock"
+            },
+            {
+              "description": "A named scale from `xsmall` to `super`, or `none`, applied to the inline axis only. Left empty, no attribute is set.",
+              "name": "padding-inline",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "fieldName": "paddingInline"
+            },
+            {
+              "description": "Maps to `flex-wrap: wrap`.",
+              "name": "wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "wrap"
+            },
+            {
+              "description": "Renders as `inline-flex` rather than `flex`.",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "inline"
+            },
+            {
+              "description": "Read only on a direct child `use-layout`: that child grows to fill the remaining space and every other child is pinned so it can't shrink.",
+              "name": "fill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "fill"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-layout",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseLayout",
+          "declaration": {
+            "name": "UseLayout",
+            "module": "src/elements/use-layout/use-layout.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-layout",
+          "declaration": {
+            "name": "UseLayout",
+            "module": "src/elements/use-layout/use-layout.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-listbox-input/use-listbox-input.ts",