@design.estate/dees-catalog 12.2.0 → 12.4.0

package/readme.md

@@ -20,7 +20,7 @@ switcher**, **view-toggle**, and **single-selection toggle** all lead to
 | Switch between a few views, modes, or time periods; segmented control | [`dees-input-multitoggle`](#deesinputmultitoggle) | One selected value in a shared track. Use keyed options when labels differ from stored values. |
 | Choose one form answer from visible radio options | [`dees-input-radiogroup`](#deesinputradiogroup) | Radio indicators, required validation, optional payload values. |
 | Turn one setting on or off | [`dees-input-toggle`](#deesinputtoggle), [`dees-input-checkbox`](#deesinputcheckbox) | Boolean setting or checkable form choice. Multitoggle's boolean mode is useful when both alternatives need explicit labels. |
-| Toggle an independent toolbar option | [`dees-input-toggle`](#deesinputtoggle) | Boolean state. A set of independent options is not a single-selection multitoggle. |
+| Toggle an independent toolbar option | [`dees-button`](#deesbutton) with `pressed`, [`dees-input-toggle`](#deesinputtoggle) | A toolbar or app-bar command that stays on uses a button with `pressed`; a labelled setting uses the switch. A set of independent options is not a single-selection multitoggle. |
 | Choose from a longer menu of values | [`dees-input-dropdown`](#deesinputdropdown) | Searchable single selection; `enableSearch` defaults to true. |
 | Group related commands | [`dees-button-group`](#deesbuttongroup), [`dees-actionbar`](#deesactionbar) | Layout for actions. A button group does not own a selected value. |
 | Navigate open content panels, with optional close controls | [`dees-appui-tabs`](#deesappuitabs) | Tab selection, close actions and keyboard focus. Use multitoggle for changing a display mode within a panel. |
@@ -299,10 +299,36 @@ button.text = 'Click me';
   status="pending"    // Options: normal, pending, success, error
   disabled={false}    // Optional: disables the button
   full-width          // Optional: stretches the button face to the host width
+  .pressed=${true}    // Optional: makes this button a toggle — true (on), false (off), unset (not a toggle)
   @click=${handleClick}
 >Click me</dees-button>
 ```
 
+`pressed` turns a button into a toggle and is what assistive technology announces: the face
+carries `aria-pressed="true"`/`"false"` while `pressed` is set, and carries no `aria-pressed`
+at all while it is unset, so a plain button is never announced as an unpressed toggle. Use it
+for toolbar options — a DevTools or sidebar button in an app bar — rather than expressing the
+state through `type`, which decides the button's role colour. The on face is an accent wash,
+ring and label layered over whatever `type` paints (a filled `accent`/`destructive` face
+recesses behind a scrim instead), it stays on when the pointer leaves, and a status face keeps
+its own surface while it shows; `type="link"` has no surface at all, so its on state is only a
+permanent underline — prefer `ghost` or `outline` for a link-styled toggle. At `size="icon"`
+the accessible name comes from `text`, so an icon-only toggle must still set it.
+
+```typescript
+<dees-button
+  size="icon" icon="lucide:terminal" text="DevTools"
+  .pressed=${this.devtoolsOpen}
+  @clicked=${() => { this.devtoolsOpen = !this.devtoolsOpen; }}
+></dees-button>
+```
+
+The button is stateless: a click never flips `pressed`, so the consumer owns the state. Only
+the on state reflects to the host, which makes `dees-button[pressed]` and `:host([pressed])`
+select a toggle that is on; the attribute form (`<dees-button pressed>`) therefore means on —
+any value, including `pressed="false"`, means on, as for every HTML boolean attribute — and off
+has to be set through the property.
+
 The button is keyboard operable: its face carries `role="button"` and `tabindex`, Enter and
 Space activate it (dispatching a real `click`, so both `@click` and `@clicked` fire), a
 disabled button leaves the tab order, and keyboard focus draws a `:focus-visible` ring.

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const 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."
 }

package/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -428,3 +428,9 @@ export class DeesAppuiMainmenu extends DeesElement {
     }));
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-mainmenu': DeesAppuiMainmenu;
+  }
+}

package/ts_web/elements/00group-button/dees-button/dees-button.demo.ts

@@ -5,6 +5,13 @@ import type { DeesButton } from './dees-button.js';
 
 const clicked = (event: Event) => showDemoResult(event.currentTarget as Element, `${(event.target as DeesButton).text || 'Button'} selected.`);
 
+/** The button never flips `pressed` itself — the consumer owns the state, as it does here. */
+const toggled = (event: Event) => {
+  const button = event.target as DeesButton;
+  button.pressed = !button.pressed;
+  showDemoResult(button, `${button.text}: ${button.pressed ? 'on' : 'off'}`);
+};
+
 export const demoFunc = () => demoPage('Button', 'A shared shape and rhythm for actions, with a clear hierarchy of intent.', html`
   ${demoSection('Intent', 'Accent marks the primary action. Quieter treatments keep supporting actions available.', html`
     <div class="dees-demo-row" @clicked=${clicked}>${(['default', 'accent', 'secondary', 'destructive', 'outline', 'ghost', 'link'] as const).map((type) => html`<dees-button .type=${type} .text=${type}></dees-button>`)}</div>
@@ -18,6 +25,9 @@ export const demoFunc = () => demoPage('Button', 'A shared shape and rhythm for
     ${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.', html`
     <div class="dees-demo-row">${(['normal', 'pending', 'success', 'error'] as const).map((status) => html`<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.', html`
+    <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.', html`
     <div class="dees-demo-row"><dees-button text="Inspect event" .eventDetailData=${'workspace-preview'} @clicked=${(event: CustomEvent) => showDemoResult(event.currentTarget as Element, event.detail)}></dees-button></div>${demoOutput()}`)}
   ${demoSection('In a form', 'The same button proportions carry through to form submission.', workspaceForm())}

package/ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -63,6 +63,29 @@ export class DeesButton extends DeesElement {
   })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
+  /**
+   * Toggle state, reported to assistive technology as `aria-pressed`.
+   *
+   * Tri-state by design: `undefined` (the default) means this button is not a toggle at all
+   * and nothing is announced, `false` a toggle that is off, `true` a toggle that is on. A
+   * plain boolean defaulting to `false` would announce every button in the catalog as an
+   * unpressed toggle.
+   *
+   * The element stays stateless — a click never flips `pressed`. The consumer owns the state
+   * and sets it from its `clicked` handler.
+   *
+   * Only the on state reflects to the host, so `:host([pressed])` and `dees-button[pressed]`
+   * select a toggle that is on. Off and not-a-toggle are indistinguishable as attributes, so
+   * the attribute form (`<dees-button pressed>`) can only express "on" — any value, including
+   * `pressed="false"`, means on, as for every HTML boolean attribute. The off state has to be
+   * set through the property.
+   */
+  @property({
+    type: Boolean,
+    reflect: true
+  })
+  accessor pressed: boolean | undefined = undefined;
+
   /**
    * Corner treatment. 'squircle' (default) is the standard rounded rect for
    * controls that align with fields and other rectangular siblings; 'pill'
@@ -139,6 +162,12 @@ export class DeesButton extends DeesElement {
         --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);
@@ -158,11 +187,15 @@ export class DeesButton extends DeesElement {
       }
 
       /* 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 {
@@ -366,6 +399,59 @@ export class DeesButton extends DeesElement {
         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,
@@ -585,10 +671,16 @@ export class DeesButton extends DeesElement {
     // size-icon additionally suppresses text to keep its square geometry.
     const showText = Boolean(effectiveText) && !(actualSize === 'icon' && effectiveIcon);
 
+    // A button that is not a toggle must carry no `aria-pressed` attribute at all, and an
+    // attribute binding cannot remove one — lit only removes on its `nothing` sentinel, which
+    // `@design.estate/dees-element` does not re-export. The state therefore goes through the
+    // reflected ARIA property, the same channel `.ariaLabel` uses below: `null` removes it.
     return html`
       <div
         part="button"
-        class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.disabled
+        class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.pressed
+          ? 'pressed'
+          : ''} ${this.disabled
           ? 'disabled'
           : ''}"
         role="button"
@@ -596,6 +688,7 @@ export class DeesButton extends DeesElement {
         aria-disabled=${this.disabled ? 'true' : 'false'}
         aria-busy=${this.status === 'pending' ? 'true' : 'false'}
         .ariaLabel=${showText ? null : effectiveText || null}
+        .ariaPressed=${this.pressed === undefined ? null : String(this.pressed)}
         @click="${this.dispatchClick}"
         @keydown=${this.handleKeydown}
         @keyup=${this.handleKeyup}

package/ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -157,7 +157,8 @@ export class DeesForm extends DeesElement {
   public static demoGroups = ['Form'];
 
   public name: string = 'myform';
-  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
+  /** emits the collected form data on every child change; the only producer is `collectFormData()` */
+  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<TFormData>();
   public readyDeferred = domtools.plugins.smartpromise.defer();
 
   /**

package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -85,7 +85,17 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   public blockOperations: WysiwygBlockOperations;
   private inputHandler: WysiwygInputHandler;
   private keyboardHandler: WysiwygKeyboardHandler;
-  private dragDropHandler: WysiwygDragDropHandler;
+  /**
+   * 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.
+   */
+  public dragDropHandler: WysiwygDragDropHandler;
   private history: WysiwygHistory;
 
   public static styles = [

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -109,7 +109,12 @@ export class DeesSimpleAppDash extends DeesElement {
     .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; }

package/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts

@@ -281,8 +281,8 @@ export class DeesWorkspace extends DeesElement {
           <span class="save-state" role="status">${this.isInitializing ? 'Starting…' : 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 ? html`<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 ? html`<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 ? html`<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 ? html`<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>

package/ts_web/elements/00group-workspace/dees-workspace/styles.ts

@@ -15,7 +15,15 @@ export const workspaceStyles = css`
   .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); }