@vielzeug/codex 26.10.19 → 26.10.21

package/data/refine.json

@@ -1292,6 +1292,16 @@
     ],
     "description": "Builds a reflow-motion helper for one host element."
   },
+  {
+    "kind": "function",
+    "name": "motionReduced",
+    "return": {
+      "type": {
+        "text": "boolean"
+      }
+    },
+    "description": "Point-in-time check for the two components whose JavaScript *starts* motion\n(the rating's sparkle burst, the drawer's swipe-close snap) and therefore\ncannot rely on the CSS layer alone: a spawned animation with a zeroed\nduration still runs its lifecycle (and its DOM nodes still accumulate), and\nan inline `style.transition` set from a gesture bypasses every token.\n\nEverything else reduces through CSS: `--duration-*`/`--transition-*` zero out\nand the `--_motion-*` hatches switch declarations off at `:root`, which is\nalso why components must never write their own\n`@media (prefers-reduced-motion)` block - it would ignore `data-motion='full'`.\n\nDelegates the three-state resolution to necromancer's `shouldReduceMotion`,\nthe same rule `theme.css` implements in CSS."
+  },
   {
     "kind": "variable",
     "name": "themableBundle",
@@ -3319,8 +3329,8 @@
         "type": {
           "text": "boolean"
         },
-        "description": "Pause while hovered (default: false)",
-        "default": "false"
+        "description": "Pause while hovered or focused (default: true; set false to keep scrolling)",
+        "default": "true; set false to keep scrolling"
       },
       {
         "name": "show-controls",
@@ -5408,6 +5418,13 @@
         },
         "description": "Inherited spatial density: 'default' | 'compact'"
       },
+      {
+        "name": "rounded",
+        "type": {
+          "text": "'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'"
+        },
+        "description": "Inherited corner radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' (bare attribute is 'full')"
+      },
       {
         "name": "size",
         "type": {
@@ -5563,6 +5580,15 @@
       }
     ]
   },
+  {
+    "kind": "variable",
+    "name": "TAB_ROUNDED",
+    "type": {
+      "text": "['', ...ROUNDED_SIZES]"
+    },
+    "default": "['', ...ROUNDED_SIZES]",
+    "description": "`''` is the bare `rounded` attribute, which `roundedVariantMixin` renders as `full`."
+  },
   {
     "kind": "variable",
     "name": "TABS_CTX",
@@ -5613,6 +5639,13 @@
         },
         "description": "Spatial density: 'default' | 'compact'"
       },
+      {
+        "name": "rounded",
+        "type": {
+          "text": "'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'"
+        },
+        "description": "Corner radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' (bare attribute is 'full')"
+      },
       {
         "name": "color",
         "type": {
@@ -6345,96 +6378,6 @@
       }
     ]
   },
-  {
-    "kind": "variable",
-    "name": "COOKIE_BANNER_TAG",
-    "type": {
-      "text": "'ore-cookie-banner'"
-    },
-    "default": "'ore-cookie-banner'",
-    "description": "A fixed-position consent banner for cookie/tracker opt-in: a short policy text\n(default slot, links included), optional per-category opt-in checkboxes with\ndescriptions, and accept-all / reject / save actions.\n\nThe layout is a single column: heading, policy text, a scrollable category\npanel, and actions, that scales linearly from one to many categories. Each\ncategory renders as a checkbox row; its optional `description` passes through\nthe checkbox's `helper` mechanism, so it is both visible below the label and\nlinked to the control via `aria-describedby`. The category panel scrolls\ninternally when it exceeds `--cookie-banner-categories-max-height`, so the\nbanner itself never grows past the viewport.\n\nThe banner owns presentation only. It never stores anything: listen for `decide`,\npersist the emitted record yourself (localStorage, a CMP, your own backend), and\ngate third-party embeds on it. The banner hides itself after `decide` unless\n`hide-on-decide` is set to false. Call `show()` again to let the user revise\ntheir choice.\n\nThe banner is a non-modal `role=\"dialog\"`: screen readers announce it when it\nappears, focus moves to the dialog card itself on `show()`: a neutral target,\nso no action is preselected for keyboard users, and returns to the previously\nfocused element on `hide()`. A banner that is simply present at page load (never\nshown via `show()`) does not steal focus and is not announced; consumers that\nwant a load-time announcement should call `show()` from a user gesture.\n\nThe `decide` record contains exactly the currently configured category ids\n(plus `essential`, always true). Replace: do not merge: the stored record\nwith it, so categories removed between sessions drop their stale keys."
-  },
-  {
-    "kind": "class",
-    "name": "OreCookieBannerElement",
-    "tagName": "ore-cookie-banner",
-    "customElement": true,
-    "description": "A fixed-position consent banner for cookie/tracker opt-in: a short policy text\n(default slot, links included), optional per-category opt-in checkboxes with\ndescriptions, and accept-all / reject / save actions.\nThe layout is a single column: heading, policy text, a scrollable category\npanel, and actions, that scales linearly from one to many categories. Each\ncategory renders as a checkbox row; its optional `description` passes through\nthe checkbox's `helper` mechanism, so it is both visible below the label and\nlinked to the control via `aria-describedby`. The category panel scrolls\ninternally when it exceeds `--cookie-banner-categories-max-height`, so the\nbanner itself never grows past the viewport.\nThe banner owns presentation only. It never stores anything: listen for `decide`,\npersist the emitted record yourself (localStorage, a CMP, your own backend), and\ngate third-party embeds on it. The banner hides itself after `decide` unless\n`hide-on-decide` is set to false. Call `show()` again to let the user revise\ntheir choice.\nThe banner is a non-modal `role=\"dialog\"`: screen readers announce it when it\nappears, focus moves to the dialog card itself on `show()`: a neutral target,\nso no action is preselected for keyboard users, and returns to the previously\nfocused element on `hide()`. A banner that is simply present at page load (never\nshown via `show()`) does not steal focus and is not announced; consumers that\nwant a load-time announcement should call `show()` from a user gesture.\nThe `decide` record contains exactly the currently configured category ids\n(plus `essential`, always true). Replace: do not merge: the stored record\nwith it, so categories removed between sessions drop their stale keys.",
-    "summary": "",
-    "attributes": [
-      {
-        "name": "position",
-        "type": {
-          "text": "string"
-        },
-        "description": "Viewport edge: 'bottom' (default) | 'top'"
-      },
-      {
-        "name": "hide-on-decide",
-        "type": {
-          "text": "boolean"
-        },
-        "description": "Hides the banner after `decide` (default true)"
-      }
-    ],
-    "events": [
-      {
-        "name": "decide",
-        "description": "A decision was made. detail: { consent }: every category id plus `essential`, always true.",
-        "type": {
-          "text": "CustomEvent"
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "",
-        "description": "Policy text, including links to the privacy policy and imprint"
-      }
-    ],
-    "cssParts": [
-      {
-        "name": "banner",
-        "description": "The banner card"
-      },
-      {
-        "name": "text",
-        "description": "The slot wrapper for the policy text"
-      },
-      {
-        "name": "categories",
-        "description": "The scrollable category panel"
-      },
-      {
-        "name": "actions",
-        "description": "The action buttons"
-      }
-    ],
-    "cssProperties": [
-      {
-        "name": "--cookie-banner-width",
-        "description": "Maximum width of the banner card (default min(560px, viewport-fit))"
-      },
-      {
-        "name": "--cookie-banner-inset",
-        "description": "Distance from the viewport edges (default --size-4)"
-      },
-      {
-        "name": "--cookie-banner-z-index",
-        "description": "Stacking order (default --z-modal)"
-      },
-      {
-        "name": "--cookie-banner-categories-max-height",
-        "description": "Category panel scroll threshold (default 16rem)"
-      }
-    ],
-    "demos": [
-      {
-        "url": "",
-        "description": "```html\n<ore-cookie-banner>\n  We use cookies to keep you logged in and, with your consent, to embed music\n  from YouTube. <a href=\"/privacy\">Privacy policy</a>.\n</ore-cookie-banner>\n<script type=\"module\">\n  import '@vielzeug/refine/cookie-banner';\n  const banner = document.querySelector('ore-cookie-banner');\n  banner.categories = [\n    { id: 'music', label: 'Music embeds', description: 'Embed music from YouTube' },\n    { id: 'stats', label: 'Statistics', description: 'Anonymous usage analytics' },\n  ];\n  banner.addEventListener('decide', (event) => {\n    localStorage.setItem('consent', JSON.stringify(event.detail.consent));\n  });\n</script>\n```"
-      }
-    ]
-  },
   {
     "kind": "variable",
     "name": "PASSWORD_STRENGTH_TAG",
@@ -6533,6 +6476,96 @@
       }
     ]
   },
+  {
+    "kind": "variable",
+    "name": "COOKIE_BANNER_TAG",
+    "type": {
+      "text": "'ore-cookie-banner'"
+    },
+    "default": "'ore-cookie-banner'",
+    "description": "A fixed-position consent banner for cookie/tracker opt-in: a short policy text\n(default slot, links included), optional per-category opt-in checkboxes with\ndescriptions, and accept-all / reject / save actions.\n\nThe layout is a single column: heading, policy text, a scrollable category\npanel, and actions, that scales linearly from one to many categories. Each\ncategory renders as a checkbox row; its optional `description` passes through\nthe checkbox's `helper` mechanism, so it is both visible below the label and\nlinked to the control via `aria-describedby`. The category panel scrolls\ninternally when it exceeds `--cookie-banner-categories-max-height`, so the\nbanner itself never grows past the viewport.\n\nThe banner owns presentation only. It never stores anything: listen for `decide`,\npersist the emitted record yourself (localStorage, a CMP, your own backend), and\ngate third-party embeds on it. The banner hides itself after `decide` unless\n`hide-on-decide` is set to false. Call `show()` again to let the user revise\ntheir choice.\n\nThe banner is a non-modal `role=\"dialog\"`: screen readers announce it when it\nappears, focus moves to the dialog card itself on `show()`: a neutral target,\nso no action is preselected for keyboard users, and returns to the previously\nfocused element on `hide()`. A banner that is simply present at page load (never\nshown via `show()`) does not steal focus and is not announced; consumers that\nwant a load-time announcement should call `show()` from a user gesture.\n\nThe `decide` record contains exactly the currently configured category ids\n(plus `essential`, always true). Replace: do not merge: the stored record\nwith it, so categories removed between sessions drop their stale keys."
+  },
+  {
+    "kind": "class",
+    "name": "OreCookieBannerElement",
+    "tagName": "ore-cookie-banner",
+    "customElement": true,
+    "description": "A fixed-position consent banner for cookie/tracker opt-in: a short policy text\n(default slot, links included), optional per-category opt-in checkboxes with\ndescriptions, and accept-all / reject / save actions.\nThe layout is a single column: heading, policy text, a scrollable category\npanel, and actions, that scales linearly from one to many categories. Each\ncategory renders as a checkbox row; its optional `description` passes through\nthe checkbox's `helper` mechanism, so it is both visible below the label and\nlinked to the control via `aria-describedby`. The category panel scrolls\ninternally when it exceeds `--cookie-banner-categories-max-height`, so the\nbanner itself never grows past the viewport.\nThe banner owns presentation only. It never stores anything: listen for `decide`,\npersist the emitted record yourself (localStorage, a CMP, your own backend), and\ngate third-party embeds on it. The banner hides itself after `decide` unless\n`hide-on-decide` is set to false. Call `show()` again to let the user revise\ntheir choice.\nThe banner is a non-modal `role=\"dialog\"`: screen readers announce it when it\nappears, focus moves to the dialog card itself on `show()`: a neutral target,\nso no action is preselected for keyboard users, and returns to the previously\nfocused element on `hide()`. A banner that is simply present at page load (never\nshown via `show()`) does not steal focus and is not announced; consumers that\nwant a load-time announcement should call `show()` from a user gesture.\nThe `decide` record contains exactly the currently configured category ids\n(plus `essential`, always true). Replace: do not merge: the stored record\nwith it, so categories removed between sessions drop their stale keys.",
+    "summary": "",
+    "attributes": [
+      {
+        "name": "position",
+        "type": {
+          "text": "string"
+        },
+        "description": "Viewport edge: 'bottom' (default) | 'top'"
+      },
+      {
+        "name": "hide-on-decide",
+        "type": {
+          "text": "boolean"
+        },
+        "description": "Hides the banner after `decide` (default true)"
+      }
+    ],
+    "events": [
+      {
+        "name": "decide",
+        "description": "A decision was made. detail: { consent }: every category id plus `essential`, always true.",
+        "type": {
+          "text": "CustomEvent"
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "",
+        "description": "Policy text, including links to the privacy policy and imprint"
+      }
+    ],
+    "cssParts": [
+      {
+        "name": "banner",
+        "description": "The banner card"
+      },
+      {
+        "name": "text",
+        "description": "The slot wrapper for the policy text"
+      },
+      {
+        "name": "categories",
+        "description": "The scrollable category panel"
+      },
+      {
+        "name": "actions",
+        "description": "The action buttons"
+      }
+    ],
+    "cssProperties": [
+      {
+        "name": "--cookie-banner-width",
+        "description": "Maximum width of the banner card (default min(560px, viewport-fit))"
+      },
+      {
+        "name": "--cookie-banner-inset",
+        "description": "Distance from the viewport edges (default --size-4)"
+      },
+      {
+        "name": "--cookie-banner-z-index",
+        "description": "Stacking order (default --z-modal)"
+      },
+      {
+        "name": "--cookie-banner-categories-max-height",
+        "description": "Category panel scroll threshold (default 16rem)"
+      }
+    ],
+    "demos": [
+      {
+        "url": "",
+        "description": "```html\n<ore-cookie-banner>\n  We use cookies to keep you logged in and, with your consent, to embed music\n  from YouTube. <a href=\"/privacy\">Privacy policy</a>.\n</ore-cookie-banner>\n<script type=\"module\">\n  import '@vielzeug/refine/cookie-banner';\n  const banner = document.querySelector('ore-cookie-banner');\n  banner.categories = [\n    { id: 'music', label: 'Music embeds', description: 'Embed music from YouTube' },\n    { id: 'stats', label: 'Statistics', description: 'Anonymous usage analytics' },\n  ];\n  banner.addEventListener('decide', (event) => {\n    localStorage.setItem('consent', JSON.stringify(event.detail.consent));\n  });\n</script>\n```"
+      }
+    ]
+  },
   {
     "kind": "variable",
     "name": "PROGRESS_TAG",
@@ -7139,6 +7172,13 @@
         },
         "description": "Semantic role: 'normal' | 'primary' | 'cancel' | 'destructive' (explicit color/variant wins)"
       },
+      {
+        "name": "elevation",
+        "type": {
+          "text": "number"
+        },
+        "description": "Resting shadow depth: 0-5 (flat at rest when omitted)"
+      },
       {
         "name": "icon-only",
         "type": {
@@ -7242,12 +7282,20 @@
       {
         "name": "--button-frost-active-border-color",
         "description": "Border color when pressed (frost variant)"
+      },
+      {
+        "name": "--button-shadow",
+        "description": "Resting shadow for an elevated button (default: the color family's halo)"
+      },
+      {
+        "name": "--button-shadow-contact",
+        "description": "Neutral contact shadow layered under --button-shadow"
       }
     ],
     "demos": [
       {
         "url": "",
-        "description": "```html\n<ore-button variant=\"solid\" color=\"primary\">Click me</ore-button>\n<ore-button loading color=\"success\">Processing...</ore-button>\n<ore-button effect=\"shine\" color=\"primary\">Shine</ore-button>\n<ore-button effect=\"rainbow\" variant=\"frost\">Rainbow</ore-button>\n```"
+        "description": "```html\n<ore-button variant=\"solid\" color=\"primary\">Click me</ore-button>\n<ore-button loading color=\"success\">Processing...</ore-button>\n<ore-button effect=\"shine\" color=\"primary\">Shine</ore-button>\n<ore-button effect=\"rainbow\" variant=\"frost\">Rainbow</ore-button>\n<ore-button elevation=\"1\" emphasis=\"primary\">CTA</ore-button>\n```"
       }
     ]
   },
@@ -7434,8 +7482,8 @@
         "description": "Colour of today's date number"
       },
       {
-        "name": "--calendar-day-outside-opacity",
-        "description": "Opacity of days outside visible month"
+        "name": "--calendar-day-outside-color",
+        "description": "Colour of day numbers outside the visible month"
       }
     ],
     "demos": [
@@ -8609,8 +8657,8 @@
         "description": "Color of today's date number"
       },
       {
-        "name": "--date-picker-day-outside-opacity",
-        "description": "Opacity of days outside visible month"
+        "name": "--date-picker-day-outside-color",
+        "description": "Color of day numbers outside the visible month"
       }
     ],
     "demos": [
@@ -14110,114 +14158,6 @@
       }
     ]
   },
-  {
-    "kind": "variable",
-    "name": "POPOVER_TAG",
-    "type": {
-      "text": "'ore-popover'"
-    },
-    "default": "'ore-popover'",
-    "description": "A floating panel anchored to a trigger element."
-  },
-  {
-    "kind": "class",
-    "name": "OrePopoverElement",
-    "tagName": "ore-popover",
-    "customElement": true,
-    "description": "A floating panel anchored to a trigger element.",
-    "summary": "",
-    "attributes": [
-      {
-        "name": "placement",
-        "type": {
-          "text": "string"
-        },
-        "description": "Preferred placement (default: 'bottom')",
-        "default": "'bottom'"
-      },
-      {
-        "name": "trigger",
-        "type": {
-          "text": "'click' | 'hover' | 'focus'"
-        },
-        "description": "'click' | 'hover' | 'focus' (default: 'click')",
-        "default": "'click'"
-      },
-      {
-        "name": "open",
-        "type": {
-          "text": "boolean"
-        },
-        "description": "Controlled open state"
-      },
-      {
-        "name": "default-open",
-        "type": {
-          "text": "boolean"
-        },
-        "description": "Initial uncontrolled open state"
-      },
-      {
-        "name": "offset",
-        "type": {
-          "text": "number"
-        },
-        "description": "Gap in px (default: 8)",
-        "default": "8"
-      },
-      {
-        "name": "disabled",
-        "type": {
-          "text": "boolean"
-        },
-        "description": "Disables the popover"
-      },
-      {
-        "name": "label",
-        "type": {
-          "text": "string"
-        },
-        "description": "aria-label on the panel"
-      }
-    ],
-    "events": [
-      {
-        "name": "open-change",
-        "description": "When the panel state changes. detail: { open, reason }",
-        "type": {
-          "text": "CustomEvent"
-        }
-      }
-    ],
-    "slots": [
-      {
-        "name": "",
-        "description": "The trigger element"
-      },
-      {
-        "name": "content",
-        "description": "Panel content"
-      }
-    ],
-    "cssParts": [
-      {
-        "name": "panel",
-        "description": "Panel container."
-      }
-    ],
-    "cssProperties": [
-      {
-        "name": "--popover-overflow",
-        "description": "Panel overflow behavior (default: auto)"
-      }
-    ],
-    "demos": [
-      {
-        "url": "",
-        "description": "```html\n<ore-popover placement=\"bottom\" trigger=\"click\">\n  <ore-button>Open info</ore-button>\n  <div slot=\"content\">\n    <p>Popover body content goes here.</p>\n  </div>\n</ore-popover>\n```"
-      }
-    ]
-  },
   {
     "kind": "variable",
     "name": "NAVIGATION_MENU_ITEM_TAG",
@@ -14410,6 +14350,114 @@
     ],
     "demos": []
   },
+  {
+    "kind": "variable",
+    "name": "POPOVER_TAG",
+    "type": {
+      "text": "'ore-popover'"
+    },
+    "default": "'ore-popover'",
+    "description": "A floating panel anchored to a trigger element."
+  },
+  {
+    "kind": "class",
+    "name": "OrePopoverElement",
+    "tagName": "ore-popover",
+    "customElement": true,
+    "description": "A floating panel anchored to a trigger element.",
+    "summary": "",
+    "attributes": [
+      {
+        "name": "placement",
+        "type": {
+          "text": "string"
+        },
+        "description": "Preferred placement (default: 'bottom')",
+        "default": "'bottom'"
+      },
+      {
+        "name": "trigger",
+        "type": {
+          "text": "'click' | 'hover' | 'focus'"
+        },
+        "description": "'click' | 'hover' | 'focus' (default: 'click')",
+        "default": "'click'"
+      },
+      {
+        "name": "open",
+        "type": {
+          "text": "boolean"
+        },
+        "description": "Controlled open state"
+      },
+      {
+        "name": "default-open",
+        "type": {
+          "text": "boolean"
+        },
+        "description": "Initial uncontrolled open state"
+      },
+      {
+        "name": "offset",
+        "type": {
+          "text": "number"
+        },
+        "description": "Gap in px (default: 8)",
+        "default": "8"
+      },
+      {
+        "name": "disabled",
+        "type": {
+          "text": "boolean"
+        },
+        "description": "Disables the popover"
+      },
+      {
+        "name": "label",
+        "type": {
+          "text": "string"
+        },
+        "description": "aria-label on the panel"
+      }
+    ],
+    "events": [
+      {
+        "name": "open-change",
+        "description": "When the panel state changes. detail: { open, reason }",
+        "type": {
+          "text": "CustomEvent"
+        }
+      }
+    ],
+    "slots": [
+      {
+        "name": "",
+        "description": "The trigger element"
+      },
+      {
+        "name": "content",
+        "description": "Panel content"
+      }
+    ],
+    "cssParts": [
+      {
+        "name": "panel",
+        "description": "Panel container."
+      }
+    ],
+    "cssProperties": [
+      {
+        "name": "--popover-overflow",
+        "description": "Panel overflow behavior (default: auto)"
+      }
+    ],
+    "demos": [
+      {
+        "url": "",
+        "description": "```html\n<ore-popover placement=\"bottom\" trigger=\"click\">\n  <ore-button>Open info</ore-button>\n  <div slot=\"content\">\n    <p>Popover body content goes here.</p>\n  </div>\n</ore-popover>\n```"
+      }
+    ]
+  },
   {
     "kind": "function",
     "name": "awaitExit",
@@ -14576,7 +14624,7 @@
       },
       {
         "name": "--spotlight-transition",
-        "description": "Geometry transition (default: 240ms ease)"
+        "description": "Geometry transition (default: var(--duration-250) var(--ease-spring))"
       }
     ],
     "demos": [