@design.estate/dees-catalog 12.3.0 → 12.4.0

package/dist_bundle/bundle.js

@@ -156991,6 +156991,16 @@ var _DeesInputWysiwyg = class _DeesInputWysiwyg extends (_a55 = DeesInputBase, _
     __publicField(this, "blockOperations");
     __publicField(this, "inputHandler");
     __publicField(this, "keyboardHandler");
+    /**
+     * Block drag and drop, public alongside `blockOperations` because the drag *interaction* has
+     * no other seam: `dragState`, the drop indicator and the global drag-over listener all live in
+     * this handler, and a native HTML5 drag sequence cannot be synthesised from script, so a host
+     * or a test that exercises dragging has to drive `handleDragStart` / `handleDragEnd` itself.
+     * Reordering a block programmatically needs none of that: `blockOperations.moveBlock(blockId,
+     * targetIndex)` is the public path for that, on the public `blocks` accessor. The remaining
+     * handlers stay private because everything they own is reachable through ordinary input and
+     * keyboard events.
+     */
     __publicField(this, "dragDropHandler");
     __publicField(this, "history");
     __publicField(this, "blurTimeout", null);
@@ -158569,6 +158579,7 @@ var _DeesForm = class _DeesForm extends (_a58 = DeesElement, _horizontalLayout_d
   constructor() {
     super(...arguments);
     __publicField(this, "name", "myform");
+    /** emits the collected form data on every child change; the only producer is `collectFormData()` */
     __publicField(this, "changeSubject", new domtools_pluginexports_exports.smartrx.rxjs.Subject());
     __publicField(this, "readyDeferred", domtools_pluginexports_exports.smartpromise.defer());
     __privateAdd(this, _horizontalLayout, __runInitializers(_init59, 8, this, false)), __runInitializers(_init59, 11, this);
@@ -218168,7 +218179,12 @@ __publicField(_DeesSimpleAppDash, "styles", [themeDefaultStyles, cssManager.defa
     .controlbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--dees-color-border-subtle); background: var(--dees-color-bg-secondary); font-size: 11px; color: var(--dees-color-text-secondary); }
     .control { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; }
     .status-terminal { border-left: 1px solid var(--dees-color-border-subtle); }
-    .status-terminal[aria-pressed='true'] { color: var(--dees-color-accent-primary); background: var(--dees-color-nav-selected); }
+    /* The on face is the catalog's toggle-on face: the shared selected surface plus the accent
+       *text* colour, not --dees-color-accent-primary, which only reaches 3.6:1 as a label. The
+       hovered rule exists because the shared button:hover rule below outranks a plain
+       [aria-pressed] rule and would wash the on state away under the pointer. */
+    .status-terminal[aria-pressed='true'] { color: var(--dees-color-link); background: var(--dees-color-nav-selected); }
+    .status-terminal[aria-pressed='true']:hover { color: var(--dees-color-link); background: color-mix(in srgb, var(--dees-color-nav-selected) 88%, var(--dees-color-text-primary)); }
     .collapsed .sidebar-header { justify-content: center; padding: 0; }
     .collapsed .sidebar-header > dees-icon, .collapsed .appName, .collapsed .section-label, .collapsed .viewTab span, .collapsed .viewTab .chevron, .collapsed .action span { display: none; }
     .collapsed .collapseToggle { margin: 0; width: 40px; height: 38px; }
@@ -220612,7 +220628,15 @@ var workspaceStyles = i`
   .toolbar-actions, .panel-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
   .panel-action { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--dees-radius-md); color: var(--dees-color-text-secondary); transition: color 140ms ease, background-color 140ms ease; }
   .panel-action:hover:not(:disabled) { color: var(--dees-color-text-primary); background: var(--dees-color-hover); }
-  .panel-action[aria-pressed=true] { color: var(--dees-color-link); background: var(--dees-color-hover); }
+  /* A panel toggle announces one state, aria-expanded, and paints it with the shared selected
+     surface — the same wash and accent label dees-button gives its pressed state. It cannot
+     reuse the hover background: an expanded toggle would then be indistinguishable from a
+     hovered collapsed one. Both on-state rules repeat the hover rule's :not(:disabled), which
+     puts them at (0,4,0) and (0,5,0) against that rule's (0,3,0), so the on face outranks hover
+     on specificity instead of on source order, and the hovered-expanded rule keeps it under the
+     pointer. A disabled toggle falls back to the base face, the way it does for hover. */
+  .panel-action.panel-toggle[aria-expanded='true']:not(:disabled) { color: var(--dees-color-link); background: var(--dees-color-nav-selected); }
+  .panel-action.panel-toggle[aria-expanded='true']:not(:disabled):hover { color: var(--dees-color-link); background: color-mix(in srgb, var(--dees-color-nav-selected) 88%, var(--dees-color-text-primary)); }
   .workspace-container { display: flex; flex: 1; min-height: 0; min-width: 0; position: relative; }
   .editor-area { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
   .filetree-panel { position: relative; flex-shrink: 0; min-width: 0; overflow: hidden; background: var(--dees-color-bg-secondary); }
@@ -223334,8 +223358,8 @@ var _DeesWorkspace = class _DeesWorkspace extends (_a142 = DeesElement, _executi
           <span class="save-state" role="status">${this.isInitializing ? "Starting\u2026" : this.initializationError ? "Connection failed" : !ready ? "Not connected" : modifiedCount ? `${modifiedCount} unsaved` : "All changes saved"}</span>
           <div class="toolbar-actions">
             <button class="panel-action" type="button" aria-label="Save all files" title="Save all files" ?disabled=${!ready || !modifiedCount} @click=${this.saveAllFiles}><dees-icon icon="lucide:Save" iconSize="16"></dees-icon></button>
-            ${this.showFileTree ? b2`<button class="panel-action" type="button" aria-label="Toggle files" aria-controls="workspace-files" aria-expanded=${!this.isFileTreeCollapsed} aria-pressed=${!this.isFileTreeCollapsed} title="Toggle files" @click=${() => this.isFileTreeCollapsed = !this.isFileTreeCollapsed}><dees-icon icon="lucide:PanelLeft" iconSize="16"></dees-icon></button>` : ""}
-            ${this.showTerminal ? b2`<button class="panel-action" type="button" aria-label="Toggle terminal" aria-controls="workspace-terminal" aria-expanded=${!this.isTerminalCollapsed} aria-pressed=${!this.isTerminalCollapsed} title="Toggle terminal" @click=${this.toggleTerminal}><dees-icon icon="lucide:PanelBottom" iconSize="16"></dees-icon></button>` : ""}
+            ${this.showFileTree ? b2`<button class="panel-action panel-toggle" type="button" aria-label="Toggle files" aria-controls="workspace-files" aria-expanded=${!this.isFileTreeCollapsed} title="Toggle files" @click=${() => this.isFileTreeCollapsed = !this.isFileTreeCollapsed}><dees-icon icon="lucide:PanelLeft" iconSize="16"></dees-icon></button>` : ""}
+            ${this.showTerminal ? b2`<button class="panel-action panel-toggle" type="button" aria-label="Toggle terminal" aria-controls="workspace-terminal" aria-expanded=${!this.isTerminalCollapsed} title="Toggle terminal" @click=${this.toggleTerminal}><dees-icon icon="lucide:PanelBottom" iconSize="16"></dees-icon></button>` : ""}
             <button class="panel-action" type="button" aria-label="Editor options" aria-haspopup="menu" title="Editor options" @click=${this.showEditorMenu}><dees-icon icon="lucide:Ellipsis" iconSize="16"></dees-icon></button>
           </div>
         </header>
@@ -225031,7 +225055,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "12.3.0",
+  version: "12.4.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };