npm - @hraness/design-kit - Versions diffs - 0.35.2 → 0.35.3 - Mend

@hraness/design-kit 0.35.2 → 0.35.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.35.2",
+  "version": "0.35.3",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",

package/portfolio-inventory.json CHANGED Viewed

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.35.2"
+      "version": "0.35.3"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/mockups/client.tsx CHANGED Viewed

@@ -229,73 +229,84 @@ export function ModeShowcase<S extends string, M extends string, O extends strin
   return (
     <figure
       aria-label={label?.(surface) ?? `Illustration of ${surface.label.toLowerCase()}`}
-      className={joinMockupClasses("hkm-showcase", className)}
+      className={joinMockupClasses("hkm-showcase", "hkm-modes", className)}
       data-hkm-theme={theme}
       data-nosnippet=""
     >
-      <div className="hkm-showcase-controls">
-        {surfaces.length > 1 ? (
-          <div aria-label="Surface" className="hkm-tabs" role="tablist">
-            {surfaces.map((entry) => (
-              <button
-                aria-controls={`${id}-panel`}
-                aria-selected={entry.id === surface.id}
-                className="hkm-tab"
-                id={`${id}-tab-${entry.id}`}
-                key={entry.id}
-                onClick={() => setSurfaceId(entry.id)}
-                onKeyDown={onTabKey}
-                ref={(element) => {
-                  if (element === null) tabs.current.delete(entry.id);
-                  else tabs.current.set(entry.id, element);
-                }}
-                role="tab"
-                tabIndex={entry.id === surface.id ? 0 : -1}
-                type="button"
-              >
-                {entry.label}
-              </button>
-            ))}
-          </div>
-        ) : null}
-        <div className="hkm-showcase-settings">
-          <div className="hkm-showcase-row">
-            <span className="hkm-showcase-label" id={`${id}-mode`}>{modeLabel}</span>
-            <div aria-labelledby={`${id}-mode`} className="hkm-segmented" role="group">
-              {modes.map((entry) => (
-                <button aria-pressed={entry.id === mode} key={entry.id} onClick={() => chooseMode(entry.id)} type="button">
-                  {entry.label}
-                </button>
-              ))}
-            </div>
-          </div>
-          {options === undefined ? null : (
-            <div className="hkm-showcase-row">
-              <span className="hkm-showcase-label" id={`${id}-option`}>{optionLabel}</span>
-              <div aria-labelledby={`${id}-option`} className="hkm-segmented" role="group">
-                {options.map((entry) => (
-                  <button aria-pressed={entry.id === option} disabled={optionInactive} key={entry.id} onClick={() => chooseOption(entry.id)} type="button">
-                    {entry.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
+      {surfaces.length > 1 ? (
+        <div aria-label="Surface" className="hkm-tabs hkm-folder-tabs" role="tablist">
+          {surfaces.map((entry) => (
+            <button
+              aria-controls={`${id}-panel`}
+              aria-selected={entry.id === surface.id}
+              className="hkm-tab"
+              id={`${id}-tab-${entry.id}`}
+              key={entry.id}
+              onClick={() => setSurfaceId(entry.id)}
+              onKeyDown={onTabKey}
+              ref={(element) => {
+                if (element === null) tabs.current.delete(entry.id);
+                else tabs.current.set(entry.id, element);
+              }}
+              role="tab"
+              tabIndex={entry.id === surface.id ? 0 : -1}
+              type="button"
+            >
+              {entry.label}
+            </button>
+          ))}
         </div>
-        {hint === "" ? null : <p className="hkm-showcase-hint">{hint}</p>}
-      </div>
+      ) : null}
       <div
         aria-labelledby={surfaces.length > 1 ? `${id}-tab-${surface.id}` : undefined}
-        className="hkm-showcase-stage"
-        data-hkm-animated={animated ? "" : undefined}
-        data-hkm-from={animated ? previousMode : undefined}
+        className="hkm-showcase-stage hkm-mode-panel"
         id={`${id}-panel`}
         role={surfaces.length > 1 ? "tabpanel" : undefined}
         style={{ "--hkm-page-height": `${height}px` } as CSSProperties}
       >
-        <FitToWidth minWidth={minWidth}>
-          {surface.render({ animated, mode, option, previousMode, theme })}
-        </FitToWidth>
+        <div className="hkm-showcase-controls">
+          <div className="hkm-showcase-settings">
+            <div className="hkm-showcase-row">
+              <span className="hkm-showcase-label" id={`${id}-mode`}>{modeLabel}</span>
+              <div aria-labelledby={`${id}-mode`} className="hkm-segmented" role="group">
+                {modes.map((entry) => (
+                  <button aria-pressed={entry.id === mode} key={entry.id} onClick={() => chooseMode(entry.id)} type="button">
+                    {entry.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {options === undefined ? null : (
+              <div className="hkm-showcase-row">
+                <span className="hkm-showcase-label" id={`${id}-option`}>{optionLabel}</span>
+                <div aria-labelledby={`${id}-option`} className="hkm-segmented" role="group">
+                  {options.map((entry) => (
+                    <button aria-pressed={entry.id === option} disabled={optionInactive} key={entry.id} onClick={() => chooseOption(entry.id)} type="button">
+                      {entry.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          {hint === "" ? null : <p className="hkm-showcase-hint">{hint}</p>}
+        </div>
+        <div className="hkm-mode-stage">
+          {surfaces.map((entry) => (
+            <div
+              aria-hidden={entry.id !== surface.id}
+              className="hkm-mode-surface"
+              data-hkm-animated={entry.id === surface.id && animated ? "" : undefined}
+              data-hkm-from={entry.id === surface.id && animated ? previousMode : undefined}
+              inert={entry.id !== surface.id}
+              key={entry.id}
+            >
+              <FitToWidth minWidth={minWidth}>
+                {entry.render({ animated: entry.id === surface.id && animated, mode, option, previousMode, theme })}
+              </FitToWidth>
+            </div>
+          ))}
+        </div>
       </div>
       {!hasStatus && captionText === undefined ? null : (
         <figcaption className="hkm-showcase-caption">
@@ -367,7 +378,7 @@ export function StepThrough({
   return (
     <figure aria-label={`Illustration: ${label.toLowerCase()}`} className={joinMockupClasses("hkm-showcase", "hkm-steps", className)} data-hkm-theme={theme} data-nosnippet="">
       <div className="hkm-showcase-controls">
-        <div aria-label={label} className="hkm-tabs hkm-step-tabs" role="tablist">
+        <div aria-label={label} className="hkm-tabs hkm-folder-tabs hkm-step-tabs" role="tablist">
           {steps.map((entry, position) => (
             <button
               aria-controls={`${id}-panel-${entry.id}`}

package/src/mockups.css CHANGED Viewed

@@ -2503,14 +2503,22 @@
     }
   }
-  /* Folder tabs share an edge with the stable-height walkthrough stage. */
-  .hkm-showcase.hkm-steps { gap: 0; }
+  /* Folder tabs share an edge with each showcase panel. */
+  .hkm-showcase:is(.hkm-steps, .hkm-modes) { gap: 0; }
   .hkm-showcase.hkm-steps .hkm-showcase-controls { padding: 0; border: 0; border-radius: 0; background: transparent; }
-  .hkm-showcase.hkm-steps .hkm-step-tabs { gap: 6px; margin: 0; padding: 0; border: 0; position: relative; z-index: 1; }
-  .hkm-showcase.hkm-steps .hkm-tab { min-block-size: 48px; padding: 12px 18px; border: 1px solid var(--hkm-sc-line); border-block-end: 0; border-radius: 12px 12px 0 0; background: var(--hkm-sc-field); color: var(--hkm-sc-muted); }
-  .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] { background: var(--hkm-sc-bg); color: var(--hkm-sc-fg); }
-  .hkm-showcase.hkm-steps .hkm-tab:hover { color: var(--hkm-sc-fg); }
+  .hkm-showcase .hkm-folder-tabs { gap: 6px; margin: 0; padding: 0; border: 0; position: relative; z-index: 1; }
+  .hkm-showcase .hkm-folder-tabs .hkm-tab { min-block-size: 48px; padding: 12px 18px; border: 1px solid var(--hkm-sc-line); border-block-end: 0; border-radius: 12px 12px 0 0; background: var(--hkm-sc-field); color: var(--hkm-sc-muted); }
+  .hkm-showcase .hkm-folder-tabs .hkm-tab[aria-selected="true"] { background: var(--hkm-sc-bg); color: var(--hkm-sc-fg); }
+  .hkm-showcase .hkm-folder-tabs .hkm-tab:hover { color: var(--hkm-sc-fg); }
   .hkm-showcase.hkm-steps .hkm-step-stage { display: grid; border: 1px solid var(--hkm-sc-line); border-radius: 0 12px 12px 12px; background: var(--hkm-sc-bg); margin-block-start: -1px; overflow: clip; }
+  .hkm-showcase.hkm-modes .hkm-mode-panel { border: 1px solid var(--hkm-sc-line); border-radius: 12px; background: var(--hkm-sc-bg); overflow: clip; }
+  .hkm-showcase.hkm-modes .hkm-folder-tabs + .hkm-mode-panel { border-start-start-radius: 0; margin-block-start: -1px; }
+  .hkm-showcase.hkm-modes .hkm-showcase-controls { border: 0; border-block-end: 1px solid var(--hkm-sc-line); border-radius: 0; }
+  .hkm-mode-stage { display: grid; min-inline-size: 0; }
+  .hkm-mode-surface { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
+  .hkm-mode-surface[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
+  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root,
+  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window { border: 0; border-radius: 0; box-shadow: none; }
   .hkm-step-panel { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
   .hkm-step-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
   .hkm-showcase.hkm-steps .hkm-step-panel .hkm-root { border-start-start-radius: 0; border-start-end-radius: 0; box-shadow: none; }
@@ -2520,7 +2528,7 @@
   .hkm-showcase.hkm-steps .hkm-step-button:disabled { color: var(--hkm-sc-muted); background: transparent; }
   .hkm-showcase.hkm-steps .hkm-step-button[data-hkm-primary]:disabled { background: var(--hkm-sc-field); }
   .hkm-showcase.hkm-steps .hkm-step-announcement { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-  .hkm-showcase.hkm-steps .hkm-showcase-caption { margin-block-start: 1rem; }
+  .hkm-showcase:is(.hkm-steps, .hkm-modes) .hkm-showcase-caption { margin-block-start: 1rem; }
   /* ---------------------------------------------------------------- */
   /* Motion                                                           */