@fusion.dev/helix 0.146.0 → 0.148.0

package/dist/checkbox/root/checkbox-root.css.js

@@ -1,182 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_checkbox-size: var(--checkbox-size, var(--helix-size-checkbox));
-
---_field-control-inline-size: var(--_checkbox-size);
-display: inline-flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="field"] {
-align-items: center;
-cursor: pointer;
-display: inline-flex;
-gap: var(--helix-space-xs);
-}
-
-:host(:disabled) [part="field"] {
-cursor: default;
-}
-
-:host(:disabled) {
-opacity: 0.5;
-}
-
-[part="box"] {
-display: grid;
-flex: 0 0 auto;
-
-place-items: center;
-}
-
-[part="box"] > * {
-grid-area: 1 / 1;
-}
-
-[part="control"] {
-appearance: none;
-
-background-color: var(--checkbox-background-color, var(--helix-color-background));
-block-size: var(--_checkbox-size);
-border: var(--helix-border-thin) solid var(--checkbox-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-cursor: inherit;
-inline-size: var(--_checkbox-size);
-margin: var(--helix-space-none);
-transition:
+export const styles = createSheet(`:host {--_checkbox-size: var(--checkbox-size, var(--helix-size-checkbox));--_field-control-inline-size: var(--_checkbox-size);display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="field"] {align-items: center;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs);}:host(:disabled) [part="field"] {cursor: default;}:host(:disabled) {opacity: 0.5;}[part="box"] {display: grid;flex: 0 0 auto;place-items: center;}[part="box"] > * {grid-area: 1 / 1;}[part="control"] {appearance: none;background-color: var(--checkbox-background-color, var(--helix-color-background));block-size: var(--_checkbox-size);border: var(--helix-border-thin) solid var(--checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);cursor: inherit;inline-size: var(--_checkbox-size);margin: var(--helix-space-none);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not(:disabled)) [part="field"]:hover [part="control"] {
-border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted));
-}
-
-:host(:state(checked)) [part="control"],
-:host(:state(indeterminate)) [part="control"] {
-border-color: var(
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not(:disabled)) [part="field"]:hover [part="control"] {border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted));}:host(:state(checked)) [part="control"],
+:host(:state(indeterminate)) [part="control"] {border-color: var(
 --checkbox-border-color,
 var(--checkbox-checked-color, var(--helix-color-foreground))
-);
-}
-
-[part~="mark"] {
-
-background-color: var(--checkbox-mark-color, var(--helix-color-foreground));
-block-size: var(--_checkbox-size);
-inline-size: var(--_checkbox-size);
-
-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E");
-mask-position: center;
-mask-repeat: no-repeat;
-mask-size: 100%;
-pointer-events: none;
-
-scale: 0;
-transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
-}
-
-:host(:state(checked)) [part~="mark"],
-:host(:state(indeterminate)) [part~="mark"] {
-scale: 1;
-}
-
-[part~="mark-dash"] {
-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
-}
-
-:host(:state(has-check)) [part~="mark"]:not([part~="mark-dash"]),
-:host(:state(has-dash)) [part~="mark-dash"] {
-background-color: transparent;
-color: var(--checkbox-mark-color, var(--helix-color-foreground));
-display: grid;
-mask-image: none;
-place-items: center;
-}
-
-slot[name="check"]::slotted(*),
-slot[name="dash"]::slotted(*) {
-block-size: var(--checkbox-icon-size, 100%);
-inline-size: var(--checkbox-icon-size, 100%);
-}
-
-[part="control"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:state(invalid)) [part="control"],
-:host(:state(invalid)) [part="field"]:hover [part="control"] {
-border-color: var(--helix-color-danger);
-}
-
-:host(:state(invalid):state(checked)) [part="control"],
-:host(:state(invalid):state(indeterminate)) [part="control"] {
-border-color: var(--helix-color-danger);
-}
-
-:host(:not(:state(has-label))) [part="label"]:not([data-hidden]) {
-display: none;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) {
-display: block;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="field"] {
-align-items: start;
-background-color: var(--checkbox-card-background-color, var(--helix-color-surface));
-border: var(--helix-border-thin) solid
-var(--checkbox-card-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-sm);
-inline-size: 100%;
-padding: var(--checkbox-card-padding, var(--helix-space-md));
-transition:
+);}[part~="mark"] {background-color: var(--checkbox-mark-color, var(--helix-color-foreground));block-size: var(--_checkbox-size);inline-size: var(--_checkbox-size);mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 100%;pointer-events: none;scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}:host(:state(checked)) [part~="mark"],
+:host(:state(indeterminate)) [part~="mark"] {scale: 1;}[part~="mark-dash"] {mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");}:host(:state(has-check)) [part~="mark"]:not([part~="mark-dash"]),
+:host(:state(has-dash)) [part~="mark-dash"] {background-color: transparent;color: var(--checkbox-mark-color, var(--helix-color-foreground));display: grid;mask-image: none;place-items: center;}slot[name="check"]::slotted(*),
+slot[name="dash"]::slotted(*) {block-size: var(--checkbox-icon-size, 100%);inline-size: var(--checkbox-icon-size, 100%);}[part="control"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:state(invalid)) [part="control"],
+:host(:state(invalid)) [part="field"]:hover [part="control"] {border-color: var(--helix-color-danger);}:host(:state(invalid):state(checked)) [part="control"],
+:host(:state(invalid):state(indeterminate)) [part="control"] {border-color: var(--helix-color-danger);}:host(:not(:state(has-label))) [part="label"]:not([data-hidden]) {display: none;}:host(:is([separation="filled"], [separation="outlined"])) {display: block;}:host(:is([separation="filled"], [separation="outlined"])) [part="field"] {align-items: start;background-color: var(--checkbox-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid
+var(--checkbox-card-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-sm);inline-size: 100%;padding: var(--checkbox-card-padding, var(--helix-space-md));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="filled"]) [part="field"] {
-border-color: transparent;
-}
-
-:host(:not(:disabled):is([separation="filled"], [separation="outlined"])) [part="field"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-:host(:is([separation="filled"], [separation="outlined"]):state(checked)) [part="field"] {
-background-color: var(--helix-color-surface-raised);
-border-color: var(--helix-color-primary);
-box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);
-}
-
-:host(:is([separation="filled"], [separation="outlined"]))
-[part="field"]:has([part="control"]:focus-visible) {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="control"]:focus-visible {
-outline: none;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {
-font-size: var(--helix-text-md);
-line-height: var(--helix-leading-normal);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {
-font-size: var(--helix-text-md);
-line-height: var(--helix-leading-normal);
-min-block-size: 1lh;
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="filled"]) [part="field"] {border-color: transparent;}:host(:not(:disabled):is([separation="filled"], [separation="outlined"])) [part="field"]:hover {border-color: var(--helix-color-foreground-muted);}:host(:is([separation="filled"], [separation="outlined"]):state(checked)) [part="field"] {background-color: var(--helix-color-surface-raised);border-color: var(--helix-color-primary);box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);}:host(:is([separation="filled"], [separation="outlined"]))
+[part="field"]:has([part="control"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:is([separation="filled"], [separation="outlined"])) [part="control"]:focus-visible {outline: none;}:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);}:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);min-block-size: 1lh;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

package/dist/checkbox-group/root/checkbox-group-root.css.js

@@ -1,28 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="items"] {
-display: flex;
-flex-direction: column;
-gap: var(--checkbox-group-gap, var(--helix-space-xs));
-}
-
-:host([orientation="horizontal"]) [part="items"] {
-column-gap: var(--checkbox-group-gap, var(--helix-space-md));
-flex-direction: row;
-flex-wrap: wrap;
-}
-
-:host(:state(invalid)) [part="items"] {
---checkbox-border-color: var(--helix-color-danger);
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="items"] {display: flex;flex-direction: column;gap: var(--checkbox-group-gap, var(--helix-space-xs));}:host([orientation="horizontal"]) [part="items"] {column-gap: var(--checkbox-group-gap, var(--helix-space-md));flex-direction: row;flex-wrap: wrap;}:host(:state(invalid)) [part="items"] {--checkbox-border-color: var(--helix-color-danger);}@media print {:host {print-color-adjust: exact;}}`);

package/dist/code/root/code-root.css.js

@@ -1,30 +1,8 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline;
-}
-
-[part="code"] {
-
-background-color: var(
+export const styles = createSheet(`:host {display: inline;}[part="code"] {background-color: var(
 --code-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
-);
-border-radius: var(--code-radius, var(--helix-radii-sm));
-
-color: var(
+);border-radius: var(--code-radius, var(--helix-radii-sm));color: var(
 --code-foreground-color,
 color-mix(in oklab, var(--helix-color-foreground) 30%, var(--helix-color-foreground-muted))
-);
-font-family: var(--code-font-family, var(--helix-font-mono));
-
-font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));
-padding-block: var(--helix-space-none);
-
-padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));
-}
-
-@media print {
-[part="code"] {
-background-color: transparent;
-}
-}`);
+);font-family: var(--code-font-family, var(--helix-font-mono));font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));padding-block: var(--helix-space-none);padding-inline: var(--code-padding, calc(var(--helix-space-2xs) * 0.5));}@media print {[part="code"] {background-color: transparent;}}`);

package/dist/code-block/root/code-block-root.css.js

@@ -1,292 +1,35 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_code-block-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
---_code-block-copy-inset: calc(
-var(--helix-space-sm) +
-(var(--_code-block-line) - var(--helix-size-control-sm)) /
-2
-);
---_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);
-display: flex;
-flex-direction: column;
-}
-
-[part="frame"] {
-flex: 1;
-}
-
-[part="header"] {
-align-items: center;
-
-backdrop-filter: var(--code-block-backdrop, none);
-background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));
-border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));
-border-end-end-radius: var(--helix-radii-none);
-border-end-start-radius: var(--helix-radii-none);
-
-border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
-border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
-display: flex;
-gap: var(--helix-space-sm);
-
-padding-block: var(--helix-space-xs);
-padding-inline: var(--helix-space-md);
-}
-
-[part="header"]:has(> [part="copy"]) {
-padding-block: var(--helix-space-2xs);
-padding-inline-end: var(--helix-space-2xs);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-overflow-wrap: anywhere;
-}
-
-[part="frame"] {
-position: relative;
-}
-
-[part="block"] {
-block-size: 100%;
-}
-
-[part="copy"] {
---icon-button-size: var(--helix-size-control-sm);
-}
-
-[part="header"] > [part="copy"] {
-margin-inline-start: auto;
-}
-
-[part="frame"] > [part="copy"] {
-inset-block-start: var(--_code-block-copy-inset);
-inset-inline-end: var(--_code-block-copy-inset);
-position: absolute;
-}
-
-[part="block"] {
-
-backdrop-filter: var(--code-block-backdrop, none);
-background-color: var(--code-block-background-color, var(--helix-color-background));
-border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));
-border-radius: var(--code-block-radius, var(--helix-radii-lg));
-margin: var(--helix-space-none);
-overflow-x: auto;
-padding-block: var(--helix-space-sm);
-padding-inline: var(--helix-space-md);
-}
-
-:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {
-padding-inline-end: var(--_code-block-gutter);
-}
-
-[part="header"] + [part="frame"] [part="block"] {
-border-block-start-width: var(--helix-space-none);
-border-start-end-radius: var(--helix-radii-none);
-border-start-start-radius: var(--helix-radii-none);
-}
-
-[part="code"] {
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-sm);
-line-height: var(--helix-leading-normal);
-}
-
-:host(:not([diff])) [part="code"] {
-display: block;
-
-max-block-size: var(--code-block-max-block-size, none);
-overflow-x: auto;
-}
-
-:host(:state(expanded)) [part="code"] {
-max-block-size: none;
-}
-
-[part="expand"] {
-all: unset;
-
-box-sizing: border-box;
-border-radius: var(--helix-radii-sm);
-color: var(--code-block-expand-color, var(--helix-color-foreground-muted));
-cursor: pointer;
-font-size: var(--helix-text-sm);
-padding: var(--helix-space-xs);
-}
-
-[part="expand"]:hover {
-color: var(--helix-color-foreground);
-}
-
-[part="expand"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([wrap]:not([diff], [line-numbers])) [part="code"] {
-overflow-wrap: anywhere;
-white-space: pre-wrap;
-}
-
-:host([line-numbers]:not([diff])) [part="block"] {
-column-gap: var(--helix-space-md);
-display: grid;
-grid-template-columns: auto minmax(0, 1fr);
-}
-
-[part="gutter"] {
-color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-sm);
-font-variant-numeric: tabular-nums;
-line-height: var(--helix-leading-normal);
-text-align: end;
-user-select: none;
-}
-
-:host([diff]) {
-gap: var(--helix-space-md);
-}
-
-:host([diff]) [part="file"] {
-container-type: inline-size;
-display: flex;
-flex-direction: column;
-}
-
-:host([diff]) [part="block"],
+export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([wrap]:not([diff], [line-numbers])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}:host([line-numbers]:not([diff])) [part="block"] {column-gap: var(--helix-space-md);display: grid;grid-template-columns: auto minmax(0, 1fr);}[part="gutter"] {color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));font-family: var(--_code-block-face);font-size: var(--_code-block-size);font-variant-numeric: tabular-nums;line-height: var(--_code-block-leading);text-align: end;user-select: none;}:host([diff]) {gap: var(--helix-space-md);}:host([diff]) [part="file"] {container-type: inline-size;display: flex;flex-direction: column;}:host([diff]) [part="block"],
 [part="old"],
-[part="new"] {
-backdrop-filter: var(--code-block-backdrop, none);
-background-color: var(--code-block-background-color, var(--helix-color-background));
-border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));
-border-radius: var(--code-block-radius, var(--helix-radii-lg));
-margin: var(--helix-space-none);
-min-inline-size: 0;
-overflow-x: auto;
-
-padding-block: var(--helix-space-none) var(--helix-space-sm);
-padding-inline: var(--helix-space-none);
-}
-
-:host([diff]:not([no-copy]))
+[part="new"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);min-inline-size: 0;overflow-x: auto;padding-block: var(--helix-space-none) var(--helix-space-sm);padding-inline: var(--helix-space-none);}:host([diff]:not([no-copy]))
 [part="frame"]:not([part="header"] + *)
-:is([part="block"], [part="old"], [part="new"]) {
-padding-block-start: var(--_code-block-gutter);
-}
-
-[part="header"] + [part="frame"] :is([part="block"], [part="split"] > *) {
-border-block-start-width: var(--helix-space-none);
-border-start-end-radius: var(--helix-radii-none);
-border-start-start-radius: var(--helix-radii-none);
-}
-
-[part="split"] {
-display: grid;
-gap: var(--helix-space-xs);
-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-
-@container (inline-size < 40rem) {
-[part="split"] {
-grid-template-columns: minmax(0, 1fr);
-}
-
-[part="header"] + [part="frame"] [part="new"] {
-border-block-start-width: var(--helix-border-thin);
-border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));
-border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));
-}
-
-:host([diff]:not([no-copy])) [part="frame"]:not([part="header"] + *) [part="new"] {
-padding-block-start: var(--helix-space-none);
-}
-}
-
-:host([diff]) [part="code"] {
-display: inline-block;
-min-inline-size: 100%;
-}
-
-[part="hunk"],
+:is([part="block"], [part="old"], [part="new"])
+> [part="code"] {margin-block-start: var(--_code-block-gutter);}[part="header"] + [part="frame"] :is([part="block"], [part="split"] > *) {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="split"] {display: grid;gap: var(--helix-space-xs);grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}@container (inline-size < 40rem) {[part="split"] {grid-template-columns: minmax(0, 1fr);}[part="header"] + [part="frame"] [part="new"] {border-block-start-width: var(--helix-border-thin);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));}:host([diff]:not([no-copy]))
+[part="frame"]:not([part="header"] + *)
+[part="new"]
+> [part="code"] {margin-block-start: var(--helix-space-none);}}:host([diff]) [part="code"] {display: inline-block;min-inline-size: 100%;}[part="hunk"],
 [part="context"],
 [part="added"],
 [part="removed"],
-[part="filler"] {
-display: flex;
-padding-inline: var(--helix-space-md);
-text-decoration: none;
-}
-
-[part="hunk"] {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground-muted);
-}
-
-[part="added"] {
-background-color: color-mix(
+[part="filler"] {display: flex;padding-inline: var(--helix-space-md);text-decoration: none;}[part="hunk"] {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground-muted);}[part="added"] {background-color: color-mix(
 in srgb,
-var(--helix-color-success) 14%,
+var(--code-block-added-color, var(--helix-color-success)) 14%,
 var(--code-block-background-color, var(--helix-color-background))
-);
-}
-
-[part="removed"] {
-background-color: color-mix(
+);}[part="removed"] {background-color: color-mix(
 in srgb,
-var(--helix-color-danger) 14%,
+var(--code-block-removed-color, var(--helix-color-danger)) 14%,
 var(--code-block-background-color, var(--helix-color-background))
-);
-}
-
-[part="marker"] {
-padding-inline-end: var(--helix-space-xs);
-user-select: none;
-}
-
-[part="added"] [part="marker"] {
-color: color-mix(in oklab, var(--helix-color-success) 55%, var(--helix-color-foreground));
-}
-
-[part="removed"] [part="marker"] {
-color: color-mix(in oklab, var(--helix-color-danger) 55%, var(--helix-color-foreground));
-}
-
-[part="filler"] {
-background-color: var(--helix-color-surface-sunken);
-min-block-size: 1lh;
-}
-
-[part="number"] {
-color: var(--helix-color-foreground-muted);
-font-variant-numeric: tabular-nums;
-padding-inline-end: var(--helix-space-sm);
-user-select: none;
-}
-
-@media print {
-:host {
-background-color: transparent;
-}
-
-:host([diff]) [part="block"],
+);}[part="marker"] {padding-inline-end: var(--helix-space-xs);user-select: none;}[part="added"] [part="marker"] {color: color-mix(
+in oklab,
+var(--code-block-added-color, var(--helix-color-success)) 55%,
+var(--helix-color-foreground)
+);}[part="removed"] [part="marker"] {color: color-mix(
+in oklab,
+var(--code-block-removed-color, var(--helix-color-danger)) 55%,
+var(--helix-color-foreground)
+);}[part="filler"] {background-color: var(--helix-color-surface-sunken);min-block-size: 1lh;}[part="number"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;padding-inline-end: var(--helix-space-sm);user-select: none;}@media print {:host {background-color: transparent;}:host([diff]) [part="block"],
 [part="old"],
-[part="new"] {
-overflow: visible;
-white-space: pre-wrap;
-}
-
-[part="added"],
+[part="new"] {overflow: visible;white-space: pre-wrap;}[part="added"],
 [part="removed"],
 [part="hunk"],
-[part="filler"] {
-print-color-adjust: exact;
-}
-}`);
+[part="filler"] {print-color-adjust: exact;}}`);

package/dist/code-block/root/code-block-root.d.ts

@@ -25,14 +25,21 @@ import '../../copy-button/index.js';
  * @category typography
  * @documentation https://fusion.dev/helix/components/code-block
  *
+ * @cssproperty --code-block-added-color - The color a diff's added lines are tinted in and their `+` is drawn in. The success color by default.
  * @cssproperty --code-block-backdrop - A backdrop filter for the block and its header, for a translucent background.
  * @cssproperty --code-block-background-color - The background behind the code. Set it for a block that sits on a surface other than the page background.
  * @cssproperty --code-block-border-color - The line around the block and its header.
+ * @cssproperty --code-block-color - The color of the code. A highlighter's own colors win on the tokens it colors.
  * @cssproperty --code-block-expand-color - The color of the button under a capped block that shows every line.
+ * @cssproperty --code-block-font-family - The typeface of the code and its line numbers. The mono face by default.
+ * @cssproperty --code-block-font-size - The size of the code and its line numbers.
  * @cssproperty --code-block-gutter-color - The color of the line numbers.
  * @cssproperty --code-block-header-background-color - The background behind the name. The default is `surface-raised`.
+ * @cssproperty --code-block-label-color - The color of the name in the header.
+ * @cssproperty --code-block-line-height - The line height of the code and its line numbers, as a number or a length.
  * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
  * @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
+ * @cssproperty --code-block-removed-color - The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static tier: string;