@ghostly-ui/core 0.2.1 → 0.2.3

package/dist/ghostly.css

@@ -1,8 +1,9 @@
 /* ============================================================
    GHOSTLY — Zero-config skeleton loaders
 
-   Usage: add data-ghostly="shimmer|pulse|wave" to any container.
-   All leaf elements inside become skeleton blocks automatically.
+   Philosophy: NEVER override layout properties. Only hide content
+   and add skeleton background. The component's own CSS defines
+   all sizing, spacing, and border-radius.
    ============================================================ */
 
 /* --- Custom properties (override these to customize) --- */
@@ -31,25 +32,7 @@
 }
 
 /* ============================================================
-   1. SKELETON TARGET — shared base for all skeleton elements
-   ============================================================ */
-
-/* All targetable elements inside a ghostly container */
-[data-ghostly] :where(
-  h1, h2, h3, h4, h5, h6,
-  p, span, a, li, td, th, dt, dd,
-  label, legend, figcaption, caption, summary,
-  blockquote, cite, q, em, strong, small, mark, code, pre,
-  button, input, textarea, select, option,
-  fieldset, dialog, details, address,
-  time, abbr, sub, sup, del, ins,
-  img, svg, video, canvas, picture, iframe
-) {
-  --_ghostly-target: 1;
-}
-
-/* ============================================================
-   2. CONTAINER — Blocks interaction while loading
+   1. CONTAINER — Blocks interaction while loading
    ============================================================ */
 
 [data-ghostly] {
@@ -59,7 +42,8 @@
 }
 
 /* ============================================================
-   3. TEXT ELEMENTS — Become opaque skeleton blocks
+   2. TEXT ELEMENTS — Hide text, show skeleton background
+   Only override visual properties. NEVER touch layout.
    ============================================================ */
 
 [data-ghostly] :where(
@@ -74,81 +58,160 @@
   color: transparent !important;
   background-color: var(--ghostly-color) !important;
   background-image: none !important;
-  border-radius: var(--ghostly-radius) !important;
   border-color: transparent !important;
   box-shadow: none !important;
   text-decoration: none !important;
+  text-shadow: none !important;
   outline: none !important;
+  /* Prevent empty elements from collapsing vertically */
   min-height: 1em;
-  min-width: 2rem;
+  /* Inline elements need display block/inline-block to respect min-height */
+  display: var(--_ghostly-display, revert);
 }
 
-/* Headings get proportional min-height */
-[data-ghostly] :where(h1) { min-height: 1.75em; min-width: 40%; }
-[data-ghostly] :where(h2) { min-height: 1.5em; min-width: 50%; }
-[data-ghostly] :where(h3) { min-height: 1.3em; min-width: 55%; }
-[data-ghostly] :where(h4, h5, h6) { min-height: 1.15em; min-width: 45%; }
-
-/* Paragraphs simulate multi-line text */
-[data-ghostly] :where(p) { min-height: 3em; min-width: 80%; }
+/* Make inline elements (span, a, em, etc.) respect min-height/width */
+[data-ghostly] :where(
+  span, a, em, strong, small, mark, code, abbr,
+  cite, q, sub, sup, del, ins, time, label
+) {
+  --_ghostly-display: inline-block;
+}
 
-/* Code blocks need more height */
-[data-ghostly] :where(pre) { min-height: 5em; min-width: 100%; }
+/* ── 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;
+}
 
-/* Inputs keep their shape */
-[data-ghostly] :where(input, textarea, select) {
-  min-height: 2.5rem;
-  min-width: 6rem;
+/* 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;
 }
 
-/* Buttons keep their shape */
-[data-ghostly] :where(button) {
-  min-height: 2.25rem;
-  min-width: 5rem;
+/* 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%;
 }
 
-/* ============================================================
-   4. CUSTOM LINE COUNT — data-ghostly-lines="N"
-   ============================================================ */
+/* 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; }
+[data-ghostly] :where(input, textarea, select) { min-width: 6rem; }
 
-[data-ghostly] :where([data-ghostly-lines="1"]) { min-height: 1em; }
-[data-ghostly] :where([data-ghostly-lines="2"]) { min-height: 2em; }
-[data-ghostly] :where([data-ghostly-lines="3"]) { min-height: 3em; }
-[data-ghostly] :where([data-ghostly-lines="4"]) { min-height: 4em; }
-[data-ghostly] :where([data-ghostly-lines="5"]) { min-height: 5em; }
-[data-ghostly] :where([data-ghostly-lines="6"]) { min-height: 6em; }
-[data-ghostly] :where([data-ghostly-lines="7"]) { min-height: 7em; }
-[data-ghostly] :where([data-ghostly-lines="8"]) { min-height: 8em; }
+/* 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(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; }
 
 /* ============================================================
-   5. MEDIA ELEMENTS — Become solid skeleton blocks
+   3. MEDIA ELEMENTS — Hide content, show skeleton block
+   Preserves ALL existing dimensions and border-radius.
    ============================================================ */
 
 [data-ghostly] :where(img, svg, video, canvas, picture, iframe) {
-  color: transparent !important;
   background-color: var(--ghostly-color) !important;
-  border-radius: var(--ghostly-radius) !important;
   border-color: transparent !important;
   box-shadow: none !important;
 }
 
-/* Hide actual content (images, video frames) */
+/* Hide image content without changing dimensions */
 [data-ghostly] :where(img) {
-  object-position: -9999px;
+  color: transparent !important;
+  object-position: -9999px !important;
 }
 
 [data-ghostly] :where(video, iframe) {
   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.
+   ============================================================ */
+
+[data-ghostly] :where(div:empty) {
   background-color: var(--ghostly-color) !important;
 }
 
-/* Images without explicit dimensions — use aspect-ratio */
-[data-ghostly] :where(img:not([width]):not([style*="width"]), picture:not([width])) {
-  aspect-ratio: 16/9;
-  width: 100%;
+/* ============================================================
+   5. BORDER RADIUS — Use computed value, fallback to default
+   Never override existing border-radius from the component.
+   ============================================================ */
+
+/* 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,
+  [data-ghostly] p, [data-ghostly] span, [data-ghostly] a,
+  [data-ghostly] li, [data-ghostly] td, [data-ghostly] th,
+  [data-ghostly] button, [data-ghostly] input,
+  [data-ghostly] textarea, [data-ghostly] select,
+  [data-ghostly] code, [data-ghostly] pre,
+  [data-ghostly] img, [data-ghostly] svg,
+  [data-ghostly] video, [data-ghostly] canvas {
+    border-radius: var(--ghostly-radius);
+  }
 }
 
-/* Custom aspect ratio via data attribute */
+/* ============================================================
+   6. CUSTOM LINE COUNT — data-ghostly-lines="N"
+   ============================================================ */
+
+[data-ghostly] :where([data-ghostly-lines="1"]) { min-height: 1em; }
+[data-ghostly] :where([data-ghostly-lines="2"]) { min-height: 2em; }
+[data-ghostly] :where([data-ghostly-lines="3"]) { min-height: 3em; }
+[data-ghostly] :where([data-ghostly-lines="4"]) { min-height: 4em; }
+[data-ghostly] :where([data-ghostly-lines="5"]) { min-height: 5em; }
+[data-ghostly] :where([data-ghostly-lines="6"]) { min-height: 6em; }
+[data-ghostly] :where([data-ghostly-lines="7"]) { min-height: 7em; }
+[data-ghostly] :where([data-ghostly-lines="8"]) { min-height: 8em; }
+
+/* ============================================================
+   7. CUSTOM ASPECT RATIO — data-ghostly-ratio
+   ============================================================ */
+
 [data-ghostly] :where([data-ghostly-ratio="1/1"]) { aspect-ratio: 1/1 !important; }
 [data-ghostly] :where([data-ghostly-ratio="4/3"]) { aspect-ratio: 4/3 !important; }
 [data-ghostly] :where([data-ghostly-ratio="16/9"]) { aspect-ratio: 16/9 !important; }
@@ -156,35 +219,16 @@
 [data-ghostly] :where([data-ghostly-ratio="3/4"]) { aspect-ratio: 3/4 !important; }
 [data-ghostly] :where([data-ghostly-ratio="9/16"]) { aspect-ratio: 9/16 !important; }
 
-/* SVG icons (typically small) */
-[data-ghostly] :where(svg) {
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-}
-
 /* ============================================================
-   6. DECORATIVE — Strip visual noise
+   8. DECORATIVE — Strip visual noise
    ============================================================ */
 
 [data-ghostly] :where(hr) {
   border-color: var(--ghostly-color) !important;
 }
 
-[data-ghostly] :where(
-  [class*="badge"],
-  [class*="chip"],
-  [class*="tag"],
-  [class*="avatar"]
-) {
-  color: transparent !important;
-  background-color: var(--ghostly-color) !important;
-  background-image: none !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-
 /* ============================================================
-   7. EXCLUSIONS — data-ghostly-ignore restores original styles
+   9. EXCLUSIONS — data-ghostly-ignore restores original styles
    ============================================================ */
 
 [data-ghostly] [data-ghostly-ignore],
@@ -198,17 +242,15 @@
   pointer-events: auto;
   user-select: auto;
   min-height: initial;
-  min-width: initial;
   animation: none !important;
 }
 
 /* ============================================================
-   8. ANIMATIONS — Applied via --_ghostly-target marker
+   10. ANIMATIONS
    ============================================================ */
 
 /* --- Shimmer — gradient sweep left to right --- */
 
-[data-ghostly='shimmer'] :where([style*="--_ghostly-target"]),
 [data-ghostly='shimmer'] :where(
   h1, h2, h3, h4, h5, h6,
   p, span, a, li, td, th, dt, dd,
@@ -217,7 +259,8 @@
   button, input, textarea, select, option,
   fieldset, dialog, details, address,
   time, abbr, sub, sup, del, ins,
-  img, svg, video, canvas, picture, iframe
+  img, svg, video, canvas, picture, iframe,
+  div:empty
 ) {
   background: linear-gradient(
     90deg,
@@ -246,7 +289,8 @@
   button, input, textarea, select, option,
   fieldset, dialog, details, address,
   time, abbr, sub, sup, del, ins,
-  img, svg, video, canvas, picture, iframe
+  img, svg, video, canvas, picture, iframe,
+  div:empty
 ) {
   animation: ghostly-pulse var(--ghostly-speed) ease-in-out infinite !important;
 }
@@ -266,7 +310,8 @@
   button, input, textarea, select, option,
   fieldset, dialog, details, address,
   time, abbr, sub, sup, del, ins,
-  img, svg, video, canvas, picture, iframe
+  img, svg, video, canvas, picture, iframe,
+  div:empty
 ) {
   animation: ghostly-wave var(--ghostly-speed) ease-in-out infinite !important;
 }
@@ -295,7 +340,7 @@
 [data-ghostly='wave'] > :nth-child(n+13) { animation-delay: 960ms !important; }
 
 /* ============================================================
-   9. SMOOTH TRANSITION — fade out when loading ends
+   11. SMOOTH TRANSITION — fade out when loading ends
    ============================================================ */
 
 [data-ghostly-smooth] :where(
@@ -316,7 +361,7 @@
 }
 
 /* ============================================================
-   10. ACCESSIBILITY
+   12. ACCESSIBILITY
    ============================================================ */
 
 @media (prefers-reduced-motion: reduce) {

package/package.json

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