@kubex/zinc 1.0.102 → 1.0.104

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.0.102",
+  "version": "1.0.104",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4479,6 +4479,187 @@
             ]
           }
         },
+        {
+          "name": "zn-markdown-editor",
+          "description": "A markdown editor with live preview, split view, and a fullscreen mode.\n---\n\n\n### **Events:**\n - **zn-view-mode-change** - Emitted when the user switches between editor / split / preview.\n- **zn-change** - Emitted when the markdown content changes.\n- **zn-input** - Emitted on each keystroke in the editor.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the editor.\n- **blur()** - Removes focus from the editor.\n\n### **Slots:**\n - **label** - The editor label. Alternatively, use the `label` attribute.\n- **help-text** - Help text shown below the editor. Alternatively, use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The toolbar containing the view-mode and fullscreen controls.\n- **editor** - The textarea wrapper.\n- **preview** - The rendered markdown preview.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the control, submitted as part of form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current markdown content.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "The control's label. If you need HTML, use the `label` slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "Help text displayed below the editor. If you need HTML, use the `help-text` slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text shown when the editor is empty.",
+              "value": {
+                "type": "string",
+                "default": "'Enter markdown content...'"
+              }
+            },
+            {
+              "name": "rows",
+              "description": "Number of rows for the textarea.",
+              "value": { "type": "number", "default": "20" }
+            },
+            {
+              "name": "view-mode",
+              "description": "Which view to show.",
+              "value": { "type": "ViewMode", "default": "'editor'" }
+            },
+            {
+              "name": "storage-key",
+              "description": "Key used to persist the selected view mode to `localStorage`. Set to an empty string to disable persistence.",
+              "value": {
+                "type": "string",
+                "default": "'zn-markdown-editor-view-mode'"
+              }
+            },
+            {
+              "name": "required",
+              "description": "Makes the editor required for form submission.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the editor read-only.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the editor.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "The editor label. Alternatively, use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Help text shown below the editor. Alternatively, use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-view-mode-change",
+              "type": "CustomEvent",
+              "description": "Emitted when the user switches between editor / split / preview."
+            },
+            {
+              "name": "zn-change",
+              "description": "Emitted when the markdown content changes."
+            },
+            {
+              "name": "zn-input",
+              "description": "Emitted on each keystroke in the editor."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "textarea", "type": "ZnTextarea" },
+              { "name": "previewEl", "type": "HTMLDivElement" },
+              {
+                "name": "name",
+                "description": "The name of the control, submitted as part of form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current markdown content.",
+                "type": "string"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value — used when resetting the form.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The control's label. If you need HTML, use the `label` slot.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "Help text displayed below the editor. If you need HTML, use the `help-text` slot.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text shown when the editor is empty.",
+                "type": "string"
+              },
+              {
+                "name": "rows",
+                "description": "Number of rows for the textarea.",
+                "type": "number"
+              },
+              {
+                "name": "viewMode",
+                "description": "Which view to show.",
+                "type": "ViewMode"
+              },
+              {
+                "name": "storageKey",
+                "description": "Key used to persist the selected view mode to `localStorage`. Set to an empty string to disable persistence.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Makes the editor required for form submission.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the editor read-only.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the editor.",
+                "type": "boolean"
+              },
+              {
+                "name": "expanded",
+                "description": "Whether the editor is currently expanded to cover its containing positioned ancestor.",
+                "type": "boolean"
+              },
+              { "name": "validity", "type": "ValidityState" },
+              { "name": "validationMessage", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "zn-view-mode-change",
+                "type": "CustomEvent",
+                "description": "Emitted when the user switches between editor / split / preview."
+              },
+              {
+                "name": "zn-change",
+                "description": "Emitted when the markdown content changes."
+              },
+              {
+                "name": "zn-input",
+                "description": "Emitted on each keystroke in the editor."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-menu",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -6849,6 +7030,18 @@
               "name": "row",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "align",
+              "value": {
+                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
+              }
+            },
+            {
+              "name": "justify",
+              "value": {
+                "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'"
+              }
+            },
             {
               "name": "grow",
               "value": { "type": "boolean", "default": "false" }
@@ -6922,6 +7115,14 @@
               { "name": "divide", "type": "boolean" },
               { "name": "gap", "type": "keyof typeof defaultSizes" },
               { "name": "row", "type": "boolean" },
+              {
+                "name": "align",
+                "type": "'start' | 'center' | 'end' | 'stretch' | 'baseline'"
+              },
+              {
+                "name": "justify",
+                "type": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'"
+              },
               { "name": "grow", "type": "boolean" },
               { "name": "padX", "type": "boolean" },
               { "name": "padY", "type": "boolean" },

package/dist/zn.d.ts

@@ -4341,6 +4341,8 @@ declare module "components/sp/sp.component" {
         divide: boolean;
         gap: keyof typeof defaultSizes;
         row: boolean;
+        align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+        justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
         grow: boolean;
         padX: boolean;
         padY: boolean;
@@ -7673,6 +7675,106 @@ declare module "components/priority-list/index" {
         }
     }
 }
+declare module "components/markdown-editor/markdown-editor.component" {
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import type { ZincFormControl } from "internal/zinc-element";
+    import type ZnTextarea from "components/textarea/index";
+    type ViewMode = 'editor' | 'split' | 'preview';
+    /**
+     * @summary A markdown editor with live preview, split view, and a fullscreen mode.
+     * @documentation https://zinc.style/components/markdown-editor
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-textarea
+     * @dependency zn-button-group
+     * @dependency zn-icon
+     *
+     * @event zn-change - Emitted when the markdown content changes.
+     * @event zn-input - Emitted on each keystroke in the editor.
+     * @event zn-view-mode-change - Emitted when the user switches between editor / split / preview.
+     *
+     * @slot label - The editor label. Alternatively, use the `label` attribute.
+     * @slot help-text - Help text shown below the editor. Alternatively, use the `help-text` attribute.
+     *
+     * @csspart base - The component's base wrapper.
+     * @csspart toolbar - The toolbar containing the view-mode and fullscreen controls.
+     * @csspart editor - The textarea wrapper.
+     * @csspart preview - The rendered markdown preview.
+     */
+    export default class ZnMarkdownEditor extends ZincElement implements ZincFormControl {
+        static styles: CSSResultGroup;
+        private readonly formControlController;
+        private readonly hasSlotController;
+        private debounceTimer;
+        textarea: ZnTextarea;
+        previewEl: HTMLDivElement;
+        /** The name of the control, submitted as part of form data. */
+        name: string;
+        /** The current markdown content. */
+        value: string;
+        /** The default value — used when resetting the form. */
+        defaultValue: string;
+        /** The control's label. If you need HTML, use the `label` slot. */
+        label: string;
+        /** Help text displayed below the editor. If you need HTML, use the `help-text` slot. */
+        helpText: string;
+        /** Placeholder text shown when the editor is empty. */
+        placeholder: string;
+        /** Number of rows for the textarea. */
+        rows: number;
+        /** Which view to show. */
+        viewMode: ViewMode;
+        /**
+         * Key used to persist the selected view mode to `localStorage`. Set to an empty string to disable persistence.
+         */
+        storageKey: string;
+        /** Makes the editor required for form submission. */
+        required: boolean;
+        /** Makes the editor read-only. */
+        readonly: boolean;
+        /** Disables the editor. */
+        disabled: boolean;
+        /** Whether the editor is currently expanded to cover its containing positioned ancestor. */
+        expanded: boolean;
+        get validity(): ValidityState;
+        get validationMessage(): string;
+        checkValidity(): boolean;
+        getForm(): HTMLFormElement | null;
+        reportValidity(): boolean;
+        setCustomValidity(message: string): void;
+        /** Sets focus on the editor. */
+        focus(options?: FocusOptions): void;
+        /** Removes focus from the editor. */
+        blur(): void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        protected firstUpdated(_changedProperties: PropertyValues): void;
+        private readStoredViewMode;
+        private writeStoredViewMode;
+        private renderPreview;
+        private handleInput;
+        private handleChange;
+        private handleViewToggle;
+        private handleExpandToggle;
+        handleViewModeChange(): Promise<void>;
+        handleValueChange(): Promise<void>;
+        handleMarkedReady(): void;
+        render(): import("lit").TemplateResult<1>;
+        private renderViewButton;
+    }
+}
+declare module "components/markdown-editor/index" {
+    import ZnMarkdownEditor from "components/markdown-editor/markdown-editor.component";
+    export * from "components/markdown-editor/markdown-editor.component";
+    export default ZnMarkdownEditor;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-markdown-editor': ZnMarkdownEditor;
+        }
+    }
+}
 declare module "events/zn-after-hide" {
     export type ZnAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
     global {
@@ -7870,6 +7972,7 @@ declare module "zinc" {
     export { default as TranslationGroup } from "components/translation-group/index";
     export { default as OptGroup } from "components/opt-group/index";
     export { default as PriorityList } from "components/priority-list/index";
+    export { default as MarkdownEditor } from "components/markdown-editor/index";
     export { default as ZincElement } from "internal/zinc-element";
     export * from "utilities/on";
     export * from "utilities/query";