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

package/custom-elements.json

@@ -396,71 +396,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-calendarday/use-calendarday.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
-          "name": "UseCalendarday",
-          "slots": [
-            {
-              "description": "slot for custom day content (replaces the day number)",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "date"
-            },
-            {
-              "kind": "field",
-              "name": "day",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "date"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-calendarday",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseCalendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-calendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-input/use-date-input.ts",
@@ -587,6 +522,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-calendarday/use-calendarday.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
+          "name": "UseCalendarday",
+          "slots": [
+            {
+              "description": "slot for custom day content (replaces the day number)",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "date"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "date"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-calendarday",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseCalendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-calendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",

package/dist/design-system.css

@@ -16,8 +16,8 @@
 
   :is(button, a, details summary, use-widget):not(.appearance-native):focus-visible,
   :is(input, textarea, select, use-date-input, use-time-input, use-datetime-input, use-duration-input):not(
-      .appearance-native
-    ):focus,
+    .appearance-native
+  ):focus,
   input[type="file"]:not(.appearance-native):focus-visible,
   use-dropdown:not(.appearance-native)::part(trigger):focus-visible,
   .appearance-input:has(input:focus) {
@@ -283,7 +283,7 @@
     }
 
     &:active:not([type="file"], use-dropdown),
-    &:active::part(trigger),
+    &::part(trigger):active,
     &:active::file-selector-button {
       background: var(--usewc-color-button-background-active);
       border-color: var(--usewc-color-button-border-active);
@@ -688,24 +688,29 @@
   }
 
   use-dropdown::part(menu) {
+    --min-size: 30vh;
+    --max-size: 80vh;
+
+    inset: unset;
+    height: unset;
+    position-anchor: --use-popover-trigger;
+    position: fixed;
+    position-area: bottom span-right;
+    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;
+    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)
       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;
+    @supports (min-block-size: calc-size(fit-content, min(size, 1px))) {
+      min-block-size: calc-size(fit-content, min(size, var(--min-size)));
+      max-block-size: calc-size(stretch, min(size, var(--max-size)));
+    }
   }
 
   use-option,
@@ -790,11 +795,15 @@
   }
 
   use-dropdown use-dropdown::part(menu) {
-    margin-inline-start: 0.5rem;
+    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-padding) - var(--usewc-layout-popover-menu-border)
+      anchor(start) - var(--usewc-layout-popover-menu-anchor-offset) -
+        var(--usewc-layout-popover-menu-item-padding-block)
     );
-    inset-inline-start: anchor(end);
+    position-try:
+      flip-block,
+      flip-inline,
+      flip-inline flip-block;
   }
 
   use-dropdown [aria-checked="true"],

package/dist/use-wc.d.mts

@@ -1,11 +1,5 @@
 import { CSSResultGroup, LitElement, TemplateResult, html } from "lit";
-
 //#region node_modules/lit-html/development/lit-html.d.ts
-/**
-* @license
-* Copyright 2017 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
 /** TemplateResult types */
 declare const HTML_RESULT = 1;
 declare const SVG_RESULT = 2;

package/dist/use-wc.mjs

@@ -9,7 +9,7 @@ function createId() {
 	return ":" + Math.random().toString(36).substring(2, 6) + ":";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.45",
+  "version": "1.0.0-pre.46",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",
@@ -49,7 +49,8 @@
     "@storybook/web-components-vite": "^10.2.7",
     "@types/node": "^25.5.0",
     "@typescript/native-preview": "7.0.0-dev.20260316.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/coverage-v8": "4.1.10",
     "baseline-status": "^1.0.10",
     "custom-element-vs-code-integration": "^1.5.0",
     "eslint-config-prettier": "^10.1.1",
@@ -62,7 +63,9 @@
     "storybook-addon-tag-badges": "^1.4.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.29.1",
-    "vite-plus": "^0.1.24",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.6",
+    "vite-plus": "0.2.6",
+    "vitest": "4.1.10",
     "vitest-browser-lit": "^1.0.1"
   },
   "overrides": {
@@ -77,8 +80,8 @@
     "npm": "^11.18.0",
     "postcss": "^8.5.10",
     "storybook": "$storybook",
-    "vite": "npm:@voidzero-dev/vite-plus-core@latest",
-    "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.6",
+    "vitest": "4.1.10"
   },
   "packageManager": "npm@11.12.1",
   "customElements": "custom-elements.json",

package/vscode.html-custom-data.json

@@ -2,12 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "use-calendarday",
-      "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
-      "attributes": [{ "name": "date", "values": [] }],
-      "references": []
-    },
     {
       "name": "use-date-input",
       "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
@@ -19,6 +13,12 @@
       ],
       "references": []
     },
+    {
+      "name": "use-calendarday",
+      "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
+      "attributes": [{ "name": "date", "values": [] }],
+      "references": []
+    },
     {
       "name": "use-date-picker",
       "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",