use-wc 1.0.0-pre.80 → 1.0.0-pre.82

package/custom-elements.json

@@ -3157,11 +3157,11 @@
       "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.",
+          "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.\n\nAdd the `.page` class for an app frame: a topbar `header` and a `footer` laid out as rows of\ntheir own, over a `main` that grows to fill the remaining space and scrolls on its own. A\n`.page` defaults to `spacing` between its regions, `gutter` beside them, and `paddingblock` at\nits own top and bottom, all at the page density, so a focus ring inside the scrolling `main`\nhas room to render. Set any of the three to override its default. Its footer splits status\nfrom actions by default; one that ends in a `type=\"submit\"` button, or carries the `actions`\nclass, aligns to the end instead.\n\n```html\n<use-layout spacing=\"medium\">\n  <p>First</p>\n  <p>Middle</p>\n  <p>Last</p>\n</use-layout>\n```",
           "name": "UseLayout",
           "slots": [
             {
-              "description": "The container's content. Untouched otherwise — `use-layout` renders no shadow DOM and arranges its children with CSS alone.",
+              "description": "The layout's content. Untouched otherwise — `use-layout` renders no shadow DOM and arranges its children with CSS alone.",
               "name": ""
             }
           ],
@@ -3198,12 +3198,22 @@
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "spacing",
               "type": {
-                "text": "Gap"
+                "text": "Spacing"
               },
               "default": "\"\"",
-              "attribute": "gap",
+              "attribute": "spacing",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gutter",
+              "type": {
+                "text": "Gutter"
+              },
+              "default": "\"\"",
+              "attribute": "gutter",
               "reflects": true
             },
             {
@@ -3223,7 +3233,7 @@
                 "text": "Padding"
               },
               "default": "\"\"",
-              "attribute": "padding-block",
+              "attribute": "paddingBlock",
               "reflects": true
             },
             {
@@ -3233,7 +3243,27 @@
                 "text": "Padding"
               },
               "default": "\"\"",
-              "attribute": "padding-inline",
+              "attribute": "paddingInline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "gap",
+              "type": {
+                "text": "Gap"
+              },
+              "default": "\"\"",
+              "attribute": "gap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "divided",
+              "type": {
+                "text": "Divided"
+              },
+              "default": "\"\"",
+              "attribute": "divided",
               "reflects": true
             },
             {
@@ -3269,34 +3299,42 @@
           ],
           "attributes": [
             {
-              "description": "`column` (the default) or `row`.",
-              "name": "direction",
+              "description": "A named scale from `xsmall` to `super`, or `none`. Puts half its value as padding on every direct child along the layout's main axis — block padding by default, or inline padding when `direction=\"row\"` — so two adjacent children's touching edges add up to one spacing unit between them. The first child's own leading side and the last child's own trailing side on that axis are forced to zero, so the layout carries no outer inset of its own there. Left empty, no attribute is set and children carry no padding at all. Reach for this instead of `gap` when a direct child is its own scroll container (`overflow`) holding focusable content: a focus ring at that content's edge spills into the child's padding, and the child's scrollport clips anything beyond it. `gap` leaves the child with no padding, so the ring gets cut off. `spacing` gives it room between children, but not on the first child's leading side or the last child's trailing side, which stay at zero.",
+              "name": "spacing",
               "type": {
-                "text": "Direction"
+                "text": "Spacing"
               },
-              "default": "\"column\"",
-              "fieldName": "direction"
+              "default": "\"\"",
+              "fieldName": "spacing"
             },
             {
-              "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",
+              "description": "A named scale from `xsmall` to `super`, or `none`. Puts its full value as padding on every direct child along the layout's cross axis — inline padding by default, or block padding when `direction=\"row\"` — uniformly, no halving, no first/last exception, since there's nothing side-by-side on that axis for two children to double up with. Left empty, no attribute is set and children carry no cross-axis padding at all. Reach for this instead of the layout's own `padding` when a direct child is itself a scroll container (`overflow`) and can show a focus ring near its own cross-axis edges: the layout's `padding` sits outside the child, so the child's own scrollport still clips the ring. `gutter`'s padding is added directly to the child, so the ring has room inside it on both cross-axis sides.",
+              "name": "gutter",
               "type": {
-                "text": "Align"
+                "text": "Gutter"
               },
               "default": "\"\"",
-              "fieldName": "align"
+              "fieldName": "gutter"
             },
             {
-              "description": "Maps to `justify-content`: `start`, `center`, `end`, `space-between`, or `space-around`. Left empty, no attribute is set.",
-              "name": "justify",
+              "description": "A named scale from `xsmall` to `super`, or `none`, applied to the layout's own padding on all four sides. Left empty, no attribute is set. Set `paddingblock`/ `paddinginline` instead for different values per axis.",
+              "name": "padding",
               "type": {
-                "text": "Justify"
+                "text": "Padding"
               },
               "default": "\"\"",
-              "fieldName": "justify"
+              "fieldName": "padding"
+            },
+            {
+              "description": "A named scale from `xsmall` to `super`, or `none`, applied to the layout's own block padding only. Left empty, no attribute is set.",
+              "name": "paddingblock"
             },
             {
-              "description": "A named scale from `xsmall` to `super`. Left empty, no attribute is set and the container has no gap of its own.",
+              "description": "A named scale from `xsmall` to `super`, or `none`, applied to the layout's own inline padding only. Left empty, no attribute is set.",
+              "name": "paddinginline"
+            },
+            {
+              "description": "A named scale from `xsmall` to `super`, applied to the layout's own real `gap` CSS property. Left empty, no attribute is set and the layout has no gap of its own.",
               "name": "gap",
               "type": {
                 "text": "Gap"
@@ -3305,34 +3343,43 @@
               "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",
+              "description": "Boolean, or `full`. Draws a rule on every child that follows another one — the first child never gets one, since there's nothing before it to divide from. Drawn as a plain border on the layout's main axis leading edge — `border-block-start` by default, or `border-inline-start` when `direction=\"row\"` — whenever `spacing` is set or no real `gap` exists to draw into (each child owns its own padding there instead) — but when `gap` is set and `spacing` isn't, drawn natively into the real gap via CSS Gap Decorations on browsers that support it: `row-rule` by default, or `column-rule` when `direction=\"row\"`. Set to `full` to additionally bleed that native rule through the layout's own padding on the cross axis, so it reaches the layout's outer edge instead of stopping at the padding — only has an effect when the layout has both a real `gap` and padding on the relevant axis (`padding` or `paddinginline`/`paddingblock`). With `spacing` or `gutter`, including a `.page`'s own, the rule is a border across each child's whole box and already runs edge to edge.",
+              "name": "divided",
               "type": {
-                "text": "Padding"
+                "text": "Divided"
               },
               "default": "\"\"",
-              "fieldName": "padding"
+              "fieldName": "divided"
             },
             {
-              "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",
+              "description": "`column` (the default) or `row`, mapped to `flex-direction`.",
+              "name": "direction",
               "type": {
-                "text": "Padding"
+                "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": "paddingBlock"
+              "fieldName": "align"
             },
             {
-              "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",
+              "description": "Maps to `justify-content`: `start`, `center`, `end`, `space-between`, or `space-around`. Left empty, no attribute is set.",
+              "name": "justify",
               "type": {
-                "text": "Padding"
+                "text": "Justify"
               },
               "default": "\"\"",
-              "fieldName": "paddingInline"
+              "fieldName": "justify"
             },
             {
-              "description": "Maps to `flex-wrap: wrap`.",
+              "description": "Maps to `flex-wrap: wrap`. Pair it with `gap` rather than `spacing`: per-child padding can't reproduce the room between wrapped lines.",
               "name": "wrap",
               "type": {
                 "text": "boolean"
@@ -3350,13 +3397,29 @@
               "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.",
+              "description": "Grows this layout to fill the space its parent `use-layout` or `use-pattern` has left, scrolling its own overflow, and pins every sibling so it can't shrink. Read only on `use-layout` itself, so an `<svg fill=\"…\">` child is never mistaken for one. A `.page`'s `main` fills the same way without it.",
               "name": "fill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "fieldName": "fill"
+            },
+            {
+              "name": "paddingBlock",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "fieldName": "paddingBlock"
+            },
+            {
+              "name": "paddingInline",
+              "type": {
+                "text": "Padding"
+              },
+              "default": "\"\"",
+              "fieldName": "paddingInline"
             }
           ],
           "superclass": {
@@ -4070,6 +4133,48 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-pattern/use-pattern.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-pattern` arranges a region-based unit of content — a card, a row in a list, a chat\nmessage, a media object — styled entirely by the design system's theme layer\n(`theme/pattern.css`) rather than by any shadow DOM here. It renders its light-DOM children\nexactly as given.\n\nIts variant classes (`card`, `entry`, `message`, `media`) and their modifiers (`.divided`,\n`.compact`, `.outlined`, `.flush`) are plain classes rather than properties, the same as any\nother themed class in this system, like `use-avatar`'s `.circle`/`.square`. For generic flex\narrangement, or a page frame, use `use-layout`, which nests freely inside a pattern's regions.\n\n```html\n<use-pattern class=\"card\">\n  <header>\n    <hgroup><h3>Title</h3><p>Subtitle</p></hgroup>\n  </header>\n  <main><p>Body</p></main>\n  <footer><button type=\"button\">Done</button></footer>\n</use-pattern>\n```",
+          "name": "UsePattern",
+          "slots": [
+            {
+              "description": "The pattern's regions — `figure`, `header`, `main`, `footer`, or any other element.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-pattern",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UsePattern",
+          "declaration": {
+            "name": "UsePattern",
+            "module": "src/elements/use-pattern/use-pattern.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-pattern",
+          "declaration": {
+            "name": "UsePattern",
+            "module": "src/elements/use-pattern/use-pattern.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-scrollarea/index.ts",