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

package/custom-elements.json

@@ -1454,7 +1454,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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/)",
+          "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.",
           "name": "UseDropdown",
           "slots": [
             {
@@ -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

@@ -266,6 +266,12 @@
         var(--usewc-color-button-border-static);
     }
 
+    &::part(trigger) {
+      padding-inline-end: calc(
+        var(--usewc-layout-button-padding-inline) - var(--usewc-layout-dropdown-trigger-icon-size) / 4
+      );
+    }
+
     &:is(use-dropdown) {
       display: contents;
     }
@@ -655,21 +661,13 @@
     }
   }
 
-  select:not(.appearance-native),
-  use-dropdown::part(trigger),
-  use-dropdown use-dropdown::part(trigger) {
+  select:not(.appearance-native) {
     padding-inline-end: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
-    background-image: var(--usewc-effect-dropdown-trigger-background-image, none);
+    background-image: var(--usewc-effect-select-trigger-background-image, none);
     /* TODO use logical position */
     background-position: right var(--usewc-layout-input-padding-inline) center;
     background-repeat: no-repeat;
-    background-size: var(--usewc-effect-dropdown-trigger-background-size, 1em);
-    background-blend-mode: var(--usewc-effect-dropdown-trigger-background-blend-mode, none);
-  }
-
-  use-dropdown use-dropdown::part(trigger) {
-    background-image: var(--usewc-effect-dropdown-trigger-nested-background-image);
-    background-position: right center;
+    background-size: var(--usewc-effect-select-trigger-background-size, 1em);
   }
 
   select:not(.appearance-native),
@@ -682,11 +680,32 @@
     anchor-scope: --use-popover-trigger;
   }
 
-  use-dropdown::part(trigger-icon-default),
   use-option::part(selected-indicator-default) {
     display: none;
   }
 
+  use-dropdown::part(trigger-icon-default) {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: 100%;
+    inline-size: var(--usewc-layout-dropdown-trigger-icon-size);
+    block-size: var(--usewc-layout-dropdown-trigger-icon-size);
+    background-color: var(--usewc-effect-dropdown-trigger-icon-background-color, currentColor);
+    mask-image: var(--usewc-effect-dropdown-trigger-icon-mask-image, none);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  use-dropdown use-dropdown::part(trigger-icon-default) {
+    mask-image: var(--usewc-effect-dropdown-trigger-icon-nested-mask-image, none);
+  }
+
+  use-dropdown use-dropdown::part(trigger-icon) {
+    margin-inline-start: auto;
+  }
+
   use-dropdown::part(menu) {
     --min-size: 30vh;
     --max-size: 80vh;
@@ -695,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)
@@ -713,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) {
@@ -795,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) -
@@ -813,6 +845,5 @@
     background-position: left var(--usewc-layout-input-padding-inline) center;
     background-repeat: no-repeat;
     background-size: var(--usewc-effect-menu-item-checkmark-background-size, 1em);
-    background-blend-mode: var(--usewc-effect-menu-item-checkmark-background-blend-mode, none);
   }
 }

package/dist/docs/use-dropdown.md

@@ -23,10 +23,18 @@ items that allows a user to manipulate a user interface or content. Read the
 WCAG guidance for more details:
 [https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
 
+For an icon-only trigger, omit `label` and set `aria-label` on `use-dropdown` itself — it is
+forwarded to the trigger button so the control still has an accessible name.
+
 ## Attributes
 
 | 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/tokens.css

@@ -177,13 +177,14 @@
   --usewc-color-input-segment-background-hover: transparent;
   --usewc-color-input-segment-background-focus: var(--usewc-color-blue-100);
   --usewc-color-input-segment-text-focus: var(--usewc-color-gray-700);
-  --usewc-effect-dropdown-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
-  --usewc-effect-dropdown-trigger-nested-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12L8.5 18.9282L8.5 5.0718Z' fill='rgba(255,255,255,0.5' /%3E%3C/svg%3E");
-  --usewc-effect-dropdown-trigger-background-size: 1em;
-  --usewc-effect-dropdown-trigger-background-blend-mode: difference;
-  --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
+  --usewc-effect-dropdown-trigger-icon-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='black' /%3E%3C/svg%3E");
+  --usewc-effect-dropdown-trigger-icon-nested-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12L8.5 18.9282L8.5 5.0718Z' fill='black' /%3E%3C/svg%3E");
+  --usewc-effect-dropdown-trigger-icon-background-color: color-mix(in oklab, currentColor 50%, transparent);
+  --usewc-layout-dropdown-trigger-icon-size: 1em;
+  --usewc-effect-select-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgb(55,65,81)' /%3E%3C/svg%3E");
+  --usewc-effect-select-trigger-background-size: 1em;
+  --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgb(55,65,81)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
   --usewc-effect-menu-item-checkmark-background-size: 1em;
-  --usewc-effect-menu-item-checkmark-background-blend-mode: difference;
   /* - Layout */
   --usewc-layout-input-border: var(--usewc-space-1-relative);
   --usewc-layout-input-padding-block: calc(var(--usewc-space-4) - var(--usewc-layout-input-border));
@@ -428,6 +429,8 @@
     --usewc-color-range-track-border-static: var(--usewc-color-gray-700);
     --usewc-color-range-track-border-hover: var(--usewc-color-gray-600);
     --usewc-color-selector-background-hover: oklch(from var(--usewc-color-gray-700) l c h / 0.5);
+    --usewc-effect-select-trigger-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16L5.0718 8.5L18.9282 8.5L12 16Z' fill='rgb(229,231,235)' /%3E%3C/svg%3E");
+    --usewc-effect-menu-item-checkmark-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L10 18L19 7' stroke='rgb(229,231,235)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
   }
 }
 

package/dist/use-wc.d.mts

@@ -161,12 +161,18 @@ declare global {
  * WCAG guidance for more details:
  * [https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
  *
+ * For an icon-only trigger, omit `label` and set `aria-label` on `use-dropdown` itself — it is
+ * forwarded to the trigger button so the control still has an accessible name.
+ *
  * @slot default
  * @slot trigger-content
  * @slot trigger-label
  * @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;
@@ -182,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

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property, query, queryAssignedElements } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { getTabIndex, isTabbable, tabbable } from "tabbable";
 import * as duration from "duration-fns";
 import { map } from "lit/directives/map.js";
@@ -523,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();
@@ -537,6 +539,9 @@ let UseDropdown = class UseDropdown extends LitElement {
 	get #popoverId() {
 		return `${this.getId()}-dropdown`;
 	}
+	get #triggerAriaLabel() {
+		return this.getAttribute("aria-label") ?? void 0;
+	}
 	#findTabbables() {
 		return Array.from(this.querySelectorAll(TABBABLE_SELECTOR$1)).filter((element) => {
 			return element.parentElement?.closest("use-dropdown") === this;
@@ -676,6 +681,7 @@ let UseDropdown = class UseDropdown extends LitElement {
         aria-controls=${this.#popoverId}
         aria-haspopup="menu"
         aria-expanded="false"
+        aria-label=${ifDefined(this.#triggerAriaLabel)}
         ?disabled=${this.disabled}
         @keydown=${this.#handleKeyDown}
       >
@@ -724,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.46",
+  "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

@@ -74,8 +74,13 @@
     },
     {
       "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---\n\n\n### **Slots:**\n - **default** - undefined\n- **trigger-content** - undefined\n- **trigger-label** - undefined\n- **trigger-arrow** - undefined",
+      "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": [] }
       ],