anentrypoint-design 0.0.359 → 0.0.360

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.359",
+  "version": "0.0.360",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/shell.js

@@ -27,12 +27,15 @@ export function Brand({ name = '247420', leaf } = {}) {
  * @param {string} [props.tone=''] - semantic color tone (empty = neutral).
  * @param {'sm'|'md'|'lg'} [props.size='md']
  * @param {boolean} [props.tag=false] - true renders a rectangular sentence-case variant for dense data (drops the all-caps pill styling). Orthogonal to tone.
+ * @param {Function} [props.onRemove] - if given, renders a trailing dismiss (x) button that calls onRemove() on click. Omitted entirely (no button) when not supplied.
  * @param {*} props.children
  * @returns {*} webjsx vnode
  */
-export function Chip({ tone = '', size = 'md', tag = false, children }) {
+export function Chip({ tone = '', size = 'md', tag = false, onRemove, children }) {
     const sizeCls = size === 'sm' ? ' chip--sm' : (size === 'lg' ? ' chip--lg' : '');
-    return h('span', { class: 'chip' + sizeCls + (tag ? ' chip--tag' : '') + (tone ? ' tone-' + tone : '') }, children);
+    return h('span', { class: 'chip' + sizeCls + (tag ? ' chip--tag' : '') + (tone ? ' tone-' + tone : '') + (onRemove ? ' ds-chip-removable' : '') },
+        children,
+        onRemove ? h('button', { type: 'button', class: 'ds-chip-remove-btn', 'aria-label': 'Remove', onclick: (e) => { e.stopPropagation(); onRemove(); } }, Icon('x')) : null);
 }
 
 /**

package/src/css/app-shell/primitives.css

@@ -175,6 +175,25 @@
 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
 .chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
 
+/* Removable chip — a trailing dismiss (x) button for editable tag/filter
+   chip lists (session tags, saved-search chips). Reuses the chip's own
+   tone/size; the button itself stays neutral-at-rest, per the standing
+   color-reserved-for-meaning convention, tinting only on hover/focus. */
+.chip.ds-chip-removable { padding-right: var(--space-1); }
+.ds-chip-remove-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 16px; height: 16px; margin-left: var(--space-half);
+  padding: 0; border: none; border-radius: var(--r-pill);
+  background: transparent; color: currentColor; opacity: 0.7;
+  cursor: pointer;
+}
+.ds-chip-remove-btn:hover, .ds-chip-remove-btn:focus-visible { opacity: 1; background: color-mix(in oklab, currentColor 16%, transparent); }
+.ds-chip-remove-btn svg { width: 10px; height: 10px; }
+@media (pointer: coarse) {
+  .ds-chip-remove-btn { width: 24px; height: 24px; margin-left: 0; }
+  .ds-chip-remove-btn svg { width: 12px; height: 12px; }
+}
+
 /* ds-pill — plain neutral chip, distinct from the toned .ds-badge/.chip family
    (gmsniff's .pill: a bare rounded label with no semantic tone). */
 .ds-pill {