@alacris/ui 0.6.1 → 0.7.0

package/README.md

@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 {
   "imports": {
     "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.5/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.1/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.1/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.6.1/src/components/"
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.7.0/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.7.0/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.7.0/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Themeable design system for Alacris — Material defaults, sixty-nine custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {

package/src/components/ui-chip.js

@@ -11,7 +11,9 @@
 // removes itself.
 //
 // @prop  {string}  variant='assist' — assist | filter | input | suggestion
-// @prop  {boolean} selected=false   — filter chips only
+// @prop  {boolean} selected=false   — filter chips (toggle, check icon) and input chips
+//                                     (MD3 selected input chip: filled, no check;
+//                                     the app owns the state and its ARIA)
 // @prop  {boolean} disabled=false
 // @prop  {string}  icon=''          — leading icon name (check replaces it while
 //                                     a filter chip is selected)
@@ -73,7 +75,7 @@ const styles = css`
                 border-color ${sys.duration.short2} ${sys.easing.standard},
                 padding-inline-start ${sys.duration.short4} ${sys.easing.emphasized};
   }
-  .selected .control { padding-inline-start: ${sys.space(2)}; }
+  .checked .control { padding-inline-start: ${sys.space(2)}; }
   .lead {
     display: inline-flex;
     align-items: center;
@@ -159,9 +161,11 @@ define('ui-chip', {
     });
 
     const checkWhen = computed(() => variant() === 'filter' && selected());
+    const filled = computed(() => checkWhen() || (variant() === 'input' && selected()));
     const rootCls = computed(() =>
       [
-        checkWhen() ? 'selected' : '',
+        filled() ? 'selected' : '',
+        checkWhen() ? 'checked' : '',
         icon() ? 'with-lead' : '',
         dismissible() ? 'with-dismiss' : '',
       ].filter(Boolean).join(' '));

package/src/components/ui-side-sheet.js

@@ -120,6 +120,9 @@ const styles = css`
 
   .std {
     display: block;
+    /* The host is display: contents, so this panel is the flex item when the
+       sheet sits in a row: it must keep its width, not shrink to nothing. */
+    flex: none;
     block-size: 100%;
     inline-size: 0;
     overflow: hidden;