@koobiq/components 21.0.0 → 21.1.0

package/schematics/utils/tag-patterns.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+// RegExp sources the template rewrites of v20-upgrade and v21-upgrade build on. They live here rather than in a
+// `data.ts`: v21-upgrade's `data.ts` imports every area module, so an area that read them from there would get
+// `undefined` under CommonJS.
+/**
+ * One step inside an opening tag: a quoted value is taken whole, so neither `>` nor an attribute-like word inside
+ * it counts.
+ */
+const TAG_BODY = `(?:[^<>"']|"[^"]*"|'[^']*')`;
+/**
+ * The start of an attribute on an opening `<kbq-code-block>` tag that does not bind `name` itself, captured as
+ * `$1` together with a `[` that opens a binding.
+ */
+const codeBlockTagWithout = (name) => String.raw `(<kbq-code-block(?![\w-])(?!${TAG_BODY}*[\s\[]${name}[\]\s=/>])${TAG_BODY}*?\s\[?)`;
+/** An opening `<kbq-code-block>` tag that binds both `first` and `second`. */
+const codeBlockTagWith = (first, second) => String.raw `<kbq-code-block(?![\w-])(?=${TAG_BODY}*[\s\[]${first}[\]\s=/>])(?=${TAG_BODY}*[\s\[]${second}[\]\s=/>])`;
+
+exports.TAG_BODY = TAG_BODY;
+exports.codeBlockTagWith = codeBlockTagWith;
+exports.codeBlockTagWithout = codeBlockTagWithout;

package/schematics/utils/template-ref-access.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+var utils_ast = require('./ast.cjs');
+var utils_signalMembersMigration = require('./signal-members-migration.cjs');
+require('typescript');
+require('./messages.cjs');
+require('./package-config.cjs');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+require('./project-files.cjs');
+require('./typescript.cjs');
+
+/** A compound assignment (`+=`, `??=`, …) or a postfix `++` / `--` at the start of what follows an access. */
+const COMPOUND_WRITE_AFTER = /^\s*(?:\+\+|--|(?:\*\*|>>>|<<|>>|&&|\|\||\?\?|[-+*/%&|^])=(?!=))/;
+/** A prefix `++` / `--` at the end of what precedes an access. */
+const INCREMENT_BEFORE = /(?:\+\+|--)\s*$/;
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/** `<ref>.<member> =`, but not `==` / `===`: the lookbehind matches the one `memberAccessPattern` uses. */
+function assignmentPattern(ref, members) {
+    const names = members.map(escapeRegExp).join('|');
+    return new RegExp(`(?<![\\w$.])(${escapeRegExp(ref)}\\s*\\.\\s*(${names}))\\b(\\s*=(?!=)\\s*)`, 'g');
+}
+/** `<ref>.<member>` in any form, the optional chain included. */
+function anyAccessPattern(ref, members) {
+    return new RegExp(`(?<![\\w$.])${escapeRegExp(ref)}\\s*\\??\\.\\s*(${members.map(escapeRegExp).join('|')})\\b`, 'g');
+}
+/** End of the assigned expression that starts at `from`: the next top-level `;`, or the end of the statement list. */
+function assignedExpressionEnd(template, from, limit) {
+    let depth = 0;
+    let quote;
+    let end = limit;
+    for (let i = from; i < limit && end === limit; i++) {
+        const char = template[i];
+        if (quote) {
+            if (char === '\\')
+                i++;
+            else if (char === quote)
+                quote = undefined;
+        }
+        else if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+        }
+        else if ('([{'.includes(char)) {
+            depth++;
+        }
+        else if (')]}'.includes(char)) {
+            if (depth === 0)
+                end = i;
+            else
+                depth--;
+        }
+        else if (char === ';' && depth === 0) {
+            end = i;
+        }
+    }
+    while (end > from && /\s/.test(template[end - 1]))
+        end--;
+    return end;
+}
+/**
+ * Rewrites reads and writes of the members reachable through the refs in `template`, whose HTML AST is
+ * `rootNodes`. `policyOf` tells what a `#ref` on an element is bound to, or `undefined` when it is not one of
+ * the migrated types.
+ */
+function rewriteRefAccesses(template, rootNodes, policyOf) {
+    const scanner = new utils_signalMembersMigration.TemplateScanner(template, policyOf);
+    const result = {
+        content: template,
+        readOnlyWrites: new Set(),
+        compoundWrites: new Set(),
+        reported: new Set()
+    };
+    const writeEdits = [];
+    const readEdits = [];
+    // The end of each access already handled: a ref redeclared in a nested view reaches it twice.
+    const seen = new Set();
+    utils_ast.visitAll(scanner, rootNodes);
+    const rewriteWrites = (expression, name, policy) => {
+        const source = template.slice(expression.start, expression.end);
+        for (const match of source.matchAll(assignmentPattern(name, policy.members))) {
+            const [, target, member, operator] = match;
+            const targetEnd = expression.start + match.index + target.length;
+            if (seen.has(targetEnd))
+                continue;
+            seen.add(targetEnd);
+            if (!policy.writable.has(member)) {
+                result.readOnlyWrites.add(member);
+                continue;
+            }
+            // Outside a statement an assignment is no valid template to begin with.
+            if (expression.kind !== 'statement')
+                continue;
+            const valueStart = targetEnd + operator.length;
+            const valueEnd = assignedExpressionEnd(template, valueStart, expression.end);
+            if (valueEnd === valueStart)
+                continue;
+            writeEdits.push({ start: targetEnd, end: valueStart, text: '.set(' });
+            writeEdits.push({ start: valueEnd, end: valueEnd, text: ')' });
+        }
+    };
+    const rewriteReads = (expression, name, policy) => {
+        const source = template.slice(expression.start, expression.end);
+        for (const match of source.matchAll(utils_signalMembersMigration.memberAccessPattern(name, policy.members))) {
+            const start = expression.start + match.index;
+            const end = start + match[0].length;
+            const member = match[2];
+            if (seen.has(end))
+                continue;
+            seen.add(end);
+            // `(click)="ref.value += 1"`, `ref.value++`, `--ref.value`: a call there is no valid template.
+            if (expression.kind === 'statement' &&
+                (COMPOUND_WRITE_AFTER.test(template.slice(end, expression.end)) ||
+                    INCREMENT_BEFORE.test(template.slice(expression.start, start)))) {
+                (policy.writable.has(member) ? result.compoundWrites : result.readOnlyWrites).add(member);
+                continue;
+            }
+            // `[(ngModel)]="ref.value"` writes through the binding: a writable signal fills it as it is.
+            if (expression.kind === 'twoWay' &&
+                !template.slice(expression.start, start).trim() &&
+                !template.slice(end, expression.end).trim()) {
+                if (!policy.writable.has(member))
+                    result.readOnlyWrites.add(member);
+                continue;
+            }
+            readEdits.push({ start: end, end, text: '()' });
+        }
+    };
+    for (const { name, type: policy, ...view } of scanner.unambiguousRefs()) {
+        for (const expression of scanner.expressions) {
+            if (expression.start < view.start || expression.end > view.end)
+                continue;
+            if (policy.members.length > 0) {
+                rewriteWrites(expression, name, policy);
+                rewriteReads(expression, name, policy);
+            }
+            if (policy.reported?.length) {
+                const source = template.slice(expression.start, expression.end);
+                for (const [, member] of source.matchAll(anyAccessPattern(name, policy.reported))) {
+                    result.reported.add(member);
+                }
+            }
+        }
+    }
+    // Applied right to left. The sort is stable, so where a read ends an assigned value, the `)` closing
+    // `.set(` goes in first and the read's `()` lands in front of it.
+    const edits = [...writeEdits, ...readEdits].sort((a, b) => b.start - a.start || b.end - a.end);
+    for (const { start, end, text } of edits) {
+        result.content = result.content.slice(0, start) + text + result.content.slice(end);
+    }
+    return result;
+}
+
+exports.rewriteRefAccesses = rewriteRefAccesses;

package/schematics/utils/{typescript.js → typescript.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var ts = require('typescript');
-var utils_ast = require('./ast.js');
+var utils_ast = require('./ast.cjs');
 
 const LEADING_TRIVIA_CHARS = [' ', '\n', '\r', '\t'];
 function forEachClass(sourceFile, callback) {

package/schematics/utils/warn-only-migration.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var utils_messages = require('./messages.cjs');
+var utils_packageConfig = require('./package-config.cjs');
+var utils_projectFiles = require('./project-files.cjs');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+/**
+ * Builds the rule of a migration that only reports: every `.ts` file of the project that matches a pattern is
+ * logged with its message, then the summary. Never writes.
+ *
+ * The patterns are compiled once here rather than per file. None carries the `g` flag, so a shared instance
+ * holds no `lastIndex`.
+ */
+function warnOnlyRule(config, options) {
+    const { label, summary } = config;
+    const warnPatterns = config.warnPatterns.map(({ anchor, pattern, message }) => ({
+        anchor: anchor ? new RegExp(anchor) : null,
+        pattern: new RegExp(pattern),
+        message
+    }));
+    return async (tree, context) => {
+        const projectDefinition = await utils_packageConfig.setupOptions(options.project, tree);
+        const root = projectDefinition?.root ?? '';
+        let reported = 0;
+        utils_projectFiles.visitProjectFiles(root ? tree.getDir(root) : tree.root, (filePath, entry) => {
+            if (!filePath.endsWith('.ts'))
+                return;
+            const content = entry.content.toString();
+            if (!content)
+                return;
+            for (const { anchor, pattern, message } of warnPatterns) {
+                if (anchor && !anchor.test(content))
+                    continue;
+                if (!pattern.test(content))
+                    continue;
+                reported++;
+                utils_messages.logMessage(context.logger, [`${label} ${filePath}`, `  ${message}`]);
+            }
+        });
+        // Nothing here is affected, so the summary would only be noise.
+        if (reported === 0)
+            return;
+        utils_messages.logMessage(context.logger, [
+            `${label} processed "${root || '<workspace root>'}", ${reported} use(s) reported.`,
+            ...summary
+        ]);
+    };
+}
+
+exports.warnOnlyRule = warnOnlyRule;

package/schematics/utils/workspace-styles.cjs

@@ -0,0 +1,123 @@
+'use strict';
+
+/**
+ * Whether `project` is an application (as opposed to a library) — the same check
+ * `@schematics/angular` itself uses (see `utility/workspace.js`'s `createDefaultPath`), rather than
+ * an allowlist of builder names. A project can sit on any builder — a custom webpack wrapper, an Nx
+ * executor, one this schematic has never heard of — and still be a perfectly good application; only
+ * `projectType` reliably says so.
+ */
+function isApplicationProject(project) {
+    return project.extensions['projectType'] === 'application';
+}
+const KOOBIQ_STATIC_STYLE_ENTRIES = [
+    'node_modules/@koobiq/icons/fonts/kbq-icons.css',
+    'node_modules/@koobiq/design-tokens/web/css-tokens.css',
+    'node_modules/@koobiq/components/prebuilt-themes/theme.css'
+];
+const THEME_TOKENS_PATTERN = /^node_modules\/@koobiq\/design-tokens\/web\/css-tokens-(light|dark)\.css$/;
+/**
+ * The style entries documented in the installation guide, in the order they must be loaded.
+ * `'auto'` includes both token files, since `KbqThemeService` switches between them at runtime —
+ * a static `'light'`/`'dark'` choice only needs its own.
+ *
+ * `@koobiq/design-tokens` ships code-block, scrollbar and skeleton's tokens as opt-in
+ * `component-tokens*.css` files, but `prebuilt-themes/theme.css` already carries their values,
+ * baked in at `@koobiq/components`' own build time — nothing extra to wire here for them.
+ */
+function getKoobiqStyleEntries(theme) {
+    const [icons, tokens, prebuiltTheme] = KOOBIQ_STATIC_STYLE_ENTRIES;
+    const themeTokens = theme === 'auto' ? [
+        'node_modules/@koobiq/design-tokens/web/css-tokens-light.css',
+        'node_modules/@koobiq/design-tokens/web/css-tokens-dark.css'
+    ] : [`node_modules/@koobiq/design-tokens/web/css-tokens-${theme}.css`];
+    return [icons, tokens, ...themeTokens, prebuiltTheme];
+}
+/**
+ * Prepends the Koobiq style entries ahead of whatever is already in `existingStyles`, matching the
+ * order documented in installation.md, where the app's own stylesheet comes last. Re-running with
+ * the same theme is a no-op; re-running with a different theme swaps the `css-tokens-*.css`
+ * entries instead of accumulating duplicates. Non-string entries (style-budget objects) and any
+ * unrelated entries are preserved, untouched, in their original order.
+ */
+function mergeKoobiqStyles(existingStyles, theme) {
+    const desired = getKoobiqStyleEntries(theme);
+    const rest = existingStyles.filter((entry) => {
+        if (typeof entry !== 'string')
+            return true;
+        return (!desired.includes(entry) &&
+            !KOOBIQ_STATIC_STYLE_ENTRIES.includes(entry) &&
+            !THEME_TOKENS_PATTERN.test(entry));
+    });
+    return [...desired, ...rest];
+}
+/**
+ * Resolves the workspace-root-relative path of a project's index.html, mirroring the
+ * `@angular/build:application` builder's own default (`<sourceRoot>/index.html`) when the
+ * `index` option isn't set explicitly. `buildTarget` is `undefined` for a project with no `build`
+ * target at all, in which case the default is the only option available.
+ */
+function getIndexHtmlPath(project, buildTarget) {
+    const indexOption = buildTarget?.options?.index;
+    if (typeof indexOption === 'string') {
+        return indexOption;
+    }
+    if (indexOption && typeof indexOption === 'object' && !Array.isArray(indexOption)) {
+        const input = indexOption.input;
+        if (typeof input === 'string') {
+            return input;
+        }
+    }
+    const sourceRoot = project.sourceRoot ?? `${project.root}/src`;
+    return `${sourceRoot}/index.html`;
+}
+/**
+ * Whether a `build` target's `server`/`ssr` options indicate the project renders on the server —
+ * `KbqThemeCookieStore` matters there, where `KbqThemeLocalStorageStore`'s default doesn't reach
+ * the server render.
+ */
+function isSsrBuildTarget(buildTarget) {
+    const { server, ssr } = buildTarget.options ?? {};
+    return Boolean((typeof server === 'string' && server) || ssr === true || (ssr && typeof ssr === 'object'));
+}
+/**
+ * Mutates `workspace` in place: for every application project (optionally scoped to
+ * `projectName`), merges the Koobiq style entries for `theme` into its `build` target's `styles`
+ * array, when it has one. Returns per-project wiring info the caller uses to edit index.html and
+ * the project's bootstrap file afterward — for every application project, regardless of whether it
+ * had a `build` target to wire styles into, since the bootstrap file (and thus the theme providers)
+ * is resolved independently of it.
+ *
+ * Only the target literally named `build` is touched — not `test` (Karma) or `serve` — keeping the
+ * change's blast radius minimal.
+ */
+function applyKoobiqWorkspaceStyles(workspace, theme, projectName) {
+    const wired = [];
+    for (const [name, project] of workspace.projects) {
+        if (projectName && name !== projectName)
+            continue;
+        if (!isApplicationProject(project))
+            continue;
+        const buildTarget = project.targets.get('build');
+        let stylesWired = false;
+        if (buildTarget) {
+            const options = buildTarget.options ?? (buildTarget.options = {});
+            const existingStyles = Array.isArray(options.styles) ? options.styles : [];
+            options.styles = mergeKoobiqStyles(existingStyles, theme);
+            stylesWired = true;
+        }
+        wired.push({
+            projectName: name,
+            projectRoot: project.root,
+            indexHtmlPath: getIndexHtmlPath(project, buildTarget),
+            isSsr: buildTarget ? isSsrBuildTarget(buildTarget) : false,
+            stylesWired
+        });
+    }
+    return wired;
+}
+
+exports.applyKoobiqWorkspaceStyles = applyKoobiqWorkspaceStyles;
+exports.getIndexHtmlPath = getIndexHtmlPath;
+exports.getKoobiqStyleEntries = getKoobiqStyleEntries;
+exports.mergeKoobiqStyles = mergeKoobiqStyles;

package/select/select.scss

@@ -29,6 +29,13 @@
     }
 }
 
+.kbq-select__panel_multiline {
+    .kbq-option-text {
+        white-space: normal;
+        overflow-wrap: break-word;
+    }
+}
+
 .kbq-select__content {
     @extend %kbq-select-content;
 

package/tabs/_tabs-common.scss

@@ -262,6 +262,29 @@
                 transparent calc(100% - var(--mask-size))
             );
         }
+
+        .kbq-tab-group_vertical & {
+            --mask-size: var(--kbq-size-3xl);
+        }
+
+        .kbq-tab-group_vertical &.kbq-tab-header__scroll-container_overflow-before {
+            mask-image: linear-gradient(to bottom, transparent, #000 var(--mask-size));
+        }
+
+        .kbq-tab-group_vertical &.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mask-size)), transparent);
+        }
+
+        .kbq-tab-group_vertical
+            &.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to bottom,
+                transparent,
+                #000 var(--mask-size),
+                #000 calc(100% - var(--mask-size)),
+                transparent
+            );
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {

package/textarea/textarea-tokens.scss

@@ -1,5 +1,8 @@
 :where(.kbq-textarea) {
-    --kbq-textarea-size-min-height: 64px;
+    --kbq-textarea-size-min-rows: 3;
+    --kbq-textarea-size-min-height: calc(
+        var(--kbq-textarea-size-min-rows) * 1lh + 2 * var(--kbq-textarea-size-padding-vertical)
+    );
     --kbq-textarea-size-max-height: 96px;
     --kbq-textarea-size-padding-vertical: 5px;
     --kbq-textarea-size-padding-horizontal: 11px;

package/toast/toast.component.scss

@@ -121,6 +121,7 @@
 
 .kbq-toast__actions {
     display: flex;
+    flex-wrap: wrap;
 
     padding-top: var(--kbq-toast-size-button-stack-padding-top);
 

package/toggle/_toggle-theme.scss

@@ -73,10 +73,6 @@
 
         &.kbq-disabled {
             color: var(--kbq-states-foreground-disabled);
-
-            .kbq-hint .kbq-hint__text {
-                color: inherit;
-            }
         }
 
         .kbq-toggle-bar {
@@ -84,28 +80,15 @@
                 background: var(--kbq-icon-white);
             }
         }
-
-        // A projected `kbq-error` is a hint too, and keeps its own color. `:where` leaves the specificity as it was.
-        .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text {
-            color: var(--kbq-foreground-contrast-secondary);
-        }
     }
 }
 
 @mixin kbq-toggle-typography() {
     .kbq-toggle:not(.kbq-toggle_big) {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
-
-        & .kbq-hint .kbq-hint__text {
-            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
-        }
     }
 
     .kbq-toggle.kbq-toggle_big {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
-
-        & .kbq-hint .kbq-hint__text {
-            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
-        }
     }
 }

package/tooltip/tooltip.scss

@@ -109,7 +109,7 @@ $navbar-trigger-margin: $trigger-margin + 1px;
     width: var(--kbq-tooltip-size-arrow-size);
     height: var(--kbq-tooltip-size-arrow-size);
 
-    transform: rotate(45deg);
+    transform: translate(var(--kbq-tooltip-arrow-shift-x, 0px), var(--kbq-tooltip-arrow-shift-y, 0px)) rotate(45deg);
 
     z-index: -1;
 }

package/top-bar/top-bar-tokens.scss

@@ -14,6 +14,7 @@
     --kbq-top-bar-padding-vertical: var(--kbq-size-m);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
+    --kbq-top-bar-title-height: var(--kbq-size-3xl);
     --kbq-top-bar-container-start-gap: 0;
     --kbq-top-bar-container-start-min-width: 0;
     --kbq-top-bar-container-end-gap: var(--kbq-size-s);

package/top-bar/top-bar.scss

@@ -47,6 +47,16 @@
         flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
+    .kbq-top-bar-title {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
+
+        // The line box of a `size="big"` breadcrumb item: the same height, and the same baseline, so a
+        // page that swaps the trail for a title moves nothing. A minimum, not a fixed height: a title
+        // long enough to wrap has to grow the bar rather than paint over its edge.
+        min-block-size: var(--kbq-top-bar-title-height);
+        line-height: var(--kbq-top-bar-title-height);
+    }
+
     .kbq-top-bar-container {
         // Must match the host set of the ruleset immediately below: the negative margin compensates the
         // padding that mixin adds, so a container the mixin skips must not get the compensation either.

package/types/koobiq-components-accordion.d.ts

@@ -6,6 +6,7 @@ import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { Subject } from 'rxjs';
 import * as i1$1 from '@koobiq/components/icon';
 import { KbqIcon } from '@koobiq/components/icon';
+import * as _koobiq_components_accordion from '@koobiq/components/accordion';
 import * as i1 from '@koobiq/components/core';
 
 declare class KbqAccordionTriggerDirective {
@@ -15,6 +16,18 @@ declare class KbqAccordionTriggerDirective {
     protected readonly accordion: KbqAccordion;
     /** @docs-private */
     protected readonly item: KbqAccordionItem;
+    /**
+     * Value of `aria-expanded`.
+     *
+     * @docs-private
+     */
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    /**
+     * Value of `data-state`.
+     *
+     * @docs-private
+     */
+    protected readonly dataState: _angular_core.Signal<_koobiq_components_accordion.KbqAccordionItemState>;
     /** @docs-private */
     get triggerId(): string;
     /** @docs-private */
@@ -344,6 +357,12 @@ declare class KbqAccordionContentDirective implements OnInit, DoCheck, AfterView
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
     protected readonly item: KbqAccordionItem;
+    /**
+     * Value of `data-state`.
+     *
+     * @docs-private
+     */
+    protected readonly dataState: _angular_core.Signal<_koobiq_components_accordion.KbqAccordionItemState>;
     /** @docs-private */
     get contentId(): string;
     /** @docs-private */
@@ -397,6 +416,12 @@ declare class KbqAccordionHeader {
     protected readonly item: KbqAccordionItem;
     /** @docs-private */
     protected readonly accordion: KbqAccordion;
+    /**
+     * Value of `data-state`.
+     *
+     * @docs-private
+     */
+    protected readonly dataState: _angular_core.Signal<_koobiq_components_accordion.KbqAccordionItemState>;
     /**
      * Names the heading after the trigger alone.
      *

package/types/koobiq-components-button-toggle.d.ts

@@ -180,6 +180,12 @@ declare class KbqButtonToggleGroup implements OnChanges, ControlValueAccessor, O
     syncButtonToggle(toggle: KbqButtonToggle, select: boolean, isUserInput?: boolean): void;
     /** Body of `syncButtonToggle()`. */
     private applyToggleSelection;
+    /**
+     * Reports the new value of a selected toggle, which changes the value of the group, as an interaction would.
+     *
+     * @docs-private
+     */
+    followToggleValue(toggle: KbqButtonToggle, previous: KbqButtonToggle['value']): void;
     /** Checks whether a button toggle is selected. */
     isSelected(toggle: KbqButtonToggle): boolean;
     /** Determines whether a button toggle should be checked on init, from the value waiting for it. */

package/types/koobiq-components-checkbox.d.ts

@@ -59,8 +59,38 @@ declare class KbqCheckbox extends KbqColorDirective implements OnChanges, DoChec
     protected readonly inputId: _angular_core.Signal<string>;
     /** Error text projected into the checkbox. */
     private readonly error;
+    /**
+     * Whether the projected `kbq-error` is shown. Without one, nothing is rendered under the label.
+     *
+     * @docs-private
+     */
+    protected readonly showError: _angular_core.Signal<boolean>;
+    /**
+     * Id of the element wrapping the projected `kbq-error`.
+     *
+     * @docs-private
+     */
+    protected readonly errorId: _angular_core.Signal<string>;
+    /**
+     * Id of the label text, which alone names the native input.
+     *
+     * @docs-private
+     */
+    protected readonly labelId: _angular_core.Signal<string>;
     /** Hints projected into the checkbox. */
     private readonly hints;
+    /**
+     * Value of `aria-describedby` of the native input: the error, while it is shown, and the hints.
+     *
+     * @docs-private
+     */
+    protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
+    /**
+     * Value of `aria-invalid` of the native input: set whenever the checkbox is painted as invalid.
+     *
+     * @docs-private
+     */
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /** Whether the checkbox is required. */
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** @docs-private */