mnfst 0.5.14

package/dist/manifest.dialog.css

@@ -0,0 +1,130 @@
+/* Manifest Dialogs */
+
+@layer base {
+
+    /* Base popover styles */
+    :where([popover]):not(.unstyle) {
+        display: none;
+        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
+        transition-behavior: allow-discrete;
+
+        &:popover-open {
+            display: flex
+        }
+
+        /* Opening state */
+        @starting-style {
+            scale: .9;
+            opacity: 0
+        }
+
+        /* Closing state */
+        &:not(:popover-open) {
+            display: none !important;
+            scale: 1;
+            opacity: 0;
+            transition-duration: .15s;
+            transition-timing-function: ease-out
+        }
+    }
+}
+
+@layer components {
+
+    :where(dialog[popover], .dialog):not(.unstyle) {
+        position: fixed;
+        left: 0;
+        right: 0;
+        width: 500px;
+        flex-direction: column;
+        max-width: 100%;
+        min-height: 200px;
+        max-height: 90vh;
+        margin: auto;
+        color: var(--color-content-stark, oklch(16.6% 0.026 267));
+        background-color: var(--color-popover-surface, oklch(100% 0 0));
+        border: 0 none;
+        border-radius: calc(var(--radius, 0.5rem) * 2);
+        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+        &::backdrop {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        /* Set layout for common children */
+        & :where(header, main, footer) {
+            padding: calc(var(--spacing, 0.25rem) * 4);
+        }
+
+        /* Push header content apart */
+        & :where(header) {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: calc(var(--spacing, 0.25rem) * 4)
+        }
+
+        /* Push footer to bottom */
+        & :where(main) {
+            flex-grow: 1
+        }
+
+        /* Push footer content to end */
+        & :where(footer) {
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            gap: calc(var(--spacing, 0.25rem) * 2);
+            margin-top: auto
+        }
+
+        /* Turn dialog into alert prompt on mobile */
+        @media screen and (max-width: 768px) {
+            width: calc(100vw - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
+            max-height: calc(100vh - calc(var(--spacing, 0.25rem) * 4) - calc(var(--spacing, 0.25rem) * 4)) !important;
+            margin: auto !important
+        }
+    }
+
+    /* Utility class additions */
+    :where(.dialog) {
+        inset: 0;
+        z-index: 10;
+        height: fit-content
+    }
+
+    /* Dark mode override */
+    .dark :where(dialog)::backdrop {
+        background-color: rgba(0, 0, 0, 0.35)
+    }
+
+    /* Hide dropdowns when dialogs are open */
+    html:has(dialog:popover-open) {
+
+        /* Hide dropdowns outside of any dialog */
+        & menu[popover]:not(dialog *) {
+            opacity: 0;
+            scale: .9;
+            pointer-events: none;
+            transition: opacity .15s ease-out, scale .15s ease-out;
+
+            &:popover-open {
+                display: flex !important;
+            }
+        }
+    }
+
+    /* When multiple dialogs are open, hide dropdowns in all but closest dialog */
+    html:has(dialog:popover-open ~ dialog:popover-open) {
+        & dialog:popover-open:not(:last-of-type) menu[popover] {
+            opacity: 0;
+            scale: .9;
+            pointer-events: none;
+            transition: opacity .15s ease-out, scale .15s ease-out;
+
+            &:popover-open {
+                display: flex !important;
+            }
+        }
+    }
+}

package/dist/manifest.divider.css

@@ -0,0 +1,77 @@
+/* Manifest Dividers */
+
+@layer utilities {
+
+    :where(.divider) {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 1px;
+        margin: var(--spacing-field-padding, 0.625rem) 0;
+        white-space: nowrap;
+        font-size: 0.875rem;
+        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+
+        /* Lines before and after content */
+        &:before,
+        &:after {
+            content: "";
+            display: inline-flex;
+            flex: 1;
+            width: auto;
+            height: 1px;
+            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
+        }
+
+        /* Space between lines and content */
+        &:not(:empty) {
+            gap: var(--spacing-field-padding, 0.625rem)
+        }
+    }
+
+    /* Start modifier */
+    :where(.divider.start) {
+        justify-content: flex-start;
+
+        &:before {
+            display: none
+        }
+    }
+
+    /* End modifier */
+    :where(.divider.end) {
+        justify-content: flex-end;
+
+        &:after {
+            display: none
+        }
+    }
+
+    /* Vertical modifier */
+    .divider.vertical {
+        align-self: stretch;
+        flex-flow: column nowrap;
+        width: fit-content;
+        min-width: 1px;
+        height: auto;
+        min-height: 100%;
+        margin: 0 var(--spacing-field-padding, 0.625rem);
+
+        &:before,
+        &:after {
+            content: "";
+            width: 1px;
+            height: auto;
+            min-height: 1px;
+        }
+
+        /* Icon */
+        & [x-icon] {
+            flex-shrink: 0;
+            min-height: 0.875rem;
+            font-size: 0.875rem
+        }
+    }
+}

package/dist/manifest.dropdown.css

@@ -0,0 +1,278 @@
+/* Manifest Dropdowns */
+
+@layer base {
+
+    /* Base popover styles */
+    :where([popover]):not(.unstyle) {
+        display: none;
+        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
+        transition-behavior: allow-discrete;
+
+        &:popover-open {
+            display: flex
+        }
+
+        /* Opening state */
+        @starting-style {
+            scale: .9;
+            opacity: 0
+        }
+
+        /* Closing state */
+        &:not(:popover-open) {
+            display: none !important;
+            scale: 1;
+            opacity: 0;
+            transition-duration: .15s;
+            transition-timing-function: ease-out
+        }
+    }
+}
+
+@layer components {
+
+    :where(menu[popover]):not(.unstyle) {
+        position-try-fallbacks: flip-inline, flip-block, flip-start;
+        position-area: end span-end;
+        inset: auto;
+        flex-flow: column nowrap;
+        gap: 0;
+        width: fit-content;
+        min-width: 160px;
+        height: fit-content;
+        max-height: 90vh;
+        margin: var(--spacing-popover-offset, 0.5rem) 0;
+        padding: 0.25rem;
+        z-index: 50;
+        list-style: none;
+        background: var(--color-popover-surface, oklch(100% 0 0));
+        border: 0 none;
+        border-radius: var(--radius, 0.5rem);
+        box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
+        transform-origin: top center;
+        overflow-x: hidden;
+
+        /* Options */
+        & :where(li, a, button, label) {
+            display: inline-flex;
+            justify-content: start;
+            align-items: center;
+            width: 100%;
+            max-width: 100%;
+            min-height: 2rem;
+            padding-inline-start: 0.5rem;
+            padding-inline-end: 0.5rem;
+            font-weight: normal;
+            color: var(--color-content-stark, oklch(16.6% 0.026 267));
+            text-align: start;
+            text-decoration: none;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            background-color: transparent;
+            border-radius: 6px;
+            cursor: pointer;
+            user-select: none;
+
+            &:hover {
+                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+                text-decoration: inherit;
+                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+            }
+
+            &:active {
+                color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+                background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+            }
+
+            & span,
+            & [x-icon] {
+                color: inherit
+            }
+
+            /* Leading icons */
+            & [x-icon]:first-child:not(:only-child) {
+                margin-inline-end: 0.375rem
+            }
+        }
+
+        /* Titles */
+        & small {
+            padding: 0.25rem 0.5rem;
+            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+        }
+
+        /* Horizontal rules (offset to ignore menu padding) */
+        & hr {
+            flex-shrink: 0;
+            width: calc(100% + 0.25rem * 2);
+            margin-inline-start: calc(0.25rem * -1);
+            margin-top: 0.25rem;
+            margin-bottom: 0.25rem;
+            background-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
+        }
+
+        /* Labels */
+        & label {
+            padding-inline-start: 0.5rem;
+            padding-inline-end: 0.5rem;
+            cursor: default;
+
+            &:hover {
+                background-color: transparent
+            }
+
+            &:has(input[role=switch]) {
+                justify-content: space-between
+            }
+        }
+
+        /* Inputs and textareas */
+        & :where(input, textarea) {
+            flex-shrink: 0;
+
+            &:not(:first-child) {
+                margin-top: var(--spacing, 0.25rem)
+            }
+        }
+
+        /* Spans */
+        & span {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap
+        }
+    }
+
+    /* Dark theme */
+    :where(.dark menu[popover]) :where(li, a, button, label):hover {
+        background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
+    }
+
+    /* Nested menu alignment */
+    :where(menu menu):not(.unstyle) {
+        position-area: span-end end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Center alignment */
+    :where(menu.center) {
+        position-area: center;
+    }
+
+    /* Top alignment */
+
+    :where(menu.top) {
+        position-area: top;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Bottom alignment */
+    :where(menu.bottom) {
+        position-area: bottom;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Start alignment */
+    :where(menu.start) {
+        position-area: center start;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* End alignment */
+    :where(menu.end) {
+        position-area: center end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Top start alignment */
+    :where(menu.top-start) {
+        position-area: start span-end;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Top end alignment */
+    :where(menu.top-end) {
+        position-area: start span-start;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Bottom start alignment */
+    :where(menu.bottom-start) {
+        position-area: end span-end;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Bottom end alignment */
+    :where(menu.bottom-end) {
+        position-area: end span-start;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Start top alignment */
+    :where(menu.start-top) {
+        position-area: span-end start;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Start bottom alignment */
+    :where(menu.start-bottom) {
+        position-area: span-start start;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+
+    /* End top alignment */
+    :where(menu.end-top) {
+        position-area: span-end end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* End bottom alignment */
+    :where(menu.end-bottom) {
+        position-area: span-start end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Top start corner alignment */
+    :where(menu.top-start-corner, menu.start-top-corner) {
+        position-area: start start;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Top end corner alignment */
+    :where(menu.top-end-corner, menu.end-top-corner) {
+        position-area: start end;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Bottom start corner alignment */
+    :where(menu.bottom-start-corner, menu.start-bottom-corner) {
+        position-area: end start;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Bottom end corner alignment */
+    :where(menu.bottom-end-corner, menu.end-bottom-corner) {
+        position-area: end end;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Touchscreen version */
+    @media (pointer: coarse) {
+        menu[popover]:not(.unstyle) {
+            position: fixed;
+            position-area: none;
+            top: auto;
+            left: 1rem;
+            bottom: 1rem;
+            width: calc(100% - 2rem);
+            margin: 0;
+
+            /* Leading icons */
+            & :where(li, a, button, label) [x-icon]:first-child:not(:only-child) {
+                margin-inline-end: 0.8125rem
+            }
+        }
+    }
+}