@skdx/docs-kit 0.36.0 → 0.37.0

package/dist/shared/contracts/confirm-dialog.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentContract } from './types.js';
-/** Contract for the ConfirmDialog block: an alert dialog with a pending state for a confirmed request in flight. */
-export declare const confirmDialogContract: ComponentContract;

package/dist/shared/contracts/confirm-dialog.js

@@ -1 +0,0 @@
-import{autoFocusEvents as e,dismissalEvents as t,openChangeCompleteEvent as n}from"./overlay-parts.js";import{ROOT_DATA_ATTRIBUTES as o}from"./styling-hooks.js";var r={name:"ConfirmDialog",purpose:"A confirmation dialog block composing the core DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogCancel, DialogAction and Button as an alert dialog for a destructive, irreversible or sensitive action. Adds an externally controlled pending state that disables both buttons and blocks dismissal while the confirmed request is in flight, and a destructive switch that colours the confirm button and the panel. Ships in the blocks package of each framework, not the core package.",props:[{name:"open",type:"boolean",required:!1,description:"Whether the dialog is open, for controlled usage."},{name:"defaultOpen",type:"boolean",defaultValue:"false",required:!1,description:"Whether the dialog starts open, for uncontrolled usage."},{name:"trigger",type:"unknown",required:!1,frameworks:["react","svelte","angular"],exception:"render-prop",frameworksReason:"Vue and Web Components take this as a named slot rather than a prop \u2014 Vue because a renderable region is a slot in Vue's own idiom, Web Components because a custom element attribute carries a string and cannot carry a node. Both slot spellings are declared under `slots`.",description:"Element that opens the dialog, decorated with the trigger behavior. No trigger renders when omitted, and the dialog opens only through `open`/`onOpenChange`. A prop in React, Svelte, and Angular; Vue and Web Components use the `trigger` slot."},{name:"title",type:"string",required:!0,description:"Heading text rendered into the panel's title, naming and labelling the dialog."},{name:"description",type:"string",required:!1,description:"Supporting sentence rendered into the panel's description, read alongside the title. No description region renders when omitted."},{name:"confirmLabel",type:"string",defaultValue:"'Confirm'",required:!1,description:"Text of the button that carries out the confirmed action."},{name:"cancelLabel",type:"string",defaultValue:"'Cancel'",required:!1,description:"Text of the button that abandons the action."},{name:"destructive",type:"boolean",defaultValue:"false",required:!1,description:'Renders the confirm button in the danger weight and marks the panel data-status="danger", for an irreversible or destructive action.'},{name:"pending",type:"boolean",defaultValue:"false",required:!1,description:"Marks the confirmed request as in flight: disables both buttons, renders the confirm button loading, and blocks Escape dismissal until it clears."},{name:"disabled",type:"boolean",defaultValue:"false",required:!1,description:"Disables the confirm button on its own, independent of pending, for example until a typed confirmation matches."},{name:"size",type:"'sm' | 'md' | 'lg' | string",required:!1,description:"Panel width rung, fed to the underlying dialog panel; the skin's own default width when omitted."}],events:[...t("dialog",{outsideDismisses:!1,outsideNote:"An alert dialog demands an explicit choice, so outside interaction never closes it; while pending, Escape is withheld as well."}),...e("dialog"),n("dialog"),{name:"open-change",detail:"boolean",description:"Fires with the new open state whenever the dialog opens or closes, controlled or not."},{name:"confirm",detail:"MouseEvent",description:"Fires when the confirm button is activated, before the dialog closes. Calling preventDefault() on the event holds the panel open, typically paired with pending for an async confirmation."},{name:"cancel",detail:"MouseEvent",description:"Fires when the cancel button is activated, before the dialog closes. Calling preventDefault() on the event keeps the panel open."}],slots:[{name:"default",description:"Extra content rendered between the description and the footer buttons."},{name:"trigger",description:"Element that opens the dialog, decorated with the trigger behavior."}],states:["default"],controlledUncontrolled:"Open state works controlled through open/onOpenChange or uncontrolled through defaultOpen. pending is always controlled by the consumer, driving the dismiss policy and both buttons.",formBehavior:"Not applicable \u2014 ConfirmDialog participates in no form.",validationBehavior:"Not applicable \u2014 ConfirmDialog carries no value and participates in no validation.",accessibility:{role:"alertdialog (from the core DialogContent; modal, named by its title, described by its description)",keyboard:[{key:"Escape",behavior:"Closes the dialog unless pending is true."},{key:"Tab",behavior:"Cycles focus between the cancel and confirm buttons and any content in between."},{key:"Enter/Space",behavior:"Activates the focused button."}],ariaAttributes:['role="alertdialog" and aria-modal="true" on the panel, from the core DialogContent',"aria-labelledby points at the title and aria-describedby at the description, both wired automatically once each part mounts"],focusManagement:"The core alert dialog focuses the cancel button on open (the least destructive choice) and returns focus to the trigger on close."},styling:{cssParts:["confirm-dialog","title","description","body","footer","cancel","confirm"],dataAttributes:[...o,{name:"data-skdx-confirm-dialog-generated",frameworks:["webComponents"],exception:"wc-marker",frameworksReason:'Marks a node the element generated for itself rather than one the consumer authored. React, Vue, Svelte and Angular re-render their derived anatomy declaratively, so "mine or theirs" is answered by the framework and no marker is needed.'},"data-variant","data-loading","data-status"],cssCustomProperties:[]},publicMethods:[]};export{r as confirmDialogContract};

package/dist/skins-src/components/confirm-dialog.css

@@ -1,43 +0,0 @@
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
-
-@import '../base.css';
-
-/** ConfirmDialog — an alert dialog panel with a body region and a cancel/confirm footer. */
-@layer skdx-components {
-  :where(.skdx-confirm-dialog__body) {
-    min-inline-size: 0;
-    margin-block-start: var(--skdx-space-3);
-    overflow-wrap: anywhere;
-  }
-
-  :where(.skdx-confirm-dialog__footer) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--skdx-space-2);
-    margin-block-start: var(--skdx-space-4);
-  }
-
-  /* Narrow viewports: a two-button end-aligned row gets cramped, so the
-     footer stacks and each button spans the panel, keeping DOM order (cancel
-     then confirm) so tab order and reading order stay unchanged. */
-  @media (max-width: 30rem) {
-    :where(.skdx-confirm-dialog__footer) {
-      flex-direction: column;
-    }
-
-    :where(.skdx-confirm-dialog__cancel),
-    :where(.skdx-confirm-dialog__confirm) {
-      inline-size: 100%;
-    }
-  }
-
-  /* Angular cannot omit the wrapper around unprojected content, so an empty one collapses. */
-  :where(.skdx-confirm-dialog__body:empty) {
-    display: none;
-  }
-}