@koobiq/components 20.4.1 → 21.0.0

package/fesm2022/koobiq-components-username.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-username.mjs","sources":["../../../packages/components/username/types.ts","../../../packages/components/username/constants.ts","../../../packages/components/username/username.pipe.ts","../../../packages/components/username/username.ts","../../../packages/components/username/username.html","../../../packages/components/username/module.ts","../../../packages/components/username/koobiq-components-username.ts"],"sourcesContent":["/**\n * Keys for formatting username parts in short (initial) or full form.\n */\nexport enum KbqUsernameFormatKey {\n    /**\n     * Short form of the first name (e.g., \"John\" → \"J\")\n     */\n    FirstNameShort = 'f',\n\n    /**\n     * Full form of the first name (e.g., \"John\")\n     */\n    FirstNameFull = 'F',\n\n    /**\n     * Short form of the middle name (e.g., \"Henry\" → \"H\")\n     */\n    MiddleNameShort = 'm',\n\n    /**\n     * Full form of the middle name (e.g., \"Henry\")\n     */\n    MiddleNameFull = 'M',\n\n    /**\n     * Short form of the last name (e.g., \"Doe\" → \"D\")\n     */\n    LastNameShort = 'l',\n\n    /**\n     * Full form of the last name (e.g., \"Doe\")\n     */\n    LastNameFull = 'L',\n    Dot = '.'\n}\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n */\nexport type KbqFormatKeyToProfileMapping<T = any> = {\n    [\n        key in Exclude<\n            KbqUsernameFormatKey,\n            KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull\n        >\n    ]: keyof T | undefined;\n};\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n * @see KbqUsernameCustomPipe\n */\nexport type KbqFormatKeyToProfileMappingExtended<T = any> = {\n    [key in KbqUsernameFormatKey]: keyof T | undefined;\n};\n\n/**\n * Layout mode for displaying a username and applying text-ellipsis.\n *\n * - `stacked`: Elements shown vertically.\n * - `inline`: Elements shown in one line. Text ellipsis is applied to both parts.\n * - `text`: Plain text, no layout styling. No text-ellipsis.\n */\nexport type KbqUsernameMode = 'stacked' | 'inline' | 'text';\n\n/**\n * Visual style of the username.\n *\n * - `default`: standard styling with primary and secondary colors.\n * - `error`: error colors (e.g., red).\n * - `accented`: no color theming; emphasizes via typography only.\n * - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.\n */\nexport type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';\n","import { InjectionToken } from '@angular/core';\nimport { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUsernameFormatKey } from './types';\n\n/** Default name format: Last name full, first and middle as initials. */\nexport const kbqDefaultFullNameFormatCustom = 'L f. m.';\n/** Default name format: Last name full, first and middle as initials. */\nexport const kbqDefaultFullNameFormat = 'lf.m.';\n\n/**\n * Throws an error when no profile field mapping is provided to the username pipe.\n * @docs-private\n */\nexport function KbqMappingMissingError() {\n    return new Error('KbqUsernamePipe: profile field mapping is required but was not provided.');\n}\n\n/**\n * Injection token for providing a global username format-to-profile mapping.\n */\nexport const KBQ_PROFILE_MAPPING = new InjectionToken<\n    KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended\n>('KBQ_PROFILE_MAPPING', {\n    factory: () =>\n        ({\n            [KbqUsernameFormatKey.FirstNameShort]: 'firstName',\n            [KbqUsernameFormatKey.MiddleNameShort]: 'middleName',\n            [KbqUsernameFormatKey.LastNameShort]: 'lastName',\n            [KbqUsernameFormatKey.Dot]: undefined\n        }) satisfies KbqFormatKeyToProfileMapping<{ firstName: string; middleName: string; lastName: string }>\n});\n","import { inject, Injectable, Pipe, PipeTransform } from '@angular/core';\nimport {\n    KBQ_PROFILE_MAPPING,\n    kbqDefaultFullNameFormat,\n    kbqDefaultFullNameFormatCustom,\n    KbqMappingMissingError\n} from './constants';\nimport { KbqFormatKeyToProfileMapping, KbqFormatKeyToProfileMappingExtended, KbqUsernameFormatKey } from './types';\nimport { KbqUserInfo } from './username';\n\n@Injectable({ providedIn: 'root' })\n@Pipe({\n    name: 'kbqUsername',\n    pure: true\n})\nexport class KbqUsernamePipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(profile: T, format = kbqDefaultFullNameFormat, customMapping?: KbqFormatKeyToProfileMapping): string {\n        const resolvedMapping = customMapping || this.mapping;\n\n        if (!resolvedMapping) {\n            throw KbqMappingMissingError();\n        }\n\n        if (!profile || typeof profile !== 'object') return '';\n\n        let result = '';\n\n        const formatUnits = format.split('');\n\n        formatUnits.forEach((letter: KbqUsernameFormatKey | string, index: number, array) => {\n            if (letter !== KbqUsernameFormatKey.Dot) {\n                const field: keyof T = resolvedMapping[letter];\n                const fieldValue = profile[field];\n\n                if (fieldValue) {\n                    const isShort = array[index + 1] === KbqUsernameFormatKey.Dot;\n                    const resolvedFieldValue = isShort ? `${fieldValue[0]}${KbqUsernameFormatKey.Dot}` : fieldValue;\n\n                    result += ` ${resolvedFieldValue}`;\n                }\n            }\n        });\n\n        return result.trim();\n    }\n}\n\n/**\n * Pipe to format a user profile into a name string using a format pattern and field mapping.\n * Lowercase keys output initials; uppercase keys show full values.\n */\n@Injectable({ providedIn: 'root' })\n@Pipe({\n    name: 'kbqUsernameCustom',\n    pure: true\n})\nexport class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING, { optional: true });\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(\n        profile: T,\n        format = kbqDefaultFullNameFormatCustom,\n        customMapping?: KbqFormatKeyToProfileMappingExtended<T>\n    ): string {\n        const resolvedMapping = customMapping || this.mapping;\n\n        if (!resolvedMapping) {\n            throw KbqMappingMissingError();\n        }\n\n        if (!profile || typeof profile !== 'object') return '';\n\n        let result = '';\n\n        const formatUnits = format.split('');\n\n        formatUnits.forEach((letter: KbqUsernameFormatKey | string) => {\n            const field: keyof T | undefined = resolvedMapping[letter];\n\n            if (!field) {\n                result += letter;\n\n                return;\n            }\n\n            const isShort = letter === letter.toLowerCase();\n            const fieldValue = profile[field] || '';\n\n            result += fieldValue && isShort ? fieldValue[0] : fieldValue;\n        });\n\n        return result.trim();\n    }\n}\n\nexport interface KbqUsernameTextOptions {\n    /** Formats the login segment. Defaults to identity. */\n    formatLogin?: (login: string) => string;\n    /**\n     * Formats the site segment.\n     * Defaults to wrapping in parentheses, matching kbq-username display.\n     */\n    formatSite?: (site: string) => string;\n}\n\n/**\n * Builds a full username string from a pre-formatted name plus optional login and site,\n * mirroring the text rendered by `kbq-username`.\n *\n * Provide custom `formatLogin` / `formatSite` to tailor the output.\n */\nexport function kbqBuildUsernameText(\n    data: { name: string } & Partial<Pick<KbqUserInfo, 'login' | 'site'>>,\n    options?: KbqUsernameTextOptions\n): string {\n    const formatLogin = options?.formatLogin ?? ((login) => login);\n    const formatSite = options?.formatSite ?? ((site) => `(${site})`);\n\n    return [data.name, data.login && formatLogin(data.login), data.site && formatSite(data.site)]\n        .filter(Boolean)\n        .join(' ');\n}\n","import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    input,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqTitleModule } from '@koobiq/components/title';\nimport { kbqDefaultFullNameFormat } from './constants';\nimport { KbqUsernameMode, KbqUsernameStyle } from './types';\nimport { KbqUsernamePipe } from './username.pipe';\n\nconst baseClass = 'kbq-username';\n\n/**\n * Basic user info\n * @docs-private\n */\nexport type KbqUserInfo = {\n    firstName?: string;\n    lastName?: string;\n    middleName?: string;\n    login?: string;\n    site?: string;\n};\n\n/** Styles the primary part of the username (e.g. full name). */\n@Directive({\n    selector: '[kbqUsernamePrimary]',\n    host: {\n        class: `${baseClass}__primary`\n    },\n    exportAs: 'kbqUsernamePrimary'\n})\nexport class KbqUsernamePrimary {}\n\n/** Styles the secondary part. */\n@Directive({\n    selector: '[kbqUsernameSecondary]',\n    host: {\n        class: `${baseClass}__secondary`\n    },\n    exportAs: 'kbqUsernameSecondary'\n})\nexport class KbqUsernameSecondary {}\n\n/** Styles a secondary hint. */\n@Directive({\n    selector: '[kbqUsernameSecondaryHint]',\n    host: {\n        class: `${baseClass}__secondary-hint`\n    },\n    exportAs: 'kbqUsernameSecondaryHint'\n})\nexport class KbqUsernameSecondaryHint {}\n\n/** Custom content for `KbqUsername`, overrides default view. */\n@Directive({\n    selector: 'kbq-username-custom-view, [kbq-username-custom-view]',\n    host: {\n        class: `${baseClass}__custom-view`\n    },\n    exportAs: 'kbqUsernameCustomView'\n})\nexport class KbqUsernameCustomView {}\n\n/**\n * Displays a user's name based on profile data.\n * Supports different display modes and visual styles.\n * A custom view can be provided via `<kbq-username-custom-view>` for full control over the output.\n * Accepts input profile data and optional formatting options.\n */\n@Component({\n    selector: 'kbq-username',\n    imports: [\n        KbqTitleModule,\n        KbqUsernamePipe,\n        KbqUsernamePrimary,\n        KbqUsernameSecondary,\n        KbqUsernameSecondaryHint\n    ],\n    templateUrl: './username.html',\n    styleUrls: ['./username.scss', './username-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: baseClass,\n        '[class]': 'class()'\n    },\n    exportAs: 'kbqUsername'\n})\nexport class KbqUsername {\n    /** User profile data used for display. */\n    readonly userInfo = input<KbqUserInfo>();\n    /** Enables compact display mode */\n    readonly isCompact = input(false, { transform: booleanAttribute });\n    /** Format string for rendering the user's full name. */\n    readonly fullNameFormat = input<string>(kbqDefaultFullNameFormat);\n    /**\n     * Display mode of the username.\n     * @default inline\n     */\n    readonly mode = input<KbqUsernameMode>('inline');\n    /**\n     * Visual style of the username.\n     * @default default\n     */\n    readonly type = input<KbqUsernameStyle>('default');\n    /**\n     * Custom projected view for username rendering.\n     * @docs-private\n     */\n    protected readonly customView = contentChild(KbqUsernameCustomView);\n\n    /** @docs-private */\n    protected readonly hasFullName = computed(() => {\n        const userInfo = this.userInfo();\n\n        if (!userInfo) return false;\n\n        return userInfo?.lastName && userInfo?.firstName;\n    });\n\n    /** @docs-private */\n    protected readonly class = computed(() => {\n        return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');\n    });\n}\n","@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @let fullName = profile | kbqUsername: fullNameFormat();\n\n    @if (!isCompact()) {\n        @if (hasFullName()) {\n            <span kbq-title kbqUsernamePrimary>{{ fullName }}</span>\n        }\n\n        @if (profile.login) {\n            <span kbq-title kbqUsernameSecondary>\n                {{ profile.login }}\n\n                @if (profile.site) {\n                    <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                }\n            </span>\n        }\n    } @else {\n        <span kbq-title kbqUsernamePrimary>\n            @if (hasFullName()) {\n                <span>{{ fullName }}</span>\n            }\n            @if (!hasFullName() && profile.login) {\n                {{ profile.login }}\n            }\n\n            @if (profile.site) {\n                <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n            }\n        </span>\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { KbqUsername, KbqUsernameCustomView, KbqUsernamePrimary, KbqUsernameSecondary } from './username';\nimport { KbqUsernameCustomPipe, KbqUsernamePipe } from './username.pipe';\n\nconst COMPONENTS = [\n    KbqUsername,\n    KbqUsernameCustomView,\n    KbqUsernamePrimary,\n    KbqUsernameSecondary,\n    KbqUsernameCustomPipe,\n    KbqUsernamePipe\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqUsernameModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-username.mjs","sources":["../../../packages/components/username/types.ts","../../../packages/components/username/constants.ts","../../../packages/components/username/username.pipe.ts","../../../packages/components/username/username.ts","../../../packages/components/username/username.html","../../../packages/components/username/module.ts","../../../packages/components/username/koobiq-components-username.ts"],"sourcesContent":["/**\n * Keys naming the profile field a format character stands for.\n *\n * The key identifies the *field* only. Whether it renders in full or as an initial is decided by the\n * pipe that reads the format: `KbqUsernamePipe` abbreviates a key that is followed by {@link Dot},\n * `KbqUsernameCustomPipe` abbreviates the lowercase keys. The two upper/lower pairs therefore exist so\n * that a single mapping serves both rules.\n */\nexport enum KbqUsernameFormatKey {\n    /** First name, abbreviated by `KbqUsernameCustomPipe`. */\n    FirstNameShort = 'f',\n\n    /** First name, rendered in full by `KbqUsernameCustomPipe`. */\n    FirstNameFull = 'F',\n\n    /** Middle name, abbreviated by `KbqUsernameCustomPipe`. */\n    MiddleNameShort = 'm',\n\n    /** Middle name, rendered in full by `KbqUsernameCustomPipe`. */\n    MiddleNameFull = 'M',\n\n    /** Last name, abbreviated by `KbqUsernameCustomPipe`. */\n    LastNameShort = 'l',\n\n    /** Last name, rendered in full by `KbqUsernameCustomPipe`. */\n    LastNameFull = 'L',\n\n    /** Abbreviation mark. `KbqUsernamePipe` abbreviates the key it follows; never maps to a field. */\n    Dot = '.'\n}\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n *\n * Excludes the uppercase keys: `KbqUsernamePipe` decides shortness from a following\n * {@link KbqUsernameFormatKey.Dot}, so a case pair would carry no meaning for it. The mapping that does\n * carry them is {@link KbqFormatKeyToProfileMappingExtended}.\n */\nexport type KbqFormatKeyToProfileMapping<T = any> = {\n    [\n        key in Exclude<\n            KbqUsernameFormatKey,\n            KbqUsernameFormatKey.FirstNameFull | KbqUsernameFormatKey.MiddleNameFull | KbqUsernameFormatKey.LastNameFull\n        >\n    ]: keyof T | undefined;\n};\n\n/**\n * Maps each format key to a property name in the user profile object.\n * Allows flexible formatting regardless of profile field names.\n *\n * Covers the uppercase keys as well, which is the pair {@link KbqUsernameCustomPipe} derives the form from.\n */\nexport type KbqFormatKeyToProfileMappingExtended<T = any> = {\n    [key in KbqUsernameFormatKey]: keyof T | undefined;\n};\n\n/** Basic user info rendered by `kbq-username`. */\nexport type KbqUserInfo = {\n    /** Given name. */\n    firstName?: string;\n    /** Family name. */\n    lastName?: string;\n    /** Middle name or patronymic. */\n    middleName?: string;\n    /** Account name, rendered as the secondary part. */\n    login?: string;\n    /** Site the account belongs to, rendered in parentheses after the login. */\n    site?: string;\n};\n\n/**\n * Layout mode for displaying a username and applying text-ellipsis.\n *\n * - `stacked`: Elements shown vertically.\n * - `inline`: Elements shown in one line. Text ellipsis is applied to both parts.\n * - `text`: `display: inline`, so the username flows inside a sentence; nothing clips it, hence no title.\n */\nexport type KbqUsernameMode = 'stacked' | 'inline' | 'text';\n\n/**\n * Visual style of the username.\n *\n * - `default`: standard styling with primary and secondary colors.\n * - `error`: error colors (e.g., red).\n * - `accented`: no color theming; emphasizes via typography only.\n * - `inherit`: inherits parent styles, no theming. For example, useful when using inside links.\n */\nexport type KbqUsernameStyle = 'default' | 'error' | 'accented' | 'inherit';\n","import { InjectionToken, Provider, Signal } from '@angular/core';\nimport {\n    KbqDeepPartial,\n    kbqInjectLocaleConfiguration,\n    kbqLocaleConfigurationOverrideProvider,\n    KbqUsernameLocaleConfiguration,\n    ruRULocaleData\n} from '@koobiq/components/core';\nimport {\n    KbqFormatKeyToProfileMapping,\n    KbqFormatKeyToProfileMappingExtended,\n    KbqUserInfo,\n    KbqUsernameFormatKey\n} from './types';\n\n/**\n * Default format of `KbqUsernameCustomPipe`: full last name, first and middle names as initials.\n *\n * Written in that pipe's own syntax — uppercase keys render the full value, lowercase ones an initial,\n * and every other character is copied verbatim, which is where the spaces and the dots come from.\n */\nexport const kbqDefaultFullNameFormatCustom = 'L f. m.';\n\n/**\n * Default format of `KbqUsernamePipe` and of the `kbq-username` component: full last name, first and\n * middle names as initials.\n *\n * Written in that pipe's own syntax — a key followed by `.` renders an initial, any other key renders\n * the full value, and the separating spaces are inserted by the pipe rather than by the format.\n */\nexport const kbqDefaultFullNameFormat = 'lf.m.';\n\n/**\n * Mapping of every format key onto a field of {@link KbqUserInfo}. Backs {@link KBQ_PROFILE_MAPPING}\n * and is the fallback of both pipes, so a profile shaped like `KbqUserInfo` needs no mapping at all.\n *\n * Covers the uppercase keys as well, which is what makes `kbqDefaultFullNameFormatCustom` work out of\n * the box; spread it to map extra fields without losing the defaults.\n */\nexport const kbqDefaultProfileMapping = {\n    [KbqUsernameFormatKey.FirstNameShort]: 'firstName',\n    [KbqUsernameFormatKey.FirstNameFull]: 'firstName',\n    [KbqUsernameFormatKey.MiddleNameShort]: 'middleName',\n    [KbqUsernameFormatKey.MiddleNameFull]: 'middleName',\n    [KbqUsernameFormatKey.LastNameShort]: 'lastName',\n    [KbqUsernameFormatKey.LastNameFull]: 'lastName',\n    [KbqUsernameFormatKey.Dot]: undefined\n} satisfies KbqFormatKeyToProfileMappingExtended<KbqUserInfo>;\n\n/**\n * Injection token for providing a global username format-to-profile mapping.\n *\n * Resolved where the `kbq-username` component or the pipe lives, so a component-level or route-level\n * provider applies to that subtree. Outside a template, resolve it from your own injection context —\n * `kbqInjectUsernameFormatter()` does exactly that.\n */\nexport const KBQ_PROFILE_MAPPING = new InjectionToken<\n    KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended\n>('KBQ_PROFILE_MAPPING', { factory: () => kbqDefaultProfileMapping });\n\n/** Default localized strings of `kbq-username`. */\nexport const KBQ_USERNAME_DEFAULT_LOCALE_CONFIGURATION: KbqUsernameLocaleConfiguration = ruRULocaleData.username;\n\n/** Localization configuration provider for `kbq-username`. */\nexport const KBQ_USERNAME_LOCALE_CONFIGURATION = new InjectionToken<KbqUsernameLocaleConfiguration>(\n    'KbqUsernameLocaleConfiguration',\n    { factory: () => KBQ_USERNAME_DEFAULT_LOCALE_CONFIGURATION }\n);\n\n/**\n * Utility provider. Only the strings you pass are overridden; the rest keep following the active locale.\n *\n * Provides {@link KBQ_USERNAME_LOCALE_CONFIGURATION}.\n */\nexport const kbqUsernameLocaleConfigurationProvider = (\n    configuration: KbqDeepPartial<KbqUsernameLocaleConfiguration>\n): Provider => kbqLocaleConfigurationOverrideProvider('username', configuration);\n\n/**\n * Injection function that creates a reactive locale configuration signal for `kbq-username`.\n *\n * @docs-private\n */\nexport function kbqInjectUsernameLocaleConfiguration(): Signal<KbqUsernameLocaleConfiguration> {\n    return kbqInjectLocaleConfiguration('username', KBQ_USERNAME_LOCALE_CONFIGURATION);\n}\n","import { inject, isDevMode, Pipe, PipeTransform } from '@angular/core';\nimport {\n    KBQ_PROFILE_MAPPING,\n    kbqDefaultFullNameFormat,\n    kbqDefaultFullNameFormatCustom,\n    kbqDefaultProfileMapping\n} from './constants';\nimport {\n    KbqFormatKeyToProfileMapping,\n    KbqFormatKeyToProfileMappingExtended,\n    KbqUserInfo,\n    KbqUsernameFormatKey\n} from './types';\n\n/** Format keys that name a profile field. `Dot` is a mark rather than a field and is deliberately absent. */\nconst fieldFormatKeys = new Set<string>([\n    KbqUsernameFormatKey.FirstNameShort,\n    KbqUsernameFormatKey.FirstNameFull,\n    KbqUsernameFormatKey.MiddleNameShort,\n    KbqUsernameFormatKey.MiddleNameFull,\n    KbqUsernameFormatKey.LastNameShort,\n    KbqUsernameFormatKey.LastNameFull\n]);\n\n/** Keys already reported by `warnAboutUnmappedKey`; a pure pipe runs on every check. */\nconst reportedUnmappedKeys = new Set<string>();\n\n/**\n * A format key with no mapped field is emitted verbatim, which is indistinguishable from a separator\n * and is how a wrong mapping ends up rendering a capital `L` where the surname should be.\n */\nconst warnAboutUnmappedKey = (letter: string): void => {\n    if (!isDevMode() || !fieldFormatKeys.has(letter) || reportedUnmappedKeys.has(letter)) return;\n\n    reportedUnmappedKeys.add(letter);\n\n    // eslint-disable-next-line no-console\n    console.warn(\n        `KbqUsernameCustomPipe: format key \"${letter}\" is not mapped to a profile field, so it is rendered ` +\n            'as literal text. Provide it through KBQ_PROFILE_MAPPING (see kbqDefaultProfileMapping).'\n    );\n};\n\n/** First character of a value, counted in code points so a surrogate pair survives as a single initial. */\nconst firstCharacter = (value: unknown): string => [...String(value)][0] ?? '';\n\n/** FIRST STRONG ISOLATE: opens a run whose base direction is taken from its own first strong character. */\nconst firstStrongIsolate = '\\u2068';\n\n/** POP DIRECTIONAL ISOLATE: closes the run opened by {@link firstStrongIsolate}. */\nconst popDirectionalIsolate = '\\u2069';\n\n/**\n * Formats a profile the way `KbqUsernamePipe` and `kbq-username` do: a key followed by\n * {@link KbqUsernameFormatKey.Dot} renders an initial, any other key renders the full value, and the\n * parts are joined with single spaces — a character that is neither a mapped key nor `.` is dropped.\n *\n * Fields the profile does not carry are skipped one by one, so a partial profile still renders whatever\n * it has.\n *\n * @param profile Profile to format. Anything that is not a record — null, a primitive, an array —\n * formats as an empty string.\n * @param format Format string, e.g. {@link kbqDefaultFullNameFormat}.\n * @param mapping Format key to profile field mapping, e.g. {@link kbqDefaultProfileMapping}. Resolve it\n * from your own injection context — `inject(KBQ_PROFILE_MAPPING)` — to honour a scoped override.\n */\nexport function kbqFormatUsername<T = unknown>(\n    profile: T,\n    format: string,\n    mapping: KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended\n): string {\n    if (!profile || typeof profile !== 'object' || Array.isArray(profile)) return '';\n\n    const letters = format.split('');\n\n    return letters\n        .reduce<string[]>((parts, letter, index) => {\n            if (letter === KbqUsernameFormatKey.Dot) return parts;\n\n            const field = mapping[letter];\n            const value = field === undefined ? undefined : profile[field];\n\n            if (!value) return parts;\n\n            const isShort = letters[index + 1] === KbqUsernameFormatKey.Dot;\n\n            parts.push(isShort ? `${firstCharacter(value)}${KbqUsernameFormatKey.Dot}` : `${value}`);\n\n            return parts;\n        }, [])\n        .join(' ');\n}\n\n/**\n * Formats a profile the way `KbqUsernameCustomPipe` does: a lowercase key renders an initial, an\n * uppercase one the full value, and every character with no mapped field — the separators — is emitted\n * verbatim, which is what lets the format carry its own punctuation.\n *\n * @param profile Profile to format. Anything that is not a record — null, a primitive, an array —\n * formats as an empty string.\n * @param format Format string, e.g. {@link kbqDefaultFullNameFormatCustom}.\n * @param mapping Format key to profile field mapping, e.g. {@link kbqDefaultProfileMapping}. Resolve it\n * from your own injection context — `inject(KBQ_PROFILE_MAPPING)` — to honour a scoped override.\n */\nexport function kbqFormatUsernameCustom<T = unknown>(\n    profile: T,\n    format: string,\n    mapping: KbqFormatKeyToProfileMapping | KbqFormatKeyToProfileMappingExtended\n): string {\n    if (!profile || typeof profile !== 'object' || Array.isArray(profile)) return '';\n\n    return format\n        .split('')\n        .map((letter) => {\n            const field = mapping[letter];\n\n            if (!field) {\n                warnAboutUnmappedKey(letter);\n\n                return letter;\n            }\n\n            const value = profile[field];\n\n            if (!value) return '';\n\n            return letter === letter.toLowerCase() ? firstCharacter(value) : `${value}`;\n        })\n        .join('')\n        .trim();\n}\n\n/**\n * Formats a user profile into a name string.\n *\n * A key followed by `.` renders an initial and any other key renders the full value; the separating\n * spaces are inserted by the pipe, so a character that is neither a mapped key nor `.` is dropped.\n *\n * {@link KbqUsernameCustomPipe} derives the form from the key's case instead, and keeps the format's own\n * punctuation.\n */\n@Pipe({\n    name: 'kbqUsername'\n})\nexport class KbqUsernamePipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(profile: T, format = kbqDefaultFullNameFormat, customMapping?: KbqFormatKeyToProfileMapping): string {\n        return kbqFormatUsername(profile, format, customMapping || this.mapping);\n    }\n}\n\n/**\n * Formats a user profile into a name string.\n *\n * A lowercase key renders an initial and an uppercase one the full value; every character with no\n * mapped field is emitted verbatim, so the format carries its own separators.\n *\n * {@link KbqUsernamePipe} derives the form from a following `.` instead.\n */\n@Pipe({\n    name: 'kbqUsernameCustom'\n})\nexport class KbqUsernameCustomPipe<T = unknown> implements PipeTransform {\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;\n\n    /** Builds a formatted name string from the user profile using the provided format and mapping. */\n    transform(\n        profile: T,\n        format = kbqDefaultFullNameFormatCustom,\n        customMapping?: KbqFormatKeyToProfileMappingExtended<T>\n    ): string {\n        return kbqFormatUsernameCustom(profile, format, customMapping || this.mapping);\n    }\n}\n\n/**\n * Returns the formatter `kbq-username` renders with, bound to the `KBQ_PROFILE_MAPPING` visible at the\n * call site. Use it wherever the displayed string is needed outside a template — a search filter, an\n * option label — so that a scoped mapping applies to both paths.\n *\n * Must run in an injection context.\n */\nexport function kbqInjectUsernameFormatter(): <T>(profile: T, format?: string) => string {\n    const mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;\n\n    return (profile, format = kbqDefaultFullNameFormat) => kbqFormatUsername(profile, format, mapping);\n}\n\nexport interface KbqUsernameTextOptions {\n    /** Formats the login segment. Defaults to identity. */\n    formatLogin?: (login: string) => string;\n\n    /**\n     * Formats the site segment.\n     * Defaults to wrapping in parentheses, matching kbq-username display.\n     */\n    formatSite?: (site: string) => string;\n\n    /**\n     * Wraps every segment in `U+2068`/`U+2069` so that a right-to-left name keeps its order next to a\n     * left-to-right login, and the parentheses around the site stay attached to it.\n     *\n     * Off by default: the isolates are invisible but real characters, and this string is commonly fed to\n     * an `includes()` filter that would stop matching.\n     */\n    bidiIsolate?: boolean;\n}\n\n/**\n * Builds a full username string from a pre-formatted name plus optional login and site,\n * mirroring the text rendered by `kbq-username`.\n *\n * Provide custom `formatLogin` / `formatSite` to tailor the output.\n */\nexport function kbqBuildUsernameText(\n    data: { name: string } & Partial<Pick<KbqUserInfo, 'login' | 'site'>>,\n    options?: KbqUsernameTextOptions\n): string {\n    const formatLogin = options?.formatLogin ?? ((login: string) => login);\n    const formatSite = options?.formatSite ?? ((site: string) => `(${site})`);\n    const isolate = (segment: string): string =>\n        options?.bidiIsolate ? `${firstStrongIsolate}${segment}${popDirectionalIsolate}` : segment;\n\n    return [data.name, data.login && formatLogin(data.login), data.site && formatSite(data.site)]\n        .filter((segment): segment is string => !!segment)\n        .map(isolate)\n        .join(' ');\n}\n","import {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChild,\n    Directive,\n    inject,\n    input,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqTitleModule } from '@koobiq/components/title';\nimport {\n    KBQ_PROFILE_MAPPING,\n    kbqDefaultFullNameFormat,\n    kbqDefaultProfileMapping,\n    kbqInjectUsernameLocaleConfiguration\n} from './constants';\nimport { KbqUserInfo, KbqUsernameMode, KbqUsernameStyle } from './types';\nimport { kbqFormatUsername } from './username.pipe';\n\nconst baseClass = 'kbq-username';\n\n/**\n * Unabbreviated counterpart of a format: every key renders in full, so the abbreviation marks go.\n *\n * The case is left alone. `kbqFormatUsername` resolves a key through the mapping whatever its case, and\n * upper-casing would miss every mapping typed `KbqFormatKeyToProfileMapping` — the shape the token is\n * documented with, which by design carries the lowercase keys only.\n */\nconst expandFormat = (format: string): string => format.replaceAll('.', '');\n\n/** Styles the primary part of the username (e.g. full name). */\n@Directive({\n    selector: '[kbqUsernamePrimary]',\n    host: {\n        class: `${baseClass}__primary`\n    },\n    exportAs: 'kbqUsernamePrimary'\n})\nexport class KbqUsernamePrimary {}\n\n/** Styles the secondary part. */\n@Directive({\n    selector: '[kbqUsernameSecondary]',\n    host: {\n        class: `${baseClass}__secondary`\n    },\n    exportAs: 'kbqUsernameSecondary'\n})\nexport class KbqUsernameSecondary {}\n\n/** Styles a secondary hint. */\n@Directive({\n    selector: '[kbqUsernameSecondaryHint]',\n    host: {\n        class: `${baseClass}__secondary-hint`\n    },\n    exportAs: 'kbqUsernameSecondaryHint'\n})\nexport class KbqUsernameSecondaryHint {}\n\n/** Custom content for `KbqUsername`, overrides default view. */\n@Directive({\n    selector: 'kbq-username-custom-view, [kbq-username-custom-view]',\n    host: {\n        class: `${baseClass}__custom-view`\n    },\n    exportAs: 'kbqUsernameCustomView'\n})\nexport class KbqUsernameCustomView {}\n\n/**\n * Displays a user's name based on profile data.\n * Supports different display modes and visual styles.\n * A custom view can be provided via `<kbq-username-custom-view>` for full control over the output.\n * Accepts input profile data and optional formatting options.\n */\n@Component({\n    selector: 'kbq-username',\n    imports: [\n        KbqTitleModule,\n        KbqUsernamePrimary,\n        KbqUsernameSecondary,\n        KbqUsernameSecondaryHint\n    ],\n    templateUrl: './username.html',\n    styleUrls: ['./username.scss', './username-tokens.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: baseClass,\n        '[class]': 'class()'\n    },\n    exportAs: 'kbqUsername'\n})\nexport class KbqUsername {\n    /**\n     * Resolved at the component's own injector, so a mapping scoped to a route or a host component\n     * applies to what is rendered here.\n     */\n    private readonly mapping = inject(KBQ_PROFILE_MAPPING) ?? kbqDefaultProfileMapping;\n\n    /** User profile data used for display. */\n    readonly userInfo = input<KbqUserInfo>();\n    /** Enables compact display mode */\n    readonly isCompact = input(false, { transform: booleanAttribute });\n    /** Format string for rendering the user's full name. */\n    readonly fullNameFormat = input<string>(kbqDefaultFullNameFormat);\n\n    /**\n     * Display mode of the username. Defaults to `'inline'`.\n     */\n    readonly mode = input<KbqUsernameMode>('inline');\n\n    /**\n     * Visual style of the username. Defaults to `'default'`.\n     */\n    readonly type = input<KbqUsernameStyle>('default');\n\n    /**\n     * Custom projected view for username rendering.\n     *\n     * @docs-private\n     */\n    protected readonly customView = contentChild(KbqUsernameCustomView);\n\n    /** @docs-private */\n    protected readonly localeConfiguration = kbqInjectUsernameLocaleConfiguration();\n\n    /**\n     * Name as rendered, i.e. abbreviated according to `fullNameFormat`.\n     *\n     * @docs-private\n     */\n    protected readonly formattedName = computed(() =>\n        kbqFormatUsername(this.userInfo(), this.fullNameFormat(), this.mapping)\n    );\n\n    /**\n     * Whether the profile yields any name at all. A profile carrying only one of the name fields still\n     * has a name, and the formatter degrades to whatever it finds.\n     *\n     * @docs-private\n     */\n    protected readonly hasName = computed(() => !!this.formattedName());\n\n    /**\n     * Unabbreviated name, offered as the tooltip of the truncated primary part.\n     *\n     * @docs-private\n     */\n    protected readonly expandedName = computed(() =>\n        kbqFormatUsername(this.userInfo(), expandFormat(this.fullNameFormat()), this.mapping)\n    );\n\n    /**\n     * Tooltip of the secondary part: the login with the site hint it renders inline.\n     *\n     * @docs-private\n     */\n    protected readonly secondaryTitle = computed(() => this.withSite(this.userInfo()?.login || ''));\n\n    /**\n     * Tooltip of the compact layout, whose single part carries the name — or the login when there is\n     * none — followed by the site.\n     *\n     * @docs-private\n     */\n    protected readonly compactTitle = computed(() =>\n        this.withSite(this.hasName() ? this.expandedName() || this.formattedName() : this.userInfo()?.login || '')\n    );\n\n    /**\n     * Whether the layout can clip its text. `kbq-truncate-line()` is applied to `stacked` and `inline`\n     * only, so in `text` mode nothing is ever clipped and the verdict `kbq-title` computes is known in\n     * advance. Attaching it there would cost a `MutationObserver` per part and a forced layout read on\n     * every resize and every content mutation, for a tooltip that could never show.\n     *\n     * @docs-private\n     */\n    protected readonly canTruncate = computed(() => this.mode() !== 'text');\n\n    /** @docs-private */\n    protected readonly class = computed(() => {\n        return [this.type(), this.mode()].map((modificator) => `${baseClass}_${modificator}`).join(' ');\n    });\n\n    private withSite(text: string): string {\n        const site = this.userInfo()?.site;\n\n        return site ? `${text} (${site})`.trim() : text;\n    }\n}\n","@let profile = userInfo();\n<ng-content select=\"kbq-username-custom-view,[kbq-username-custom-view]\" />\n\n@if (!customView() && profile) {\n    @if (!isCompact()) {\n        @if (hasName()) {\n            @if (canTruncate()) {\n                <span kbqUsernamePrimary dir=\"auto\" [kbq-title]=\"expandedName()\">{{ formattedName() }}</span>\n            } @else {\n                <span kbqUsernamePrimary dir=\"auto\">{{ formattedName() }}</span>\n            }\n        }\n\n        @if (profile.login) {\n            <!-- The two branches must stay in sync: `kbq-title` cannot be bound conditionally, and in\n            `text` mode there is no ellipsis for it to detect. -->\n            @if (canTruncate()) {\n                <span kbqUsernameSecondary [kbq-title]=\"secondaryTitle()\">\n                    {{ profile.login }}\n\n                    @if (profile.site) {\n                        <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                        <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                    }\n                </span>\n            } @else {\n                <span kbqUsernameSecondary>\n                    {{ profile.login }}\n\n                    @if (profile.site) {\n                        <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                        <span kbqUsernameSecondaryHint>({{ profile.site }})</span>\n                    }\n                </span>\n            }\n        }\n    } @else {\n        @if (canTruncate()) {\n            <span kbqUsernamePrimary [kbq-title]=\"compactTitle()\">\n                @if (hasName()) {\n                    <span dir=\"auto\">{{ formattedName() }}</span>\n                } @else if (profile.login) {\n                    {{ profile.login }}\n                }\n\n                @if (profile.site) {\n                    <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                    <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n                }\n            </span>\n        } @else {\n            <span kbqUsernamePrimary>\n                @if (hasName()) {\n                    <span dir=\"auto\">{{ formattedName() }}</span>\n                } @else if (profile.login) {\n                    {{ profile.login }}\n                }\n\n                @if (profile.site) {\n                    <span class=\"cdk-visually-hidden\">{{ localeConfiguration().siteLabel }}</span>\n                    <span kbqUsernameSecondaryHint>&nbsp;({{ profile.site }})</span>\n                }\n            </span>\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport {\n    KbqUsername,\n    KbqUsernameCustomView,\n    KbqUsernamePrimary,\n    KbqUsernameSecondary,\n    KbqUsernameSecondaryHint\n} from './username';\nimport { KbqUsernameCustomPipe, KbqUsernamePipe } from './username.pipe';\n\nconst COMPONENTS = [\n    KbqUsername,\n    KbqUsernameCustomView,\n    KbqUsernamePrimary,\n    KbqUsernameSecondary,\n    KbqUsernameSecondaryHint,\n    KbqUsernameCustomPipe,\n    KbqUsernamePipe\n];\n\n/** Exports every `kbq-username` building block: the component, the styling directives and both pipes. */\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqUsernameModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;AAOG;IACS;AAAZ,CAAA,UAAY,oBAAoB,EAAA;;AAE5B,IAAA,oBAAA,CAAA,gBAAA,CAAA,GAAA,GAAoB;;AAGpB,IAAA,oBAAA,CAAA,eAAA,CAAA,GAAA,GAAmB;;AAGnB,IAAA,oBAAA,CAAA,iBAAA,CAAA,GAAA,GAAqB;;AAGrB,IAAA,oBAAA,CAAA,gBAAA,CAAA,GAAA,GAAoB;;AAGpB,IAAA,oBAAA,CAAA,eAAA,CAAA,GAAA,GAAmB;;AAGnB,IAAA,oBAAA,CAAA,cAAA,CAAA,GAAA,GAAkB;;AAGlB,IAAA,oBAAA,CAAA,KAAA,CAAA,GAAA,GAAS;AACb,CAAC,EArBW,oBAAoB,KAApB,oBAAoB,GAAA,EAAA,CAAA,CAAA;;ACOhC;;;;;AAKG;AACI,MAAM,8BAA8B,GAAG;AAE9C;;;;;;AAMG;AACI,MAAM,wBAAwB,GAAG;AAExC;;;;;;AAMG;AACI,MAAM,wBAAwB,GAAG;AACpC,IAAA,CAAC,oBAAoB,CAAC,cAAc,GAAG,WAAW;AAClD,IAAA,CAAC,oBAAoB,CAAC,aAAa,GAAG,WAAW;AACjD,IAAA,CAAC,oBAAoB,CAAC,eAAe,GAAG,YAAY;AACpD,IAAA,CAAC,oBAAoB,CAAC,cAAc,GAAG,YAAY;AACnD,IAAA,CAAC,oBAAoB,CAAC,aAAa,GAAG,UAAU;AAChD,IAAA,CAAC,oBAAoB,CAAC,YAAY,GAAG,UAAU;AAC/C,IAAA,CAAC,oBAAoB,CAAC,GAAG,GAAG;;AAGhC;;;;;;AAMG;AACI,MAAM,mBAAmB,GAAG,IAAI,cAAc,CAEnD,qBAAqB,EAAE,EAAE,OAAO,EAAE,MAAM,wBAAwB,EAAE;AAEpE;AACO,MAAM,yCAAyC,GAAmC,cAAc,CAAC;AAExG;AACO,MAAM,iCAAiC,GAAG,IAAI,cAAc,CAC/D,gCAAgC,EAChC,EAAE,OAAO,EAAE,MAAM,yCAAyC,EAAE;AAGhE;;;;AAIG;AACI,MAAM,sCAAsC,GAAG,CAClD,aAA6D,KAClD,sCAAsC,CAAC,UAAU,EAAE,aAAa;AAE/E;;;;AAIG;SACa,oCAAoC,GAAA;AAChD,IAAA,OAAO,4BAA4B,CAAC,UAAU,EAAE,iCAAiC,CAAC;AACtF;;ACvEA;AACA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAS;AACpC,IAAA,oBAAoB,CAAC,cAAc;AACnC,IAAA,oBAAoB,CAAC,aAAa;AAClC,IAAA,oBAAoB,CAAC,eAAe;AACpC,IAAA,oBAAoB,CAAC,cAAc;AACnC,IAAA,oBAAoB,CAAC,aAAa;AAClC,IAAA,oBAAoB,CAAC;AACxB,CAAA,CAAC;AAEF;AACA,MAAM,oBAAoB,GAAG,IAAI,GAAG,EAAU;AAE9C;;;AAGG;AACH,MAAM,oBAAoB,GAAG,CAAC,MAAc,KAAU;AAClD,IAAA,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,oBAAoB,CAAC,GAAG,CAAC,MAAM,CAAC;QAAE;AAEtF,IAAA,oBAAoB,CAAC,GAAG,CAAC,MAAM,CAAC;;AAGhC,IAAA,OAAO,CAAC,IAAI,CACR,CAAA,mCAAA,EAAsC,MAAM,CAAA,sDAAA,CAAwD;AAChG,QAAA,yFAAyF,CAChG;AACL,CAAC;AAED;AACA,MAAM,cAAc,GAAG,CAAC,KAAc,KAAa,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;AAE9E;AACA,MAAM,kBAAkB,GAAG,QAAQ;AAEnC;AACA,MAAM,qBAAqB,GAAG,QAAQ;AAEtC;;;;;;;;;;;;;AAaG;SACa,iBAAiB,CAC7B,OAAU,EACV,MAAc,EACd,OAA4E,EAAA;AAE5E,IAAA,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,QAAA,OAAO,EAAE;IAEhF,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AAEhC,IAAA,OAAO;SACF,MAAM,CAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,KAAI;AACvC,QAAA,IAAI,MAAM,KAAK,oBAAoB,CAAC,GAAG;AAAE,YAAA,OAAO,KAAK;AAErD,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC;AAC7B,QAAA,MAAM,KAAK,GAAG,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC;AAE9D,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,KAAK;AAExB,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,oBAAoB,CAAC,GAAG;QAE/D,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,CAAA,EAAG,cAAc,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG,CAAA,CAAE,GAAG,CAAA,EAAG,KAAK,CAAA,CAAE,CAAC;AAExF,QAAA,OAAO,KAAK;IAChB,CAAC,EAAE,EAAE;SACJ,IAAI,CAAC,GAAG,CAAC;AAClB;AAEA;;;;;;;;;;AAUG;SACa,uBAAuB,CACnC,OAAU,EACV,MAAc,EACd,OAA4E,EAAA;AAE5E,IAAA,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,QAAA,OAAO,EAAE;AAEhF,IAAA,OAAO;SACF,KAAK,CAAC,EAAE;AACR,SAAA,GAAG,CAAC,CAAC,MAAM,KAAI;AACZ,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,KAAK,EAAE;YACR,oBAAoB,CAAC,MAAM,CAAC;AAE5B,YAAA,OAAO,MAAM;QACjB;AAEA,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;AAE5B,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAErB,QAAA,OAAO,MAAM,KAAK,MAAM,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAA,EAAG,KAAK,EAAE;AAC/E,IAAA,CAAC;SACA,IAAI,CAAC,EAAE;AACP,SAAA,IAAI,EAAE;AACf;AAEA;;;;;;;;AAQG;MAIU,eAAe,CAAA;AAH5B,IAAA,WAAA,GAAA;AAIqB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,wBAAwB;AAMrF,IAAA;;AAHG,IAAA,SAAS,CAAC,OAAU,EAAE,MAAM,GAAG,wBAAwB,EAAE,aAA4C,EAAA;AACjG,QAAA,OAAO,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;IAC5E;kIANS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;gIAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,CAAA;;4FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACF,oBAAA,IAAI,EAAE;AACT,iBAAA;;AAUD;;;;;;;AAOG;MAIU,qBAAqB,CAAA;AAHlC,IAAA,WAAA,GAAA;AAIqB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,wBAAwB;AAUrF,IAAA;;AAPG,IAAA,SAAS,CACL,OAAU,EACV,MAAM,GAAG,8BAA8B,EACvC,aAAuD,EAAA;AAEvD,QAAA,OAAO,uBAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;IAClF;kIAVS,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;gIAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,CAAA,CAAA;;4FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACF,oBAAA,IAAI,EAAE;AACT,iBAAA;;AAcD;;;;;;AAMG;SACa,0BAA0B,GAAA;IACtC,MAAM,OAAO,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,wBAAwB;AAEvE,IAAA,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,KAAK,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC;AACtG;AAsBA;;;;;AAKG;AACG,SAAU,oBAAoB,CAChC,IAAqE,EACrE,OAAgC,EAAA;AAEhC,IAAA,MAAM,WAAW,GAAG,OAAO,EAAE,WAAW,KAAK,CAAC,KAAa,KAAK,KAAK,CAAC;AACtE,IAAA,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,KAAK,CAAC,IAAY,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,CAAG,CAAC;IACzE,MAAM,OAAO,GAAG,CAAC,OAAe,KAC5B,OAAO,EAAE,WAAW,GAAG,CAAA,EAAG,kBAAkB,CAAA,EAAG,OAAO,CAAA,EAAG,qBAAqB,EAAE,GAAG,OAAO;IAE9F,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;SACvF,MAAM,CAAC,CAAC,OAAO,KAAwB,CAAC,CAAC,OAAO;SAChD,GAAG,CAAC,OAAO;SACX,IAAI,CAAC,GAAG,CAAC;AAClB;;AChNA,MAAM,SAAS,GAAG,cAAc;AAEhC;;;;;;AAMG;AACH,MAAM,YAAY,GAAG,CAAC,MAAc,KAAa,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC;AAE3E;MAQa,kBAAkB,CAAA;kIAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,uBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,IAAI,EAAE;wBACF,KAAK,EAAE,CAAA,EAAG,SAAS,CAAA,SAAA;AACtB,qBAAA;AACD,oBAAA,QAAQ,EAAE;AACb,iBAAA;;AAGD;MAQa,oBAAoB,CAAA;kIAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,yBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,IAAI,EAAE;wBACF,KAAK,EAAE,CAAA,EAAG,SAAS,CAAA,WAAA;AACtB,qBAAA;AACD,oBAAA,QAAQ,EAAE;AACb,iBAAA;;AAGD;MAQa,wBAAwB,CAAA;kIAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,8BAAA,EAAA,EAAA,QAAA,EAAA,CAAA,0BAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,4BAA4B;AACtC,oBAAA,IAAI,EAAE;wBACF,KAAK,EAAE,CAAA,EAAG,SAAS,CAAA,gBAAA;AACtB,qBAAA;AACD,oBAAA,QAAQ,EAAE;AACb,iBAAA;;AAGD;MAQa,qBAAqB,CAAA;kIAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sDAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,2BAAA,EAAA,EAAA,QAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,sDAAsD;AAChE,oBAAA,IAAI,EAAE;wBACF,KAAK,EAAE,CAAA,EAAG,SAAS,CAAA,aAAA;AACtB,qBAAA;AACD,oBAAA,QAAQ,EAAE;AACb,iBAAA;;AAGD;;;;;AAKG;MAmBU,WAAW,CAAA;AAlBxB,IAAA,WAAA,GAAA;AAmBI;;;AAGG;AACc,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,mBAAmB,CAAC,IAAI,wBAAwB;;QAGzE,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAe;;QAE/B,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;AAEzD,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAS,wBAAwB,qFAAC;AAEjE;;AAEG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAkB,QAAQ,2EAAC;AAEhD;;AAEG;AACM,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAmB,SAAS,2EAAC;AAElD;;;;AAIG;AACgB,QAAA,IAAA,CAAA,UAAU,GAAG,YAAY,CAAC,qBAAqB,iFAAC;;QAGhD,IAAA,CAAA,mBAAmB,GAAG,oCAAoC,EAAE;AAE/E;;;;AAIG;QACgB,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MACxC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC1E;AAED;;;;;AAKG;AACgB,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,8EAAC;AAEnE;;;;AAIG;QACgB,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MACvC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CACxF;AAED;;;;AAIG;QACgB,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,IAAI,EAAE,CAAC,qFAAC;AAE/F;;;;;AAKG;AACgB,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,IAAI,EAAE,CAAC,mFAC7G;AAED;;;;;;;AAOG;AACgB,QAAA,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,KAAK,MAAM,kFAAC;;AAGpD,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACrC,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,KAAK,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AACnG,QAAA,CAAC,4EAAC;AAOL,IAAA;AALW,IAAA,QAAQ,CAAC,IAAY,EAAA;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI;AAElC,QAAA,OAAO,IAAI,GAAG,CAAA,EAAG,IAAI,CAAA,EAAA,EAAK,IAAI,CAAA,CAAA,CAAG,CAAC,IAAI,EAAE,GAAG,IAAI;IACnD;kIAhGS,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA6ByB,qBAAqB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7HtE,koFAkEA,EAAA,MAAA,EAAA,CAAA,gtNAAA,EAAA,mOAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDeQ,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,4BAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAzCT,kBAAkB,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAUlB,oBAAoB,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAUpB,wBAAwB,EAAA,QAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,CAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAoCxB,WAAW,EAAA,UAAA,EAAA,CAAA;kBAlBvB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EACf;wBACL,cAAc;wBACd,kBAAkB;wBAClB,oBAAoB;wBACpB;AACH,qBAAA,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACF,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,SAAS,EAAE;AACd,qBAAA,EAAA,QAAA,EACS,aAAa,EAAA,QAAA,EAAA,koFAAA,EAAA,MAAA,EAAA,CAAA,gtNAAA,EAAA,mOAAA,CAAA,EAAA;6jBA+BsB,qBAAqB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEnHtE,MAAM,UAAU,GAAG;IACf,WAAW;IACX,qBAAqB;IACrB,kBAAkB;IAClB,oBAAoB;IACpB,wBAAwB;IACxB,qBAAqB;IACrB;CACH;AAED;MAKa,iBAAiB,CAAA;kIAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAjB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAd1B,WAAW;YACX,qBAAqB;YACrB,kBAAkB;YAClB,oBAAoB;YACpB,wBAAwB;YACxB,qBAAqB;AACrB,YAAA,eAAe,aANf,WAAW;YACX,qBAAqB;YACrB,kBAAkB;YAClB,oBAAoB;YACpB,wBAAwB;YACxB,qBAAqB;YACrB,eAAe,CAAA,EAAA,CAAA,CAAA;AAQN,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAd1B,WAAW,CAAA,EAAA,CAAA,CAAA;;4FAcF,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,UAAU;AACnB,oBAAA,OAAO,EAAE;AACZ,iBAAA;;;ACxBD;;AAEG;;;;"}

package/file-upload/dropzone.scss

@@ -1,7 +1,24 @@
+@use '../core/styles/common/animation';
+@use '../core/styles/common/squircle' as *;
+
+// `--kbq-background-overlay-theme` was dropped in @koobiq/design-tokens v4; it is now an opaque base
+// plus `--kbq-opacity-overlay`. The two are normally composed with `opacity`, which is not available
+// here — the overlay already animates its own appearance with it, and it would fade the dashed border
+// and the empty state along with the background. Mixing keeps the alpha on the colour alone.
 .kbq-dropzone-overlay {
     --kbq-dropzone-padding: var(--kbq-size-s);
-    --kbq-dropzone-overlay-background: var(--kbq-background-overlay-theme);
-    --kbq-dropzone-component-background: var(--kbq-background-overlay-theme);
+    --kbq-dropzone-overlay-background: color-mix(
+        in srgb,
+        var(--kbq-background-overlay-base-theme) /* color-mix only allows percentage value */
+            calc(var(--kbq-opacity-overlay) * 100%),
+        transparent
+    );
+    --kbq-dropzone-component-background: color-mix(
+        in srgb,
+        var(--kbq-background-overlay-base-theme) /* color-mix only allows percentage value */
+            calc(var(--kbq-opacity-overlay) * 100%),
+        transparent
+    );
     --kbq-dropzone-border-color: var(--kbq-line-theme-fade);
 
     padding: var(--kbq-dropzone-padding);
@@ -10,6 +27,10 @@
     opacity: 0;
     transition: opacity 100ms ease-in-out;
 
+    // The overlay covers the whole viewport, so the fade is the largest animated surface the library
+    // produces — the one a reduced-motion preference is most about.
+    @include animation.kbq-animations-off();
+
     &.kbq-dropzone-overlay__attached {
         opacity: 1;
     }
@@ -21,7 +42,7 @@
         align-items: center;
         justify-content: center;
 
-        border-radius: var(--kbq-size-border-radius);
+        @include kbq-squircle(var(--kbq-size-border-radius));
         border: var(--kbq-size-border-width) dashed var(--kbq-dropzone-border-color);
         background-color: var(--kbq-dropzone-component-background);
 
@@ -55,3 +76,10 @@
     --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-m);
     --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xs);
 }
+
+// Scoped to the dropzone, not to every kbq-file-upload-empty-state: inside the multiple file upload
+// the caption is the secondary foreground, and it shares a line with a link that stays secondary —
+// contrast there would split one sentence into two colors.
+.kbq-dropzone-content .kbq-empty-state.kbq-multiple-file-upload__empty-state {
+    --kbq-empty-state-text-color: var(--kbq-foreground-contrast);
+}

package/file-upload/file-upload-tokens.scss

@@ -11,21 +11,17 @@
     --kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);
     --kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-l);
-    --kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);
-    --kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-file-upload-single-min-height: 44px;
+    /* Centers the 16px remove icon in the container: 16px + 2 x 13px fills the 42px content box. */
+    --kbq-file-upload-size-single-action-padding: 13px;
     /* THEME TOKENS */
     --kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
     --kbq-file-upload-single-default-dropzone-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
     --kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);
-    --kbq-file-upload-single-states-on-drag-dropzone-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
     --kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
     --kbq-file-upload-single-states-error-dropzone-icon-color: var(--kbq-icon-error);
@@ -38,7 +34,6 @@
     --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
 }
 
 :where(.kbq-multiple-file-upload) {
@@ -50,14 +45,7 @@
     --kbq-file-upload-size-multiple-big-container-min-width: 320px;
     --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-container-border-width: 1px;
-    --kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);
-    --kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);
-    --kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);
-    --kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;
-    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);
     /* THEME TOKENS */
@@ -67,16 +55,12 @@
     --kbq-file-upload-multiple-default-dropzone-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);
     --kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
 
     --kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast);
     --kbq-file-upload-multiple-states-on-drag-dropzone-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);
-    --kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
-    --kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);
 
     --kbq-file-upload-multiple-states-error-container-border: var(--kbq-line-error);
     --kbq-file-upload-multiple-states-error-container-background: var(--kbq-background-error-less);
@@ -91,13 +75,9 @@
     --kbq-file-upload-multiple-states-disabled-dropzone-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
-    --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
-    --kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
 }
 
 :where(.kbq-file-upload.kbq-file-upload_compact) {
-    --kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-multiple-compact-container-padding-vertical: 11px;
     --kbq-file-upload-multiple-compact-container-padding-horizontal: 15px;
 }

package/file-upload/file-upload.scss

@@ -1,5 +1,6 @@
 @use './file-upload-theme' as theme;
 @use '../form-field/form-field';
+@use '../core/styles/common/link';
 
 .kbq-file-upload {
     box-sizing: border-box;
@@ -19,6 +20,11 @@
     }
 }
 
+// The file input of a browse link is visually hidden inside its label, so the link shows the keyboard focus
+.kbq-file-loader.cdk-keyboard-focused > .kbq-file-upload__browse-link {
+    @include link.kbq-link-keyboard-focus-outline();
+}
+
 .kbq-file-upload__hint {
     @include form-field.kbq-form-field-hint-geometry();
 }

package/file-upload/multiple-file-upload.component.scss

@@ -1,3 +1,5 @@
+@use '../core/styles/common/squircle' as *;
+
 @mixin _kbq-list-item($state-name) {
     --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
 
@@ -14,8 +16,8 @@
         }
 
         .kbq-multiple-file-upload__empty-state {
-            --kbq-empty-state-title: var(--kbq-file-upload-multiple-default-text-block-color);
-            --kbq-empty-state-color: var(--kbq-file-upload-multiple-default-text-block-color);
+            --kbq-empty-state-title-color: var(--kbq-file-upload-multiple-default-text-block-color);
+            --kbq-empty-state-text-color: var(--kbq-file-upload-multiple-default-text-block-color);
         }
 
         .kbq-multiple-file-upload__empty-state-upload-icon {
@@ -61,8 +63,8 @@
         }
 
         .kbq-multiple-file-upload__empty-state {
-            --kbq-empty-state-title: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
-            --kbq-empty-state-color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+            --kbq-empty-state-title-color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+            --kbq-empty-state-text-color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
         }
 
         .kbq-file-upload__dropzone-caption {
@@ -103,8 +105,8 @@
                     --kbq-file-upload-multiple-default-text-block-color
                 );
 
-                --kbq-empty-state-title: var(--kbq-file-upload-multiple-states-error-text-block-color);
-                --kbq-empty-state-color: var(--kbq-file-upload-multiple-states-error-text-block-color);
+                --kbq-empty-state-title-color: var(--kbq-file-upload-multiple-states-error-text-block-color);
+                --kbq-empty-state-text-color: var(--kbq-file-upload-multiple-states-error-text-block-color);
             }
 
             .kbq-file-upload__list-footer {
@@ -167,9 +169,9 @@
     }
 }
 
-// todo нужно рефакторить со стилями тут сложно
+// TODO: needs a refactor — the nesting and specificity below are hard to follow.
 .kbq-multiple-file-upload .kbq-file-upload {
-    border-radius: var(--kbq-file-upload-size-multiple-big-container-border-radius);
+    @include kbq-squircle(var(--kbq-file-upload-size-multiple-big-container-border-radius));
     border-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
     border-style: dashed;
 
@@ -204,7 +206,9 @@
         --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xs);
     }
 
-    .kbq-file-upload__list {
+    // The scroll viewport around the list, not the list itself: every declaration here sizes and pads
+    // the scrollport, and `<kbq-list>` sits inside it.
+    .kbq-file-upload__list-viewport {
         // Content-box so that the height cap counts rows and is not eaten by the 27px of padding
         // below — the same reasoning, and the same wording, as `%kbq-select-content` in
         // `core/styles/common/_select.scss`. A global `border-box` reset in a consuming application
@@ -214,8 +218,6 @@
         min-height: var(--kbq-file-upload-size-multiple-min-height);
         max-height: var(--kbq-file-upload-size-multiple-max-height);
 
-        overflow-y: auto;
-
         padding-top: calc(var(--kbq-size-xxs) - var(--kbq-size-border-width));
         padding-bottom: var(--kbq-size-xxl);
     }
@@ -294,7 +296,7 @@
         padding: 0 calc(var(--kbq-size-xxs) - var(--kbq-size-border-width));
 
         .kbq-file-upload__row {
-            border-radius: var(--kbq-size-xs);
+            @include kbq-squircle(var(--kbq-size-xs));
         }
     }
 

package/file-upload/single-file-upload.component.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/squircle' as *;
 
 @mixin _kbq-single-file-upload-theme() {
     background-color: var(--kbq-file-upload-single-default-container-background);
@@ -107,7 +108,7 @@
     .kbq-file-upload {
         min-height: var(--kbq-file-upload-single-min-height);
 
-        border-radius: var(--kbq-file-upload-size-single-container-border-radius);
+        @include kbq-squircle(var(--kbq-file-upload-size-single-container-border-radius));
         border-width: var(--kbq-file-upload-size-single-container-border-width);
         border-style: dashed;
 
@@ -141,7 +142,7 @@
         }
 
         .kbq-file-upload__action {
-            padding: 13px;
+            padding: var(--kbq-file-upload-size-single-action-padding);
         }
 
         @include _kbq-single-file-upload-theme();

package/filter-bar/filters.scss

@@ -10,6 +10,13 @@
         & .kbq-button-wrapper {
             width: 100%;
         }
+
+        // the button's default slot is an inline text box; `.kbq-filters__filter-name` truncates
+        // itself and is measured by `kbq-title`, so it has to stay a block-level flex item
+        & .kbq-button-text {
+            display: flex;
+            align-items: center;
+        }
     }
 
     > .kbq-button .kbq-icon {

package/filter-bar/pipes/base-pipe.scss

@@ -14,9 +14,9 @@
         height: unset;
     }
 
-    // The button's default slot is a flex row; a pipe puts its own two independently truncated parts
-    // (name + value) in there as two shrinkable grid tracks instead: as flex items they would give up
-    // the same percentage, which wipes out a short name long before a long value becomes unreadable.
+    // The button's default slot is an inline text box; a pipe puts its own row of two independently
+    // truncated parts (name + value) in there, as two shrinkable tracks: as flex items they would give
+    // up the same percentage, which wipes out a short name long before a long value becomes unreadable.
     // Qualified with `.kbq-button` on purpose: the base rule is `.kbq-button .kbq-button-text`, so a
     // two-class selector would only win on source order, which differs between app bundles.
     .kbq-button .kbq-button-text {

package/filter-bar/pipes/pipe-date.scss

@@ -31,7 +31,9 @@
                 margin-inline-start: var(--kbq-size-s);
                 align-self: center;
 
-                color: var(--kbq-icon-fade-contrast-color);
+                // The design token is the fallback because `--kbq-icon-fade-contrast-color` is no longer
+                // declared on `.kbq-icon`; this selector outranks the themed one, so it has to carry it.
+                color: var(--kbq-icon-fade-contrast-color, var(--kbq-icon-contrast-fade));
             }
         }
     }
@@ -61,6 +63,11 @@
 
             gap: var(--kbq-size-s);
 
+            // No header: the pipe template has no presets to go back to.
+            &:first-child {
+                padding-block-start: var(--kbq-size-l);
+            }
+
             & .kbq-form__label {
                 padding-inline-start: var(--kbq-size-l);
             }

package/flag/flag-tokens.scss

@@ -0,0 +1,22 @@
+// Declared with `:where()` so every token stays at zero specificity: a consumer overriding one from
+// a plain global class rule wins, and the shape modifiers below still win over the base values
+// because they are declared later.
+:where(.kbq-flag) {
+    --kbq-flag-aspect-ratio: 3 / 2;
+    --kbq-flag-border-radius: 0;
+
+    // The faded contrast line resolves to a dark hairline in the light theme and a light one in the
+    // dark theme, so the flag stays separated from the background in both.
+    --kbq-flag-shadow-color: var(--kbq-line-contrast-fade);
+    // Opaque on purpose: a translucent fill would take on the hue of a colored card, a selected
+    // option or a toast instead of reading as an absent flag.
+    --kbq-flag-empty-background: var(--kbq-background-bg-tertiary);
+}
+
+:where(.kbq-flag.kbq-flag_square, .kbq-flag.kbq-flag_circle) {
+    --kbq-flag-aspect-ratio: 1 / 1;
+}
+
+:where(.kbq-flag.kbq-flag_circle) {
+    --kbq-flag-border-radius: 50%;
+}

package/flag/flag.scss

@@ -1,11 +1,6 @@
-.kbq-flag {
-    // Theme tokens. The faded contrast line resolves to a dark hairline in the light theme and a
-    // light one in the dark theme, so the flag stays separated from the background in both.
-    --kbq-flag-shadow-color: var(--kbq-line-contrast-fade);
-    --kbq-flag-empty-background: var(--kbq-states-background-disabled);
-    --kbq-flag-border-radius: 0;
-    --kbq-flag-aspect-ratio: 3 / 2;
+@use '../core/styles/common/squircle' as *;
 
+.kbq-flag {
     display: inline-block;
     position: relative;
     box-sizing: border-box;
@@ -15,11 +10,12 @@
     aspect-ratio: var(--kbq-flag-aspect-ratio);
     vertical-align: middle;
     overflow: hidden;
-    border-radius: var(--kbq-flag-border-radius);
+    @include kbq-squircle(var(--kbq-flag-border-radius));
+
+    // The flag fills the box whether it is projected directly or passed through the `svg` input
+    // (the markup may sit inside a wrapper element). The two carriers need different mechanisms.
 
-    // Size the flag image whether it is projected directly or bound via [innerHTML]
-    // (the injected svg may sit inside a wrapper element).
-    svg,
+    // `<img>` is a replaced element, so `object-fit` crops it.
     img {
         display: block;
         width: 100%;
@@ -27,27 +23,44 @@
         object-fit: cover;
     }
 
+    // An inline `<svg>` is not a replaced element: `object-fit` is dropped on it, and its own
+    // `preserveAspectRatio` (`xMidYMid meet`) would letterbox a source whose ratio differs from the
+    // shape. Growing it to at least the box in both axes reproduces `cover` — the intrinsic ratio
+    // from its `viewBox` keeps it undistorted, and the host clips the overflow.
+    svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: auto;
+        height: auto;
+        min-width: 100%;
+        min-height: 100%;
+    }
+
+    // The `svg` input renders into this slot instead of the host element, so it cannot overwrite
+    // projected content. It generates no box of its own.
+    .kbq-flag__svg {
+        display: contents;
+    }
+
     // Inset hairline drawn on top of the flag, gated by the shadow input.
     &.kbq-flag_shadow-inset::after {
         content: '';
         position: absolute;
         inset: 0;
-        border-radius: inherit;
+        @include kbq-squircle-inherit();
         box-shadow: inset 0 0 0 1px var(--kbq-flag-shadow-color);
         pointer-events: none;
     }
 
-    &.kbq-flag_square,
-    &.kbq-flag_circle {
-        --kbq-flag-aspect-ratio: 1 / 1;
-    }
-
-    &.kbq-flag_circle {
-        border-radius: 50%;
-    }
-
     // Neutral placeholder when no flag is projected (unknown / invalid country code).
     &.kbq-flag_empty {
         background: var(--kbq-flag-empty-background);
     }
+
+    // The 50% radius already draws a circle, a squircle would turn it into a rounded square.
+    &.kbq-flag_circle {
+        corner-shape: round;
+    }
 }

package/form-field/{_fiedset-theme.scss → _fieldset-theme.scss}

@@ -1,13 +1,9 @@
 @use './form-field-theme';
-@use './form-field';
 
 @mixin kbq-fieldset-theme {
+    // Geometry of the hint area lives in `fieldset.scss`, next to the rest of the fieldset layout.
     .kbq-form-field__hint {
         @include form-field-theme.kbq-form-field-hint-theme();
         @include form-field-theme.kbq-form-field-hint-typography();
-
-        &:empty {
-            margin-top: 0;
-        }
     }
 }

package/form-field/_form-field-theme.scss

@@ -1,14 +1,13 @@
 @use '../core/styles/common/tokens';
 
 @mixin kbq-form-field-hint-theme {
-    > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+    > .kbq-hint:not(.kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
         color: var(--kbq-form-field-hint-text);
     }
 }
 
 @mixin kbq-form-field-hint-typography {
-    > .kbq-hint:not(.kbq-password-hint, .kbq-reactive-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning)
-        .kbq-hint__text {
+    > .kbq-hint:not(.kbq-reactive-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning) .kbq-hint__text {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }
@@ -98,9 +97,7 @@
         }
 
         // Invalid by control `ErrorStateMatcher`
-        &.kbq-form-field_invalid,
-        // Invalid by `KbqValidateDirective`
-        &.kbq-form-field_has-validate-directive.ng-invalid {
+        &.kbq-form-field_invalid {
             @include _kbq-form-field-state(states-error);
         }
 
@@ -123,9 +120,7 @@
                 }
 
                 // Invalid by control `ErrorStateMatcher`
-                &.kbq-form-field_invalid,
-                // Invalid by `KbqValidateDirective`
-                &.kbq-form-field_has-validate-directive.ng-invalid {
+                &.kbq-form-field_invalid {
                     @include _kbq-form-field-state(states-error);
 
                     &.cdk-focused .kbq-form-field__container {