@ghostly-ui/core 0.2.3 → 0.2.5

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,76 +64,87 @@
   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 */
+/* Hide placeholders and ::before pseudo-content visibility */
+[data-ghostly] :where(input, textarea)::placeholder {
+  color: transparent !important;
+  opacity: 0 !important;
+}
+
+/* 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;
 }
 
-/* ── Layout preservation ──
-   The critical problem: when text is empty, flex children collapse to 0 width.
-   Solution: force non-leaf containers to grow, and text elements to fill.
-   Uses !important to beat utility-class frameworks (Tailwind, etc). */
-
-/* Non-leaf containers (divs wrapping text/images) must expand in flex/grid.
-   flex-grow:1 makes them fill available space instead of collapsing. */
-[data-ghostly] div,
-[data-ghostly] section,
-[data-ghostly] article,
-[data-ghostly] main,
-[data-ghostly] aside,
-[data-ghostly] header,
-[data-ghostly] footer,
-[data-ghostly] nav {
-  flex-grow: 1 !important;
-  min-width: 0 !important;
-}
+/* ============================================================
+   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.
+   ============================================================ */
 
-/* Leaf containers (empty divs used as placeholders like avatars)
-   should NOT grow — they have their own explicit dimensions. */
-[data-ghostly] div:empty {
-  flex-grow: 0 !important;
-  flex-shrink: 0 !important;
-}
+/* 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'; }
 
-/* Text elements: fill full width of their parent */
-[data-ghostly] :where(h1, h2, h3, h4, h5, h6, p, pre,
-  blockquote, figcaption, caption, summary, address) {
-  width: 100%;
-}
+/* Inline text: shorter content */
+[data-ghostly] :where(span, a, em, strong, small, label, time, code)::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0'; }
 
-/* Inline-turned-block: reasonable minimums */
-[data-ghostly] :where(span, a, em, strong, small, label, time, code) { min-width: 3rem; }
-[data-ghostly] :where(button) { min-width: 5rem; }
+/* 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) {
@@ -141,7 +153,6 @@
   box-shadow: none !important;
 }
 
-/* Hide image content without changing dimensions */
 [data-ghostly] :where(img) {
   color: transparent !important;
   object-position: -9999px !important;
@@ -151,23 +162,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) {
@@ -175,12 +182,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,
@@ -196,7 +200,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; }
@@ -209,7 +213,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; }
@@ -220,7 +224,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) {
@@ -228,7 +232,7 @@
 }
 
 /* ============================================================
-   9. EXCLUSIONS — data-ghostly-ignore restores original styles
+   11. EXCLUSIONS — data-ghostly-ignore
    ============================================================ */
 
 [data-ghostly] [data-ghostly-ignore],
@@ -245,11 +249,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,
@@ -279,7 +287,7 @@
   100% { background-position: -100% 0; }
 }
 
-/* --- Pulse — opacity fade in/out --- */
+/* --- Pulse --- */
 
 [data-ghostly='pulse'] :where(
   h1, h2, h3, h4, h5, h6,
@@ -300,7 +308,7 @@
   50% { opacity: 0.4; }
 }
 
-/* --- Wave — cascading pulse with stagger --- */
+/* --- Wave --- */
 
 [data-ghostly='wave'] :where(
   h1, h2, h3, h4, h5, h6,
@@ -324,7 +332,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; }
@@ -340,7 +347,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(
@@ -361,7 +368,7 @@
 }
 
 /* ============================================================
-   12. ACCESSIBILITY
+   14. ACCESSIBILITY
    ============================================================ */
 
 @media (prefers-reduced-motion: reduce) {

package/package.json

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