@alacris/ui 0.1.0 → 0.2.0

package/README.md

@@ -123,10 +123,10 @@ Component modules have side effects (they call `define()`). Theme, motion and to
 
 ## In this repository
 
-This package lives in `starter/` of the [Alacris repo](https://github.com/bmartel/alacris) so the library and the design system can be developed together. They **publish separately**: `@alacris/ui` has its own version, changelog, and npm release. A commit that only changes this folder does not cut an Alacris library release.
+This package lives in `ui/` of the [Alacris repo](https://github.com/bmartel/alacris) so the library and the design system can be developed together. They **publish separately**: `@alacris/ui` has its own version, changelog, and npm release. A commit that only changes this folder does not cut an Alacris library release. `starter/` in the same repo is a usage example and install guide, not this package.
 
 ```
-starter/
+ui/
   src/           the published modules
   types/         hand-written .d.ts
   demo/          kitchen-sink app (not published)
@@ -139,8 +139,9 @@ From a clone of the repo:
 
 ```bash
 npm install
-npm run demo        # http://localhost:5173/starter/
-cd starter && npm test
+npm run demo        # kitchen sink: http://localhost:5173/ui/
+                    # starter app:  http://localhost:5173/starter/
+cd ui && npm test
 ```
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Themeable design system for Alacris — Material defaults, sixty-eight custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {
@@ -64,7 +64,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bmartel/alacris.git",
-    "directory": "starter"
+    "directory": "ui"
   },
   "homepage": "https://bmartel.github.io/alacris/ui/getting-started/",
   "bugs": {

package/src/components/ui-nav-item.js

@@ -90,6 +90,7 @@ const styles = css`
     font: ${t.font};
     letter-spacing: ${t.tracking};
     color: ${t.labelFg};
+    white-space: nowrap;
     transition: color ${sys.duration.short4} ${sys.easing.standard};
   }
   .selected .label { color: ${t.labelFgActive}; }

package/src/components/ui-search.js

@@ -115,8 +115,10 @@ const styles = css`
     position: relative;
     display: grid;
     place-items: center;
-    inline-size: 48px;
-    block-size: 48px;
+    /* Cap at 48px for the 56px bar; shrink with --ui-search-height so a
+       compact field in an app bar can match the 40px icon buttons. */
+    inline-size: min(48px, ${t.height});
+    block-size: min(48px, ${t.height});
   }
   .leads > * { grid-area: 1 / 1; }
   .lead-slot {