@duskmoon-dev/core 1.19.2 → 1.19.3

package/dist/standalone/duskmoonui.mjs

@@ -1,6 +1,6 @@
 /**
- * @duskmoon-dev/core v1.19.2
- * @duskmoon-dev/css-art v1.19.2
+ * @duskmoon-dev/core v1.19.3
+ * @duskmoon-dev/css-art v1.19.3
  * Standalone Tailwind CSS v4 plugin bundle
  * https://github.com/duskmoon-dev/duskmoonui
  * @license MIT
@@ -195,7 +195,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" } }, ".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),
+    )` } }, ".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" } }, ".footer": { "@layer components": { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(12rem, 100%), 1fr))", gap: "var(--footer-gap, 2rem)", width: "100%", padding: "var(--footer-padding, 2rem)", backgroundColor: "var(--color-surface-container-low)", color: "var(--color-on-surface)" } }, ".footer > :where(nav, section, div):not(.footer-horizontal):not(.footer-vertical)": { "@layer components": { display: "grid", alignContent: "start", gap: "0.75rem" } }, ".footer-title": { "@layer components": { color: "var(--color-on-surface-variant)", fontSize: "0.75rem", fontWeight: 600, lineHeight: "1rem", letterSpacing: "0.08em", textTransform: "uppercase" } }, ".footer-center": { "@layer components": { placeItems: "center", textAlign: "center" } }, ".footer-horizontal": { "@layer components": { gridTemplateColumns: "none", gridAutoFlow: "column", gridAutoColumns: "minmax(0, 1fr)", alignItems: "start" } }, ".footer-vertical": { "@layer components": { gridTemplateColumns: "minmax(0, 1fr)", gridAutoFlow: "row" } }, ".hero": { "@layer components": { display: "grid", width: "100%", minWidth: "0", placeItems: "center", isolation: "isolate" } }, ".hero > *": { "@layer components": { gridArea: "1 / 1" } }, ".hero-content": { "@layer components": { zIndex: 1, display: "flex", width: "min(100%, var(--hero-content-max-width, 80rem))", minWidth: "0", alignItems: "center", justifyContent: "center" } }, ".hero-overlay": { "@layer components": { zIndex: 0, alignSelf: "stretch", justifySelf: "stretch", pointerEvents: "none" } }, ".hero-center": { "@layer components": { justifyItems: "center", textAlign: "center" } }, ".hero-start": { "@layer components": { justifyItems: "start", textAlign: "start" } }, ".hero-end": { "@layer components": { justifyItems: "end", textAlign: "end" } }, ".hero-start > .hero-content": { "@layer components": { justifyContent: "flex-start" } }, ".hero-end > .hero-content": { "@layer components": { justifyContent: "flex-end" } }, ".indicator": { "@layer components": { position: "relative", display: "inline-grid", width: "max-content", maxWidth: "100%" } }, ".indicator-item": { "@layer components": { "--indicator-block": "0%", "--indicator-inline": "0%", "--indicator-x": "50%", "--indicator-y": "-50%", position: "absolute", zIndex: 1, insetBlockStart: "var(--indicator-block)", insetInlineEnd: "var(--indicator-inline)", translate: "var(--indicator-x) var(--indicator-y)" } }, ".indicator-top": { "@layer components": { "--indicator-block": "0%", "--indicator-y": "-50%" } }, ".indicator-middle": { "@layer components": { "--indicator-block": "50%", "--indicator-y": "-50%" } }, ".indicator-bottom": { "@layer components": { "--indicator-block": "100%", "--indicator-y": "-50%" } }, ".indicator-start": { "@layer components": { "--indicator-inline": "100%", "--indicator-x": "50%" } }, ".indicator-center": { "@layer components": { "--indicator-inline": "50%", "--indicator-x": "50%" } }, ".indicator-end": { "@layer components": { "--indicator-inline": "0%", "--indicator-x": "50%" } }, ":dir(rtl) .indicator-item": { "@layer components": { "--indicator-x": "-50%" } }, ":dir(rtl) .indicator-start": { "@layer components": { "--indicator-x": "-50%" } }, ".join": { "@layer components": { display: "inline-flex", alignItems: "stretch", flexDirection: "row", width: "max-content", maxWidth: "100%", verticalAlign: "middle" } }, ".join > .join-item": { "@layer components": { position: "relative", flex: "0 1 auto" } }, ".join > .join-item:hover, \n  .join > .join-item:focus, \n  .join > .join-item:focus-within": { "@layer components": { zIndex: 1 } }, ":is(.join, .join-horizontal) > .join-item:not(:first-child)": { "@layer components": { marginInlineStart: "-1px" } }, ":is(.join, .join-horizontal) > .join-item:not(:first-child):not(:last-child)": { "@layer components": { borderRadius: "0" } }, ":is(.join, .join-horizontal) > .join-item:first-child:not(:last-child)": { "@layer components": { borderStartEndRadius: "0", borderEndEndRadius: "0" } }, ":is(.join, .join-horizontal) > .join-item:last-child:not(:first-child)": { "@layer components": { borderStartStartRadius: "0", borderEndStartRadius: "0" } }, ".join-vertical": { "@layer components": { flexDirection: "column" } }, ".join-vertical > .join-item": { "@layer components": { marginInlineStart: "0" } }, ".join-vertical > .join-item:not(:first-child)": { "@layer components": { marginBlockStart: "-1px" } }, ".join-vertical > .join-item:not(:first-child):not(:last-child)": { "@layer components": { borderRadius: "0" } }, ".join-vertical > .join-item:first-child:not(:last-child)": { "@layer components": { borderEndStartRadius: "0", borderEndEndRadius: "0" } }, ".join-vertical > .join-item:last-child:not(:first-child)": { "@layer components": { borderStartStartRadius: "0", borderStartEndRadius: "0" } }, ".mask": { "@layer components": { display: "inline-block", maxWidth: "100%", overflow: "hidden", verticalAlign: "middle", objectFit: "cover" } }, ".mask-circle": { "@layer components": { clipPath: "circle(50% at 50% 50%)" } }, ".mask-squircle": { "@layer components": { clipPath: "inset(0 round 28%)" } }, ".mask-square": { "@layer components": { clipPath: "inset(0)" } }, ".mask-diamond": { "@layer components": { clipPath: "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)" } }, ".mask-hexagon": { "@layer components": { clipPath: "polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%)" } }, ".mask-triangle": { "@layer components": { clipPath: "polygon(50% 0, 100% 100%, 0 100%)" } }, ".sidebar-layout": { "@layer components": { "--sidebar-layout-width": "17.5rem", "--sidebar-layout-compact-width": "5rem", containerType: "inline-size", containerName: "sidebar-layout", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", gridTemplateAreas: '"sidebar content"', width: "100%", minWidth: "0", minHeight: "0", backgroundColor: "var(--color-surface)", color: "var(--color-on-surface)" } }, ".sidebar-layout-sidebar": [{ "@layer components": { display: "none", gridArea: "sidebar", width: "var(--sidebar-layout-width)", minWidth: "0", overflow: "hidden", backgroundColor: "var(--color-surface-container-low)", color: "var(--color-on-surface)", borderInlineEnd: "1px solid var(--color-outline-variant)" } }, { "@layer components": { "@container sidebar-layout (min-width: 48rem)": { display: "block" } } }], ".sidebar-layout-content": { "@layer components": { gridArea: "content", minWidth: "0" } }, ".sidebar-layout-start": { "@layer components": { gridTemplateColumns: "auto minmax(0, 1fr)", gridTemplateAreas: '"sidebar content"' } }, ".sidebar-layout-end": { "@layer components": { gridTemplateColumns: "minmax(0, 1fr) auto", gridTemplateAreas: '"content sidebar"' } }, ".sidebar-layout-end > .sidebar-layout-sidebar": { "@layer components": { borderInlineStart: "1px solid var(--color-outline-variant)", borderInlineEnd: "0" } }, ".sidebar-layout-compact > .sidebar-layout-sidebar": { "@layer components": { width: "var(--sidebar-layout-compact-width)" } }, ".sidebar-layout-hidden > .sidebar-layout-sidebar": { "@layer components": { display: "none" } }, ".stack": { "@layer components": { "--stack-inline-offset": "0", "--stack-block-offset": "0.375rem", display: "inline-grid", placeItems: "stretch", isolation: "isolate" } }, ".stack > *": { "@layer components": { gridArea: "1 / 1", position: "relative", minWidth: "0" } }, ".stack > :first-child": { "@layer components": { zIndex: 3 } }, ".stack > :nth-child(2)": { "@layer components": { zIndex: 2, insetInlineStart: "var(--stack-inline-offset)", insetBlockStart: "var(--stack-block-offset)" } }, ".stack > :nth-child(n + 3)": { "@layer components": { zIndex: 1, insetInlineStart: "calc(var(--stack-inline-offset) * 2)", insetBlockStart: "calc(var(--stack-block-offset) * 2)" } }, ".stack-top": { "@layer components": { "--stack-inline-offset": "0", "--stack-block-offset": "-0.375rem" } }, ".stack-bottom": { "@layer components": { "--stack-inline-offset": "0", "--stack-block-offset": "0.375rem" } }, ".stack-start": { "@layer components": { "--stack-inline-offset": "-0.375rem", "--stack-block-offset": "0" } }, ".stack-end": { "@layer components": { "--stack-inline-offset": "0.375rem", "--stack-block-offset": "0" } }, ".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.19.2",
+  "version": "1.19.3",
   "description": "DuskMoonUI - Tailwind CSS v4 plugin with Material Design 3 color system and component styles",
   "type": "module",
   "main": "./dist/index.css",
@@ -186,18 +186,42 @@
       "import": "./dist/esm/components/form-group.js",
       "default": "./dist/esm/components/form-group.js"
     },
+    "./components/footer": {
+      "types": "./dist/esm/components/footer.d.ts",
+      "style": "./dist/components/footer.css",
+      "import": "./dist/esm/components/footer.js",
+      "default": "./dist/esm/components/footer.js"
+    },
+    "./components/hero": {
+      "types": "./dist/esm/components/hero.d.ts",
+      "style": "./dist/components/hero.css",
+      "import": "./dist/esm/components/hero.js",
+      "default": "./dist/esm/components/hero.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/indicator": {
+      "types": "./dist/esm/components/indicator.d.ts",
+      "style": "./dist/components/indicator.css",
+      "import": "./dist/esm/components/indicator.js",
+      "default": "./dist/esm/components/indicator.js"
+    },
     "./components/input": {
       "types": "./dist/esm/components/input.d.ts",
       "style": "./dist/components/input.css",
       "import": "./dist/esm/components/input.js",
       "default": "./dist/esm/components/input.js"
     },
+    "./components/join": {
+      "types": "./dist/esm/components/join.d.ts",
+      "style": "./dist/components/join.css",
+      "import": "./dist/esm/components/join.js",
+      "default": "./dist/esm/components/join.js"
+    },
     "./components/list": {
       "types": "./dist/esm/components/list.d.ts",
       "style": "./dist/components/list.css",
@@ -210,6 +234,12 @@
       "import": "./dist/esm/components/markdown-body.js",
       "default": "./dist/esm/components/markdown-body.js"
     },
+    "./components/mask": {
+      "types": "./dist/esm/components/mask.d.ts",
+      "style": "./dist/components/mask.css",
+      "import": "./dist/esm/components/mask.js",
+      "default": "./dist/esm/components/mask.js"
+    },
     "./components/modal": {
       "types": "./dist/esm/components/modal.d.ts",
       "style": "./dist/components/modal.css",
@@ -282,6 +312,12 @@
       "import": "./dist/esm/components/select.js",
       "default": "./dist/esm/components/select.js"
     },
+    "./components/sidebar-layout": {
+      "types": "./dist/esm/components/sidebar-layout.d.ts",
+      "style": "./dist/components/sidebar-layout.css",
+      "import": "./dist/esm/components/sidebar-layout.js",
+      "default": "./dist/esm/components/sidebar-layout.js"
+    },
     "./components/sign-page": {
       "types": "./dist/esm/components/sign-page.d.ts",
       "style": "./dist/components/sign-page.css",
@@ -312,6 +348,12 @@
       "import": "./dist/esm/components/stepper.js",
       "default": "./dist/esm/components/stepper.js"
     },
+    "./components/stack": {
+      "types": "./dist/esm/components/stack.d.ts",
+      "style": "./dist/components/stack.css",
+      "import": "./dist/esm/components/stack.js",
+      "default": "./dist/esm/components/stack.js"
+    },
     "./components/switch": {
       "types": "./dist/esm/components/switch.d.ts",
       "style": "./dist/components/switch.css",