use-wc 1.0.0-pre.96 → 1.0.0-pre.97

package/custom-elements.json

@@ -4413,6 +4413,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`, `.elevated`, `.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-option/use-option.ts",
@@ -4527,48 +4569,6 @@
         }
       ]
     },
-    {
-      "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`, `.elevated`, `.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",

package/dist/design-system.css

@@ -1321,7 +1321,7 @@
         --usewc-color-popover-menu-item-text: var(--usewc-color-popover-menu-item-text-static);
         --usewc-effect-outline-width: 0;
 
-        gap: var(--usewc-layout-popover-menu-item-padding-inline);
+        gap: var(--usewc-layout-popover-menu-item-gap);
         line-height: var(--usewc-layout-popover-menu-item-line-height);
         padding-inline: var(--usewc-layout-popover-menu-item-padding-inline);
         padding-block: var(--usewc-layout-popover-menu-item-padding-block);
@@ -1551,7 +1551,7 @@
     flex-direction: row;
     justify-content: start;
     width: 100%;
-    gap: var(--usewc-layout-popover-menu-item-padding-inline);
+    gap: var(--usewc-layout-popover-menu-item-gap);
     line-height: var(--usewc-layout-popover-menu-item-line-height);
     padding-inline: var(--usewc-layout-popover-menu-item-padding-inline);
     padding-block: var(--usewc-layout-popover-menu-item-padding-block);

package/dist/tokens.css

@@ -738,8 +738,9 @@
   --usewc-layout-grid-list-row-selected-marker: var(--usewc-space-2);
 
   /* Menu */
-  --usewc-layout-popover-menu-item-padding-inline: var(--usewc-space-4);
-  --usewc-layout-popover-menu-item-padding-block: var(--usewc-space-2);
+  --usewc-layout-popover-menu-item-padding-inline: var(--usewc-space-12);
+  --usewc-layout-popover-menu-item-gap: var(--usewc-space-4);
+  --usewc-layout-popover-menu-item-padding-block: var(--usewc-space-4);
   --usewc-layout-popover-menu-item-line-height: var(--usewc-line-height-24);
   --usewc-color-popover-menu-item-background-static: var(--usewc-color-transparent);
   --usewc-color-popover-menu-item-background-hover: var(--usewc-color-selector-background-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.96",
+  "version": "1.0.0-pre.97",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",

package/vscode.html-custom-data.json

@@ -467,6 +467,12 @@
       ],
       "references": []
     },
+    {
+      "name": "use-pattern",
+      "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`, `.elevated`, `.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```\n---\n\n\n### **Slots:**\n - _default_ - The pattern's regions — `figure`, `header`, `main`, `footer`, or any other element.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "use-option",
       "description": "`use-option` is a custom element that represents an option in a `use-listbox-input` custom\nelement.\n\nThe children of this element are the content of the option and must not contain any\ninteractive elements.\n\nSelection is shown by one of two indicators, swapped based on the option's `selected` state:\na checkmark when selected, nothing (a reserved-space placeholder) when not.\n\nSwapping an indicator **per instance** is a slot: put your own element in the `selected-indicator`\nor `deselected-indicator` slot and it replaces `part(selected-indicator-default)` /\n`part(deselected-indicator-default)` entirely for that option.\n\nSwapping an indicator **for every option in the app** doesn't need touching this component's\n`render()` at all — style `::part(selected-indicator-default)` /\n`::part(deselected-indicator-default)` from an outside stylesheet, the same way any shadow DOM\npart is themed:\n\n```css\nuse-option::part(selected-indicator-default) {\n  mask-image: url(\"/icons/my-checkmark.svg\");\n}\n```\n\n(When the design system's `theme.css` is loaded, this is already wired to a pair of tokens —\n`--usewc-effect-selected-indicator-mask-image` for the shape and\n`--usewc-effect-selected-indicator-color` for what paints it (`--usewc-effect-deselected-…`\nfor the other state) — so redefining those custom properties has the same effect without\nwriting a `::part()` rule at all.)\n\n`::part()` only reaches CSS-expressible changes (a mask, a background, a transform). For\nanything else — different markup, an icon font, logic beyond a mask — set the static\n`selectedIcon` and `deselectedIcon` hooks. Every `<use-option>` in the page picks them up;\nconsumers keep writing the same tag, no new element to register or remember to use instead.\nSet them once, as early as possible (an app's entry point, before any options connect) — Lit\ncalls `render()` fresh on every update, so an already-connected instance only reflects the\nchange once something causes it to re-render:\n\n```ts\n// A bare string or TemplateResult is used as-is, on every option:\nUseOption.selectedIcon = \"✓\";\nUseOption.deselectedIcon = \"\";\n\n// A function is called on every render instead:\nUseOption.selectedIcon = (html) => html`<my-icon name=\"check\"></my-icon>`;\n```\n\nThe function form is called with the component's own `html` tag as its (optional) first\nargument rather than requiring the caller to import one — a page can end up with more than one\ncopy of `lit-html` in its module graph, and a `TemplateResult` built from a *different* copy\nthan the one this component renders with can silently fail to render. Taking `html` in as a\nparameter sidesteps that: whatever's returned is guaranteed to come from the same `lit-html`\nthis component already uses. A bare string skips the concern entirely.\n\nA set icon still renders under `part(selected-indicator-default)` /\n`part(deselected-indicator-default)` — the same part the design system's theme masks into the\nbuilt-in glyph. Combining a static hook with `theme.css` means the theme's masking still\napplies to the custom content; reset the relevant `mask-image` token or `::part()` rule if that\nfights with what was set.\n\nOnly need to change the icon on **some** options, not every one in the app? Extend the class,\noverride `render()` normally, and register the subclass under a different tag name so it\ncoexists with the built-in element instead of replacing it everywhere:\n\n```ts\nclass MyOption extends UseOption {\n  override render() {\n    return html`<slot></slot><slot name=\"selected-indicator\"><my-icon name=\"check\"></my-icon></slot>`;\n  }\n}\ncustomElements.define(\"my-option\", MyOption);\n```\n---\n\n\n### **Slots:**\n - **selected-indicator** - Replaces the default checkmark shown when the option is selected.\n- **deselected-indicator** - Replaces the default (empty) indicator shown when the option is not selected.\n- **default** - Option content.",
@@ -477,12 +483,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-pattern",
-      "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`, `.elevated`, `.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```\n---\n\n\n### **Slots:**\n - _default_ - The pattern's regions — `figure`, `header`, `main`, `footer`, or any other element.",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "use-scrollarea",
       "description": "A scroll container that exposes custom states for scroll edge detection.\n\n## Custom States\nThe following CSS custom states are available for styling:\n\n- `:state(at-block-start)` — scrolled to the block-start edge (top in horizontal writing modes)\n- `:state(at-block-end)` — scrolled to the block-end edge (bottom in horizontal writing modes)\n- `:state(at-inline-start)` — scrolled to the inline-start edge (left in LTR)\n- `:state(at-inline-end)` — scrolled to the inline-end edge (right in LTR)\n---\n\n\n### **Slots:**\n - _default_ - Scrollable content",