@pacem/pacem-theme-css 0.0.0-stage → 1.1.0-sierpinski

package/src/ui/balloon.css

@@ -0,0 +1,573 @@
+/* .BalloonColorize(): private properties, assigned by the color classes
+     --pacem--bl      background color          --pacem--bl-ink  foreground color
+     --pacem--bl-h    contextmenu hover back    --pacem--bl-ih   contextmenu hover fore
+     --pacem--bl-a    background opacity
+   The colorizing rules are written for the plain balloon (0,0,1), for the field tooltips (0,1,1, before the dropdown
+   rules) and for the color classes (0,1,1, after them), where Less put them. */
+@custom-selector :--colored :is(.balloon-root, .balloon-background, .balloon-invert, .balloon-primary, .balloon-secondary, .balloon-accent, .balloon-info,
+    .balloon-success, .balloon-warning, .balloon-danger, .balloon-error, .balloon-disabled, .balloon-green, .balloon-yellow,
+    .balloon-brown, .balloon-red, .balloon-pink, .balloon-blue, .balloon-orange, .balloon-purple, .balloon-teal, .balloon-gray,
+    .balloon-root-container, .balloon-background-container, .balloon-invert-container, .balloon-primary-container,
+    .balloon-secondary-container, .balloon-accent-container, .balloon-info-container, .balloon-success-container,
+    .balloon-warning-container, .balloon-danger-container, .balloon-error-container, .balloon-disabled-container,
+    .balloon-green-container, .balloon-yellow-container, .balloon-brown-container, .balloon-red-container,
+    .balloon-pink-container, .balloon-blue-container, .balloon-orange-container, .balloon-purple-container,
+    .balloon-teal-container, .balloon-gray-container, .balloon-alternative, .balloon-contrast);
+
+/* #region BALLOON */
+pacem-balloon {
+    --pacem--bl: var(--pacem-color-balloon);
+    --pacem--bl-ink: var(--pacem-color-default);
+    --pacem--bl-h: var(--pacem-color-balloon-hover);
+    --pacem--bl-ih: var(--pacem-color-default-hover);
+    --pacem--bl-a: 1;
+    box-sizing: border-box;
+    min-width: calc(var(--pacem-grid-spacing) * 3);
+    border: 1px solid transparent;
+    border-radius: var(--pacem-border-radius);
+    padding: calc(var(--pacem-grid-spacing) * .5);
+    cursor: default;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--pacem-zindex-balloon);
+    display: block;
+
+    &::before,
+    &::after {
+        position: absolute;
+        display: block;
+        width: var(--pacem-grid-spacing);
+        height: var(--pacem-grid-spacing);
+    }
+
+    &::after {
+        content: "";
+        clip-path: polygon(33% 20%, 33% 80%, 80% 50%);
+    }
+
+    &::before {
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='rgba(0,0,0,0.1)'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
+        z-index: -1;
+    }
+
+    /* .BalloonColorize(balloon, default) */
+    color: var(--pacem--bl-ink);
+    background-color: rgb(from var(--pacem--bl) r g b / var(--pacem--bl-a));
+
+    :--blur & {
+        backdrop-filter: blur(12px);
+    }
+
+    &.balloon-border {
+        border-color: rgb(from var(--pacem--bl) r g b / var(--pacem--bl-a));
+    }
+
+    &::after {
+        background-color: rgb(from var(--pacem--bl) r g b / min(.99, var(--pacem--bl-a)));
+    }
+
+    &.balloon-corners > .corner {
+        &.top-left {
+            border-top-color: rgb(from var(--pacem--bl) r g b);
+            border-left-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &.top-right {
+            border-top-color: rgb(from var(--pacem--bl) r g b);
+            border-right-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &.bottom-right {
+            border-bottom-color: rgb(from var(--pacem--bl) r g b);
+            border-right-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &.bottom-left {
+            border-bottom-color: rgb(from var(--pacem--bl) r g b);
+            border-left-color: rgb(from var(--pacem--bl) r g b);
+        }
+    }
+
+    &.pacem-contextmenu {
+        .pacem-button,
+        pacem-button {
+            border-radius: var(--pacem-border-radius);
+            background-color: transparent;
+        }
+
+        .pacem-button:not(.pacem-disabled),
+        pacem-button:not(.pacem-disabled) {
+            color: var(--pacem--bl-ink);
+        }
+
+        .pacem-button:not(.pacem-disabled):hover,
+        .pacem-button:not(.pacem-disabled):focus,
+        pacem-button:not(.pacem-disabled):hover,
+        pacem-button:not(.pacem-disabled):focus {
+            background-color: var(--pacem--bl-h);
+            color: var(--pacem--bl-ih);
+        }
+
+        .pacem-button:not(.pacem-disabled):active,
+        pacem-button:not(.pacem-disabled):active {
+            background-color: var(--pacem-color-balloon-emphasis);
+        }
+    }
+    /* (end of .BalloonColorize) */
+
+    &.balloon-right {
+        &::before,
+        &::after {
+            left: calc(-2 * var(--pacem-grid-spacing) / 3);
+            transform: rotateZ(180deg);
+        }
+
+        &::before {
+            filter: drop-shadow(2px -2px 1px #000);
+        }
+    }
+
+    &.balloon-left {
+        &::before,
+        &::after {
+            right: calc(-2 * var(--pacem-grid-spacing) / 3);
+        }
+
+        &::before {
+            filter: drop-shadow(2px 2px 1px #000);
+        }
+    }
+
+    &.balloon-top {
+        &::before,
+        &::after {
+            bottom: calc(-2 * var(--pacem-grid-spacing) / 3);
+            transform: rotateZ(90deg);
+        }
+
+        &::before {
+            filter: drop-shadow(3.25px 0 2px #000);
+        }
+    }
+
+    &.balloon-bottom {
+        &::before,
+        &::after {
+            top: calc(-2 * var(--pacem-grid-spacing) / 3);
+            transform: rotateZ(-90deg);
+        }
+
+        &::before {
+            filter: drop-shadow(2px 0 1px #000);
+        }
+    }
+
+    &:is(.balloon-top, .balloon-bottom) {
+        &.balloon-start::after,
+        &.balloon-start::before {
+            left: var(--pacem-balloon-tail-inset);
+        }
+
+        &.balloon-end::after,
+        &.balloon-end::before {
+            right: var(--pacem-balloon-tail-inset);
+        }
+
+        &.balloon-center::after,
+        &.balloon-center::before {
+            left: 50%;
+            margin-left: calc(var(--pacem-grid-spacing) / -2);
+        }
+    }
+
+    &:is(.balloon-right, .balloon-left) {
+        &.balloon-start::after,
+        &.balloon-start::before {
+            top: var(--pacem-balloon-tail-inset);
+        }
+
+        &.balloon-end::after,
+        &.balloon-end::before {
+            bottom: var(--pacem-balloon-tail-inset);
+        }
+
+        &.balloon-center::after,
+        &.balloon-center::before {
+            top: 50%;
+            margin-top: calc(var(--pacem-grid-spacing) / -2);
+        }
+    }
+
+    &.balloon-corners {
+        &::part(corner-topleft),
+        &::part(corner-topright),
+        &::part(corner-bottomright),
+        &::part(corner-bottomleft),
+        > .corner {
+            width: calc(var(--pacem-grid-spacing) / 4);
+            height: calc(var(--pacem-grid-spacing) / 4);
+            border: 2px solid transparent;
+            position: absolute;
+            pointer-events: none;
+        }
+
+        &::part(corner-topleft),
+        > .corner.top-left {
+            top: -1px;
+            left: -1px;
+        }
+
+        &::part(corner-topright),
+        > .corner.top-right {
+            top: -1px;
+            right: -1px;
+        }
+
+        &::part(corner-bottomright),
+        > .corner.bottom-right {
+            bottom: -1px;
+            right: -1px;
+        }
+
+        &::part(corner-bottomleft),
+        > .corner.bottom-left {
+            bottom: -1px;
+            left: -1px;
+        }
+    }
+
+    box-shadow: var(--pacem-shadow-balloon);
+}
+/* #endregion */
+
+/* #region INSIDE FORM FIELD: .BalloonColorize(primary), before the dropdown rules (as in Less) */
+pacem-balloon.pacem-field-tooltip {
+    --pacem--bl: var(--pacem-color-primary);
+    --pacem--bl-ink: var(--pacem-color-primary-inverse);
+    --pacem--bl-h: var(--pacem-color-primary-hover);
+    --pacem--bl-ih: var(--pacem-color-primary-inverse-hover);
+    --pacem--bl-a: 1;
+    color: var(--pacem--bl-ink);
+    background-color: rgb(from var(--pacem--bl) r g b / var(--pacem--bl-a));
+
+    &.balloon-border {
+        border-color: rgb(from var(--pacem--bl) r g b / var(--pacem--bl-a));
+    }
+
+    &::after {
+        background-color: rgb(from var(--pacem--bl) r g b / min(.99, var(--pacem--bl-a)));
+    }
+
+    &.balloon-corners {
+        &::part(corner-topleft) {
+            border-top-color: rgb(from var(--pacem--bl) r g b);
+            border-left-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &::part(corner-topright) {
+            border-top-color: rgb(from var(--pacem--bl) r g b);
+            border-right-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &::part(corner-bottomright) {
+            border-bottom-color: rgb(from var(--pacem--bl) r g b);
+            border-right-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &::part(corner-bottomleft) {
+            border-bottom-color: rgb(from var(--pacem--bl) r g b);
+            border-left-color: rgb(from var(--pacem--bl) r g b);
+        }
+    }
+
+    &.pacem-contextmenu {
+        .pacem-button,
+        pacem-button {
+            border-radius: var(--pacem-border-radius);
+            background-color: transparent;
+        }
+
+        .pacem-button:not(.pacem-disabled),
+        pacem-button:not(.pacem-disabled) {
+            color: var(--pacem--bl-ink);
+        }
+
+        .pacem-button:not(.pacem-disabled):hover,
+        .pacem-button:not(.pacem-disabled):focus,
+        pacem-button:not(.pacem-disabled):hover,
+        pacem-button:not(.pacem-disabled):focus {
+            background-color: var(--pacem--bl-h);
+            color: var(--pacem--bl-ih);
+        }
+
+        /* (Less referenced an undefined `--pacem-color-{color}-emphasis` here) */
+        .pacem-button:not(.pacem-disabled):active,
+        pacem-button:not(.pacem-disabled):active {
+            background-color: transparent;
+        }
+    }
+}
+
+pacem-balloon.pacem-field-tooltip code {
+    color: var(--pacem-color-primary-inverse);
+    background-color: rgb(from var(--pacem-color-primary-inverse) r g b / 10%);
+}
+/* #endregion */
+
+pacem-balloon.dropdown,
+pacem-balloon.balloon-dropdown {
+    padding: 0;
+    background-color: var(--pacem-color-suggest-back);
+    border: 2px solid var(--pacem-color-suggest-border);
+    min-width: 175px;
+    min-height: auto;
+
+    :--light-scheme & {
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+}
+
+/*#region for PANELS CONTAINED IN A BALLOON */
+.balloon-panel {
+    margin: calc(var(--pacem-grid-spacing) * -.5);
+}
+/*#endregion*/
+
+pacem-balloon {
+    --pacem--bl-off: calc(var(--pacem-balloon-tail-size) / 12);
+    --pacem--bl-ptr: calc(var(--pacem-balloon-tail-size) / 2);
+    /* default state */
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(.6667);
+
+    &.balloon-dropdown,
+    &.dropdown {
+        transform: scaleY(.6667);
+    }
+
+    &.balloon-in {
+        opacity: 1;
+    }
+
+    &.balloon-right {
+        transform: translateX(calc(-1 * var(--pacem--bl-off))) scale(.6667);
+
+        &.balloon-start { transform-origin: left top; }
+        &.balloon-end { transform-origin: left bottom; }
+        &.balloon-center { transform-origin: left 50%; }
+
+        &.balloon-in {
+            transform: translateX(var(--pacem--bl-ptr));
+        }
+    }
+
+    &.balloon-left {
+        transform: translateX(var(--pacem--bl-off)) scale(.6667);
+
+        &.balloon-start { transform-origin: right top; }
+        &.balloon-end { transform-origin: right bottom; }
+        &.balloon-center { transform-origin: right 50%; }
+
+        &.balloon-in {
+            transform: translateX(calc(-1 * var(--pacem--bl-ptr)));
+        }
+    }
+
+    &.balloon-top {
+        transform: translateY(var(--pacem--bl-off)) scale(.6667);
+
+        &.balloon-start { transform-origin: left bottom; }
+        &.balloon-end { transform-origin: right bottom; }
+        &.balloon-center { transform-origin: 50% bottom; }
+
+        &.dropdown {
+            transform: translateY(calc(var(--pacem--bl-off) * 2)) scaleY(.6667);
+            transform-origin: 50% bottom;
+        }
+
+        &.balloon-in {
+            transform: translateY(calc(-1 * var(--pacem--bl-ptr)));
+        }
+    }
+
+    &.balloon-bottom {
+        transform: translateY(calc(-1 * var(--pacem--bl-off))) scale(.6667);
+
+        &.balloon-start { transform-origin: left top; }
+        &.balloon-end { transform-origin: right top; }
+        &.balloon-center { transform-origin: 50% top; }
+
+        &.dropdown {
+            transform: translateY(calc(var(--pacem--bl-off) * -2)) scaleY(.6667);
+            transform-origin: 50% top;
+        }
+
+        &.balloon-in {
+            transform: translateY(var(--pacem--bl-ptr));
+        }
+    }
+}
+
+/* colors */
+pacem-balloon {
+    &.balloon-root { --pacem--bl: var(--pacem-color-root); --pacem--bl-ink: var(--pacem-color-root-inverse); --pacem--bl-h: var(--pacem-color-root-hover); --pacem--bl-ih: var(--pacem-color-root-inverse-hover); }
+    &.balloon-root-container { --pacem--bl: var(--pacem-color-root-container); --pacem--bl-ink: var(--pacem-color-root-container-inverse); --pacem--bl-h: var(--pacem-color-root-container-hover); --pacem--bl-ih: var(--pacem-color-root-container-inverse-hover); }
+    &.balloon-background { --pacem--bl: var(--pacem-color-background); --pacem--bl-ink: var(--pacem-color-background-inverse); --pacem--bl-h: var(--pacem-color-background-hover); --pacem--bl-ih: var(--pacem-color-background-inverse-hover); }
+    &.balloon-background-container { --pacem--bl: var(--pacem-color-background-container); --pacem--bl-ink: var(--pacem-color-background-container-inverse); --pacem--bl-h: var(--pacem-color-background-container-hover); --pacem--bl-ih: var(--pacem-color-background-container-inverse-hover); }
+    &.balloon-invert { --pacem--bl: var(--pacem-color-invert); --pacem--bl-ink: var(--pacem-color-invert-inverse); --pacem--bl-h: var(--pacem-color-invert-hover); --pacem--bl-ih: var(--pacem-color-invert-inverse-hover); }
+    &.balloon-invert-container { --pacem--bl: var(--pacem-color-invert-container); --pacem--bl-ink: var(--pacem-color-invert-container-inverse); --pacem--bl-h: var(--pacem-color-invert-container-hover); --pacem--bl-ih: var(--pacem-color-invert-container-inverse-hover); }
+    &.balloon-primary { --pacem--bl: var(--pacem-color-primary); --pacem--bl-ink: var(--pacem-color-primary-inverse); --pacem--bl-h: var(--pacem-color-primary-hover); --pacem--bl-ih: var(--pacem-color-primary-inverse-hover); }
+    &.balloon-primary-container { --pacem--bl: var(--pacem-color-primary-container); --pacem--bl-ink: var(--pacem-color-primary-container-inverse); --pacem--bl-h: var(--pacem-color-primary-container-hover); --pacem--bl-ih: var(--pacem-color-primary-container-inverse-hover); }
+    &.balloon-secondary { --pacem--bl: var(--pacem-color-secondary); --pacem--bl-ink: var(--pacem-color-secondary-inverse); --pacem--bl-h: var(--pacem-color-secondary-hover); --pacem--bl-ih: var(--pacem-color-secondary-inverse-hover); }
+    &.balloon-secondary-container { --pacem--bl: var(--pacem-color-secondary-container); --pacem--bl-ink: var(--pacem-color-secondary-container-inverse); --pacem--bl-h: var(--pacem-color-secondary-container-hover); --pacem--bl-ih: var(--pacem-color-secondary-container-inverse-hover); }
+    &.balloon-accent { --pacem--bl: var(--pacem-color-accent); --pacem--bl-ink: var(--pacem-color-accent-inverse); --pacem--bl-h: var(--pacem-color-accent-hover); --pacem--bl-ih: var(--pacem-color-accent-inverse-hover); }
+    &.balloon-accent-container { --pacem--bl: var(--pacem-color-accent-container); --pacem--bl-ink: var(--pacem-color-accent-container-inverse); --pacem--bl-h: var(--pacem-color-accent-container-hover); --pacem--bl-ih: var(--pacem-color-accent-container-inverse-hover); }
+    &.balloon-info { --pacem--bl: var(--pacem-color-info); --pacem--bl-ink: var(--pacem-color-info-inverse); --pacem--bl-h: var(--pacem-color-info-hover); --pacem--bl-ih: var(--pacem-color-info-inverse-hover); }
+    &.balloon-info-container { --pacem--bl: var(--pacem-color-info-container); --pacem--bl-ink: var(--pacem-color-info-container-inverse); --pacem--bl-h: var(--pacem-color-info-container-hover); --pacem--bl-ih: var(--pacem-color-info-container-inverse-hover); }
+    &.balloon-success { --pacem--bl: var(--pacem-color-success); --pacem--bl-ink: var(--pacem-color-success-inverse); --pacem--bl-h: var(--pacem-color-success-hover); --pacem--bl-ih: var(--pacem-color-success-inverse-hover); }
+    &.balloon-success-container { --pacem--bl: var(--pacem-color-success-container); --pacem--bl-ink: var(--pacem-color-success-container-inverse); --pacem--bl-h: var(--pacem-color-success-container-hover); --pacem--bl-ih: var(--pacem-color-success-container-inverse-hover); }
+    &.balloon-warning { --pacem--bl: var(--pacem-color-warning); --pacem--bl-ink: var(--pacem-color-warning-inverse); --pacem--bl-h: var(--pacem-color-warning-hover); --pacem--bl-ih: var(--pacem-color-warning-inverse-hover); }
+    &.balloon-warning-container { --pacem--bl: var(--pacem-color-warning-container); --pacem--bl-ink: var(--pacem-color-warning-container-inverse); --pacem--bl-h: var(--pacem-color-warning-container-hover); --pacem--bl-ih: var(--pacem-color-warning-container-inverse-hover); }
+    &.balloon-danger { --pacem--bl: var(--pacem-color-danger); --pacem--bl-ink: var(--pacem-color-danger-inverse); --pacem--bl-h: var(--pacem-color-danger-hover); --pacem--bl-ih: var(--pacem-color-danger-inverse-hover); }
+    &.balloon-danger-container { --pacem--bl: var(--pacem-color-danger-container); --pacem--bl-ink: var(--pacem-color-danger-container-inverse); --pacem--bl-h: var(--pacem-color-danger-container-hover); --pacem--bl-ih: var(--pacem-color-danger-container-inverse-hover); }
+    &.balloon-error { --pacem--bl: var(--pacem-color-error); --pacem--bl-ink: var(--pacem-color-error-inverse); --pacem--bl-h: var(--pacem-color-error-hover); --pacem--bl-ih: var(--pacem-color-error-inverse-hover); }
+    &.balloon-error-container { --pacem--bl: var(--pacem-color-error-container); --pacem--bl-ink: var(--pacem-color-error-container-inverse); --pacem--bl-h: var(--pacem-color-error-container-hover); --pacem--bl-ih: var(--pacem-color-error-container-inverse-hover); }
+    &.balloon-disabled { --pacem--bl: var(--pacem-color-disabled); --pacem--bl-ink: var(--pacem-color-disabled-inverse); --pacem--bl-h: var(--pacem-color-disabled-hover); --pacem--bl-ih: var(--pacem-color-disabled-inverse-hover); }
+    &.balloon-disabled-container { --pacem--bl: var(--pacem-color-disabled-container); --pacem--bl-ink: var(--pacem-color-disabled-container-inverse); --pacem--bl-h: var(--pacem-color-disabled-container-hover); --pacem--bl-ih: var(--pacem-color-disabled-container-inverse-hover); }
+    &.balloon-green { --pacem--bl: var(--pacem-color-green); --pacem--bl-ink: var(--pacem-color-green-inverse); --pacem--bl-h: var(--pacem-color-green-hover); --pacem--bl-ih: var(--pacem-color-green-inverse-hover); }
+    &.balloon-green-container { --pacem--bl: var(--pacem-color-green-container); --pacem--bl-ink: var(--pacem-color-green-container-inverse); --pacem--bl-h: var(--pacem-color-green-container-hover); --pacem--bl-ih: var(--pacem-color-green-container-inverse-hover); }
+    &.balloon-yellow { --pacem--bl: var(--pacem-color-yellow); --pacem--bl-ink: var(--pacem-color-yellow-inverse); --pacem--bl-h: var(--pacem-color-yellow-hover); --pacem--bl-ih: var(--pacem-color-yellow-inverse-hover); }
+    &.balloon-yellow-container { --pacem--bl: var(--pacem-color-yellow-container); --pacem--bl-ink: var(--pacem-color-yellow-container-inverse); --pacem--bl-h: var(--pacem-color-yellow-container-hover); --pacem--bl-ih: var(--pacem-color-yellow-container-inverse-hover); }
+    &.balloon-brown { --pacem--bl: var(--pacem-color-brown); --pacem--bl-ink: var(--pacem-color-brown-inverse); --pacem--bl-h: var(--pacem-color-brown-hover); --pacem--bl-ih: var(--pacem-color-brown-inverse-hover); }
+    &.balloon-brown-container { --pacem--bl: var(--pacem-color-brown-container); --pacem--bl-ink: var(--pacem-color-brown-container-inverse); --pacem--bl-h: var(--pacem-color-brown-container-hover); --pacem--bl-ih: var(--pacem-color-brown-container-inverse-hover); }
+    &.balloon-red { --pacem--bl: var(--pacem-color-red); --pacem--bl-ink: var(--pacem-color-red-inverse); --pacem--bl-h: var(--pacem-color-red-hover); --pacem--bl-ih: var(--pacem-color-red-inverse-hover); }
+    &.balloon-red-container { --pacem--bl: var(--pacem-color-red-container); --pacem--bl-ink: var(--pacem-color-red-container-inverse); --pacem--bl-h: var(--pacem-color-red-container-hover); --pacem--bl-ih: var(--pacem-color-red-container-inverse-hover); }
+    &.balloon-pink { --pacem--bl: var(--pacem-color-pink); --pacem--bl-ink: var(--pacem-color-pink-inverse); --pacem--bl-h: var(--pacem-color-pink-hover); --pacem--bl-ih: var(--pacem-color-pink-inverse-hover); }
+    &.balloon-pink-container { --pacem--bl: var(--pacem-color-pink-container); --pacem--bl-ink: var(--pacem-color-pink-container-inverse); --pacem--bl-h: var(--pacem-color-pink-container-hover); --pacem--bl-ih: var(--pacem-color-pink-container-inverse-hover); }
+    &.balloon-blue { --pacem--bl: var(--pacem-color-blue); --pacem--bl-ink: var(--pacem-color-blue-inverse); --pacem--bl-h: var(--pacem-color-blue-hover); --pacem--bl-ih: var(--pacem-color-blue-inverse-hover); }
+    &.balloon-blue-container { --pacem--bl: var(--pacem-color-blue-container); --pacem--bl-ink: var(--pacem-color-blue-container-inverse); --pacem--bl-h: var(--pacem-color-blue-container-hover); --pacem--bl-ih: var(--pacem-color-blue-container-inverse-hover); }
+    &.balloon-orange { --pacem--bl: var(--pacem-color-orange); --pacem--bl-ink: var(--pacem-color-orange-inverse); --pacem--bl-h: var(--pacem-color-orange-hover); --pacem--bl-ih: var(--pacem-color-orange-inverse-hover); }
+    &.balloon-orange-container { --pacem--bl: var(--pacem-color-orange-container); --pacem--bl-ink: var(--pacem-color-orange-container-inverse); --pacem--bl-h: var(--pacem-color-orange-container-hover); --pacem--bl-ih: var(--pacem-color-orange-container-inverse-hover); }
+    &.balloon-purple { --pacem--bl: var(--pacem-color-purple); --pacem--bl-ink: var(--pacem-color-purple-inverse); --pacem--bl-h: var(--pacem-color-purple-hover); --pacem--bl-ih: var(--pacem-color-purple-inverse-hover); }
+    &.balloon-purple-container { --pacem--bl: var(--pacem-color-purple-container); --pacem--bl-ink: var(--pacem-color-purple-container-inverse); --pacem--bl-h: var(--pacem-color-purple-container-hover); --pacem--bl-ih: var(--pacem-color-purple-container-inverse-hover); }
+    &.balloon-teal { --pacem--bl: var(--pacem-color-teal); --pacem--bl-ink: var(--pacem-color-teal-inverse); --pacem--bl-h: var(--pacem-color-teal-hover); --pacem--bl-ih: var(--pacem-color-teal-inverse-hover); }
+    &.balloon-teal-container { --pacem--bl: var(--pacem-color-teal-container); --pacem--bl-ink: var(--pacem-color-teal-container-inverse); --pacem--bl-h: var(--pacem-color-teal-container-hover); --pacem--bl-ih: var(--pacem-color-teal-container-inverse-hover); }
+    &.balloon-gray { --pacem--bl: var(--pacem-color-gray); --pacem--bl-ink: var(--pacem-color-gray-inverse); --pacem--bl-h: var(--pacem-color-gray-hover); --pacem--bl-ih: var(--pacem-color-gray-inverse-hover); }
+    &.balloon-gray-container { --pacem--bl: var(--pacem-color-gray-container); --pacem--bl-ink: var(--pacem-color-gray-container-inverse); --pacem--bl-h: var(--pacem-color-gray-container-hover); --pacem--bl-ih: var(--pacem-color-gray-container-inverse-hover); }
+    /* legacy */
+    &.balloon-alternative,
+    &.balloon-contrast { --pacem--bl: var(--pacem-color-background); --pacem--bl-ink: var(--pacem-color-default); --pacem--bl-h: var(--pacem-color-background-hover); --pacem--bl-ih: var(--pacem-color-default-hover); }
+
+}
+
+pacem-balloon:--colored {
+    --pacem--bl-a: .95;
+    color: var(--pacem--bl-ink);
+    background-color: rgb(from var(--pacem--bl) r g b / var(--pacem--bl-a));
+
+    &.balloon-border {
+        border-color: rgb(from var(--pacem--bl) r g b / var(--pacem--bl-a));
+    }
+
+    &::after {
+        background-color: rgb(from var(--pacem--bl) r g b / min(.99, var(--pacem--bl-a)));
+    }
+
+    &.balloon-corners {
+        &::part(corner-topleft) {
+            border-top-color: rgb(from var(--pacem--bl) r g b);
+            border-left-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &::part(corner-topright) {
+            border-top-color: rgb(from var(--pacem--bl) r g b);
+            border-right-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &::part(corner-bottomright) {
+            border-bottom-color: rgb(from var(--pacem--bl) r g b);
+            border-right-color: rgb(from var(--pacem--bl) r g b);
+        }
+
+        &::part(corner-bottomleft) {
+            border-bottom-color: rgb(from var(--pacem--bl) r g b);
+            border-left-color: rgb(from var(--pacem--bl) r g b);
+        }
+    }
+
+    &.pacem-contextmenu {
+        .pacem-button,
+        pacem-button {
+            border-radius: var(--pacem-border-radius);
+            background-color: transparent;
+        }
+
+        .pacem-button:not(.pacem-disabled),
+        pacem-button:not(.pacem-disabled) {
+            color: var(--pacem--bl-ink);
+        }
+
+        .pacem-button:not(.pacem-disabled):hover,
+        .pacem-button:not(.pacem-disabled):focus,
+        pacem-button:not(.pacem-disabled):hover,
+        pacem-button:not(.pacem-disabled):focus {
+            background-color: var(--pacem--bl-h);
+            color: var(--pacem--bl-ih);
+        }
+
+        /* (Less referenced an undefined `--pacem-color-{color}-emphasis` here) */
+        .pacem-button:not(.pacem-disabled):active,
+        pacem-button:not(.pacem-disabled):active {
+            background-color: transparent;
+        }
+    }
+}
+
+pacem-balloon.balloon-contrast {
+    --pacem--bl-a: 1;
+}
+
+pacem-balloon.balloon-notip,
+pacem-balloon.dropdown,
+pacem-balloon.balloon-dropdown {
+    &.balloon-top {
+        margin-top: var(--pacem--bl-ptr);
+    }
+
+    &.balloon-bottom {
+        margin-top: calc(-1 * var(--pacem--bl-ptr));
+    }
+
+    &.balloon-left {
+        margin-left: var(--pacem--bl-ptr);
+    }
+
+    &.balloon-right {
+        margin-left: calc(-1 * var(--pacem--bl-ptr));
+    }
+
+    &::after,
+    &::before {
+        display: none;
+    }
+}
+
+.pacem-animations pacem-balloon {
+    /* default state */
+    transition: transform .15s ease-out, opacity .15s;
+
+    &.balloon-on {
+        transition: transform .15s ease-out, opacity .15s, top .15s ease-in-out, left .15s ease-in-out;
+
+        &.dropdown,
+        &.balloon-dropdown {
+            transition: transform .15s ease-out, opacity .15s;
+        }
+    }
+
+    &.balloon-out {
+        transition: transform .1s ease-in, opacity .1s;
+    }
+}

package/src/ui/binder.css

@@ -0,0 +1,28 @@
+svg.pacem-binder {
+    path {
+        stroke: var(--pacem-color-default);
+        opacity: 0.25;
+        stroke-width: 2px;
+    }
+
+    &.binder-thin path {
+        opacity: 0.1;
+        stroke-width: 1px;
+    }
+
+    &.binder-thick path {
+        opacity: 0.75;
+        stroke-width: 2px;
+    }
+
+    &.binder-thicker path {
+        opacity: 0.75;
+        stroke-width: 3px;
+    }
+
+    &.binder-primary path { stroke: var(--pacem-color-primary); }
+    &.binder-success path { stroke: var(--pacem-color-success); }
+    &.binder-danger path { stroke: var(--pacem-color-danger); }
+    &.binder-warning path { stroke: var(--pacem-color-warning); }
+    &.binder-accent path { stroke: var(--pacem-color-accent); }
+}

package/src/ui/blade.css

@@ -0,0 +1,83 @@
+pacem-blade {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 33vw;
+    box-sizing: border-box;
+    transform: translate(100%, 0);
+    z-index: calc(var(--pacem-zindex-lightbox) - 1);
+    overflow: auto;
+    border-radius: var(--pacem-border-radius) 0 0 var(--pacem-border-radius);
+
+    &.blade-slim {
+        width: 25vw;
+    }
+
+    /* mobile-compat: shouldn't be used */
+    &.blade-full {
+        width: 100vw;
+    }
+
+    &.blade-large {
+        width: 50vw;
+    }
+
+    &.blade-right {
+        left: auto;
+    }
+
+    &.blade-left {
+        left: 0;
+        right: auto;
+        transform: translate(-100%, 0);
+        border-radius: 0 var(--pacem-border-radius) var(--pacem-border-radius) 0;
+    }
+
+    &.blade-open {
+        transform: translate(0, 0);
+    }
+
+    @media screen and (--pacem-sm) {
+        min-width: 600px;
+
+        &.blade-slim {
+            min-width: 480px;
+        }
+    }
+}
+
+@media screen and (--pacem-lg) {
+    /* layout with a header? */
+    .pacem-body[header]:not(.sticky-header-fade) pacem-blade.blade-inset {
+        top: var(--pacem-layout-header-height);
+    }
+
+    .pacem-body[headbar] pacem-blade.blade-inset {
+        top: var(--pacem-layout-toolbar-height);
+    }
+
+    .pacem-body[header][headbar]:not(.sticky-header-fade) pacem-blade.blade-inset {
+        top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height));
+    }
+
+    .pacem-body[footbar] pacem-blade.blade-inset {
+        bottom: var(--pacem-layout-toolbar-height);
+    }
+
+    .pacem-body[footer] pacem-blade.blade-inset {
+        bottom: var(--pacem-layout-footer-height);
+    }
+
+    .pacem-body[bigfooter] pacem-blade.blade-inset {
+        bottom: var(--pacem-layout-bigfooter-height);
+    }
+
+    .pacem-body[footbar][footer] pacem-blade.blade-inset {
+        bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height));
+    }
+}
+
+.pacem-animations pacem-blade {
+    transition: transform .3s var(--pacem-easing-in-out-sine) 0s !important;
+}