use-wc 1.0.0-pre.34 → 1.0.0-pre.35

package/dist/default-tokens.css

@@ -134,7 +134,7 @@
   --usewc-layout-focus-ring-offset-outside: var(--usewc-space-2);
   --usewc-layout-focus-ring-offset-inside: var(--usewc-space-none);
   --usewc-effect-focus-ring-style: solid;
-  --usewc-transition-focus-ring: 0.05s ease-in-out;
+  --usewc-transition-focus-ring: outline 0.05s ease-in-out;
   --usewc-effect-control-opacity-disabled: 0.5;
   /* - Link */
   --usewc-color-link-text-static: var(--usewc-color-blue-500);
@@ -175,8 +175,12 @@
   --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-side-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-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));
@@ -312,6 +316,30 @@
   --usewc-layout-button-extra-large-font-size: var(--usewc-font-size-24);
   --usewc-layout-button-extra-large-line-height: var(--usewc-line-height-28);
 
+  /* 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-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-gray-800);
+  --usewc-color-popover-menu-item-background-active: var(--usewc-color-gray-800);
+  --usewc-effect-popover-menu-item-border-radius: var(--usewc-effect-border-radius-4);
+  --usewc-layout-popover-menu-anchor-offset: var(--usewc-space-4);
+  --usewc-layout-popover-menu-padding: var(--usewc-space-4);
+  --usewc-layout-popover-menu-border: var(--usewc-space-1-relative);
+  --usewc-effect-popover-menu-border-style: var(--usewc-effect-border-solid);
+  --usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
+  --usewc-color-popover-menu-border: var(--usewc-color-gray-600);
+  --usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
+  --usewc-layout-popover-menu-header-font-size: var(--usewc-font-size-14);
+  --usewc-font-popover-menu-header-weight: var(--usewc-font-weight-medium);
+  --usewc-color-popover-menu-header-text: var(--usewc-color-gray-400);
+  --usewc-font-popover-menu-shortcut: var(--usewc-font-family-monospace);
+  --usewc-color-popover-menu-shortcut: var(--usewc-color-gray-400);
+  --usewc-color-popover-menu-item-text-static: var(--usewc-color-button-base-text-static);
+  --usewc-color-popover-menu-item-text-hover: var(--usewc-color-button-base-text-static);
+  --usewc-color-popover-menu-item-text-focus: var(--usewc-color-button-base-text-static);
+
   /* Inline code */
   --usewc-layout-code-padding-inline: var(--usewc-space-4);
   --usewc-layout-code-padding-block: var(--usewc-space-none);
@@ -328,7 +356,7 @@
     --usewc-color-document-text: var(--usewc-color-gray-200);
     --usewc-color-document-text-muted: var(--usewc-color-gray-300);
     --usewc-color-document-background: var(--usewc-color-gray-800);
-    --usewc-color-canvas-background: var(--usewc-color-white);
+    --usewc-color-canvas-background: var(--usewc-color-black);
     --usewc-color-focus-ring: var(--usewc-color-blue-200);
     --usewc-color-input-background-static: oklch(from var(--usewc-color-gray-100) l c h / 0.025);
     --usewc-color-input-border-static: var(--usewc-color-gray-600);

package/dist/design-system.css

@@ -14,9 +14,10 @@
     font-size: var(--usewc-layout-document-text-size);
   }
 
-  :is(button, a, details summary):not([data-appear-as="native"]):focus-visible,
+  :is(button, a, details summary, use-widget):not([data-appear-as="native"]):focus-visible,
   :is(input, textarea, select, use-date, use-time, use-datetime, use-duration):not([data-appear-as="native"]):focus,
   input[type="file"]:not([data-appear-as="native"]):focus-visible,
+  use-dropdown:not([data-appear-as="native"])::part(trigger):focus-visible,
   [data-appear-as="input"]:has(input:focus) {
     outline: var(--usewc-layout-focus-ring-size) var(--usewc-effect-focus-ring-style) var(--usewc-color-focus-ring);
     outline-offset: var(--usewc-layout-focus-ring-offset-outside);
@@ -32,7 +33,8 @@
     use-time:not([data-appear-as="native"]),
     use-datetime:not([data-appear-as="native"]),
     use-duration:not([data-appear-as="native"])
-  ) {
+  ),
+  use-listbox-input:not([data-appear-as="native"])::part(listbox) {
     border: var(--usewc-layout-input-border) var(--usewc-effect-input-border-style)
       var(--usewc-color-input-border-static);
     line-height: var(--usewc-layout-input-line-height);
@@ -71,15 +73,12 @@
     }
   }
 
+  use-listbox-input:not([data-appear-as="native"])::part(listbox) {
+    padding: var(--usewc-layout-popover-menu-padding);
+  }
+
   select:not([data-appear-as="native"]) {
     appearance: none;
-    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);
-    /* 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);
   }
 
   [data-appear-as="input"] {
@@ -212,6 +211,7 @@
   }
 
   :is(button:not([data-appear-as]), [data-appear-as="button"]),
+  use-dropdown,
   input[type="file"]:not([data-appear-as]) {
     &:where(:not(button)),
     &::file-selector-button {
@@ -233,7 +233,8 @@
     --usewc-theme-color-button-background-active: var(--usewc-color-button-base-background-active);
     --usewc-theme-color-button-border-active: var(--usewc-color-button-base-border-active);
 
-    &:not([type="file"]),
+    &::part(trigger),
+    &:not([type="file"], use-dropdown),
     &::file-selector-button {
       display: inline-flex;
       align-items: center;
@@ -254,18 +255,24 @@
         var(--usewc-theme-color-button-border-static);
     }
 
+    &:is(use-dropdown) {
+      display: contents;
+    }
+
     &::file-selector-button {
       margin-inline-end: var(--usewc-layout-input-gap-inline);
     }
 
-    &:is(:hover, :focus-visible):not([type="file"]),
+    &:is(:hover, :focus-visible):not([type="file"], use-dropdown),
+    &::part(trigger):is(:hover, :focus-visible),
     &:is(:hover, :focus-visible)::file-selector-button {
       background: var(--usewc-theme-color-button-background-hover);
       border-color: var(--usewc-theme-color-button-border-hover);
       color: var(--usewc-theme-color-button-text-hover);
     }
 
-    &:active:not([type="file"]),
+    &:active:not([type="file"], use-dropdown),
+    &:active::part(trigger),
     &:active::file-selector-button {
       background: var(--usewc-theme-color-button-background-active);
       border-color: var(--usewc-theme-color-button-border-active);
@@ -523,4 +530,152 @@
       gap: var(--usewc-layout-input-segment-padding-inline);
     }
   }
+
+  select:not([data-appear-as="native"]),
+  use-dropdown::part(trigger),
+  use-dropdown use-dropdown::part(trigger) {
+    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);
+    /* 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-side-background-image);
+    background-position: right center;
+  }
+
+  select:not([data-appear-as="native"]),
+  use-dropdown::part(trigger),
+  use-dropdown use-dropdown::part(trigger) {
+    anchor-name: --use-popover-trigger;
+  }
+
+  use-dropdown::part(trigger-icon-default),
+  use-option::part(selected-indicator-default) {
+    display: none;
+  }
+
+  use-dropdown::part(menu) {
+    border: var(--usewc-layout-popover-menu-border) var(--usewc-effect-popover-menu-border-style)
+      var(--usewc-color-popover-menu-border);
+    padding: var(--usewc-layout-popover-menu-padding);
+    background: var(--usewc-color-popover-menu-background);
+    border-radius: var(--usewc-effect-popover-menu-border-radius);
+    margin: unset;
+  }
+
+  use-dropdown::part(menu) {
+    inset: unset;
+    position: fixed;
+    position-anchor: --use-popover-trigger;
+    inset-block-start: calc(anchor(end) + var(--usewc-layout-popover-menu-anchor-offset));
+    inset-inline-start: anchor(start);
+    position-try-fallbacks:
+      flip-block,
+      flip-inline,
+      flip-inline flip-block;
+  }
+
+  use-option,
+  use-dropdown :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]),
+  use-dropdown use-dropdown::part(trigger) {
+    border: none;
+    text-align: start;
+    cursor: default;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    gap: var(--usewc-layout-popover-menu-item-padding-inline);
+    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);
+    background-color: var(--usewc-color-popover-menu-item-background-static);
+    border-radius: var(--usewc-effect-popover-menu-item-border-radius);
+    color: var(--usewc-color-popover-menu-item-text-static);
+    text-decoration: none;
+
+    > *:last-child:not(:first-child) {
+      flex: 0 0 auto;
+      margin-inline-start: auto;
+    }
+  }
+
+  use-listbox-input:is(:hover, :focus) use-option:state(active) {
+    background-color: var(--usewc-color-popover-menu-item-background-active);
+  }
+
+  use-dropdown :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], use-dropdown),
+  use-listbox-input {
+    &:not(use-dropdown):hover,
+    &::part(trigger):hover {
+      background-color: var(--usewc-color-popover-menu-item-background-hover);
+      color: var(--usewc-color-popover-menu-item-text-hover);
+    }
+
+    &:focus-visible,
+    &::part(trigger):focus-visible {
+      background-color: var(--usewc-color-popover-menu-item-background-static);
+      outline: var(--usewc-layout-focus-ring-size) var(--usewc-effect-focus-ring-style) var(--usewc-color-focus-ring);
+      outline-offset: var(--usewc-layout-focus-ring-offset-inside);
+      transition: var(--usewc-transition-focus-ring);
+      color: var(--usewc-color-popover-menu-item-text-focus);
+    }
+  }
+
+  use-listbox-input,
+  use-dropdown :is([role="menuitemcheckbox"], [role="menuitemradio"]) {
+    use-option,
+    &:has(+ :is([role="menuitemcheckbox"], [role="menuitemradio"])),
+    & + :is(:is([role="menuitemcheckbox"], [role="menuitemradio"])) {
+      padding-inline-start: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
+    }
+  }
+
+  use-dropdown,
+  use-listbox-input {
+    [role="group"][aria-label] {
+      &::before {
+        content: attr(aria-label);
+        padding: var(--usewc-layout-popover-menu-padding);
+        font-size: var(--usewc-layout-popover-menu-header-font-size);
+        font-weight: var(--usewc-effect-popover-menu-header-font-weight);
+        color: var(--usewc-color-popover-menu-header-text);
+      }
+    }
+
+    kbd {
+      font-family: var(--usewc-font-popover-menu-shortcut);
+      color: var(--usewc-color-popover-menu-shortcut);
+      margin-inline-start: auto;
+    }
+
+    hr {
+      border: 0;
+      border-block-start: var(--usewc-layout-popover-menu-border) var(--usewc-effect-popover-menu-border-style)
+        var(--usewc-color-popover-menu-border);
+      margin-block: var(--usewc-layout-popover-menu-padding);
+    }
+  }
+
+  use-dropdown use-dropdown::part(menu) {
+    margin-inline-start: 0.5rem;
+    inset-block-start: calc(
+      anchor(start) - var(--usewc-layout-popover-menu-padding) - var(--usewc-layout-popover-menu-border)
+    );
+    inset-inline-start: anchor(end);
+  }
+
+  use-dropdown [aria-checked="true"],
+  use-option:state(selected) {
+    background-image: var(--usewc-effect-menu-item-checkmark-background-image, none);
+    /* TODO use logical position */
+    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/use-wc.mjs

@@ -672,7 +672,9 @@ let UseDropdown = class UseDropdown extends LitElement {
       >
         <slot name="trigger-content">
           <slot part="trigger-label" name="trigger-label">${this.label}</slot>
-          <slot part="trigger-icon" name="trigger-icon">${this.#triggerIconText}</slot>
+          <slot part="trigger-icon" name="trigger-icon">
+            <span part="trigger-icon-default" aria-hidden="true">${this.#triggerIconText}</span>
+          </slot>
         </slot>
       </button>
       <div
@@ -1068,6 +1070,13 @@ let UseListboxInput = class UseListboxInput extends LitElement {
 	get value() {
 		return this.#value;
 	}
+	#handleMouseOver(event) {
+		const option = event.target?.closest("use-option");
+		if (option && !option.disabled) this.activeOption = option;
+	}
+	#handleFocus() {
+		if (!this.activeOption) this.activeOption = this.firstSelected ?? this.options.at(0) ?? null;
+	}
 	#handleKeyDown(event) {
 		if (this.disabled) return;
 		if (["Enter", " "].includes(event.key) && this.activeOption) {
@@ -1083,12 +1092,12 @@ let UseListboxInput = class UseListboxInput extends LitElement {
 			case "ArrowUp":
 				event.preventDefault();
 				event.stopPropagation();
-				if (activeIndex > 0) moveTo = options.at(activeIndex - 1);
+				moveTo = activeIndex > 0 ? options.at(activeIndex - 1) : options.at(-1);
 				break;
 			case "ArrowDown":
 				event.preventDefault();
 				event.stopPropagation();
-				moveTo = options.at(activeIndex + 1);
+				moveTo = activeIndex < options.length - 1 ? options.at(activeIndex + 1) : options.at(0);
 				break;
 			case "Home":
 				event.preventDefault();
@@ -1111,6 +1120,8 @@ let UseListboxInput = class UseListboxInput extends LitElement {
         tabindex=${0}
         @click=${this.#handleClick}
         @keydown=${this.#handleKeyDown}
+        @focus=${this.#handleFocus}
+        @mouseover=${this.#handleMouseOver}
       >
         <slot></slot>
       </div>
@@ -1131,9 +1142,7 @@ let UseListboxInput = class UseListboxInput extends LitElement {
       opacity: 0.5;
     }
 
-    /* https://github.com/w3c/csswg-drafts/issues/5893 */
-    [part="listbox"]:not(:hover):focus-visible ::slotted(use-option:state(active)),
-    ::slotted(use-option:not(:state(disabled)):hover) {
+    ::slotted(use-option:state(active)) {
       background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
     }
   `;

package/package.json

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