@ds-gn/ui 0.10.0 → 0.11.0

package/dist/playground-manifest.js

@@ -128,17 +128,21 @@ export const playgroundManifest = [
         "label": "Icon",
         "options": [
           "",
+          "arrowDown",
           "arrowLeft",
           "arrowRight",
+          "arrowUp",
           "calendar",
           "check",
           "chevronDown",
           "chevronLeft",
           "chevronRight",
           "chevronUp",
+          "chevronsUpDown",
           "circleAlert",
           "circleCheck",
           "circleX",
+          "cookie",
           "copy",
           "download",
           "ellipsis",
@@ -275,6 +279,159 @@ export const playgroundManifest = [
       }
     ]
   },
+  {
+    "tag": "dsgn-dropdown-menu",
+    "module": "@ds-gn/ui/dropdown-menu",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      {
+        "name": "align",
+        "attribute": "align",
+        "control": "select",
+        "default": "start",
+        "label": "Align",
+        "options": [
+          "start",
+          "end"
+        ]
+      },
+      {
+        "name": "label",
+        "attribute": "label",
+        "control": "text",
+        "default": "",
+        "label": "Menu label"
+      }
+    ],
+    "slots": [],
+    "nested": [
+      {
+        "tag": "dsgn-button",
+        "slot": "trigger",
+        "label": "Trigger",
+        "props": {
+          "appearance": "outline",
+          "iconName": "chevronDown",
+          "iconPosition": "trailing"
+        },
+        "slots": {
+          "default": "Actions"
+        }
+      }
+    ],
+    "data": {
+      "items": [
+        {
+          "value": "view",
+          "label": "View profile",
+          "icon": "user"
+        },
+        {
+          "value": "copy-email",
+          "label": "Copy email",
+          "icon": "copy",
+          "shortcut": "⌘C"
+        },
+        {
+          "value": "change-role",
+          "label": "Change role…",
+          "icon": "settings"
+        },
+        {
+          "value": "resend-invite",
+          "label": "Resend invite",
+          "icon": "mail",
+          "disabled": true
+        },
+        {
+          "separator": true
+        },
+        {
+          "value": "remove",
+          "label": "Remove member",
+          "icon": "trash2",
+          "variant": "danger"
+        }
+      ]
+    }
+  },
+  {
+    "tag": "dsgn-field",
+    "module": "@ds-gn/ui/field",
+    "props": [
+      {
+        "name": "label",
+        "attribute": "label",
+        "control": "text",
+        "default": "Alert email",
+        "label": "Label"
+      },
+      {
+        "name": "hint",
+        "attribute": "hint",
+        "control": "text",
+        "default": "We warn this address 7 days before expiry.",
+        "label": "Hint"
+      },
+      {
+        "name": "error",
+        "attribute": "error",
+        "control": "text",
+        "default": "",
+        "label": "Error"
+      },
+      {
+        "name": "required",
+        "attribute": "required",
+        "control": "boolean",
+        "default": true,
+        "label": "Required"
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    ],
+    "slots": [],
+    "nested": [
+      {
+        "tag": "dsgn-input",
+        "slot": "",
+        "label": "Input"
+      }
+    ]
+  },
   {
     "tag": "dsgn-heading",
     "module": "@ds-gn/ui/heading",
@@ -429,6 +586,20 @@ export const playgroundManifest = [
         "default": "you@example.com",
         "label": "Placeholder"
       },
+      {
+        "name": "hint",
+        "attribute": "hint",
+        "control": "text",
+        "default": "We warn this address 7 days before expiry.",
+        "label": "Hint"
+      },
+      {
+        "name": "error",
+        "attribute": "error",
+        "control": "text",
+        "default": "",
+        "label": "Error"
+      },
       {
         "name": "value",
         "attribute": "value",
@@ -443,6 +614,13 @@ export const playgroundManifest = [
         "default": false,
         "label": "Disabled"
       },
+      {
+        "name": "readOnly",
+        "attribute": "readonly",
+        "control": "boolean",
+        "default": false,
+        "label": "Read-only"
+      },
       {
         "name": "required",
         "attribute": "required",
@@ -469,13 +647,6 @@ export const playgroundManifest = [
         ],
         "includeDefault": true
       },
-      {
-        "name": "open",
-        "attribute": "open",
-        "control": "boolean",
-        "default": false,
-        "label": "Open"
-      },
       {
         "name": "placement",
         "attribute": "placement",
@@ -551,6 +722,335 @@ export const playgroundManifest = [
         "label": "Content"
       }
     ]
+  },
+  {
+    "tag": "dsgn-select",
+    "module": "@ds-gn/ui/select",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      {
+        "name": "label",
+        "attribute": "label",
+        "control": "text",
+        "default": "Framework adapter",
+        "label": "Label"
+      },
+      {
+        "name": "placeholder",
+        "attribute": "placeholder",
+        "control": "text",
+        "default": "Choose an adapter",
+        "label": "Placeholder"
+      },
+      {
+        "name": "hint",
+        "attribute": "hint",
+        "control": "text",
+        "default": "Used for generated wrappers.",
+        "label": "Hint"
+      },
+      {
+        "name": "error",
+        "attribute": "error",
+        "control": "text",
+        "default": "",
+        "label": "Error"
+      },
+      {
+        "name": "value",
+        "attribute": "value",
+        "control": "select",
+        "default": "",
+        "label": "Value",
+        "options": [
+          "",
+          "react",
+          "vue",
+          "svelte",
+          "lit",
+          "vanilla",
+          "angular"
+        ]
+      },
+      {
+        "name": "name",
+        "attribute": "name",
+        "control": "text",
+        "default": "adapter",
+        "label": "Name"
+      },
+      {
+        "name": "required",
+        "attribute": "required",
+        "control": "boolean",
+        "default": false,
+        "label": "Required"
+      },
+      {
+        "name": "disabled",
+        "attribute": "disabled",
+        "control": "boolean",
+        "default": false,
+        "label": "Disabled"
+      }
+    ],
+    "slots": [],
+    "data": {
+      "options": [
+        {
+          "value": "react",
+          "label": "React"
+        },
+        {
+          "value": "vue",
+          "label": "Vue"
+        },
+        {
+          "value": "svelte",
+          "label": "Svelte"
+        },
+        {
+          "value": "lit",
+          "label": "Lit"
+        },
+        {
+          "value": "vanilla",
+          "label": "Vanilla JS"
+        },
+        {
+          "value": "angular",
+          "label": "Angular",
+          "disabled": true,
+          "tag": "soon"
+        }
+      ]
+    }
+  },
+  {
+    "tag": "dsgn-table",
+    "module": "@ds-gn/ui/table",
+    "props": [
+      {
+        "name": "caption",
+        "attribute": "caption",
+        "control": "text",
+        "default": "Members",
+        "label": "Caption",
+        "includeDefault": true
+      },
+      {
+        "name": "captionMeta",
+        "attribute": "caption-meta",
+        "control": "text",
+        "default": "4 people",
+        "label": "Caption meta"
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "light",
+          "dark"
+        ]
+      }
+    ],
+    "slots": [],
+    "data": {
+      "columns": [
+        {
+          "key": "name",
+          "label": "Name",
+          "sortable": true
+        },
+        {
+          "key": "role",
+          "label": "Role",
+          "sortable": true
+        },
+        {
+          "key": "joined",
+          "label": "Joined",
+          "numeric": true,
+          "sortable": true
+        }
+      ],
+      "rows": [
+        {
+          "id": "alex",
+          "name": "Alex Karpov",
+          "role": "Owner",
+          "joined": "2026-01-14"
+        },
+        {
+          "id": "hana",
+          "name": "Hana Sato",
+          "role": "Member",
+          "joined": "2026-08-12"
+        },
+        {
+          "id": "lena",
+          "name": "Lena Fischer",
+          "role": "Member",
+          "joined": "2026-10-02"
+        },
+        {
+          "id": "priya",
+          "name": "Priya Natarajan",
+          "role": "Admin",
+          "joined": "2026-03-30"
+        }
+      ],
+      "sort": {
+        "column": "name",
+        "direction": "ascending"
+      }
+    }
+  },
+  {
+    "tag": "dsgn-toaster",
+    "module": "@ds-gn/ui/toaster",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "maxVisible",
+        "attribute": "max-visible",
+        "control": "select",
+        "default": "3",
+        "label": "Max visible",
+        "options": [
+          "1",
+          "2",
+          "3",
+          "4",
+          "5"
+        ]
+      },
+      {
+        "name": "label",
+        "attribute": "label",
+        "control": "text",
+        "default": "Notifications",
+        "label": "Region label",
+        "includeDefault": true
+      },
+      {
+        "name": "dismissLabel",
+        "attribute": "dismiss-label",
+        "control": "text",
+        "default": "Dismiss notification",
+        "label": "Dismiss label",
+        "includeDefault": true
+      },
+      {
+        "name": "queuedLabel",
+        "attribute": "queued-label",
+        "control": "text",
+        "default": "+{count} queued",
+        "label": "Queued label",
+        "includeDefault": true
+      },
+      {
+        "name": "pausedLabel",
+        "attribute": "paused-label",
+        "control": "text",
+        "default": "paused",
+        "label": "Paused label",
+        "includeDefault": true
+      }
+    ],
+    "slots": [],
+    "triggers": [
+      {
+        "label": "toast.info('Sync started')",
+        "options": {
+          "variant": "info",
+          "title": "Sync started",
+          "description": "Tokens are recompiling for every adapter."
+        }
+      },
+      {
+        "label": "toast.success('Changes saved')",
+        "options": {
+          "variant": "success",
+          "title": "Changes saved",
+          "description": "Token overrides were published."
+        }
+      },
+      {
+        "label": "toast.warning('Connection unstable')",
+        "options": {
+          "variant": "warning",
+          "title": "Connection unstable",
+          "description": "Edits are queued until you reconnect."
+        }
+      },
+      {
+        "label": "toast.error('Couldn’t publish', { actions: [{ label: 'Retry' }] })",
+        "options": {
+          "variant": "error",
+          "title": "Couldn’t publish",
+          "description": "The registry rejected the request.",
+          "actions": [
+            {
+              "label": "Retry"
+            }
+          ]
+        }
+      },
+      {
+        "label": "toast.dismiss()",
+        "dismiss": true
+      }
+    ]
   }
 ];
 export default playgroundManifest;

package/dist/react/DropdownMenu.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu as DropdownMenuElement } from '@ds-gn/ui/dropdown-menu';
+/**
+ * React wrapper for the `<dsgn-dropdown-menu>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-dropdown-menu>` tag on the server and upgrades on the client.
+ */
+export declare const DropdownMenu: import("@lit/react").ReactWebComponent<DropdownMenuElement, {
+    onDsgnSelect: string;
+}>;

package/dist/react/DropdownMenu.js

@@ -0,0 +1,13 @@
+// frameworks/react/DropdownMenu.ts
+import { DropdownMenu as DropdownMenuElement } from "@ds-gn/ui/dropdown-menu";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var DropdownMenu = createComponent({
+  react: React,
+  tagName: "dsgn-dropdown-menu",
+  elementClass: DropdownMenuElement,
+  events: { onDsgnSelect: "dsgn-select" }
+});
+export {
+  DropdownMenu
+};

package/dist/react/Field.d.ts

@@ -0,0 +1,6 @@
+import { Field as FieldElement } from '@ds-gn/ui/field';
+/**
+ * React wrapper for the `<dsgn-field>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-field>` tag on the server and upgrades on the client.
+ */
+export declare const Field: import("@lit/react").ReactWebComponent<FieldElement, {}>;

package/dist/react/Field.js

@@ -0,0 +1,13 @@
+// frameworks/react/Field.ts
+import { Field as FieldElement } from "@ds-gn/ui/field";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Field = createComponent({
+  react: React,
+  tagName: "dsgn-field",
+  elementClass: FieldElement,
+  events: {}
+});
+export {
+  Field
+};

package/dist/react/Select.d.ts

@@ -0,0 +1,8 @@
+import { Select as SelectElement } from '@ds-gn/ui/select';
+/**
+ * React wrapper for the `<dsgn-select>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-select>` tag on the server and upgrades on the client.
+ */
+export declare const Select: import("@lit/react").ReactWebComponent<SelectElement, {
+    onDsgnChange: string;
+}>;

package/dist/react/Select.js

@@ -0,0 +1,13 @@
+// frameworks/react/Select.ts
+import { Select as SelectElement } from "@ds-gn/ui/select";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Select = createComponent({
+  react: React,
+  tagName: "dsgn-select",
+  elementClass: SelectElement,
+  events: { onDsgnChange: "dsgn-change" }
+});
+export {
+  Select
+};

package/dist/react/Table.d.ts

@@ -0,0 +1,8 @@
+import { Table as TableElement } from '@ds-gn/ui/table';
+/**
+ * React wrapper for the `<dsgn-table>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-table>` tag on the server and upgrades on the client.
+ */
+export declare const Table: import("@lit/react").ReactWebComponent<TableElement, {
+    onDsgnSort: string;
+}>;

package/dist/react/Table.js

@@ -0,0 +1,13 @@
+// frameworks/react/Table.ts
+import { Table as TableElement } from "@ds-gn/ui/table";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Table = createComponent({
+  react: React,
+  tagName: "dsgn-table",
+  elementClass: TableElement,
+  events: { onDsgnSort: "dsgn-sort" }
+});
+export {
+  Table
+};

package/dist/react/Toaster.d.ts

@@ -0,0 +1,8 @@
+import { Toaster as ToasterElement } from '@ds-gn/ui/toaster';
+/**
+ * React wrapper for the `<dsgn-toaster>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-toaster>` tag on the server and upgrades on the client.
+ */
+export declare const Toaster: import("@lit/react").ReactWebComponent<ToasterElement, {
+    onDsgnDismiss: string;
+}>;

package/dist/react/Toaster.js

@@ -0,0 +1,13 @@
+// frameworks/react/Toaster.ts
+import { Toaster as ToasterElement } from "@ds-gn/ui/toaster";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Toaster = createComponent({
+  react: React,
+  tagName: "dsgn-toaster",
+  elementClass: ToasterElement,
+  events: { onDsgnDismiss: "dsgn-dismiss" }
+});
+export {
+  Toaster
+};