@ai-ecoverse/slicc-spectrum 1.104.2 → 1.104.3

package/README.md

@@ -550,7 +550,7 @@ A rejection shows the error card with its sentence (a check without a `preview`
 #### `<slicc-sprinkle>`
 
 A SLICC sprinkle (`.shtml`), as a panel or, with `inline`, as a dip in the chat that grows to fit, even when it loads out of view (the frame measures itself on load, after icons and fonts arrive, and on every resize).
-A dip has a tab-like handle: drag it into the dock (or onto a rail, or use its open-as-panel button, `data-action="detach-sprinkle"`) and it lives on as a sprinkle panel, with a note in the chat where it was and a **Show** button (`data-action="show-sprinkle"`) that brings the panel forward; which dips are out is saved in `slicc-ui.dips`.
+A dip has a tab-like handle: drag it into the dock (or onto a rail, or use its open-as-panel button, `data-action="detach-sprinkle"`, an extra-small action button whose tap target pads out to 24 × 24 px on a coarse pointer while it looks the same) and it lives on as a sprinkle panel, with a note in the chat where it was and a **Show** button (`data-action="show-sprinkle"`) that brings the panel forward; which dips are out is saved in `slicc-ui.dips`.
 It runs in a sandboxed frame (`allow-scripts` only) with SLICC's sprinkle theme (the `--s2-*` tokens and `.sprinkle-*` classes), the app's fonts, and Lucide icons (`<i data-lucide>`, `LucideIcons.render()`).
 It talks back through `slicc.lick({ action, data })`, which reaches the owning cone as a `sprinkle` lick, and, when the port has `call`, reads files and keeps state (see [Sprinkle bridge](#sprinkle-bridge)).
 Panel sprinkles sit at the top of the right rail with their Lucide icon.

package/dist/slicc-ui.js

@@ -43813,7 +43813,7 @@ var SliccSprinkle = class extends ThemedElement {
     :host {
       display: block;
       height: 100%;
-      background: var(--spectrum-background-layer-2-color);
+      background: var(--swc-background-layer-2-color);
     }
     :host([inline]) {
       height: auto;
@@ -43833,27 +43833,34 @@ var SliccSprinkle = class extends ThemedElement {
       outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
     }
     .frame {
-      border: 1px solid var(--spectrum-gray-200);
-      background: var(--spectrum-background-layer-1-color);
+      border: var(--swc-border-width-100) solid var(--swc-gray-200);
+      background: var(--swc-background-layer-1-color);
     }
     .handle {
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: var(--swc-spacing-85);
       width: max-content;
       max-width: 100%;
       box-sizing: border-box;
-      height: 28px;
-      padding: 0 4px 0 6px;
-      border: 1px solid var(--spectrum-gray-200);
+      height: calc(var(--swc-component-height-75) + var(--swc-spacing-75));
+      padding-block: 0;
+      padding-inline: var(--swc-spacing-85) var(--swc-spacing-75);
+      border: var(--swc-border-width-100) solid var(--swc-gray-200);
       border-bottom: 0;
-      border-radius: 6px 6px 0 0;
-      background: var(--spectrum-background-layer-1-color);
-      color: var(--spectrum-neutral-subdued-content-color-default);
-      font-size: var(--spectrum-font-size-75);
+      border-radius: var(--swc-corner-radius-300) var(--swc-corner-radius-300) 0 0;
+      background: var(--swc-background-layer-1-color);
+      color: var(--swc-neutral-subdued-content-color-default);
+      font-size: var(--swc-font-size-75);
       cursor: grab;
       user-select: none;
     }
+    @media (pointer: coarse) {
+      .handle [data-action='detach-sprinkle'] {
+        display: inline-flex;
+        padding: var(--swc-spacing-50);
+      }
+    }
     .handle:active {
       cursor: grabbing;
     }
@@ -43861,20 +43868,20 @@ var SliccSprinkle = class extends ThemedElement {
       fill: currentColor;
     }
     .handle .name {
-      color: var(--spectrum-neutral-content-color-default);
+      color: var(--swc-neutral-content-color-default);
     }
     .moved {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      border: 1px dashed var(--spectrum-gray-300);
-      border-radius: 8px;
-      color: var(--spectrum-neutral-subdued-content-color-default);
-      font-size: var(--spectrum-font-size-75);
+      gap: var(--swc-spacing-100);
+      padding: var(--swc-spacing-100) var(--swc-spacing-200);
+      border: var(--swc-border-width-100) dashed var(--swc-gray-300);
+      border-radius: var(--swc-corner-radius-medium-default);
+      color: var(--swc-neutral-subdued-content-color-default);
+      font-size: var(--swc-font-size-75);
     }
     .view-only {
-      color: var(--spectrum-neutral-subdued-content-color-default);
+      color: var(--swc-neutral-subdued-content-color-default);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;