@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-code-block.mjs

@@ -0,0 +1,332 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { CbCopyButton } from '@caribeng/ui/copy-button';
+
+/*
+ * Resaltado de sintaxis propio de CaribeNG, ligero y sin dependencias.
+ * Devuelve tokens (no HTML): quien los pinta decide cómo, sin innerHTML.
+ * Lenguajes: TypeScript/JavaScript, HTML/XML (y plantillas Angular), CSS/SCSS,
+ * JSON, Bash, Python y SQL. Un lenguaje desconocido se devuelve como texto.
+ */
+const words = (list) => new RegExp(`\\b(?:${list.trim().split(/\s+/).join('|')})\\b`, 'y');
+const STRING_DQ = /"(?:\\.|[^"\\\n])*"?/y;
+const STRING_SQ = /'(?:\\.|[^'\\\n])*'?/y;
+const NUMBER = /\b(?:0x[\da-fA-F_]+|0b[01_]+|\d[\d_]*(?:\.\d[\d_]*)?(?:[eE][+-]?\d+)?n?)\b/y;
+const SPACE = /\s+/y;
+const JS = [
+    ['comment', /\/\/.*/y],
+    ['comment', /\/\*[\s\S]*?(?:\*\/|$)/y],
+    ['string', /`(?:\\[\s\S]|[^`\\])*`?/y],
+    ['string', STRING_DQ],
+    ['string', STRING_SQ],
+    ['keyword', /@[A-Za-z_]\w*/y],
+    [
+        'keyword',
+        words(`abstract as async await break case catch class const constructor continue debugger declare default delete do else enum
+      export extends finally for from function get if implements import in instanceof interface is keyof let namespace new of
+      override private protected public readonly return satisfies set static super switch throw try type typeof var void while with yield`),
+    ],
+    ['builtin', words('true false null undefined this NaN Infinity console window document Math JSON Promise Array Object String Number Boolean Date Map Set Error any unknown never string number boolean symbol bigint')],
+    ['number', NUMBER],
+    ['function', /[A-Za-z_$][\w$]*(?=\s*(?:<[^>()]*>)?\()/y],
+    ['variable', /[A-Za-z_$][\w$]*/y],
+    ['operator', /=>|\?\?=?|\?\.|\.{3}|[=!]==?|[<>]=?|&&|\|\||[-+*/%&|^~!?:=]+/y],
+    ['punctuation', /[{}()[\];,.<>]/y],
+];
+const HTML = [
+    // Dentro de una etiqueta: atributos, valores y cierre.
+    ['tag', /\/?>/y, { in: 'tag', exit: true }],
+    ['string', /"[^"]*"?/y, { in: 'tag' }],
+    ['string', /'[^']*'?/y, { in: 'tag' }],
+    ['operator', /=/y, { in: 'tag' }],
+    ['attr', /[^\s=/>"']+/y, { in: 'tag' }],
+    // Fuera: comentarios, etiquetas, interpolación y bloques de control de Angular.
+    ['comment', /<!--[\s\S]*?(?:-->|$)/y],
+    ['keyword', /<!DOCTYPE[^>]*>/iy],
+    ['tag', /<\/?[A-Za-z][\w:.-]*/y, { enter: 'tag' }],
+    ['variable', /\{\{[\s\S]*?(?:\}\}|$)/y],
+    ['keyword', /@(?:if|else if|else|for|empty|switch|case|default|defer|placeholder|loading|let)\b/y],
+    ['plain', /[^<{@\s]+/y],
+];
+const CSS = [
+    ['comment', /\/\*[\s\S]*?(?:\*\/|$)/y],
+    ['comment', /\/\/.*/y],
+    ['string', STRING_DQ],
+    ['string', STRING_SQ],
+    ['keyword', /@[\w-]+/y],
+    ['variable', /--[\w-]+|\$[\w-]+/y],
+    ['number', /#[\da-fA-F]{3,8}\b/y],
+    ['number', /-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|vmin|vmax|s|ms|deg|fr|ch|ex|dvh|svh|lh)?\b/y],
+    ['function', /[\w-]+(?=\()/y],
+    ['property', /[\w-]+(?=\s*:(?!:))/y],
+    ['keyword', words('!important important')],
+    ['punctuation', /[{}()[\];:,>+~*]/y],
+    ['plain', /[\w-]+|[.#&]/y],
+];
+const JSON_RULES = [
+    ['property', /"(?:\\.|[^"\\\n])*"(?=\s*:)/y],
+    ['string', STRING_DQ],
+    ['number', /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y],
+    ['builtin', words('true false null')],
+    ['punctuation', /[{}[\]:,]/y],
+];
+const BASH = [
+    ['comment', /#.*/y],
+    ['string', STRING_DQ],
+    ['string', STRING_SQ],
+    ['variable', /\$\{[^}]*\}?|\$[\w@#?*!$-]/y],
+    ['keyword', words('if then else elif fi for while until do done case esac in function return export local readonly unset source exit')],
+    ['builtin', words('echo cd ls cat cp mv rm mkdir touch grep sed awk curl wget sudo npm npx pnpm yarn node ng nx git docker kubectl')],
+    ['attr', /(?<=\s)--?[\w-]+/y],
+    ['number', /\b\d+\b/y],
+    ['operator', /&&|\|\||[|&;<>]+|=/y],
+];
+const PYTHON = [
+    ['comment', /#.*/y],
+    ['string', /[rbfu]{0,2}(?:"""[\s\S]*?(?:"""|$)|'''[\s\S]*?(?:'''|$))/iy],
+    ['string', /[rbfu]{0,2}(?:"(?:\\.|[^"\\\n])*"?|'(?:\\.|[^'\\\n])*'?)/iy],
+    ['keyword', /@[A-Za-z_][\w.]*/y],
+    ['keyword', words('and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield match case')],
+    ['builtin', words('True False None self print len range dict list set tuple str int float bool open super isinstance enumerate zip map filter')],
+    ['number', NUMBER],
+    ['function', /[A-Za-z_]\w*(?=\s*\()/y],
+    ['variable', /[A-Za-z_]\w*/y],
+    ['operator', /\*\*=?|\/\/=?|->|[-+*/%@&|^~<>!=]=?/y],
+    ['punctuation', /[{}()[\];,.:]/y],
+];
+const SQL = [
+    ['comment', /--.*/y],
+    ['comment', /\/\*[\s\S]*?(?:\*\/|$)/y],
+    ['string', STRING_SQ],
+    ['property', /"(?:[^"]|"")*"?/y],
+    [
+        'keyword',
+        new RegExp(`\\b(?:${'select from where and or not insert into values update set delete create table alter drop index view join left right inner outer full on as group by order having limit offset distinct union all case when then else end is null in between like exists primary key foreign references default returning with desc asc'.split(' ').join('|')})\\b`, 'iy'),
+    ],
+    ['function', /[A-Za-z_]\w*(?=\s*\()/y],
+    ['number', /\b\d+(?:\.\d+)?\b/y],
+    ['operator', /<>|[<>!]=?|[-+*/%=|]+/y],
+    ['punctuation', /[(),;.]/y],
+];
+const LANGUAGES = {
+    ts: JS,
+    typescript: JS,
+    js: JS,
+    javascript: JS,
+    jsx: JS,
+    tsx: JS,
+    mjs: JS,
+    html: HTML,
+    xml: HTML,
+    svg: HTML,
+    angular: HTML,
+    css: CSS,
+    scss: CSS,
+    sass: CSS,
+    less: CSS,
+    json: JSON_RULES,
+    jsonc: JSON_RULES,
+    bash: BASH,
+    sh: BASH,
+    shell: BASH,
+    zsh: BASH,
+    console: BASH,
+    py: PYTHON,
+    python: PYTHON,
+    sql: SQL,
+};
+/** Nombre visible de un lenguaje ("ts" → "TypeScript"). */
+function cbCodeLanguageLabel(language) {
+    const key = language.toLowerCase();
+    const names = {
+        ts: 'TypeScript', typescript: 'TypeScript', tsx: 'TSX', js: 'JavaScript', javascript: 'JavaScript', jsx: 'JSX', mjs: 'JavaScript',
+        html: 'HTML', xml: 'XML', svg: 'SVG', angular: 'Angular', css: 'CSS', scss: 'SCSS', sass: 'Sass', less: 'Less',
+        json: 'JSON', jsonc: 'JSON', bash: 'Bash', sh: 'Shell', shell: 'Shell', zsh: 'Zsh', console: 'Consola',
+        py: 'Python', python: 'Python', sql: 'SQL', text: 'Texto', txt: 'Texto', plaintext: 'Texto',
+    };
+    return names[key] ?? language;
+}
+/** Si hay reglas de resaltado para el lenguaje. */
+function cbCodeSupports(language) {
+    return !!LANGUAGES[language.toLowerCase()];
+}
+function tokenize(code, rules) {
+    const tokens = [];
+    const push = (type, text) => {
+        const last = tokens[tokens.length - 1];
+        if (last && last.type === type && (type === 'plain' || type === 'punctuation'))
+            tokens[tokens.length - 1] = { type, text: last.text + text };
+        else
+            tokens.push({ type, text });
+    };
+    let pos = 0;
+    let state = null;
+    outer: while (pos < code.length) {
+        SPACE.lastIndex = pos;
+        const space = SPACE.exec(code);
+        if (space) {
+            push('plain', space[0]);
+            pos += space[0].length;
+            continue;
+        }
+        for (const [type, re, opts] of rules) {
+            // Las reglas sin `in` solo valen en el estado inicial.
+            if ((opts?.in ?? null) !== state)
+                continue;
+            re.lastIndex = pos;
+            const m = re.exec(code);
+            if (m && m[0].length) {
+                push(type, m[0]);
+                pos += m[0].length;
+                if (opts?.enter)
+                    state = opts.enter;
+                if (opts?.exit)
+                    state = null;
+                continue outer;
+            }
+        }
+        push('plain', code[pos]);
+        pos++;
+    }
+    return tokens;
+}
+/**
+ * Tokeniza `code` y lo reparte en líneas (los comentarios y strings de varias
+ * líneas se parten en cada salto). Lenguaje desconocido = texto plano.
+ */
+function cbHighlight(code, language = '') {
+    const source = (code ?? '').replace(/\r\n?/g, '\n');
+    const rules = LANGUAGES[language.toLowerCase()];
+    const tokens = rules ? tokenize(source, rules) : [{ type: 'plain', text: source }];
+    const lines = [[]];
+    for (const token of tokens) {
+        const parts = token.text.split('\n');
+        parts.forEach((part, i) => {
+            if (i > 0)
+                lines.push([]);
+            if (part)
+                lines[lines.length - 1].push({ type: token.type, text: part });
+        });
+    }
+    return lines;
+}
+/** Interpreta `"1,3-5"` o `[1, 3, 4, 5]` como conjunto de números de línea. */
+function cbParseLineSet(value) {
+    if (!value)
+        return new Set();
+    if (Array.isArray(value))
+        return new Set(value);
+    const set = new Set();
+    for (const part of String(value).split(',')) {
+        const [a, b] = part.split('-').map((n) => Number(n.trim()));
+        if (!Number.isFinite(a))
+            continue;
+        const end = Number.isFinite(b) ? b : a;
+        for (let n = Math.min(a, end); n <= Math.max(a, end); n++)
+            set.add(n);
+    }
+    return set;
+}
+
+/**
+ * Bloque de código de CaribeNG con resaltado de sintaxis propio (sin
+ * dependencias), nombre de archivo o lenguaje, botón de copiar, números de
+ * línea y líneas destacadas. Sigue el tema claro u oscuro.
+ *
+ * El código se pinta como texto (tokens), nunca como HTML.
+ *
+ * @example
+ * ```html
+ * <cb-code-block language="ts" filename="app.config.ts" [code]="codigo" lineNumbers highlightLines="3-4" />
+ * ```
+ */
+class CbCodeBlock {
+    constructor() {
+        /** Código a mostrar. */
+        this.code = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+        /** Lenguaje (`ts`, `html`, `css`, `json`, `bash`, `python`, `sql`…). Desconocido = texto. */
+        this.language = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+        /** Nombre de archivo en la cabecera (en lugar del lenguaje). */
+        this.filename = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
+        this.lineNumbers = input(false, { ...(ngDevMode ? { debugName: "lineNumbers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Número de la primera línea. */
+        this.startLine = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startLine" }] : /* istanbul ignore next */ []));
+        /** Líneas destacadas: `"2,5-7"` o `[2, 5, 6, 7]`. */
+        this.highlightLines = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightLines" }] : /* istanbul ignore next */ []));
+        /** Parte las líneas largas en lugar de hacer scroll horizontal. */
+        this.wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.copyable = input(true, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra la cabecera (lenguaje o archivo y copiar). */
+        this.header = input(true, { ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Alto máximo con scroll (`20rem`). */
+        this.maxHeight = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /** Nombre del bloque. Por defecto, el archivo o el lenguaje. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Tokens por línea (sin la línea vacía final que deja un salto de línea al terminar). */
+        this.lines = computed(() => cbHighlight(this.code().replace(/\n$/, ''), this.language()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => cbParseLineSet(this.highlightLines()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.languageLabel = computed(() => (this.language() ? cbCodeLanguageLabel(this.language()) : ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageLabel" }] : /* istanbul ignore next */ []));
+        this.showHeader = computed(() => this.header() && (!!this.filename() || !!this.language() || this.copyable()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbCodeBlock, isStandalone: true, selector: "cb-code-block", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, startLine: { classPropertyName: "startLine", publicName: "startLine", isSignal: true, isRequired: false, transformFunction: null }, highlightLines: { classPropertyName: "highlightLines", publicName: "highlightLines", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.cb-code-block--wrap": "wrap()", "class.cb-code-block--numbers": "lineNumbers()" }, classAttribute: "cb-code-block" }, ngImport: i0, template: `
+    @if (showHeader()) {
+      <div class="cb-code-block__header">
+        <span class="cb-code-block__title">{{ filename() || languageLabel() }}</span>
+        @if (copyable()) {
+          <cb-copy-button class="cb-code-block__copy" [value]="code()" size="sm" />
+        }
+      </div>
+    }
+    <pre
+      class="cb-code-block__pre"
+      tabindex="0"
+      [style.max-height]="maxHeight() || null"
+      [attr.aria-label]="ariaLabel() ?? (filename() || languageLabel() || null)"
+    ><!-- En una línea: dentro de <pre> cada espacio cuenta. --><code class="cb-code-block__code">@for (line of lines(); track $index; let i = $index) {<span class="cb-code-block__line" [class.cb-code-block__line--hl]="highlighted().has(i + startLine())">@if (lineNumbers()) {<span class="cb-code-block__ln" aria-hidden="true">{{ i + startLine() }}</span>}<span class="cb-code-block__text">@for (token of line; track $index) {<span [class]="token.type === 'plain' ? null : 'cb-tok cb-tok-' + token.type">{{ token.text }}</span>}</span></span>}</code></pre>
+  `, isInline: true, styles: [":host{--cb-code-bg: #f6f8fa;--cb-code-fg: #1f2328;--cb-code-border: var(--cb-color-border);--cb-code-muted: #6e7781;--cb-code-hl: rgb(234 179 8 / .16);--cb-tok-keyword: #cf222e;--cb-tok-builtin: #0550ae;--cb-tok-string: #0a3069;--cb-tok-number: #0550ae;--cb-tok-comment: #6e7781;--cb-tok-function: #8250df;--cb-tok-operator: #cf222e;--cb-tok-punctuation: #57606a;--cb-tok-tag: #116329;--cb-tok-attr: #0550ae;--cb-tok-property: #0550ae;--cb-tok-variable: #1f2328;display:block;overflow:hidden;border:1px solid var(--cb-code-border);border-radius:var(--cb-radius-md, 8px);background:var(--cb-code-bg);color:var(--cb-code-fg);font-family:var(--cb-font-sans)}:host-context([data-theme=\"dark\"]){--cb-code-bg: #0d1117;--cb-code-fg: #e6edf3;--cb-code-muted: #8b949e;--cb-code-hl: rgb(234 179 8 / .14);--cb-tok-keyword: #ff7b72;--cb-tok-builtin: #79c0ff;--cb-tok-string: #a5d6ff;--cb-tok-number: #79c0ff;--cb-tok-comment: #8b949e;--cb-tok-function: #d2a8ff;--cb-tok-operator: #ff7b72;--cb-tok-punctuation: #b1bac4;--cb-tok-tag: #7ee787;--cb-tok-attr: #79c0ff;--cb-tok-property: #79c0ff;--cb-tok-variable: #e6edf3}.cb-code-block__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.25rem;padding:.125rem .25rem .125rem .875rem;border-bottom:1px solid var(--cb-code-border);color:var(--cb-code-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-code-block__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-code-block__pre{margin:0;padding:.75rem 0;overflow:auto;font-family:var(--cb-font-mono);font-size:.8125rem;line-height:1.6;tab-size:2}.cb-code-block__pre:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-code-block__code{display:block;min-width:fit-content;font:inherit}.cb-code-block__line{display:flex;padding:0 1rem}.cb-code-block__line--hl{background:var(--cb-code-hl);box-shadow:inset 3px 0 #eab308cc}.cb-code-block__ln{flex:none;min-width:2ch;margin-right:1rem;color:var(--cb-code-muted);text-align:right;-webkit-user-select:none;user-select:none}.cb-code-block__text{white-space:pre}.cb-code-block__text:empty:before{content:\" \"}:host(.cb-code-block--wrap) .cb-code-block__code{min-width:0}:host(.cb-code-block--wrap) .cb-code-block__text{white-space:pre-wrap;overflow-wrap:anywhere}.cb-tok-keyword{color:var(--cb-tok-keyword)}.cb-tok-builtin{color:var(--cb-tok-builtin)}.cb-tok-string{color:var(--cb-tok-string)}.cb-tok-number{color:var(--cb-tok-number)}.cb-tok-comment{color:var(--cb-tok-comment);font-style:italic}.cb-tok-function{color:var(--cb-tok-function)}.cb-tok-operator{color:var(--cb-tok-operator)}.cb-tok-punctuation{color:var(--cb-tok-punctuation)}.cb-tok-tag{color:var(--cb-tok-tag)}.cb-tok-attr{color:var(--cb-tok-attr)}.cb-tok-property{color:var(--cb-tok-property)}.cb-tok-variable{color:var(--cb-tok-variable)}\n"], dependencies: [{ kind: "component", type: CbCopyButton, selector: "cb-copy-button", inputs: ["value", "showLabel", "label", "copiedLabel", "timeout", "variant", "severity", "size", "disabled"], outputs: ["copied", "copyError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbCodeBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-code-block', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbCopyButton], host: {
+                        class: 'cb-code-block',
+                        '[class.cb-code-block--wrap]': 'wrap()',
+                        '[class.cb-code-block--numbers]': 'lineNumbers()',
+                    }, template: `
+    @if (showHeader()) {
+      <div class="cb-code-block__header">
+        <span class="cb-code-block__title">{{ filename() || languageLabel() }}</span>
+        @if (copyable()) {
+          <cb-copy-button class="cb-code-block__copy" [value]="code()" size="sm" />
+        }
+      </div>
+    }
+    <pre
+      class="cb-code-block__pre"
+      tabindex="0"
+      [style.max-height]="maxHeight() || null"
+      [attr.aria-label]="ariaLabel() ?? (filename() || languageLabel() || null)"
+    ><!-- En una línea: dentro de <pre> cada espacio cuenta. --><code class="cb-code-block__code">@for (line of lines(); track $index; let i = $index) {<span class="cb-code-block__line" [class.cb-code-block__line--hl]="highlighted().has(i + startLine())">@if (lineNumbers()) {<span class="cb-code-block__ln" aria-hidden="true">{{ i + startLine() }}</span>}<span class="cb-code-block__text">@for (token of line; track $index) {<span [class]="token.type === 'plain' ? null : 'cb-tok cb-tok-' + token.type">{{ token.text }}</span>}</span></span>}</code></pre>
+  `, styles: [":host{--cb-code-bg: #f6f8fa;--cb-code-fg: #1f2328;--cb-code-border: var(--cb-color-border);--cb-code-muted: #6e7781;--cb-code-hl: rgb(234 179 8 / .16);--cb-tok-keyword: #cf222e;--cb-tok-builtin: #0550ae;--cb-tok-string: #0a3069;--cb-tok-number: #0550ae;--cb-tok-comment: #6e7781;--cb-tok-function: #8250df;--cb-tok-operator: #cf222e;--cb-tok-punctuation: #57606a;--cb-tok-tag: #116329;--cb-tok-attr: #0550ae;--cb-tok-property: #0550ae;--cb-tok-variable: #1f2328;display:block;overflow:hidden;border:1px solid var(--cb-code-border);border-radius:var(--cb-radius-md, 8px);background:var(--cb-code-bg);color:var(--cb-code-fg);font-family:var(--cb-font-sans)}:host-context([data-theme=\"dark\"]){--cb-code-bg: #0d1117;--cb-code-fg: #e6edf3;--cb-code-muted: #8b949e;--cb-code-hl: rgb(234 179 8 / .14);--cb-tok-keyword: #ff7b72;--cb-tok-builtin: #79c0ff;--cb-tok-string: #a5d6ff;--cb-tok-number: #79c0ff;--cb-tok-comment: #8b949e;--cb-tok-function: #d2a8ff;--cb-tok-operator: #ff7b72;--cb-tok-punctuation: #b1bac4;--cb-tok-tag: #7ee787;--cb-tok-attr: #79c0ff;--cb-tok-property: #79c0ff;--cb-tok-variable: #e6edf3}.cb-code-block__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.25rem;padding:.125rem .25rem .125rem .875rem;border-bottom:1px solid var(--cb-code-border);color:var(--cb-code-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-code-block__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cb-code-block__pre{margin:0;padding:.75rem 0;overflow:auto;font-family:var(--cb-font-mono);font-size:.8125rem;line-height:1.6;tab-size:2}.cb-code-block__pre:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-code-block__code{display:block;min-width:fit-content;font:inherit}.cb-code-block__line{display:flex;padding:0 1rem}.cb-code-block__line--hl{background:var(--cb-code-hl);box-shadow:inset 3px 0 #eab308cc}.cb-code-block__ln{flex:none;min-width:2ch;margin-right:1rem;color:var(--cb-code-muted);text-align:right;-webkit-user-select:none;user-select:none}.cb-code-block__text{white-space:pre}.cb-code-block__text:empty:before{content:\" \"}:host(.cb-code-block--wrap) .cb-code-block__code{min-width:0}:host(.cb-code-block--wrap) .cb-code-block__text{white-space:pre-wrap;overflow-wrap:anywhere}.cb-tok-keyword{color:var(--cb-tok-keyword)}.cb-tok-builtin{color:var(--cb-tok-builtin)}.cb-tok-string{color:var(--cb-tok-string)}.cb-tok-number{color:var(--cb-tok-number)}.cb-tok-comment{color:var(--cb-tok-comment);font-style:italic}.cb-tok-function{color:var(--cb-tok-function)}.cb-tok-operator{color:var(--cb-tok-operator)}.cb-tok-punctuation{color:var(--cb-tok-punctuation)}.cb-tok-tag{color:var(--cb-tok-tag)}.cb-tok-attr{color:var(--cb-tok-attr)}.cb-tok-property{color:var(--cb-tok-property)}.cb-tok-variable{color:var(--cb-tok-variable)}\n"] }]
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], filename: [{ type: i0.Input, args: [{ isSignal: true, alias: "filename", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], startLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLine", required: false }] }], highlightLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightLines", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/code-block
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbCodeBlock, cbCodeLanguageLabel, cbCodeSupports, cbHighlight, cbParseLineSet };

package/fesm2022/caribeng-ui-colorpicker.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { model, input, signal, viewChild, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injector, model, input, signal, viewChild, computed, afterNextRender, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { injectCbTranslation, cbFieldState } from '@caribeng/ui';
+import { injectCbTranslation, cbFormat, cbFieldState } from '@caribeng/ui';
 
 let nextUid = 0;
 const DEFAULT_PRESETS = [
@@ -25,6 +25,8 @@ class CbColorPicker {
     constructor() {
         /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
         this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.injector = inject(Injector);
         /** Color seleccionado (hex `#rrggbb`). Two-way opcional fuera de Forms. */
         this.value = model('#10b981', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -87,7 +89,13 @@ class CbColorPicker {
     toggle() {
         if (this.isDisabled())
             return;
-        this.open() ? this.close() : this.open.set(true);
+        if (this.open()) {
+            this.close();
+            return;
+        }
+        this.open.set(true);
+        // El panel se pinta al final del documento: el foco entra en él al abrir.
+        afterNextRender(() => this.svRef()?.nativeElement.focus(), { injector: this.injector });
     }
     close() {
         if (!this.open())
@@ -100,7 +108,63 @@ class CbColorPicker {
         if (event.key === 'Escape') {
             event.preventDefault();
             this.close();
+            return;
+        }
+        // Tab fuera del panel (antes del primero o después del último) lo cierra y vuelve al botón.
+        if (event.key !== 'Tab' || !(event.target instanceof Element))
+            return;
+        const panel = event.target.closest('.cb-colorpicker__panel');
+        const focusables = panel ? Array.from(panel.querySelectorAll('[tabindex="0"], input, button')) : [];
+        const edge = event.shiftKey ? focusables[0] : focusables[focusables.length - 1];
+        if (event.target === edge) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    // --- Teclado en el área y el matiz (Mayús: pasos de 10) --------------------
+    onSvKeydown(event) {
+        const step = event.shiftKey ? 10 : 1;
+        const clamp = (n) => Math.min(100, Math.max(0, n));
+        switch (event.key) {
+            case 'ArrowRight':
+                this.s.set(clamp(this.s() + step));
+                break;
+            case 'ArrowLeft':
+                this.s.set(clamp(this.s() - step));
+                break;
+            case 'ArrowUp':
+                this.v.set(clamp(this.v() + step));
+                break;
+            case 'ArrowDown':
+                this.v.set(clamp(this.v() - step));
+                break;
+            default: return;
         }
+        event.preventDefault();
+        this.commitFromHsv();
+    }
+    onHueKeydown(event) {
+        const step = event.shiftKey ? 10 : 1;
+        const clamp = (n) => Math.min(360, Math.max(0, n));
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this.h.set(clamp(this.h() + step));
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this.h.set(clamp(this.h() - step));
+                break;
+            case 'Home':
+                this.h.set(0);
+                break;
+            case 'End':
+                this.h.set(360);
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        this.commitFromHsv();
     }
     // --- Área saturación/valor -------------------------------------------------
     onSvPointerDown(event) {
@@ -216,8 +280,16 @@ class CbColorPicker {
         <div
           #sv
           class="cb-colorpicker__sv"
+          role="slider"
+          tabindex="0"
+          [attr.aria-label]="t().colorArea"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="s()"
+          [attr.aria-valuetext]="fmt(t().colorAreaValue, s(), v())"
           [style.background-color]="hueColor()"
           (pointerdown)="onSvPointerDown($event)"
+          (keydown)="onSvKeydown($event)"
         >
           <div class="cb-colorpicker__sv-white"></div>
           <div class="cb-colorpicker__sv-black"></div>
@@ -233,7 +305,14 @@ class CbColorPicker {
           <div
             #hue
             class="cb-colorpicker__hue"
+            role="slider"
+            tabindex="0"
+            [attr.aria-label]="t().hue"
+            aria-valuemin="0"
+            aria-valuemax="360"
+            [attr.aria-valuenow]="h()"
             (pointerdown)="onHuePointerDown($event)"
+            (keydown)="onHueKeydown($event)"
           >
             <div class="cb-colorpicker__hue-pointer" [style.left.%]="(h() / 360) * 100"></div>
           </div>
@@ -268,7 +347,7 @@ class CbColorPicker {
         }
       </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__sv:focus-visible,.cb-colorpicker__hue:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbColorPicker, decorators: [{
             type: Component,
@@ -313,8 +392,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <div
           #sv
           class="cb-colorpicker__sv"
+          role="slider"
+          tabindex="0"
+          [attr.aria-label]="t().colorArea"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="s()"
+          [attr.aria-valuetext]="fmt(t().colorAreaValue, s(), v())"
           [style.background-color]="hueColor()"
           (pointerdown)="onSvPointerDown($event)"
+          (keydown)="onSvKeydown($event)"
         >
           <div class="cb-colorpicker__sv-white"></div>
           <div class="cb-colorpicker__sv-black"></div>
@@ -330,7 +417,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           <div
             #hue
             class="cb-colorpicker__hue"
+            role="slider"
+            tabindex="0"
+            [attr.aria-label]="t().hue"
+            aria-valuemin="0"
+            aria-valuemax="360"
+            [attr.aria-valuenow]="h()"
             (pointerdown)="onHuePointerDown($event)"
+            (keydown)="onHueKeydown($event)"
           >
             <div class="cb-colorpicker__hue-pointer" [style.left.%]="(h() / 360) * 100"></div>
           </div>
@@ -365,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }
       </div>
     </ng-template>
-  `, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"] }]
+  `, styles: [":host{display:inline-block}.cb-colorpicker__trigger{display:inline-flex;align-items:center;gap:var(--cb-space-2);min-height:2.5rem;padding:0 var(--cb-space-3) 0 var(--cb-space-2);background-color:var(--cb-color-bg);border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);color:var(--cb-color-text);font-family:var(--cb-font-sans);cursor:pointer;transition:border-color var(--cb-duration-fast) var(--cb-ease),box-shadow var(--cb-duration-fast) var(--cb-ease)}.cb-colorpicker__trigger--sm{min-height:2.125rem;font-size:var(--cb-text-sm)}.cb-colorpicker__trigger--lg{min-height:2.875rem;font-size:var(--cb-text-lg)}.cb-colorpicker__trigger:focus-visible,.cb-colorpicker__trigger.cb-is-open{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__trigger.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-colorpicker__trigger.cb-is-disabled{opacity:var(--cb-opacity-disabled, .55);cursor:default}.cb-colorpicker__swatch{width:1.5rem;height:1.5rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__value{font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.02em}.cb-colorpicker__panel{width:15rem;padding:var(--cb-space-3);background-color:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);box-shadow:var(--cb-shadow-md);font-family:var(--cb-font-sans)}.cb-colorpicker__sv{position:relative;height:9rem;border-radius:var(--cb-radius-sm);cursor:crosshair;touch-action:none;overflow:hidden}.cb-colorpicker__sv-white,.cb-colorpicker__sv-black{position:absolute;inset:0}.cb-colorpicker__sv-white{background:linear-gradient(to right,#fff,#fff0)}.cb-colorpicker__sv-black{background:linear-gradient(to top,#000,#0000)}.cb-colorpicker__sv-pointer{position:absolute;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__controls{display:flex;align-items:center;gap:var(--cb-space-3);margin-top:var(--cb-space-3)}.cb-colorpicker__hue{position:relative;flex:1 1 auto;height:.875rem;border-radius:var(--cb-radius-full);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cb-colorpicker__hue-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:var(--cb-radius-full);background:#fff;box-shadow:0 0 0 1px #0000004d;pointer-events:none}.cb-colorpicker__preview{width:1.75rem;height:1.75rem;flex:none;border-radius:var(--cb-radius-sm);box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__fields{margin-top:var(--cb-space-3)}.cb-colorpicker__hex{width:100%;padding:var(--cb-space-2);text-align:center;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.04em;border:var(--cb-border-width) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-sm);background-color:var(--cb-color-bg);color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);outline:none}.cb-colorpicker__hex:focus{border-color:var(--cb-color-primary-500);box-shadow:0 0 0 3px var(--cb-color-focus-ring)}.cb-colorpicker__presets{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--cb-space-2);margin-top:var(--cb-space-3)}.cb-colorpicker__preset{aspect-ratio:1;border:none;border-radius:var(--cb-radius-sm);cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cb-colorpicker__preset.cb-is-active{box-shadow:inset 0 0 0 1px #00000026,0 0 0 2px var(--cb-color-primary-500)}.cb-colorpicker__sv:focus-visible,.cb-colorpicker__hue:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}.cb-colorpicker__preset:focus-visible{outline:2px solid var(--cb-color-primary-500);outline-offset:2px}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], svRef: [{ type: i0.ViewChild, args: ['sv', { isSignal: true }] }], hueRef: [{ type: i0.ViewChild, args: ['hue', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';