@tartaguti/ui-components 0.1.0 → 0.3.0

package/vscode.html-custom-data.json

@@ -618,6 +618,14 @@
           "name": "value",
           "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-combobox>`"
         },
+        {
+          "name": "multiple",
+          "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-combobox>`"
+        },
+        {
+          "name": "values",
+          "description": "The chosen values while `multiple` is on, in the options' order.\n\nType: `string[]`\n\nDefault: `[]`\n\nOn `<tt-combobox>`"
+        },
         {
           "name": "options",
           "description": "Type: `SelectOption[]`\n\nDefault: `[]`\n\nOn `<tt-combobox>`"
@@ -673,7 +681,7 @@
     },
     {
       "name": "tt-company-card",
-      "description": "**Events:** tt-company-select, tt-company-action",
+      "description": "A company in a directory or a search result: logo, name, place, a short\ndescription and tags; selecting it fires tt-company-select.\n\n**Events:** tt-company-select, tt-company-action\n\n**Slots:** badge, meta",
       "attributes": [
         {
           "name": "value",
@@ -691,6 +699,28 @@
           "name": "verified",
           "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-company-card>`"
         },
+        {
+          "name": "status",
+          "description": "A tier or state shown as a badge after the name: \"Gold partner\".\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-company-card>`"
+        },
+        {
+          "name": "status-variant",
+          "description": "Type: `BadgeVariant`\n\nDefault: `\"neutral\"`\n\nOn `<tt-company-card>`",
+          "values": [
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            },
+            {
+              "name": "danger"
+            }
+          ]
+        },
         {
           "name": "city",
           "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-company-card>`"
@@ -852,7 +882,7 @@
     },
     {
       "name": "tt-data-table",
-      "description": "Working table: sorting, selection, row actions, sticky header, and\nloading and empty states.\n\nIt owns nothing. Sort state and selection come in as properties and\nchanges go out as events, so the page stays the single source of truth\nand can put either in a URL. Sorting itself is the page's job too: it\nknows whether the data is an in-memory array or a server query.\n\n**Events:** tt-selection-change, tt-sort, tt-row-click, tt-row-action",
+      "description": "Working table: sorting, selection, row actions, sticky header, and\nloading and empty states. With visible-rows it is virtualized: a box\nthat many rows tall, holding only the rows in view, so ten thousand\nrows scroll as smoothly as ten.\n\nIt owns nothing. Sort state and selection come in as properties and\nchanges go out as events, so the page stays the single source of truth\nand can put either in a URL. Sorting itself is the page's job too: it\nknows whether the data is an in-memory array or a server query.\n\n**Events:** tt-range-change, tt-selection-change, tt-sort, tt-row-click, tt-row-action",
       "attributes": [
         {
           "name": "columns",
@@ -901,6 +931,10 @@
         {
           "name": "clickable-rows",
           "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-data-table>`"
+        },
+        {
+          "name": "visible-rows",
+          "description": "Type: `number`\n\nDefault: `0`\n\nOn `<tt-data-table>`"
         }
       ]
     },
@@ -918,6 +952,72 @@
         }
       ]
     },
+    {
+      "name": "tt-dock",
+      "description": "A few big targets on one edge of the screen: a phone's tab bar, a\nfloating dock on a desktop, or a column down the side. Holds\ntt-dock-item children and renders a <nav>.\n\n---------------------------------------------------------------------\nWHY A DOCK IS NOT A NAVBAR.\n\nA navbar is the top of a site: a brand, links, actions, all sizes. A\ndock is three to five equal targets in thumb reach. Different job,\ndifferent shape, so a different component.\n\n---------------------------------------------------------------------\nIT TAKES ITS OWN SPACE, SO IT NEVER COVERS THE PAGE.\n\nIt is sticky: it sits where you put it and pins to that edge of\nwhatever scrolls (the window, a preview frame, a builder canvas,\ntt-layout's page). Put a bottom dock last, a top dock first, and a\nside dock beside the content in a row, where it is one screen tall\nlike a sticky sidebar. Being in the flow is what keeps the last line\nof content clear of it: at the end of the page the dock sits after\nthe content, not over it.\n\n---------------------------------------------------------------------\nTHE DOCK OWNS WHICH ITEM IS CURRENT.\n\nAn item's click only asks (tt-dock-select from the item). The dock\nmoves `active` to it, off the others, and sends its own\ntt-dock-select, so a dock with no listener (a pasted snippet, a\ngenerated component) still shows the right current page, and a page\nhears one event, not two. A page that sets `active` itself still wins.\n\n**Events:** tt-dock-select",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "bar: across the whole edge. floating: a pill held off the edge.\n\nType: `DockVariant`\n\nDefault: `\"bar\"`\n\nOn `<tt-dock>`",
+          "values": [
+            {
+              "name": "bar"
+            },
+            {
+              "name": "floating"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "description": "The edge it sits on. Top and bottom lay the items in a row; left and right in a column.\n\nType: `DockPosition`\n\nDefault: `\"bottom\"`\n\nOn `<tt-dock>`",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "labels-hidden",
+          "description": "Icons only. Each label stays as the item's name for a screen reader, and a hint for a mouse.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-dock>`"
+        },
+        {
+          "name": "label",
+          "description": "Names the navigation for a screen reader, beside any other on the page.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-dock>`"
+        }
+      ]
+    },
+    {
+      "name": "tt-dock-item",
+      "description": "One target in a tt-dock: an icon over a short label, a link or a button.\n\n---------------------------------------------------------------------\nTHE DOCK KEEPS THE STATE, THE ITEM ONLY ASKS.\n\nA click sends `tt-dock-select` and changes nothing here. The dock\nhears it, moves `active` (the current page) and sends its own\n`tt-dock-select`. Only the\ndock can know that choosing one item un-chooses another, the same\nreason tt-accordion owns its items' open state.\n\n---------------------------------------------------------------------\nHOW THE DOCK STYLES IT.\n\nThe dock decides the shape (a bar, a floating pill, a column) and\nwhether labels show. It says so through inherited custom properties\n(`--tt-dock-item-*`, `--tt-dock-label-*`), read below with the\nbar's values as fallbacks, so an item has no props for any of it and\none used outside a dock still looks right.\n\n**Events:** tt-dock-select",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "The current page, announced as aria-current=\"page\". The dock moves\nit when an item is chosen; set it for the start.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-dock-item>`"
+        },
+        {
+          "name": "disabled",
+          "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-dock-item>`"
+        },
+        {
+          "name": "href",
+          "description": "Makes the item a link. Empty: a button that tells your app it was chosen.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-dock-item>`"
+        },
+        {
+          "name": "value",
+          "description": "Names this item in `tt-dock-select`. Empty: the label text is sent.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-dock-item>`"
+        }
+      ]
+    },
     {
       "name": "tt-drawer",
       "description": "A panel that slides in over the page.\n\nUse it instead of a modal when the thing behind still matters: editing\na row without losing your place in the list, or a filter panel you\nadjust while watching results change. A modal says \"deal with this\nfirst\"; a drawer says \"here is more, the list is still there\".\n\n**Events:** tt-close",
@@ -965,7 +1065,7 @@
         },
         {
           "name": "label",
-          "description": "Type: `string`\n\nDefault: `\"Actions\"`\n\nOn `<tt-dropdown-menu>`"
+          "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-dropdown-menu>`"
         },
         {
           "name": "align",
@@ -1053,7 +1153,7 @@
     },
     {
       "name": "tt-file-upload",
-      "description": "Chooses files, by tapping a button or dropping them on the box. Checks\ntype, size and count before keeping a file, previews images, and\nsubmits the files with its form under `name`.\n\n**Events:** tt-change, tt-reject",
+      "description": "Chooses files, by tapping a button or dropping them on the box. Checks\ntype, size and count before keeping a file, previews images, and\nsubmits the files with its form under `name`.\n\n**Events:** tt-change, tt-reject, tt-retry",
       "attributes": [
         {
           "name": "name",
@@ -1171,7 +1271,7 @@
     },
     {
       "name": "tt-grid",
-      "description": "Responsive grid. By default it auto-fills as many columns as will fit\nat `minWidth`, so it reflows without media queries. Set `columns` for a\nfixed count instead.",
+      "description": "Responsive grid. By default it auto-fills as many columns as will fit\nat `minWidth`, so it reflows without media queries. Set `columns` for a\nfixed count on screens wider than 768px; at 768px and below it always\nauto-fills from `minWidth`.",
       "attributes": [
         {
           "name": "min-width",
@@ -1355,6 +1455,18 @@
         {
           "name": "items",
           "description": "Type: `KeyValue[]`\n\nDefault: `[]`\n\nOn `<tt-key-values>`"
+        },
+        {
+          "name": "layout",
+          "description": "Type: `KeyValuesLayout`\n\nDefault: `\"columns\"`\n\nOn `<tt-key-values>`",
+          "values": [
+            {
+              "name": "columns"
+            },
+            {
+              "name": "split"
+            }
+          ]
         }
       ]
     },
@@ -1390,8 +1502,17 @@
     },
     {
       "name": "tt-layout",
-      "description": "",
-      "attributes": []
+      "description": "The app shell: a navbar across the top, a sidebar down the side and the\npage beside it, with the sidebar turning into a drawer on a phone.\n\n---------------------------------------------------------------------\nTWO WAYS TO SCROLL.\n\nBy default the layout is exactly one screen tall and only the content\narea scrolls, under a fixed bar and beside a fixed sidebar. That is\nthe whole window, and it is what this app's own shell uses.\n\n`contained` keeps the same picture and changes who scrolls: the layout\ngrows with its content and the PAGE scrolls, while the navbar and the\nsidebar stay pinned with position: sticky. Nothing is placed against\nthe window, the phone drawer included, so a contained layout also\nworks inside something smaller than the window: a preview, a design\nin the component builder, a page of documentation.\n\n---------------------------------------------------------------------\nPHONE OR NOT IS ASKED OF THE LAYOUT, NOT THE WINDOW.\n\nThe host is a size container, and the drawer, the navbar's menu button\nand the sidebar's drawer rules all ask the same container query (below\n768px). A media query asks how wide the WINDOW is, which in a builder\ncanvas drawing a 375px phone on a 1440px screen is the wrong question.\nThe container is the host rather than an element inside it, because\nWebKit finds containers through the DOM tree, and the navbar and the\nsidebar are the host's children, not its shadow root's.\n\n**Events:** tt-menu-toggle",
+      "attributes": [
+        {
+          "name": "contained",
+          "description": "Grows with its content and lets the page scroll, with the navbar and\nthe sidebar pinned. Reflected, because the styles match on it.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-layout>`"
+        },
+        {
+          "name": "mobile-menu-open",
+          "description": "Whether the phone menu (the sidebar drawer) is open. The layout opens\nand closes it itself: the navbar's menu button, Escape, the backdrop\nand a click on a menu item. It announces the ones it decides with\ntt-menu-toggle, the same event the navbar sends for its button, so a\nlistener on the layout hears every change once. Setting it opens or\ncloses the drawer; on a wider screen it changes nothing.\n\nNamed as on tt-navbar, whose button it keeps in step.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-layout>`"
+        }
+      ]
     },
     {
       "name": "tt-menu-group",
@@ -1618,64 +1739,15 @@
     },
     {
       "name": "tt-product",
-      "description": "**Events:** tt-product-action",
+      "description": "A product in a shop: photo, name, price and a button.\n\nTWO CHOICES, FOUR RESULTS. `orientation` (a tile for a grid, or a row\nfor a list) and `size` (medium, or small for two across on a phone).\nEvery pairing of the two is designed, so there is no combination that\nbreaks. It had four variants and three layouts, twenty-four pairings,\nand several of them did: text on a pale photo, a white band under the\nphoto of a tall row, a layout that did nothing in a row.\n\nPROPS GIVE THE DEFAULTS, SLOTS ADD TO THEM. `src` draws the photo,\n`rating` the star, `button-label` the button. The `media`, `meta` and\n`actions` slots add your own beside them (or over the photo), and\nclearing the prop drops its default. One rule, so nothing disappears\nwhen something is added.\n\nONE TARGET. With `href` the name is a link, or with `clickable` a\nbutton, and either one is stretched over the whole card by a\npseudo-element, so the card is clickable while the accessibility tree\nholds ONE link named by the product, not a card-sized link wrapping a\nbutton (interactive content inside a link is invalid and announced\ntwice). The action row sits above the stretched link, so its buttons\nstay separate targets.\n\nThe card draws its own surface with tt-card's tokens rather than\ncomposing tt-card, because the stretched link needs the surface as its\npositioned box and the focus ring has to go round the whole card.\n\n**Events:** tt-product-action, tt-product-open\n\n**Slots:** media, badge, meta, actions",
       "attributes": [
         {
-          "name": "src",
+          "name": "heading",
           "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
         },
         {
-          "name": "ratio",
-          "description": "Type: `string`\n\nDefault: `\"1\"`\n\nOn `<tt-product>`"
-        },
-        {
-          "name": "orientation",
-          "description": "Type: `ProductOrientation`\n\nDefault: `\"vertical\"`\n\nOn `<tt-product>`",
-          "values": [
-            {
-              "name": "vertical"
-            },
-            {
-              "name": "horizontal"
-            }
-          ]
-        },
-        {
-          "name": "variant",
-          "description": "Type: `ProductVariant`\n\nDefault: `\"default\"`\n\nOn `<tt-product>`",
-          "values": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "minimal"
-            },
-            {
-              "name": "elevated"
-            },
-            {
-              "name": "featured"
-            }
-          ]
-        },
-        {
-          "name": "layout",
-          "description": "Type: `ProductLayout`\n\nDefault: `\"standard\"`\n\nOn `<tt-product>`",
-          "values": [
-            {
-              "name": "standard"
-            },
-            {
-              "name": "overlay"
-            },
-            {
-              "name": "compact"
-            }
-          ]
-        },
-        {
-          "name": "heading",
-          "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
+          "name": "heading-level",
+          "description": "Its place in the page outline, as on tt-card.\n\nType: `number`\n\nDefault: `3`\n\nOn `<tt-product>`"
         },
         {
           "name": "description",
@@ -1698,20 +1770,56 @@
           "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
         },
         {
-          "name": "value",
+          "name": "src",
           "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
         },
         {
-          "name": "button-link",
-          "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
+          "name": "ratio",
+          "description": "Type: `string`\n\nDefault: `\"1\"`\n\nOn `<tt-product>`"
+        },
+        {
+          "name": "value",
+          "description": "Identifies the product in its events.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
+        },
+        {
+          "name": "href",
+          "description": "The product's page. The name becomes a link over the whole card.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-product>`"
+        },
+        {
+          "name": "clickable",
+          "description": "Without href: the whole card is a button that emits tt-product-open.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-product>`"
         },
         {
           "name": "button-label",
-          "description": "Type: `string`\n\nDefault: `\"Add to basket\"`\n\nOn `<tt-product>`"
+          "description": "The built-in button's text. Empty for no built-in button.\n\nType: `string`\n\nDefault: `\"Add to basket\"`\n\nOn `<tt-product>`"
+        },
+        {
+          "name": "orientation",
+          "description": "Type: `ProductOrientation`\n\nDefault: `\"vertical\"`\n\nOn `<tt-product>`",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Type: `ProductSize`\n\nDefault: `\"medium\"`\n\nOn `<tt-product>`",
+          "values": [
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            }
+          ]
         },
         {
           "name": "disabled",
-          "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-product>`"
+          "description": "Cannot be bought (sold out): the button is off and the photo greys. Still a link.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-product>`"
         }
       ]
     },
@@ -1780,6 +1888,10 @@
         {
           "name": "grade",
           "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-progress>`"
+        },
+        {
+          "name": "budget",
+          "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-progress>`"
         }
       ]
     },
@@ -1924,6 +2036,57 @@
         }
       ]
     },
+    {
+      "name": "tt-scroller",
+      "description": "A row of children side by side that scrolls sideways when they do not\nfit, with no scrollbar.\n\nWith the bar gone, two things say there is more: the edge that has\nmore to scroll fades out, by as much as is hidden there up to the fade\nwidth, so the fade grows in as you scroll rather than snapping on; and,\nwith `controls`, an arrow button on each side that has more.\n\nThe arrows only appear where a pointer can hover. A finger swipes the\nrow natively, which is what people do on a phone, and two 44px circles\nwould cover a third of a phone's row. A mouse with a plain wheel has no\nsideways scroll at all, which is who the arrows are for.\n\nLEFT AND RIGHT ARE PHYSICAL ON PURPOSE. Everything about the layout\nfollows the writing direction (the row starts on the right in a\nright-to-left page), but an arrow points at a side of the screen, and\n\"Scroll left\" names that side, so the fades and arrows are measured\nphysically and stay right in both directions.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Names the row for a screen reader. Given a label, the row is a named group.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-scroller>`"
+        },
+        {
+          "name": "gap",
+          "description": "Type: `ScrollerGap`\n\nDefault: `\"medium\"`\n\nOn `<tt-scroller>`",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "large"
+            }
+          ]
+        },
+        {
+          "name": "snap",
+          "description": "Lands on a whole child after a swipe or an arrow: its start or its centre.\n\nType: `ScrollerSnap`\n\nDefault: `\"none\"`\n\nOn `<tt-scroller>`",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "start"
+            },
+            {
+              "name": "center"
+            }
+          ]
+        },
+        {
+          "name": "controls",
+          "description": "Arrow buttons on the sides that have more, for a mouse.\n\nType: `boolean`\n\nDefault: `false`\n\nOn `<tt-scroller>`"
+        },
+        {
+          "name": "item-width",
+          "description": "Every child's width, as a CSS length (\"240px\", \"80%\"). Empty: each\nchild keeps its own width, which is right for chips but makes a card\nas wide as its longest line.\n\nType: `string`\n\nDefault: `\"\"`\n\nOn `<tt-scroller>`"
+        }
+      ]
+    },
     {
       "name": "tt-search",
       "description": "A search field.\n\nOne field, with the magnifier INSIDE it and a clear button that appears\nonly when there is something to clear. There is no separate submit\nbutton, because search is not a form you submit: results follow typing.\nThe old layout put a filled button beside the input, which read as two\ncontrols and made the field look like it needed permission to run.\nEnter still fires tt-search for anyone who expects it to.\n\n`collapsible` is opt-in, and off by default. Collapsing to an icon on a\nphone is right in a navbar, where the row is fighting for space, and\nwrong in a page toolbar, where the field is the main control on screen.\nOnly the host knows which it is, so the host decides.\n\n**Events:** tt-search-input, tt-search",
@@ -1995,6 +2158,14 @@
           "name": "value",
           "description": "Type: `string`\n\nDefault: `\"\"`\n\nOn `<tt-select>`"
         },
+        {
+          "name": "multiple",
+          "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-select>`"
+        },
+        {
+          "name": "values",
+          "description": "The chosen values while `multiple` is on, in the options' order.\n\nType: `string[]`\n\nDefault: `[]`\n\nOn `<tt-select>`"
+        },
         {
           "name": "placeholder",
           "description": "Type: `string`\n\nDefault: `\"Select an option\"`\n\nOn `<tt-select>`"
@@ -2042,7 +2213,7 @@
     },
     {
       "name": "tt-sidebar",
-      "description": "The navigation column of an app shell.\n\n---------------------------------------------------------------------\nHOW COLLAPSING WORKS, AND WHY IT NEEDS NO PROPS.\n\nWith `collapsible`, the sidebar can shrink to an icon rail. Everything\ninside it has to change at once: labels disappear, rows centre, group\nheadings go, badges go, the indent goes. Passing that down would mean a\n`collapsed` prop on every child, kept in sync by hand, at every depth.\n\nInstead the collapsed state is published as ordinary CSS custom\nproperties on the host, and each child reads the ones it cares about\nthrough var() with the expanded value as the fallback:\n\n  --tt-menu-label-cols      1fr  ->  0fr      label track collapses\n  --tt-menu-gap             sp-2 ->  0px      no gap beside nothing\n  --tt-menu-justify         start->  center   icons centre in the rail\n  --tt-menu-trail-display   flex ->  none     badges and dots go\n  --tt-menu-heading-display flex ->  none     group headings go\n  --tt-menu-rail-rows       unset->  1fr      every group forced open\n  --tt-menu-rail-visibility unset->  visible  ...and its items reachable\n  --tt-menu-indent          sp-2 ->  0px      no nesting indent\n\nCustom properties inherit and they cross shadow boundaries, so this\nreaches a menu item nested three groups deep with no wiring, and a menu\nitem used outside a sidebar simply gets the fallbacks. Same mechanism\nas --tt-radius-nested in tokens.css.\n\nThey are declared in the stylesheet under :host([collapsed]) rather\nthan written from JavaScript, and that matters: a media query can\noverride a stylesheet rule, and cannot override an inline style. It is\nwhat lets the block at the bottom of this file switch the whole rail\noff on a phone, where the sidebar is a drawer and a rail would be an\nunusable 64px strip sliding over the page.\n\n---------------------------------------------------------------------\nWHO OWNS `collapsed`.\n\nThe component toggles itself and announces it with tt-sidebar-toggle,\nthe same shape tt-menu-group uses for open/close. An app that wants to\nremember the choice listens for the event and writes the property back;\none that does not gets working behaviour for free.\n\n**Events:** tt-sidebar-toggle",
+      "description": "The navigation column of an app shell.\n\n---------------------------------------------------------------------\nHOW COLLAPSING WORKS, AND WHY IT NEEDS NO PROPS.\n\nWith `collapsible`, the sidebar can shrink to an icon rail. Everything\ninside it has to change at once: labels disappear, rows centre, group\nheadings go, badges go, the indent goes. Passing that down would mean a\n`collapsed` prop on every child, kept in sync by hand, at every depth.\n\nInstead the collapsed state is published as ordinary CSS custom\nproperties on the host, and each child reads the ones it cares about\nthrough var() with the expanded value as the fallback:\n\n  --tt-menu-label-cols      1fr  ->  0fr      label track collapses\n  --tt-menu-gap             sp-2 ->  0px      no gap beside nothing\n  --tt-menu-justify         start->  center   icons centre in the rail\n  --tt-menu-trail-display   flex ->  none     badges and dots go\n  --tt-menu-heading-display flex ->  none     group headings go\n  --tt-menu-rail-rows       unset->  1fr      every group forced open\n  --tt-menu-rail-visibility unset->  visible  ...and its items reachable\n  --tt-menu-indent          sp-2 ->  0px      no nesting indent\n\nCustom properties inherit and they cross shadow boundaries, so this\nreaches a menu item nested three groups deep with no wiring, and a menu\nitem used outside a sidebar simply gets the fallbacks. Same mechanism\nas --tt-radius-nested in tokens.css.\n\nThey are declared in the stylesheet under :host([collapsed]) rather\nthan written from JavaScript, and that matters: a container query can\noverride a stylesheet rule, and cannot override an inline style. It is\nwhat lets the block at the bottom of this file switch the whole rail\noff in tt-layout's drawer on a phone, where a rail would be an unusable\n64px strip sliding over the page.\n\n---------------------------------------------------------------------\nWHO OWNS `collapsed`.\n\nThe component toggles itself and announces it with tt-sidebar-toggle,\nthe same shape tt-menu-group uses for open/close. An app that wants to\nremember the choice listens for the event and writes the property back;\none that does not gets working behaviour for free.\n\n**Events:** tt-sidebar-toggle",
       "attributes": [
         {
           "name": "variant",
@@ -2075,6 +2246,10 @@
           "name": "collapsed",
           "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-sidebar>`"
         },
+        {
+          "name": "sticky",
+          "description": "Type: `boolean`\n\nDefault: `false`\n\nOn `<tt-sidebar>`"
+        },
         {
           "name": "label",
           "description": "Type: `string`\n\nDefault: `\"Main\"`\n\nOn `<tt-sidebar>`"