npm - @zenit-hosting/zenit-ui - Versions diffs - 0.1.0 - Mend

@zenit-hosting/zenit-ui 0.1.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.

Files changed (36) hide show

package/README.md +400 -0
package/fesm2022/zenit-hosting-zenit-ui.mjs +11289 -0
package/fesm2022/zenit-hosting-zenit-ui.mjs.map +1 -0
package/llms-full.txt +5120 -0
package/llms.txt +179 -0
package/package.json +44 -0
package/schematics/collection.json +15 -0
package/schematics/migrate-material/component.js +241 -0
package/schematics/migrate-material/index.js +463 -0
package/schematics/migrate-material/report.js +125 -0
package/schematics/migrate-material/schema.js +2 -0
package/schematics/migrate-material/schema.json +32 -0
package/schematics/migrate-material/tables.js +138 -0
package/schematics/migrate-material/template.js +871 -0
package/schematics/ng-add/html.js +151 -0
package/schematics/ng-add/index.js +609 -0
package/schematics/ng-add/init-script.js +108 -0
package/schematics/ng-add/schema.js +2 -0
package/schematics/ng-add/schema.json +34 -0
package/schematics/package.json +3 -0
package/styles/_daten.css +138 -0
package/styles/_formulare.css +97 -0
package/styles/_grundlage.css +424 -0
package/styles/_konfigurator.css +216 -0
package/styles/_navigation.css +179 -0
package/styles/_overlays.css +86 -0
package/styles/_rueckmeldung.css +100 -0
package/styles/_werkzeuge.css +119 -0
package/styles/themes/accents.css +91 -0
package/styles/themes/base.css +26 -0
package/styles/themes/contrast.css +67 -0
package/styles/themes/light.css +74 -0
package/styles/themes.css +21 -0
package/styles/tokens.css +76 -0
package/styles/zenit-ui.css +12 -0
package/types/zenit-hosting-zenit-ui.d.ts +5957 -0

package/styles/_grundlage.css ADDED Viewed

@@ -0,0 +1,424 @@
+/* Package grundlage: head (z-root), Button, Badge, Field/Input/Select, Panel,
+   Icon, Spinner and the layout helpers. Verbatim from spec/components/bundle.css. */
+.z-root, .z-root *:not(:where(.z-legacy, .z-legacy *)), :where(.z-legacy) .z-root * { box-sizing: border-box; }
+.z-root {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+}
+/* Addition to the reference: an island without its own surface, for migrated
+   blocks inside an old page (docs/legacy.md). Everything of .z-root stays,
+   tokens, text colour, type and the base rules; only the ground of the
+   surrounding page shows through. The text colour is still the scheme's, so
+   the island needs a scheme that fits that ground: data-theme="light" from
+   themes.css on a light ground. Same weight as .z-root and later, so it wins. */
+.z-root--transparent { background: transparent; }
+/* Deviation from the reference: bundle.css writes font-size: 14px and
+   line-height: 20px into the rule above, which is meant for the page, while the
+   documented setup puts z-root on <html> as well as on <body>. On <html> those
+   14px move 1rem from 16px to 14px for the whole document and override the size
+   the visitor set in the browser: an application that adopts the library page by
+   page keeps its old styles in rem, and all of them shrink by 12.5% the moment
+   the class is set. So the two declarations are split off into the rule below,
+   which leaves <html> out. The library needs neither value there, its components
+   compute in px. The one rem in styles/_*.css is the 1rem of .z-legacy below,
+   which hands the visitor's size back to a page that is not migrated; the only
+   other relative lengths are em on letter-spacing and text-underline-offset,
+   which refer to the element's own font size.
+   :where() adds (0,0,0), so the rule still weighs (0,1,0), exactly what .z-root
+   weighed before: body.z-root and every nested page container keep the same
+   weight against an application class on the same element, a tie decided by
+   source order. And since the library now sets nothing at all on <html>, an
+   application's own html { font-size: … } is the only author rule there and wins
+   at every specificity and in either include order, the html { font-size:
+   var(--base-font-size) } of a user setting included.
+   Not html.z-root { font-size: 100% }: that is (0,1,1) and beat exactly that
+   application rule (measured: --base-font-size 14px and 18px both rendered
+   16px). Not html:where(.z-root) either: :where() adds nothing, so it is the
+   tag alone at (0,0,1) and loses to .z-root (0,1,0) in any order, leaving
+   <html> at the 14px it is meant to shed.
+   body.z-root carries the class itself and keeps 14px/20px; every component
+   inherits from there, and the CDK overlay container hangs on <body> too, so
+   overlays are unaffected. The class therefore has to sit on BOTH elements, as
+   the README prescribes: with z-root on <html> alone the page renders at
+   16px/normal, because nothing sets the page size any more. */
+.z-root:where(:not(html)) { font-size: 14px; line-height: 20px; }
+/* Addition to the reference: .z-legacy, the class for a subtree that is not
+   migrated yet (docs/legacy.md). An application that adopts the library route
+   by route has z-root on <html> and <body>, and body.z-root hands 14px/20px
+   down to every old page. The absolute line height is what breaks them: a
+   legacy h2 of 27.2px on a 20px line overlaps itself as soon as it wraps. A
+   reset on <body> would take the shell apart, so the reset sits on the content
+   host, and a migrated page puts z-root onto its own container again:
+   html.z-root > body.z-root > .z-legacy > .z-root.
+   1. Inherited values. Size and line height go back to what a page has
+      without the library, font smoothing too. Family, colour, background and
+      color-scheme stay as body.z-root set them: the library cannot know what
+      the old <body> rule said, and text in the shell's family and colour on
+      the shell's ground is the readable fallback. The application restates
+      them on the same element (snippet in docs/legacy.md). No custom property
+      for that: it would be a second way to write the same two declarations.
+   2. Base rules for bare elements stop at .z-legacy. Every rule of the library
+      that styles an element without a library class is written twice:
+        .z-root X:not(:where(.z-legacy, .z-legacy *)),
+        :where(.z-legacy) .z-root X
+      The first selector leaves out the host and everything in it, the second
+      is what lets a z-root inside .z-legacy switch the rule on again. Both
+      :where() add (0,0,0), so each rule weighs exactly what it weighed before
+      and every specificity written down in this file still holds, including
+      the tie with an application class at (0,1,0) and all a.z-* counter-rules.
+      The host is part of the old page: an old main { width: 600px; padding:
+      0 24px } is 648px wide without the library and has to stay 648px.
+      The focus rule has a third selector, :where(.z-legacy) .z-root:focus-visible,
+      for the nested container itself, the usual target of a skip link; outside
+      .z-legacy a page container is a descendant of body.z-root and gets the
+      ring that way.
+      What it costs. The exclusion sits on the universal selector, so every
+      element pays for it on a full style recalculation. Production build,
+      RecalcStyleDuration over CDP, forced full recalc, median of 40 rounds of
+      10, without and with the exclusion: /daten (647 elements) 1.21 to 1.39 ms;
+      /muster/server-panel with 2000 console lines (4130 elements) 4.22 to
+      4.9 ms, at 4x CPU throttling 23.9 to 27.8 ms. That is +14 to +18 % on
+      that one step, about 0.7 ms on the large page, and all of it comes from
+      the universal rule. A first version that said the same in one selector,
+      :not(:where(.z-legacy :not(.z-legacy .z-root, .z-legacy .z-root *))),
+      cost +25 % (5.27 ms) and did not cover the host. Covering the host is
+      free: with and without it measured the same within the noise.
+      Resetting instead (.z-legacy :where(*) { box-sizing: content-box }) is
+      cheaper and wrong: it flips an old * { box-sizing: border-box } and the
+      border-box the browser gives select and button by default.
+      The rules, all in this file (the other partials style classes only):
+        .z-root *                                   box-sizing     exempt
+        .z-root :where(button, input, select, ...)  font, color    exempt
+        .z-root :focus-visible                      outline        exempt
+        .z-root :where(a), :where(a):hover          color, line    exempt
+        .z-root :where(p, li, ...) a:not(...)       underline      exempt
+      Kept: .z-root itself, .z-root:where(:not(html)) and html.z-root /
+      body.z-root (they match the class, not a bare element; the size rule is
+      the one .z-legacy overrides by source order), :where(:root) color-scheme and
+      .z-root:has(.z-stickybar[data-stuck]) (document level), and every class
+      rule.
+      The focus ring is exempt as well, for a measured reason: focus is white
+      in the dark scheme, and outline from this file REPLACES the two-tone ring
+      the browser draws by default. On the light surface of the old page in
+      the demo (/muster/legacy) that is white on near white, 1.04:1, where the
+      browser's own ring was visible. Opting in is one line in the
+      application (.z-legacy :focus-visible { outline: 2px solid ...; }),
+      opting out would be impossible: revert rolls back to the browser's
+      stylesheet, not to the application's rule.
+   3. Alternatives, measured. @scope (.z-root) to (.z-legacy) is the natural
+      fit, but Angular 22 builds for "baseline widely available on 2026-05-07",
+      which includes Firefox 119 to 145 and Safari 17.0 to 17.3 without @scope;
+      they would drop every base rule. color: revert inside .z-legacy turned a
+      legacy link from its own colour to the browser's blue and a legacy button
+      from 13px to 13.33px, because revert skips every author rule, and it
+      cannot be undone by a nested z-root.
+   Ceiling: one level of re-entry. A .z-legacy inside a z-root inside a
+   .z-legacy counts as migrated (the base rules apply, while the inherited
+   values are the 1rem/normal of that inner .z-legacy); nearest-ancestor
+   matching needs @scope. .z-legacy never goes on <body>: the CDK overlay
+   container hangs there and would be part of the old page.
+   A library component placed straight into .z-legacy, without a z-root around
+   it, loses exactly the rules listed under 2; docs/legacy.md has the list. */
+.z-legacy { font-size: 1rem; line-height: normal; -webkit-font-smoothing: auto; }
+/* Deviation from the reference: bundle.css lists the four elements one by one
+   (specificity 0,1,1) and thereby beats .z-btn--primary/--ghost/--danger
+   (0,1,0). :where() lowers the rule to 0,1,0, the values stay the same. */
+.z-root :where(button, input, select, textarea):not(:where(.z-legacy, .z-legacy *)), :where(.z-legacy) .z-root :where(button, input, select, textarea) { font: inherit; color: inherit; }
+.z-root :focus-visible:not(:where(.z-legacy, .z-legacy *)), :where(.z-legacy) .z-root:focus-visible, :where(.z-legacy) .z-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+/* Deviation from the reference: bundle.css writes .z-root a (0,1,1), which beats
+   every class an application can put on a link (0,1,0). In the first real
+   integration that made the application's own skip link red on red (1.29:1) and
+   recoloured every link of the pages not migrated yet, the moment z-root went
+   onto <html>. :where() lowers the two rules to (0,1,0) and (0,2,0); the values
+   are unchanged. It is the same fix the rule above got for
+   :where(button, input, select, textarea).
+   What that buys, exactly. At (0,1,0) an application class on a link now TIES
+   with this rule, and a tie is decided by source order, not by specificity: the
+   application stylesheet has to be loaded AFTER zenit-ui.css. The style order
+   the README and ng-add prescribe does that (tokens, cdk, zenit-ui, then
+   src/styles.css). Measured: a rule .lg { color: … } placed before zenit-ui.css
+   still loses and the link stays accent-text with an underline on hover; placed
+   after it, it wins. The hover rule weighs (0,2,0), so an application that wants
+   to change the hover needs .lg:hover, not .lg.
+   The price. An application rule at (0,1,1), such as .app a, now also reaches
+   plain links INSIDE library components: panel, alert, row, table, empty state,
+   the sub line of the page header, header, tabs, sidebar, stepper, toast, the
+   body of a dialog, tooltip and menu. It does not reach the footer lists
+   (.z-root .z-footer__list a and .z-footer__base a, both (0,2,1)) and no link
+   that carries a library class, because each of those has an a. counter-rule at
+   (0,2,1) or more: a.z-btn with its five variants and the Minecraft primary,
+   a.z-skip-link, a.z-tab, a.z-side__item, a.z-header__link, a.z-row,
+   a.z-row__link and a.z-game.
+   That counter-rule is the pattern to keep. No anchor the library renders today
+   carries a class without one, which is why lowering the base rule changes
+   nothing here (measured: identical computed color, text-decoration-line and
+   text-decoration-color for all 299 anchors of the demo and all 26 of the
+   example application, in dark, light and contrast). A new directive that hosts
+   on an anchor needs the same: its class rule has to be written .z-root a.z-xyz,
+   not .z-xyz, or an application rule at (0,1,1) will beat it.
+   The underline for links in running text below stays at (0,2,1) and therefore
+   cannot be switched off from an application stylesheet. Its own escape hatch is
+   a:not([class*="z-"]), so any class whose name contains "z-" opts a link out,
+   including by accident ("quiz-link"). That is a side effect of the selector,
+   not a documented API; the documented way to keep the library out of a
+   subtree is .z-legacy above. */
+.z-root :where(a):not(:where(.z-legacy, .z-legacy *)), :where(.z-legacy) .z-root :where(a) { color: var(--accent-text); text-decoration: none; }
+.z-root :where(a):hover:not(:where(.z-legacy, .z-legacy *)), :where(.z-legacy) .z-root :where(a):hover { text-decoration: underline; }
+/* Deviation from the reference: bundle.css underlines a link on hover only. A
+   link inside running text then differs from the words around it by colour
+   alone, and accent-text against text stays below 3:1 in 11 of the 12 scheme
+   and accent combinations (dark/rot reaches 3.27:1), which fails WCAG 1.4.1
+   (axe: link-in-text-block). No colour can fix that in every scheme, so links
+   in running text are underlined at rest.
+   Where: inside the text containers listed below. Not inside nav, .z-header
+   and .z-footer, whose links stand alone and are recognisable by position, and
+   not on a link that carries a library class (z-btn, z-tab, z-row, z-side__item,
+   z-header__link ...), because those style themselves.
+   0.15em: text-underline-offset has no token, and a length relative to the
+   font size is the only kind that fits 12px hints and 16px body alike; it
+   moves the line clear of the descenders of g, j and y. No px literal is added.
+   Weight (0,2,1), the same as .z-root a.z-btn below. */
+.z-root :where(p, li, dd, label, .z-alert__body, .z-faq__body, .z-empty__body, .z-field__hint):not(:where(nav, .z-header, .z-footer) *) a:not([class*="z-"]):not(:where(.z-legacy, .z-legacy *)),
+:where(.z-legacy) .z-root :where(p, li, dd, label, .z-alert__body, .z-faq__body, .z-empty__body, .z-field__hint):not(:where(nav, .z-header, .z-footer) *) a:not([class*="z-"]) {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+/* Deviation from the reference: a link in the text of an alert takes text, not
+   accent-text. On the tints of the four statuses accent-text misses 4.5:1 in
+   the normative dark scheme (measured with tools/check-theme-contrast.mjs:
+   info and warning over surface 4.38 and 4.37, all four over surface-raised
+   4.04 to 4.23); text reaches 12.36 or more in every scheme and accent. The
+   running-text underline above stays, so the link is told apart from the
+   text-muted body by colour and line, and the alert's one button is not red
+   either. The same weight and the same .z-legacy exemption as the link rule
+   it overrides, so an application class on the link still wins. */
+.z-root :where(.z-alert__body a):not(:where(.z-legacy, .z-legacy *)), :where(.z-legacy) .z-root :where(.z-alert__body a) { color: var(--text); }
+.z-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.z-muted { color: var(--text-muted); }
+.z-subtle { color: var(--text-subtle); }
+.z-icon { font-size: var(--icon); width: var(--icon); height: var(--icon); overflow: hidden; color: var(--text-muted); flex: none; }
+@media (prefers-reduced-motion: no-preference) {
+  .z-btn, .z-input, .z-select select, .z-row, .z-side__item, .z-tab, .z-game { transition: color 150ms, background-color 150ms, border-color 150ms; }
+}
+/* Button */
+.z-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+  height: var(--control-md); padding: 0 var(--space-4);
+  border: 1px solid transparent; border-radius: var(--radius-md);
+  background: transparent; color: var(--text);
+  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer;
+}
+.z-btn--primary { background: var(--accent); color: var(--on-accent); }
+.z-btn--primary:hover { background: var(--accent-hover); }
+.z-btn--primary .z-icon { color: var(--on-accent); }
+.z-btn--secondary { border-color: var(--border-control); }
+.z-btn--secondary:hover { background: var(--surface-hover); }
+.z-btn--ghost { color: var(--text-muted); }
+.z-btn--ghost:hover { color: var(--text); background: var(--surface-raised); }
+.z-btn--danger { border-color: var(--danger); color: var(--danger); }
+.z-btn--danger:hover { background: var(--danger-subtle); }
+.z-btn--danger .z-icon { color: var(--danger); }
+.z-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); }
+.z-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: 16px; line-height: 24px; }
+.z-btn--icon { width: var(--control-md); padding: 0; }
+.z-btn--icon.z-btn--sm { width: var(--control-sm); }
+.z-btn--block { width: 100%; }
+.z-btn:disabled, .z-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+.z-theme-mc .z-btn--primary { background: var(--mc-accent); color: var(--on-mc); }
+.z-theme-mc .z-btn--primary:hover { background: var(--mc-accent-hover); }
+.z-theme-mc .z-btn--primary .z-icon { color: var(--on-mc); }
+/* Badge */
+.z-badge {
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  height: 20px; padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-raised); color: var(--text-muted);
+  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
+}
+.z-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
+.z-badge--success { background: var(--success-subtle); color: var(--success); }
+.z-badge--warning { background: var(--warning-subtle); color: var(--warning); }
+.z-badge--danger { background: var(--danger-subtle); color: var(--danger); }
+.z-badge--info { background: var(--info-subtle); color: var(--info); }
+/* Field, Input, Select */
+.z-field { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }
+.z-field__label { font-size: 14px; line-height: 20px; font-weight: 600; }
+.z-field__hint { font-size: 12px; line-height: 16px; color: var(--text-subtle); }
+.z-field__error { font-size: 12px; line-height: 16px; color: var(--danger); }
+.z-input, .z-select select {
+  width: 100%; height: var(--control-md); padding: 0 var(--space-3);
+  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
+  background: var(--surface); color: var(--text);
+}
+.z-input::placeholder { color: var(--text-subtle); }
+.z-input:hover, .z-select select:hover { border-color: var(--text-muted); }
+.z-input[aria-invalid="true"] { border-color: var(--danger); }
+.z-input:disabled, .z-select select:disabled { opacity: 0.45; cursor: not-allowed; }
+.z-input--sm, .z-select--sm select { height: var(--control-sm); }
+.z-input-wrap { position: relative; display: block; }
+.z-input-wrap .z-icon { position: absolute; left: var(--space-3); top: 50%; margin-top: -10px; pointer-events: none; }
+.z-input-wrap .z-input { padding-left: 40px; }
+.z-select { position: relative; display: block; }
+.z-select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
+.z-select::after {
+  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
+  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
+  transform: rotate(45deg); pointer-events: none;
+}
+/* Panel */
+.z-panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
+.z-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
+.z-panel__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
+.z-panel__body { padding: var(--space-4); }
+.z-panel__body--flush { padding: 0; }
+/* ---------- Angular hosts and additions of the library ---------- */
+html.z-root, body.z-root { margin: 0; min-height: 100%; }
+.z-root a.z-btn, .z-root a.z-btn:hover { text-decoration: none; }
+/* Gap in the reference: .z-root a (0,1,1) beats .z-btn (0,1,0), so every button
+   written as a link fell back to accent-text. bundle.css closes the gap for
+   --primary and --secondary only; the base button and the ghost and danger
+   variants stayed red. The rule below restores text for the bare a.z-btn and
+   with it for the sizes, which carry no colour of their own (--sm, --lg,
+   --icon, --block).
+   It has to stand first: it and the four variant rules all weigh (0,2,1), so
+   only source order decides. What still wins after it, in this order:
+   --primary (on-accent), --secondary (text), --ghost (text-muted, text on
+   hover), --danger (danger) and, at (0,3,1), the Minecraft primary link
+   .z-root .z-theme-mc a.z-btn--primary (on-mc). The underline is handled one
+   line above, for the resting and the hover state together, so a.z-btn:hover
+   stays free of it in every variant. */
+.z-root a.z-btn { color: var(--text); }
+.z-root a.z-btn--primary { color: var(--on-accent); }
+.z-root a.z-btn--secondary { color: var(--text); }
+.z-root a.z-btn--ghost { color: var(--text-muted); }
+.z-root a.z-btn--ghost:hover { color: var(--text); }
+.z-root a.z-btn--danger { color: var(--danger); }
+.z-root .z-theme-mc a.z-btn--primary { color: var(--on-mc); }
+.z-panel, .z-field, .z-select, .z-input-wrap { display: block; }
+.z-field { display: grid; }
+.z-icon--sm { font-size: 16px; width: 16px; height: 16px; }
+.z-icon { line-height: 1; user-select: none; }
+textarea.z-input { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; }
+.z-input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+/* .z-skip-link shares the technique: it is out of sight until it takes focus,
+   and the block at the end of this file unfolds it again. */
+.z-visually-hidden, .z-skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+/* Spinner */
+.z-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); opacity: 0.8; }
+@media (prefers-reduced-motion: no-preference) {
+  .z-spinner { animation: z-spin 0.7s linear infinite; }
+  @keyframes z-spin { to { transform: rotate(360deg); } }
+}
+/* Layout helpers */
+.z-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
+@media (min-width: 640px) { .z-container { padding-inline: var(--space-5); } }
+.z-stack { display: grid; gap: var(--space-5); }
+.z-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.z-section { padding-block: var(--space-8); border-top: 1px solid var(--border); }
+@media (min-width: 900px) { .z-section { padding-block: var(--space-9); } }
+.z-panel-shell { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 900px) { .z-panel-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); align-items: start; } }
+/* Addition to the reference: the dark colour scheme as the default of the base
+   styles. It tells the engine which palette to use for the parts a page cannot
+   style itself: the popup of a native <select>, the calendar and clock popups
+   and their indicators, the spin buttons of a number field, scrollbars, the
+   caret and autofill. Without it a page that follows the documented minimum
+   (tokens.css plus zenit-ui.css) draws light native UI on the dark ground.
+   tokens.css is compiled from spec/tokens.json and stays byte identical to
+   spec/tokens.css, so the declaration cannot live there; themes/base.css is
+   opt-in and does not reach that minimum either.
+   :where() keeps the rule at specificity (0,0,0), which is what makes it safe
+   in both include orders the repository uses: themes.css before zenit-ui.css
+   (docs/theming.md, beispiel-app) and after it (ui-demo styles.css, where the
+   application stylesheet is loaded last). A bare :root would weigh (0,1,0),
+   the same as [data-theme="light"], and would then beat the light scheme
+   wherever it happened to come later. At (0,0,0) every scheme block wins on
+   specificity alone, in any order.
+   themes/base.css keeps its own declaration: it carries [data-theme="dark"],
+   which this rule cannot cover, for a dark subtree inside a light page. */
+:where(:root) { color-scheme: dark; }
+/* Addition to the reference: click targets at least 40px on mobile (CLAUDE.md, Abstand und Layout). */
+@media (max-width: 640px) {
+  .z-btn--sm { height: var(--control-md); }
+  .z-btn--icon.z-btn--sm { width: var(--control-md); }
+  .z-input--sm, .z-select--sm select { height: var(--control-md); }
+  .z-panel__header a:not(.z-btn) { display: inline-flex; align-items: center; min-height: var(--control-md); }
+}
+/* Addition to the reference: the control border of the secondary button inside
+   an alert. border-control is dimensioned for surface and reaches 3:1 there,
+   but not on a tinted alert. With the markup the Alert README prescribes (a
+   secondary sm button in the alert) the dark scheme measures 2.88 (info), 2.87
+   (warning) and 2.98 (danger) against an alert on bg, and 2.65 to 2.77 against
+   one inside a panel on surface. text-muted is the next token up and clears
+   3:1 on every tint in every scheme, worst case 6.29 (dark, warning on
+   surface); .z-input:hover already uses it as a control border. The neutral
+   alert is opaque surface-raised, where text-muted is guarded at 7:1 already.
+   The rule belongs to the Alert component and would sit in _rueckmeldung.css;
+   that file is being changed elsewhere at the same time, so it lives here.
+   tools/check-theme-contrast.mjs guards the pairs for every scheme x accent. */
+.z-alert .z-btn--secondary { border-color: var(--text-muted); }
+/* Addition to the reference: the skip link, the first tab stop of every page
+   (15-zustaende.md, "Tastatur"). The reference ships no block for it, and an
+   application cannot supply one either: .z-root a (0,1,1) used to beat any
+   application class (0,1,0), which is how the first integration ended up with a
+   red link on the red accent surface at 1.29:1. Both ends are fixed now, the
+   base rule with :where() and this rule at (0,2,1) / (0,3,1), which wins in
+   either direction.
+   Hidden state: the .z-visually-hidden declarations above, so the technique is
+   written once.
+   z-index: the link has to clear everything a page may stack over it, header
+   (100), overlay and scrim (1000) and toast (1100). --z-toast is the highest
+   token tokens.css defines, and a literal above it is not allowed, so it is the
+   top of the documented stacking order. A toast can only tie with it, and the
+   two never meet: the link is visible while it has focus, and focusing it is
+   the first thing that happens on a page.
+   :focus, not :focus, :focus-visible: :focus-visible only ever matches an
+   element that also matches :focus, so the one selector covers the keyboard tab
+   and a focus set from code alike. The global 2px focus ring stays untouched.
+   Colour: text on surface-raised, a pair the contrast gate already measures in
+   all three schemes (14.77:1 light, 16.26:1 dark, 17.85:1 contrast, gated at
+   12:1, tools/check-theme-contrast.mjs). The hover state keeps the
+   colour and drops the underline, so there is no fight with .z-root a:hover. */
+.z-root a.z-skip-link, .z-root a.z-skip-link:hover { color: var(--text); text-decoration: none; }
+.z-root a.z-skip-link:focus {
+  position: fixed; top: var(--space-2); left: var(--space-4); z-index: var(--z-toast);
+  display: inline-flex; align-items: center;
+  width: auto; height: auto; min-height: var(--control-md); margin: 0; padding: 0 var(--space-4);
+  border: 1px solid var(--border-control); border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  clip-path: none;
+}
+/* Addition to the reference: the error frame of a native select. bundle.css
+   styles .z-input[aria-invalid="true"] only, while 15-zustaende.md asks every
+   field in error for a danger border plus the sentence below it, the select
+   included. Same declaration as the input, so both fields read alike. The
+   caller sets aria-invalid on the native <select>, as with input[zInput]. */
+.z-select select[aria-invalid="true"] { border-color: var(--danger); }

package/styles/_konfigurator.css ADDED Viewed

@@ -0,0 +1,216 @@
+/* Package konfigurator: OptionCard, Combobox, Wizard, Config, StickyBar,
+   IncludedList, Disclosure, InputAction, CostChart and the PriceSummary states.
+   The section "Erweiterung 3: Konfigurator" of spec/components/bundle.css
+   stands verbatim, followed by the Angular host rules and the additions. */
+/* OptionCard */
+.z-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
+.z-options--compact { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
+.z-options__legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--space-1); font-size: 14px; line-height: 20px; font-weight: 600; }
+.z-options__legend small { margin-left: var(--space-2); font-size: 12px; font-weight: 400; color: var(--text-subtle); }
+.z-option { position: relative; display: grid; align-content: start; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; min-width: 0; }
+.z-option input { position: absolute; opacity: 0; pointer-events: none; }
+.z-option:hover { border-color: var(--text-muted); }
+.z-option:has(input:checked) { border-color: var(--accent-text); outline: 1px solid var(--accent-text); outline-offset: -2px; background: var(--surface-raised); }
+.z-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
+.z-option:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
+.z-theme-mc .z-option:has(input:checked) { border-color: var(--mc-accent); outline-color: var(--mc-accent); }
+.z-option__title { font-weight: 600; }
+.z-option__desc { font-size: 12px; line-height: 16px; color: var(--text-muted); }
+.z-option__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: var(--text-muted); }
+.z-option__badge { position: absolute; top: calc(-1 * var(--space-3)); right: var(--space-2); background-color: var(--surface-raised); border: 1px solid var(--border); }
+.z-options--compact .z-option { padding: var(--space-2) var(--space-3); text-align: center; justify-items: center; }
+.z-options--compact .z-option__title { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+/* Combobox */
+.z-combo { position: relative; display: block; }
+.z-combo .z-input { padding-right: 36px; }
+.z-combo::after { content: ""; position: absolute; right: 14px; top: 20px; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); pointer-events: none; }
+.z-listbox { display: grid; max-height: 248px; margin-top: var(--space-1); padding: var(--space-1); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
+.z-listbox__group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: 12px; line-height: 16px; color: var(--text-muted); }
+.z-listbox__option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
+.z-listbox__option:hover, .z-listbox__option--active { background: var(--surface-hover); }
+.z-listbox__option[aria-selected="true"] { font-weight: 600; }
+.z-listbox__option small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
+.z-listbox__empty { padding: var(--space-3); color: var(--text-muted); }
+/* Addition to the reference: the waiting row carries a spinner next to its
+   word. A modifier and not the base rule, so the empty row keeps wrapping the
+   way it always did.
+   Documented deviation from CLAUDE.md, "Bewegung": that rule puts a spinner in
+   a button and skeleton rows in a list. A listbox is not that kind of list.
+   Its children have to be options, and a skeleton row is a decorative
+   placeholder with no accessible name, so it would either be an option that
+   says nothing or a node that breaks role="listbox". One locked option with a
+   spinner and the word "Lädt" is the only shape that stays announceable, and
+   the row count is one, not the row count of an answer nobody knows yet. */
+.z-listbox__loading { display: flex; align-items: center; gap: var(--space-2); }
+/* Wizard */
+.z-wizard { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
+.z-wstep { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
+.z-wstep__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
+.z-wstep__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
+.z-wstep__summary { margin-left: auto; color: var(--text-muted); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.z-wstep__edit { flex: none; padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent-text); font-weight: 500; }
+.z-wstep__body { display: grid; gap: var(--space-5); padding: var(--space-2) var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
+.z-wstep__actions { display: flex; justify-content: space-between; gap: var(--space-2); }
+.z-wstep--locked .z-wstep__head { color: var(--text-muted); }
+.z-wstep--locked .z-wstep__title { font-weight: 400; }
+.z-wstep[aria-current="step"] .z-step__num { border-color: var(--text); background: var(--text); color: var(--bg); }
+.z-wstep--done .z-step__num { border-color: transparent; background: var(--surface-hover); color: var(--text); }
+.z-config { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
+@media (min-width: 900px) { .z-config { grid-template-columns: minmax(0, 1fr) 340px; } .z-config__aside { position: sticky; top: calc(var(--header) + var(--space-5)); } }
+/* PriceSummary: Zustände */
+.z-summary__price--pending { color: var(--text-muted); }
+.z-summary__discount dd { color: var(--success); }
+.z-summary__total { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-control); font-weight: 600; }
+.z-summary__total dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+/* StickyBar */
+.z-stickybar { position: sticky; bottom: 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface-raised); }
+.z-stickybar__price { display: grid; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; line-height: 28px; font-weight: 600; }
+.z-stickybar__price small { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-muted); }
+@media (min-width: 900px) { .z-stickybar--mobile { display: none; } }
+/* IncludedList */
+.z-included { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--text-muted); }
+.z-included li { display: flex; align-items: flex-start; gap: var(--space-2); }
+.z-included .z-icon { font-size: 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--success); }
+/* Disclosure */
+.z-disclosure { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+.z-disclosure summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; font-weight: 600; }
+.z-disclosure summary::-webkit-details-marker { display: none; }
+.z-disclosure summary small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
+.z-disclosure summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); }
+.z-disclosure[open] summary::after { content: "\2212"; }
+.z-disclosure__body { display: grid; gap: var(--space-4); padding: var(--space-4); border-top: 1px solid var(--border); }
+/* InputAction */
+.z-input-action { display: flex; gap: var(--space-2); }
+.z-input-action .z-input { flex: 1; min-width: 0; }
+.z-field__success { font-size: 12px; line-height: 16px; color: var(--success); }
+/* CostChart */
+.z-chart { display: grid; gap: var(--space-3); min-width: 0; }
+.z-chart__figures { display: flex; flex-wrap: wrap; gap: var(--space-6); }
+.z-chart__figure { display: grid; }
+.z-chart__figure span { font-size: 12px; line-height: 16px; color: var(--text-muted); }
+.z-chart__figure strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; line-height: 28px; font-weight: 600; }
+.z-chart__plot { position: relative; }
+.z-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
+.z-chart__grid { stroke: var(--border); stroke-width: 1; }
+.z-chart__axis { fill: var(--text-subtle); font-family: var(--font-mono); font-size: 12px; }
+.z-chart__line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.z-chart__cap { stroke: var(--border-control); stroke-width: 1; stroke-dasharray: 4 4; }
+.z-chart__marker { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
+.z-chart__label { fill: var(--text-muted); font-family: var(--font-body); font-size: 12px; }
+.z-chart__cross { stroke: var(--border-control); stroke-width: 1; }
+.z-chart__tip { position: absolute; top: 0; left: 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-overlay); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; }
+.z-chart__tip strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.z-chart__caption { font-size: 12px; line-height: 16px; color: var(--text-muted); }
+/* Angular hosts */
+/* These elements wrap the markup of the reference and would be inline
+   otherwise. z-wizard-step is the <li> of the reference; z-wizard, z-config,
+   z-sticky-bar and z-cost-chart carry the reference class on the host and take
+   their display from it. */
+z-option-group, z-combobox, z-wizard-step, z-included-list, z-disclosure, z-input-action { display: block; }
+/* Addition to the reference: the action row of a step is a slot. A step
+   without actions would otherwise spend the space-5 gap of the body on an
+   empty div, and a step with only "Weiter" would put it on the left, where
+   space-between leaves a single child. */
+.z-wstep__actions:empty { display: none; }
+.z-wstep__actions > :only-child { margin-inline-start: auto; }
+.z-wstep__actions > .z-btn--ghost:only-child { margin-inline: 0 auto; }
+/* Addition to the reference: bundle.css gives .z-combo no width of its own. In
+   a z-field the wrapper is a grid item and stretches, next to a button in
+   .z-input-action it has to fill the row like .z-input does. */
+.z-input-action .z-combo { flex: 1; min-width: 0; }
+/* Addition to the reference: the listbox hangs in a CDK overlay, where the
+   pane has no width. The component measures the field and writes the width
+   onto the pane; the panel takes it over so it never reaches past the field. */
+.z-combo-pane .z-listbox { width: 100%; box-sizing: border-box; }
+/* Addition to the reference: a combobox that is locked reads like every other
+   locked control. bundle.css dims .z-input:disabled but not the chevron of
+   .z-combo::after, which would stay at full strength next to a 45 % field. */
+.z-combo:has(.z-input:disabled)::after { opacity: 0.45; }
+/* Addition to the reference: StickyBar/README.md asks for
+   env(safe-area-inset-bottom) in the padding, which bundle.css does not carry.
+   Only the bottom grows, and only where the device reports an inset. */
+.z-stickybar { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
+/* Addition to the reference: CostChart/preview.html sizes the summary of the
+   "Als Tabelle" disclosure with an inline style (14px/20px, 12px above and
+   below). A library component carries no inline styles, so the same three
+   declarations stand here as a rule. 12px is space-3. */
+.z-chart .z-faq > summary { padding: var(--space-3) 0; font-size: 14px; line-height: 20px; }
+/* Addition to the reference: the plot takes the keyboard as well as the
+   pointer (CostChart/README.md), so it is a tab stop and needs room for the
+   2px ring with its 2px offset. The svg already draws outside its box. */
+.z-chart__plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
+/* Addition to the reference: the summary column is 340px wide at every viewport
+   width, so an alert in it never has room for its button beside the text. It
+   wraps there the way bundle.css lets an alert wrap below 640px; the 32px
+   indent is the icon column, as in the reference rule. */
+.z-summary .z-alert { flex-wrap: wrap; }
+.z-summary .z-alert > .z-btn { flex-basis: 100%; margin-left: 32px; }
+/* Addition to the reference: bundle.css leaves the hidden radio at its natural
+   13px in the corner of the card. The browser scrolls THAT box into view and
+   draws the focus ring around the card, so a focused card can still sit behind
+   the sticky bar (WCAG 2.4.11). Stretched over the card the focused box is the
+   card. It stays invisible (opacity 0 from the reference) and keeps its place
+   in the layer order, so title, description and badge stay readable.
+   bundle.css also takes it out of the pointer flow entirely; it sits inside its
+   own <label>, so a click reaches it either way, while "pointer-events: none"
+   makes an enabled control read as locked to anything that measures it
+   (e2e/a11y-baum.spec.ts does). A locked card keeps the cursor it inherits, so
+   only the enabled ones get their pointer back. */
+.z-option input { inset: 0; width: 100%; height: 100%; margin: 0; }
+.z-option input:enabled { pointer-events: auto; }
+/* Addition to the reference: the stretched radio above is positioned and the
+   texts are not, so the radio paints over them and the mouse selects nothing
+   inside an enabled card. Position the texts and they are back on top; a click
+   on them still reaches the card, because they sit inside its <label>. The
+   badge is left out on purpose: it is already positioned (absolute, above) and
+   "relative" here would take its place away. */
+.z-option > span { position: relative; }
+/* Addition to the reference: a badge sits space-3 above its card and would
+   cover the last pixels of the legend hint at narrow widths, where the first
+   row starts right under it. Only a group that has badges pays for the room. */
+.z-options:has(.z-option__badge) .z-options__legend { margin-bottom: var(--space-3); }
+/* Addition to the reference: a sticky bar that really lies at the bottom edge
+   of the viewport covers what is behind it, so a control focused there would be
+   invisible (WCAG 2.4.11). z-sticky-bar measures itself, marks itself with
+   data-stuck while it sticks AND is displayed, and writes the height of the
+   tallest stuck bar into --z-stickybar; the document adds that to its
+   scroll-padding. It needs no extra room at the end of the page: the bar is
+   sticky inside the flow and already occupies its own height there. A bar that
+   stands in the page instead (a framed demo of the gallery) and a --mobile bar
+   from 900px on cover nothing and are not marked, so the page keeps its
+   padding at 0. */
+.z-root:has(.z-stickybar[data-stuck]) {
+  scroll-padding-bottom: calc(var(--z-stickybar, 0px) + var(--space-4));
+}
+/* Addition to the reference: click targets at least 40px on mobile (CLAUDE.md,
+   Abstand und Layout). A listbox entry measures 36px, a compact option 36px,
+   and "Ändern" is a bare text button of one line height. */
+@media (max-width: 640px) {
+  .z-listbox__option { min-height: var(--control-md); }
+  .z-options--compact .z-option { min-height: var(--control-md); align-content: center; }
+  .z-wstep__edit { min-height: var(--control-md); }
+}