use-wc 1.0.0-pre.47 → 1.0.0-pre.48

package/custom-elements.json

@@ -1492,12 +1492,32 @@
               },
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
+              "attribute": "inlinealign",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "getId"
             }
           ],
           "attributes": [
+            {
+              "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
+              "name": "inlinealign",
+              "type": {
+                "text": "\"start\" | \"end\""
+              },
+              "default": "\"start\"",
+              "fieldName": "inlinealign"
+            },
             {
               "name": "disabled",
               "fieldName": "disabled"

package/dist/design-system.css

@@ -714,10 +714,13 @@
     height: unset;
     position-anchor: --use-popover-trigger;
     position: fixed;
-    position-area: bottom span-right;
+    position-area: block-end span-inline-end;
     min-block-size: var(--min-size);
     max-block-size: min(100% - var(--usewc-layout-popover-menu-anchor-offset), var(--max-size));
-    position-try: flip-block;
+    position-try:
+      flip-block,
+      flip-inline,
+      flip-inline flip-block;
     margin-block: var(--usewc-layout-popover-menu-anchor-offset);
     overflow: auto;
     border: var(--usewc-layout-popover-menu-border) var(--usewc-effect-popover-menu-border-style)
@@ -732,6 +735,10 @@
     }
   }
 
+  use-dropdown[inlinealign="end"]::part(menu) {
+    position-area: block-end span-inline-start;
+  }
+
   use-option,
   use-dropdown :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]),
   use-dropdown use-dropdown::part(trigger) {
@@ -814,6 +821,12 @@
   }
 
   use-dropdown use-dropdown::part(menu) {
+    /*
+     * !important: this must win over use-dropdown[inlinealign="end"]::part(menu) above, which
+     * has higher specificity (an attribute selector) than this descendant selector does. Nested
+     * submenus always position to the side of their parent trigger, independent of inlinealign.
+     */
+    position-area: block-end span-inline-end !important;
     inset-inline-start: calc(anchor(end) + var(--usewc-layout-popover-menu-anchor-offset) * 2);
     inset-block-start: calc(
       anchor(start) - var(--usewc-layout-popover-menu-anchor-offset) -

package/dist/docs/use-dropdown.md

@@ -30,6 +30,11 @@ forwarded to the trigger button so the control still has an accessible name.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| inlinealign | `"start" \| "end"` | `"start"` | Aligns the menu along the inline axis relative to the trigger. Applies to top-level
+menus; nested submenus are always positioned to the side of their parent trigger.
+
+- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge
+- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge |
 | disabled | - | - | - |
 | label | `string` | - | - |
 

package/dist/use-wc.d.mts

@@ -170,6 +170,9 @@ declare global {
  * @slot trigger-arrow
  *
  * @state open `use-dropdown:state(open)`: The open state of the dropdown.
+ * @attr inlinealign `"start" | "end"`: Aligns the menu along the inline axis relative to the
+ * trigger. Applies to top-level menus only; nested submenus are always positioned to the side
+ * of their parent trigger.
  */
 declare class UseDropdown extends LitElement {
   #private;
@@ -185,6 +188,14 @@ declare class UseDropdown extends LitElement {
   set disabled(flag: boolean);
   get disabled(): boolean;
   label: string;
+  /**
+   * Aligns the menu along the inline axis relative to the trigger. Applies to top-level
+   * menus; nested submenus are always positioned to the side of their parent trigger.
+   *
+   * - `start`: the menu's inline-start edge aligns with the trigger's inline-start edge
+   * - `end`: the menu's inline-end edge aligns with the trigger's inline-end edge
+   */
+  inlinealign: "start" | "end";
   constructor();
   getId(): string;
   firstUpdated(): void;

package/dist/use-wc.mjs

@@ -524,6 +524,7 @@ let UseDropdown = class UseDropdown extends LitElement {
 		this.#itemLabels = [];
 		this.#isNested = this.parentElement?.closest("use-dropdown") != null;
 		this.trigger = null;
+		this.inlinealign = "start";
 		this.#id = createId();
 		this.#internals = this.attachInternals();
 		this.#initializeTabbables();
@@ -729,6 +730,10 @@ let UseDropdown = class UseDropdown extends LitElement {
 };
 __decorate([property({ type: Boolean })], UseDropdown.prototype, "disabled", null);
 __decorate([property()], UseDropdown.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UseDropdown.prototype, "inlinealign", void 0);
 UseDropdown = __decorate([customElement("use-dropdown")], UseDropdown);
 //#endregion
 //#region src/elements/use-duration-input/use-duration-input.ts

package/package.json

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

package/vscode.html-custom-data.json

@@ -76,6 +76,11 @@
       "name": "use-dropdown",
       "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)\n\nFor an icon-only trigger, omit `label` and set `aria-label` on `use-dropdown` itself — it is\nforwarded to the trigger button so the control still has an accessible name.\n---\n\n\n### **Slots:**\n - **default** - undefined\n- **trigger-content** - undefined\n- **trigger-label** - undefined\n- **trigger-arrow** - undefined",
       "attributes": [
+        {
+          "name": "inlinealign",
+          "description": "Aligns the menu along the inline axis relative to the trigger. Applies to top-level\nmenus; nested submenus are always positioned to the side of their parent trigger.\n\n- `start`: the menu's inline-start edge aligns with the trigger's inline-start edge\n- `end`: the menu's inline-end edge aligns with the trigger's inline-end edge",
+          "values": [{ "name": "start" }, { "name": "end" }]
+        },
         { "name": "disabled", "values": [] },
         { "name": "label", "values": [] }
       ],