@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,221 +1,25 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
---_carousel-gap: var(--carousel-gap, var(--helix-space-md));
-}
-
-:host {
-display: grid;
-grid-template-columns: auto minmax(0, 1fr) auto;
-grid-template-rows: auto minmax(0, 1fr) auto;
-}
-
-[part="track"] {
-grid-area: 2 / 2;
-}
-
-[part="controls"],
-[part="indicators"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-}
-
-[part="indicators"] {
-grid-area: 3 / 2;
-justify-self: var(--_carousel-indicators-along);
-padding-block-start: var(--helix-space-sm);
-padding-inline: var(--_carousel-bleed);
-}
-
-[part="controls"] {
-grid-area: 3 / 2;
-justify-self: var(--_carousel-controls-along);
-padding-block-start: var(--helix-space-sm);
-padding-inline: var(--_carousel-bleed);
-}
-
-[part="indicators"] {
---_carousel-indicators-along: start;
-}
-
-[part="controls"] {
---_carousel-controls-along: end;
-}
-
-@media (hover: none) and (pointer: coarse) {
-
-:host(:not([controls="always"])) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-}
-
-:host([indicator-placement="top"]) [part="indicators"] {
-grid-area: 1 / 2;
-padding-block: var(--helix-space-none) var(--helix-space-sm);
-}
-
-:host([controls-placement="top"]) [part="controls"] {
-grid-area: 1 / 2;
-padding-block: var(--helix-space-none) var(--helix-space-sm);
-}
-
-:host([indicator-placement="start"]) [part="indicators"],
-:host([indicator-placement="end"]) [part="indicators"] {
-align-self: var(--_carousel-indicators-along);
-flex-direction: column;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-}
-
-:host([controls-placement="start"]) [part="controls"],
-:host([controls-placement="end"]) [part="controls"] {
-align-self: var(--_carousel-controls-along);
-flex-direction: column;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-}
-
-:host([indicator-placement="start"]) [part="indicators"],
-:host([indicator-placement="end"]) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-
-:host([controls-placement="start"]) [part="controls"],
+export const styles = createSheet(`:host {--_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));--_carousel-gap: var(--carousel-gap, var(--helix-space-md));}:host {display: grid;grid-template-columns: auto minmax(0, 1fr) auto;grid-template-rows: auto minmax(0, 1fr) auto;}[part="track"] {grid-area: 2 / 2;}[part="controls"],
+[part="indicators"] {align-items: center;display: flex;gap: var(--helix-space-2xs);}[part="indicators"] {grid-area: 3 / 2;justify-self: var(--_carousel-indicators-along);padding-block-start: var(--helix-space-sm);padding-inline: var(--_carousel-bleed);}[part="controls"] {grid-area: 3 / 2;justify-self: var(--_carousel-controls-along);padding-block-start: var(--helix-space-sm);padding-inline: var(--_carousel-bleed);}[part="indicators"] {--_carousel-indicators-along: start;}[part="controls"] {--_carousel-controls-along: end;}@media (hover: none) and (pointer: coarse) {:host(:not([controls="always"])) [part="indicators"] {--_carousel-indicators-along: center;}}:host([indicator-placement="top"]) [part="indicators"] {grid-area: 1 / 2;padding-block: var(--helix-space-none) var(--helix-space-sm);}:host([controls-placement="top"]) [part="controls"] {grid-area: 1 / 2;padding-block: var(--helix-space-none) var(--helix-space-sm);}:host([indicator-placement="start"]) [part="indicators"],
+:host([indicator-placement="end"]) [part="indicators"] {align-self: var(--_carousel-indicators-along);flex-direction: column;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);}:host([controls-placement="start"]) [part="controls"],
+:host([controls-placement="end"]) [part="controls"] {align-self: var(--_carousel-controls-along);flex-direction: column;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);}:host([indicator-placement="start"]) [part="indicators"],
+:host([indicator-placement="end"]) [part="indicators"] {--_carousel-indicators-along: center;}:host([controls-placement="start"]) [part="controls"],
 :host([controls-placement="end"]) [part="controls"],
-:host([controls-placement="overlay"]) [part="controls"] {
---_carousel-controls-along: center;
-}
-
-:host([indicator-placement="overlay"]) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-
-:host([indicator-align="start"]) [part="indicators"] {
---_carousel-indicators-along: start;
-}
-
-:host([indicator-align="center"]) [part="indicators"] {
---_carousel-indicators-along: center;
-}
-
-:host([indicator-align="end"]) [part="indicators"] {
---_carousel-indicators-along: end;
-}
-
-:host([controls-align="start"]) [part="controls"] {
---_carousel-controls-along: start;
-}
-
-:host([controls-align="center"]) [part="controls"] {
---_carousel-controls-along: center;
-}
-
-:host([controls-align="end"]) [part="controls"] {
---_carousel-controls-along: end;
-}
-
-:host([indicator-placement="start"]) [part="indicators"] {
-grid-area: 2 / 1;
-padding-inline-end: var(--helix-space-sm);
-}
-
-:host([controls-placement="start"]) [part="controls"] {
-grid-area: 2 / 1;
-padding-inline-end: var(--helix-space-sm);
-}
-
-:host([indicator-placement="end"]) [part="indicators"] {
-grid-area: 2 / 3;
-padding-inline-start: var(--helix-space-sm);
-}
-
-:host([controls-placement="end"]) [part="controls"] {
-grid-area: 2 / 3;
-padding-inline-start: var(--helix-space-sm);
-}
-
-[part="rotation"],
+:host([controls-placement="overlay"]) [part="controls"] {--_carousel-controls-along: center;}:host([indicator-placement="overlay"]) [part="indicators"] {--_carousel-indicators-along: center;}:host([indicator-align="start"]) [part="indicators"] {--_carousel-indicators-along: start;}:host([indicator-align="center"]) [part="indicators"] {--_carousel-indicators-along: center;}:host([indicator-align="end"]) [part="indicators"] {--_carousel-indicators-along: end;}:host([controls-align="start"]) [part="controls"] {--_carousel-controls-along: start;}:host([controls-align="center"]) [part="controls"] {--_carousel-controls-along: center;}:host([controls-align="end"]) [part="controls"] {--_carousel-controls-along: end;}:host([indicator-placement="start"]) [part="indicators"] {grid-area: 2 / 1;padding-inline-end: var(--helix-space-sm);}:host([controls-placement="start"]) [part="controls"] {grid-area: 2 / 1;padding-inline-end: var(--helix-space-sm);}:host([indicator-placement="end"]) [part="indicators"] {grid-area: 2 / 3;padding-inline-start: var(--helix-space-sm);}:host([controls-placement="end"]) [part="controls"] {grid-area: 2 / 3;padding-inline-start: var(--helix-space-sm);}[part="rotation"],
 [part="previous"],
-[part="next"] {
-all: unset;
-
-box-sizing: border-box;
-align-items: center;
-block-size: var(--helix-size-control-tight);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--helix-size-control-tight);
-justify-content: center;
-}
-
-[part="rotation"]:hover,
+[part="next"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--helix-size-control-tight);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control-tight);justify-content: center;}[part="rotation"]:hover,
 [part="previous"]:hover,
-[part="next"]:hover {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground);
-}
-
-[part="rotation"]:focus-visible,
+[part="next"]:hover {background-color: var(--helix-color-surface-sunken);color: var(--helix-color-foreground);}[part="rotation"]:focus-visible,
 [part="previous"]:focus-visible,
-[part="next"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="rotation"] svg,
+[part="next"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="rotation"] svg,
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="previous-icon"]),
-::slotted([slot="next-icon"]) {
-block-size: 1em;
-inline-size: 1em;
-}
-
-:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
-:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
-scale: -1 1;
-}
-
-:host([mouse-drag]) [part="track"] {
-cursor: grab;
-}
-
-:host(:state(dragging)) [part="track"] {
-cursor: grabbing;
-user-select: none;
-}
-
-[part="track"] {
-
---_carousel-share: calc(
+::slotted([slot="next-icon"]) {block-size: 1em;inline-size: 1em;}:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}:host([mouse-drag]) [part="track"] {cursor: grab;}:host(:state(dragging)) [part="track"] {cursor: grabbing;user-select: none;}[part="track"] {--_carousel-share: calc(
 (100% - (var(--carousel-per-view, 1) - 1) * var(--_carousel-gap)) /
 var(--carousel-per-view, 1)
-);
---carousel-gap: var(--_carousel-gap);
---carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
-display: flex;
-gap: var(--_carousel-gap);
-overflow-x: auto;
-
-padding-block: var(--helix-space-md);
-padding-inline: var(--_carousel-bleed);
-scroll-padding-inline: var(--_carousel-bleed);
-scroll-snap-type: x mandatory;
-scrollbar-width: none;
-}
-
-[part="track"]::-webkit-scrollbar {
-display: none;
-}
-
-:host([per-view="auto"]:not([orientation="vertical"])) [part="track"] {
---carousel-per-view: max(
+);--carousel-gap: var(--_carousel-gap);--carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);display: flex;gap: var(--_carousel-gap);overflow-x: auto;padding-block: var(--helix-space-md);padding-inline: var(--_carousel-bleed);scroll-padding-inline: var(--_carousel-bleed);scroll-snap-type: x mandatory;scrollbar-width: none;}[part="track"]::-webkit-scrollbar {display: none;}:host([per-view="auto"]:not([orientation="vertical"])) [part="track"] {--carousel-per-view: max(
 1,
 round(
 down,
@@ -225,185 +29,15 @@ calc(
 ),
 1
 )
-);
-container-type: inline-size;
-}
-
-:host([orientation="vertical"]) [part="track"] {
-block-size: var(--carousel-block-size, 20rem);
-flex-direction: column;
-overflow-x: hidden;
-overflow-y: auto;
-padding-block: var(--_carousel-bleed);
-scroll-padding-block: var(--_carousel-bleed);
-scroll-snap-type: y mandatory;
-}
-
-[part="slide"] {
-display: flex;
-flex: 0 0 var(--carousel-pane);
-margin-inline-end: var(--carousel-run-end, 0px);
-scroll-snap-align: start;
-}
-
-:host([per-view="auto"]:not([orientation="vertical"])) [part="slide"] {
-flex-grow: 1;
-}
-
-[part="slide"] ::slotted(*) {
-flex: 1 1 0;
-min-block-size: 0;
-min-inline-size: 0;
-}
-
-:host([orientation="vertical"]) [part="slide"] {
-flex-direction: column;
-flex: 0 0 var(--_carousel-share);
-}
-
-[part~="indicator"] {
-
---_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);
-all: unset;
-background-color: var(--helix-color-border);
-block-size: var(--helix-space-xs);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-cursor: pointer;
-inline-size: var(--helix-space-xs);
-transition:
+);container-type: inline-size;}:host([orientation="vertical"]) [part="track"] {block-size: var(--carousel-block-size, 20rem);flex-direction: column;overflow-x: hidden;overflow-y: auto;padding-block: var(--_carousel-bleed);scroll-padding-block: var(--_carousel-bleed);scroll-snap-type: y mandatory;}[part="slide"] {display: flex;flex: 0 0 var(--carousel-pane);margin-inline-end: var(--carousel-run-end, 0px);scroll-snap-align: start;}:host([per-view="auto"]:not([orientation="vertical"])) [part="slide"] {flex-grow: 1;}[part="slide"] ::slotted(*) {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;}:host([orientation="vertical"]) [part="slide"] {flex-direction: column;flex: 0 0 var(--_carousel-share);}[part~="indicator"] {--_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);all: unset;background-color: var(--helix-color-border);block-size: var(--helix-space-xs);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: pointer;inline-size: var(--helix-space-xs);transition:
 background-color var(--_carousel-indicator-motion),
-inline-size var(--_carousel-indicator-motion);
-}
-
-[part~="indicator"][data-current] {
-background-color: var(--helix-color-primary);
-inline-size: var(--helix-space-lg);
-}
-
-:host([indicator-placement="start"]) [part~="indicator"],
-:host([indicator-placement="end"]) [part~="indicator"] {
-transition:
+inline-size var(--_carousel-indicator-motion);}[part~="indicator"][data-current] {background-color: var(--helix-color-primary);inline-size: var(--helix-space-lg);}:host([indicator-placement="start"]) [part~="indicator"],
+:host([indicator-placement="end"]) [part~="indicator"] {transition:
 background-color var(--_carousel-indicator-motion),
-block-size var(--_carousel-indicator-motion);
-}
-
-:host([indicator-placement="start"]) [part~="indicator"][data-current],
-:host([indicator-placement="end"]) [part~="indicator"][data-current] {
-block-size: var(--helix-space-lg);
-inline-size: var(--helix-space-xs);
-}
-
-[part~="indicator"]:hover {
-background-color: var(--helix-color-foreground-muted);
-}
-
-[part~="indicator"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([controls-placement="overlay"]) [part="controls"] {
-grid-area: 2 / 2;
-justify-self: stretch;
-}
-
-:host([controls-placement="overlay"]) [part="controls"] {
-align-items: var(--_carousel-controls-along);
-
-justify-content: flex-start;
-padding-block-start: var(--helix-space-none);
-
-padding-inline: calc(var(--_carousel-bleed) + var(--helix-space-md));
-pointer-events: none;
-z-index: var(--helix-layer-raised);
-}
-
-:host([controls-placement="overlay"]) [part="previous"],
+block-size var(--_carousel-indicator-motion);}:host([indicator-placement="start"]) [part~="indicator"][data-current],
+:host([indicator-placement="end"]) [part~="indicator"][data-current] {block-size: var(--helix-space-lg);inline-size: var(--helix-space-xs);}[part~="indicator"]:hover {background-color: var(--helix-color-foreground-muted);}[part~="indicator"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([controls-placement="overlay"]) [part="controls"] {grid-area: 2 / 2;justify-self: stretch;}:host([controls-placement="overlay"]) [part="controls"] {align-items: var(--_carousel-controls-along);justify-content: flex-start;padding-block-start: var(--helix-space-none);padding-inline: calc(var(--_carousel-bleed) + var(--helix-space-md));pointer-events: none;z-index: var(--helix-layer-raised);}:host([controls-placement="overlay"]) [part="previous"],
 :host([controls-placement="overlay"]) [part="next"],
-:host([controls-placement="overlay"]) [part="rotation"] {
-background-color: var(--helix-color-surface-overlay);
-border-color: transparent;
-box-shadow: var(--helix-shadow-md);
-pointer-events: auto;
-}
-
-:host([indicator-placement="overlay"]) [part="indicators"] {
-align-self: end;
-grid-area: 2 / 2;
-z-index: var(--helix-layer-raised);
-}
-
-:host([indicator-placement="overlay"]) [part="indicators"] {
-background-color: var(--helix-color-surface-overlay);
-border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
-margin-block-end: calc(var(--_carousel-bleed) + var(--helix-space-md));
-padding-block: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
-}
-
-:host([indicator-placement="overlay"]) [part~="indicator"] {
-background-color: var(--helix-color-foreground-muted);
-}
-
-:host([indicator-placement="overlay"]) [part~="indicator"][data-current] {
-background-color: var(--helix-color-primary);
-}
-
-:host([controls-placement="overlay"]) [part="next"] {
-margin-inline-start: auto;
-}
-
-:host([controls-placement="overlay"]) [part="rotation"] {
-order: 1;
-}
-
-:host([orientation="vertical"]:not([indicator-placement])) [part="indicators"] {
-align-self: var(--_carousel-indicators-along);
-flex-direction: column;
-grid-area: 2 / 3;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-padding-inline-start: var(--helix-space-sm);
-}
-
-:host([orientation="vertical"]:not([controls-placement])) [part="controls"] {
-align-self: var(--_carousel-controls-along);
-flex-direction: column;
-grid-area: 2 / 3;
-justify-self: center;
-padding-block-start: var(--helix-space-none);
-padding-inline: var(--helix-space-none);
-padding-inline-start: var(--helix-space-sm);
-}
-
-:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"] {
-transition:
+:host([controls-placement="overlay"]) [part="rotation"] {background-color: var(--helix-color-surface-overlay);border-color: transparent;box-shadow: var(--helix-shadow-md);pointer-events: auto;}:host([indicator-placement="overlay"]) [part="indicators"] {align-self: end;grid-area: 2 / 2;z-index: var(--helix-layer-raised);}:host([indicator-placement="overlay"]) [part="indicators"] {background-color: var(--helix-color-surface-overlay);border-radius: var(--helix-radii-full);box-shadow: var(--helix-shadow-md);margin-block-end: calc(var(--_carousel-bleed) + var(--helix-space-md));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);}:host([indicator-placement="overlay"]) [part~="indicator"] {background-color: var(--helix-color-foreground-muted);}:host([indicator-placement="overlay"]) [part~="indicator"][data-current] {background-color: var(--helix-color-primary);}:host([controls-placement="overlay"]) [part="next"] {margin-inline-start: auto;}:host([controls-placement="overlay"]) [part="rotation"] {order: 1;}:host([orientation="vertical"]:not([indicator-placement])) [part="indicators"] {align-self: var(--_carousel-indicators-along);flex-direction: column;grid-area: 2 / 3;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);padding-inline-start: var(--helix-space-sm);}:host([orientation="vertical"]:not([controls-placement])) [part="controls"] {align-self: var(--_carousel-controls-along);flex-direction: column;grid-area: 2 / 3;justify-self: center;padding-block-start: var(--helix-space-none);padding-inline: var(--helix-space-none);padding-inline-start: var(--helix-space-sm);}:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"] {transition:
 background-color var(--_carousel-indicator-motion),
-block-size var(--_carousel-indicator-motion);
-}
-
-:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"][data-current] {
-block-size: var(--helix-space-lg);
-inline-size: var(--helix-space-xs);
-}
-
-@media print {
-:host {
-box-shadow: none;
-overflow: visible;
-}
-}
-
-@media (hover: none) and (pointer: coarse) {
-:host(:not([controls="always"])) [part="previous"],
-:host(:not([controls="always"])) [part="next"] {
-display: none;
-}
-
-:host(:not([controls="always"]):not([autoplay])) [part="controls"] {
-display: none;
-}
-}`);
+block-size var(--_carousel-indicator-motion);}:host([orientation="vertical"]:not([indicator-placement])) [part~="indicator"][data-current] {block-size: var(--helix-space-lg);inline-size: var(--helix-space-xs);}@media print {:host {box-shadow: none;overflow: visible;}}@media (hover: none) and (pointer: coarse) {:host(:not([controls="always"])) [part="previous"],
+:host(:not([controls="always"])) [part="next"] {display: none;}:host(:not([controls="always"]):not([autoplay])) [part="controls"] {display: none;}}`);

package/dist/chat/composer/chat-composer.css.js

@@ -1,106 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="composer"] {
-background-color: var(--chat-composer-background-color, var(--helix-color-surface));
-border: var(--chat-composer-border-width, var(--helix-border-thin)) solid
-var(--helix-color-border);
-border-radius: var(--helix-radii-md);
-display: grid;
-gap: var(--helix-space-2xs);
-padding: var(--helix-space-xs);
-}
-
-[part="composer"]:focus-within {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-[part="field"] {
-background-color: transparent;
-border: 0;
-color: var(--helix-color-foreground);
-
-field-sizing: content;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-line-height: var(--helix-leading-normal);
-max-block-size: var(--chat-composer-max-block-size, 12rem);
-padding-block: var(--helix-space-2xs);
-padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));
-resize: none;
-}
-
-[part="field"]:focus-visible {
-outline: none;
-}
-
-[part="tools"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-justify-content: flex-end;
-}
-
-[part="start"],
-[part="end"] {
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
-
-align-items: center;
-display: flex;
-gap: var(--helix-space-2xs);
-}
-
-[part="start"] {
-margin-inline-end: auto;
-}
-
-[part="end"] {
-margin-inline-end: var(--helix-space-2xs);
-}
-
-[part="start"][data-empty],
-[part="end"][data-empty] {
-display: none;
-}
-
-[part="send"] {
-align-items: center;
-background-color: transparent;
-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));
-border: 0;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));
-justify-content: center;
-padding: var(--helix-space-none);
-}
-
-[part="mark"] {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
-}
-
-[part="send"]:hover:not(:disabled) {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="send"]:disabled {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-[part="send"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}`);
+export const styles = createSheet(`:host {display: block;}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid
+var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs);}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none;}[part="field"]:focus-visible {outline: none;}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end;}[part="start"],
+[part="end"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: flex;gap: var(--helix-space-2xs);}[part="start"] {margin-inline-end: auto;}[part="end"] {margin-inline-end: var(--helix-space-2xs);}[part="start"][data-empty],
+[part="end"][data-empty] {display: none;}[part="send"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none);}[part="mark"] {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="send"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="send"]:disabled {cursor: not-allowed;opacity: 0.5;}[part="send"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}`);