@ghostly-ui/core 0.2.2 → 0.2.4

package/dist/ghostly.css

@@ -1,12 +1,14 @@
 /* ============================================================
    GHOSTLY — Zero-config skeleton loaders
 
-   Philosophy: NEVER override layout properties. Only hide content
-   and add skeleton background. The component's own CSS defines
-   all sizing, spacing, and border-radius.
+   Philosophy:
+   1. NEVER override layout properties blindly
+   2. Only hide content + add skeleton background
+   3. Use :has() to surgically fix collapsing flex children
+   4. Component's own CSS defines sizing, spacing, and radius
    ============================================================ */
 
-/* --- Custom properties (override these to customize) --- */
+/* --- Custom properties --- */
 
 :root {
   --ghostly-color: hsl(220 13% 87%);
@@ -43,7 +45,6 @@
 
 /* ============================================================
    2. TEXT ELEMENTS — Hide text, show skeleton background
-   Only override visual properties. NEVER touch layout.
    ============================================================ */
 
 [data-ghostly] :where(
@@ -63,53 +64,81 @@
   text-decoration: none !important;
   text-shadow: none !important;
   outline: none !important;
-  /* Prevent empty elements from collapsing vertically */
   min-height: 1em;
-  /* Inline elements need display block/inline-block to respect min-height */
-  display: var(--_ghostly-display, revert);
 }
 
-/* Make inline elements (span, a, em, etc.) respect min-height/width */
+/* Inline elements need inline-block to respect min-height */
 [data-ghostly] :where(
   span, a, em, strong, small, mark, code, abbr,
   cite, q, sub, sup, del, ins, time, label
 ) {
-  --_ghostly-display: inline-block;
+  display: inline-block;
 }
 
-/* ── Prevent text elements from collapsing horizontally ──
-   Since text is transparent, the element's width comes from the text
-   content. When content is empty ('') the element collapses to 0 width.
-   We use min-width to prevent this. When real (visible) content is loaded,
-   the content width will naturally exceed the min-width. */
-[data-ghostly] :where(h1) { min-width: 60%; }
-[data-ghostly] :where(h2) { min-width: 50%; }
-[data-ghostly] :where(h3) { min-width: 45%; }
-[data-ghostly] :where(h4, h5, h6) { min-width: 40%; }
-[data-ghostly] :where(p) { min-width: 80%; }
-[data-ghostly] :where(span, a, em, strong, small, label, time, code) { min-width: 3rem; }
-[data-ghostly] :where(button) { min-width: 5rem; }
+/* ============================================================
+   3. PREVENT TEXT COLLAPSE — Invisible pseudo-content
+   When text is empty (''), elements collapse to 0 width.
+   We inject invisible non-breaking spaces via ::before so the
+   element has natural width. Works with ANY layout system.
+   ============================================================ */
+
+/* Block text: inject wide invisible content */
+[data-ghostly] :where(h1)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
+[data-ghostly] :where(h2)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
+[data-ghostly] :where(h3)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
+[data-ghostly] :where(h4, h5, h6)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
+[data-ghostly] :where(p)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
+
+/* Inline text: shorter content */
+[data-ghostly] :where(span, a, em, strong, small, label, time, code)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0'; }
+
+/* Interactive: reasonable widths */
+[data-ghostly] :where(button)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
 [data-ghostly] :where(input, textarea, select) { min-width: 6rem; }
 
+/* All pseudo-content inherits transparent color so it's invisible */
+[data-ghostly] :where(h1, h2, h3, h4, h5, h6, p, span, a, li,
+  em, strong, small, mark, code, label, time, button)::before {
+  color: transparent !important;
+  visibility: hidden;
+  display: inline;
+  height: 0;
+}
+
 /* Headings: proportional min-height */
 [data-ghostly] :where(h1) { min-height: 1.75em; }
 [data-ghostly] :where(h2) { min-height: 1.5em; }
 [data-ghostly] :where(h3) { min-height: 1.3em; }
 [data-ghostly] :where(h4, h5, h6) { min-height: 1.15em; }
-
-/* Paragraphs: taller to simulate multi-line text */
-[data-ghostly] :where(p) { min-height: 3em; }
-
-/* Code blocks: taller */
+[data-ghostly] :where(p) { min-height: 1em; }
 [data-ghostly] :where(pre) { min-height: 5em; }
-
-/* Interactive elements: reasonable minimums */
 [data-ghostly] :where(input, textarea, select) { min-height: 2.5rem; }
 [data-ghostly] :where(button) { min-height: 2.25rem; }
 
 /* ============================================================
-   3. MEDIA ELEMENTS — Hide content, show skeleton block
-   Preserves ALL existing dimensions and border-radius.
+   4. FLEX/GRID LAYOUT FIX — Surgical, using :has()
+   Only expand containers that CONTAIN text elements.
+   Empty divs (avatars, icons) are left alone.
+   This is safe for sidebars, fixed columns, etc.
+   ============================================================ */
+
+/* Containers holding text elements should grow in flex layouts.
+   :has() ensures we ONLY target divs that wrap text, not fixed-size ones. */
+[data-ghostly] :where(
+  div, section, article, aside, header, footer, nav, main
+):has(> :where(h1, h2, h3, h4, h5, h6, p, span, a, button, input, label)) {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+/* Empty containers (avatar placeholders etc): NEVER grow */
+[data-ghostly] :where(div:empty, span:empty) {
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+}
+
+/* ============================================================
+   5. MEDIA ELEMENTS — Hide content, preserve dimensions
    ============================================================ */
 
 [data-ghostly] :where(img, svg, video, canvas, picture, iframe) {
@@ -118,7 +147,6 @@
   box-shadow: none !important;
 }
 
-/* Hide image content without changing dimensions */
 [data-ghostly] :where(img) {
   color: transparent !important;
   object-position: -9999px !important;
@@ -128,23 +156,19 @@
   opacity: 0;
 }
 
-/* SVG: hide strokes/fills but keep size */
 [data-ghostly] :where(svg) {
   color: transparent !important;
   fill: transparent !important;
   stroke: transparent !important;
 }
 
-/* Only add min-size for SVG icons that might be empty */
 [data-ghostly] :where(svg:empty) {
   min-height: 1.5rem;
   min-width: 1.5rem;
 }
 
 /* ============================================================
-   4. EMPTY CONTAINERS — Style divs that act as placeholders
-   When a component renders an empty div instead of an img
-   (e.g. avatar placeholder), it should still show skeleton.
+   6. EMPTY CONTAINERS — Skeleton background on placeholders
    ============================================================ */
 
 [data-ghostly] :where(div:empty) {
@@ -152,12 +176,9 @@
 }
 
 /* ============================================================
-   5. BORDER RADIUS — Use computed value, fallback to default
-   Never override existing border-radius from the component.
+   7. BORDER RADIUS — Lowest specificity, component CSS wins
    ============================================================ */
 
-/* Apply default radius ONLY to elements that don't have one set.
-   We use a very low specificity so any component CSS wins. */
 @layer ghostly-defaults {
   [data-ghostly] h1, [data-ghostly] h2, [data-ghostly] h3,
   [data-ghostly] h4, [data-ghostly] h5, [data-ghostly] h6,
@@ -173,7 +194,7 @@
 }
 
 /* ============================================================
-   6. CUSTOM LINE COUNT — data-ghostly-lines="N"
+   8. CUSTOM LINE COUNT — data-ghostly-lines="N"
    ============================================================ */
 
 [data-ghostly] :where([data-ghostly-lines="1"]) { min-height: 1em; }
@@ -186,7 +207,7 @@
 [data-ghostly] :where([data-ghostly-lines="8"]) { min-height: 8em; }
 
 /* ============================================================
-   7. CUSTOM ASPECT RATIO — data-ghostly-ratio
+   9. CUSTOM ASPECT RATIO — data-ghostly-ratio
    ============================================================ */
 
 [data-ghostly] :where([data-ghostly-ratio="1/1"]) { aspect-ratio: 1/1 !important; }
@@ -197,7 +218,7 @@
 [data-ghostly] :where([data-ghostly-ratio="9/16"]) { aspect-ratio: 9/16 !important; }
 
 /* ============================================================
-   8. DECORATIVE — Strip visual noise
+   10. DECORATIVE — Strip visual noise
    ============================================================ */
 
 [data-ghostly] :where(hr) {
@@ -205,7 +226,7 @@
 }
 
 /* ============================================================
-   9. EXCLUSIONS — data-ghostly-ignore restores original styles
+   11. EXCLUSIONS — data-ghostly-ignore
    ============================================================ */
 
 [data-ghostly] [data-ghostly-ignore],
@@ -222,11 +243,15 @@
   animation: none !important;
 }
 
+[data-ghostly] [data-ghostly-ignore]::before {
+  content: none !important;
+}
+
 /* ============================================================
-   10. ANIMATIONS
+   12. ANIMATIONS
    ============================================================ */
 
-/* --- Shimmer — gradient sweep left to right --- */
+/* --- Shimmer --- */
 
 [data-ghostly='shimmer'] :where(
   h1, h2, h3, h4, h5, h6,
@@ -256,7 +281,7 @@
   100% { background-position: -100% 0; }
 }
 
-/* --- Pulse — opacity fade in/out --- */
+/* --- Pulse --- */
 
 [data-ghostly='pulse'] :where(
   h1, h2, h3, h4, h5, h6,
@@ -277,7 +302,7 @@
   50% { opacity: 0.4; }
 }
 
-/* --- Wave — cascading pulse with stagger --- */
+/* --- Wave --- */
 
 [data-ghostly='wave'] :where(
   h1, h2, h3, h4, h5, h6,
@@ -301,7 +326,6 @@
   100% { opacity: 1; }
 }
 
-/* Stagger direct children for cascading effect */
 [data-ghostly='wave'] > :nth-child(1) { animation-delay: 0ms !important; }
 [data-ghostly='wave'] > :nth-child(2) { animation-delay: 80ms !important; }
 [data-ghostly='wave'] > :nth-child(3) { animation-delay: 160ms !important; }
@@ -317,7 +341,7 @@
 [data-ghostly='wave'] > :nth-child(n+13) { animation-delay: 960ms !important; }
 
 /* ============================================================
-   11. SMOOTH TRANSITION — fade out when loading ends
+   13. SMOOTH TRANSITION
    ============================================================ */
 
 [data-ghostly-smooth] :where(
@@ -338,7 +362,7 @@
 }
 
 /* ============================================================
-   12. ACCESSIBILITY
+   14. ACCESSIBILITY
    ============================================================ */
 
 @media (prefers-reduced-motion: reduce) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghostly-ui/core",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Zero-config skeleton loaders. Wrap your component, done.",
   "license": "MIT",
   "type": "module",