@duskmoon-dev/core 1.18.6 → 1.19.0

package/dist/standalone/duskmoonui.mjs

@@ -1,6 +1,6 @@
 /**
- * @duskmoon-dev/core v1.18.6
- * @duskmoon-dev/css-art v1.18.6
+ * @duskmoon-dev/core v1.19.0
+ * @duskmoon-dev/css-art v1.19.0
  * Standalone Tailwind CSS v4 plugin bundle
  * https://github.com/duskmoon-dev/duskmoonui
  * @license MIT
@@ -152,7 +152,11 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
     )`, animation: "skeleton-wave 1.5s infinite" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes skeleton-wave": { "100%": { transform: "translateX(100%)" } }, ".skeleton-group": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".skeleton-card-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.75rem" } }, ".skeleton-card-header": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem" } }, ".skeleton-card-body": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".skeleton-table": { "@layer components": { width: "100%" } }, ".skeleton-table-row": { "@layer components": { display: "flex", gap: "1rem", padding: "0.75rem 0", borderBottom: "1px solid var(--color-outline-variant)" } }, ".skeleton-table-cell": { "@layer components": { flex: 1, height: "1rem", borderRadius: "var(--radius-xs)" } }, ".skeleton-list": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.5rem" } }, ".skeleton-list-item": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.5rem 0" } }, ".snackbar-container": [{ "@layer components": { position: "fixed", zIndex: 1100, display: "flex", flexDirection: "column", gap: "0.5rem", padding: "1rem", pointerEvents: "none" } }, { "@layer components": { "@media (max-width: 640px)": { left: "0", right: "0", transform: "none" } } }], ".snackbar-container-bottom": { "@layer components": { bottom: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".snackbar-container-bottom-left": { "@layer components": { bottom: "0", left: "0", alignItems: "flex-start" } }, ".snackbar-container-bottom-right": { "@layer components": { bottom: "0", right: "0", alignItems: "flex-end" } }, ".snackbar-container-top": { "@layer components": { top: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".snackbar-container-top-left": { "@layer components": { top: "0", left: "0", alignItems: "flex-start" } }, ".snackbar-container-top-right": { "@layer components": { top: "0", right: "0", alignItems: "flex-end" } }, ".snackbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", minWidth: "20rem", maxWidth: "40rem", padding: "0.875rem 1rem", backgroundColor: "var(--color-surface-container-highest)", color: "var(--color-on-surface)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-md)", pointerEvents: "auto", opacity: 0, transform: "translateY(100%)", transition: "opacity 200ms ease-out, transform 200ms ease-out" } }, { "@layer components": { "@media (max-width: 640px)": { minWidth: "calc(100vw - 2rem)", maxWidth: "calc(100vw - 2rem)" } } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "opacity 0ms, transform 0ms" } } }], ".snackbar-container-top .snackbar, \n  .snackbar-container-top-left .snackbar, \n  .snackbar-container-top-right .snackbar": { "@layer components": { transform: "translateY(-100%)" } }, ".snackbar.snackbar-open, \n  .snackbar.snackbar-show, \n  .snackbar.show": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".snackbar.snackbar-bottom": { "@layer components": { position: "fixed", bottom: "1rem", left: "50%", transform: "translateX(-50%) translateY(100%)", zIndex: 1100 } }, ".snackbar.snackbar-bottom.snackbar-show": { "@layer components": { transform: "translateX(-50%) translateY(0)" } }, ".snackbar.snackbar-bottom-left": { "@layer components": { position: "fixed", bottom: "1rem", left: "1rem", zIndex: 1100 } }, ".snackbar.snackbar-bottom-right": { "@layer components": { position: "fixed", bottom: "1rem", right: "1rem", zIndex: 1100 } }, ".snackbar.snackbar-top": { "@layer components": { position: "fixed", top: "1rem", left: "50%", transform: "translateX(-50%) translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top.snackbar-show": { "@layer components": { transform: "translateX(-50%) translateY(0)" } }, ".snackbar.snackbar-top-left": { "@layer components": { position: "fixed", top: "1rem", left: "1rem", transform: "translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top-left.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar.snackbar-top-right": { "@layer components": { position: "fixed", top: "1rem", right: "1rem", transform: "translateY(-100%)", zIndex: 1100 } }, ".snackbar.snackbar-top-right.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar.snackbar-bottom-left.snackbar-show, \n  .snackbar.snackbar-bottom-right.snackbar-show": { "@layer components": { transform: "translateY(0)" } }, ".snackbar-message": { "@layer components": { flex: 1, fontSize: "0.875rem", lineHeight: "1.25rem" } }, ".snackbar-action": { "@layer components": { display: "inline-flex", alignItems: "center", padding: "0.375rem 0.75rem", fontSize: "0.875rem", fontWeight: 500, color: "var(--color-primary)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out", whiteSpace: "nowrap", flexShrink: 0 } }, ".snackbar-action:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".snackbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".snackbar-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".snackbar-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".snackbar-info": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".snackbar-success": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".snackbar-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".snackbar-error": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".snackbar-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".snackbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".snackbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".snackbar-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".snackbar-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-on-surface)" } }, ".snackbar-base": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".snackbar-dark": { "@layer components": { backgroundColor: "var(--color-on-surface)", color: "var(--color-surface)" } }, ".snackbar-dark .snackbar-action": { "@layer components": { color: "var(--color-primary-container)" } }, ".snackbar-dark .snackbar-close": { "@layer components": { color: "var(--color-surface)" } }, ".snackbar-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: "1.25rem" } }, ".snackbar-multiline": { "@layer components": { flexWrap: "wrap", minHeight: "4rem" } }, ".snackbar-multiline .snackbar-message": { "@layer components": { width: "100%", marginBottom: "0.5rem" } }, ".snackbar-multiline .snackbar-action": { "@layer components": { marginLeft: "auto" } }, ".snackbar-container-bottom, \n    .snackbar-container-top": { "@layer components": { "@media (max-width: 640px)": { alignItems: "stretch" } } }, ".toast-container": { "@layer components": { position: "fixed", zIndex: 1200, display: "flex", flexDirection: "column", gap: "0.5rem", padding: "1rem", pointerEvents: "none" } }, ".toast-container-top-right": { "@layer components": { top: "0", right: "0", alignItems: "flex-end" } }, ".toast-container-top-left": { "@layer components": { top: "0", left: "0", alignItems: "flex-start" } }, ".toast-container-top-center": { "@layer components": { top: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".toast-container-bottom-right": { "@layer components": { bottom: "0", right: "0", alignItems: "flex-end" } }, ".toast-container-bottom-left": { "@layer components": { bottom: "0", left: "0", alignItems: "flex-start" } }, ".toast-container-bottom-center": { "@layer components": { bottom: "0", left: "50%", transform: "translateX(-50%)", alignItems: "center" } }, ".toast": [{ "@layer components": { display: "flex", alignItems: "flex-start", gap: "0.75rem", width: "22rem", maxWidth: "calc(100vw - 2rem)", padding: "1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", border: "1px solid var(--color-outline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", pointerEvents: "auto", opacity: 0, transform: "translateX(100%)", transition: "opacity 300ms ease-out, transform 300ms ease-out" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "opacity 0ms", transform: "none" } } }], ".toast-container-top-left .toast, \n  .toast-container-bottom-left .toast": { "@layer components": { transform: "translateX(-100%)" } }, ".toast-container-top-center .toast, \n  .toast-container-bottom-center .toast": { "@layer components": { transform: "translateY(-20px)" } }, ".toast.toast-open, \n  .toast.show, \n  .toast-show": { "@layer components": { opacity: 1, transform: "translateX(0) translateY(0)" } }, ".toast-icon": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1.25rem", flexShrink: 0 } }, ".toast-content": { "@layer components": { display: "flex", flexDirection: "column", gap: "0.25rem", flex: 1, minWidth: "0" } }, ".toast-title": { "@layer components": { fontSize: "0.875rem", fontWeight: 600, lineHeight: "1.25rem", color: "var(--color-on-surface)" } }, ".toast-message": { "@layer components": { fontSize: "0.875rem", lineHeight: "1.25rem", color: "var(--color-on-surface-variant)" } }, ".toast-close": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", fontSize: "1rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-xs)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out", flexShrink: 0, marginLeft: "auto" } }, ".toast-close:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".toast-close:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".toast-actions": { "@layer components": { display: "flex", gap: "0.5rem", marginTop: "0.5rem" } }, ".toast-info": { "@layer components": { borderColor: "var(--color-info)" } }, ".toast-info .toast-icon": { "@layer components": { color: "var(--color-info)" } }, ".toast-success": { "@layer components": { borderColor: "var(--color-success)" } }, ".toast-success .toast-icon": { "@layer components": { color: "var(--color-success)" } }, ".toast-warning": { "@layer components": { borderColor: "var(--color-warning)" } }, ".toast-warning .toast-icon": { "@layer components": { color: "var(--color-warning)" } }, ".toast-error": { "@layer components": { borderColor: "var(--color-error)" } }, ".toast-error .toast-icon": { "@layer components": { color: "var(--color-error)" } }, ".toast-primary": { "@layer components": { borderColor: "var(--color-primary)" } }, ".toast-primary .toast-icon": { "@layer components": { color: "var(--color-primary)" } }, ".toast-secondary": { "@layer components": { borderColor: "var(--color-secondary)" } }, ".toast-secondary .toast-icon": { "@layer components": { color: "var(--color-secondary)" } }, ".toast-tertiary": { "@layer components": { borderColor: "var(--color-tertiary)" } }, ".toast-tertiary .toast-icon": { "@layer components": { color: "var(--color-tertiary)" } }, ".toast-accent": { "@layer components": { borderColor: "var(--color-accent)" } }, ".toast-accent .toast-icon": { "@layer components": { color: "var(--color-accent)" } }, ".toast-neutral": { "@layer components": { borderColor: "var(--color-neutral)" } }, ".toast-neutral .toast-icon": { "@layer components": { color: "var(--color-neutral)" } }, ".toast-base": { "@layer components": { borderColor: "var(--color-base-content)" } }, ".toast-base .toast-icon": { "@layer components": { color: "var(--color-base-content)" } }, ".toast-filled.toast-info": { "@layer components": { backgroundColor: "var(--color-info-container)", borderColor: "transparent", color: "var(--color-on-info-container)" } }, ".toast-filled.toast-success": { "@layer components": { backgroundColor: "var(--color-success-container)", borderColor: "transparent", color: "var(--color-on-success-container)" } }, ".toast-filled.toast-warning": { "@layer components": { backgroundColor: "var(--color-warning-container)", borderColor: "transparent", color: "var(--color-on-warning-container)" } }, ".toast-filled.toast-error": { "@layer components": { backgroundColor: "var(--color-error-container)", borderColor: "transparent", color: "var(--color-on-error-container)" } }, ".toast-filled.toast-primary": { "@layer components": { backgroundColor: "var(--color-primary-container)", borderColor: "transparent", color: "var(--color-on-primary-container)" } }, ".toast-filled.toast-secondary": { "@layer components": { backgroundColor: "var(--color-secondary-container)", borderColor: "transparent", color: "var(--color-on-secondary-container)" } }, ".toast-filled.toast-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", borderColor: "transparent", color: "var(--color-on-tertiary-container)" } }, ".toast-filled.toast-accent": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", borderColor: "transparent", color: "var(--color-on-surface)" } }, ".toast-filled.toast-neutral": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", borderColor: "transparent", color: "var(--color-on-surface)" } }, ".toast-filled.toast-base": { "@layer components": { backgroundColor: "var(--color-base-200)", borderColor: "transparent", color: "var(--color-base-content)" } }, ".toast-filled .toast-title, \n  .toast-filled .toast-message": { "@layer components": { color: "inherit" } }, ".toast-ghost": { "@layer components": { backgroundColor: "transparent", borderColor: "transparent" } }, ".toast-ghost.toast-primary": { "@layer components": { color: "var(--color-primary)" } }, ".toast-ghost.toast-secondary": { "@layer components": { color: "var(--color-secondary)" } }, ".toast-ghost.toast-tertiary": { "@layer components": { color: "var(--color-tertiary)" } }, ".toast-ghost.toast-info": { "@layer components": { color: "var(--color-info)" } }, ".toast-ghost.toast-success": { "@layer components": { color: "var(--color-success)" } }, ".toast-ghost.toast-warning": { "@layer components": { color: "var(--color-warning)" } }, ".toast-ghost.toast-error": { "@layer components": { color: "var(--color-error)" } }, ".toast-ghost.toast-accent": { "@layer components": { color: "var(--color-accent)" } }, ".toast-ghost.toast-neutral": { "@layer components": { color: "var(--color-neutral)" } }, ".toast-ghost.toast-base": { "@layer components": { color: "var(--color-base-content)" } }, ".toast-ghost .toast-title, \n  .toast-ghost .toast-message": { "@layer components": { color: "inherit" } }, ".toast-progress": [{ "@layer components": { position: "absolute", bottom: "0", left: "0", height: "3px", backgroundColor: "currentColor", borderRadius: "0 0 var(--radius-md) var(--radius-md)", animation: "toast-progress linear forwards" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { animation: "none" } } }], "@keyframes toast-progress": { from: { width: "100%" }, to: { width: "0%" } }, ".tooltip[popover]": [{ "@layer components": { "--tooltip-bg": "var(--color-on-surface)", "--tooltip-fg": "var(--color-surface)", position: "absolute", inset: "auto", zIndex: 1000, margin: "0.5rem", padding: "0.375rem 0.75rem", fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", whiteSpace: "nowrap", backgroundColor: "var(--tooltip-bg)", color: "var(--tooltip-fg)", border: "none", borderRadius: "var(--radius-xs)", boxShadow: "var(--shadow-md)", pointerEvents: "none", opacity: 0, transform: "scale(0.95)", overflow: "visible", positionArea: "top", positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline", transition: `opacity 150ms ease-out,
       transform 150ms ease-out,
       overlay 150ms ease-out allow-discrete,
-      display 150ms ease-out allow-discrete` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".tooltip[popover]:popover-open": [{ "@layer components": { opacity: 1, transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".tooltip-top[popover]": { "@layer components": { positionArea: "top" } }, ".tooltip-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".tooltip-left[popover]": { "@layer components": { positionArea: "left" } }, ".tooltip-right[popover]": { "@layer components": { positionArea: "right" } }, ".tooltip[popover]::before": { "@layer components": { content: "''", position: "absolute", width: "0", height: "0", border: "0.375rem solid transparent" } }, ".tooltip-top[popover]::before, \n  .tooltip[popover]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before": { "@layer components": { top: "100%", left: "50%", transform: "translateX(-50%)", borderTopColor: "var(--tooltip-bg)" } }, ".tooltip-bottom[popover]::before": { "@layer components": { bottom: "100%", top: "auto", left: "50%", transform: "translateX(-50%)", borderBottomColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-left[popover]::before": { "@layer components": { left: "100%", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderLeftColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-right[popover]::before": { "@layer components": { right: "100%", left: "auto", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderRightColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-light[popover]": { "@layer components": { "--tooltip-bg": "var(--color-surface)", "--tooltip-fg": "var(--color-on-surface)", border: "1px solid var(--color-outline)" } }, ".tooltip-primary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-primary)", "--tooltip-fg": "var(--color-primary-content)" } }, ".tooltip-secondary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-secondary)", "--tooltip-fg": "var(--color-secondary-content)" } }, ".tooltip-tertiary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-tertiary)", "--tooltip-fg": "var(--color-tertiary-content)" } }, ".tooltip-info[popover]": { "@layer components": { "--tooltip-bg": "var(--color-info)", "--tooltip-fg": "var(--color-info-content)" } }, ".tooltip-success[popover]": { "@layer components": { "--tooltip-bg": "var(--color-success)", "--tooltip-fg": "var(--color-success-content)" } }, ".tooltip-warning[popover]": { "@layer components": { "--tooltip-bg": "var(--color-warning)", "--tooltip-fg": "var(--color-warning-content)" } }, ".tooltip-error[popover]": { "@layer components": { "--tooltip-bg": "var(--color-error)", "--tooltip-fg": "var(--color-error-content)" } }, ".tooltip-accent[popover]": { "@layer components": { "--tooltip-bg": "var(--color-accent)", "--tooltip-fg": "var(--color-accent-content)" } }, ".tooltip-neutral[popover]": { "@layer components": { "--tooltip-bg": "var(--color-neutral)", "--tooltip-fg": "var(--color-neutral-content)" } }, ".tooltip-base[popover]": { "@layer components": { "--tooltip-bg": "var(--color-base-100)", "--tooltip-fg": "var(--color-base-content)" } }, ".tooltip-multiline[popover]": { "@layer components": { whiteSpace: "normal", maxWidth: "16rem", textAlign: "center" } }, ".tooltip-rich[popover]": { "@layer components": { padding: "0.75rem 1rem", maxWidth: "20rem", whiteSpace: "normal", textAlign: "left" } }, ".tooltip-rich-title": { "@layer components": { fontSize: "0.8125rem", fontWeight: 600, marginBottom: "0.25rem" } }, ".tooltip-rich-description": { "@layer components": { fontSize: "0.75rem", fontWeight: 400, opacity: 0.9 } }, ".tooltip-delay": { "@layer components": { interestDelay: "300ms" } }, ".tooltip-delay-long": { "@layer components": { interestDelay: "500ms" } }, ".tooltip-interactive[popover]": { "@layer components": { pointerEvents: "auto" } }, ".appbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", minHeight: "4rem", padding: "0 1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-sm)" } }, { "@layer components": { "@media (max-width: 640px)": { padding: "0 0.5rem" } } }], ".appbar-static": { "@layer components": { position: "static" } }, ".appbar-fixed": { "@layer components": { position: "fixed", top: "0", left: "0", right: "0", zIndex: 1000 } }, ".appbar-sticky": { "@layer components": { position: "sticky", top: "0", zIndex: 1000 } }, ".appbar-top": { "@layer components": { top: "0" } }, ".appbar-bottom": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", top: "auto", zIndex: 1000 } }, ".appbar-elevated": { "@layer components": { boxShadow: "var(--shadow-sm)" } }, ".appbar-flat": { "@layer components": { boxShadow: "none" } }, ".appbar-bordered": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)", boxShadow: "none" } }, ".appbar-transparent": { "@layer components": { backgroundColor: "transparent", boxShadow: "none" } }, ".appbar-blur": { "@layer components": { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } }, ".appbar-nav": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-nav:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-nav:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-title": [{ "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, { "@layer components": { "@media (max-width: 640px)": { fontSize: "1rem" } } }], ".appbar-subtitle": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-title-group": { "@layer components": { flex: 1, minWidth: "0" } }, ".appbar-title-group .appbar-title": { "@layer components": { fontSize: "1rem", lineHeight: "1.25rem" } }, ".appbar-actions": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-action": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".appbar-action:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".appbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-brand": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", flexShrink: 0 } }, ".appbar-logo": { "@layer components": { height: "2rem", width: "auto" } }, ".appbar-sm": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-sm .appbar-title": { "@layer components": { fontSize: "1rem" } }, ".appbar-lg": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-lg .appbar-title": { "@layer components": { fontSize: "1.5rem" } }, ".appbar-compact": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-compact .appbar-title, \n  .appbar-compact .appbar-heading": { "@layer components": { fontSize: "1rem", lineHeight: "1.5rem" } }, ".appbar-compact .appbar-nav, \n  .appbar-compact .appbar-action, \n  .appbar-compact .appbar-back": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-comfortable": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-comfortable .appbar-title, \n  .appbar-comfortable .appbar-heading": { "@layer components": { fontSize: "1.5rem", lineHeight: "2rem" } }, ".appbar-leading": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-trailing": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexGrow: 1, justifyContent: "flex-end", marginLeft: "auto" } }, ".appbar-heading": { "@layer components": { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", margin: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-back": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-back:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar .appbar-search, \n  input.appbar-search": { "@layer components": { flex: 1, maxWidth: "32rem", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar .appbar-search:focus, \n  input.appbar-search:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar .appbar-search::placeholder, \n  input.appbar-search::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav, \n  .appbar-primary .appbar-action, \n  .appbar-primary .appbar-back": { "@layer components": { color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav:hover, \n  .appbar-primary .appbar-action:hover, \n  .appbar-primary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".appbar-primary .appbar-subtitle": { "@layer components": { color: "var(--color-primary-content)", opacity: 0.8 } }, ".appbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav, \n  .appbar-secondary .appbar-action, \n  .appbar-secondary .appbar-back": { "@layer components": { color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav:hover, \n  .appbar-secondary .appbar-action:hover, \n  .appbar-secondary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".appbar-secondary .appbar-subtitle": { "@layer components": { color: "var(--color-secondary-content)", opacity: 0.8 } }, ".appbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav, \n  .appbar-tertiary .appbar-action, \n  .appbar-tertiary .appbar-back": { "@layer components": { color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav:hover, \n  .appbar-tertiary .appbar-action:hover, \n  .appbar-tertiary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".appbar-tertiary .appbar-subtitle": { "@layer components": { color: "var(--color-tertiary-content)", opacity: 0.8 } }, ".appbar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav, \n  .appbar-accent .appbar-action, \n  .appbar-accent .appbar-back": { "@layer components": { color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav:hover, \n  .appbar-accent .appbar-action:hover, \n  .appbar-accent .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-accent)" } }, ".appbar-accent .appbar-subtitle": { "@layer components": { color: "var(--color-accent-content)", opacity: 0.8 } }, ".appbar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav, \n  .appbar-neutral .appbar-action, \n  .appbar-neutral .appbar-back": { "@layer components": { color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav:hover, \n  .appbar-neutral .appbar-action:hover, \n  .appbar-neutral .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-neutral)" } }, ".appbar-neutral .appbar-subtitle": { "@layer components": { color: "var(--color-neutral-content)", opacity: 0.8 } }, ".appbar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav, \n  .appbar-base .appbar-action, \n  .appbar-base .appbar-back": { "@layer components": { color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav:hover, \n  .appbar-base .appbar-action:hover, \n  .appbar-base .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-subtitle": { "@layer components": { color: "var(--color-base-content)", opacity: 0.8 } }, ".appbar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav, \n  .appbar-info .appbar-action, \n  .appbar-info .appbar-back": { "@layer components": { color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav:hover, \n  .appbar-info .appbar-action:hover, \n  .appbar-info .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".appbar-info .appbar-subtitle": { "@layer components": { color: "var(--color-info-content)", opacity: 0.8 } }, ".appbar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav, \n  .appbar-success .appbar-action, \n  .appbar-success .appbar-back": { "@layer components": { color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav:hover, \n  .appbar-success .appbar-action:hover, \n  .appbar-success .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".appbar-success .appbar-subtitle": { "@layer components": { color: "var(--color-success-content)", opacity: 0.8 } }, ".appbar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav, \n  .appbar-warning .appbar-action, \n  .appbar-warning .appbar-back": { "@layer components": { color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav:hover, \n  .appbar-warning .appbar-action:hover, \n  .appbar-warning .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".appbar-warning .appbar-subtitle": { "@layer components": { color: "var(--color-warning-content)", opacity: 0.8 } }, ".appbar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav, \n  .appbar-error .appbar-action, \n  .appbar-error .appbar-back": { "@layer components": { color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav:hover, \n  .appbar-error .appbar-action:hover, \n  .appbar-error .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".appbar-error .appbar-subtitle": { "@layer components": { color: "var(--color-error-content)", opacity: 0.8 } }, ".appbar-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".appbar-surface-container": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-surface-container-low": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".appbar-surface-container-high": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-surface-container-highest": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)" } }, ".appbar-center": { "@layer components": { justifyContent: "space-between" } }, ".appbar-center .appbar-title": { "@layer components": { position: "absolute", left: "50%", transform: "translateX(-50%)", flex: "none" } }, ".appbar-dense": { "@layer components": { minHeight: "3rem", padding: "0 0.5rem" } }, ".appbar-dense .appbar-nav, \n  .appbar-dense .appbar-action": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-prominent": { "@layer components": { flexDirection: "column", alignItems: "flex-start", minHeight: "8rem", padding: "1rem" } }, ".appbar-prominent .appbar-row": { "@layer components": { display: "flex", alignItems: "center", width: "100%", gap: "0.5rem" } }, ".appbar-prominent .appbar-title": { "@layer components": { fontSize: "2rem", fontWeight: 400, marginTop: "auto", paddingBottom: "0.5rem" } }, ".appbar-search": [{ "@layer components": { flex: 1, maxWidth: "32rem", margin: "0 1rem" } }, { "@layer components": { "@media (max-width: 640px)": { margin: "0 0.5rem" } } }], ".appbar-search-input": { "@layer components": { width: "100%", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar-search-input:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-nav, \n    .appbar-action, \n    .appbar-search-input": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".divider": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider::before, \n  .divider::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-vertical": { "@layer components": { flexDirection: "column", width: "auto", margin: "0 1rem", alignSelf: "stretch" } }, ".divider-vertical::before, \n  .divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-thin::before, \n  .divider-thin::after": { "@layer components": { height: "1px" } }, ".divider-thin.divider-vertical::before, \n  .divider-thin.divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-medium::before, \n  .divider-medium::after": { "@layer components": { height: "2px" } }, ".divider-medium.divider-vertical::before, \n  .divider-medium.divider-vertical::after": { "@layer components": { width: "2px", height: "unset" } }, ".divider-thick::before, \n  .divider-thick::after": { "@layer components": { height: "4px" } }, ".divider-thick.divider-vertical::before, \n  .divider-thick.divider-vertical::after": { "@layer components": { width: "4px", height: "unset" } }, ".divider-dashed::before, \n  .divider-dashed::after": { "@layer components": { backgroundColor: "transparent", backgroundImage: `linear-gradient(
+      display 150ms ease-out allow-discrete` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".tooltip[popover]:popover-open": [{ "@layer components": { opacity: 1, transform: "scale(1)" } }, { "@layer components": { "@starting-style": { opacity: 0, transform: "scale(0.95)" } } }], ".tooltip-top[popover]": { "@layer components": { positionArea: "top" } }, ".tooltip-bottom[popover]": { "@layer components": { positionArea: "bottom" } }, ".tooltip-left[popover]": { "@layer components": { positionArea: "left" } }, ".tooltip-right[popover]": { "@layer components": { positionArea: "right" } }, ".tooltip[popover]::before": { "@layer components": { content: "''", position: "absolute", width: "0", height: "0", border: "0.375rem solid transparent" } }, ".tooltip-top[popover]::before, \n  .tooltip[popover]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before": { "@layer components": { top: "100%", left: "50%", transform: "translateX(-50%)", borderTopColor: "var(--tooltip-bg)" } }, ".tooltip-bottom[popover]::before": { "@layer components": { bottom: "100%", top: "auto", left: "50%", transform: "translateX(-50%)", borderBottomColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-left[popover]::before": { "@layer components": { left: "100%", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderLeftColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-right[popover]::before": { "@layer components": { right: "100%", left: "auto", top: "50%", bottom: "auto", transform: "translateY(-50%)", borderRightColor: "var(--tooltip-bg)", borderTopColor: "transparent" } }, ".tooltip-light[popover]": { "@layer components": { "--tooltip-bg": "var(--color-surface)", "--tooltip-fg": "var(--color-on-surface)", border: "1px solid var(--color-outline)" } }, ".tooltip-primary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-primary)", "--tooltip-fg": "var(--color-primary-content)" } }, ".tooltip-secondary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-secondary)", "--tooltip-fg": "var(--color-secondary-content)" } }, ".tooltip-tertiary[popover]": { "@layer components": { "--tooltip-bg": "var(--color-tertiary)", "--tooltip-fg": "var(--color-tertiary-content)" } }, ".tooltip-info[popover]": { "@layer components": { "--tooltip-bg": "var(--color-info)", "--tooltip-fg": "var(--color-info-content)" } }, ".tooltip-success[popover]": { "@layer components": { "--tooltip-bg": "var(--color-success)", "--tooltip-fg": "var(--color-success-content)" } }, ".tooltip-warning[popover]": { "@layer components": { "--tooltip-bg": "var(--color-warning)", "--tooltip-fg": "var(--color-warning-content)" } }, ".tooltip-error[popover]": { "@layer components": { "--tooltip-bg": "var(--color-error)", "--tooltip-fg": "var(--color-error-content)" } }, ".tooltip-accent[popover]": { "@layer components": { "--tooltip-bg": "var(--color-accent)", "--tooltip-fg": "var(--color-accent-content)" } }, ".tooltip-neutral[popover]": { "@layer components": { "--tooltip-bg": "var(--color-neutral)", "--tooltip-fg": "var(--color-neutral-content)" } }, ".tooltip-base[popover]": { "@layer components": { "--tooltip-bg": "var(--color-base-100)", "--tooltip-fg": "var(--color-base-content)" } }, ".tooltip-multiline[popover]": { "@layer components": { whiteSpace: "normal", maxWidth: "16rem", textAlign: "center" } }, ".tooltip-rich[popover]": { "@layer components": { padding: "0.75rem 1rem", maxWidth: "20rem", whiteSpace: "normal", textAlign: "left" } }, ".tooltip-rich-title": { "@layer components": { fontSize: "0.8125rem", fontWeight: 600, marginBottom: "0.25rem" } }, ".tooltip-rich-description": { "@layer components": { fontSize: "0.75rem", fontWeight: 400, opacity: 0.9 } }, ".tooltip-delay": { "@layer components": { interestDelay: "300ms" } }, ".tooltip-delay-long": { "@layer components": { interestDelay: "500ms" } }, ".tooltip-interactive[popover]": { "@layer components": { pointerEvents: "auto" } }, ".appbar": [{ "@layer components": { display: "flex", alignItems: "center", gap: "0.5rem", width: "100%", minHeight: "4rem", padding: "0 1rem", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)", boxShadow: "var(--shadow-sm)" } }, { "@layer components": { "@media (max-width: 640px)": { padding: "0 0.5rem" } } }], ".appbar-static": { "@layer components": { position: "static" } }, ".appbar-fixed": { "@layer components": { position: "fixed", top: "0", left: "0", right: "0", zIndex: 1000 } }, ".appbar-sticky": { "@layer components": { position: "sticky", top: "0", zIndex: 1000 } }, ".appbar-top": { "@layer components": { top: "0" } }, ".appbar-bottom": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", top: "auto", zIndex: 1000 } }, ".appbar-elevated": { "@layer components": { boxShadow: "var(--shadow-sm)" } }, ".appbar-flat": { "@layer components": { boxShadow: "none" } }, ".appbar-bordered": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)", boxShadow: "none" } }, ".appbar-transparent": { "@layer components": { backgroundColor: "transparent", boxShadow: "none" } }, ".appbar-blur": { "@layer components": { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } }, ".appbar-nav": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-nav:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-nav:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-title": [{ "@layer components": { flex: 1, fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, { "@layer components": { "@media (max-width: 640px)": { fontSize: "1rem" } } }], ".appbar-subtitle": { "@layer components": { fontSize: "0.75rem", color: "var(--color-on-surface-variant)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-title-group": { "@layer components": { flex: 1, minWidth: "0" } }, ".appbar-title-group .appbar-title": { "@layer components": { fontSize: "1rem", lineHeight: "1.25rem" } }, ".appbar-actions": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-action": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out, color 150ms ease-in-out" } }, ".appbar-action:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)", color: "var(--color-on-surface)" } }, ".appbar-action:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar-brand": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", flexShrink: 0 } }, ".appbar-logo": { "@layer components": { height: "2rem", width: "auto" } }, ".appbar-sm": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-sm .appbar-title": { "@layer components": { fontSize: "1rem" } }, ".appbar-lg": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-lg .appbar-title": { "@layer components": { fontSize: "1.5rem" } }, ".appbar-compact": { "@layer components": { minHeight: "3rem", padding: "0 0.75rem" } }, ".appbar-compact .appbar-title, \n  .appbar-compact .appbar-heading": { "@layer components": { fontSize: "1rem", lineHeight: "1.5rem" } }, ".appbar-compact .appbar-nav, \n  .appbar-compact .appbar-action, \n  .appbar-compact .appbar-back": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-comfortable": { "@layer components": { minHeight: "5rem", padding: "0 1.5rem" } }, ".appbar-comfortable .appbar-title, \n  .appbar-comfortable .appbar-heading": { "@layer components": { fontSize: "1.5rem", lineHeight: "2rem" } }, ".appbar-leading": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexShrink: 0 } }, ".appbar-trailing": { "@layer components": { display: "flex", alignItems: "center", gap: "0.25rem", flexGrow: 1, justifyContent: "flex-end", marginLeft: "auto" } }, ".appbar-heading": { "@layer components": { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.75rem", margin: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".appbar-back": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "2.5rem", height: "2.5rem", color: "var(--color-on-surface)", backgroundColor: "transparent", border: "none", borderRadius: "var(--radius-full)", cursor: "pointer", transition: "background-color 150ms ease-in-out", flexShrink: 0 } }, ".appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-back:focus-visible": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".appbar .appbar-search, \n  input.appbar-search": { "@layer components": { flex: 1, maxWidth: "32rem", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar .appbar-search:focus, \n  input.appbar-search:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar .appbar-search::placeholder, \n  input.appbar-search::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-primary": { "@layer components": { backgroundColor: "var(--color-primary)", color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav, \n  .appbar-primary .appbar-action, \n  .appbar-primary .appbar-back": { "@layer components": { color: "var(--color-primary-content)" } }, ".appbar-primary .appbar-nav:hover, \n  .appbar-primary .appbar-action:hover, \n  .appbar-primary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, ".appbar-primary .appbar-subtitle": { "@layer components": { color: "var(--color-primary-content)", opacity: 0.8 } }, ".appbar-secondary": { "@layer components": { backgroundColor: "var(--color-secondary)", color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav, \n  .appbar-secondary .appbar-action, \n  .appbar-secondary .appbar-back": { "@layer components": { color: "var(--color-secondary-content)" } }, ".appbar-secondary .appbar-nav:hover, \n  .appbar-secondary .appbar-action:hover, \n  .appbar-secondary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-secondary-container)", color: "var(--color-on-secondary-container)" } }, ".appbar-secondary .appbar-subtitle": { "@layer components": { color: "var(--color-secondary-content)", opacity: 0.8 } }, ".appbar-tertiary": { "@layer components": { backgroundColor: "var(--color-tertiary)", color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav, \n  .appbar-tertiary .appbar-action, \n  .appbar-tertiary .appbar-back": { "@layer components": { color: "var(--color-tertiary-content)" } }, ".appbar-tertiary .appbar-nav:hover, \n  .appbar-tertiary .appbar-action:hover, \n  .appbar-tertiary .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-tertiary-container)", color: "var(--color-on-tertiary-container)" } }, ".appbar-tertiary .appbar-subtitle": { "@layer components": { color: "var(--color-tertiary-content)", opacity: 0.8 } }, ".appbar-accent": { "@layer components": { backgroundColor: "var(--color-accent)", color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav, \n  .appbar-accent .appbar-action, \n  .appbar-accent .appbar-back": { "@layer components": { color: "var(--color-accent-content)" } }, ".appbar-accent .appbar-nav:hover, \n  .appbar-accent .appbar-action:hover, \n  .appbar-accent .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-accent) 15%, var(--color-surface))", color: "var(--color-accent)" } }, ".appbar-accent .appbar-subtitle": { "@layer components": { color: "var(--color-accent-content)", opacity: 0.8 } }, ".appbar-neutral": { "@layer components": { backgroundColor: "var(--color-neutral)", color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav, \n  .appbar-neutral .appbar-action, \n  .appbar-neutral .appbar-back": { "@layer components": { color: "var(--color-neutral-content)" } }, ".appbar-neutral .appbar-nav:hover, \n  .appbar-neutral .appbar-action:hover, \n  .appbar-neutral .appbar-back:hover": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface))", color: "var(--color-neutral)" } }, ".appbar-neutral .appbar-subtitle": { "@layer components": { color: "var(--color-neutral-content)", opacity: 0.8 } }, ".appbar-base": { "@layer components": { backgroundColor: "var(--color-base-100)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav, \n  .appbar-base .appbar-action, \n  .appbar-base .appbar-back": { "@layer components": { color: "var(--color-base-content)" } }, ".appbar-base .appbar-nav:hover, \n  .appbar-base .appbar-action:hover, \n  .appbar-base .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-base-200)", color: "var(--color-base-content)" } }, ".appbar-base .appbar-subtitle": { "@layer components": { color: "var(--color-base-content)", opacity: 0.8 } }, ".appbar-info": { "@layer components": { backgroundColor: "var(--color-info)", color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav, \n  .appbar-info .appbar-action, \n  .appbar-info .appbar-back": { "@layer components": { color: "var(--color-info-content)" } }, ".appbar-info .appbar-nav:hover, \n  .appbar-info .appbar-action:hover, \n  .appbar-info .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-info-container)", color: "var(--color-on-info-container)" } }, ".appbar-info .appbar-subtitle": { "@layer components": { color: "var(--color-info-content)", opacity: 0.8 } }, ".appbar-success": { "@layer components": { backgroundColor: "var(--color-success)", color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav, \n  .appbar-success .appbar-action, \n  .appbar-success .appbar-back": { "@layer components": { color: "var(--color-success-content)" } }, ".appbar-success .appbar-nav:hover, \n  .appbar-success .appbar-action:hover, \n  .appbar-success .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-success-container)", color: "var(--color-on-success-container)" } }, ".appbar-success .appbar-subtitle": { "@layer components": { color: "var(--color-success-content)", opacity: 0.8 } }, ".appbar-warning": { "@layer components": { backgroundColor: "var(--color-warning)", color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav, \n  .appbar-warning .appbar-action, \n  .appbar-warning .appbar-back": { "@layer components": { color: "var(--color-warning-content)" } }, ".appbar-warning .appbar-nav:hover, \n  .appbar-warning .appbar-action:hover, \n  .appbar-warning .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-warning-container)", color: "var(--color-on-warning-container)" } }, ".appbar-warning .appbar-subtitle": { "@layer components": { color: "var(--color-warning-content)", opacity: 0.8 } }, ".appbar-error": { "@layer components": { backgroundColor: "var(--color-error)", color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav, \n  .appbar-error .appbar-action, \n  .appbar-error .appbar-back": { "@layer components": { color: "var(--color-error-content)" } }, ".appbar-error .appbar-nav:hover, \n  .appbar-error .appbar-action:hover, \n  .appbar-error .appbar-back:hover": { "@layer components": { backgroundColor: "var(--color-error-container)", color: "var(--color-on-error-container)" } }, ".appbar-error .appbar-subtitle": { "@layer components": { color: "var(--color-error-content)", opacity: 0.8 } }, ".appbar-surface": { "@layer components": { backgroundColor: "var(--color-surface)" } }, ".appbar-surface-container": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".appbar-surface-container-low": { "@layer components": { backgroundColor: "var(--color-surface-container-low)" } }, ".appbar-surface-container-high": { "@layer components": { backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-surface-container-highest": { "@layer components": { backgroundColor: "var(--color-surface-container-highest)" } }, ".appbar-center": { "@layer components": { justifyContent: "space-between" } }, ".appbar-center .appbar-title": { "@layer components": { position: "absolute", left: "50%", transform: "translateX(-50%)", flex: "none" } }, ".appbar-dense": { "@layer components": { minHeight: "3rem", padding: "0 0.5rem" } }, ".appbar-dense .appbar-nav, \n  .appbar-dense .appbar-action": { "@layer components": { width: "2rem", height: "2rem" } }, ".appbar-prominent": { "@layer components": { flexDirection: "column", alignItems: "flex-start", minHeight: "8rem", padding: "1rem" } }, ".appbar-prominent .appbar-row": { "@layer components": { display: "flex", alignItems: "center", width: "100%", gap: "0.5rem" } }, ".appbar-prominent .appbar-title": { "@layer components": { fontSize: "2rem", fontWeight: 400, marginTop: "auto", paddingBottom: "0.5rem" } }, ".appbar-search": [{ "@layer components": { flex: 1, maxWidth: "32rem", margin: "0 1rem" } }, { "@layer components": { "@media (max-width: 640px)": { margin: "0 0.5rem" } } }], ".appbar-search-input": { "@layer components": { width: "100%", padding: "0.5rem 1rem", fontSize: "0.875rem", color: "var(--color-on-surface)", backgroundColor: "var(--color-surface-container)", border: "none", borderRadius: "var(--radius-full)", transition: "background-color 150ms ease-in-out" } }, ".appbar-search-input:focus": { "@layer components": { outline: "none", backgroundColor: "var(--color-surface-container-high)" } }, ".appbar-search-input::placeholder": { "@layer components": { color: "var(--color-on-surface-variant)" } }, ".appbar-nav, \n    .appbar-action, \n    .appbar-search-input": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".console-page": { "@layer components": { "--console-page-sidebar-width": "17.5rem", "--console-page-sidebar-compact-width": "5rem", containerType: "inline-size", containerName: "console-page", width: "100%", minWidth: "0", minHeight: "var(--console-page-min-height, 100dvh)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".console-page-frame": [{ "@layer components": { display: "grid", minHeight: "inherit", gridTemplateAreas: `"appbar"
+      "main"`, gridTemplateColumns: "minmax(0, 1fr)", gridTemplateRows: "auto minmax(0, 1fr)", transition: "grid-template-columns 240ms ease-out" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { gridTemplateAreas: `"appbar appbar"
+        "sidebar main"`, gridTemplateColumns: "var(--console-page-sidebar-width) minmax(0, 1fr)" } } }], ".console-page-appbar": { "@layer components": { gridArea: "appbar", zIndex: 20 } }, ".console-page-sidebar": [{ "@layer components": { display: "none", gridArea: "sidebar", minWidth: "0", overflow: "hidden", backgroundColor: "var(--color-surface-container-low)", borderInlineEnd: "1px solid var(--color-outline-variant)", transition: `opacity 160ms ease-out,
+      visibility 160ms ease-out` } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "flex", flexDirection: "column" } } }], ".console-page-sidebar-header, \n  .console-page-sidebar-footer": { "@layer components": { display: "flex", alignItems: "center", gap: "0.75rem", minHeight: "4rem", padding: "0.75rem 1rem", flexShrink: 0 } }, ".console-page-sidebar-header": { "@layer components": { borderBottom: "1px solid var(--color-outline-variant)" } }, ".console-page-sidebar-body": { "@layer components": { flex: 1, minHeight: "0", overflowY: "auto", overflowX: "hidden", paddingBlock: "0.5rem" } }, ".console-page-sidebar-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)" } }, ".console-page-main": { "@layer components": { gridArea: "main", minWidth: "0", overflow: "auto", padding: "clamp(1rem, 4cqi, 2.5rem)", backgroundColor: "var(--color-surface)" } }, ".console-page-nav-label": { "@layer components": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, ".console-page-sidebar-toggle": [{ "@layer components": { display: "none" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "inline-flex" } } }], ".console-page-menu-trigger": [{ "@layer components": { display: "inline-flex" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }], ".console-page-mobile-menu": [{ "@layer components": { maxWidth: "min(20rem, calc(100cqi - 2rem))" } }, { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }], ".console-page-sidebar-compact .console-page-frame": { "@layer components": { "@container console-page (min-width: 48rem)": { gridTemplateColumns: "var(--console-page-sidebar-compact-width) minmax(0, 1fr)" } } }, ".console-page-sidebar-compact .console-page-nav-label": { "@layer components": { "@container console-page (min-width: 48rem)": { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: "0" } } }, ".console-page-sidebar-compact .console-page-sidebar-header, \n    .console-page-sidebar-compact .console-page-sidebar-footer": { "@layer components": { "@container console-page (min-width: 48rem)": { justifyContent: "center", paddingInline: "0.75rem" } } }, ".console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu li > a, .nested-menu li > button, .nested-menu summary)": { "@layer components": { "@container console-page (min-width: 48rem)": { justifyContent: "center", paddingInline: "0.75rem" } } }, ".console-page-sidebar-compact .console-page-sidebar-body .drawer-item": { "@layer components": { "@container console-page (min-width: 48rem)": { justifyContent: "center", paddingInline: "0.75rem" } } }, ".console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu-title, details > ul, summary::after)": { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }, ".console-page-sidebar-hidden .console-page-frame": { "@layer components": { "@container console-page (min-width: 48rem)": { gridTemplateAreas: `"appbar"
+        "main"`, gridTemplateColumns: "minmax(0, 1fr)" } } }, ".console-page-sidebar-hidden .console-page-sidebar": { "@layer components": { "@container console-page (min-width: 48rem)": { display: "none" } } }, ".console-page-frame, \n    .console-page-sidebar": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".divider": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider::before, \n  .divider::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-vertical": { "@layer components": { flexDirection: "column", width: "auto", margin: "0 1rem", alignSelf: "stretch" } }, ".divider-vertical::before, \n  .divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-thin::before, \n  .divider-thin::after": { "@layer components": { height: "1px" } }, ".divider-thin.divider-vertical::before, \n  .divider-thin.divider-vertical::after": { "@layer components": { width: "1px", height: "unset" } }, ".divider-medium::before, \n  .divider-medium::after": { "@layer components": { height: "2px" } }, ".divider-medium.divider-vertical::before, \n  .divider-medium.divider-vertical::after": { "@layer components": { width: "2px", height: "unset" } }, ".divider-thick::before, \n  .divider-thick::after": { "@layer components": { height: "4px" } }, ".divider-thick.divider-vertical::before, \n  .divider-thick.divider-vertical::after": { "@layer components": { width: "4px", height: "unset" } }, ".divider-dashed::before, \n  .divider-dashed::after": { "@layer components": { backgroundColor: "transparent", backgroundImage: `linear-gradient(
       to right,
       var(--color-outline-variant) 50%,
       transparent 50%
@@ -188,7 +192,7 @@ var componentStyles = { ".btn": [{ "@layer components": { "--btn-p": "1.25rem",
       var(--color-outline-variant) 20%,
       var(--color-outline-variant) 80%,
       transparent
-    )` } }, ".divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-compact": { "@layer components": { margin: "0.25rem 0" } }, ".divider-compact:not(:empty)": { "@layer components": { gap: "0.5rem" } }, ".divider-compact.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-comfortable": { "@layer components": { margin: "1.5rem 0" } }, ".divider-comfortable.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-spacious": { "@layer components": { margin: "2rem 0" } }, ".divider-spacious:not(:empty)": { "@layer components": { gap: "1.5rem" } }, ".divider-spacious.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-none": { "@layer components": { margin: "0" } }, ".divider-xs": { "@layer components": { margin: "0.25rem 0" } }, ".divider-xs.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-sm": { "@layer components": { margin: "0.5rem 0" } }, ".divider-sm.divider-vertical": { "@layer components": { margin: "0 0.5rem" } }, ".divider-lg": { "@layer components": { margin: "1.5rem 0" } }, ".divider-lg.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-xl": { "@layer components": { margin: "2rem 0" } }, ".divider-xl.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-inset": { "@layer components": { paddingLeft: "4rem" } }, ".divider-inset-right": { "@layer components": { paddingRight: "4rem" } }, ".divider-inset-both": { "@layer components": { paddingLeft: "4rem", paddingRight: "4rem" } }, ".divider-list": { "@layer components": { margin: "0", paddingLeft: "1rem" } }, ".divider-card": { "@layer components": { margin: "0", marginLeft: "-1rem", marginRight: "-1rem" } }, ".divider-text": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider-text:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider-text::before, \n  .divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-text-left::before, \n  .divider-text-left.divider-text::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-text-right::after, \n  .divider-text-right.divider-text::after": { "@layer components": { flex: "0 0 2rem" } }, ".bottom-nav": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1000, display: "flex", alignItems: "stretch", justifyContent: "space-around", minHeight: "5rem", paddingBottom: "env(safe-area-inset-bottom, 0)", backgroundColor: "var(--color-surface)", boxShadow: "0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, minWidth: "4rem", maxWidth: "10rem", padding: "0.75rem 0.25rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "color 150ms ease-in-out", textDecoration: "none", gap: "0.25rem" } }, ".bottom-nav-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-item:focus-visible": { "@layer components": { outline: "none" } }, ".bottom-nav-item:focus-visible .bottom-nav-indicator": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottom-nav-item.active": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-indicator": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "4rem", height: "2rem", borderRadius: "var(--radius-lg)", transition: "background-color 150ms ease-in-out" } }, ".bottom-nav-item:hover .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".bottom-nav-icon": { "@layer components": { fontSize: "1.5rem", lineHeight: 1, transition: "font-size 150ms ease-in-out" } }, ".bottom-nav-label": { "@layer components": { fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } }, ".bottom-nav-item.active .bottom-nav-label": { "@layer components": { fontWeight: 600 } }, ".bottom-nav-badge": { "@layer components": { position: "absolute", top: "0", right: "0.5rem", minWidth: "1rem", height: "1rem", padding: "0 0.25rem", fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", color: "var(--color-error-content)", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", textAlign: "center" } }, ".bottom-nav-badge-dot": { "@layer components": { minWidth: "0.5rem", width: "0.5rem", height: "0.5rem", padding: "0", top: "0.125rem", right: "0.75rem" } }, ".bottom-nav-elevated": { "@layer components": { boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-bordered": { "@layer components": { boxShadow: "none", borderTop: "1px solid var(--color-outline-variant)" } }, ".bottom-nav-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-primary .bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".bottom-nav-primary .bottom-nav-item.active": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".bottom-nav-icons-only .bottom-nav-label": { "@layer components": { display: "none" } }, ".bottom-nav-icons-only .bottom-nav-item": { "@layer components": { padding: "1rem 0.25rem" } }, ".bottom-nav-labels-active .bottom-nav-label": { "@layer components": { opacity: 0, maxHeight: "0", overflow: "hidden", transition: "opacity 150ms ease-in-out, max-height 150ms ease-in-out" } }, ".bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, maxHeight: "1rem" } }, ".bottom-nav-shifting .bottom-nav-item": { "@layer components": { flex: "0 1 4rem", transition: "flex 200ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active": { "@layer components": { flex: "1 1 6rem" } }, ".bottom-nav-shifting .bottom-nav-label": { "@layer components": { opacity: 0, transform: "translateY(0.5rem)", transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".nav-rail": { "@layer components": { position: "fixed", left: "0", top: "0", bottom: "0", zIndex: 1000, display: "flex", flexDirection: "column", alignItems: "center", width: "5rem", padding: "1rem 0", backgroundColor: "var(--color-surface)", borderRight: "1px solid var(--color-outline-variant)" } }, ".nav-rail .bottom-nav-item": { "@layer components": { width: "100%", padding: "0.5rem", margin: "0.25rem 0" } }, ".nav-rail .bottom-nav-indicator": { "@layer components": { width: "3.5rem", height: "2rem" } }, ".bottom-nav-responsive": { "@layer components": { "@media (min-width: 768px)": { position: "relative", bottom: "auto", justifyContent: "flex-start", gap: "0.5rem", minHeight: "3rem", padding: "0 1rem", boxShadow: "none", borderBottom: "1px solid var(--color-outline-variant)" } } }, ".bottom-nav-responsive .bottom-nav-item": { "@layer components": { "@media (min-width: 768px)": { flex: "0 0 auto", flexDirection: "row", gap: "0.5rem", padding: "0.75rem 1rem" } } }, ".bottom-nav-responsive .bottom-nav-indicator": { "@layer components": { "@media (min-width: 768px)": { width: "auto", height: "auto", backgroundColor: "transparent !important" } } }, ".bottom-nav-responsive .bottom-nav-item.active": { "@layer components": { "@media (min-width: 768px)": { borderBottom: "2px solid var(--color-primary)" } } }, ".bottom-nav-item, \n    .bottom-nav-indicator, \n    .bottom-nav-icon, \n    .bottom-nav-label, \n    .bottom-nav-shifting .bottom-nav-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu": { "@layer components": { "--circle-menu-size": "3rem", "--circle-menu-item-size": "3rem", "--circle-menu-radius": "5.5rem", "--circle-menu-icon-size": "1.25rem", "--circle-menu-bar-width": "1.125rem", "--circle-menu-bar-height": "0.1875rem", "--circle-menu-bar-gap": "0.375rem", "--circle-menu-btn-bg": "var(--color-primary-container)", "--circle-menu-bar-color": "var(--color-on-primary-container)", "--circle-menu-item-bg": "var(--color-primary-container)", "--circle-menu-item-color": "var(--color-on-primary-container)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 30%, transparent)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)" } }, ".circle-menu-toggler": { "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", zIndex: 10, opacity: 0, cursor: "pointer" } }, ".circle-menu-label": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", display: "block", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-btn-bg)", zIndex: 1, pointerEvents: "none", transition: "background-color 0.3s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-label::before": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", boxShadow: `0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color),
+    )` } }, ".divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-start::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-vertical.divider-end::after": { "@layer components": { flex: "0 0 2rem" } }, ".divider-compact": { "@layer components": { margin: "0.25rem 0" } }, ".divider-compact:not(:empty)": { "@layer components": { gap: "0.5rem" } }, ".divider-compact.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-comfortable": { "@layer components": { margin: "1.5rem 0" } }, ".divider-comfortable.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-spacious": { "@layer components": { margin: "2rem 0" } }, ".divider-spacious:not(:empty)": { "@layer components": { gap: "1.5rem" } }, ".divider-spacious.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-none": { "@layer components": { margin: "0" } }, ".divider-xs": { "@layer components": { margin: "0.25rem 0" } }, ".divider-xs.divider-vertical": { "@layer components": { margin: "0 0.25rem" } }, ".divider-sm": { "@layer components": { margin: "0.5rem 0" } }, ".divider-sm.divider-vertical": { "@layer components": { margin: "0 0.5rem" } }, ".divider-lg": { "@layer components": { margin: "1.5rem 0" } }, ".divider-lg.divider-vertical": { "@layer components": { margin: "0 1.5rem" } }, ".divider-xl": { "@layer components": { margin: "2rem 0" } }, ".divider-xl.divider-vertical": { "@layer components": { margin: "0 2rem" } }, ".divider-inset": { "@layer components": { paddingLeft: "4rem" } }, ".divider-inset-right": { "@layer components": { paddingRight: "4rem" } }, ".divider-inset-both": { "@layer components": { paddingLeft: "4rem", paddingRight: "4rem" } }, ".divider-list": { "@layer components": { margin: "0", paddingLeft: "1rem" } }, ".divider-card": { "@layer components": { margin: "0", marginLeft: "-1rem", marginRight: "-1rem" } }, ".divider-text": { "@layer components": { display: "flex", flexDirection: "row", alignItems: "center", gap: "0", width: "100%", margin: "1rem 0", whiteSpace: "nowrap" } }, ".divider-text:not(:empty)": { "@layer components": { gap: "1rem" } }, ".divider-text::before, \n  .divider-text::after": { "@layer components": { content: "''", flex: 1, height: "1px", backgroundColor: "var(--color-outline-variant)" } }, ".divider-text-left::before, \n  .divider-text-left.divider-text::before": { "@layer components": { flex: "0 0 2rem" } }, ".divider-text-right::after, \n  .divider-text-right.divider-text::after": { "@layer components": { flex: "0 0 2rem" } }, ".home-page": { "@layer components": { containerType: "inline-size", containerName: "home-page", width: "100%", minWidth: "0", minHeight: "var(--home-page-min-height, 100dvh)", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".home-page-frame": { "@layer components": { display: "grid", minHeight: "inherit", gridTemplateRows: "auto minmax(0, 1fr) auto" } }, ".home-page-header": { "@layer components": { zIndex: 10 } }, ".home-page-nav": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-actions": [{ "@layer components": { display: "none", alignItems: "center", gap: "0.25rem" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "flex" } } }], ".home-page-menu-trigger": [{ "@layer components": { display: "inline-flex" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-mobile-menu": [{ "@layer components": { maxWidth: "min(20rem, calc(100cqi - 2rem))" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { display: "none" } } }], ".home-page-main": { "@layer components": { minWidth: "0" } }, ".home-page-content": [{ "@layer components": { width: "min(100%, 80rem)", marginInline: "auto", padding: "clamp(1rem, 5cqi, 3rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { paddingInline: "clamp(2rem, 5cqi, 5rem)" } } }], ".home-page-hero": [{ "@layer components": { display: "grid", alignItems: "center", gridTemplateColumns: "minmax(0, 1fr)", gap: "clamp(2rem, 5cqi, 4rem)" } }, { "@layer components": { "@container home-page (min-width: 48rem)": { gridTemplateColumns: "minmax(0, 1fr) minmax(18rem, 0.8fr)" } } }], ".home-page-footer": { "@layer components": { borderTop: "1px solid var(--color-outline-variant)", backgroundColor: "var(--color-surface-container-low)" } }, ".sign-page": { "@layer components": { containerType: "inline-size", containerName: "sign-page", width: "100%", minWidth: "0", minHeight: "var(--sign-page-min-height, 100dvh)", overflow: "hidden", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".sign-page-frame": [{ "@layer components": { display: "grid", minHeight: "inherit", gridTemplateColumns: "minmax(0, 1fr)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { gridTemplateColumns: "minmax(20rem, 1.15fr) minmax(24rem, 0.85fr)" } } }], ".sign-page-aside": [{ "@layer components": { display: "none", position: "relative", isolation: "isolate", overflow: "hidden", padding: "clamp(2rem, 6cqi, 5rem)", backgroundColor: "var(--color-primary-container)", color: "var(--color-on-primary-container)" } }, { "@layer components": { "@container sign-page (min-width: 48rem)": { display: "flex", flexDirection: "column", justifyContent: "space-between" } } }], ".sign-page-aside::before, \n  .sign-page-aside::after": { "@layer components": { content: '""', position: "absolute", zIndex: -1, borderRadius: "var(--radius-full)", background: "color-mix(in oklch, var(--color-tertiary) 24%, transparent)", filter: "blur(1px)" } }, ".sign-page-aside::before": { "@layer components": { width: "22rem", height: "22rem", inset: "-8rem -6rem auto auto" } }, ".sign-page-aside::after": { "@layer components": { width: "15rem", height: "15rem", inset: "auto auto -5rem -4rem", background: "color-mix(in oklch, var(--color-secondary) 22%, transparent)" } }, ".sign-page-main": { "@layer components": { display: "grid", placeItems: "center", minWidth: "0", padding: "clamp(1rem, 6cqi, 4rem)", backgroundColor: "var(--color-surface)" } }, ".sign-page-content": { "@layer components": { width: "min(100%, 30rem)" } }, ".bottom-nav": { "@layer components": { position: "fixed", bottom: "0", left: "0", right: "0", zIndex: 1000, display: "flex", alignItems: "stretch", justifyContent: "space-around", minHeight: "5rem", paddingBottom: "env(safe-area-inset-bottom, 0)", backgroundColor: "var(--color-surface)", boxShadow: "0 -1px 3px 0 color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-item": { "@layer components": { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: 1, minWidth: "4rem", maxWidth: "10rem", padding: "0.75rem 0.25rem", color: "var(--color-on-surface-variant)", backgroundColor: "transparent", border: "none", cursor: "pointer", transition: "color 150ms ease-in-out", textDecoration: "none", gap: "0.25rem" } }, ".bottom-nav-item:hover": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-item:focus-visible": { "@layer components": { outline: "none" } }, ".bottom-nav-item:focus-visible .bottom-nav-indicator": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px color-mix(in oklch, currentColor 20%, transparent)" } }, ".bottom-nav-item.active": { "@layer components": { color: "var(--color-on-surface)" } }, ".bottom-nav-indicator": { "@layer components": { position: "relative", display: "flex", alignItems: "center", justifyContent: "center", width: "4rem", height: "2rem", borderRadius: "var(--radius-lg)", transition: "background-color 150ms ease-in-out" } }, ".bottom-nav-item:hover .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-secondary-container)" } }, ".bottom-nav-icon": { "@layer components": { fontSize: "1.5rem", lineHeight: 1, transition: "font-size 150ms ease-in-out" } }, ".bottom-nav-label": { "@layer components": { fontSize: "0.75rem", fontWeight: 500, lineHeight: "1rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } }, ".bottom-nav-item.active .bottom-nav-label": { "@layer components": { fontWeight: 600 } }, ".bottom-nav-badge": { "@layer components": { position: "absolute", top: "0", right: "0.5rem", minWidth: "1rem", height: "1rem", padding: "0 0.25rem", fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", color: "var(--color-error-content)", backgroundColor: "var(--color-error)", borderRadius: "var(--radius-full)", textAlign: "center" } }, ".bottom-nav-badge-dot": { "@layer components": { minWidth: "0.5rem", width: "0.5rem", height: "0.5rem", padding: "0", top: "0.125rem", right: "0.75rem" } }, ".bottom-nav-elevated": { "@layer components": { boxShadow: "0 -4px 6px -1px color-mix(in srgb, var(--color-shadow) 10%, transparent)" } }, ".bottom-nav-bordered": { "@layer components": { boxShadow: "none", borderTop: "1px solid var(--color-outline-variant)" } }, ".bottom-nav-filled": { "@layer components": { backgroundColor: "var(--color-surface-container)" } }, ".bottom-nav-primary .bottom-nav-item.active .bottom-nav-indicator": { "@layer components": { backgroundColor: "var(--color-primary-container)" } }, ".bottom-nav-primary .bottom-nav-item.active": { "@layer components": { color: "var(--color-on-primary-container)" } }, ".bottom-nav-icons-only .bottom-nav-label": { "@layer components": { display: "none" } }, ".bottom-nav-icons-only .bottom-nav-item": { "@layer components": { padding: "1rem 0.25rem" } }, ".bottom-nav-labels-active .bottom-nav-label": { "@layer components": { opacity: 0, maxHeight: "0", overflow: "hidden", transition: "opacity 150ms ease-in-out, max-height 150ms ease-in-out" } }, ".bottom-nav-labels-active .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, maxHeight: "1rem" } }, ".bottom-nav-shifting .bottom-nav-item": { "@layer components": { flex: "0 1 4rem", transition: "flex 200ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active": { "@layer components": { flex: "1 1 6rem" } }, ".bottom-nav-shifting .bottom-nav-label": { "@layer components": { opacity: 0, transform: "translateY(0.5rem)", transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out" } }, ".bottom-nav-shifting .bottom-nav-item.active .bottom-nav-label": { "@layer components": { opacity: 1, transform: "translateY(0)" } }, ".nav-rail": { "@layer components": { position: "fixed", left: "0", top: "0", bottom: "0", zIndex: 1000, display: "flex", flexDirection: "column", alignItems: "center", width: "5rem", padding: "1rem 0", backgroundColor: "var(--color-surface)", borderRight: "1px solid var(--color-outline-variant)" } }, ".nav-rail .bottom-nav-item": { "@layer components": { width: "100%", padding: "0.5rem", margin: "0.25rem 0" } }, ".nav-rail .bottom-nav-indicator": { "@layer components": { width: "3.5rem", height: "2rem" } }, ".bottom-nav-responsive": { "@layer components": { "@media (min-width: 768px)": { position: "relative", bottom: "auto", justifyContent: "flex-start", gap: "0.5rem", minHeight: "3rem", padding: "0 1rem", boxShadow: "none", borderBottom: "1px solid var(--color-outline-variant)" } } }, ".bottom-nav-responsive .bottom-nav-item": { "@layer components": { "@media (min-width: 768px)": { flex: "0 0 auto", flexDirection: "row", gap: "0.5rem", padding: "0.75rem 1rem" } } }, ".bottom-nav-responsive .bottom-nav-indicator": { "@layer components": { "@media (min-width: 768px)": { width: "auto", height: "auto", backgroundColor: "transparent !important" } } }, ".bottom-nav-responsive .bottom-nav-item.active": { "@layer components": { "@media (min-width: 768px)": { borderBottom: "2px solid var(--color-primary)" } } }, ".bottom-nav-item, \n    .bottom-nav-indicator, \n    .bottom-nav-icon, \n    .bottom-nav-label, \n    .bottom-nav-shifting .bottom-nav-item": { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }, ".circle-menu": { "@layer components": { "--circle-menu-size": "3rem", "--circle-menu-item-size": "3rem", "--circle-menu-radius": "5.5rem", "--circle-menu-icon-size": "1.25rem", "--circle-menu-bar-width": "1.125rem", "--circle-menu-bar-height": "0.1875rem", "--circle-menu-bar-gap": "0.375rem", "--circle-menu-btn-bg": "var(--color-primary-container)", "--circle-menu-bar-color": "var(--color-on-primary-container)", "--circle-menu-item-bg": "var(--color-primary-container)", "--circle-menu-item-color": "var(--color-on-primary-container)", "--circle-menu-item-ring": "color-mix(in oklch, var(--color-primary) 30%, transparent)", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)" } }, ".circle-menu-toggler": { "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", zIndex: 10, opacity: 0, cursor: "pointer" } }, ".circle-menu-label": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", display: "block", width: "var(--circle-menu-size)", height: "var(--circle-menu-size)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-btn-bg)", zIndex: 1, pointerEvents: "none", transition: "background-color 0.3s ease" } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-label::before": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", boxShadow: `0 var(--circle-menu-bar-gap) 0 var(--circle-menu-bar-color),
       0 calc(-1 * var(--circle-menu-bar-gap)) 0 var(--circle-menu-bar-color)`, transform: "translate(-50%, -50%)", transition: `transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
       box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1)` } }, ".circle-menu-label::after": { "@layer components": { content: "''", position: "absolute", top: "50%", left: "50%", width: "var(--circle-menu-bar-width)", height: "var(--circle-menu-bar-height)", borderRadius: "var(--radius-full)", backgroundColor: "var(--circle-menu-bar-color)", transform: "translate(-50%, -50%) rotate(-45deg)", opacity: 0, transition: "opacity 0.25s ease" } }, ".circle-menu-toggler:hover + .circle-menu-label": { "@layer components": { backgroundColor: "color-mix(in oklch, var(--circle-menu-btn-bg) 80%, var(--circle-menu-bar-color))" } }, ".circle-menu-toggler:focus-visible + .circle-menu-label": { "@layer components": { outline: "none", boxShadow: "0 0 0 3px var(--circle-menu-item-ring)" } }, ".circle-menu-toggler:checked + .circle-menu-label::before": { "@layer components": { boxShadow: "none", transform: "translate(-50%, -50%) rotate(45deg)" } }, ".circle-menu-toggler:checked + .circle-menu-label::after": { "@layer components": { opacity: 1 } }, ".circle-menu-list": { "@layer components": { position: "absolute", inset: "0", margin: "0", padding: "0", listStyle: "none", pointerEvents: "none" } }, ".circle-menu-item": [{ "@layer components": { position: "absolute", inset: "0", margin: "auto", width: "var(--circle-menu-item-size)", height: "var(--circle-menu-item-size)", opacity: 0, transition: `transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
       opacity 0.3s ease` } }, { "@layer components": { "@media (prefers-reduced-motion: reduce)": { transition: "none" } } }], ".circle-menu-item a, \n  .circle-menu-item button": { "@layer components": { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", borderRadius: "var(--radius-full)", textDecoration: "none", fontSize: "var(--circle-menu-icon-size)", color: "var(--circle-menu-item-color)", backgroundColor: "var(--circle-menu-item-bg)", border: "none", cursor: "pointer", pointerEvents: "none", transition: `box-shadow 0.2s ease,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/core",
-  "version": "1.18.6",
+  "version": "1.19.0",
   "description": "DuskMoonUI - Tailwind CSS v4 plugin with Material Design 3 color system and component styles",
   "type": "module",
   "main": "./dist/index.css",
@@ -138,6 +138,12 @@
       "import": "./dist/esm/components/collapse.js",
       "default": "./dist/esm/components/collapse.js"
     },
+    "./components/console-page": {
+      "types": "./dist/esm/components/console-page.d.ts",
+      "style": "./dist/components/console-page.css",
+      "import": "./dist/esm/components/console-page.js",
+      "default": "./dist/esm/components/console-page.js"
+    },
     "./components/datepicker": {
       "types": "./dist/esm/components/datepicker.d.ts",
       "style": "./dist/components/datepicker.css",
@@ -180,6 +186,12 @@
       "import": "./dist/esm/components/form-group.js",
       "default": "./dist/esm/components/form-group.js"
     },
+    "./components/home-page": {
+      "types": "./dist/esm/components/home-page.d.ts",
+      "style": "./dist/components/home-page.css",
+      "import": "./dist/esm/components/home-page.js",
+      "default": "./dist/esm/components/home-page.js"
+    },
     "./components/input": {
       "types": "./dist/esm/components/input.d.ts",
       "style": "./dist/components/input.css",
@@ -270,6 +282,12 @@
       "import": "./dist/esm/components/select.js",
       "default": "./dist/esm/components/select.js"
     },
+    "./components/sign-page": {
+      "types": "./dist/esm/components/sign-page.d.ts",
+      "style": "./dist/components/sign-page.css",
+      "import": "./dist/esm/components/sign-page.js",
+      "default": "./dist/esm/components/sign-page.js"
+    },
     "./components/skeleton": {
       "types": "./dist/esm/components/skeleton.d.ts",
       "style": "./dist/components/skeleton.css",