sakana-element 2.2.0 → 2.3.0

package/dist/es/hooks-BaG7l8K5.js

@@ -1,116 +0,0 @@
-import { isRef as e, watch as t, onMounted as n, onBeforeUnmount as a, unref as o, getCurrentInstance as l, useSlots as r, watchEffect as s, ref as u, inject as c, computed as d, onUnmounted as i } from "vue";
-import { f as v, y as f, k as m, z as p, n as h, o as g, a as w } from "./vendor-DXmGx29U.js";
-function L(l2, r2, s2) {
-  e(l2) ? t(l2, ((e2, t2) => {
-    null == t2 || t2.removeEventListener(r2, s2), null == e2 || e2.addEventListener(r2, s2);
-  })) : n((() => null == l2 ? void 0 : l2.addEventListener(r2, s2))), a((() => {
-    var e2;
-    return null == (e2 = o(l2)) ? void 0 : e2.removeEventListener(r2, s2);
-  }));
-}
-function x(e2, t2) {
-  L(document, "click", ((n2) => {
-    e2.value && n2.target && (e2.value.contains(n2.target) || t2(n2));
-  }));
-}
-const k = (e2, t2) => v(e2, ((e3) => {
-  f(t2) && t2(e3), e3.children && k(e3.children, t2);
-}));
-function y() {
-  var e2, t2;
-  const n2 = /* @__PURE__ */ new Map(), a2 = l(), o2 = null == (t2 = null == (e2 = r()) ? void 0 : e2.default) ? void 0 : t2.call(e2);
-  s((() => {
-    (null == a2 ? void 0 : a2.props.disabled) ? k(o2 ?? [], ((e3) => {
-      (null == e3 ? void 0 : e3.props) && (n2.set(e3, m(e3.props)), e3.props = p(null == e3 ? void 0 : e3.props, { style: { cursor: "not-allowed", color: "var(--px-text-color-placeholder)" } }));
-    })) : k(o2 ?? [], ((e3) => {
-      n2.has(e3) && (e3.props = n2.get(e3));
-    }));
-  }));
-}
-function E(e2, { afterBlur: t2, beforeBlur: n2, afterFocus: a2 } = {}) {
-  const o2 = l(), { emit: r2 } = o2, s2 = u(), c2 = u(false);
-  return L(s2, "click", (() => {
-    var t3;
-    null == (t3 = e2.value) || t3.focus();
-  })), { wrapperRef: s2, isFocused: c2, handleFocus: (e3) => {
-    c2.value || (c2.value = true, r2("focus", e3), null == a2 || a2());
-  }, handleBlur: (e3) => {
-    var a3;
-    f(n2) && n2(e3) || e3.relatedTarget && (null == (a3 = s2.value) ? void 0 : a3.contains(e3.relatedTarget)) || (c2.value = false, r2("blur", e3), null == t2 || t2());
-  } };
-}
-const M = { prefix: Math.floor(1e4 * Math.random()), current: 0 };
-function b(e2 = "er") {
-  const t2 = `${e2}-${M.prefix}-${M.current++}`;
-  return u(t2);
-}
-const T = { name: "en", el: { select: { loading: "Loading", noMatch: "No matching data", noData: "No data", placeholder: "Select" }, dropdown: { toggleDropdown: "Toggle Dropdown" }, messagebox: { title: "Message", confirm: "OK", cancel: "Cancel", error: "Illegal input", close: "Close this dialog" }, popconfirm: { confirmButtonText: "Yes", cancelButtonText: "No" } } };
-function B(e2) {
-  {
-    const e3 = c(h, u(g({ locale: T.name, messages: { en: T.el } })));
-    return d((() => {
-      return t2 = o(e3), w(t2, "install");
-      var t2;
-    }));
-  }
-}
-function D(e2) {
-  const t2 = d((() => e2.getLastBottomOffset())), n2 = d((() => e2.offset + t2.value)), a2 = d((() => n2.value + e2.boxHeight.value));
-  return { topOffset: n2, bottomOffset: a2 };
-}
-const I = u(0);
-function O(e2 = 2e3) {
-  const t2 = u(e2), n2 = d((() => I.value + t2.value));
-  return { initialValue: t2, currentZIndex: n2, nextZIndex: () => (I.value++, n2.value) };
-}
-function S() {
-  const e2 = u(false);
-  let t2 = null, a2 = null;
-  return n((() => {
-    "undefined" != typeof window && (t2 = window.matchMedia("(prefers-color-scheme: dark)"), e2.value = t2.matches, a2 = (t3) => {
-      e2.value = t3.matches;
-    }, t2.addEventListener ? t2.addEventListener("change", a2) : t2.addListener(a2));
-  })), i((() => {
-    t2 && a2 && (t2.removeEventListener ? t2.removeEventListener("change", a2) : t2.removeListener(a2));
-  })), { prefersDark: e2, prefers: d((() => e2.value ? "dark" : "light")) };
-}
-const F = "px-theme", N = "px-dark", $ = u("system"), C = u(false);
-function Z(e2) {
-  "undefined" != typeof document && (e2 ? document.documentElement.classList.add(N) : document.documentElement.classList.remove(N));
-}
-function j(e2) {
-  return "system" === e2 ? "undefined" != typeof window && window.matchMedia("(prefers-color-scheme: dark)").matches : "dark" === e2;
-}
-let z = false;
-function H() {
-  if (!z && "undefined" != typeof window) {
-    !(function() {
-      if ("undefined" == typeof window) return;
-      const e4 = localStorage.getItem(F);
-      e4 && ["light", "dark", "system"].includes(e4) ? $.value = e4 : $.value = "system", C.value = j($.value), Z(C.value);
-    })(), z = true;
-    const e3 = window.matchMedia("(prefers-color-scheme: dark)"), t2 = (e4) => {
-      "system" === $.value && (C.value = e4.matches, Z(C.value));
-    };
-    e3.addEventListener ? e3.addEventListener("change", t2) : e3.addListener(t2);
-  }
-  const e2 = (e3) => {
-    $.value = e3, C.value = j(e3), Z(C.value), "undefined" != typeof localStorage && localStorage.setItem(F, e3);
-  };
-  return { theme: d((() => $.value)), isDark: d((() => C.value)), setTheme: e2, toggleTheme: () => {
-    const t2 = C.value ? "light" : "dark";
-    e2(t2);
-  } };
-}
-export {
-  x as a,
-  y as b,
-  E as c,
-  O as d,
-  D as e,
-  L as f,
-  B as g,
-  S as h,
-  H as i,
-  b as u
-};

package/dist/es/utils-bsCscZfS.js

@@ -1,84 +0,0 @@
-import { h as o, d as e, y as r } from "./vendor-DXmGx29U.js";
-import { defineComponent as n } from "vue";
-function t(o2, e2) {
-  const r2 = parseInt(o2.replace("#", ""), 16);
-  return `#${(Math.max(0, (r2 >> 16) - Math.round(2.55 * e2)) << 16 | Math.max(0, (r2 >> 8 & 255) - Math.round(2.55 * e2)) << 8 | Math.max(0, (255 & r2) - Math.round(2.55 * e2))).toString(16).padStart(6, "0")}`;
-}
-function c(o2, e2) {
-  const r2 = parseInt(o2.replace("#", ""), 16);
-  return `#${(Math.min(255, (r2 >> 16) + Math.round(2.55 * e2)) << 16 | Math.min(255, (r2 >> 8 & 255) + Math.round(2.55 * e2)) << 8 | Math.min(255, (255 & r2) + Math.round(2.55 * e2))).toString(16).padStart(6, "0")}`;
-}
-function a(o2) {
-  const e2 = parseInt(o2.replace("#", ""), 16);
-  return (0.299 * (e2 >> 16) + 0.587 * (e2 >> 8 & 255) + 0.114 * (255 & e2)) / 255 > 0.6 ? "#1e1e2e" : "#ffffff";
-}
-function s(o2) {
-  return { color: o2, dark: t(o2, 15), light: c(o2, 35), contrast: a(o2), transparent: "transparent" };
-}
-function i(o2, e2, r2) {
-  const n2 = {};
-  for (const [t2, c2] of Object.entries(r2)) n2[`--${e2}-${t2}`] = o2[c2];
-  return n2;
-}
-const l = { outline: { "text-color": "color", "bg-color": "transparent", "border-color": "color", "shadow-color": "transparent" }, dash: { "text-color": "color", "bg-color": "light", "border-color": "color", "shadow-color": "transparent" }, default: { "text-color": "contrast", "bg-color": "color", "border-color": "dark", "shadow-color": "dark" } };
-function f(o2, e2) {
-}
-const u = { spinner: "loader", loading: "loader", "eye-slash": "eye-closed", "eye-off": "eye-closed", xmark: "close", x: "close", times: "close", "circle-xmark": "close-box", "x-circle": "close-box", "times-circle": "close-box", error: "close-box", "circle-info": "info-box", "info-circle": "info-box", info: "info-box", "check-circle": "check", "circle-check": "check", success: "check", "circle-exclamation": "warning-box", "exclamation-circle": "warning-box", warning: "warning-box", "angle-down": "chevron-down", "caret-down": "chevron-down", "angle-up": "chevron-up", "caret-up": "chevron-up", "angle-left": "chevron-left", "caret-left": "chevron-left", "angle-right": "chevron-right", "caret-right": "chevron-right", "question-circle": "info-box", "circle-question": "info-box", help: "info-box", question: "info-box", gear: "sliders", cog: "sliders", settings: "sliders", star: "bookmark", "star-solid": "bookmark" };
-function d(o2) {
-  return o2 in u ? u[o2] : o2;
-}
-const h = /* @__PURE__ */ new Set(["svg", "path", "rect", "circle", "ellipse", "line", "polyline", "polygon", "g", "defs", "clipPath", "mask", "title", "desc", "linearGradient", "radialGradient", "stop", "symbol", "use"]), p = /^on/i, m = /^\s*javascript\s*:/i;
-function g(o2) {
-  if (!o2 || "string" != typeof o2) return "";
-  if ("undefined" == typeof DOMParser) return "";
-  const e2 = new DOMParser().parseFromString(o2, "image/svg+xml");
-  return e2.querySelector("parsererror") ? "" : (b(e2.documentElement), e2.documentElement.outerHTML);
-}
-function b(o2) {
-  const e2 = Array.from(o2.children);
-  for (const o3 of e2) {
-    const e3 = o3.tagName.toLowerCase();
-    if (h.has(e3)) {
-      for (const e4 of Array.from(o3.attributes)) (p.test(e4.name) || "href" === e4.name && m.test(e4.value) || "xlink:href" === e4.name && m.test(e4.value)) && o3.removeAttribute(e4.name);
-      b(o3);
-    } else o3.remove();
-  }
-}
-const x = /* @__PURE__ */ new Map();
-function v(o2) {
-  for (const [e2, r2] of Object.entries(o2)) x.set(e2, g(r2));
-}
-function w(o2) {
-  return x.get(o2);
-}
-const k = (o2) => (o2.install = (e2) => {
-  const r2 = o2.name;
-  e2.component(r2, o2);
-}, o2), M = (o2, e2) => (o2.install = (r2) => {
-  r2.config.globalProperties[e2] = o2;
-}, o2);
-function y(r2, n2 = "px") {
-  return r2 ? o(r2) || ((o2) => !!e(o2) && !Number.isNaN(Number(o2)))(r2) ? `${r2}${n2}` : e(r2) ? r2 : void 0 : "";
-}
-const N = /* @__PURE__ */ new Map([["info", "info-box"], ["success", "check"], ["warning", "warning-box"], ["danger", "close-box"], ["error", "close-box"]]), S = n({ props: { vNode: { type: [String, Object, Function], required: true } }, setup: (o2) => () => r(o2.vNode) ? o2.vNode() : o2.vNode }), O = (o2, e2) => {
-  const r2 = o2.__vccOpts || o2;
-  for (const [o3, n2] of e2) r2[o3] = n2;
-  return r2;
-};
-export {
-  S as R,
-  l as S,
-  O as _,
-  d as a,
-  v as b,
-  s as c,
-  f as d,
-  y as e,
-  M as f,
-  w as g,
-  c as l,
-  i as r,
-  g as s,
-  N as t,
-  k as w
-};

package/dist/theme/Card.css

@@ -1,263 +0,0 @@
-/* Card Variables */
-.px-card[data-v-61d3ab66] {
-  --px-card-bg-color: var(--px-bg-color);
-  --px-card-border-color: var(--px-border-color);
-  --px-card-shadow-color: var(--px-shadow-color);
-  --px-card-text-color: var(--px-text-color-primary);
-  --px-card-header-border-color: var(--px-border-color-light);
-  --px-card-footer-border-color: var(--px-border-color-light);
-  --px-card-padding: 16px;
-}
-/* Base Card Styles - Pixel Game Aesthetic */
-.px-card[data-v-61d3ab66] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  color: var(--px-card-text-color);
-  font-family: var(--px-font-family);
-  font-size: var(--px-font-size-base);
-  background: transparent;
-  border: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  transition: none;
-}
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-card[data-v-61d3ab66]::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-card-border-color);
-    clip-path: polygon(
-      0 2px, 2px 2px, 2px 0,
-      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
-      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
-      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
-    );
-    z-index: 0;
-}
-/* Fill layer — inset by border width, filled with bg color */
-.px-card[data-v-61d3ab66]::after {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background: var(--px-card-bg-color);
-    clip-path: polygon(
-      0 2px, 2px 2px, 2px 0,
-      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
-      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
-      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
-    );
-    z-index: 0;
-}
-/* Card sections - all above pseudo-elements */
-.px-card__header[data-v-61d3ab66] {
-  position: relative;
-  z-index: 1;
-  padding: var(--px-card-padding);
-  border-bottom: 2px solid var(--px-card-header-border-color);
-  font-weight: 600;
-}
-.px-card__body[data-v-61d3ab66] {
-  position: relative;
-  z-index: 1;
-  padding: var(--px-card-padding);
-  flex: 1;
-}
-.px-card__footer[data-v-61d3ab66] {
-  position: relative;
-  z-index: 1;
-  padding: var(--px-card-padding);
-  border-top: 2px solid var(--px-card-footer-border-color);
-}
-/* Shadow variants */
-.px-card--shadow-always[data-v-61d3ab66] {
-  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
-}
-.px-card--shadow-hover[data-v-61d3ab66] {
-  filter: none;
-}
-.px-card--shadow-hover[data-v-61d3ab66]:hover {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
-}
-.px-card--shadow-never[data-v-61d3ab66] {
-  filter: none;
-}
-/* Hoverable interaction */
-.px-card.is-hoverable[data-v-61d3ab66] {
-  cursor: pointer;
-}
-.px-card.is-hoverable[data-v-61d3ab66]:hover {
-    transform: translateY(-4px);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-card-shadow-color));
-}
-.px-card.is-hoverable[data-v-61d3ab66]:active {
-    transform: translateY(0);
-}
-/* Size variants */
-.px-card--small[data-v-61d3ab66] {
-  --px-card-padding: 12px;
-  font-size: var(--px-font-size-small);
-  filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
-}
-.px-card--small.px-card--shadow-hover[data-v-61d3ab66] { filter: none;
-}
-.px-card--small.px-card--shadow-hover[data-v-61d3ab66]:hover { filter: drop-shadow(2px 2px 0px var(--px-card-shadow-color));
-}
-.px-card--small.px-card--shadow-never[data-v-61d3ab66] { filter: none;
-}
-.px-card--large[data-v-61d3ab66] {
-  --px-card-padding: 20px;
-  font-size: var(--px-font-size-large);
-}
-/* Type variants */
-.px-card--primary[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-primary-light-9);
-    --px-card-border-color: var(--px-color-primary);
-    --px-card-shadow-color: var(--px-color-primary-dark);
-    --px-card-text-color: var(--px-text-color-primary);
-    --px-card-header-border-color: var(--px-color-primary);
-    --px-card-footer-border-color: var(--px-color-primary);
-}
-.px-card--primary.is-outline[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: var(--px-color-primary);
-    --px-card-text-color: var(--px-color-primary);
-}
-.px-card--primary.is-dash[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-primary-light-9);
-    --px-card-border-color: var(--px-color-primary);
-    --px-card-text-color: var(--px-color-primary);
-}
-.px-card--primary.is-ghost[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: transparent;
-    --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-primary);
-}
-.px-card--success[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-success-light-9);
-    --px-card-border-color: var(--px-color-success);
-    --px-card-shadow-color: var(--px-color-success-dark);
-    --px-card-text-color: var(--px-text-color-primary);
-    --px-card-header-border-color: var(--px-color-success);
-    --px-card-footer-border-color: var(--px-color-success);
-}
-.px-card--success.is-outline[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: var(--px-color-success);
-    --px-card-text-color: var(--px-color-success);
-}
-.px-card--success.is-dash[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-success-light-9);
-    --px-card-border-color: var(--px-color-success);
-    --px-card-text-color: var(--px-color-success);
-}
-.px-card--success.is-ghost[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: transparent;
-    --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-success);
-}
-.px-card--info[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-info-light-9);
-    --px-card-border-color: var(--px-color-info);
-    --px-card-shadow-color: var(--px-color-info-dark);
-    --px-card-text-color: var(--px-text-color-primary);
-    --px-card-header-border-color: var(--px-color-info);
-    --px-card-footer-border-color: var(--px-color-info);
-}
-.px-card--info.is-outline[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: var(--px-color-info);
-    --px-card-text-color: var(--px-color-info);
-}
-.px-card--info.is-dash[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-info-light-9);
-    --px-card-border-color: var(--px-color-info);
-    --px-card-text-color: var(--px-color-info);
-}
-.px-card--info.is-ghost[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: transparent;
-    --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-info);
-}
-.px-card--warning[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-warning-light-9);
-    --px-card-border-color: var(--px-color-warning);
-    --px-card-shadow-color: var(--px-color-warning-dark);
-    --px-card-text-color: var(--px-text-color-primary);
-    --px-card-header-border-color: var(--px-color-warning);
-    --px-card-footer-border-color: var(--px-color-warning);
-}
-.px-card--warning.is-outline[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: var(--px-color-warning);
-    --px-card-text-color: var(--px-color-warning);
-}
-.px-card--warning.is-dash[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-warning-light-9);
-    --px-card-border-color: var(--px-color-warning);
-    --px-card-text-color: var(--px-color-warning);
-}
-.px-card--warning.is-ghost[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: transparent;
-    --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-warning);
-}
-.px-card--danger[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-danger-light-9);
-    --px-card-border-color: var(--px-color-danger);
-    --px-card-shadow-color: var(--px-color-danger-dark);
-    --px-card-text-color: var(--px-text-color-primary);
-    --px-card-header-border-color: var(--px-color-danger);
-    --px-card-footer-border-color: var(--px-color-danger);
-}
-.px-card--danger.is-outline[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: var(--px-color-danger);
-    --px-card-text-color: var(--px-color-danger);
-}
-.px-card--danger.is-dash[data-v-61d3ab66] {
-    --px-card-bg-color: var(--px-color-danger-light-9);
-    --px-card-border-color: var(--px-color-danger);
-    --px-card-text-color: var(--px-color-danger);
-}
-.px-card--danger.is-ghost[data-v-61d3ab66] {
-    --px-card-bg-color: transparent;
-    --px-card-border-color: transparent;
-    --px-card-shadow-color: transparent;
-    --px-card-text-color: var(--px-color-danger);
-}
-/* Outline variant */
-.px-card.is-outline[data-v-61d3ab66] {
-  border: 2px solid var(--px-card-border-color);
-  filter: none;
-}
-.px-card.is-outline[data-v-61d3ab66]::before { display: none;
-}
-.px-card.is-outline[data-v-61d3ab66]::after {
-    clip-path: none;
-    inset: 0;
-    background: var(--px-card-bg-color);
-}
-/* Dash variant */
-.px-card.is-dash[data-v-61d3ab66] {
-  border: 2px dashed var(--px-card-border-color);
-  filter: none;
-}
-.px-card.is-dash[data-v-61d3ab66]::before { display: none;
-}
-.px-card.is-dash[data-v-61d3ab66]::after {
-    clip-path: none;
-    inset: 0;
-    background: var(--px-card-bg-color);
-}
-/* Ghost variant */
-.px-card.is-ghost[data-v-61d3ab66] {
-  filter: none;
-}
-.px-card.is-ghost[data-v-61d3ab66]::before, .px-card.is-ghost[data-v-61d3ab66]::after { display: none;
-}

package/dist/theme/Dropdown.css

@@ -1,187 +0,0 @@
-/* Dropdown Variables */
-.px-dropdown .px-dropdown__menu {
-  --px-dropdown-menuItem-hover-fill: var(--px-hover-bg-color);
-  --px-dropdown-menuItem-hover-color: var(--px-hover-text-color);
-  --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
-  --px-dropdown-menuItem-divided-color: var(--px-border-color-dark);
-  --px-dropdown-shadow-color: var(--px-shadow-color-dark);
-}
-/* Base Dropdown Styles - Pixel Game Menu */
-.px-dropdown {
-  display: inline-block;
-  font-family: var(--px-font-family);
-}
-.px-dropdown .px-tooltip {
-    --px-popover-padding: 4px 0;
-}
-/* Disabled state */
-.px-dropdown.is-disabled > * {
-    color: var(--px-text-color-placeholder) !important;
-    cursor: not-allowed !important;
-}
-/* Dropdown Menu - Pixel style list */
-.px-dropdown__menu {
-  list-style-type: none;
-  margin: 0;
-  padding: 4px 0;
-  background: var(--px-bg-color);
-}
-/* Menu items - Pixel RPG menu style */
-.px-dropdown__menu .px-dropdown__item {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    list-style: none;
-    line-height: 1.5;
-    padding: 8px 16px;
-    margin: 0;
-    font-size: var(--px-font-size-base);
-    font-family: var(--px-font-family);
-    color: var(--px-text-color-primary);
-    cursor: pointer;
-    outline: none;
-    position: relative;
-    transition: none;
-}
-/* Hover effect - Pixel highlight */
-.px-dropdown__menu .px-dropdown__item:hover {
-      background-color: var(--px-dropdown-menuItem-hover-fill);
-      color: var(--px-dropdown-menuItem-hover-color);
-}
-/* Pixel cursor indicator */
-.px-dropdown__menu .px-dropdown__item:hover::before {
-        content: ">";
-        position: absolute;
-        left: 6px;
-        color: var(--px-dropdown-menuItem-hover-color);
-        font-weight: bold;
-}
-/* Disabled state */
-.px-dropdown__menu .px-dropdown__item.is-disabled {
-      color: var(--px-dropdown-menuItem-disabled-color);
-      cursor: not-allowed;
-      background-image: none;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover {
-        background-color: transparent;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover::before {
-          content: none;
-}
-/* Size variants */
-.px-dropdown__menu .px-dropdown__item--large {
-    padding: 10px 20px;
-    line-height: 1.5;
-    font-size: var(--px-font-size-large);
-}
-.px-dropdown__menu .px-dropdown__item--large:hover::before {
-      left: 8px;
-}
-.px-dropdown__menu .px-dropdown__item--small {
-    padding: 4px 12px;
-    line-height: 1.4;
-    font-size: var(--px-font-size-small);
-}
-.px-dropdown__menu .px-dropdown__item--small:hover::before {
-      left: 4px;
-}
-/* Divider - Pixel style dashed line */
-.px-dropdown__menu .divided-placeholder {
-    margin: 6px 8px;
-    border-top: 2px dashed var(--px-dropdown-menuItem-divided-color);
-}
-/* Dropdown Variables */
-.px-dropdown .px-dropdown__menu {
-  --px-dropdown-menuItem-hover-fill: var(--px-hover-bg-color);
-  --px-dropdown-menuItem-hover-color: var(--px-hover-text-color);
-  --px-dropdown-menuItem-disabled-color: var(--px-text-color-disabled);
-  --px-dropdown-menuItem-divided-color: var(--px-border-color-dark);
-  --px-dropdown-shadow-color: var(--px-shadow-color-dark);
-}
-/* Base Dropdown Styles - Pixel Game Menu */
-.px-dropdown {
-  display: inline-block;
-  font-family: var(--px-font-family);
-}
-.px-dropdown .px-tooltip {
-    --px-popover-padding: 4px 0;
-}
-/* Disabled state */
-.px-dropdown.is-disabled > * {
-    color: var(--px-text-color-placeholder) !important;
-    cursor: not-allowed !important;
-}
-/* Dropdown Menu - Pixel style list */
-.px-dropdown__menu {
-  list-style-type: none;
-  margin: 0;
-  padding: 4px 0;
-  background: var(--px-bg-color);
-}
-/* Menu items - Pixel RPG menu style */
-.px-dropdown__menu .px-dropdown__item {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    list-style: none;
-    line-height: 1.5;
-    padding: 8px 16px;
-    margin: 0;
-    font-size: var(--px-font-size-base);
-    font-family: var(--px-font-family);
-    color: var(--px-text-color-primary);
-    cursor: pointer;
-    outline: none;
-    position: relative;
-    transition: none;
-}
-/* Hover effect - Pixel highlight */
-.px-dropdown__menu .px-dropdown__item:hover {
-      background-color: var(--px-dropdown-menuItem-hover-fill);
-      color: var(--px-dropdown-menuItem-hover-color);
-}
-/* Pixel cursor indicator */
-.px-dropdown__menu .px-dropdown__item:hover::before {
-        content: ">";
-        position: absolute;
-        left: 6px;
-        color: var(--px-dropdown-menuItem-hover-color);
-        font-weight: bold;
-}
-/* Disabled state */
-.px-dropdown__menu .px-dropdown__item.is-disabled {
-      color: var(--px-dropdown-menuItem-disabled-color);
-      cursor: not-allowed;
-      background-image: none;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover {
-        background-color: transparent;
-}
-.px-dropdown__menu .px-dropdown__item.is-disabled:hover::before {
-          content: none;
-}
-/* Size variants */
-.px-dropdown__menu .px-dropdown__item--large {
-    padding: 10px 20px;
-    line-height: 1.5;
-    font-size: var(--px-font-size-large);
-}
-.px-dropdown__menu .px-dropdown__item--large:hover::before {
-      left: 8px;
-}
-.px-dropdown__menu .px-dropdown__item--small {
-    padding: 4px 12px;
-    line-height: 1.4;
-    font-size: var(--px-font-size-small);
-}
-.px-dropdown__menu .px-dropdown__item--small:hover::before {
-      left: 4px;
-}
-/* Divider - Pixel style dashed line */
-.px-dropdown__menu .divided-placeholder {
-    margin: 6px 8px;
-    border-top: 2px dashed var(--px-dropdown-menuItem-divided-color);
-}
-.px-dropdown .px-button-group > :last-child {
-  padding: 5px 7px;
-}