@design.estate/dees-catalog 12.2.0 → 12.4.0

package/dist_bundle/bundle.js

@@ -62897,13 +62897,18 @@ var init_workspace = __esm({
 });
 
 // ts_web/elements/00group-button/dees-button/dees-button.demo.ts
-var clicked, demoFunc3;
+var clicked, toggled, demoFunc3;
 var init_dees_button_demo = __esm({
   "ts_web/elements/00group-button/dees-button/dees-button.demo.ts"() {
     init_dist_ts26();
     init_templates();
     init_workspace();
     clicked = /* @__PURE__ */ __name((event) => showDemoResult(event.currentTarget, `${event.target.text || "Button"} selected.`), "clicked");
+    toggled = /* @__PURE__ */ __name((event) => {
+      const button = event.target;
+      button.pressed = !button.pressed;
+      showDemoResult(button, `${button.text}: ${button.pressed ? "on" : "off"}`);
+    }, "toggled");
     demoFunc3 = /* @__PURE__ */ __name(() => demoPage("Button", "A shared shape and rhythm for actions, with a clear hierarchy of intent.", b2`
   ${demoSection("Intent", "Accent marks the primary action. Quieter treatments keep supporting actions available.", b2`
     <div class="dees-demo-row" @clicked=${clicked}>${["default", "accent", "secondary", "destructive", "outline", "ghost", "link"].map((type5) => b2`<dees-button .type=${type5} .text=${type5}></dees-button>`)}</div>
@@ -62917,6 +62922,9 @@ var init_dees_button_demo = __esm({
     ${demoOutput()}${demoCode('<dees-button size="icon" text="Settings" icon="lucide:settings"></dees-button>')}`)}
   ${demoSection("Status", "Pending, success, and error faces are inert. Disabled actions stay visible.", b2`
     <div class="dees-demo-row">${["normal", "pending", "success", "error"].map((status) => b2`<dees-button .status=${status} .text=${status}></dees-button>`)}<dees-button disabled text="Unavailable"></dees-button></div>`)}
+  ${demoSection("Toggle", "Setting pressed makes a button a toggle and announces it as one. The on face layers over the type face and stays on when the pointer leaves. A button without pressed stays a plain action.", b2`
+    <div class="dees-demo-row" @clicked=${toggled}><dees-button type="ghost" size="icon" icon="lucide:terminal" text="DevTools" .pressed=${true}></dees-button><dees-button type="ghost" icon="lucide:panel-left" text="Sidebar" .pressed=${false}></dees-button><dees-button type="outline" text="Wrap lines" .pressed=${true}></dees-button><dees-button text="Live preview" .pressed=${false}></dees-button><dees-button type="accent" text="Recording" .pressed=${true}></dees-button></div>
+    ${demoOutput()}${demoCode('<dees-button size="icon" icon="lucide:terminal" text="DevTools" .pressed=${this.devtoolsOpen} @clicked=${() => this.devtoolsOpen = !this.devtoolsOpen}></dees-button>')}`)}
   ${demoSection("Event data", "Activation uses the clicked event for pointer and keyboard input.", b2`
     <div class="dees-demo-row"><dees-button text="Inspect event" .eventDetailData=${"workspace-preview"} @clicked=${(event) => showDemoResult(event.currentTarget, event.detail)}></dees-button></div>${demoOutput()}`)}
   ${demoSection("In a form", "The same button proportions carry through to form submission.", workspaceForm())}
@@ -62927,7 +62935,7 @@ var init_dees_button_demo = __esm({
 });
 
 // ts_web/elements/00group-button/dees-button/dees-button.ts
-var _adoptedIconPosition_dec, _adoptedIcon_dec, _adoptedText_dec, _iconPosition_dec, _icon_dec, _fullWidth_dec, _insideForm_dec, _shape_dec, _status_dec, _size_dec2, _type_dec, _isHidden_dec, _disabled_dec, _eventDetailData_dec, _text_dec, _a3, _DeesButton_decorators, _init3, _text, _eventDetailData, _disabled, _isHidden, _type, _size2, _status, _shape, _insideForm, _fullWidth, _icon, _iconPosition, _adoptedText, _adoptedIcon, _adoptedIconPosition, _DeesButton, DeesButton;
+var _adoptedIconPosition_dec, _adoptedIcon_dec, _adoptedText_dec, _iconPosition_dec, _icon_dec, _fullWidth_dec, _insideForm_dec, _shape_dec, _pressed_dec, _status_dec, _size_dec2, _type_dec, _isHidden_dec, _disabled_dec, _eventDetailData_dec, _text_dec, _a3, _DeesButton_decorators, _init3, _text, _eventDetailData, _disabled, _isHidden, _type, _size2, _status, _pressed, _shape, _insideForm, _fullWidth, _icon, _iconPosition, _adoptedText, _adoptedIcon, _adoptedIconPosition, _DeesButton, DeesButton;
 var init_dees_button = __esm({
   "ts_web/elements/00group-button/dees-button/dees-button.ts"() {
     init_dist_ts26();
@@ -62951,6 +62959,9 @@ var init_dees_button = __esm({
       type: String
     })], _status_dec = [n5({
       type: String
+    })], _pressed_dec = [n5({
+      type: Boolean,
+      reflect: true
     })], _shape_dec = [n5({
       type: String
     })], _insideForm_dec = [n5({
@@ -62966,14 +62977,15 @@ var init_dees_button = __esm({
         __privateAdd(this, _type, __runInitializers(_init3, 24, this, "default")), __runInitializers(_init3, 27, this);
         __privateAdd(this, _size2, __runInitializers(_init3, 28, this, "default")), __runInitializers(_init3, 31, this);
         __privateAdd(this, _status, __runInitializers(_init3, 32, this, "normal")), __runInitializers(_init3, 35, this);
-        __privateAdd(this, _shape, __runInitializers(_init3, 36, this, "squircle")), __runInitializers(_init3, 39, this);
-        __privateAdd(this, _insideForm, __runInitializers(_init3, 40, this, false)), __runInitializers(_init3, 43, this);
-        __privateAdd(this, _fullWidth, __runInitializers(_init3, 44, this, false)), __runInitializers(_init3, 47, this);
-        __privateAdd(this, _icon, __runInitializers(_init3, 48, this)), __runInitializers(_init3, 51, this);
-        __privateAdd(this, _iconPosition, __runInitializers(_init3, 52, this, "left")), __runInitializers(_init3, 55, this);
-        __privateAdd(this, _adoptedText, __runInitializers(_init3, 56, this, "")), __runInitializers(_init3, 59, this);
-        __privateAdd(this, _adoptedIcon, __runInitializers(_init3, 60, this, "")), __runInitializers(_init3, 63, this);
-        __privateAdd(this, _adoptedIconPosition, __runInitializers(_init3, 64, this, "left")), __runInitializers(_init3, 67, this);
+        __privateAdd(this, _pressed, __runInitializers(_init3, 36, this)), __runInitializers(_init3, 39, this);
+        __privateAdd(this, _shape, __runInitializers(_init3, 40, this, "squircle")), __runInitializers(_init3, 43, this);
+        __privateAdd(this, _insideForm, __runInitializers(_init3, 44, this, false)), __runInitializers(_init3, 47, this);
+        __privateAdd(this, _fullWidth, __runInitializers(_init3, 48, this, false)), __runInitializers(_init3, 51, this);
+        __privateAdd(this, _icon, __runInitializers(_init3, 52, this)), __runInitializers(_init3, 55, this);
+        __privateAdd(this, _iconPosition, __runInitializers(_init3, 56, this, "left")), __runInitializers(_init3, 59, this);
+        __privateAdd(this, _adoptedText, __runInitializers(_init3, 60, this, "")), __runInitializers(_init3, 63, this);
+        __privateAdd(this, _adoptedIcon, __runInitializers(_init3, 64, this, "")), __runInitializers(_init3, 67, this);
+        __privateAdd(this, _adoptedIconPosition, __runInitializers(_init3, 68, this, "left")), __runInitializers(_init3, 71, this);
         __publicField(this, "lightDomObserver");
         __publicField(this, "handleKeydown", /* @__PURE__ */ __name((eventArg) => {
           if (eventArg.key === " " || eventArg.key === "Spacebar") {
@@ -63076,12 +63088,13 @@ var init_dees_button = __esm({
         return b2`
       <div
         part="button"
-        class="button ${this.isHidden ? "hidden" : ""} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.disabled ? "disabled" : ""}"
+        class="button ${this.isHidden ? "hidden" : ""} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.pressed ? "pressed" : ""} ${this.disabled ? "disabled" : ""}"
         role="button"
         tabindex=${this.disabled ? -1 : 0}
         aria-disabled=${this.disabled ? "true" : "false"}
         aria-busy=${this.status === "pending" ? "true" : "false"}
         .ariaLabel=${showText ? null : effectiveText || null}
+        .ariaPressed=${this.pressed === void 0 ? null : String(this.pressed)}
         @click="${this.dispatchClick}"
         @keydown=${this.handleKeydown}
         @keyup=${this.handleKeyup}
@@ -63165,6 +63178,7 @@ var init_dees_button = __esm({
     _type = new WeakMap();
     _size2 = new WeakMap();
     _status = new WeakMap();
+    _pressed = new WeakMap();
     _shape = new WeakMap();
     _insideForm = new WeakMap();
     _fullWidth = new WeakMap();
@@ -63180,6 +63194,7 @@ var init_dees_button = __esm({
     __decorateElement(_init3, 4, "type", _type_dec, _DeesButton, _type);
     __decorateElement(_init3, 4, "size", _size_dec2, _DeesButton, _size2);
     __decorateElement(_init3, 4, "status", _status_dec, _DeesButton, _status);
+    __decorateElement(_init3, 4, "pressed", _pressed_dec, _DeesButton, _pressed);
     __decorateElement(_init3, 4, "shape", _shape_dec, _DeesButton, _shape);
     __decorateElement(_init3, 4, "insideForm", _insideForm_dec, _DeesButton, _insideForm);
     __decorateElement(_init3, 4, "fullWidth", _fullWidth_dec, _DeesButton, _fullWidth);
@@ -63207,6 +63222,12 @@ var init_dees_button = __esm({
         --button-success-fg: var(--dees-color-text-success);
         --button-error-bg: color-mix(in srgb, var(--dees-color-accent-error) 20%, transparent);
         --button-error-fg: var(--dees-color-text-error);
+        /* toggle-on face: the shared selected-surface wash, an accent ring and the accent
+           label colour. All three inputs are theme-aware tokens, so this face needs no
+           bright/dark split of its own. */
+        --button-pressed-wash: var(--dees-color-nav-selected);
+        --button-pressed-ring: color-mix(in srgb, var(--dees-color-accent-primary) 50%, transparent);
+        --button-pressed-fg: var(--dees-color-link);
       }
       :host([gobright]) {
         --button-pending-bg: var(--dees-color-accent-primary);
@@ -63226,11 +63247,15 @@ var init_dees_button = __esm({
       }
 
       /* A full-width button is sized by its container, so its label has to yield rather
-         than spill out of the face when the container is narrower than the text. */
+         than spill out of the face when the container is narrower than the text. It clips with
+         a 1px margin rather than hiding: a button face is no scroll container, and the
+         toggle-on overlay sits 1px outside the padding box so that its ring lands on the
+         type's own border edge — overflow: hidden would cut exactly that pixel away. */
       :host([full-width]) .button {
         width: 100%;
         min-width: 0;
-        overflow: hidden;
+        overflow: clip;
+        overflow-clip-margin: 1px;
       }
 
       :host([full-width]) .textbox {
@@ -63434,6 +63459,59 @@ var init_dees_button = __esm({
         text-decoration-color: currentColor;
       }
 
+      /* Toggle-on face (the pressed property).
+         A toggle has to stay visibly on once the pointer leaves it, so this cannot be the
+         hover face; it layers on top of whatever the type paints instead of replacing it. The
+         wash rides on an overlay rather than on the face's own background, because every
+         type, hover and active rule sets the background shorthand and would reset a layer
+         declared on the face itself. isolation scopes the overlay's negative layer to this
+         face, which paints it above the type's background and below the label and icon. */
+      .button.pressed {
+        isolation: isolate;
+      }
+
+      .button.pressed::after {
+        content: '';
+        position: absolute;
+        /* the face's border box, so the ring lands on the type's own border edge */
+        inset: -1px;
+        z-index: -1;
+        border-radius: inherit;
+        corner-shape: inherit;
+        background: var(--button-pressed-wash);
+        box-shadow: inset 0 0 0 1px var(--button-pressed-ring);
+        pointer-events: none;
+      }
+
+      /* A filled face already carries the accent as its surface, where an accent wash cannot
+         read, so it recesses behind a scrim with a light inner ring instead. Both faces are
+         dark in either theme, which is why these two values do not follow the theme. */
+      .button.accent,
+      .button.destructive {
+        --button-pressed-wash: color-mix(in srgb, black 24%, transparent);
+        --button-pressed-ring: color-mix(in srgb, white 40%, transparent);
+      }
+
+      /* At size="icon" there is no label, so the foreground carries the state as well. Filled
+         faces keep their on-accent label, and a status face keeps its own. */
+      .button.pressed:not(.accent):not(.destructive):not(.pending):not(.success):not(.error) {
+        color: var(--button-pressed-fg);
+      }
+
+      /* A status face owns the whole surface for as long as it shows, and type="link" has no
+         surface to wash at all (no border, no padding) — its on state is the hover underline
+         made permanent. aria-pressed reports the state in every one of these cases. */
+      .button.pressed.pending::after,
+      .button.pressed.success::after,
+      .button.pressed.error::after,
+      .button.pressed.link::after {
+        content: none;
+      }
+
+      .button.pressed.link {
+        text-decoration-color: currentColor;
+      }
+
       /* Status states */
       .button.pending,
       .button.success,
@@ -156913,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);
@@ -158491,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);
@@ -218090,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; }
@@ -220534,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); }
@@ -223256,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>
@@ -224953,7 +225055,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "12.2.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."
 };