@scalar/api-client 3.21.1 → 3.21.3

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @scalar/api-client
 
+## 3.21.3
+
+### Patch Changes
+
+- [#10422](https://github.com/scalar/scalar/pull/10422): Avoid allocating unused character match ranges during document search.
+- [#10402](https://github.com/scalar/scalar/pull/10402): Keep failed requests visible in the response panel and explain possible CORS or network causes for browser fetch failures.
+- [#10400](https://github.com/scalar/scalar/pull/10400): Hide the authentication dropdown in the API Reference when only one required option is active, while retaining authentication and deletion controls in the API Client.
+- [#10382](https://github.com/scalar/scalar/pull/10382): Preserve enum array selections with their original enum value types as JSON arrays in the structured request body form editor and contain long selection labels.
+
+## 3.21.2
+
+### Patch Changes
+
+- [#10369](https://github.com/scalar/scalar/pull/10369): fix: correct the semantics of the authentication card and of nested schema lists
+
+  Two findings from an accessibility audit, both programmatic only with no change
+  to how anything renders:
+  - The reference's Authentication card announced its title as a level two
+    heading, which put a card of controls in the document outline next to the
+    real tag and operation headings. The title is now plain text and the card is
+    exposed as a named group instead, so it stays findable without claiming to
+    open a passage of the page. Collapsible sections in the API client are
+    unaffected and keep their headings.
+  - A schema panel whose root is a composition, a primitive or an array wraps a
+    single nameless row that carries the real property list, so assistive tech
+    announced "list with 1 item" before the list the reader wanted. That wrapper
+    is now presentational and only the real property list is announced.
+
+- [#10371](https://github.com/scalar/scalar/pull/10371): fix: tidy the client modal header at narrow widths
+
+  The method label and copy button now stay inside the address bar at every width instead of moving to a floating row of their own, and the send button spans the full width once it wraps. Below the `lg` breakpoint, where the address bar fills the header row and its method chip reaches the panel edge, the sidebar toggle moves onto the backdrop as a circle that mirrors the close button in the opposite corner. At wider widths it keeps its original place inside the panel.
+
+- [#10374](https://github.com/scalar/scalar/pull/10374): fix: resolve accessibility audit findings in the client modal
+  - Auth fields (Bearer Token, Username, API key and OAuth inputs) now expose their visible label as the accessible name in both the masked and unmasked state
+  - Request and response filter tabs no longer carry `aria-controls`, so screen readers announce each tab once when arrowing through them
+  - Opening the modal from a "Test Request" button now moves focus to the close button first
+
+- [#10369](https://github.com/scalar/scalar/pull/10369): fix: address a batch of screen reader and keyboard accessibility findings
+
+  Corrects programmatic semantics only, with no change to how anything renders:
+  the current sidebar item now reports `aria-current`, the single content type
+  readout leaves the tab order, collapsible sections no longer announce their
+  title twice, the password toggle reports its state through `aria-pressed`, the
+  two document download buttons get distinct accessible names, response status
+  tabs announce what each code means, and the client picker and its search field
+  get accessible names.
+
+- [#10361](https://github.com/scalar/scalar/pull/10361): Preserve configured OAuth redirect URLs when changing credentials or clearing tokens, and hide refresh controls when no refresh token is available.
+
+  Previously saved redirect overrides, including empty strings and prefilled page origins, remain unchanged because they cannot be distinguished from intentional user choices. Users affected by the earlier bug must enter the intended redirect URL again.
+
+  The public `@scalar/workspace-store` OAuth secrets types now expose `x-scalar-secret-redirect-uri` as optional (`string | undefined`). Consumers must handle an absent override separately from an explicit empty string.
+
+- [#10363](https://github.com/scalar/scalar/pull/10363): Avoid duplicate available OAuth2 entries when scopes are selected, and apply configured default scopes when selecting an available scheme.
+
 ## 3.21.1
 
 ### Patch Changes

package/dist/components/SectionFilter.vue.d.ts

@@ -3,8 +3,6 @@ declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<
         filters?: T[];
         /** Localized labels keyed by stable filter IDs. */
         labels?: Partial<Record<T, string>>;
-        /** IDs for the currently available sections. */
-        filterIds?: Partial<Record<T, string>>;
     } & {
         modelValue?: T;
     }) & {

package/dist/components/SectionFilter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilter.vue"],"names":[],"mappings":"AA4LA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA8NO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;kBA5N5C,CAAC,EAAE;QACb,mDAAmD;iBAC1C,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnC,gDAAgD;oBACpC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;;qBAyC3B,CAAC;;;KA+K6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"SectionFilter.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilter.vue"],"names":[],"mappings":"AAqLA,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACtC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAsNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;kBApN5C,CAAC,EAAE;QACb,mDAAmD;iBAC1C,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;;qBAqCxB,CAAC;;;KA6K6E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;WACH,EAAE;;EAGN,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/SectionFilter.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-he
 import SectionFilter_vue_vue_type_script_setup_true_lang_default from "./SectionFilter.vue.script.js";
 /* empty css                            */
 //#region src/components/SectionFilter.vue
-var SectionFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-48147b15"]]);
+var SectionFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SectionFilter_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-50fd0a3c"]]);
 //#endregion
 export { SectionFilter_default as default };
 

package/dist/components/SectionFilter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  filters = [],\n  filterIds,\n  labels,\n} = defineProps<{\n  filters?: T[]\n  /** Localized labels keyed by stable filter IDs. */\n  labels?: Partial<Record<T, string>>\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\nconst { direction } = useLocalization()\n\n/** Keyboard navigation */\nconst navigateSection = (arrow: 'left' | 'right'): void => {\n  // Flex rows reverse in RTL, so the visual arrow direction reverses the index step.\n  const offset =\n    (arrow === 'left' ? -1 : 1) * (direction.value === 'rtl' ? -1 : 1)\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ms-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('left')\"\n    @keydown.right=\"navigateSection('right')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ labels?.[filter] ?? filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden me-1.5\">{{\n          model ? (labels?.[model] ?? model) : model\n        }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.fade-request-section-content:dir(rtl) {\n  background: linear-gradient(\n    to right,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-inline-end: 39px;\n  padding-inline-start: 24px;\n  position: absolute;\n  inset-inline-end: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"SectionFilter.vue.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { filters = [], labels } = defineProps<{\n  filters?: T[]\n  /** Localized labels keyed by stable filter IDs. */\n  labels?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\nconst { direction } = useLocalization()\n\n/** Keyboard navigation */\nconst navigateSection = (arrow: 'left' | 'right'): void => {\n  // Flex rows reverse in RTL, so the visual arrow direction reverses the index step.\n  const offset =\n    (arrow === 'left' ? -1 : 1) * (direction.value === 'rtl' ? -1 : 1)\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ms-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('left')\"\n    @keydown.right=\"navigateSection('right')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ labels?.[filter] ?? filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden me-1.5\">{{\n          model ? (labels?.[model] ?? model) : model\n        }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.fade-request-section-content:dir(rtl) {\n  background: linear-gradient(\n    to right,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-inline-end: 39px;\n  padding-inline-start: 24px;\n  position: absolute;\n  inset-inline-end: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":""}

package/dist/components/SectionFilter.vue.script.js

@@ -10,8 +10,7 @@ var SectionFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	__name: "SectionFilter",
 	props: /*@__PURE__*/ mergeModels({
 		filters: { default: () => [] },
-		labels: {},
-		filterIds: {}
+		labels: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -46,18 +45,13 @@ var SectionFilter_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				return openBlock(), createBlock(SectionFilterButton_default, {
 					key: filter,
 					class: "filter-hover-item",
-					controls: __props.filterIds?.[filter],
 					role: "tab",
 					selected: model.value === filter,
 					onClick: ($event) => model.value = filter
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(__props.labels?.[filter] ?? filter), 1)]),
 					_: 2
-				}, 1032, [
-					"controls",
-					"selected",
-					"onClick"
-				]);
+				}, 1032, ["selected", "onClick"]);
 			}), 128)), createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(model.value ? __props.labels?.[model.value] ?? model.value : model.value), 1), createVNode(unref(ScalarIcon), {
 				icon: "FilterList",
 				size: "md",

package/dist/components/SectionFilter.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  filters = [],\n  filterIds,\n  labels,\n} = defineProps<{\n  filters?: T[]\n  /** Localized labels keyed by stable filter IDs. */\n  labels?: Partial<Record<T, string>>\n  /** IDs for the currently available sections. */\n  filterIds?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\nconst { direction } = useLocalization()\n\n/** Keyboard navigation */\nconst navigateSection = (arrow: 'left' | 'right'): void => {\n  // Flex rows reverse in RTL, so the visual arrow direction reverses the index step.\n  const offset =\n    (arrow === 'left' ? -1 : 1) * (direction.value === 'rtl' ? -1 : 1)\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ms-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('left')\"\n    @keydown.right=\"navigateSection('right')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        :controls=\"filterIds?.[filter]\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ labels?.[filter] ?? filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden me-1.5\">{{\n          model ? (labels?.[model] ?? model) : model\n        }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.fade-request-section-content:dir(rtl) {\n  background: linear-gradient(\n    to right,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-inline-end: 39px;\n  padding-inline-start: 24px;\n  position: absolute;\n  inset-inline-end: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,QAAQ,SAAc,SAAA,YAAC;EAE7B,MAAM,UAAU,IAAoB;EACpC,MAAM,EAAE,cAAc,gBAAgB;;EAGtC,MAAM,mBAAmB,UAAkC;GAEzD,MAAM,UACH,UAAU,SAAS,KAAK,MAAM,UAAU,UAAU,QAAQ,KAAK;GAClE,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,KAAK,IAAI;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;GAC7C,MAAM,QAAQ,QAAA,QAAQ;GAGtB,eAAe;IACb,IAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,8BACF;KACA,IAAI,gBACF,eAAe,MAAM;IAEzB;GACF,CAAC;EACH;;uBAGE,mBA6BM,OAAA;aA5BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,MAAA,GAAA,CAAA,MAAA,CAAA,IAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,GAAA,CAAA,OAAA,CAAA,EAAA;OAC/B,mBAsBM,OAtBN,YAsBM,EAAA,UAAA,IAAA,GApBJ,mBASsB,UAAA,MAAA,WARH,QAAA,UAAV,WAAM;wBADf,YASsB,6BAAA;KAPnB,KAAK;KACN,OAAM;KACL,UAAU,QAAA,YAAY;KACvB,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACgB,CAAA,gBAAA,gBAA7B,QAAA,SAAS,WAAW,MAAM,GAAA,CAAA,CAAA,CAAA;;;;;;;cAE/B,mBASM,OATN,YASM,CAPJ,mBAES,QAFT,YAES,gBADP,MAAA,QAAS,QAAA,SAAS,MAAA,UAAU,MAAA,QAAS,MAAA,KAAK,GAAA,CAAA,GAE5C,YAGkB,MAAA,UAAA,GAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}
+{"version":3,"file":"SectionFilter.vue.script.js","names":[],"sources":["../../src/components/SectionFilter.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends string\">\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { nextTick, ref } from 'vue'\n\nimport SectionFilterButton from '@/components/SectionFilterButton.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { filters = [], labels } = defineProps<{\n  filters?: T[]\n  /** Localized labels keyed by stable filter IDs. */\n  labels?: Partial<Record<T, string>>\n}>()\n\nconst model = defineModel<T>()\n\nconst tablist = ref<HTMLDivElement>()\nconst { direction } = useLocalization()\n\n/** Keyboard navigation */\nconst navigateSection = (arrow: 'left' | 'right'): void => {\n  // Flex rows reverse in RTL, so the visual arrow direction reverses the index step.\n  const offset =\n    (arrow === 'left' ? -1 : 1) * (direction.value === 'rtl' ? -1 : 1)\n  const index = model.value ? filters.indexOf(model.value) : 0\n  const length = filters.length\n\n  // Ensures we loop around the array by using the remainder\n  const newIndex = (index + offset + length) % length\n  model.value = filters[newIndex]\n\n  // Focus the selected button\n  nextTick(() => {\n    if (tablist.value) {\n      const selectedButton = tablist.value.querySelector(\n        `button[aria-selected=\"true\"]`,\n      ) satisfies HTMLButtonElement | null\n      if (selectedButton) {\n        selectedButton.focus()\n      }\n    }\n  })\n}\n</script>\n<template>\n  <div\n    ref=\"tablist\"\n    class=\"filter-hover context-bar-group ms-auto hidden lg:flex\"\n    role=\"tablist\"\n    @keydown.left=\"navigateSection('left')\"\n    @keydown.right=\"navigateSection('right')\">\n    <div\n      class=\"request-section-content request-section-content-filter fade-request-section-content text-c-3 pointer-events-auto relative hidden w-full justify-end gap-[1.5px] rounded py-1.75 text-xs xl:flex\">\n      <SectionFilterButton\n        v-for=\"filter in filters\"\n        :key=\"filter\"\n        class=\"filter-hover-item\"\n        role=\"tab\"\n        :selected=\"model === filter\"\n        @click=\"model = filter\">\n        {{ labels?.[filter] ?? filter }}\n      </SectionFilterButton>\n      <div\n        class=\"filter-button context-bar-group-hover:text-c-1 absolute -end-[30px] flex items-center\">\n        <span class=\"context-bar-group-hover:hidden me-1.5\">{{\n          model ? (labels?.[model] ?? model) : model\n        }}</span>\n        <ScalarIcon\n          icon=\"FilterList\"\n          size=\"md\"\n          thickness=\"2\" />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n.fade-request-section-content {\n  background: linear-gradient(\n    to left,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.fade-request-section-content:dir(rtl) {\n  background: linear-gradient(\n    to right,\n    var(--scalar-background-1) 64%,\n    transparent\n  );\n}\n.filter-hover {\n  height: 100%;\n  padding-inline-end: 39px;\n  padding-inline-start: 24px;\n  position: absolute;\n  inset-inline-end: 0;\n  transition: width 0s ease-in-out 0.2s;\n  overflow: hidden;\n}\n.filter-hover:hover,\n.filter-hover:has(:focus-visible) {\n  width: 100%;\n  z-index: 10;\n}\n.filter-hover:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  height: fit-content;\n  background-color: var(--scalar-background-1);\n  opacity: 0;\n  transition: all 0.3s ease-in-out;\n  pointer-events: none;\n}\n.filter-hover-item {\n  opacity: 0;\n}\n.filter-hover-item:not(:last-of-type) {\n  transform: translate3d(0, 3px, 0);\n}\n.filter-hover:hover .filter-hover-item {\n  transition:\n    opacity 0.2s ease-in-out,\n    transform 0.2s ease-in-out;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(1) {\n  transition-delay: 0.05s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(2) {\n  transition-delay: 0.1s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(3) {\n  transition-delay: 0.15s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(4) {\n  transition-delay: 0.2s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(5) {\n  transition-delay: 0.25s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(6) {\n  transition-delay: 0.3s;\n}\n.filter-hover:hover .filter-hover-item:nth-last-of-type(7) {\n  transition-delay: 0.35s;\n}\n.filter-hover:hover .filter-hover-item,\n.filter-hover:has(:focus-visible) .filter-hover-item {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.filter-hover:hover:before,\n.filter-hover:has(:focus-visible):before {\n  opacity: 0.9;\n  backdrop-filter: blur(10px);\n}\n.filter-button {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.context-bar-group:hover .context-bar-group-hover\\:text-c-1,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:text-c-1 {\n  --tw-text-opacity: 1;\n  color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));\n}\n\n.context-bar-group:hover .context-bar-group-hover\\:hidden,\n.context-bar-group:has(:focus-visible) .context-bar-group-hover\\:hidden {\n  display: none;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ,SAAc,SAAA,YAAC;EAE7B,MAAM,UAAU,IAAoB;EACpC,MAAM,EAAE,cAAc,gBAAgB;;EAGtC,MAAM,mBAAmB,UAAkC;GAEzD,MAAM,UACH,UAAU,SAAS,KAAK,MAAM,UAAU,UAAU,QAAQ,KAAK;GAClE,MAAM,QAAQ,MAAM,QAAQ,QAAA,QAAQ,QAAQ,MAAM,KAAK,IAAI;GAC3D,MAAM,SAAS,QAAA,QAAQ;GAGvB,MAAM,YAAY,QAAQ,SAAS,UAAU;GAC7C,MAAM,QAAQ,QAAA,QAAQ;GAGtB,eAAe;IACb,IAAI,QAAQ,OAAO;KACjB,MAAM,iBAAiB,QAAQ,MAAM,cACnC,8BACF;KACA,IAAI,gBACF,eAAe,MAAM;IAEzB;GACF,CAAC;EACH;;uBAGE,mBA4BM,OAAA;aA3BA;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,WAAO,CAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WAAO,gBAAe,MAAA,GAAA,CAAA,MAAA,CAAA,IAAA,OAAA,OAAA,OAAA,KAAA,UAAA,WACd,gBAAe,OAAA,GAAA,CAAA,OAAA,CAAA,EAAA;OAC/B,mBAqBM,OArBN,YAqBM,EAAA,UAAA,IAAA,GAnBJ,mBAQsB,UAAA,MAAA,WAPH,QAAA,UAAV,WAAM;wBADf,YAQsB,6BAAA;KANnB,KAAK;KACN,OAAM;KACN,MAAK;KACJ,UAAU,MAAA,UAAU;KACpB,UAAK,WAAE,MAAA,QAAQ;;4BACgB,CAAA,gBAAA,gBAA7B,QAAA,SAAS,WAAW,MAAM,GAAA,CAAA,CAAA,CAAA;;;cAE/B,mBASM,OATN,YASM,CAPJ,mBAES,QAFT,YAES,gBADP,MAAA,QAAS,QAAA,SAAS,MAAA,UAAU,MAAA,QAAS,MAAA,KAAK,GAAA,CAAA,GAE5C,YAGkB,MAAA,UAAA,GAAA;IAFhB,MAAK;IACL,MAAK;IACL,WAAU"}

package/dist/components/SectionFilterButton.vue.d.ts

@@ -1,6 +1,5 @@
 type __VLS_Props = {
     selected?: boolean;
-    controls?: string | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/SectionFilterButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionFilterButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilterButton.vue"],"names":[],"mappings":"AAqBA,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,CAAC;AA2CF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SectionFilterButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/SectionFilterButton.vue"],"names":[],"mappings":"AA0BA,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AA0CF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/SectionFilterButton.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionFilterButton.vue.js","names":[],"sources":["../../src/components/SectionFilterButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected, controls } = defineProps<{\n  selected?: boolean\n  controls?: string | undefined\n}>()\n</script>\n<template>\n  <button\n    :aria-controls=\"controls ?? ''\"\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"SectionFilterButton.vue.js","names":[],"sources":["../../src/components/SectionFilterButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected } = defineProps<{\n  selected?: boolean\n}>()\n</script>\n<template>\n  <!--\n    Deliberately no aria-controls. While the focused tab controls a visible\n    panel, NVDA re-announces every tab whose aria-selected changes (Chromium\n    fires a selection event, see nvaccess/nvda#18794), so arrow keys read\n    \"Auth tab selected 2 of 6\" twice. Screen readers do not need the relation\n    to convey the tabs' name, role and state.\n  -->\n  <button\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/SectionFilterButton.vue.script.js

@@ -1,20 +1,12 @@
 import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
 //#region src/components/SectionFilterButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"aria-controls",
-	"aria-selected",
-	"tabindex"
-];
+var _hoisted_1 = ["aria-selected", "tabindex"];
 var SectionFilterButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "SectionFilterButton",
-	props: {
-		selected: { type: Boolean },
-		controls: {}
-	},
+	props: { selected: { type: Boolean } },
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", {
-				"aria-controls": __props.controls ?? "",
 				"aria-selected": !!__props.selected,
 				class: normalizeClass(["hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline", { "text-c-1 pointer-events-none": __props.selected }]),
 				role: "tab",

package/dist/components/SectionFilterButton.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionFilterButton.vue.script.js","names":[],"sources":["../../src/components/SectionFilterButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected, controls } = defineProps<{\n  selected?: boolean\n  controls?: string | undefined\n}>()\n</script>\n<template>\n  <button\n    :aria-controls=\"controls ?? ''\"\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;uBAOE,mBASS,UAAA;IARN,iBAAe,QAAA,YAAQ;IACvB,iBAAa,CAAA,CAAI,QAAA;IAClB,OAAK,eAAA,CAAC,+IAA6I,EAAA,gCACzG,QAAA,SAAQ,CAAA,CAAA;IAClD,MAAK;IACJ,UAAU,QAAA,WAAQ,IAAA;IACnB,MAAK;OACL,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"SectionFilterButton.vue.script.js","names":[],"sources":["../../src/components/SectionFilterButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst { selected } = defineProps<{\n  selected?: boolean\n}>()\n</script>\n<template>\n  <!--\n    Deliberately no aria-controls. While the focused tab controls a visible\n    panel, NVDA re-announces every tab whose aria-selected changes (Chromium\n    fires a selection event, see nvaccess/nvda#18794), so arrow keys read\n    \"Auth tab selected 2 of 6\" twice. Screen readers do not need the relation\n    to convey the tabs' name, role and state.\n  -->\n  <button\n    :aria-selected=\"!!selected\"\n    class=\"hover:bg-b-2 flex w-fit cursor-pointer items-center rounded p-1 px-2 text-center font-medium whitespace-nowrap has-[:focus-visible]:outline\"\n    :class=\"{ 'text-c-1 pointer-events-none': selected }\"\n    role=\"tab\"\n    :tabindex=\"selected ? 0 : -1\"\n    type=\"button\">\n    <slot />\n  </button>\n</template>\n"],"mappings":";;;;;;;;uBAaE,mBAQS,UAAA;IAPN,iBAAa,CAAA,CAAI,QAAA;IAClB,OAAK,eAAA,CAAC,+IAA6I,EAAA,gCACzG,QAAA,SAAQ,CAAA,CAAA;IAClD,MAAK;IACJ,UAAU,QAAA,WAAQ,IAAA;IACnB,MAAK;OACL,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}