hlmnhkl-ui 0.16.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/src/components/ScrollArea/ScrollArea.module.css

@@ -8,7 +8,9 @@
 /* Native scrolling kept; only the bar is custom */
 .viewport {
   overflow: auto;
-  overscroll-behavior: contain;
+  /* Sideways only: a swipe at the edge must not go back a page, and once the area is at its end the
+     wheel carries on to the page, as people expect. */
+  overscroll-behavior-x: contain;
   scrollbar-width: none;
   border-radius: inherit;
 }

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -19,7 +19,7 @@
   left: 0;
   z-index: -1;
   border-radius: var(--hl-radius-control);
-  background: var(--hl-color-surface);
+  background: var(--hl-color-surface-raised);
   box-shadow: var(--hl-shadow-2), 0 0 0 var(--hl-line) var(--hl-color-border);
 }
 

package/src/components/Skeleton/Skeleton.module.css

@@ -26,10 +26,31 @@
 .rect { width: 100%; height: var(--hl-skeleton-block); border-radius: var(--hl-radius-md); }
 .circle { width: var(--hl-skeleton-avatar); height: var(--hl-skeleton-avatar); border-radius: var(--hl-radius-full); }
 
+/* A sketch: the shapes as dashed pencil outlines, no fill. Text becomes dashed baselines. The lines
+   themselves fade gently instead of a shimmer, which would light up the empty box behind them. */
+.sketch {
+  background: none;
+  border: var(--hl-line) dashed var(--hl-color-border-strong);
+  animation: sketching var(--hl-motion-shimmer) var(--hl-ease-in-out) infinite alternate;
+  animation-delay: calc(var(--i, 0) * var(--hl-motion-stagger) * 3);
+}
+
+.sketch::after { display: none; }
+
+.sketch.text {
+  border-width: 0 0 var(--hl-line);
+  border-radius: 0;
+}
+
+@keyframes sketching {
+  from { border-color: var(--hl-color-border); }
+}
+
 @keyframes shimmer {
   to { transform: translateX(100%); }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .bone::after { animation: none; display: none; }
+  .sketch { animation: none; }
 }

package/src/components/Skeleton/Skeleton.tsx

@@ -11,24 +11,27 @@ export type SkeletonProps = {
   height?: CSSProperties['height']
   /** For text: number of lines. The last one is shorter, like real text. */
   lines?: number
+  /** Solid grey shapes, or a sketch: the same shapes as dashed outlines, like a pencil layout. */
+  variant?: 'solid' | 'sketch'
   /** Extra class for the root element. */
   className?: string
 }
 
 // Decorative only. Mark the loading container with aria-busy and a label instead.
-export function Skeleton({ shape = 'rect', width, height, lines = 1, className }: SkeletonProps) {
+export function Skeleton({ shape = 'rect', width, height, lines = 1, variant = 'solid', className }: SkeletonProps) {
+  const look = variant === 'sketch' && styles.sketch
   if (shape === 'text') {
     return (
       <span className={cx(styles.lines, className)} style={{ width }} aria-hidden="true">
         {Array.from({ length: lines }, (_, i) => (
           <span
             key={i}
-            className={cx(styles.bone, styles.text)}
+            className={cx(styles.bone, styles.text, look)}
             style={{ width: lines > 1 && i === lines - 1 ? '62%' : '100%', ['--i' as string]: i }}
           />
         ))}
       </span>
     )
   }
-  return <span className={cx(styles.bone, styles[shape], className)} style={{ width, height }} aria-hidden="true" />
+  return <span className={cx(styles.bone, styles[shape], look, className)} style={{ width, height }} aria-hidden="true" />
 }

package/src/components/Slider/Slider.module.css

@@ -73,7 +73,7 @@
   margin-top: calc((var(--hl-track-h) - var(--thumb)) / 2);
   border: var(--hl-line-thick) solid var(--hl-color-accent);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-color-surface-raised);
   box-shadow: var(--hl-shadow-2);
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-spring),
@@ -86,7 +86,7 @@
   box-sizing: border-box;
   border: var(--hl-line-thick) solid var(--hl-color-accent);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-color-surface-raised);
   box-shadow: var(--hl-shadow-2);
   transition:
     transform var(--hl-motion-slow) var(--hl-ease-spring),

package/src/components/Table/Table.module.css

@@ -12,7 +12,8 @@
 
 .scroll {
   overflow: auto;
-  overscroll-behavior: contain;
+  /* Sideways only: a swipe at the edge must not go back a page, but the wheel still scrolls the page. */
+  overscroll-behavior-x: contain;
 }
 
 .scroll:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--hl-line-focus) var(--hl-color-fg); }

package/src/tokens.css

@@ -23,6 +23,8 @@
   --hl-color-surface-sunken: var(--hl-gray-100);
   --hl-color-surface-hover: var(--hl-gray-150);
   --hl-color-surface-active: var(--hl-gray-200);
+  /* Something that sits on a track, such as a sliding pill or a slider thumb. */
+  --hl-color-surface-raised: var(--hl-color-surface);
   --hl-color-overlay: rgb(10 10 10 / 0.32);
   --hl-color-fg: var(--hl-gray-950);
   --hl-color-fg-muted: var(--hl-gray-600);
@@ -212,6 +214,7 @@
     --hl-color-surface-sunken: #121212;
     --hl-color-surface-hover: #262626;
     --hl-color-surface-active: #2e2e2e;
+    --hl-color-surface-raised: #2c2c2c;
     --hl-color-overlay: rgb(0 0 0 / 0.6);
     --hl-color-fg: #ececec;
     --hl-color-fg-muted: #ababab;
@@ -232,8 +235,9 @@
     --hl-color-danger-solid: #d63a2e;
     /* Darker on hover: a lighter red drops white text under 4.5:1 */
     --hl-color-danger-solid-hover: #b8302a;
-    --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
-    --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+    /* Faint: in the dark, height shows as a lighter surface, not a deep shadow. */
+    --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.2);
+    --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.15);
     --hl-shadow-3: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
     --hl-shadow-4: 0 4px 8px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6);
     color-scheme: dark;
@@ -248,6 +252,7 @@
   --hl-color-surface-sunken: #121212;
   --hl-color-surface-hover: #262626;
   --hl-color-surface-active: #2e2e2e;
+  --hl-color-surface-raised: #2c2c2c;
   --hl-color-overlay: rgb(0 0 0 / 0.6);
   --hl-color-fg: #ececec;
   --hl-color-fg-muted: #ababab;
@@ -268,8 +273,9 @@
   --hl-color-danger-solid: #d63a2e;
   /* Darker on hover: a lighter red drops white text under 4.5:1 */
   --hl-color-danger-solid-hover: #b8302a;
-  --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
-  --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);
+  /* Faint: in the dark, height shows as a lighter surface, not a deep shadow. */
+  --hl-shadow-1: 0 1px 2px rgb(0 0 0 / 0.2);
+  --hl-shadow-2: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.15);
   --hl-shadow-3: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
   --hl-shadow-4: 0 4px 8px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6);
   color-scheme: dark;
@@ -357,6 +363,8 @@
   --hl-sparkline-w: 120px;
   --hl-sparkline-h: 32px;
   --hl-tree-indent: 20px;
+  /* How long a closed folder waits under a dragged item before it opens. Intent, not motion, so reduced motion keeps it. */
+  --hl-tree-open-delay: 800ms;
   --hl-timeline-marker: 12px;
   --hl-table-check: 18px;
   /* A cell's widest, so long text wraps and a sideways-scrolling table stays readable. */