@fest-lib/veela 1.0.12 → 1.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@fest-lib/veela",
     "description": "fest-lib Veela: CSS tokens, --c2 color functions, Agate.UX, SCSS + runtime loaders",
-    "version": "1.0.12",
+    "version": "1.0.14",
     "license": "MIT",
     "type": "module",
     "sideEffects": true,

package/src/scss/ui/_code-highlight.scss

@@ -14,7 +14,7 @@
         overflow: hidden;
         margin: 0;
         padding: 0;
-        padding-inline-start: var(--code-gutter, 0px);
+        /* WHY: gutter lives on the host; JS copies that padding. A second gutter here wraps earlier. */
         box-sizing: border-box;
         color-scheme: inherit;
         color: light-dark(#1f2328, #e6edf3);
@@ -40,7 +40,7 @@
         font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
         font-kerning: none;
         font-variation-settings: inherit;
-        line-height: var(--code-line-height, inherit);
+        line-height: max(1.35em, var(--code-line-height, 1.45));
         letter-spacing: inherit;
         word-spacing: inherit;
         tab-size: inherit;
@@ -68,7 +68,9 @@
         min-inline-size: 0;
         margin: 0;
         padding: 0;
-        white-space: pre;
+        white-space: inherit;
+        word-break: inherit;
+        overflow-wrap: inherit;
         overflow: visible;
     }
 
@@ -81,7 +83,10 @@
     .code-highlight-source:has(+ .code-highlight-overlay),
     .code-highlight-host > .code-highlight-source {
         display: block;
-        line-height: var(--code-line-height, normal);
+        white-space: pre;
+        word-break: normal;
+        overflow-wrap: normal;
+        line-height: max(1.35em, var(--code-line-height, 1.45));
         padding-inline-start: var(--code-gutter, 0px);
         font-variant-ligatures: none;
         font-kerning: none;
@@ -97,8 +102,13 @@
         -webkit-text-fill-color: transparent;
     }
 
-    pre:has(> .code-highlight-overlay) > code::selection,
-    .code-highlight-source::selection {
+    .code-highlight-source.code-highlight-inplace {
+        color: light-dark(#1f2328, #e6edf3);
+        -webkit-text-fill-color: currentColor;
+    }
+
+    pre:has(> .code-highlight-overlay) > code:not(.code-highlight-inplace)::selection,
+    .code-highlight-source:not(.code-highlight-inplace)::selection {
         background-color: color-mix(in oklab, #79c0ff 32%, transparent);
         color: transparent;
         -webkit-text-fill-color: transparent;
@@ -126,7 +136,8 @@
         pointer-events: none;
     }
 
-    .code-highlight-overlay {
+    .code-highlight-overlay,
+    .code-highlight-inplace {
         .hljs-comment,
         .hljs-quote {
             color: light-dark(#656d76, #8b949e);

package/src/scss/ui/components/window.scss

@@ -598,4 +598,94 @@
         opacity: 0.9;
     }
 }
+
+/*
+ * WHY: Inline `container-type: size` on `.content-handler` + print `height: auto` sizes
+ * the box as empty (size containment). Chrome then paginates blank pages.
+ * INVARIANT: Print kills size/paint containment and lets slotted markdown grow.
+ */
+@media print {
+    :host(ui-window) {
+        display: block !important;
+        position: static !important;
+        inset: auto !important;
+        transform: none !important;
+        overflow: visible !important;
+        contain: none !important;
+        container-type: normal !important;
+        isolation: auto !important;
+        inline-size: 100% !important;
+        max-inline-size: 100% !important;
+        block-size: auto !important;
+        min-block-size: 0 !important;
+        max-block-size: none !important;
+        height: auto !important;
+        min-height: 0 !important;
+        max-height: none !important;
+        box-shadow: none !important;
+        border: none !important;
+        border-radius: 0 !important;
+        background: #fff !important;
+        color: #000 !important;
+    }
+
+    .window-container {
+        display: block !important;
+        overflow: visible !important;
+        contain: none !important;
+        isolation: auto !important;
+        inline-size: 100% !important;
+        block-size: auto !important;
+        height: auto !important;
+        min-block-size: 0 !important;
+        max-block-size: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        background: #fff !important;
+        color: #000 !important;
+    }
+
+    .title-handler,
+    .window-resizer,
+    .footer-handler {
+        display: none !important;
+    }
+
+    .content-handler,
+    :host(ui-window[managed]) .content-handler,
+    :host(ui-window[native-mode]) .content-handler,
+    :host(ui-window[data-native-active]) .content-handler {
+        display: block !important;
+        position: static !important;
+        transform: none !important;
+        contain: none !important;
+        container-type: normal !important;
+        overflow: visible !important;
+        isolation: auto !important;
+        flex: none !important;
+        inline-size: 100% !important;
+        block-size: auto !important;
+        min-block-size: 0 !important;
+        max-block-size: none !important;
+        height: auto !important;
+        background: #fff !important;
+        color: #000 !important;
+    }
+
+    .content-handler ::slotted(*),
+    :host(ui-window[managed]) .content-handler ::slotted(*),
+    :host(ui-window[native-mode]) .content-handler ::slotted(*),
+    :host(ui-window[data-native-active]) .content-handler ::slotted(*) {
+        display: block !important;
+        flex: none !important;
+        overflow: visible !important;
+        contain: none !important;
+        inline-size: 100% !important;
+        max-inline-size: 100% !important;
+        block-size: auto !important;
+        min-block-size: 0 !important;
+        max-block-size: none !important;
+        height: auto !important;
+    }
+}
 }