@twentyfirstmedia/elements 0.5.0 → 0.6.0

package/dist/vscode.html-custom-data.json

@@ -224,6 +224,18 @@
         {
           "name": "label",
           "description": "(string)"
+        },
+        {
+          "name": "layout",
+          "description": "`list`: one compact row per option (small picture or icon beside the label), e.g. on phones. (\"grid\" | \"list\")",
+          "values": [
+            {
+              "name": "grid"
+            },
+            {
+              "name": "list"
+            }
+          ]
         }
       ],
       "references": [
@@ -810,6 +822,11 @@
         {
           "name": "width",
           "description": "(number)"
+        },
+        {
+          "name": "compact",
+          "description": "Only the workspace's mark, its name as the accessible name (a collapsed sidebar). (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -894,6 +911,14 @@
           "name": "qr",
           "description": "(ReactNode)"
         },
+        {
+          "name": "qr-value",
+          "description": "The otpauth:// link: the kit draws its QR code (instead of `qr`). (string)"
+        },
+        {
+          "name": "trust-device",
+          "description": "A \"Trust this device\" checkbox under the code field; a string replaces its label. (boolean | string)"
+        },
         {
           "name": "secret",
           "description": "(string)"
@@ -954,6 +979,52 @@
         }
       ]
     },
+    {
+      "name": "tf-qr-code",
+      "description": "A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link) never goes to a service.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The text to encode: an otpauth:// link, a URL … (string)"
+        },
+        {
+          "name": "level",
+          "description": "Error correction: L, M (default), Q or H. (\"L\" | \"M\" | \"Q\" | \"H\")",
+          "values": [
+            {
+              "name": "L"
+            },
+            {
+              "name": "M"
+            },
+            {
+              "name": "Q"
+            },
+            {
+              "name": "H"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Width and height (default: the width of its container). (number | string)"
+        },
+        {
+          "name": "quiet",
+          "description": "Light modules around the code (default 4, the standard quiet zone). (number)"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name (default \"QR code\"). (string)"
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://ui.twentyfirst.media/halo/components/QrCode/"
+        }
+      ]
+    },
     {
       "name": "tf-agent-card",
       "description": "One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails).",
@@ -2322,12 +2393,7 @@
     {
       "name": "tf-typing-dots",
       "description": "The TypingDots component as a custom element.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "(string)"
-        }
-      ],
+      "attributes": [],
       "references": [
         {
           "name": "Docs",
@@ -3030,6 +3096,11 @@
         {
           "name": "current",
           "description": "(number)"
+        },
+        {
+          "name": "compact",
+          "description": "Numbers only, with the label of the current step (screen readers still hear every label). Narrow containers (up to 560px) get this on their own. (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -3096,7 +3167,15 @@
         },
         {
           "name": "price",
-          "description": "(number | null)"
+          "description": "A number is formatted as money (0 = \"Free\", null = \"Let's talk\"); any other node is shown as it is, e.g. a placeholder (\"—\") or a price the app formatted itself. (number | null | ReactNode)"
+        },
+        {
+          "name": "price-prefix",
+          "description": "Before the price, e.g. \"from\". (ReactNode)"
+        },
+        {
+          "name": "price-note",
+          "description": "Under the price: net or gross, billed yearly, VAT note … (ReactNode)"
         },
         {
           "name": "was",
@@ -3132,6 +3211,14 @@
           "name": "disabled",
           "description": "Disable the button, e.g. while a checkout starts or when the plan cannot be picked. (boolean)",
           "valueSet": "v"
+        },
+        {
+          "name": "href",
+          "description": "The action as a link (checkout or sign-up page), with `linkAs` for a router's link. (string)"
+        },
+        {
+          "name": "link-as",
+          "description": "(ElementType)"
         }
       ],
       "references": [
@@ -3156,6 +3243,11 @@
         {
           "name": "delay",
           "description": "(number)"
+        },
+        {
+          "name": "animate",
+          "description": "`false`: show the value without counting (it is always the value on the server). (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -3342,7 +3434,11 @@
       "attributes": [
         {
           "name": "crumbs",
-          "description": "(string[])"
+          "description": "A breadcrumb above the title (see `Breadcrumb`): labels, or items with `href`/`onClick`. ((string | Crumb)[])"
+        },
+        {
+          "name": "crumb-link-as",
+          "description": "The element crumb links render as, e.g. Next.js `Link`. (ElementType)"
         },
         {
           "name": "title",
@@ -3405,6 +3501,11 @@
           "name": "animate",
           "description": "(boolean)",
           "valueSet": "v"
+        },
+        {
+          "name": "stack",
+          "description": "Cards instead of columns when the table's box is narrow (up to 600px): every row stacks its cells, each with its column label. Without it narrow tables scroll sideways. (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -3459,6 +3560,26 @@
           "name": "active",
           "description": "(boolean)",
           "valueSet": "v"
+        },
+        {
+          "name": "href",
+          "description": "Makes the row a link (with `linkAs` for a router's link). (string)"
+        },
+        {
+          "name": "link-as",
+          "description": "(ElementType)"
+        },
+        {
+          "name": "actions",
+          "description": "Buttons of the row's own (rename, remove …), outside the clickable area so nothing interactive is nested. Without `onClick` and `href` the row is not interactive at all. (ReactNode)"
+        },
+        {
+          "name": "title-lines",
+          "description": "Lines the title may take before it ends in an ellipsis (default: it wraps freely). (number)"
+        },
+        {
+          "name": "subtitle-lines",
+          "description": "Lines the subtitle may take (default 1); badges and facts wrap within them. (number)"
         }
       ],
       "references": [
@@ -4414,6 +4535,15 @@
             }
           ]
         },
+        {
+          "name": "action",
+          "description": "An interactive control at the end of the field (an `IconButton`: clear, copy, locate …). Unlike `suffix` it can be clicked, and it stays when the field shows an error or success mark. (ReactNode)"
+        },
+        {
+          "name": "reveal",
+          "description": "For `type=\"password\"`: a button that shows and hides the password (default true). (boolean)",
+          "valueSet": "v"
+        },
         {
           "name": "name",
           "description": "Field name inside a `Form`: the field shows that name's validation message. (string)"
@@ -4828,6 +4958,15 @@
           "description": "(boolean)",
           "valueSet": "v"
         },
+        {
+          "name": "clear-on-error",
+          "description": "Empties the cells when `error` turns on, ready for the next try (default true). (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "ref",
+          "description": "`ref.current.reset()` empties the cells on demand. (Ref<OtpInputHandle>)"
+        },
         {
           "name": "label",
           "description": "(string)"
@@ -4869,6 +5008,15 @@
           "name": "multiple",
           "description": "(boolean)",
           "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "No picking or dropping; the list stays visible. (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "name",
+          "description": "Takes part in a surrounding form under this name: the listed files are submitted with it. (string)"
         }
       ],
       "references": [
@@ -5449,11 +5597,33 @@
         },
         {
           "name": "shortcut",
-          "description": "(string)"
+          "description": "The key hint, e.g. \"⌘K\" (hidden on touch screens). (string)"
+        },
+        {
+          "name": "bind-shortcut",
+          "description": "⌘/Ctrl + the hint's last key (K for \"⌘K\") focuses the field, except while typing elsewhere. (boolean)",
+          "valueSet": "v"
         },
         {
           "name": "value",
           "description": "(string)"
+        },
+        {
+          "name": "default-value",
+          "description": "(string)"
+        },
+        {
+          "name": "name",
+          "description": "(string)"
+        },
+        {
+          "name": "auto-focus",
+          "description": "(boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "input-props",
+          "description": "For a search with suggestions (combobox): role, aria-controls, aria-activedescendant … (InputHTMLAttributes<HTMLInputElement>)"
         }
       ],
       "references": [
@@ -5592,6 +5762,18 @@
           "description": "(boolean)",
           "valueSet": "v"
         },
+        {
+          "name": "size",
+          "description": "`sm`: a compact trigger, e.g. a sort menu next to a heading. (\"sm\" | \"md\")",
+          "values": [
+            {
+              "name": "sm"
+            },
+            {
+              "name": "md"
+            }
+          ]
+        },
         {
           "name": "label",
           "description": "(string)"
@@ -5828,7 +6010,15 @@
         },
         {
           "name": "start",
-          "description": "(number)"
+          "description": "First image when uncontrolled. (number)"
+        },
+        {
+          "name": "index",
+          "description": "The shown image (controlled, 0-based), with `onIndexChange`. (number)"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the gallery (default \"Images\"), e.g. the listing's title. (string)"
         },
         {
           "name": "ratio",
@@ -5955,7 +6145,15 @@
       "attributes": [
         {
           "name": "items",
-          "description": "(string[])"
+          "description": "The trail; the last one is the current page. Items with `href` are links, with `onClick` buttons. ((string | Crumb)[])"
+        },
+        {
+          "name": "link-as",
+          "description": "The element links render as (default `a`), e.g. Next.js `Link`. (ElementType)"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the navigation (default \"Breadcrumb\"). (string)"
         }
       ],
       "references": [
@@ -5980,6 +6178,14 @@
         {
           "name": "default-page",
           "description": "Start page when uncontrolled (default 1). (number)"
+        },
+        {
+          "name": "link-as",
+          "description": "The element links render as (default `a`), e.g. Next.js `Link`. (ElementType)"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the navigation (default \"Pagination\"), e.g. \"Search results pages\". (string)"
         }
       ],
       "references": [
@@ -6031,7 +6237,7 @@
     },
     {
       "name": "tf-sidebar",
-      "description": "App navigation down the side: groups with headings, counts, one level of nested pages and a collapsed mode with icons only.",
+      "description": "App navigation down the side: groups with headings, counts and badges, one level of nested pages, links, item menus and a collapsed mode with icons only.",
       "attributes": [
         {
           "name": "groups",
@@ -6041,6 +6247,21 @@
           "name": "current",
           "description": "Id (or label) of the current page. (string)"
         },
+        {
+          "name": "variant",
+          "description": "`floating` (default): a card with rounded corners and a shadow. `attached`: full height, flush with the edge of the screen, divided by a line. `shell`: on the dark frame of `AppShell`. (\"floating\" | \"attached\" | \"shell\")",
+          "values": [
+            {
+              "name": "floating"
+            },
+            {
+              "name": "attached"
+            },
+            {
+              "name": "shell"
+            }
+          ]
+        },
         {
           "name": "collapsed",
           "description": "Icons only. (boolean)",
@@ -6051,17 +6272,52 @@
           "description": "(boolean)",
           "valueSet": "v"
         },
+        {
+          "name": "storage-key",
+          "description": "Remember the collapsed state in the browser under this key. (string)"
+        },
+        {
+          "name": "shortcut",
+          "description": "⌘B (Ctrl+B) collapses and expands the sidebar, except while typing in a field. (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "link-as",
+          "description": "The element items with an `href` render as (default `a`), e.g. Next.js `Link`. (ElementType)"
+        },
+        {
+          "name": "mobile-open",
+          "description": "On phones (up to 760px wide): whether the drawer is open (controlled). (boolean)",
+          "valueSet": "v"
+        },
         {
           "name": "header",
-          "description": "Top of the sidebar (brand, workspace switcher). (ReactNode)"
+          "description": "Top of the sidebar (brand, `WorkspaceSwitcher`); a function gets the collapsed state. (ReactNode | ((state: { collapsed: boolean }) => ReactNode))"
         },
         {
           "name": "footer",
-          "description": "Bottom of the sidebar (account, settings). (ReactNode)"
+          "description": "Bottom of the sidebar (`UserMenu`, settings); a function gets the collapsed state. (ReactNode | ((state: { collapsed: boolean }) => ReactNode))"
+        },
+        {
+          "name": "as",
+          "description": "`nav` (default) for app navigation. `aside` for filters, settings or other tools beside the content: a complementary region instead of a navigation landmark. (\"nav\" | \"aside\")",
+          "values": [
+            {
+              "name": "nav"
+            },
+            {
+              "name": "aside"
+            }
+          ]
+        },
+        {
+          "name": "collapsible",
+          "description": "Offers the collapse button and the icons-only mode (default true; filters usually set false). (boolean)",
+          "valueSet": "v"
         },
         {
           "name": "label",
-          "description": "Accessible name of the navigation. (string)"
+          "description": "Accessible name of the navigation (or the aside). (string)"
         }
       ],
       "references": [
@@ -6071,6 +6327,51 @@
         }
       ]
     },
+    {
+      "name": "tf-user-menu",
+      "description": "The signed-in account at the foot of a sidebar: avatar, name and email, opening a menu with profile, settings and sign-out.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "(string)"
+        },
+        {
+          "name": "email",
+          "description": "(string)"
+        },
+        {
+          "name": "avatar",
+          "description": "Picture URL; initials otherwise. (string)"
+        },
+        {
+          "name": "items",
+          "description": "The menu: profile, settings, sign out … ((MenuItem | \"-\")[])"
+        },
+        {
+          "name": "compact",
+          "description": "Only the avatar (a collapsed sidebar). (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "side",
+          "description": "Where the menu opens (default `top`, for the foot of a sidebar). (\"top\" | \"bottom\")",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Docs",
+          "url": "https://ui.twentyfirst.media/halo/components/UserMenu/"
+        }
+      ]
+    },
     {
       "name": "tf-connection-card",
       "description": "Connected services and the live connection: ConnectionCard and ConnectionBanner.",
@@ -6810,6 +7111,11 @@
               "name": "md"
             }
           ]
+        },
+        {
+          "name": "block",
+          "description": "Fills the width and shares it evenly; labels end in an ellipsis when space runs short. (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [
@@ -7272,7 +7578,7 @@
       "attributes": [
         {
           "name": "brand",
-          "description": "(string)"
+          "description": "The product name, or a node (a logo mark with the name). (ReactNode)"
         },
         {
           "name": "tag",
@@ -7318,6 +7624,25 @@
         {
           "name": "bottom",
           "description": "(RailItem[])"
+        },
+        {
+          "name": "expanded",
+          "description": "Names next to the icons (controlled); every button has a tooltip while collapsed. (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "default-expanded",
+          "description": "(boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "toggle",
+          "description": "A button at the foot that expands and collapses the rail. (boolean)",
+          "valueSet": "v"
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the rail (default \"Tools\"). (string)"
         }
       ],
       "references": [
@@ -7375,9 +7700,30 @@
           "name": "bottom",
           "description": "Bar along the bottom edge (dock, playback, a summary). (ReactNode)"
         },
+        {
+          "name": "controls",
+          "description": "Controls of the background (zoom, compass, locate) in the free corner above the bottom bar. (ReactNode)"
+        },
+        {
+          "name": "attribution",
+          "description": "Source notes of the background (map attribution), under `controls`, clear of every slot. (ReactNode)"
+        },
+        {
+          "name": "start-width",
+          "description": "Width of the start column (default 320px) and of the end column (default 340px). (number | string)"
+        },
+        {
+          "name": "end-width",
+          "description": "(number | string)"
+        },
+        {
+          "name": "end-sheet",
+          "description": "Below 720px of width the end slot becomes a bottom sheet over the background, with a handle that expands and collapses it (default true). `false` stacks it with the others. (boolean)",
+          "valueSet": "v"
+        },
         {
           "name": "height",
-          "description": "Height of the layout (default 640). Below 720px of width the slots stack: top, start, end, bottom. (number | string)"
+          "description": "Height of the layout (default 640). Below 720px of width the slots stack: top, start, end, bottom. The layout sets `--floating-safe-top/-start/-end/-bottom` (px) to the space its slots take, so map libraries can keep their own controls clear of them. (number | string)"
         },
         {
           "name": "surface",
@@ -7440,7 +7786,7 @@
         },
         {
           "name": "brand",
-          "description": "(string)"
+          "description": "The product name, or a node (a logo mark with the name; collapsed sidebars show it whole). (ReactNode)"
         },
         {
           "name": "tag",
@@ -7486,6 +7832,34 @@
         {
           "name": "rail-bottom",
           "description": "(RailItem[])"
+        },
+        {
+          "name": "navigation",
+          "description": "`top` (default): navigation in the top bar, tools in the side rail. `sidebar`: a labelled sidebar on the frame, with groups, nesting and a drawer on phones. (\"top\" | \"sidebar\")",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "sidebar"
+            }
+          ]
+        },
+        {
+          "name": "sidebar-groups",
+          "description": "With `navigation=\"sidebar\"`: groups instead of the flat `nav` list. (SidebarGroup[])"
+        },
+        {
+          "name": "sidebar",
+          "description": "With `navigation=\"sidebar\"`: more sidebar props (collapsed, storageKey, shortcut, linkAs …). (Partial<Omit<SidebarProps, \"variant\" | \"groups\">>)"
+        },
+        {
+          "name": "workspaces",
+          "description": "With `navigation=\"sidebar\"`: the workspace switcher at the top instead of the brand. (WorkspaceSwitcherProps)"
+        },
+        {
+          "name": "user-menu",
+          "description": "The account menu's entries (with `navigation=\"sidebar\"` at the foot of the sidebar). ((MenuItem | \"-\")[])"
         }
       ],
       "references": [
@@ -7559,7 +7933,7 @@
         },
         {
           "name": "categories",
-          "description": "({ id: string; label: string; text?: string; required?: boolean; default?: boolean; }[])"
+          "description": "({ id: string; label: string; /** What the category covers; may hold a link to the details. */ text?: ReactNode; required?: boolean; default?: boolean; }[])"
         },
         {
           "name": "open",
@@ -7570,6 +7944,11 @@
           "name": "inline",
           "description": "(boolean)",
           "valueSet": "v"
+        },
+        {
+          "name": "equal-choice",
+          "description": "\"Only necessary\" and \"Accept all\" with the same weight (both secondary buttons), as German data protection authorities expect on the first layer. (boolean)",
+          "valueSet": "v"
         }
       ],
       "references": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twentyfirstmedia/elements",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Every Twentyfirst UI component as a custom element: <tf-button>, <tf-data-table> … for plain HTML, Vue, Svelte, Angular, Astro and server templates.",
   "license": "MIT",
   "author": "Twentyfirst Media (https://twentyfirst.media)",
@@ -54,7 +54,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@twentyfirstmedia/ui-core": "0.5.0",
+    "@twentyfirstmedia/ui-core": "0.6.0",
     "@types/node": "26.6.6",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",