use-wc 1.0.0-pre.70 → 1.0.0-pre.72

package/custom-elements.json

@@ -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",