@zeix/le-truc 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.ai-context.md +234 -0
- package/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc +111 -0
- package/.editorconfig +12 -0
- package/.github/copilot-instructions.md +62 -0
- package/.github/workflows/codeql.yml +108 -0
- package/.github/workflows/static.yml +43 -0
- package/.prettierrc +17 -0
- package/CLAUDE.md +215 -0
- package/CODE_OF_CONDUCT.md +128 -0
- package/CONTRIBUTING.md +160 -0
- package/LICENSE +21 -0
- package/README.md +474 -0
- package/biome.json +295 -0
- package/bun.lock +239 -0
- package/docs/about.html +105 -0
- package/docs/assets/main.css +1 -0
- package/docs/assets/main.js +10 -0
- package/docs/assets/main.js.map +66 -0
- package/docs/components.html +293 -0
- package/docs/data-flow.html +308 -0
- package/docs/examples/basic-button.html +367 -0
- package/docs/examples/basic-counter.html +188 -0
- package/docs/examples/basic-hello.html +138 -0
- package/docs/examples/basic-number.html +271 -0
- package/docs/examples/basic-pluralize.html +214 -0
- package/docs/examples/card-callout.html +152 -0
- package/docs/examples/card-mediaqueries.html +138 -0
- package/docs/examples/context-media.html +198 -0
- package/docs/examples/empty.html +37 -0
- package/docs/examples/form-checkbox.html +233 -0
- package/docs/examples/form-combobox.html +420 -0
- package/docs/examples/form-listbox.html +434 -0
- package/docs/examples/form-radiogroup.html +296 -0
- package/docs/examples/form-spinbutton.html +402 -0
- package/docs/examples/form-textbox.html +361 -0
- package/docs/examples/layout.html +67 -0
- package/docs/examples/module-carousel.html +552 -0
- package/docs/examples/module-catalog.html +241 -0
- package/docs/examples/module-codeblock.html +270 -0
- package/docs/examples/module-dialog.html +343 -0
- package/docs/examples/module-lazyload.html +289 -0
- package/docs/examples/module-list.html +197 -0
- package/docs/examples/module-pagination.html +283 -0
- package/docs/examples/module-scrollarea.html +447 -0
- package/docs/examples/module-tabgroup.html +526 -0
- package/docs/examples/module-todo.html +367 -0
- package/docs/examples/module-with-type.html +63 -0
- package/docs/examples/nested-components.html +88 -0
- package/docs/examples/recursive.html +56 -0
- package/docs/examples/simple-text.html +39 -0
- package/docs/examples/snippet.html +93 -0
- package/docs/examples/with-styles.html +75 -0
- package/docs/getting-started.html +143 -0
- package/docs/index.html +112 -0
- package/docs/sitemap.xml +28 -0
- package/docs/styling.html +160 -0
- package/docs/sw.js +112 -0
- package/docs-src/api/README.md +478 -0
- package/docs-src/api/_media/LICENSE +21 -0
- package/docs-src/api/classes/CircularDependencyError.md +299 -0
- package/docs-src/api/classes/CircularMutationError.md +301 -0
- package/docs-src/api/classes/ContextRequestEvent.md +590 -0
- package/docs-src/api/classes/DependencyTimeoutError.md +301 -0
- package/docs-src/api/classes/InvalidCallbackError.md +303 -0
- package/docs-src/api/classes/InvalidComponentNameError.md +295 -0
- package/docs-src/api/classes/InvalidCustomElementError.md +301 -0
- package/docs-src/api/classes/InvalidEffectsError.md +301 -0
- package/docs-src/api/classes/InvalidPropertyNameError.md +307 -0
- package/docs-src/api/classes/InvalidReactivesError.md +307 -0
- package/docs-src/api/classes/InvalidSignalValueError.md +303 -0
- package/docs-src/api/classes/MissingElementError.md +307 -0
- package/docs-src/api/classes/NullishSignalValueError.md +299 -0
- package/docs-src/api/classes/StoreKeyExistsError.md +303 -0
- package/docs-src/api/classes/StoreKeyRangeError.md +299 -0
- package/docs-src/api/classes/StoreKeyReadonlyError.md +303 -0
- package/docs-src/api/functions/asBoolean.md +21 -0
- package/docs-src/api/functions/asEnum.md +31 -0
- package/docs-src/api/functions/asInteger.md +39 -0
- package/docs-src/api/functions/asJSON.md +49 -0
- package/docs-src/api/functions/asNumber.md +37 -0
- package/docs-src/api/functions/asString.md +37 -0
- package/docs-src/api/functions/createCollection.md +83 -0
- package/docs-src/api/functions/createSensor.md +71 -0
- package/docs-src/api/functions/dangerouslySetInnerHTML.md +48 -0
- package/docs-src/api/functions/defineComponent.md +65 -0
- package/docs-src/api/functions/isCollection.md +37 -0
- package/docs-src/api/functions/isParser.md +41 -0
- package/docs-src/api/functions/match.md +47 -0
- package/docs-src/api/functions/on.md +58 -0
- package/docs-src/api/functions/pass.md +53 -0
- package/docs-src/api/functions/provideContexts.md +47 -0
- package/docs-src/api/functions/read.md +47 -0
- package/docs-src/api/functions/requestContext.md +51 -0
- package/docs-src/api/functions/resolve.md +40 -0
- package/docs-src/api/functions/runEffects.md +51 -0
- package/docs-src/api/functions/runElementEffects.md +57 -0
- package/docs-src/api/functions/schedule.md +33 -0
- package/docs-src/api/functions/setAttribute.md +48 -0
- package/docs-src/api/functions/setProperty.md +52 -0
- package/docs-src/api/functions/setStyle.md +48 -0
- package/docs-src/api/functions/setText.md +42 -0
- package/docs-src/api/functions/show.md +42 -0
- package/docs-src/api/functions/toSignal.md +37 -0
- package/docs-src/api/functions/toggleAttribute.md +48 -0
- package/docs-src/api/functions/toggleClass.md +48 -0
- package/docs-src/api/functions/updateElement.md +53 -0
- package/docs-src/api/globals.md +131 -0
- package/docs-src/api/type-aliases/Cleanup.md +27 -0
- package/docs-src/api/type-aliases/Collection.md +91 -0
- package/docs-src/api/type-aliases/CollectionListener.md +27 -0
- package/docs-src/api/type-aliases/Component.md +17 -0
- package/docs-src/api/type-aliases/ComponentProp.md +11 -0
- package/docs-src/api/type-aliases/ComponentProps.md +11 -0
- package/docs-src/api/type-aliases/ComponentSetup.md +31 -0
- package/docs-src/api/type-aliases/ComponentUI.md +27 -0
- package/docs-src/api/type-aliases/Computed.md +49 -0
- package/docs-src/api/type-aliases/ComputedCallback.md +29 -0
- package/docs-src/api/type-aliases/Context.md +33 -0
- package/docs-src/api/type-aliases/ContextType.md +19 -0
- package/docs-src/api/type-aliases/DangerouslySetInnerHTMLOptions.md +27 -0
- package/docs-src/api/type-aliases/DiffResult.md +61 -0
- package/docs-src/api/type-aliases/Effect.md +35 -0
- package/docs-src/api/type-aliases/EffectCallback.md +23 -0
- package/docs-src/api/type-aliases/Effects.md +21 -0
- package/docs-src/api/type-aliases/ElementEffects.md +21 -0
- package/docs-src/api/type-aliases/ElementFromKey.md +21 -0
- package/docs-src/api/type-aliases/ElementQueries.md +27 -0
- package/docs-src/api/type-aliases/ElementUpdater.md +131 -0
- package/docs-src/api/type-aliases/EventHandler.md +31 -0
- package/docs-src/api/type-aliases/EventType.md +17 -0
- package/docs-src/api/type-aliases/Fallback.md +21 -0
- package/docs-src/api/type-aliases/Initializers.md +21 -0
- package/docs-src/api/type-aliases/LooseReader.md +31 -0
- package/docs-src/api/type-aliases/MatchHandlers.md +77 -0
- package/docs-src/api/type-aliases/MaybeCleanup.md +23 -0
- package/docs-src/api/type-aliases/MaybeSignal.md +17 -0
- package/docs-src/api/type-aliases/Parser.md +39 -0
- package/docs-src/api/type-aliases/ParserOrFallback.md +21 -0
- package/docs-src/api/type-aliases/PassedProp.md +25 -0
- package/docs-src/api/type-aliases/PassedProps.md +21 -0
- package/docs-src/api/type-aliases/Reactive.md +25 -0
- package/docs-src/api/type-aliases/Reader.md +31 -0
- package/docs-src/api/type-aliases/ReservedWords.md +11 -0
- package/docs-src/api/type-aliases/ResolveResult.md +29 -0
- package/docs-src/api/type-aliases/SensorEvents.md +25 -0
- package/docs-src/api/type-aliases/Signal.md +41 -0
- package/docs-src/api/type-aliases/State.md +85 -0
- package/docs-src/api/type-aliases/Store.md +29 -0
- package/docs-src/api/type-aliases/UI.md +11 -0
- package/docs-src/api/type-aliases/UnknownContext.md +13 -0
- package/docs-src/api/variables/CONTEXT_REQUEST.md +11 -0
- package/docs-src/api/variables/UNSET.md +23 -0
- package/docs-src/api/variables/batch.md +25 -0
- package/docs-src/api/variables/createComputed.md +41 -0
- package/docs-src/api/variables/createEffect.md +35 -0
- package/docs-src/api/variables/createState.md +37 -0
- package/docs-src/api/variables/createStore.md +42 -0
- package/docs-src/api/variables/diff.md +43 -0
- package/docs-src/api/variables/isAbortError.md +33 -0
- package/docs-src/api/variables/isAsyncFunction.md +39 -0
- package/docs-src/api/variables/isComputed.md +37 -0
- package/docs-src/api/variables/isEqual.md +49 -0
- package/docs-src/api/variables/isFunction.md +39 -0
- package/docs-src/api/variables/isMutableSignal.md +37 -0
- package/docs-src/api/variables/isNumber.md +33 -0
- package/docs-src/api/variables/isRecord.md +39 -0
- package/docs-src/api/variables/isRecordOrArray.md +39 -0
- package/docs-src/api/variables/isSignal.md +37 -0
- package/docs-src/api/variables/isState.md +37 -0
- package/docs-src/api/variables/isStore.md +37 -0
- package/docs-src/api/variables/isString.md +33 -0
- package/docs-src/api/variables/isSymbol.md +33 -0
- package/docs-src/api/variables/toError.md +33 -0
- package/docs-src/api/variables/valueString.md +33 -0
- package/docs-src/includes/menu.html +44 -0
- package/docs-src/pages/about.md +89 -0
- package/docs-src/pages/components.md +437 -0
- package/docs-src/pages/data-flow.md +449 -0
- package/docs-src/pages/getting-started.md +170 -0
- package/docs-src/pages/index.md +98 -0
- package/docs-src/pages/styling.md +165 -0
- package/eslint.config.js +64 -0
- package/examples/_common/clear.ts +49 -0
- package/examples/_common/fetch.ts +160 -0
- package/examples/_common/focus.ts +45 -0
- package/examples/_common/highlight.ts +5 -0
- package/examples/_global.css +463 -0
- package/examples/basic-button/basic-button.css +176 -0
- package/examples/basic-button/basic-button.html +46 -0
- package/examples/basic-button/basic-button.spec.ts +160 -0
- package/examples/basic-button/basic-button.ts +45 -0
- package/examples/basic-button/copyToClipboard.ts +37 -0
- package/examples/basic-counter/basic-counter.css +21 -0
- package/examples/basic-counter/basic-counter.html +24 -0
- package/examples/basic-counter/basic-counter.spec.ts +85 -0
- package/examples/basic-counter/basic-counter.ts +43 -0
- package/examples/basic-hello/basic-hello.html +34 -0
- package/examples/basic-hello/basic-hello.spec.ts +110 -0
- package/examples/basic-hello/basic-hello.ts +36 -0
- package/examples/basic-number/basic-number.html +79 -0
- package/examples/basic-number/basic-number.spec.ts +175 -0
- package/examples/basic-number/basic-number.ts +124 -0
- package/examples/basic-pluralize/basic-pluralize.html +64 -0
- package/examples/basic-pluralize/basic-pluralize.spec.ts +258 -0
- package/examples/basic-pluralize/basic-pluralize.ts +82 -0
- package/examples/card-callout/card-callout.css +79 -0
- package/examples/card-callout/card-callout.html +5 -0
- package/examples/card-mediaqueries/card-mediaqueries.html +29 -0
- package/examples/card-mediaqueries/card-mediaqueries.spec.ts +300 -0
- package/examples/card-mediaqueries/card-mediaqueries.ts +41 -0
- package/examples/context-media/context-media.html +3 -0
- package/examples/context-media/context-media.ts +127 -0
- package/examples/form-checkbox/form-checkbox.css +70 -0
- package/examples/form-checkbox/form-checkbox.html +13 -0
- package/examples/form-checkbox/form-checkbox.spec.ts +357 -0
- package/examples/form-checkbox/form-checkbox.ts +50 -0
- package/examples/form-checkbox/vanilla-checkbox.ts +101 -0
- package/examples/form-combobox/form-combobox.css +118 -0
- package/examples/form-combobox/form-combobox.html +74 -0
- package/examples/form-combobox/form-combobox.spec.ts +977 -0
- package/examples/form-combobox/form-combobox.ts +128 -0
- package/examples/form-listbox/form-listbox.css +71 -0
- package/examples/form-listbox/form-listbox.html +67 -0
- package/examples/form-listbox/form-listbox.spec.ts +1050 -0
- package/examples/form-listbox/form-listbox.ts +196 -0
- package/examples/form-listbox/mocks/timezones.json +495 -0
- package/examples/form-radiogroup/form-radiogroup.css +87 -0
- package/examples/form-radiogroup/form-radiogroup.html +51 -0
- package/examples/form-radiogroup/form-radiogroup.spec.ts +515 -0
- package/examples/form-radiogroup/form-radiogroup.ts +58 -0
- package/examples/form-spinbutton/form-spinbutton.css +95 -0
- package/examples/form-spinbutton/form-spinbutton.html +96 -0
- package/examples/form-spinbutton/form-spinbutton.spec.ts +688 -0
- package/examples/form-spinbutton/form-spinbutton.ts +111 -0
- package/examples/form-textbox/form-textbox.css +104 -0
- package/examples/form-textbox/form-textbox.html +53 -0
- package/examples/form-textbox/form-textbox.spec.ts +542 -0
- package/examples/form-textbox/form-textbox.ts +104 -0
- package/examples/main.css +22 -0
- package/examples/main.ts +23 -0
- package/examples/module-carousel/module-carousel.css +113 -0
- package/examples/module-carousel/module-carousel.html +208 -0
- package/examples/module-carousel/module-carousel.spec.ts +523 -0
- package/examples/module-carousel/module-carousel.ts +131 -0
- package/examples/module-catalog/module-catalog.css +22 -0
- package/examples/module-catalog/module-catalog.html +82 -0
- package/examples/module-catalog/module-catalog.spec.ts +396 -0
- package/examples/module-catalog/module-catalog.ts +37 -0
- package/examples/module-codeblock/module-codeblock.css +95 -0
- package/examples/module-codeblock/module-codeblock.html +28 -0
- package/examples/module-codeblock/module-codeblock.ts +47 -0
- package/examples/module-demo/module-demo.css +13 -0
- package/examples/module-dialog/module-dialog.css +96 -0
- package/examples/module-dialog/module-dialog.html +66 -0
- package/examples/module-dialog/module-dialog.spec.ts +557 -0
- package/examples/module-dialog/module-dialog.ts +81 -0
- package/examples/module-lazyload/mocks/empty.html +1 -0
- package/examples/module-lazyload/mocks/module-with-type.html +27 -0
- package/examples/module-lazyload/mocks/nested-components.html +52 -0
- package/examples/module-lazyload/mocks/recursive.html +20 -0
- package/examples/module-lazyload/mocks/simple-text.html +3 -0
- package/examples/module-lazyload/mocks/snippet.html +57 -0
- package/examples/module-lazyload/mocks/with-styles.html +39 -0
- package/examples/module-lazyload/module-lazyload.html +132 -0
- package/examples/module-lazyload/module-lazyload.spec.ts +734 -0
- package/examples/module-lazyload/module-lazyload.ts +89 -0
- package/examples/module-list/module-list.html +30 -0
- package/examples/module-list/module-list.spec.ts +592 -0
- package/examples/module-list/module-list.ts +99 -0
- package/examples/module-pagination/module-pagination.css +79 -0
- package/examples/module-pagination/module-pagination.html +16 -0
- package/examples/module-pagination/module-pagination.spec.ts +701 -0
- package/examples/module-pagination/module-pagination.ts +88 -0
- package/examples/module-scrollarea/module-scrollarea.css +77 -0
- package/examples/module-scrollarea/module-scrollarea.html +189 -0
- package/examples/module-scrollarea/module-scrollarea.spec.ts +445 -0
- package/examples/module-scrollarea/module-scrollarea.ts +81 -0
- package/examples/module-tabgroup/module-tabgroup.css +55 -0
- package/examples/module-tabgroup/module-tabgroup.html +269 -0
- package/examples/module-tabgroup/module-tabgroup.spec.ts +631 -0
- package/examples/module-tabgroup/module-tabgroup.ts +102 -0
- package/examples/module-toc/module-toc.css +34 -0
- package/examples/module-todo/module-todo.css +84 -0
- package/examples/module-todo/module-todo.html +92 -0
- package/examples/module-todo/module-todo.spec.ts +528 -0
- package/examples/module-todo/module-todo.ts +91 -0
- package/examples/section-hero/section-hero.css +37 -0
- package/examples/section-menu/section-menu.css +81 -0
- package/examples/server.ts +95 -0
- package/examples/test-setup.md +314 -0
- package/index.dev.js +1688 -0
- package/index.dev.ts +127 -0
- package/index.js +3 -0
- package/index.js.map +42 -0
- package/index.ts +127 -0
- package/package.json +64 -0
- package/playwright.config.ts +31 -0
- package/server/BUILD_SYSTEM.md +428 -0
- package/server/SERVER.md +286 -0
- package/server/build.ts +91 -0
- package/server/config.ts +130 -0
- package/server/effects/api.ts +28 -0
- package/server/effects/css.ts +31 -0
- package/server/effects/examples.ts +109 -0
- package/server/effects/js.ts +32 -0
- package/server/effects/menu.ts +34 -0
- package/server/effects/pages.ts +178 -0
- package/server/effects/service-worker.ts +57 -0
- package/server/effects/sitemap.ts +27 -0
- package/server/file-signals.ts +361 -0
- package/server/file-watcher.ts +77 -0
- package/server/io.ts +174 -0
- package/server/layout-engine.ts +470 -0
- package/server/layout-utils.ts +615 -0
- package/server/layouts/api.html +76 -0
- package/server/layouts/base.html +37 -0
- package/server/layouts/blog.html +115 -0
- package/server/layouts/example.html +104 -0
- package/server/layouts/overview.html +165 -0
- package/server/layouts/page.html +36 -0
- package/server/layouts/test.html +24 -0
- package/server/markdoc-helpers.ts +217 -0
- package/server/markdoc.config.ts +29 -0
- package/server/schema/callout.markdoc.ts +17 -0
- package/server/schema/carousel.markdoc.ts +118 -0
- package/server/schema/demo.markdoc.ts +74 -0
- package/server/schema/fence.markdoc.ts +84 -0
- package/server/schema/heading.markdoc.ts +23 -0
- package/server/schema/hero.markdoc.ts +59 -0
- package/server/schema/section.markdoc.ts +10 -0
- package/server/schema/slide.markdoc.ts +17 -0
- package/server/schema/source.markdoc.ts +53 -0
- package/server/schema/tabgroup.markdoc.ts +102 -0
- package/server/serve.ts +635 -0
- package/server/templates/README.md +352 -0
- package/server/templates/constants.ts +236 -0
- package/server/templates/fragments.ts +159 -0
- package/server/templates/hmr.ts +269 -0
- package/server/templates/menu.ts +33 -0
- package/server/templates/performance-hints.ts +94 -0
- package/server/templates/service-worker.ts +403 -0
- package/server/templates/sitemap.ts +57 -0
- package/server/templates/toc.ts +41 -0
- package/server/templates/utils.ts +378 -0
- package/src/component.ts +215 -0
- package/src/context.ts +156 -0
- package/src/effects/attribute.ts +82 -0
- package/src/effects/class.ts +28 -0
- package/src/effects/event.ts +67 -0
- package/src/effects/html.ts +60 -0
- package/src/effects/method.ts +57 -0
- package/src/effects/pass.ts +103 -0
- package/src/effects/property.ts +57 -0
- package/src/effects/style.ts +34 -0
- package/src/effects/text.ts +28 -0
- package/src/effects.ts +412 -0
- package/src/errors.ts +160 -0
- package/src/parsers/boolean.ts +14 -0
- package/src/parsers/json.ts +33 -0
- package/src/parsers/number.ts +55 -0
- package/src/parsers/string.ts +32 -0
- package/src/parsers.ts +90 -0
- package/src/scheduler.ts +47 -0
- package/src/signals/collection.ts +253 -0
- package/src/signals/sensor.ts +131 -0
- package/src/ui.ts +236 -0
- package/src/util.ts +187 -0
- package/tsconfig.json +34 -0
- package/types/examples/basic-button/basic-button.d.ts +16 -0
- package/types/examples/basic-hello/basic-hello.d.ts +18 -0
- package/types/index.d.ts +27 -0
- package/types/index.dev.d.ts +27 -0
- package/types/src/collection.d.ts +27 -0
- package/types/src/component.d.ts +32 -0
- package/types/src/context.d.ts +85 -0
- package/types/src/effects/attribute.d.ts +23 -0
- package/types/src/effects/callMethod.d.ts +23 -0
- package/types/src/effects/class.d.ts +13 -0
- package/types/src/effects/dangerouslySetInnerHTML.d.ts +18 -0
- package/types/src/effects/event.d.ts +18 -0
- package/types/src/effects/html.d.ts +17 -0
- package/types/src/effects/method.d.ts +22 -0
- package/types/src/effects/pass.d.ts +18 -0
- package/types/src/effects/property.d.ts +22 -0
- package/types/src/effects/setAttribute.d.ts +24 -0
- package/types/src/effects/setProperty.d.ts +23 -0
- package/types/src/effects/setStyle.d.ts +14 -0
- package/types/src/effects/setText.d.ts +13 -0
- package/types/src/effects/style.d.ts +13 -0
- package/types/src/effects/text.d.ts +12 -0
- package/types/src/effects/toggleClass.d.ts +14 -0
- package/types/src/effects.d.ts +153 -0
- package/types/src/errors.d.ts +99 -0
- package/types/src/events.d.ts +27 -0
- package/types/src/extractors.d.ts +23 -0
- package/types/src/parsers/boolean.d.ts +10 -0
- package/types/src/parsers/json.d.ts +13 -0
- package/types/src/parsers/number.d.ts +21 -0
- package/types/src/parsers/string.d.ts +19 -0
- package/types/src/parsers.d.ts +41 -0
- package/types/src/scheduler.d.ts +11 -0
- package/types/src/sensor.d.ts +27 -0
- package/types/src/signals/collection.d.ts +32 -0
- package/types/src/signals/sensor.d.ts +27 -0
- package/types/src/ui.d.ts +37 -0
- package/types/src/util.d.ts +65 -0
package/docs/about.html
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>About – Le Truc Docs</title>
|
|
7
|
+
<meta name="description" content="License, versioning, getting involved" />
|
|
8
|
+
<link
|
|
9
|
+
rel="preload"
|
|
10
|
+
href="./assets/main.css?v=mj7yz3d3"
|
|
11
|
+
as="style"
|
|
12
|
+
/>
|
|
13
|
+
<link
|
|
14
|
+
rel="modulepreload"
|
|
15
|
+
href="./assets/main.js?v=mj7yz3d3"
|
|
16
|
+
/>
|
|
17
|
+
<link
|
|
18
|
+
rel="stylesheet"
|
|
19
|
+
href="./assets/main.css?v=mj7yz3d3"
|
|
20
|
+
/>
|
|
21
|
+
<script
|
|
22
|
+
type="module"
|
|
23
|
+
src="./assets/main.js?v=mj7yz3d3"
|
|
24
|
+
></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body class="">
|
|
27
|
+
<context-router>
|
|
28
|
+
<header class="content-grid">
|
|
29
|
+
<a href="#main" class="skiplink visually-hidden">
|
|
30
|
+
Skip to main content
|
|
31
|
+
</a>
|
|
32
|
+
<h1 class="content">Le Truc Docs <small>Version 0.15.0</small></h1>
|
|
33
|
+
<section-menu>
|
|
34
|
+
<nav>
|
|
35
|
+
<h2 class="visually-hidden">Main Menu</h2>
|
|
36
|
+
<ol>
|
|
37
|
+
<li>
|
|
38
|
+
<a href="index.html">
|
|
39
|
+
<span class="icon">📖</span>
|
|
40
|
+
<strong>Introduction</strong>
|
|
41
|
+
<small>Overview and key benefits of Le Truc</small>
|
|
42
|
+
</a>
|
|
43
|
+
</li><li>
|
|
44
|
+
<a href="getting-started.html">
|
|
45
|
+
<span class="icon">🚀</span>
|
|
46
|
+
<strong>Getting Started</strong>
|
|
47
|
+
<small>Installation, setup, and first steps</small>
|
|
48
|
+
</a>
|
|
49
|
+
</li><li>
|
|
50
|
+
<a href="components.html">
|
|
51
|
+
<span class="icon">🏗️</span>
|
|
52
|
+
<strong>Components</strong>
|
|
53
|
+
<small>Anatomy, lifecycle, signals, effects</small>
|
|
54
|
+
</a>
|
|
55
|
+
</li><li>
|
|
56
|
+
<a href="styling.html">
|
|
57
|
+
<span class="icon">🎨</span>
|
|
58
|
+
<strong>Styling</strong>
|
|
59
|
+
<small>Scoped styles, CSS custom properties</small>
|
|
60
|
+
</a>
|
|
61
|
+
</li><li>
|
|
62
|
+
<a href="data-flow.html">
|
|
63
|
+
<span class="icon">🔄</span>
|
|
64
|
+
<strong>Data Flow</strong>
|
|
65
|
+
<small>Passing state, events, context</small>
|
|
66
|
+
</a>
|
|
67
|
+
</li><li>
|
|
68
|
+
<a href="about.html">
|
|
69
|
+
<span class="icon">🤝</span>
|
|
70
|
+
<strong>About</strong>
|
|
71
|
+
<small>License, versioning, getting involved</small>
|
|
72
|
+
</a>
|
|
73
|
+
</li>
|
|
74
|
+
</ol>
|
|
75
|
+
</nav>
|
|
76
|
+
</section-menu>
|
|
77
|
+
<card-callout class="content danger" hidden>
|
|
78
|
+
<p class="error" role="alert" aria-live="assertive"></p>
|
|
79
|
+
</card-callout>
|
|
80
|
+
</header>
|
|
81
|
+
<main id="main" class="content-grid"><section-hero><h1 id="-about"><a name="-about" class="anchor" href="#-about"><span class="permalink">🔗</span><span class="title">🤝 About</span></a></h1><div class="hero-layout"><div class="lead"><p><strong>Join the Le Truc community!</strong> This page covers the people behind Le Truc, how you can contribute, versioning details, and licensing. Whether you're a developer, designer, or sponsor, there are many ways to get involved.</p></div><module-toc>
|
|
82
|
+
<nav>
|
|
83
|
+
<h2>On This Page</h2>
|
|
84
|
+
<ol>
|
|
85
|
+
<li>
|
|
86
|
+
<a href="#whos-behind-le-truc">Who's Behind Le Truc?</a>
|
|
87
|
+
</li><li>
|
|
88
|
+
<a href="#license">License</a>
|
|
89
|
+
</li><li>
|
|
90
|
+
<a href="#version-history">Version History</a>
|
|
91
|
+
</li><li>
|
|
92
|
+
<a href="#getting-involved">Getting Involved</a>
|
|
93
|
+
</li>
|
|
94
|
+
</ol>
|
|
95
|
+
</nav>
|
|
96
|
+
</module-toc></div></section-hero><section><h2 id="whos-behind-le-truc"><a name="whos-behind-le-truc" class="anchor" href="#whos-behind-le-truc"><span class="permalink">🔗</span><span class="title">Who's Behind Le Truc?</span></a></h2><p>Le Truc is an <strong>open-source project</strong>, actively developed by <a href="https://zeix.com">Zeix AG</a>, a Switzerland-based agency for User-Centered Design, committed to enhancing accessibility and usability in web technologies.</p><h3 id="core-team-contributors"><a name="core-team-contributors" class="anchor" href="#core-team-contributors"><span class="permalink">🔗</span><span class="title">Core Team & Contributors</span></a></h3><ul><li><strong>Zeix AG</strong>: <a href="https://github.com/zeixcom">@zeixcom</a> – Maintainers and primary developers</li><li><strong>Esther Brunner</strong>: <a href="https://github.com/estherbrunner">@estherbrunner</a> – Lead developer</li><li><strong>Fabian Haefliger</strong>: <a href="https://github.com/fabianhaef">@fabianhaef</a> – Core team</li></ul><h3 id="sponsors"><a name="sponsors" class="anchor" href="#sponsors"><span class="permalink">🔗</span><span class="title">Sponsors</span></a></h3><card-callout class="note"><p><strong>Become a Sponsor</strong></p><p>Le Truc is free and open-source. If your organization finds it valuable, consider <a href="info@zeix.com">sponsoring its development</a> to help make web development <strong>lightweight, accessible, and fun</strong> again!</p></card-callout></section><section><h2 id="license"><a name="license" class="anchor" href="#license"><span class="permalink">🔗</span><span class="title">License</span></a></h2><p>This project is licensed under the <a href="https://opensource.org/licenses/MIT">MIT License</a>, which means you can <strong>use, modify, and distribute</strong> it freely – even in commercial projects.</p><p>A copy of the license can be found in the <a href="https://github.com/zeixcom/le-truc/blob/main/LICENSE">LICENSE</a> file of the repository.</p></section><section><h2 id="version-history"><a name="version-history" class="anchor" href="#version-history"><span class="permalink">🔗</span><span class="title">Version History</span></a></h2><h3 id="current-version-0150"><a name="current-version-0150" class="anchor" href="#current-version-0150"><span class="permalink">🔗</span><span class="title">Current Version: 0.15.0</span></a></h3><card-callout class="caution"><p><strong>Release candidate</strong></p><p>This version is a <strong>pre-release</strong> of Le Truc, meaning <strong>breaking changes</strong> may still occur before the official release of version 1.0. Please check the <a href="https://github.com/zeixcom/le-truc/releases">release notes</a> before updating.</p></card-callout><h3 id="versioning-scheme"><a name="versioning-scheme" class="anchor" href="#versioning-scheme"><span class="permalink">🔗</span><span class="title">Versioning Scheme</span></a></h3><p>Le Truc follows <a href="https://semver.org/">Semantic Versioning</a> (SemVer), which is structured as <code>MAJOR.MINOR.PATCH</code>.</p><ul><li><strong>MAJOR</strong>: Breaking changes that require migrations.</li><li><strong>MINOR</strong>: New features that are backwards compatible.</li><li><strong>PATCH</strong>: Bug fixes and performance improvements.</li></ul><h3 id="previous-pre-releases"><a name="previous-pre-releases" class="anchor" href="#previous-pre-releases"><span class="permalink">🔗</span><span class="title">Previous Pre-Releases</span></a></h3><p>View all releases and associated notes on <a href="https://github.com/zeixcom/le-truc/releases">Github Releases</a>.</p></section><section><h2 id="getting-involved"><a name="getting-involved" class="anchor" href="#getting-involved"><span class="permalink">🔗</span><span class="title">Getting Involved</span></a></h2><p>Le Truc is <strong>an open-source project</strong>, and contributions are always welcome! Whether you’re <strong>reporting bugs, improving documentation, or suggesting features</strong>, here's how you can help:</p><ul><li><a href="https://github.com/zeixcom/le-truc/issues">Open an Issue</a> – Report bugs or suggest features.</li><li><a href="https://github.com/zeixcom/le-truc/blob/main/CONTRIBUTING.html">Submit a Pull Request</a> – Help improve Le Truc by fixing issues or adding new features.</li><li>Join the Discussion – Share ideas and get feedback from the community.</li></ul><h3 id="contributing-code"><a name="contributing-code" class="anchor" href="#contributing-code"><span class="permalink">🔗</span><span class="title">Contributing Code</span></a></h3><ul><li>Fork the repository, create a new branch, and submit a pull request.</li><li>Read the <a href="https://github.com/zeixcom/le-truc/blob/main/CONTRIBUTING.html">Contributing Guidelines</a> for setting up a development environment and best practices.</li></ul><h3 id="community-guidelines"><a name="community-guidelines" class="anchor" href="#community-guidelines"><span class="permalink">🔗</span><span class="title">Community Guidelines</span></a></h3><p>We strive for a welcoming and inclusive environment. Please follow our <a href="https://github.com/zeixcom/le-truc/blob/main/CODE_OF_CONDUCT.html">Code of Conduct</a> when contributing.</p></section></main>
|
|
97
|
+
<footer class="content-grid">
|
|
98
|
+
<div class="content">
|
|
99
|
+
<h2 class="visually-hidden">Footer</h2>
|
|
100
|
+
<p>© 2024 – 2025 Zeix AG</p>
|
|
101
|
+
</div>
|
|
102
|
+
</footer>
|
|
103
|
+
</context-router>
|
|
104
|
+
</body>
|
|
105
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--content-max-width:48rem;--breakout-size:12rem;--space-xxs:.2361rem;--space-xs:.382rem;--space-s:.618rem;--space-m:1rem;--space-l:1.618rem;--space-xl:2.6179rem;--space-xxl:4.2358rem;--font-size-xs:clamp(.75rem,.125vw + .725rem,.7813rem);--font-size-s:clamp(.875rem,.25vw + .825rem,.9375rem);--font-size-m:clamp(1rem,.5vw + .9rem,1.125rem);--font-size-l:clamp(1.125rem,.75vw + .975rem,1.3125rem);--font-size-xl:clamp(1.3125rem,1vw + 1.1125rem,1.5625rem);--font-size-xxl:clamp(1.5rem,1.5vw + 1.2rem,1.875rem);--font-size-xxxl:clamp(1.75rem,2vw + 1.35rem,2.25rem);--line-height-xs:1;--line-height-s:1.2;--line-height-m:1.414;--line-height-l:1.618;--color-white:white;--color-black:black;--color-neutral-10:#ecebef;--color-neutral-20:#d8d6dd;--color-neutral-30:#c4c1ca;--color-neutral-40:#aeabb6;--color-neutral-50:#97939f;--color-neutral-60:#7e7b85;--color-neutral-70:#636169;--color-neutral-80:#46444a;--color-neutral-90:#242326;--color-blue-10:#e1eef8;--color-blue-20:#badef7;--color-blue-30:#8eccf6;--color-blue-40:#5fb9f0;--color-blue-50:#36a2de;--color-blue-60:#2488bd;--color-blue-70:#2a6a90;--color-blue-80:#2a4a5e;--color-blue-90:#1b252c;--color-purple-10:#eee9fa;--color-purple-20:#dfd0fb;--color-purple-30:#cfb5fe;--color-purple-40:#be99fa;--color-purple-50:#a97fe9;--color-purple-60:#8e69c6;--color-purple-70:#6e5597;--color-purple-80:#4b3e62;--color-purple-90:#26212d;--color-pink-10:#fde4ed;--color-pink-20:#fec5da;--color-pink-30:#fda3c7;--color-pink-40:#f283b2;--color-pink-50:#db689b;--color-pink-60:#b95482;--color-pink-70:#8f4666;--color-pink-80:#603647;--color-pink-90:#2e1e24;--color-orange-10:#fce7d7;--color-orange-20:#fccba6;--color-orange-30:#f8ae75;--color-orange-40:#ea934c;--color-orange-50:#d37a30;--color-orange-60:#b26523;--color-orange-70:#8a5122;--color-orange-80:#5d3b21;--color-orange-90:#2d2016;--color-green-10:#e8efd8;--color-green-20:#cfdfa8;--color-green-30:#b5cd77;--color-green-40:#9db84c;--color-green-50:#86a12e;--color-green-60:#6f8721;--color-green-70:#586a21;--color-green-80:#3f4a21;--color-green-90:#212617;--color-primary:var(--color-purple-70);--color-primary-hover:var(--color-purple-80);--color-primary-active:var(--color-purple-90);--color-primary-text:var(--color-purple-10);--color-secondary:var(--color-neutral-20);--color-secondary-hover:var(--color-neutral-30);--color-secondary-active:var(--color-neutral-40);--color-error:var(--color-pink-70);--color-error-hover:var(--color-pink-80);--color-error-active:var(--color-pink-90);--color-error-text:var(--color-pink-10);--color-error-invalid:var(--color-pink-50);--color-success:var(--color-green-70);--color-success-hover:var(--color-green-80);--color-success-active:var(--color-green-90);--color-success-text:var(--color-green-10);--color-selection-hover:var(--color-blue-20);--color-selection:var(--color-blue-50);--color-selection-selected:var(--color-blue-70);--color-selection-active:var(--color-blue-80);--color-input:var(--color-white);--color-background:var(--color-neutral-10);--color-background-alt:var(--color-neutral-20);--color-border:var(--color-neutral-50);--color-text:var(--color-purple-90);--color-text-soft:var(--color-purple-80);--color-text-inverted:var(--color-white);--color-shadow:rgba(0,0,0,.1);--font-family-sans:"Helvetica Neue",Arial,Roboto,sans-serif;--font-family-mono:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;--font-weight-regular:400;--font-weight-bold:700;--opacity-transparent:0;--opacity-translucent:.4;--opacity-dimmed:.8;--opacity-solid:1;--transition-short:.2s;--transition-medium:.5s;--transition-long:1.25s;--easing-linear:linear;--easing-in:ease-in;--easing-out:ease-out;--easing-inout:ease-in-out;--input-height:2rem}@media screen and (min-width:45em) and (max-width:75em){:root{--font-size-xs:clamp(.7813rem,.1042vw + .7344rem,.8125rem);--font-size-s:clamp(.9375rem,.2083vw + .8438rem,1rem);--font-size-m:clamp(1.125rem,.4167vw + .9375rem,1.25rem);--font-size-l:clamp(1.3125rem,.8333vw + .9375rem,1.5625rem);--font-size-xl:clamp(1.5625rem,1.4583vw + .9063rem,2rem);--font-size-xxl:clamp(1.875rem,2.0833vw + .9375rem,2.5rem);--font-size-xxxl:clamp(2.25rem,2.9167vw + .9375rem,3.125rem)}}@media screen and (min-width:75em) and (max-width:125em){:root{--font-size-xs:clamp(.8125rem,.0694vw + .7604rem,.8438rem);--font-size-s:clamp(1rem,.2778vw + .7917rem,1.125rem);--font-size-m:clamp(1.25rem,.5556vw + .8333rem,1.5rem);--font-size-l:clamp(1.5625rem,.9722vw + .8333rem,2rem);--font-size-xl:clamp(2rem,1.8056vw + .6458rem,2.8125rem);--font-size-xxl:clamp(2.5rem,2.7778vw + .4167rem,3.75rem);--font-size-xxxl:clamp(3.125rem,4.1667vw,5rem)}}@media (prefers-color-scheme:dark){:root{--color-selection-hover:var(--color-blue-80);--color-selection-selected:var(--color-blue-30);--color-selection-active:var(--color-blue-20);--color-input:var(--color-black);--color-background:var(--color-neutral-90);--color-background-alt:var(--color-neutral-80);--color-primary:var(--color-purple-30);--color-primary-hover:var(--color-purple-20);--color-primary-active:var(--color-purple-10);--color-primary-text:var(--color-purple-90);--color-secondary:var(--color-neutral-80);--color-secondary-hover:var(--color-neutral-70);--color-secondary-active:var(--color-neutral-60);--color-error:var(--color-pink-30);--color-error-hover:var(--color-pink-20);--color-error-active:var(--color-pink-10);--color-error-text:var(--color-pink-90);--color-success:var(--color-green-30);--color-success-hover:var(--color-green-20);--color-success-active:var(--color-green-10);--color-success-text:var(--color-green-90);--color-text:var(--color-purple-10);--color-text-soft:var(--color-neutral-20);--color-text-inverted:var(--color-black);--color-shadow:rgba(0,0,0,.4)}}@media (prefers-reduced-transparency){:root{--opacity-translucent:.7;--opacity-dimmed:.9}}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--font-family-sans);scroll-padding-top:var(--space-xl);scroll-behavior:smooth}input,textarea,button,select,option,optgroup{font-family:var(--font-family-sans)}body{line-height:inherit;color:var(--color-text);background:var(--color-background);margin:0;padding:0}:focus-visible{box-shadow:0 0 var(--space-xxs)2px var(--color-selection);outline:none}::selection{background-color:color-mix(in srgb,var(--color-selection)50%,transparent)}mark{background:color-mix(in srgb,var(--color-selection)20%,transparent);color:color-mix(in srgb,var(--color-selection)20%,currentColor)}h1{font-size:var(--font-size-xxxl);line-height:var(--line-height-xs)}h2{font-size:var(--font-size-xxl);line-height:var(--line-height-s)}h3{font-size:var(--font-size-xl);line-height:var(--line-height-s)}h4{font-size:var(--font-size-l);line-height:var(--line-height-m)}h5,h6{font-size:var(--font-size-m);line-height:var(--line-height-m)}p,li,th,td,dt,dd,pre,input{font-size:var(--font-size-m);line-height:var(--line-height-l)}small{font-size:var(--font-size-s);line-height:var(--line-height-m)}dl{gap:var(--space-s)var(--space-m);grid-template-columns:auto 1fr;display:grid}dl dt{font-weight:var(--font-weight-bold);color:var(--color-text-soft)}dl dd{margin:0}details[open] summary{margin-bottom:var(--space-m)}header{margin-block:var(--space-xl)}header h1{justify-content:space-between;align-items:baseline;gap:var(--space-m);display:flex}.content-grid,main{grid-template-columns:[fullwidth-start]minmax(var(--space-l),1fr)[breakout-start]minmax(0,var(--breakout-size))[content-start]min(var(--content-max-width),calc(100% - 2*var(--space-l)))[content-end]minmax(0,var(--breakout-size))[breakout-end]minmax(var(--space-l),1fr)[fullwidth-end];display:grid}:is(.content-grid,main)>.content{grid-column:content}:is(.content-grid,main)>section{grid-column:content}:is(.content-grid,main) .breakout{grid-column:breakout}section{margin-block:var(--space-xl)}section h3{margin-top:var(--space-xl);margin-bottom:var(--space-l)}h1,h2,h3,h4,h5,h6,p,ol,ul,dl,table,pre{margin-top:0;margin-bottom:var(--space-l)}ol,ul{gap:var(--space-s);flex-direction:column;display:flex}:is(ol,ul)>li>ol{margin-top:var(--space-s)}:is(ol,ul)>li>ul{margin-top:var(--space-s)}p code,li code,dt code,dd code,td code{background-color:var(--color-background-alt);border-radius:var(--space-xxs);padding:var(--space-xs)var(--space-xxs)var(--space-xxs);font-family:var(--font-family-mono);font-size:calc(.9375*var(--font-size-m));line-height:var(--line-height-xs)}:is(h1,h2,h3,h4,h5,h6)[id]{margin-left:calc(-1*var(--space-l));display:flex}:is(h1,h2,h3,h4,h5,h6) .anchor{text-decoration:none;display:inline-block}:is(h1,h2,h3,h4,h5,h6) .anchor .permalink{width:var(--space-l);visibility:hidden;font-size:var(--font-size-m)}:is(h1,h2,h3,h4,h5,h6):hover .anchor .permalink{visibility:visible}a[href]:not(.anchor){color:var(--color-primary)}a[href]:not(.anchor):hover{color:var(--color-primary-hover)}a[href]:not(.anchor):active{color:var(--color-primary-active)}a[href].anchor{color:inherit;padding-right:var(--space-l);align-items:center;display:flex}[aria-hidden=true],[hidden]{display:none!important}.visually-hidden{width:1px;height:1px;position:absolute;top:auto;left:-10000px;overflow:hidden}.skiplink:focus{width:auto;height:auto;padding:var(--space-s);text-decoration:none;display:inline-block;top:0;left:50%;transform:translate(-50%)}basic-button{flex:0;display:inline-block;position:relative}basic-button button{height:var(--input-height);min-width:var(--input-height);border-radius:var(--space-xs);background-color:var(--color-secondary);border:1px solid var(--color-border);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;opacity:var(--opacity-dimmed);transition:all var(--transition-shorter)var(--easing-inout)}basic-button button:disabled{opacity:var(--opacity-translucent)}basic-button button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}basic-button button:not(:disabled):hover{background-color:var(--color-secondary-hover)}basic-button button:not(:disabled):active{background-color:var(--color-secondary-active)}basic-button button.primary{color:var(--color-primary-text);background-color:var(--color-primary);border-color:var(--color-primary-active)}basic-button button.primary:not(:disabled){opacity:var(--opacity-solid)}basic-button button.primary:not(:disabled):hover{background-color:var(--color-primary-hover)}basic-button button.primary:not(:disabled):active{background-color:var(--color-primary-active)}basic-button button.destructive{color:var(--color-error-text);background-color:var(--color-error);border-color:var(--color-error-active)}basic-button button.destructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.destructive:not(:disabled):hover{background-color:var(--color-error-hover)}basic-button button.destructive:not(:disabled):active{background-color:var(--color-error-active)}basic-button button.constructive{color:var(--color-success-text);background-color:var(--color-success);border-color:var(--color-success-active)}basic-button button.constructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.constructive:not(:disabled):hover{background-color:var(--color-success-hover)}basic-button button.constructive:not(:disabled):active{background-color:var(--color-success-active)}basic-button button.tertiary{padding:var(--space-xs);height:auto;color:var(--color-primary);background:0 0;border:0 solid transparent}basic-button button.tertiary:not(:disabled){opacity:var(--opacity-solid)}basic-button button.tertiary:not(:disabled):hover{color:var(--color-primary-hover);background-color:rgba(0,0,0,.05)}basic-button button.tertiary:not(:disabled):active{color:var(--color-primary-active);background-color:rgba(0,0,0,.1)}basic-button button.tertiary.constructive{color:var(--color-success)}basic-button button.tertiary.constructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.tertiary.constructive:not(:disabled):hover{color:var(--color-success-hover)}basic-button button.tertiary.constructive:not(:disabled):active{color:var(--color-success-active)}basic-button button.tertiary.destructive{color:var(--color-error)}basic-button button.tertiary.destructive:not(:disabled){opacity:var(--opacity-solid)}basic-button button.tertiary.destructive:not(:disabled):hover{color:var(--color-error-hover)}basic-button button.tertiary.destructive:not(:disabled):active{color:var(--color-error-active)}basic-button button.small{--input-height:var(--space-l);font-size:var(--font-size-xs);padding-inline:var(--space-xs)}basic-button button.large{--input-height:var(--space-xl);font-size:var(--font-size-m);padding-inline:var(--space-m)}basic-button .badge{box-sizing:border-box;top:calc(-1*var(--space-s));right:calc(-1*var(--space-s));font-size:var(--font-size-xs);line-height:var(--line-height-xs);background-color:var(--color-primary);color:var(--color-text-inverted);padding:var(--space-xxs)var(--space-xs);height:calc(2*var(--space-s));min-width:calc(2*var(--space-s));border-radius:var(--space-s);position:absolute}basic-button .badge:empty{display:none}basic-counter button{border:1px solid var(--color-border);border-radius:var(--space-xs);background-color:var(--color-secondary);padding:var(--space-xs)var(--space-s);cursor:pointer;color:var(--color-text);font-size:var(--font-size-m);line-height:var(--line-height-xs);transition:background-color var(--transition-short)var(--easing-inout)}basic-counter button:hover{background-color:var(--color-secondary-hover)}basic-counter button:active{background-color:var(--color-secondary-active)}card-callout{padding:var(--space-s)var(--space-s)var(--space-s)var(--space-xl);margin:0 0 var(--space-l);font-size:var(--font-size-m);line-height:var(--line-height-l);background:var(--color-blue-20);border-left:var(--space-xxs)solid var(--color-blue-50);border-radius:var(--space-s);display:block;position:relative}card-callout:before{content:"ℹ️";left:var(--space-s);position:absolute}card-callout>:last-child{margin-bottom:0}card-callout.tip{background:var(--color-green-20);border-color:var(--color-green-50)}card-callout.tip:before{content:"💡"}card-callout.note{background:var(--color-neutral-20);border-color:var(--color-neutral-50)}card-callout.note:before{content:"💬"}card-callout.caution{background:var(--color-orange-20);border-color:var(--color-orange-50)}card-callout.caution:before{content:"⚠️"}card-callout.danger{background:var(--color-pink-20);border-color:var(--color-pink-50)}card-callout.danger:before{content:"🚨"}@media (prefers-color-scheme:dark){card-callout{background:var(--color-blue-80)}card-callout.tip{background:var(--color-green-80)}card-callout.note{background:var(--color-neutral-80)}card-callout.caution{background:var(--color-orange-80)}card-callout.danger{background:var(--color-pink-80)}}form-checkbox{border-radius:var(--space-xs);flex-grow:1}form-checkbox:has(:focus-visible){box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}form-checkbox input:focus{box-shadow:none;outline:none}form-checkbox label{font-size:var(--font-size-s)}form-checkbox.todo label{gap:var(--space-s);line-height:var(--input-height);cursor:pointer;display:flex}form-checkbox.todo label:before{box-sizing:border-box;content:"";font-size:var(--font-size-l);text-align:center;width:var(--input-height);height:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);border-radius:100%;display:inline-block}form-checkbox.todo label:hover:before{background-color:var(--color-secondary-hover);opacity:var(--opacity-solid)}form-checkbox.todo label:active:before{background-color:var(--color-secondary-active)}form-checkbox.todo[checked] label{opacity:var(--opacity-translucent)}form-checkbox.todo[checked] label span{text-decoration:line-through}form-checkbox.todo[checked] label:before{color:var(--color-text-inverted);background-color:var(--color-success);border-color:var(--color-success-active);text-shadow:0 0 var(--space-xs)var(--color-success-active);content:"✓"}form-checkbox.todo[checked] label:hover:before{background-color:var(--color-success-hover)}form-checkbox.todo[checked] label:active:before{background-color:var(--color-success-active)}form-combobox{width:100%}form-combobox>label{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-combobox>p{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-combobox>button{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-combobox>label{font-size:var(--font-size-s);color:var(--color-text);margin-bottom:var(--space-xxs);display:block}form-combobox>.input{position:relative}form-combobox>.input>input{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--input-height)var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);height:var(--input-height);width:100%;transition:color var(--transition-short)var(--easing-inout);display:inline-block}form-combobox>.input>input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-combobox>.input>input::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-combobox>.input>input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-combobox[clearable] .input>input{padding-right:var(--input-height)}form-combobox[clearable] .input .clear{font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--color-input);background-color:var(--color-text-soft);width:calc(.6*var(--input-height));height:calc(.6*var(--input-height));margin:calc(.2*var(--input-height));border:0;border-radius:50%;padding:0;position:absolute;bottom:0;right:0}form-combobox[clearable] .input .clear:hover{background-color:var(--color-text)}form-combobox form-listbox{border:1px solid var(--color-border);z-index:1;border-top:none;width:calc(100% - 2px);list-style:none;display:none;position:absolute;top:100%;left:0}form-combobox>.error{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-combobox>.error:empty{display:none}form-combobox>.description{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-combobox>.description:empty{display:none}form-combobox>.error{color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}form-combobox>.description{color:var(--color-text-soft)}form-combobox:focus-within>label{opacity:var(--opacity-solid)}form-combobox:focus-within>p{opacity:var(--opacity-solid)}form-combobox:focus-within>button{opacity:var(--opacity-solid)}form-combobox:focus-within>.input>input{color:var(--color-text)}form-combobox:focus-within form-listbox:not([hidden]){display:block}form-listbox{margin:0;display:block}form-listbox module-scrollarea{background-color:var(--color-background);max-height:40rem}form-listbox module-scrollarea:has([role=group]){scroll-padding-block-start:var(--space-xl)}form-listbox [role=listbox]{background:var(--color-input);flex-direction:column;gap:0;margin:0;padding:0;list-style:none;display:flex}form-listbox [role=group]{margin-bottom:var(--space-xs)}form-listbox [role=group]:not(:has(button:not([hidden]))){display:none}form-listbox [role=presentation]{background-color:var(--color-background);padding:var(--space-xs)var(--space-m);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-xxs);position:sticky;top:0}form-listbox [role=option]{text-align:left;width:100%;padding:var(--space-xs)var(--space-m);font-size:var(--font-size-s);line-height:var(--line-height-s);color:var(--color-text);cursor:pointer;transition:background var(--transition-short)var(--easing-inout);background:0 0;border:0;margin:0;display:block}form-listbox [role=option][aria-selected=true]{background:var(--color-selection-selected);color:var(--color-text-inverted)}form-listbox [role=option]:hover{background:var(--color-selection-hover)}form-listbox [role=option]:hover[aria-selected=true]{background:var(--color-selection-active)}form-radiogroup{display:inline-block}form-radiogroup>fieldset{gap:var(--space-m);padding:var(--space-xs)0 var(--space-s);border:none;margin:0;display:flex}form-radiogroup legend{font-size:var(--font-size-s)}form-radiogroup label{font-size:var(--font-size-s)}form-radiogroup label{border-radius:var(--space-xs)}form-radiogroup label:has(:focus-visible){box-shadow:0 0 var(--space-xxs)2px var(--color-selection)}form-radiogroup label input:focus{box-shadow:none;outline:none}form-radiogroup.split-button fieldset{gap:0;padding:0}form-radiogroup.split-button label{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:var(--space-xs)var(--space-s);cursor:pointer;line-height:var(--line-height-s);transition:opacity var(--transition-short)var(--easing-inout);border-left-width:0;border-radius:0;display:inline-block}form-radiogroup.split-button label:hover{background-color:var(--color-secondary-hover)}form-radiogroup.split-button label:active{background-color:var(--color-secondary-active)}form-radiogroup.split-button label:focus-within{z-index:1}form-radiogroup.split-button label.selected{color:var(--color-text-inverted);background-color:var(--color-selection-selected);border-color:var(--color-selection-active)}form-radiogroup.split-button label.selected:hover{background-color:var(--color-selection-active)}form-radiogroup.split-button label.selected:active{background-color:var(--color-selection-active)}form-radiogroup.split-button legend+label{border-radius:var(--space-xs)0 0 var(--space-xs);border-left-width:1px}form-radiogroup.split-button label:last-child{border-radius:0 var(--space-xs)var(--space-xs)0}form-spinbutton{max-width:7rem;display:inline-flex}form-spinbutton>input{box-sizing:border-box;border-style:solid;border-width:1px 0;border-color:var(--color-border);height:var(--input-height);text-align:center;min-width:3rem;font-size:var(--font-size-s);padding:0 var(--space-s);-ms-appearance:textfield;appearance:textfield;flex-grow:1;margin:0;line-height:2}form-spinbutton>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}form-spinbutton>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}form-spinbutton>input:first-child{border-width:1px;min-width:2.5rem;margin-right:.5rem}form-spinbutton>button{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;cursor:pointer;transition:all var(--transition-shorter)var(--easing-inout);flex-grow:0}form-spinbutton>button:disabled{opacity:var(--opacity-translucent)}form-spinbutton>button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}form-spinbutton>button:not(:disabled):hover{background-color:var(--color-secondary-hover)}form-spinbutton>button:not(:disabled):active{background-color:var(--color-secondary-active)}form-spinbutton>button:first-of-type{border-radius:var(--space-xs)0 0 var(--space-xs)}form-spinbutton>button:last-of-type{border-radius:0 var(--space-xs)var(--space-xs)0}form-spinbutton>button:not([hidden])+button:last-of-type{border-left-width:0}form-spinbutton [hidden]+button{border-radius:var(--space-xs);min-width:7rem;color:var(--color-text-inverted);background-color:var(--color-primary);border-color:var(--color-primary-active);flex-grow:1}form-spinbutton [hidden]+button:hover{background-color:var(--color-primary-hover)}form-spinbutton [hidden]+button:active{background-color:var(--color-primary-active)}form-textbox{width:100%}form-textbox label{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox p{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox button{opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout)}form-textbox label{font-size:var(--font-size-s);color:var(--color-text);margin-bottom:var(--space-xxs);display:block}form-textbox input{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%;transition:color var(--transition-short)var(--easing-inout);display:inline-block}form-textbox input[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-textbox input::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox input::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox textarea{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%;transition:color var(--transition-short)var(--easing-inout);display:inline-block}form-textbox textarea[aria-invalid=true]{box-shadow:0 0 var(--space-xxs)2px var(--color-error-invalid)}form-textbox textarea::-ms-input-placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox textarea::placeholder{color:var(--color-text);opacity:var(--opacity-translucent)}form-textbox input{height:var(--input-height)}form-textbox[clearable] .input{position:relative}form-textbox[clearable] .input input{padding-right:var(--input-height)}form-textbox[clearable] .input .clear{font-size:var(--font-size-xs);line-height:var(--line-height-xs);color:var(--color-input);background-color:var(--color-text-soft);width:calc(.6*var(--input-height));height:calc(.6*var(--input-height));margin:calc(.2*var(--input-height));border:0;border-radius:50%;padding:0;position:absolute;bottom:0;right:0}form-textbox[clearable] .input .clear:hover{background-color:var(--color-text)}form-textbox .error{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-textbox .error:empty{display:none}form-textbox .description{margin:var(--space-xs)0 0;font-size:var(--font-size-xs);line-height:var(--line-height-s)}form-textbox .description:empty{display:none}form-textbox .error{color:color-mix(in srgb,var(--color-text)50%,var(--color-error))}form-textbox .description{color:var(--color-text-soft)}form-textbox:focus-within label{opacity:var(--opacity-solid)}form-textbox:focus-within p{opacity:var(--opacity-solid)}form-textbox:focus-within button{opacity:var(--opacity-solid)}form-textbox:focus-within input{color:var(--color-text)}form-textbox:focus-within textarea{color:var(--color-text)}module-carousel{border-radius:var(--space-s);margin-bottom:var(--space-l);display:flex;position:relative;overflow:hidden;container:carousel/inline-size}module-carousel .slides{scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:none;align-items:center;width:100%;min-height:56.25cqi;display:flex;overflow-x:auto}module-carousel [role=tabpanel]{width:100%;height:calc(100% - var(--input-height));padding-bottom:var(--input-height);text-align:center;scroll-snap-align:start;flex:0 0 100%}module-carousel [role=tabpanel] h3{display:block}module-carousel [role=tabpanel] a[href].anchor{justify-content:center;padding:0}module-carousel [role=tabpanel] .slide-content{width:80%;padding-bottom:var(--space-xl);text-align:left;margin:0 auto}module-carousel>nav>button{border-radius:var(--space-xs);height:96%;padding:var(--space-m);font-size:var(--font-size-xl);color:var(--color-text);opacity:var(--opacity-dimmed);transition:opacity var(--transition-short)var(--easing-inout);cursor:pointer;background:0 0;border:0;position:absolute;top:2%}module-carousel>nav>button:hover{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}module-carousel>nav>button:active{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}module-carousel>nav>button:focus{opacity:var(--opacity-solid);background-color:rgba(0,0,0,.05)}module-carousel>nav>button:active{background-color:rgba(0,0,0,.1)}module-carousel>nav>button.prev{left:1%}module-carousel>nav>button.next{right:1%}module-carousel>nav [role=tablist]{width:100%;margin-block:var(--space-m);justify-content:center;display:flex;position:absolute;bottom:0;left:0}module-carousel>nav [role=tablist] [role=tab]{width:var(--space-l);height:var(--space-l);font-size:var(--font-size-l);line-height:var(--line-height-xs);color:var(--color-text);opacity:var(--opacity-translucent);transition:opacity var(--transition-short)var(--easing-inout);cursor:pointer;background-color:transparent;border:0;border-radius:50%;padding:0}module-carousel>nav [role=tablist] [role=tab]:hover{opacity:var(--opacity-dimmed)}module-carousel>nav [role=tablist] [role=tab][aria-selected=true]{opacity:var(--opacity-solid)}module-catalog{gap:var(--space-l);flex-direction:column;display:flex}module-catalog>header{margin:0}module-catalog p{margin:0}module-catalog ul{margin:0;padding:0}module-catalog header{gap:var(--space-m);justify-content:space-between;display:flex}module-catalog li{gap:var(--space-m);justify-content:space-between;display:flex}module-codeblock{--color-shiki-monokai-bg:#272822;margin:0 0 var(--space-l);background:var(--color-shiki-monokai-bg);border-radius:var(--space-s);display:block;position:relative}module-codeblock .meta{padding:var(--space-xs)var(--space-s)0;font-size:var(--font-size-s);color:var(--color-neutral-20);margin-bottom:0;display:flex}module-codeblock .language{text-transform:uppercase;margin-left:auto}module-codeblock pre{font-size:var(--font-size-s);padding:var(--space-s);border-radius:var(--space-s);overflow:auto}module-codeblock .copy{right:var(--space-s);bottom:var(--space-s);position:absolute}module-codeblock .overlay{display:none}module-codeblock[collapsed]{border-radius:var(--space-s)var(--space-s)0 0;max-height:12rem;overflow:hidden}module-codeblock[collapsed]:after{content:"";width:100%;height:var(--space-m);background:linear-gradient(-135deg,var(--color-secondary).5rem,transparent 0)0 .5rem,linear-gradient(135deg,var(--color-secondary).5rem,var(--color-background)0)0 .5rem;background-color:var(--color-secondary);background-size:var(--space-m)var(--space-m);background-position:bottom;display:block;position:absolute;bottom:0}module-codeblock[collapsed] .copy{display:none}module-codeblock[collapsed] .overlay{width:100%;height:6rem;color:var(--color-text);background:linear-gradient(transparent,var(--color-secondary));cursor:pointer;padding:var(--space-xs)var(--space-s);margin-bottom:var(--space-m);font-size:var(--font-size-s);transition:background-color var(--transition-short)var(--easing-inout);text-shadow:var(--color-background)1px 0 var(--space-xs);border:0;flex-direction:column-reverse;align-items:center;display:flex;position:absolute;bottom:0;left:0}module-codeblock[collapsed] .overlay:hover{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}module-codeblock[collapsed] .overlay:active{text-shadow:var(--color-text-inverted)var(--space-xs)0 var(--space-s)}module-demo{gap:var(--space-m);flex-direction:column;margin-bottom:var(--space-l);display:flex}module-demo .preview{border:1px dotted var(--color-border);border-radius:var(--space-s);padding:var(--space-s);container:preview/inline-size}body.scroll-lock{position:fixed;overflow-y:hidden}module-dialog>button{cursor:pointer;color:var(--color-text);background:0 0;border:0;padding:0}module-dialog dialog{width:100vw;max-width:100%;max-height:100dvh;color:var(--color-text);background:var(--color-background);opacity:var(--opacity-transparent);transition:opacity var(--transition-medium)var(--easing-inout);border:0;flex-direction:column;margin:auto 0;padding:0;display:none}module-dialog dialog::-ms-backdrop{-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:backdrop-filter var(--transition-medium)var(--easing-inout);background-color:transparent}module-dialog dialog::backdrop{-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:backdrop-filter var(--transition-medium)var(--easing-inout);background-color:transparent}module-dialog dialog[open]{opacity:var(--opacity-solid);display:flex}module-dialog dialog[open]>header{padding:0 0 0 var(--space-l);justify-content:space-between;align-items:center;margin:0;display:flex}module-dialog dialog[open]>header>h2{font-size:var(--font-size-l);font-weight:var(--font-weight-bold);margin:var(--space-s)0}module-dialog dialog[open]>header .close{cursor:pointer;font-size:var(--font-size-l);line-height:var(--line-height-xs);margin:var(--space-s)var(--space-s)var(--space-s)var(--space-m);padding:0 0 var(--space-xxs);color:var(--color-primary);border-radius:var(--space-xxs);box-sizing:border-box;height:var(--input-height);width:var(--input-height);background:0 0;border:0}module-dialog dialog[open]>header .close:hover{color:var(--color-primary-hover)}module-dialog dialog[open]>header .close:active{color:var(--color-primary-active)}module-dialog dialog[open] .content{padding:0 var(--space-l)0}module-dialog dialog[open]::-ms-backdrop{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--color-shadow)}module-dialog dialog[open]::backdrop{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--color-shadow)}@media (min-width:48em){module-dialog dialog[open]{width:min(var(--content-max-width),calc(100% - 2*var(--space-l)));border-radius:var(--space-s);max-height:calc(100dvh - 2rem);box-shadow:0 0 var(--space-s)var(--color-shadow);margin:auto}}module-pagination{align-items:center;gap:var(--space-s);display:inline-flex}module-pagination label{display:inline-block}module-pagination input{box-sizing:border-box;background:var(--color-input);color:var(--color-text);border:none;border-bottom:1px solid var(--color-border);padding:var(--space-xs)var(--space-xxs);font-size:var(--font-size-m);width:100%;height:var(--input-height);transition:color var(--transition-short)var(--easing-inout);text-align:right;-ms-appearance:textfield;appearance:textfield;display:inline-block}module-pagination input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}module-pagination input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}module-pagination .buttons{align-items:center;display:flex}module-pagination button{box-sizing:border-box;height:var(--input-height);min-width:var(--input-height);border:1px solid var(--color-border);background-color:var(--color-secondary);color:var(--color-text);padding:0 var(--space-s);font-size:var(--font-size-s);line-height:var(--line-height-s);white-space:nowrap;cursor:pointer;transition:all var(--transition-shorter)var(--easing-inout);flex-grow:0}module-pagination button:disabled{opacity:var(--opacity-translucent)}module-pagination button:not(:disabled){cursor:pointer;opacity:var(--opacity-solid)}module-pagination button:not(:disabled):hover{background-color:var(--color-secondary-hover)}module-pagination button:not(:disabled):active{background-color:var(--color-secondary-active)}module-pagination button:first-of-type{border-radius:var(--space-xs)0 0 var(--space-xs);border-right-width:0}module-pagination button:last-of-type{border-radius:0 var(--space-xs)var(--space-xs)0}@media (prefers-reduced-motion:no-preference){module-scrollarea{-webkit-overflow-scrolling:touch;display:block;position:relative;overflow-y:auto}module-scrollarea:before{content:"";width:100%;height:var(--space-m);opacity:0;pointer-events:none;transition:opacity var(--transition-short);z-index:1;display:block;position:sticky}module-scrollarea:after{content:"";width:100%;height:var(--space-m);opacity:0;pointer-events:none;transition:opacity var(--transition-short);z-index:1;display:block;position:sticky}module-scrollarea:before{background:linear-gradient(180deg,color-mix(in srgb,var(--color-shadow),transparent 50%),transparent);top:0}module-scrollarea:after{background:linear-gradient(0deg,color-mix(in srgb,var(--color-shadow),transparent 50%),transparent);bottom:0}module-scrollarea.overflow-start:before{opacity:1}module-scrollarea.overflow-end:after{opacity:1}module-scrollarea[orientation=horizontal]{overflow-x:auto;overflow-y:clip}module-scrollarea[orientation=horizontal]:before{width:var(--space-m);height:100vh;margin-bottom:-100vh}module-scrollarea[orientation=horizontal]:after{width:var(--space-m);height:100vh;margin-bottom:-100vh}module-scrollarea[orientation=horizontal]:before{background:linear-gradient(90deg,color-mix(in srgb,var(--color-shadow),transparent 50%),transparent);left:0}module-scrollarea[orientation=horizontal]:after{left:calc(100% - var(--space-m));background:linear-gradient(270deg,color-mix(in srgb,var(--color-shadow),transparent 50%),transparent)}}module-tabgroup{margin-bottom:var(--space-l);display:block}module-tabgroup>[role=tablist]{border-bottom:1px solid var(--color-border);margin-bottom:0;padding:0;display:flex}module-tabgroup>[role=tablist]>[role=tab]{border-radius:var(--space-xs)var(--space-xs)0 0;font-family:var(--font-family-sans);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);padding:var(--space-s)var(--space-m);color:var(--color-text-soft);background-color:var(--color-secondary);cursor:pointer;transition:all var(--transition-short)var(--easing-inout);border:0;border-top:2px solid transparent}module-tabgroup>[role=tablist]>[role=tab]:hover{color:var(--color-text);background-color:var(--color-secondary-hover)}module-tabgroup>[role=tablist]>[role=tab]:focus{color:var(--color-text);background-color:var(--color-secondary-hover)}module-tabgroup>[role=tablist]>[role=tab]:focus{z-index:1}module-tabgroup>[role=tablist]>[role=tab]:active{color:var(--color-text);background-color:var(--color-secondary-active)}module-tabgroup>[role=tablist]>[role=tab][aria-selected=true]{color:var(--color-primary-active);border-top:3px solid var(--color-primary);background-color:var(--color-background);margin-bottom:-1px}module-tabgroup>[role=tabpanel]{font-family:sans-serif;font-size:var(--font-size-m);background:var(--color-background);margin-block:var(--space-l)}module-toc{background:var(--color-background);color:var(--color-text);padding:var(--space-m);border-radius:var(--space-s);display:block}module-toc h2{font-size:var(--font-size-s);margin:0;margin-bottom:var(--space-s);padding:0}module-toc ol{gap:var(--space-s);flex-direction:column;margin:0;padding-left:0;list-style-type:none;display:flex}module-toc li{margin:0;padding:0}module-toc a{line-height:var(--line-height-s);text-decoration:none;display:inline-block}module-todo{gap:var(--space-l);flex-direction:column;display:flex;container-type:inline-size}module-todo>form{align-items:flex-start;gap:var(--space-m);flex-direction:column;justify-content:space-between;display:flex}module-todo>module-list[filter=completed] li:not(:has([checked])){display:none}module-todo>module-list[filter=active] li:has([checked]){display:none}module-todo ol{gap:var(--space-m);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}module-todo ol li{justify-content:space-between;gap:var(--space-m);margin:0;padding:0;display:flex}module-todo>footer{align-items:center;gap:var(--space-m);grid-template-columns:1fr 1fr;grid-template-areas:"filter filter""count clear";margin:0;display:grid}module-todo>footer basic-pluralize{grid-area:count;justify-self:start}module-todo>footer basic-pluralize p{font-size:var(--font-size-s);margin:0}module-todo>footer .split-button{grid-area:filter;justify-self:center}module-todo>footer .clear-completed{grid-area:clear;justify-self:end}@container (width>32rem){module-todo form{flex-direction:row;align-items:flex-end}module-todo footer{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"count filter clear"}}section-hero{grid-column:fullwidth;grid-template-columns:inherit;background-color:var(--color-primary);color:var(--color-primary-text);padding-block:var(--space-xxl);margin-top:0;margin-bottom:0;display:grid}section-hero h1{margin-bottom:var(--space-xl);grid-column:content}section-hero>div{grid-column:content}section-hero .lead p{font-size:var(--font-size-l)}@media screen and (min-width:48em){section-hero h1{grid-column:breakout}section-hero>div{gap:var(--space-xl);grid-column:breakout;grid-template-columns:2fr 1fr;display:grid}}section-menu{grid-column:breakout}section-menu ol{gap:var(--space-s);margin-block:var(--space-l);grid-template-columns:1fr;padding:0;list-style:none;display:grid}section-menu li{margin:0;padding:0}section-menu a{gap:var(--space-xs)var(--space-s);padding:var(--space-m);border-radius:var(--space-xs);height:calc(100% - 2*var(--space-m));color:var(--color-text);grid-template:"icon title""icon description"1fr/auto 1fr;text-decoration:none;display:grid}section-menu a:hover{background-color:var(--color-secondary-hover)}section-menu a:focus{background-color:var(--color-secondary-hover)}section-menu a.active{background-color:var(--color-background-alt)}section-menu a .icon{font-size:var(--font-size-l);width:var(--space-xl);height:var(--space-xl);background-color:var(--color-background);border:1px solid var(--color-border);border-radius:50%;grid-area:icon;justify-content:center;align-items:center;display:flex}section-menu a strong{font-size:var(--font-size-m);line-height:var(--line-height-s);grid-area:title;margin:0}section-menu a small{font-size:var(--font-size-s);line-height:var(--line-height-m);color:var(--color-text-soft);grid-area:description;margin:0}@media screen and (min-width:32em) and (max-width:48em){section-menu ol{gap:var(--space-m);grid-template-columns:1fr 1fr}}@media screen and (min-width:48em){section-menu ol{gap:var(--space-l);grid-template-columns:1fr 1fr 1fr}}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
class u extends Error{constructor(x){super(`Circular dependency detected in ${x}`);this.name="CircularDependencyError"}}class h extends TypeError{constructor(x,M){super(`Invalid ${x} callback ${M}`);this.name="InvalidCallbackError"}}class c extends TypeError{constructor(x){super(`Nullish signal values are not allowed in ${x}`);this.name="NullishSignalValueError"}}var W=Symbol(),V=(x)=>typeof x==="string";var Jx=(x)=>typeof x==="symbol",p=(x)=>typeof x==="function",Bx=(x)=>p(x)&&x.constructor.name==="AsyncFunction",v=(x,M)=>Object.prototype.toString.call(x)===`[object ${M}]`,S=(x)=>v(x,"Object");var t=(x)=>x instanceof DOMException&&x.name==="AbortError",Cx=(x)=>x instanceof Error?x:Error(String(x));var _=(x)=>V(x)?`"${x}"`:!!x&&typeof x==="object"?JSON.stringify(x):String(x);var i=(x,M,H)=>{if(Object.is(x,M))return!0;if(typeof x!==typeof M)return!1;if(typeof x!=="object"||x===null||M===null)return!1;if(!H)H=new WeakSet;if(H.has(x)||H.has(M))throw new u("isEqual");H.add(x),H.add(M);try{if(Array.isArray(x)&&Array.isArray(M)){if(x.length!==M.length)return!1;for(let L=0;L<x.length;L++)if(!i(x[L],M[L],H))return!1;return!0}if(Array.isArray(x)!==Array.isArray(M))return!1;if(S(x)&&S(M)){let L=Object.keys(x),C=Object.keys(M);if(L.length!==C.length)return!1;for(let B of L){if(!(B in M))return!1;if(!i(x[B],M[B],H))return!1}return!0}return!1}finally{H.delete(x),H.delete(M)}};var mx,Wx=new Set,hx=0,Tx=(x)=>{let M=new Set,H=x;return H.unwatch=(L)=>{M.add(L)},H.cleanup=()=>{for(let L of M)L();M.clear()},H},E=(x)=>{if(mx&&!x.has(mx)){let M=mx;M.unwatch(()=>{x.delete(M)}),x.add(M)}},g=(x)=>{for(let M of x)if(hx)Wx.add(M);else M()},qx=()=>{while(Wx.size){let x=Array.from(Wx);Wx.clear();for(let M of x)M()}},n=(x)=>{hx++;try{x()}finally{qx(),hx--}},$x=(x,M)=>{let H=mx;mx=M;try{x()}finally{mx=H}};var Qx="Computed",q=(x,M=W)=>{if(!e(x))throw new h("computed",_(x));if(M==null)throw new c("computed");let H=new Set,L=M,C,B,m=!0,T=!1,P=!1,o=(K)=>{if(!i(K,L))L=K,T=!0;C=void 0,m=!1},$=()=>{T=W!==L,L=W,C=void 0},F=(K)=>{let z=Cx(K);T=!C||z.name!==C.name||z.message!==C.message,L=W,C=z},y=(K)=>(z)=>{if(P=!1,B=void 0,K(z),T)g(H)},I=Tx(()=>{if(m=!0,B?.abort(),H.size)g(H);else I.cleanup()});I.unwatch(()=>{B?.abort()});let Z=()=>$x(()=>{if(P)throw new u("computed");if(T=!1,Bx(x)){if(B)return L;B=new AbortController,B.signal.addEventListener("abort",()=>{P=!1,B=void 0,Z()},{once:!0})}let K;P=!0;try{K=B?x(L,B.signal):x(L)}catch(z){if(t(z))$();else F(z);P=!1;return}if(K instanceof Promise)K.then(y(o),y(F));else if(K==null||W===K)$();else o(K);P=!1},I),Y={};return Object.defineProperties(Y,{[Symbol.toStringTag]:{value:Qx},get:{value:()=>{if(E(H),qx(),m)Z();if(C)throw C;return L}}}),Y},a=(x)=>v(x,Qx),e=(x)=>p(x)&&x.length<3;var Px=(x)=>{if(!p(x)||x.length>1)throw new h("effect",_(x));let M=Bx(x),H=!1,L,C=Tx(()=>$x(()=>{if(H)throw new u("effect");H=!0,L?.abort(),L=void 0;let B;try{if(M){L=new AbortController;let m=L;x(L.signal).then((T)=>{if(p(T)&&L===m)C.unwatch(T)}).catch((T)=>{if(!t(T))console.error("Async effect error:",T)})}else if(B=x(),p(B))C.unwatch(B)}catch(m){if(!t(m))console.error("Effect callback error:",m)}H=!1},C));return C(),()=>{L?.abort(),C.cleanup()}};var cx="State",b=(x)=>{if(x==null)throw new c("state");let M=new Set,H=x,L=(B)=>{if(B==null)throw new c("state");if(i(H,B))return;if(H=B,g(M),W===H)M.clear()},C={};return Object.defineProperties(C,{[Symbol.toStringTag]:{value:cx},get:{value:()=>{return E(M),H}},set:{value:(B)=>{L(B)}},update:{value:(B)=>{if(!p(B))throw new h("state update",_(B));L(B(H))}}}),C},r=(x)=>v(x,cx);var yM="Store";var xx=(x)=>v(x,yM);var s=(x)=>r(x)||a(x)||xx(x),Xx=(x)=>r(x)||xx(x);var vx=!1,dM="debug";var OM="warn",ox="error",VM=new Set(["constructor","prototype"]),wM=new Set(["id","class","className","title","role","style","dataset","lang","dir","hidden","children","innerHTML","outerHTML","textContent","innerText"]),EM=(x)=>x?`#${x}`:"",gM=(x)=>x?.length?`.${Array.from(x).join(".")}`:"";var ix=(x)=>x.nodeType===Node.ELEMENT_NODE,rx=(x)=>x.localName.includes("-"),sx=(x)=>rx(x)&&x.matches(":not(:defined)"),G=(x)=>x?`<${x.localName}${EM(x.id)}${gM(x.classList)}>`:"<unknown>";var Fx=(x,M,H=dM)=>{if(vx||[ox,OM].includes(H))console[H](M,x);return x},AM=(x)=>{if(VM.has(x))return`Property name "${x}" is a reserved word`;if(wM.has(x))return`Property name "${x}" conflicts with inherited HTMLElement property`;return null};class Gx extends TypeError{constructor(x){super(`Invalid component name "${x}". Custom element names must contain a hyphen, start with a lowercase letter, and contain only lowercase letters, numbers, and hyphens.`);this.name="InvalidComponentNameError"}}class Yx extends TypeError{constructor(x,M,H){super(`Invalid property name "${M}" for component <${x}>. ${H}`);this.name="InvalidPropertyNameError"}}class zx extends TypeError{constructor(x,M){super(`Invalid effects in component ${G(x)}. Effects must be a record of effects for UI elements or the component, or a Promise that resolves to effects.`);if(this.name="InvalidEffectsError",M)this.cause=M}}class Mx extends Error{constructor(x,M,H){super(`Missing required element <${M}> in component ${G(x)}. ${H}`);this.name="MissingElementError"}}class bx extends Error{constructor(x,M){super(`Timeout waiting for: [${M.join(", ")}] in component ${G(x)}.`);this.name="DependencyTimeoutError"}}class jx extends TypeError{constructor(x,M,H){super(`Expected reactives passed from ${G(x)} to ${G(M)} to be a record of signals, reactive property names or functions. Got ${_(H)}.`);this.name="InvalidReactivesError"}}class Nx extends TypeError{constructor(x,M){super(`Target ${G(x)} is not a custom element in ${M}.`);this.name="InvalidCustomElementError"}}var nM="Collection",kM=(x)=>{let M=new Set;if(x.includes("."))M.add("class");if(x.includes("#"))M.add("id");if(x.includes("[")){let H=x.split("[");for(let L=1;L<H.length;L++){let C=H[L];if(!C.includes("]"))continue;let B=C.split("=")[0].trim().replace(/[^a-zA-Z0-9_-]/g,"");if(B)M.add(B)}}return[...M]};function l(x,M){let H=new Set,L={add:new Set,remove:new Set},C=[],B,m=($)=>{let F=Array.from($).filter(ix),y=[];for(let I of F){if(I.matches(M))y.push(I);y.push(...Array.from(I.querySelectorAll(M)))}return y},T=($,F)=>{Object.freeze(F);for(let y of $)y(F)},P=()=>{C=Array.from(x.querySelectorAll(M)),B=new MutationObserver((y)=>{let I=[],Z=[];for(let Y of y)if(Y.type==="childList"){if(Y.addedNodes.length)I.push(...m(Y.addedNodes));if(Y.removedNodes.length)Z.push(...m(Y.removedNodes))}else if(Y.type==="attributes"){let K=Y.target;if(ix(K)){let z=C.includes(K),Zx=K.matches(M);if(z&&!Zx)Z.push(K);else if(!z&&Zx)I.push(K)}}if(I.length||Z.length)C=Array.from(x.querySelectorAll(M)),g(H);if(I.length)T(L.add,I);if(Z.length)T(L.remove,Z)});let $={childList:!0,subtree:!0},F=kM(M);if(F.length)$.attributes=!0,$.attributeFilter=F;B.observe(x,$)},o={};return Object.defineProperties(o,{[Symbol.toStringTag]:{value:nM},[Symbol.isConcatSpreadable]:{value:!0},[Symbol.iterator]:{value:function*(){for(let $ of C)yield $}},get:{value:()=>{if(E(H),!B)P();return C}},on:{value:($,F)=>{let y=L[$];if(!y)throw TypeError(`Invalid change notification type: ${$}`);if(y.add(F),!B)P();return()=>y.delete(F)}},length:{get:()=>{if(E(H),!B)P();return C.length}}}),new Proxy(o,{get($,F){if(F in $)return Reflect.get($,F);if(Jx(F))return;let y=Number(F);if(Number.isInteger(y))return C[y];return},has($,F){if(F in $)return!0;if(Number.isInteger(Number(F)))return!!C[Number(F)];return!1},ownKeys($){let F=Reflect.ownKeys($),y=Object.keys(C).map((I)=>String(I));return[...new Set([...y,...F])]},getOwnPropertyDescriptor($,F){if(F in $)return Reflect.getOwnPropertyDescriptor($,F);let y=C[Number(F)];return y?{enumerable:!0,configurable:!0,writable:!0,value:y}:void 0}})}var px=(x)=>Object.prototype.toString.call(x)==="[object Collection]";var lx=Symbol("RESET"),fM=(x,M="")=>{return{a:"attribute ",c:"class ",d:"dataset ",h:"inner HTML",m:"method call ",p:"property ",s:"style property ",t:"text content"}[x]+M},tx=(x,M,H)=>{let L=[],C=(B)=>{let m=B(x,M);if(m)L.push(m)};if(Array.isArray(H))for(let B of H)C(B);else C(H);return()=>{L.forEach((B)=>B()),L.length=0}},uM=(x,M,H)=>{let L=new Map,C=(m)=>{for(let T of m){let P=tx(x,T,H);if(P)L.set(T,P)}},B=(m)=>{for(let T of m)L.get(T)?.(),L.delete(T)};return M.on("add",C),M.on("remove",B),C(M.get()),()=>{for(let m of L.values())m();L.clear()}},ax=(x,M)=>{if(!S(M))throw new zx(x.host);let H=[],L=Object.keys(M);for(let C of L){let B=C;if(!M[B])continue;let m=Array.isArray(M[B])?M[B]:[M[B]];if(px(x[B]))H.push(uM(x.host,x[B],m));else if(x[B]){let T=tx(x.host,x[B],m);if(T)H.push(T)}}return()=>{for(let C of H)C();H.length=0}},hM=(x,M,H,L)=>{try{return V(x)?M[x]:s(x)?x.get():p(x)?x(H):lx}catch(C){if(L)Fx(C,`Failed to resolve value of ${_(x)}${L?` for ${L}`:""} in ${G(H)}${M!==H?` in ${G(M)}`:""}`,ox);return lx}},R=(x,M)=>(H,L)=>{let{op:C,name:B="",read:m,update:T}=M,P=fM(C,B),o=(y)=>()=>{if(vx&&H.debug)Fx(L,`${y} ${P} of ${G(L)} in ${G(H)}`);M.resolve?.(L)},$=(y)=>(I)=>{Fx(I,`Failed to ${y} ${P} of ${G(L)} in ${G(H)}`,ox),M.reject?.(I)},F=m(L);return Px(()=>{let y=hM(x,H,L,P),I=y===lx?F:y===W?M.delete?null:F:y;if(M.delete&&I===null)try{M.delete(L),o("delete")()}catch(Z){$("delete")(Z)}else if(I!=null){let Z=m(L);if(Object.is(I,Z))return;try{T(L,I),o("update")()}catch(Y){$("update")(Y)}}})};var yx=(x)=>p(x)&&x.length>=2,cM=(x)=>p(x),d=(x,M)=>cM(M)?M(x):M,D=(x,M)=>(H)=>{let L=x(H);return V(L)&&yx(M)?M(H,L):L??d(H,M)};var vM=50,UM=(x)=>{let M=x.shadowRoot??x,H=new Set;function L(m,T){let P=M.querySelector(m);if(T!=null&&!P)throw new Mx(x,m,T);if(P&&sx(P))H.add(P.localName);return P??void 0}function C(m,T){let P=l(M,m),o=P.get();if(T!=null&&!o.length)throw new Mx(x,m,T);if(o.length)o.forEach(($)=>{if(sx($))H.add($.localName)});return P}return[{first:L,all:C},(m)=>{if(H.size){let T=Array.from(H);Promise.race([Promise.all(T.map((P)=>customElements.whenDefined(P))),new Promise((P,o)=>{setTimeout(()=>{o(new bx(x,T.filter(($)=>!customElements.get($))))},vM)})]).then(m).catch(()=>{m()})}else m()}]};function A(x,M={},H=()=>({}),L=()=>({})){if(!x.includes("-")||!x.match(/^[a-z][a-z0-9-]*$/))throw new Gx(x);for(let B of Object.keys(M)){let m=AM(B);if(m)throw new Yx(x,B,m)}class C extends HTMLElement{debug;#x;#M={};#H;static observedAttributes=Object.entries(M)?.filter(([,B])=>yx(B)).map(([B])=>B)??[];connectedCallback(){let[B,m]=UM(this),T={...H(B),host:this};this.#x=T,Object.freeze(this.#x);let P=($)=>{return p($)},o=($,F)=>{let y=yx(F)?F(T,this.getAttribute($)):P(F)?F(T):F;if(y!=null)this.#L($,y)};for(let[$,F]of Object.entries(M)){if(F==null||$ in this)continue;o($,F)}m(()=>{this.#H=ax(T,L(T))})}disconnectedCallback(){if(p(this.#H))this.#H()}attributeChangedCallback(B,m,T){if(!this.#x||T===m||a(this.#M[B]))return;let P=M[B];if(!yx(P))return;let o=P(this.#x,T,m);if(B in this)this[B]=o;else this.#L(B,o)}#L(B,m){let T=s(m)?m:e(m)?q(m):b(m),P=this.#M[B],o=Xx(T);if(this.#M[B]=T,Object.defineProperty(this,B,{get:T.get,set:o?T.set:void 0,enumerable:!0,configurable:o}),P&&r(P)||xx(P))P.set(W)}}return customElements.define(x,C),customElements.get(x)}var Rx="context-request";class ex extends Event{context;callback;subscribe;constructor(x,M,H=!1){super(Rx,{bubbles:!0,composed:!0});this.context=x,this.callback=M,this.subscribe=H}}var xM=(x)=>(M)=>{let H=(L)=>{let{context:C,callback:B}=L;if(V(C)&&x.includes(C)&&p(B))L.stopImmediatePropagation(),B(()=>M[C])};return M.addEventListener(Rx,H),()=>M.removeEventListener(Rx,H)},Ix=(x,M)=>(H)=>{let L=()=>d(H,M);return H.host.dispatchEvent(new ex(x,(C)=>{L=C})),q(L)};var iM=(x)=>{if(/^(mailto|tel):/i.test(x))return!0;if(x.includes("://"))try{let M=new URL(x,window.location.origin);return["http:","https:","ftp:"].includes(M.protocol)}catch{return!1}return!0},rM=(x,M,H)=>{if(/^on/i.test(M))throw Error(`Unsafe attribute: ${M}`);if(H=String(H).trim(),!iM(H))throw Error(`Unsafe URL for ${M}: ${H}`);x.setAttribute(M,H)},j=(x,M=x)=>R(M,{op:"a",name:x,read:(H)=>H.getAttribute(x),update:(H,L)=>{rM(H,x,L)},delete:(H)=>{H.removeAttribute(x)}}),Kx=(x,M=x)=>R(M,{op:"a",name:x,read:(H)=>H.hasAttribute(x),update:(H,L)=>{H.toggleAttribute(x,L)}});var k=(x,M=x)=>R(M,{op:"c",name:x,read:(H)=>H.classList.contains(x),update:(H,L)=>{H.classList.toggle(x,L)}});var _x=new Set(["scroll","resize","mousewheel","touchstart","touchmove","wheel"]),MM=new Set,ZM=new WeakMap,Sx,sM=()=>{Sx=void 0;let x=Array.from(MM);MM.clear();for(let M of x)ZM.get(M)?.()},lM=()=>{if(Sx)cancelAnimationFrame(Sx);Sx=requestAnimationFrame(sM)},Hx=(x,M)=>{ZM.set(x,M),MM.add(x),lM()};var U=(x,M,H={})=>(L,C)=>{if(!("passive"in H))H={...H,passive:_x.has(x)};let B=(m)=>{let T=()=>{let P=M(m);if(!S(P))return;n(()=>{for(let[o,$]of Object.entries(P))try{L[o]=$}catch(F){Fx(F,`Reactive property "${o}" on ${G(L)} from event ${x} on ${G(C)} could not be set, because it is read-only.`,ox)}})};if(H.passive)Hx(C,T);else T()};return C.addEventListener(x,B,H),()=>C.removeEventListener(x,B)};var Ax=(x,M={})=>R(x,{op:"h",read:(H)=>(H.shadowRoot||!M.shadowRootMode?H:null)?.innerHTML??"",update:(H,L)=>{let{shadowRootMode:C,allowScripts:B}=M;if(!L){if(H.shadowRoot)H.shadowRoot.innerHTML="<slot></slot>";return""}if(C&&!H.shadowRoot)H.attachShadow({mode:C});let m=H.shadowRoot||H;return Hx(H,()=>{if(m.innerHTML=L,B)m.querySelectorAll("script").forEach((T)=>{let P=document.createElement("script");P.appendChild(document.createTextNode(T.textContent??""));let o=T.getAttribute("type");if(o)P.setAttribute("type",o);m.appendChild(P),T.remove()})}),B?" with scripts":""}});var f=(x)=>(M,H)=>{if(!rx(H))throw new Nx(H,`pass from ${G(M)}`);let L=p(x)?x(H):x;if(!S(L))throw new jx(M,H,L);let C={},B=(m)=>{if(s(m))return m.get;let T=V(m)&&m in M?()=>M[m]:e(m)?m:void 0;return T?q(T).get:void 0};for(let[m,T]of Object.entries(L)){if(T==null)continue;let P=Object.getOwnPropertyDescriptor(H,m);if(!(m in H)||!P?.configurable)continue;let o=p(T)&&T.length===1?T(H):T,$=Array.isArray(o)&&o.length===2,F=B($?o[0]:o),y=$&&p(o[1])?o[1]:void 0;if(!F)continue;C[m]=P,Object.defineProperty(H,m,{configurable:!0,enumerable:!0,get:F,set:y}),P.set?.call(H,W)}return()=>{Object.defineProperties(H,C)}};var J=(x,M=x)=>R(M,{op:"p",name:x,read:(H)=>(x in H)?H[x]:W,update:(H,L)=>{H[x]=L}}),X=(x)=>R(x,{op:"p",name:"hidden",read:(M)=>!M.hidden,update:(M,H)=>{M.hidden=!H}});var Q=(x)=>R(x,{op:"t",read:(M)=>M.textContent,update:(M,H)=>{Array.from(M.childNodes).filter((L)=>L.nodeType!==Node.COMMENT_NODE).forEach((L)=>L.remove()),M.append(document.createTextNode(H))}});var Dx=()=>(x,M)=>M!=null&&M!=="false";var HM=(x,M)=>{if(M==null)return;let H=x(M);return Number.isFinite(H)?H:void 0},N=(x=0)=>(M,H)=>{if(H==null)return d(M,x);let L=H.trim();if(L.toLowerCase().startsWith("0x"))return HM((B)=>parseInt(B,16),L)??d(M,x);let C=HM(parseFloat,H);return C!=null?Math.trunc(C):d(M,x)},LM=(x=0)=>(M,H)=>HM(parseFloat,H)??d(M,x);var w=(x="")=>(M,H)=>H??d(M,x);var O=(x,M,H)=>(L)=>{let{host:C}=L,B=new Set,m=d(L,x),T=px(L[M])?L[M].get():[L[M]],P=new Map,o,$=(I)=>{for(let Z of T)if(Z.contains(I))return Z},F=()=>{for(let[I,Z]of Object.entries(H)){let Y={passive:_x.has(I)},K=(z)=>{let Zx=z.target;if(!Zx)return;let BM=$(Zx);if(!BM)return;z.stopPropagation();let CM=()=>{try{let Lx=Z({event:z,ui:L,target:BM,prev:m});if(Lx==null||Lx instanceof Promise)return;if(!Object.is(Lx,m)){if(m=Lx,B.size)g(B);else if(o)o()}}catch(Lx){throw z.stopImmediatePropagation(),Lx}};if(Y.passive)Hx(C,CM);else CM()};P.set(I,K),C.addEventListener(I,K,Y)}o=()=>{if(P.size){for(let[I,Z]of P)C.removeEventListener(I,Z);P.clear()}o=void 0}},y={};return Object.defineProperties(y,{[Symbol.toStringTag]:{value:Qx},get:{value:()=>{if(E(B),B.size&&!P.size)F();return m}}}),y};var uB=A("basic-hello",{name:w((x)=>x.output.textContent)},({first:x})=>({input:x("input","Needed to enter the name."),output:x("output","Needed to display the name.")}),({host:x,input:M})=>{let H=x.name;return{input:U("input",()=>{x.name=M.value||H}),output:Q("name")}});var vB=A("basic-button",{disabled:Dx(),label:w((x)=>x.label?.textContent??x.button.textContent),badge:w((x)=>x.badge?.textContent??"")},({first:x})=>({button:x("button","Add a native button as descendant."),label:x("span.label"),badge:x("span.badge")}),()=>({button:J("disabled"),label:Q("label"),badge:Q("badge")}));var sB=A("basic-counter",{count:D((x)=>x.count.textContent,N())},({first:x})=>({increment:x("button","Add a native button element to increment the count."),count:x("span","Add a span to display the count.")}),({host:x})=>({increment:U("click",()=>{x.count++}),count:Q("count")}));var tM="en";function aM(x,M,H={onWarn:console.warn,onError:console.error}){let L=()=>new Intl.NumberFormat(x);if(!M)return L();let{onWarn:C,onError:B}=H,m={};try{m=JSON.parse(M)}catch(Z){return B?.(`Invalid JSON: ${Z}`),L()}let T=m.style??"decimal",P=[];if(T==="currency"){if(!m.currency||typeof m.currency!=="string"||m.currency.length!==3)return B?.('style="currency" requires a 3-letter ISO currency (e.g. "CHF").'),L()}else P.push("currency","currencyDisplay","currencySign");if(T==="unit"){if(!m.unit||typeof m.unit!=="string")return B?.('style="unit" requires a "unit" (e.g. "liter", "kilometer-per-hour").'),L()}else P.push("unit","unitDisplay");if(m.notation&&m.notation!=="compact")P.push("compactDisplay");let o={};for(let[Z,Y]of Object.entries(m))if(!P.includes(Z))o[Z]=Y;else C?.(`Option "${Z}" is ignored for style="${T}".`);let{minimumFractionDigits:$,maximumFractionDigits:F}=o;if($!=null&&F!=null&&$>F)C?.(`minimumFractionDigits (${$}) > maximumFractionDigits (${F}); swapping.`),o.minimumFractionDigits=F,o.maximumFractionDigits=$;let{minimumSignificantDigits:y,maximumSignificantDigits:I}=o;if(y!=null&&I!=null&&y>I)C?.(`minimumSignificantDigits (${y}) > maximumSignificantDigits (${I}); swapping.`),o.minimumSignificantDigits=I,o.maximumSignificantDigits=y;try{let Z=new Intl.NumberFormat(x,o);if(Z.resolvedOptions().locale!==x)C(`Fall back to locale ${Z.resolvedOptions().locale} instead of ${x}`);return Z}catch(Z){return B?.(`Options rejected by Intl.NumberFormat: ${Z instanceof Error?Z.message:String(Z)}`),L()}}var aB=A("basic-number",{value:LM()},void 0,({host:x})=>{let M=aM(x.closest("[lang]")?.getAttribute("lang")||tM,x.getAttribute("options"));return{host:Q(()=>M.format(x.value))}});var eM="en",xH=()=>(x,M)=>{let H=N()(x,M);return H<0?0:H},HC=A("basic-pluralize",{count:xH()},({first:x})=>({count:x(".count"),none:x(".none"),some:x(".some"),zero:x(".zero"),one:x(".one"),two:x(".two"),few:x(".few"),many:x(".many"),other:x(".other")}),({host:x})=>{let M=new Intl.PluralRules(x.closest("[lang]")?.getAttribute("lang")||eM,x.hasAttribute("ordinal")?{type:"ordinal"}:void 0),H={count:Q(()=>String(x.count)),none:X(()=>x.count===0),some:X(()=>x.count>0)},L=M.resolvedOptions().pluralCategories;for(let C of L)H[C]=X(()=>M.select(x.count)===C);return H});var dx="media-motion",Ox="media-theme",Vx="media-viewport",wx="media-orientation",CC=A("context-media",{[dx]:()=>{let x=matchMedia("(prefers-reduced-motion: reduce)"),M=b(x.matches?"reduce":"no-preference");return x.addEventListener("change",(H)=>{M.set(H.matches?"reduce":"no-preference")}),M},[Ox]:()=>{let x=matchMedia("(prefers-color-scheme: dark)"),M=b(x.matches?"dark":"light");return x.addEventListener("change",(H)=>{M.set(H.matches?"dark":"light")}),M},[Vx]:(x)=>{let M=(P,o)=>{let F=x.host.getAttribute(P)?.trim();if(!F)return o;let y=F.match(/em$/)?"em":"px",I=parseFloat(F);return Number.isFinite(I)?I+y:o},H=matchMedia(`(min-width: ${M("sm","32em")})`),L=matchMedia(`(min-width: ${M("md","48em")})`),C=matchMedia(`(min-width: ${M("lg","72em")})`),B=matchMedia(`(min-width: ${M("xl","104em")})`),m=()=>{if(B.matches)return"xl";if(C.matches)return"lg";if(L.matches)return"md";if(H.matches)return"sm";return"xs"},T=b(m());return H.addEventListener("change",()=>{T.set(m())}),L.addEventListener("change",()=>{T.set(m())}),C.addEventListener("change",()=>{T.set(m())}),B.addEventListener("change",()=>{T.set(m())}),T},[wx]:()=>{let x=matchMedia("(orientation: landscape)"),M=b(x.matches?"landscape":"portrait");return x.addEventListener("change",(H)=>{M.set(H.matches?"landscape":"portrait")}),M}},void 0,()=>({host:xM([dx,Ox,Vx,wx])}));var oC=A("card-mediaqueries",{motion:Ix(dx,"unknown"),theme:Ix(Ox,"unknown"),viewport:Ix(Vx,"unknown"),orientation:Ix(wx,"unknown")},({first:x})=>({motion:x(".motion"),theme:x(".theme"),viewport:x(".viewport"),orientation:x(".orientation")}),()=>({motion:Q("motion"),theme:Q("theme"),viewport:Q("viewport"),orientation:Q("orientation")}));var IC=A("form-checkbox",{checked:O(D((x)=>x.checkbox.checked,!1),"checkbox",{change:({target:x})=>x.checked}),label:w(({host:x,label:M})=>M?.textContent??x.querySelector("label")?.textContent??"")},({first:x})=>({checkbox:x('input[type="checkbox"]',"Add a native checkbox."),label:x(".label")}),()=>({host:Kx("checked"),label:Q("label")}));var Ex=({host:x,textbox:M})=>{x.clear=()=>{x.value="",M.value="",M.setCustomValidity(""),M.checkValidity(),M.dispatchEvent(new Event("input",{bubbles:!0})),M.dispatchEvent(new Event("change",{bubbles:!0})),M.focus()}},gx=(x)=>[X(()=>!!x.host.length),U("click",()=>{x.host.clear()})];var KC=A("form-combobox",{value:D((x)=>x.textbox.value,""),length:O(D((x)=>x.textbox.value.length,0),"textbox",{input:({target:x})=>x.value.length}),error:"",description:D((x)=>x.description?.textContent,""),clear:Ex},({first:x})=>({textbox:x("input","Needed to enter value."),listbox:x("form-listbox","Needed to display options."),clear:x("button.clear"),error:x("form-combobox > .error"),description:x(".description")}),(x)=>{let{host:M,error:H,description:L,listbox:C,textbox:B}=x,m=H?.id,T=L?.id,P=b(!1),o=q(()=>P.get()&&C.options.length>0);return{host:[j("value"),U("keyup",({key:$})=>{if($==="Escape")P.set(!1);if($==="Delete")M.clear()})],textbox:[J("ariaInvalid",()=>String(!!M.error)),j("aria-errormessage",()=>M.error&&m?m:null),j("aria-describedby",()=>M.description&&T?T:null),J("ariaExpanded",()=>String(o.get())),U("input",()=>{B.checkValidity(),n(()=>{M.value=B.value,M.error=B.validationMessage??"",P.set(!0)})}),U("keydown",($)=>{let{key:F,altKey:y}=$;if(F==="ArrowDown"){if(y)P.set(!0);if(o.get())C.options[0]?.focus()}})],listbox:[X(o),f({filter:()=>M.value}),U("change",({target:$})=>{if($ instanceof HTMLInputElement)B.value=$.value,B.checkValidity(),n(()=>{M.value=$.value,M.error=B.validationMessage??"",P.set(!1)})})],clear:[...gx(x)],error:[Q("error")],description:[Q("description")]}});var JM=new Map,MH=(x)=>{let M=x.toLowerCase().split(",").map((L)=>L.trim()),H={noCache:!1,noStore:!1,maxAge:void 0};for(let L of M)if(L==="no-cache")H.noCache=!0;else if(L==="no-store")H.noStore=!0;else if(L.startsWith("max-age=")){let C=parseInt(L.substring(8),10);if(!isNaN(C))H.maxAge=C}return H},HH=(x)=>{if(x.maxAge!==void 0)return(Date.now()-x.timestamp)/1000<x.maxAge;return!0},nx=(x,M,H="src")=>!!x&&!!(M.parentElement||M.getRootNode().host)?.closest(`${M.localName}[${H}="${x}"]`),kx=(x)=>{if(!x)return!1;try{if(new URL(x,location.href).origin===location.origin)return!0}catch{return!1}return!1},fx=async(x,M,H=(L)=>L.text())=>{let L=JM.get(x),C={};if(L?.etag)C["If-None-Match"]=L.etag;if(L?.lastModified)C["If-Modified-Since"]=L.lastModified;let B=await fetch(x,{signal:M,headers:C});if(B.status===304&&L)return{content:L.content,fromCache:!0};if(!B.ok)throw Error(`HTTP error: ${B.statusText}`);let m=await H(B),T=B.headers.get("cache-control"),P=B.headers.get("etag"),o=B.headers.get("last-modified"),$=T?MH(T):{noCache:!1,noStore:!1};if(!$.noStore){let F={content:m,timestamp:Date.now(),etag:P||void 0,lastModified:o||void 0,maxAge:$.maxAge};if(!$.noCache||HH(F))JM.set(x,F)}return{content:m,fromCache:!1}};var LH="Enter",BH=["ArrowLeft","ArrowUp"],QM=["ArrowRight","ArrowDown"],XM="Home",pM="End",CH=[...BH,...QM,XM,pM],ux=(x,M)=>{let H=M(x);return[U("click",({target:L})=>{if(!(L instanceof HTMLElement))return;if(L&&L.hasAttribute("value"))H=x.get().findIndex((C)=>C===L)}),U("keydown",(L)=>{let{key:C}=L;if(!CH.includes(C))return;if(L.preventDefault(),L.stopPropagation(),C===XM)H=0;else if(C===pM)H=x.length-1;else H=(H+(QM.includes(C)?1:-1)+x.length)%x.length;if(x[H])x[H].focus()}),U("keyup",({key:L})=>{if(L===LH&&x[H])x[H].click()})]};var KM=(x,M)=>{if(!M)return x;let H=new RegExp(M.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gi");return x.replace(H,"<mark>$&</mark>")};var RC=A("form-listbox",{value:"",options:({listbox:x})=>l(x,'button[role="option"]:not([hidden])'),filter:"",src:w()},({first:x,all:M})=>({input:x('input[type="hidden"]',"Needed to store the selected value."),callout:x("card-callout"),loading:x(".loading"),error:x(".error"),listbox:x('[role="listbox"]',"Needed to display list of options."),options:M('button[role="option"]')}),(x)=>{let{host:M,input:H}=x,L=(o)=>o.map(($)=>`
|
|
2
|
+
<button type="button" role="option" tabindex="-1" value="${$.value}">
|
|
3
|
+
${$.label}
|
|
4
|
+
</button>`).join(""),C=(o)=>{let $=M.id,F="";for(let[y,I]of Object.entries(o))F+=`
|
|
5
|
+
<div role="group" aria-labelledby="${$}-${y}">
|
|
6
|
+
<div role="presentation" id="${$}-${y}">${I.label}</div>
|
|
7
|
+
${L(I.items)}
|
|
8
|
+
</div>`;return F},B=()=>M.src?[X(()=>m.get().ok),Ax(()=>m.get().value)]:[],m=q(async(o,$)=>{let F=M.src,y=!F?"No URL provided":!kx(F)?"Invalid URL":nx(F,M)?"Recursive URL detected":"";if(y)return{ok:!1,value:"",error:y,pending:!1};try{let{content:I}=await fx(F,$,(Z)=>Z.json());return{ok:!0,value:Array.isArray(I)?L(I):C(I),error:"",pending:!1}}catch(I){return{ok:!1,value:"",error:String(I),pending:!1}}},{ok:!1,value:"",error:"",pending:!0}),T=(o)=>M.value===o.value,P=()=>M.src?!!m.get().error:!1;return{host:j("value"),input:J("value"),callout:[X(()=>M.src?!m.get().ok:!1),k("danger",P)],loading:X(()=>M.src?m.get().pending:!1),error:[X(P),Q(()=>M.src?m.get().error:"")],listbox:[...ux(M.options,(o)=>o.get().findIndex(($)=>$.ariaSelected==="true")),U("click",({target:o})=>{let $=o.closest('[role="option"]');if($&&$.value!==M.value)M.value=$.value,H.dispatchEvent(new Event("change",{bubbles:!0}))}),...B()],options:[J("tabIndex",(o)=>T(o)?0:-1),X((o)=>o.textContent?.trim().toLowerCase().includes(M.filter.toLowerCase())),Ax((o)=>KM(o.textContent??"",M.filter)),J("ariaSelected",(o)=>String(T(o)))]}});var DM=(x)=>x.get().findIndex((M)=>M.checked),OC=A("form-radiogroup",{value:O(D(({radios:x})=>x[DM(x)]?.value,""),"radios",{change:({target:x})=>x.value})},({all:x})=>({radios:x('input[type="radio"]',"Add at least two native radio buttons."),labels:x("label","Wrap radio buttons with labels.")}),({host:x,radios:M})=>({host:ux(M,DM),radios:J("tabIndex",(H)=>H.value===x.value?0:-1),labels:k("selected",(H)=>x.value===H.querySelector("input")?.value)}));var EC=A("form-spinbutton",{value:O(D((x)=>x.input.value,N()),"controls",{change:({ui:x,target:M,prev:H})=>{if(!(M instanceof HTMLInputElement))return H;let L=(m)=>{return M.value=String(m),M.checkValidity(),m},C=Number(M.value);if(!Number.isInteger(C))return L(H);let B=Math.min(x.host.max,Math.max(0,C));if(C!==B)return L(B);return B},click:({target:x,prev:M})=>M+(x.classList.contains("decrement")?-1:x.classList.contains("increment")?1:0),keydown:({ui:x,event:M,prev:H})=>{let{key:L}=M;if(["ArrowUp","ArrowDown","-","+"].includes(L)){M.stopPropagation(),M.preventDefault();let C=H+(L==="ArrowDown"||L==="-"?-1:1);return Math.min(x.host.max,Math.max(0,C))}}}),max:D((x)=>x.input.max,N(10))},({all:x,first:M})=>({controls:x("button, input:not([disabled])"),increment:M("button.increment","Add a native button to increment the value"),decrement:M("button.decrement","Add a native button to decrement the value"),input:M("input.value","Add a native input to display the value"),zero:M(".zero"),other:M(".other")}),({host:x,increment:M,zero:H})=>{let L=q(()=>x.value!==0),C=M.ariaLabel||"Increment",B=q(()=>L.get()||!H?C:H.textContent);return{input:[X(L),J("value"),J("max",()=>String(x.max))],decrement:X(L),increment:[J("disabled",()=>x.value>=x.max),J("ariaLabel",B)],zero:X(()=>!L.get()),other:X(L)}});var fC=A("form-textbox",{value:D((x)=>x.textbox.value,""),length:O(D((x)=>x.textbox.value.length,0),"textbox",{input:({target:x})=>x.value.length}),error:"",description:({host:x,description:M,textbox:H})=>{if(M){if(H&&H.maxLength&&M.dataset.remaining)return()=>M.dataset.remaining.replace("${n}",String(H.maxLength-x.length));return M.textContent?.trim()??""}else return""},clear:Ex},({first:x})=>({textbox:x("input, textarea","Add a native input or textarea as descendant element."),clear:x("button.clear"),error:x(".error"),description:x(".description")}),(x)=>{let{host:M,textbox:H,error:L,description:C}=x,B=L?.id,m=C?.id;return{textbox:[U("change",()=>{return H.checkValidity(),{value:H.value,error:H.validationMessage}}),J("value"),J("ariaInvalid",()=>String(!!M.error)),j("aria-errormessage",()=>M.error&&B?B:null),j("aria-describedby",()=>C&&m?m:null)],clear:gx(x),error:Q("error"),description:Q("description")}});var WM=(x,M)=>(x+M)%M,cC=A("module-carousel",{index:N((x)=>Math.max(x.slides.get().findIndex((M)=>M.ariaCurrent==="true"),0))},({all:x})=>({dots:x('[role="tab"]'),slides:x('[role="tabpanel"]'),buttons:x("nav button")}),({host:x,slides:M})=>{let H=(C)=>C.dataset.index===String(x.index),L=()=>{M[x.index].scrollIntoView({behavior:"smooth",block:"nearest"})};return{component:[()=>{let C=new IntersectionObserver((B)=>{for(let m of B)if(m.isIntersecting){x.index=M.get().findIndex((T)=>T===m.target);break}},{root:x,threshold:0.5});return M.get().forEach((B)=>{C.observe(B)}),()=>{C.disconnect()}}],buttons:[U("click",({target:C})=>{if(!(C instanceof HTMLElement))return;let B=M.length,m=C.classList.contains("prev")?x.index-1:C.classList.contains("next")?x.index+1:parseInt(C.dataset.index||"0");x.index=Number.isInteger(m)?WM(m,B):0,L()}),U("keyup",(C)=>{let{key:B}=C;if(["ArrowLeft","ArrowRight","Home","End"].includes(B)){C.preventDefault(),C.stopPropagation();let m=M.length,T=B==="Home"?0:B==="End"?m-1:WM(x.index+(B==="ArrowLeft"?-1:1),m);M[T].focus(),x.index=T,L()}})],dots:[J("ariaSelected",(C)=>String(H(C))),J("tabIndex",(C)=>H(C)?0:-1)],slides:J("ariaCurrent",(C)=>String(C.id===M[x.index].id))}});var rC=A("module-catalog",{},({all:x,first:M})=>({button:M("basic-button","Add a button to go go the Shopping Cart"),spinbuttons:x("form-spinbutton","Add spinbutton components to calculate sum from.")}),({spinbuttons:x})=>{let M=q(()=>x.get().reduce((H,L)=>H+L.value,0));return{button:f({disabled:()=>!M.get(),badge:()=>M.get()>0?String(M.get()):""})}});var qM="success",mH="error",GM=(x,M)=>(H,L)=>U("click",async()=>{let C=L.label,B=qM;try{await navigator.clipboard.writeText(x.textContent?.trim()??"")}catch(m){console.error("Error while trying to use navigator.clipboard.writeText()",m),B=mH}L.disabled=!0,L.label=M[B]??C,setTimeout(()=>{L.disabled=!1,L.label=C},B===qM?1000:3000)})(H,L);var xm=A("module-codeblock",{collapsed:Dx()},({first:x})=>({code:x("code","Needed as source container to copy from."),overlay:x("button.overlay"),copy:x("basic-button.copy")}),({host:x,code:M,copy:H})=>({host:Kx("collapsed"),overlay:U("click",()=>{x.collapsed=!1}),copy:GM(M,{success:H?.getAttribute("copy-success")||"Copied!",error:H?.getAttribute("copy-error")||"Error trying to copy to clipboard!"})}));var YM="scroll-lock",Lm=A("module-dialog",{open:!1},({first:x})=>({openButton:x('button[aria-haspopup="dialog"]',"Add a button to open the dialog."),dialog:x("dialog","Add a native dialog element."),closeButton:x("dialog button.close","Add a close button in the dialog.")}),({host:x,dialog:M})=>{let H=0,L=null;return{host:()=>Px(()=>{if(x.open)H=document.documentElement.scrollTop,L=document.activeElement,M.showModal(),document.body.classList.add(YM),document.body.style.setProperty("top",`-${H}px`);else if(document.body.classList.remove(YM),window.scrollTo({top:H,left:0,behavior:"instant"}),document.body.style.removeProperty("top"),M.close(),L)L.focus();return()=>{x.open=!1}}),openButton:U("click",()=>{x.open=!0}),dialog:[U("click",({target:C})=>{if(C===M)x.open=!1}),U("keydown",({key:C})=>{if(C==="Escape")x.open=!1})],closeButton:U("click",()=>{x.open=!1})}});var Tm=A("module-lazyload",{src:w()},({first:x})=>({callout:x("card-callout","Needed to display loading state and error messages."),loading:x(".loading","Needed to display loading state."),error:x(".error","Needed to display error messages."),content:x(".content","Needed to display content.")}),(x)=>{let{host:M}=x,H=q(async(C,B)=>{let m=M.src,T=!m?"No URL provided":!kx(m)?"Invalid URL":nx(m,M)?"Recursive URL detected":"";if(T)return{ok:!1,value:"",error:T,pending:!1};try{let{content:P}=await fx(m,B);return{ok:!0,value:P,error:"",pending:!1}}catch(P){return{ok:!1,value:"",error:`Failed to fetch content for "${m}": ${String(P)}`,pending:!1}}},{ok:!1,value:"",error:"",pending:!0}),L=()=>!!H.get().error;return{callout:[X(()=>!H.get().ok),k("danger",L)],loading:X(()=>!!H.get().pending),error:[X(L),Q(()=>H.get().error??"")],content:[X(()=>H.get().ok),Ax(()=>H.get().value??"",{allowScripts:M.hasAttribute("allow-scripts")})]}});var TH=1000,om=A("module-list",{add:({host:x,container:M,template:H})=>{let L=0;x.add=(C)=>{let B=H.content.cloneNode(!0).firstElementChild;if(B&&B instanceof HTMLElement){if(B.dataset.key=String(L++),C)C(B);M.append(B)}else throw new Mx(x,"*","Template does not contain an item element.")}},delete:({host:x,container:M})=>{x.delete=(H)=>{let L=M.querySelector(`[data-key="${H}"]`);if(L)L.remove()}}},({first:x})=>({container:x("[data-container]","Add a container element for items."),template:x("template","Add a template element for items."),form:x("form"),textbox:x("form-textbox"),add:x("basic-button.add")}),(x)=>{let{host:M,container:H,textbox:L}=x,C=N(TH)(x,M.getAttribute("max"));return{form:U("submit",(B)=>{B.preventDefault();let m=L?.value;if(m)M.add((T)=>{T.querySelector("slot")?.replaceWith(m)}),L.clear()}),add:f({disabled:()=>L&&!L.length||H.children.length>=C}),host:U("click",(B)=>{let{target:m}=B;if(m instanceof HTMLElement&&m.closest("basic-button.delete"))B.stopPropagation(),m.closest("[data-key]")?.remove()})}});var Im=A("module-pagination",{value:D((x)=>x.input.value,N(1)),max:D((x)=>x.input.max,N(1))},({first:x})=>({input:x("input",'Add an <input[type="number"]> to enter the page number to go to.'),prev:x("button.prev","Add a <button.prev> to go to the previous page."),next:x("button.next","Add a <button.next> to go to the next page."),value:x(".value"),max:x(".max")}),({host:x,input:M})=>({host:[X(()=>x.max>1),j("value",()=>String(x.value)),j("max",()=>String(x.max)),U("keyup",({target:H,key:L})=>{if(H instanceof HTMLInputElement)return;if((L==="ArrowLeft"||L==="-")&&x.value>1)x.value--;else if((L==="ArrowRight"||L==="+")&&x.value<x.max)x.value++})],input:[U("change",()=>{let H=M.valueAsNumber;x.value=Number.isNaN(H)?1:Math.max(1,Math.min(H,x.max))}),J("value",()=>String(x.value)),J("max",()=>String(x.max))],prev:[U("click",()=>{x.value--}),J("disabled",()=>x.value<=1)],next:[U("click",()=>{x.value++}),J("disabled",()=>x.value>=x.max)],value:Q(()=>String(x.value)),max:Q(()=>String(x.max))}));var zM=0,bM=0.99,$H=(x,M,H)=>(L)=>{let C=new IntersectionObserver(([B])=>{if(B.intersectionRatio>zM&&B.intersectionRatio<bM)M();else n(H)},{root:L,threshold:[zM,bM]});return C.observe(x),()=>{C.disconnect()}},Zm=A("module-scrollarea",void 0,void 0,({host:x})=>{let M=x.firstElementChild;if(!M)return{};let H=b(!1),L=b(!1),C=()=>H.get()||L.get(),B=x.getAttribute("orientation")==="horizontal"?()=>{H.set(x.scrollLeft>0),L.set(x.scrollLeft<x.scrollWidth-x.offsetWidth)}:()=>{H.set(x.scrollTop>0),L.set(x.scrollTop<x.scrollHeight-x.offsetHeight)};return{host:[k("overflow",C),k("overflow-start",H),k("overflow-end",L),$H(M,()=>{L.set(!0)},()=>{H.set(!1),L.set(!1)}),U("scroll",()=>{if(C())n(B)})]}});var Ux=(x)=>x.getAttribute("aria-controls")??"",jM=(x,M,H=0)=>{let L=x.get(),B=(L.findIndex(M)+H+L.length)%L.length;return Ux(L[B])},Xm=A("module-tabgroup",{selected:O(D((x)=>jM(x.tabs,(M)=>M.ariaSelected==="true"),""),"tabs",{click:({target:x})=>Ux(x),keyup:({event:x,ui:M,target:H})=>{let L=x.key;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(L)){x.preventDefault(),x.stopPropagation();let C=M.tabs.get(),B=L==="Home"?Ux(C[0]):L==="End"?Ux(C[C.length-1]):jM(M.tabs,(m)=>m===H,L==="ArrowLeft"||L==="ArrowUp"?-1:1);return C.filter((m)=>Ux(m)===B)[0].focus(),B}}})},({all:x})=>({tabs:x('button[role="tab"]','At least 2 tabs as children of a <[role="tablist"]> element are needed. Each tab must reference a unique id of a <[role="tabpanel"]> element.'),panels:x('[role="tabpanel"]',"At least 2 tabpanels are needed. Each tabpanel must have a unique id.")}),({host:x})=>{let M=(H)=>x.selected===Ux(H);return{tabs:[J("ariaSelected",(H)=>String(M(H))),J("tabIndex",(H)=>M(H)?0:-1)],panels:X((H)=>x.selected===H.id)}});var Dm=A("module-todo",{},({first:x})=>({form:x("form","Add a form element to enter a new todo item."),textbox:x("form-textbox","Add <form-textbox> component to enter a new todo item."),submit:x("basic-button.submit","Add <basic-button.submit> component to submit the form."),list:x("module-list","Add <module-list> component to display a list of todo items."),count:x("basic-pluralize","Add <basic-pluralize> component to display the number of todo items."),filter:x("form-radiogroup","Add <form-radiogroup> component to filter todo items."),clearCompleted:x("basic-button.clear-completed","Add <basic-button.clear-completed> component to clear completed todo items.")}),({textbox:x,list:M,filter:H})=>{let L=l(M,"form-checkbox:not([checked])"),C=l(M,"form-checkbox[checked]");return{form:U("submit",(B)=>{B.preventDefault();let m=x.value.trim();if(!m)return;M.add((T)=>{T.querySelector("slot")?.replaceWith(m)}),x.clear()}),submit:f({disabled:()=>!x.length}),list:j("filter",()=>H?.value||"all"),count:f({count:()=>L.length}),clearCompleted:[f({disabled:()=>!C.length,badge:()=>C.length?String(C.length):""}),U("click",()=>{let B=C.get();for(let m=B.length-1;m>=0;m--)B[m].closest("li")?.remove()})]}});
|
|
9
|
+
|
|
10
|
+
//# debugId=8845463E5A798EBA64756E2164756E21
|