@fest-lib/veela 0.1.1

package/src/scss/advanced/layout/_content.scss

@@ -0,0 +1,170 @@
+@use "veela-lib" as *;
+
+// ============================================================================
+// Content Component Styles
+// ============================================================================
+@mixin tabbed-content($selector: ".content-box") {
+    @at-root :host {
+        #{$selector} {
+            // ================================================================
+            // Base Layout
+            // ================================================================
+            display: grid !important;
+            grid-template-columns: subgrid;
+            grid-template-rows: subgrid;
+            grid-column: 1 / -1 !important;
+            grid-row: 1 / -1 !important;
+            z-index: 1;
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+
+            // Spacing
+            gap: 0px;
+
+            // Visual
+            background: none;
+            background-color: transparent !important;
+            border-radius: 0px;
+            box-shadow: none;
+            overflow: hidden;
+            position: relative;
+            pointer-events: none;
+
+            // Containment
+            contain: none;
+
+            // Drop menu mode
+            @at-root :host([sidebar-drop-menu]) & {
+                overflow: visible;
+            }
+        }
+
+        // ================================================================
+        // Content Container
+        // ================================================================
+        #{$selector} :where(.ui-tabbed-box-content, .content) {
+            display: grid !important;
+            flex-direction: column;
+
+            // Grid layout - align with parent grid
+            grid-template-columns:
+                /*[sidebar-col] minmax(0px, var(--sidebar-inline-grid-size, 0px))
+                [button-col] minmax(0px, var(--button-inline-size, 3rem))*/
+                [content-col] minmax(0px, 1fr);
+            grid-template-rows: var(--tabbed-grid-rows);
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+            will-change: contents;
+
+            // Spacing
+            gap: 0px;
+
+            // Visual
+            background: none;
+            background-color: transparent !important;
+            border-radius: 0px;
+            box-shadow: none;
+            align-content: start;
+            pointer-events: none;
+
+            // Performance
+            container-type: inline-size;
+            content-visibility: auto;
+            contain: strict;
+            perspective: 1000;
+            transform: translateZ(0px);
+        }
+
+        // ================================================================
+        // Slotted Content
+        // ================================================================
+        #{$selector} ::slotted(*) {
+            display: grid;
+            flex-direction: column;
+            flex-grow: 1;
+            place-content: center;
+            place-items: center;
+
+            // Grid positioning
+            grid-column: 1 / -1;
+            grid-row: content-row;
+            grid-template-columns: minmax(0px, 1fr);
+            grid-template-rows: minmax(0px, 1fr);
+
+            // Sizing
+            inline-size: stretch;
+            block-size: stretch;
+            min-inline-size: 0px;
+            min-block-size: 0px;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+
+            // Spacing
+            gap: 0px;
+
+            // Visual
+            background-color: transparent;
+            box-shadow: none;
+            line-height: var(--leading-normal, 1.5);
+            color: var(--md3-on-surface);
+            overflow: auto;
+            scrollbar-gutter: stable both-edges;
+        }
+
+        // Hidden slotted content
+        #{$selector} ::slotted([aria-hidden="true"], [hidden], :not([active])) {
+            display: none !important;
+        }
+
+        // ================================================================
+        // Responsive: Desktop Layout
+        // ================================================================
+        #{$selector} {
+            @container (min-inline-size: 800px) {
+                .content {
+                    grid-column: 2 / -1 !important;
+                }
+            }
+        }
+
+        // ================================================================
+        // Drop Menu Mode: Backdrop Overlay
+        // ================================================================
+        @at-root :host([sidebar-drop-menu]) #{$selector} {
+            // ================================================================
+            // Responsive: Desktop Layout
+            // ================================================================
+            @container (min-inline-size: 800px) {
+                .content {
+                    isolation: isolate;
+
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        inset: clamp(0px, 1cqi, 0.5rem);
+                        border-radius: 0px;
+                        background: color-mix(in oklch, var(--md3-surface) 60%, transparent);
+                        opacity: 0;
+                        pointer-events: none;
+                        transition: opacity var(--transition-medium, 0.28s) var(--ease-out);
+                        z-index: 4;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/advanced/layout/_index.scss

@@ -0,0 +1,5 @@
+@use "./normalize" as *;
+@use "./core-layout" as *;
+@use "./orientbox" as *;
+@use "./gridbox" as *;
+@use "./layout" as *;