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

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": [
             {

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;
@@ -813,6 +832,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,6 +23,9 @@ 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 |

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,6 +161,9 @@ 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

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";
@@ -537,6 +538,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 +680,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}
       >

package/package.json

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

package/vscode.html-custom-data.json

@@ -74,7 +74,7 @@
     },
     {
       "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": "disabled", "values": [] },
         { "name": "label", "values": [] }