@w5-ui/wc 0.7.0 → 0.8.1

package/dist/index.js

@@ -6612,7 +6612,7 @@ function SkipLink($$anchor, $$props) {
   }
   reset(a);
   template_effect(() => {
-    set_class(a, 1, `absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-brand-05 px-3 py-2 text-13 font-semibold text-white no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
+    set_class(a, 1, `absolute left-0 top-0 z-[100] -translate-y-full rounded-br-md bg-primary-fill px-3 py-2 text-13 font-semibold text-primary-fill-fg no-underline focus:translate-y-0 focus:outline-2 focus:-outline-offset-4 focus:outline-white
     ${className() ?? ""}`);
     set_attribute(a, "href", href());
   });
@@ -7276,7 +7276,7 @@ function Badge($$anchor, $$props) {
     // Status-warning is yellow in both motifs; near-black text stays
     // legible against it. `text-neutral-10` resolves to `#0a0a0b`.
     warn: "bg-status-warning text-neutral-10",
-    info: "bg-brand-05 text-white",
+    info: "bg-primary-fill text-primary-fill-fg",
     success: "bg-status-success text-white",
     neutral: "bg-status-neutral text-white"
   };
@@ -8757,7 +8757,7 @@ var root$2N = /* @__PURE__ */ from_html(`<button><!> <!></button>`);
 function Button($$anchor, $$props) {
   let variant = prop($$props, "variant", 3, "ghost"), iconOnly = prop($$props, "iconOnly", 3, false), loading = prop($$props, "loading", 3, false), title = prop($$props, "title", 3, void 0), type = prop($$props, "type", 3, "button"), disabled = prop($$props, "disabled", 3, false), className = prop($$props, "class", 3, ""), style = prop($$props, "style", 3, ""), ariaLabel = prop($$props, "aria-label", 3, void 0), ariaHasPopup = prop($$props, "aria-haspopup", 3, void 0), ariaExpanded = prop($$props, "aria-expanded", 3, void 0), ariaControls = prop($$props, "aria-controls", 3, void 0);
   const VARIANT = {
-    primary: "bg-brand-05 text-white hover:bg-brand-06 border-transparent",
+    primary: "bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-transparent",
     ghost: "bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1",
     danger: "bg-transparent text-status-danger border-status-danger/30"
   };
@@ -11783,6 +11783,18 @@ function Pill($$anchor, $$props) {
   });
   append($$anchor, span);
 }
+function along(pointer, size, viewport, margin) {
+  const far = viewport - margin;
+  if (pointer + size <= far) return Math.max(margin, pointer);
+  if (pointer - size >= margin) return pointer - size;
+  return Math.max(margin, Math.min(pointer, far - size));
+}
+function computeMenuPosition(input) {
+  return {
+    left: along(input.x, input.menuWidth, input.viewportWidth, input.margin),
+    top: along(input.y, input.menuHeight, input.viewportHeight, input.margin)
+  };
+}
 var root$2r = /* @__PURE__ */ from_html(`<li role="separator" class="my-1 h-px bg-row-active"></li>`);
 var root_1$1N = /* @__PURE__ */ from_html(` <!> `, 1);
 var root_2$1u = /* @__PURE__ */ from_html(`<li role="menuitem" class="flex cursor-pointer items-center whitespace-nowrap rounded-[5px] px-3 py-1.5 text-13 text-text-2 outline-none hover:bg-row-active hover:text-text-1 data-[active=true]:bg-row-active data-[active=true]:text-text-1 data-[danger=true]:text-status-danger data-[danger=true]:hover:bg-status-danger/10 data-[warning=true]:text-status-warning data-[warning=true]:hover:bg-status-warning/10 data-[success=true]:text-status-success data-[success=true]:hover:bg-status-success/10 aria-disabled:cursor-not-allowed aria-disabled:opacity-40"><!></li>`);
@@ -11809,10 +11821,25 @@ function ContextMenu($$anchor, $$props) {
     },
     []
   ));
-  const menuW = 168;
-  let menuH = /* @__PURE__ */ user_derived(() => items().length * 30 + 8);
-  let cx = /* @__PURE__ */ user_derived(() => Math.min(x(), (typeof window !== "undefined" ? window.innerWidth : 1200) - menuW - 8));
-  let cy = /* @__PURE__ */ user_derived(() => Math.min(y(), (typeof window !== "undefined" ? window.innerHeight : 800) - get(menuH) - 8));
+  const MENU_MARGIN = 8;
+  let cx = /* @__PURE__ */ state(0);
+  let cy = /* @__PURE__ */ state(0);
+  user_effect(() => {
+    void items();
+    if (!open() || get(menuEl) === void 0) return;
+    const { width, height } = get(menuEl).getBoundingClientRect();
+    const placed = computeMenuPosition({
+      x: x(),
+      y: y(),
+      menuWidth: width,
+      menuHeight: height,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      margin: MENU_MARGIN
+    });
+    set(cx, placed.left, true);
+    set(cy, placed.top, true);
+  });
   function activate(id) {
     $$props.onaction?.(id);
     $$props.onclose?.();
@@ -13239,7 +13266,7 @@ function DatePicker($$anchor, $$props) {
     if (outside) cls += " text-text-4";
     else cls += " text-text-2";
     if (isToday && !isSelected) cls += " ring-1 ring-inset ring-brand-05";
-    if (isSelected) cls += " bg-brand-05 text-white hover:bg-brand-06";
+    if (isSelected) cls += " bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover";
     return cls;
   }
   var div = root_5$e();
@@ -13527,7 +13554,7 @@ function DateRangePicker($$anchor, $$props) {
     if (outside) cls += " text-text-4";
     else cls += " text-text-2";
     if (isTodayDay && !start && !end) cls += " ring-1 ring-inset ring-brand-05";
-    if (start || end) cls += " bg-brand-05 text-white hover:bg-brand-06";
+    if (start || end) cls += " bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover";
     else if (inRange) cls += " bg-brand-05/20 text-text-1";
     return cls;
   }
@@ -22433,7 +22460,7 @@ function NotifDot_wc($$anchor, $$props) {
   return pop($$exports);
 }
 customElements.define("uni-notif-dot", create_custom_element(NotifDot_wc, { class: {} }, ["default"], [], { mode: "open" }));
-var root$1n = /* @__PURE__ */ from_html(`<span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-brand-05 px-1.5 text-11 font-bold text-white tabular-nums"> </span>`);
+var root$1n = /* @__PURE__ */ from_html(`<span class="inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-primary-fill px-1.5 text-11 font-bold text-primary-fill-fg tabular-nums"> </span>`);
 var root_1$$ = /* @__PURE__ */ from_html(`<button type="button" class="cursor-pointer rounded border-0 bg-transparent px-1.5 py-0.5 text-11 text-brand-05 hover:text-status-info focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05">Mark all read</button>`);
 var root_2$R = /* @__PURE__ */ from_html(`<button type="button" role="tab" class="cursor-pointer rounded border border-border-2 bg-transparent px-2.5 py-0.5 text-11 text-text-3 hover:bg-row-hover hover:text-text-1 data-[active=true]:border-brand-05 data-[active=true]:bg-brand-05/[0.10] data-[active=true]:text-brand-05 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05"> </button>`);
 var root_3$v = /* @__PURE__ */ from_html(`<div class="p-6 text-center text-13 text-text-4">No notifications</div>`);
@@ -23203,7 +23230,7 @@ function Pagination($$anchor, $$props) {
   let totalPages = /* @__PURE__ */ user_derived(() => Math.max(1, Math.ceil(total() / pageSize())));
   let pages = /* @__PURE__ */ user_derived(() => getPageNumbers(page(), get(totalPages)));
   const BTN_BASE = "inline-flex h-[30px] min-w-[30px] cursor-pointer items-center justify-center rounded-md border border-transparent bg-transparent px-1.5 text-13 font-medium leading-none text-text-3 transition-[background-color,color,border-color] duration-100 hover:bg-row-hover hover:text-text-1 hover:border-border-2 disabled:cursor-not-allowed disabled:opacity-35 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-05";
-  const BTN_ACTIVE = "bg-brand-05 text-white border-brand-05 hover:bg-brand-06 hover:border-brand-06";
+  const BTN_ACTIVE = "bg-primary-fill text-primary-fill-fg border-primary-fill hover:bg-primary-fill-hover hover:border-primary-fill-hover";
   var fragment = comment();
   var node = first_child(fragment);
   {
@@ -27483,7 +27510,7 @@ function SelectionToolbar_wc($$anchor, $$props) {
 }
 customElements.define("uni-selection-toolbar", create_custom_element(SelectionToolbar_wc, { count: {}, actions: {}, ariaLabel: {} }, ["default"], [], { mode: "open" }));
 var root$W = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_1$C = /* @__PURE__ */ from_html(`<span class="ml-auto rounded-full bg-brand-05 px-1.5 py-px text-[10px] font-semibold text-white"> <span class="sr-only"> </span></span>`);
+var root_1$C = /* @__PURE__ */ from_html(`<span class="ml-auto rounded-full bg-primary-fill px-1.5 py-px text-[10px] font-semibold text-primary-fill-fg"> <span class="sr-only"> </span></span>`);
 var root_2$v = /* @__PURE__ */ from_html(`<li><button type="button"><span class="sb-ico shrink-0 text-text-3 [&amp;_svg]:h-4 [&amp;_svg]:w-4"><!></span> <!> <!></button></li>`);
 var root_3$i = /* @__PURE__ */ from_html(`<h2 class="m-0 px-4 pb-1.5 pt-3.5 text-[10px] font-semibold uppercase leading-[1.4] tracking-[0.06em] text-text-4"> </h2> <ul class="m-0 flex list-none flex-col gap-px px-2"></ul>`, 1);
 var root_4$7 = /* @__PURE__ */ from_html(`<nav class="overflow-auto border-r border-border-1 bg-bg-page py-2" aria-label="Primary"></nav>`);
@@ -28803,7 +28830,7 @@ function SplitButton($$anchor, $$props) {
   onMount(() => document.addEventListener("mousedown", handleOutside));
   onDestroy(() => document.removeEventListener("mousedown", handleOutside));
   const VARIANT = {
-    primary: "bg-brand-05 text-white hover:bg-brand-06 border-brand-05",
+    primary: "bg-primary-fill text-primary-fill-fg hover:bg-primary-fill-hover active:bg-primary-fill-press border-primary-fill",
     ghost: "bg-transparent text-text-2 border-border-2 hover:bg-row-hover hover:text-text-1",
     danger: "bg-transparent text-status-danger border-status-danger/30"
   };
@@ -30093,7 +30120,7 @@ function Stepper($$anchor, $$props) {
   let className = prop($$props, "class", 3, "");
   let activeIdx = /* @__PURE__ */ user_derived(() => $$props.steps.findIndex((s) => s.id === $$props.active));
   const NUM = {
-    active: "border-brand-05 bg-brand-05 text-white",
+    active: "border-primary-fill bg-primary-fill text-primary-fill-fg",
     done: "border-brand-05 bg-brand-05/[0.18] text-status-info",
     upcoming: "border-bg-3 bg-bg-1 text-text-4"
   };