@fusion.dev/helix 0.182.1 → 0.182.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +7890 -5778
- package/dist/accordion/item/accordion-item.css.js +1 -4
- package/dist/accordion/item/accordion-item.js +1 -6
- package/dist/accordion/root/accordion-root.css.js +1 -2
- package/dist/accordion/root/accordion-root.js +1 -6
- package/dist/announcement/root/announcement-root.css.js +1 -25
- package/dist/announcement/root/announcement-root.js +1 -6
- package/dist/app-header/root/app-header-root.css.js +1 -9
- package/dist/app-header/root/app-header-root.js +1 -6
- package/dist/area-chart/root/area-chart-root.css.js +1 -8
- package/dist/area-chart/root/area-chart-root.js +1 -6
- package/dist/aura/root/aura-root.css.js +1 -10
- package/dist/aura/root/aura-root.js +1 -6
- package/dist/avatar/group/avatar-group.css.js +1 -15
- package/dist/avatar/group/avatar-group.js +1 -6
- package/dist/avatar/root/avatar-root.css.js +1 -1
- package/dist/avatar/root/avatar-root.js +1 -6
- package/dist/badge/root/badge-root.css.js +1 -21
- package/dist/badge/root/badge-root.js +1 -6
- package/dist/bar-chart/root/bar-chart-root.css.js +1 -19
- package/dist/bar-chart/root/bar-chart-root.js +1 -6
- package/dist/blockquote/root/blockquote-root.css.js +1 -2
- package/dist/blockquote/root/blockquote-root.js +1 -6
- package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js +1 -25
- package/dist/breadcrumbs/breadcrumb/breadcrumb.js +1 -6
- package/dist/breadcrumbs/root/breadcrumbs-root.css.js +1 -7
- package/dist/breadcrumbs/root/breadcrumbs-root.js +1 -6
- package/dist/button/root/button-root.css.js +1 -46
- package/dist/button/root/button-root.js +1 -6
- package/dist/button-group/root/button-group-root.css.js +1 -11
- package/dist/button-group/root/button-group-root.js +1 -6
- package/dist/callout/root/callout-root.css.js +1 -10
- package/dist/callout/root/callout-root.js +1 -6
- package/dist/canvas/edge/canvas-edge.js +1 -6
- package/dist/canvas/node/canvas-node.css.js +1 -12
- package/dist/canvas/node/canvas-node.js +1 -6
- package/dist/canvas/root/canvas-root.css.js +1 -15
- package/dist/canvas/root/canvas-root.js +1 -6
- package/dist/card/root/card-root.css.js +1 -8
- package/dist/card/root/card-root.js +1 -6
- package/dist/carousel/root/carousel-root.css.js +1 -42
- package/dist/carousel/root/carousel-root.js +1 -6
- package/dist/chat/composer/chat-composer.css.js +1 -5
- package/dist/chat/composer/chat-composer.js +1 -6
- package/dist/chat/message/chat-message.css.js +1 -11
- package/dist/chat/message/chat-message.js +1 -6
- package/dist/chat/root/chat-root.css.js +1 -13
- package/dist/chat/root/chat-root.js +1 -6
- package/dist/chat/typing.css.js +1 -24
- package/dist/checkbox/root/checkbox-root.css.js +1 -16
- package/dist/checkbox/root/checkbox-root.js +1 -6
- package/dist/checkbox-group/root/checkbox-group-root.css.js +1 -1
- package/dist/checkbox-group/root/checkbox-group-root.js +1 -6
- package/dist/code/root/code-root.css.js +1 -7
- package/dist/code/root/code-root.js +1 -6
- package/dist/code-block/root/code-block-root.css.js +1 -62
- package/dist/code-block/root/code-block-root.js +1 -6
- package/dist/color-input/root/color-input-root.css.js +1 -13
- package/dist/color-input/root/color-input-root.js +1 -6
- package/dist/color-picker/root/color-picker-root.css.js +1 -75
- package/dist/color-picker/root/color-picker-root.js +1 -6
- package/dist/combobox/root/combobox-root.css.js +1 -11
- package/dist/combobox/root/combobox-root.js +1 -6
- package/dist/command/root/command-root.css.js +1 -3
- package/dist/command/root/command-root.js +1 -6
- package/dist/copy-button/root/copy-button-root.css.js +1 -5
- package/dist/copy-button/root/copy-button-root.js +1 -6
- package/dist/data-table/root/data-table-root.css.js +1 -52
- package/dist/data-table/root/data-table-root.js +1 -6
- package/dist/date-input/root/date-input-root.css.js +1 -19
- package/dist/date-input/root/date-input-root.js +1 -6
- package/dist/date-picker/root/date-picker-root.css.js +1 -37
- package/dist/date-picker/root/date-picker-root.js +1 -6
- package/dist/description-list/item/description-list-item.css.js +1 -1
- package/dist/description-list/item/description-list-item.js +1 -6
- package/dist/description-list/root/description-list-root.css.js +1 -2
- package/dist/description-list/root/description-list-root.js +1 -6
- package/dist/dialog/root/dialog-root.css.js +1 -15
- package/dist/dialog/root/dialog-root.js +1 -6
- package/dist/divider/root/divider-root.css.js +1 -9
- package/dist/divider/root/divider-root.js +1 -6
- package/dist/donut-chart/root/donut-chart-root.css.js +1 -20
- package/dist/donut-chart/root/donut-chart-root.js +1 -6
- package/dist/drawer/root/drawer-root.css.js +1 -22
- package/dist/drawer/root/drawer-root.js +1 -6
- package/dist/drilldown/item/drilldown-item.css.js +1 -6
- package/dist/drilldown/item/drilldown-item.js +1 -6
- package/dist/drilldown/root/drilldown-root.css.js +1 -8
- package/dist/drilldown/root/drilldown-root.js +1 -6
- package/dist/empty/root/empty-root.css.js +1 -2
- package/dist/empty/root/empty-root.js +1 -6
- package/dist/file-input/root/file-input-root.css.js +1 -9
- package/dist/file-input/root/file-input-root.js +1 -6
- package/dist/filter-input/chip/filter-chip.css.js +1 -2
- package/dist/filter-input/chip/filter-chip.js +1 -6
- package/dist/filter-input/field/filter-field.css.js +1 -1
- package/dist/filter-input/field/filter-field.js +1 -6
- package/dist/filter-input/menu/filter-menu.css.js +1 -1
- package/dist/filter-input/menu/filter-menu.js +1 -6
- package/dist/filter-input/operator/filter-operator.css.js +1 -1
- package/dist/filter-input/operator/filter-operator.js +1 -6
- package/dist/filter-input/root/filter-input-root.css.js +1 -8
- package/dist/filter-input/root/filter-input-root.js +1 -6
- package/dist/flex/root/flex-root.css.js +1 -6
- package/dist/flex/root/flex-root.js +1 -6
- package/dist/format-date/root/format-date-root.css.js +1 -1
- package/dist/format-date/root/format-date-root.js +1 -6
- package/dist/graph/root/graph-root.css.js +1 -23
- package/dist/graph/root/graph-root.js +1 -6
- package/dist/grid/root/grid-root.css.js +1 -1
- package/dist/grid/root/grid-root.js +1 -6
- package/dist/heatmap/root/heatmap-root.css.js +1 -22
- package/dist/heatmap/root/heatmap-root.js +1 -6
- package/dist/icon/root/icon-root.css.js +1 -8
- package/dist/icon/root/icon-root.js +1 -6
- package/dist/icon-button/root/icon-button-root.css.js +1 -97
- package/dist/icon-button/root/icon-button-root.js +1 -6
- package/dist/image/root/image-root.css.js +1 -7
- package/dist/image/root/image-root.js +1 -6
- package/dist/input/root/input-root.css.js +1 -7
- package/dist/input/root/input-root.js +1 -6
- package/dist/kbd/root/kbd-root.css.js +1 -3
- package/dist/kbd/root/kbd-root.js +1 -6
- package/dist/legend/root/legend-root.css.js +1 -15
- package/dist/legend/root/legend-root.js +1 -6
- package/dist/lightbox/item/lightbox-item.css.js +1 -1
- package/dist/lightbox/item/lightbox-item.js +1 -6
- package/dist/lightbox/root/lightbox-root.css.js +1 -50
- package/dist/lightbox/root/lightbox-root.js +1 -6
- package/dist/line-chart/root/line-chart-root.css.js +1 -7
- package/dist/line-chart/root/line-chart-root.js +1 -6
- package/dist/list/item/list-item.css.js +1 -4
- package/dist/list/item/list-item.js +1 -6
- package/dist/list/root/list-root.css.js +1 -5
- package/dist/list/root/list-root.js +1 -6
- package/dist/listbox/reorder/listbox-drag-preview.css.js +1 -2
- package/dist/listbox/reorder/listbox-reorder.css.js +1 -3
- package/dist/listbox/root/listbox-root.css.js +1 -7
- package/dist/listbox/root/listbox-root.js +1 -6
- package/dist/loader/root/loader-root.css.js +1 -5
- package/dist/loader/root/loader-root.js +1 -6
- package/dist/map/area/map-area.css.js +1 -1
- package/dist/map/area/map-area.js +1 -6
- package/dist/map/buildings/map-buildings.css.js +1 -1
- package/dist/map/buildings/map-buildings.js +1 -6
- package/dist/map/contours/map-contours.css.js +1 -4
- package/dist/map/contours/map-contours.js +1 -6
- package/dist/map/landcover/map-landcover.css.js +1 -1
- package/dist/map/landcover/map-landcover.js +1 -6
- package/dist/map/marker/map-marker.css.js +1 -31
- package/dist/map/marker/map-marker.js +1 -6
- package/dist/map/points/map-points.css.js +1 -1
- package/dist/map/points/map-points.js +1 -6
- package/dist/map/position/map-position.css.js +1 -21
- package/dist/map/position/map-position.js +1 -6
- package/dist/map/raster/map-raster.css.js +1 -1
- package/dist/map/raster/map-raster.js +1 -6
- package/dist/map/root/map-root.css.js +1 -23
- package/dist/map/root/map-root.js +1 -6
- package/dist/map/route/map-route.css.js +1 -1
- package/dist/map/route/map-route.js +1 -6
- package/dist/map/terrain/map-terrain.css.js +1 -7
- package/dist/map/terrain/map-terrain.js +1 -6
- package/dist/megamenu/root/megamenu-root.css.js +1 -21
- package/dist/megamenu/root/megamenu-root.js +1 -6
- package/dist/menu/item/menu-item.css.js +1 -17
- package/dist/menu/item/menu-item.js +1 -6
- package/dist/menu/root/menu-root.css.js +1 -1
- package/dist/menu/root/menu-root.js +1 -6
- package/dist/menu/section/menu-section.css.js +1 -1
- package/dist/menu/section/menu-section.js +1 -6
- package/dist/meter/root/meter-root.css.js +1 -30
- package/dist/meter/root/meter-root.js +1 -6
- package/dist/navigation/root/navigation-root.css.js +1 -10
- package/dist/navigation/root/navigation-root.js +1 -6
- package/dist/notifications/group/notification-group.css.js +1 -1
- package/dist/notifications/group/notification-group.js +1 -6
- package/dist/notifications/notification/notification.css.js +1 -30
- package/dist/notifications/notification/notification.js +1 -6
- package/dist/notifications/root/notifications-root.css.js +1 -9
- package/dist/notifications/root/notifications-root.js +1 -6
- package/dist/number-input/root/number-input-root.css.js +1 -13
- package/dist/number-input/root/number-input-root.js +1 -6
- package/dist/object-inspector/root/object-inspector-root.css.js +1 -23
- package/dist/object-inspector/root/object-inspector-root.js +1 -6
- package/dist/option/group/option-group.css.js +1 -1
- package/dist/option/group/option-group.js +1 -6
- package/dist/option/root/option-root.css.js +1 -9
- package/dist/option/root/option-root.js +1 -6
- package/dist/option/separator/option-separator.css.js +1 -2
- package/dist/option/separator/option-separator.js +1 -6
- package/dist/orb/root/orb-root.css.js +1 -1
- package/dist/orb/root/orb-root.js +1 -6
- package/dist/outline/root/outline-root.css.js +1 -41
- package/dist/outline/root/outline-root.js +1 -6
- package/dist/pagination/root/pagination-root.css.js +1 -36
- package/dist/pagination/root/pagination-root.js +1 -6
- package/dist/pagination/size/pagination-size.css.js +1 -1
- package/dist/pagination/size/pagination-size.js +1 -6
- package/dist/pagination/summary/pagination-summary.css.js +1 -1
- package/dist/pagination/summary/pagination-summary.js +1 -6
- package/dist/pin-input/root/pin-input-root.css.js +1 -2
- package/dist/pin-input/root/pin-input-root.js +1 -6
- package/dist/popover/root/popover-root.css.js +1 -10
- package/dist/popover/root/popover-root.js +1 -6
- package/dist/progress/root/progress-root.css.js +1 -25
- package/dist/progress/root/progress-root.js +1 -6
- package/dist/qr-code/root/qr-code-root.css.js +1 -1
- package/dist/qr-code/root/qr-code-root.js +1 -6
- package/dist/quote/root/quote-root.css.js +1 -1
- package/dist/quote/root/quote-root.js +1 -6
- package/dist/radio/group/radio-group.css.js +1 -1
- package/dist/radio/group/radio-group.js +1 -6
- package/dist/radio/root/radio-root.css.js +1 -9
- package/dist/radio/root/radio-root.js +1 -6
- package/dist/rating/root/rating-root.css.js +1 -13
- package/dist/rating/root/rating-root.js +1 -6
- package/dist/sandbox/preview/sandbox-preview.css.js +1 -4
- package/dist/sandbox/preview/sandbox-preview.js +1 -6
- package/dist/sandbox/root/sandbox-root.css.js +1 -3
- package/dist/sandbox/root/sandbox-root.js +1 -6
- package/dist/sandbox/source/sandbox-source.css.js +1 -4
- package/dist/sandbox/source/sandbox-source.js +1 -6
- package/dist/sandbox/status-bar/sandbox-status-bar.css.js +1 -1
- package/dist/sandbox/status-bar/sandbox-status-bar.js +1 -6
- package/dist/sandbox/terminal/sandbox-terminal.css.js +1 -5
- package/dist/sandbox/terminal/sandbox-terminal.js +1 -6
- package/dist/sandbox/toolbar/sandbox-toolbar.css.js +1 -1
- package/dist/sandbox/toolbar/sandbox-toolbar.js +1 -6
- package/dist/scatter-chart/root/scatter-chart-root.css.js +1 -16
- package/dist/scatter-chart/root/scatter-chart-root.js +1 -6
- package/dist/scroll-area/root/scroll-area-root.css.js +1 -37
- package/dist/scroll-area/root/scroll-area-root.js +1 -6
- package/dist/select/root/select-root.css.js +1 -8
- package/dist/select/root/select-root.js +1 -6
- package/dist/shared/chart/series.css.js +1 -1
- package/dist/shared/chart/status.css.js +1 -2
- package/dist/shared/chart/terminus.css.js +1 -1
- package/dist/shared/chart/tooltip.css.js +1 -1
- package/dist/shared/collection/state.css.js +1 -2
- package/dist/shared/field/field-frame.css.js +1 -5
- package/dist/shared/field/field-inline.css.js +1 -2
- package/dist/shared/field/field-segments.css.js +1 -1
- package/dist/shared/field/field-stacked.css.js +1 -1
- package/dist/shared/field/field.css.js +1 -3
- package/dist/shared/floating/entrance.css.js +1 -7
- package/dist/shared/floating/panel.css.js +1 -2
- package/dist/shared/glyph/glyph.css.js +1 -1
- package/dist/shared/live/live.css.js +1 -1
- package/dist/shared/mixin-control-surface/mixin-control-surface.js +1 -6
- package/dist/shared/tags/tags.css.js +1 -1
- package/dist/shared/viewport/viewport.css.js +1 -20
- package/dist/skeleton/root/skeleton-root.css.js +1 -23
- package/dist/skeleton/root/skeleton-root.js +1 -6
- package/dist/skip-link/root/skip-link-root.css.js +1 -2
- package/dist/skip-link/root/skip-link-root.js +1 -6
- package/dist/slider/root/slider-root.css.js +1 -83
- package/dist/slider/root/slider-root.js +1 -6
- package/dist/sparkline/root/sparkline-root.css.js +1 -16
- package/dist/sparkline/root/sparkline-root.js +1 -6
- package/dist/speed-dial/group/speed-dial-group.css.js +1 -1
- package/dist/speed-dial/group/speed-dial-group.js +1 -6
- package/dist/speed-dial/item/speed-dial-item.css.js +1 -7
- package/dist/speed-dial/item/speed-dial-item.js +1 -6
- package/dist/speed-dial/root/speed-dial-root.css.js +1 -5
- package/dist/speed-dial/root/speed-dial-root.js +1 -6
- package/dist/splitter/root/splitter-root.css.js +1 -29
- package/dist/splitter/root/splitter-root.js +1 -6
- package/dist/stat/group/stat-group.css.js +1 -1
- package/dist/stat/group/stat-group.js +1 -6
- package/dist/stat/root/stat-root.css.js +1 -3
- package/dist/stat/root/stat-root.js +1 -6
- package/dist/steps/root/steps-root.css.js +1 -33
- package/dist/steps/root/steps-root.js +1 -6
- package/dist/steps/step/step.css.js +1 -7
- package/dist/steps/step/step.js +1 -6
- package/dist/strands/root/strands-root.css.js +1 -7
- package/dist/strands/root/strands-root.js +1 -6
- package/dist/strands/stop/strands-stop.css.js +1 -1
- package/dist/strands/stop/strands-stop.js +1 -6
- package/dist/switch/root/switch-root.css.js +1 -3
- package/dist/switch/root/switch-root.js +1 -6
- package/dist/table/cell/table-cell.css.js +1 -1
- package/dist/table/cell/table-cell.js +1 -6
- package/dist/table/column/table-column.css.js +1 -10
- package/dist/table/column/table-column.js +1 -6
- package/dist/table/root/table-root.css.js +1 -10
- package/dist/table/root/table-root.js +1 -6
- package/dist/table/row/table-row.css.js +1 -24
- package/dist/table/row/table-row.js +1 -6
- package/dist/tabs/panel/tab-panel.css.js +1 -4
- package/dist/tabs/panel/tab-panel.js +1 -6
- package/dist/tabs/root/tabs-root.css.js +1 -22
- package/dist/tabs/root/tabs-root.js +1 -6
- package/dist/tabs/tab/tab.css.js +1 -12
- package/dist/tabs/tab/tab.js +1 -6
- package/dist/tag/group/tag-group.css.js +1 -1
- package/dist/tag/group/tag-group.js +1 -6
- package/dist/tag/root/tag-root.css.js +1 -1
- package/dist/tag/root/tag-root.js +1 -6
- package/dist/text/root/text-root.css.js +1 -30
- package/dist/text/root/text-root.js +1 -6
- package/dist/textarea/root/textarea-root.css.js +1 -4
- package/dist/textarea/root/textarea-root.js +1 -6
- package/dist/time-input/root/time-input-root.css.js +1 -18
- package/dist/time-input/root/time-input-root.js +1 -6
- package/dist/time-picker/root/time-picker-root.css.js +1 -22
- package/dist/time-picker/root/time-picker-root.js +1 -6
- package/dist/timeline/group/timeline-group.css.js +1 -1
- package/dist/timeline/group/timeline-group.js +1 -6
- package/dist/timeline/item/timeline-item.css.js +1 -11
- package/dist/timeline/item/timeline-item.js +1 -6
- package/dist/timeline/root/timeline-root.css.js +1 -1
- package/dist/timeline/root/timeline-root.js +1 -6
- package/dist/toast/item/toast-item.css.js +1 -25
- package/dist/toast/item/toast-item.js +1 -6
- package/dist/toast/root/toast-root.css.js +1 -1
- package/dist/toast/root/toast-root.js +1 -6
- package/dist/toggle/group/toggle-group.css.js +1 -13
- package/dist/toggle/group/toggle-group.js +1 -6
- package/dist/toggle/root/toggle-root.css.js +1 -1
- package/dist/toggle/root/toggle-root.js +1 -6
- package/dist/toolbar/root/toolbar-root.css.js +1 -1
- package/dist/toolbar/root/toolbar-root.js +1 -6
- package/dist/tooltip/root/tooltip-root.css.js +1 -8
- package/dist/tooltip/root/tooltip-root.js +1 -6
- package/dist/tour/root/tour-root.css.js +1 -5
- package/dist/tour/root/tour-root.js +1 -6
- package/dist/tour/stop/tour-stop.css.js +1 -2
- package/dist/tour/stop/tour-stop.js +1 -6
- package/dist/tree/item/tree-item.css.js +1 -26
- package/dist/tree/item/tree-item.js +1 -6
- package/dist/tree/root/tree-root.css.js +1 -2
- package/dist/tree/root/tree-root.js +1 -6
- package/dist/trend/root/trend-root.css.js +1 -5
- package/dist/trend/root/trend-root.js +1 -6
- package/dist/video/root/video-root.css.js +1 -28
- package/dist/video/root/video-root.js +1 -6
- package/dist/video-playlist/item/video-playlist-item.css.js +1 -15
- package/dist/video-playlist/item/video-playlist-item.js +1 -6
- package/dist/video-playlist/menu/video-playlist-menu.css.js +1 -1
- package/dist/video-playlist/menu/video-playlist-menu.js +1 -6
- package/dist/video-playlist/root/video-playlist-root.css.js +1 -1
- package/dist/video-playlist/root/video-playlist-root.js +1 -6
- package/dist/virtual-list/reorder/virtual-list-reorder.css.js +1 -11
- package/dist/virtual-list/root/virtual-list-root.css.js +1 -10
- package/dist/virtual-list/root/virtual-list-root.js +1 -6
- package/lint.json +1 -1
- package/package.json +7 -6
- package/types/jsx.d.ts +210 -202
package/dist/chat/typing.css.js
CHANGED
|
@@ -1,25 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="indicator"] {--_chat-typing-cycle: 1.2s;animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;background-image:
|
|
3
|
-
radial-gradient(circle closest-side, currentColor 90%, transparent),
|
|
4
|
-
radial-gradient(circle closest-side, currentColor 90%, transparent),
|
|
5
|
-
radial-gradient(circle closest-side, currentColor 90%, transparent);background-position:
|
|
6
|
-
0% 50%,
|
|
7
|
-
50% 50%,
|
|
8
|
-
100% 50%;background-repeat: no-repeat;background-size:
|
|
9
|
-
20% 30%,
|
|
10
|
-
20% 30%,
|
|
11
|
-
20% 30%;block-size: 1lh;display: block;inline-size: 1.75em;opacity: 0.7;}@keyframes helix-chat-typing {0%,
|
|
12
|
-
60%,
|
|
13
|
-
100% {background-position:
|
|
14
|
-
0% 50%,
|
|
15
|
-
50% 50%,
|
|
16
|
-
100% 50%;}20% {background-position:
|
|
17
|
-
0% 10%,
|
|
18
|
-
50% 50%,
|
|
19
|
-
100% 50%;}33% {background-position:
|
|
20
|
-
0% 50%,
|
|
21
|
-
50% 10%,
|
|
22
|
-
100% 50%;}46% {background-position:
|
|
23
|
-
0% 50%,
|
|
24
|
-
50% 50%,
|
|
25
|
-
100% 10%;}}@media (prefers-reduced-motion: reduce) {[part="indicator"] {animation: none;}}`);
|
|
2
|
+
export const styles = createSheet(`[part="indicator"] {--_chat-typing-cycle: 1.2s;animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;background-image: radial-gradient(circle closest-side, currentColor 90%, transparent), radial-gradient(circle closest-side, currentColor 90%, transparent), radial-gradient(circle closest-side, currentColor 90%, transparent);background-position: 0% 50%, 50% 50%, 100% 50%;background-repeat: no-repeat;background-size: 20% 30%, 20% 30%, 20% 30%;block-size: 1lh;display: block;inline-size: 1.75em;opacity: 0.7}@keyframes helix-chat-typing {0%, 60%, 100% {background-position: 0% 50%, 50% 50%, 100% 50%}20% {background-position: 0% 10%, 50% 50%, 100% 50%}33% {background-position: 0% 50%, 50% 10%, 100% 50%}46% {background-position: 0% 50%, 50% 50%, 100% 10%}}@media (prefers-reduced-motion: reduce) {[part="indicator"] {animation: none}}`);
|
|
@@ -1,17 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
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)
|
|
3
|
-
background-color var(--helix-duration-fast) var(--helix-easing-standard),
|
|
4
|
-
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"],
|
|
5
|
-
:host(:state(indeterminate)) [part="control"] {border-color: var(
|
|
6
|
-
--checkbox-border-color,
|
|
7
|
-
var(--checkbox-checked-color, var(--helix-color-foreground))
|
|
8
|
-
);}[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"],
|
|
9
|
-
: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"]),
|
|
10
|
-
: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(*),
|
|
11
|
-
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"],
|
|
12
|
-
:host(:state(invalid)) [part="field"]:hover [part="control"] {border-color: var(--helix-color-danger);}:host(:state(invalid):state(checked)) [part="control"],
|
|
13
|
-
: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
|
|
14
|
-
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:
|
|
15
|
-
background-color var(--helix-duration-fast) var(--helix-easing-standard),
|
|
16
|
-
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"]))
|
|
17
|
-
[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;}}`);
|
|
2
|
+
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(--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: 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}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCheckbox } from '@fusion.dev/helix-headless/checkbox';
|
|
9
4
|
import { property } from 'lit/decorators.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs)
|
|
2
|
+
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}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCheckboxGroup } from '@fusion.dev/helix-headless/checkbox-group';
|
|
9
4
|
import { property } from 'lit/decorators.js';
|
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: inline
|
|
3
|
-
--code-background-color,
|
|
4
|
-
color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
|
|
5
|
-
);border-radius: var(--code-radius, var(--helix-radii-sm));-webkit-box-decoration-break: clone;box-decoration-break: clone;color: var(
|
|
6
|
-
--code-foreground-color,
|
|
7
|
-
color-mix(in oklab, var(--helix-color-foreground) 30%, var(--helix-color-foreground-muted))
|
|
8
|
-
);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));overflow-wrap: break-word;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;}}`);
|
|
2
|
+
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));-webkit-box-decoration-break: clone;box-decoration-break: clone;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));overflow-wrap: break-word;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}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCode } from '@fusion.dev/helix-headless/code';
|
|
9
4
|
import { styles } from './code-root.css.js';
|
|
@@ -1,63 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
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="actions"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;}[part="header"]
|
|
3
|
-
> :is([part="actions"], [part="wrap-toggle"])
|
|
4
|
-
~ :is([part="copy"], [part="wrap-toggle"]) {margin-inline-start: var(--helix-space-none);}[part="wrap-toggle"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);margin-inline-start: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);}[part="wrap-toggle"]:hover,
|
|
5
|
-
[part="wrap-toggle"][aria-pressed="true"] {color: var(--helix-color-foreground);}[part="wrap-toggle"][aria-pressed="true"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="wrap-toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[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="files"] {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-block-end-width: var(--helix-space-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;overflow-x: auto;padding-inline: var(--helix-space-xs);}[part="file-tab"] {background-color: transparent;border: none;border-block-end: var(--helix-border-thick) solid transparent;color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-sm);white-space: nowrap;}[part="file-tab"]:hover,
|
|
6
|
-
[part="file-tab"][aria-selected="true"] {color: var(--helix-color-foreground);}[part="file-tab"][aria-selected="true"] {border-block-end-color: var(--helix-color-accent);}[part="file-tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(tabbed)) :is([part="header"], [part="block"]) {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;isolation: isolate;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;position: relative;}: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);}::slotted([slot="expand-icon"]) {margin-inline-end: var(--helix-space-xs);vertical-align: middle;}[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);}[part="block"]:focus-visible,
|
|
7
|
-
[part="code"]:focus-visible,
|
|
8
|
-
[part="old"]:focus-visible,
|
|
9
|
-
[part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([wrap]:not([diff])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}[part~="mark"] {background-color: var(
|
|
10
|
-
--code-block-mark-color,
|
|
11
|
-
color-mix(in oklab, var(--helix-color-primary) 12%, transparent)
|
|
12
|
-
);block-size: var(--code-block-mark-size, 0);border-inline-start: var(--helix-border-thick) solid
|
|
13
|
-
var(--code-block-mark-edge-color, var(--helix-color-primary));box-sizing: border-box;inline-size: max(100%, var(--code-block-mark-inline-size, 100%));inset-block-start: var(--code-block-mark-start, 0);inset-inline-start: 0;pointer-events: none;position: absolute;z-index: var(--helix-layer-beneath);}[part~="mark-added"] {background-color: color-mix(
|
|
14
|
-
in oklab,
|
|
15
|
-
var(--code-block-added-color, var(--helix-color-success)) 14%,
|
|
16
|
-
transparent
|
|
17
|
-
);border-inline-start-color: var(--code-block-added-color, var(--helix-color-success));}[part~="mark-removed"] {background-color: color-mix(
|
|
18
|
-
in oklab,
|
|
19
|
-
var(--code-block-removed-color, var(--helix-color-danger)) 14%,
|
|
20
|
-
transparent
|
|
21
|
-
);border-inline-start-color: var(--code-block-removed-color, var(--helix-color-danger));}: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"],
|
|
22
|
-
[part="old"],
|
|
23
|
-
[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]))
|
|
24
|
-
[part="frame"]:not([part="header"] + *)
|
|
25
|
-
:is([part="block"], [part="old"], [part="new"])
|
|
26
|
-
> [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]))
|
|
27
|
-
[part="frame"]:not([part="header"] + *)
|
|
28
|
-
[part="new"]
|
|
29
|
-
> [part="code"] {margin-block-start: var(--helix-space-none);}}:host([diff]) [part="code"] {display: inline-block;min-inline-size: 100%;}[part="hunk"],
|
|
30
|
-
[part="context"],
|
|
31
|
-
[part="added"],
|
|
32
|
-
[part="removed"],
|
|
33
|
-
[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="fold"] {all: unset;background-color: var(--helix-color-surface-sunken);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;font-family: var(--helix-font-sans);inline-size: 100%;padding-inline: var(--helix-space-md);}[part="fold"]:hover {color: var(--helix-color-foreground);}[part="fold"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="added"] {background-color: color-mix(
|
|
34
|
-
in srgb,
|
|
35
|
-
var(--code-block-added-color, var(--helix-color-success)) 14%,
|
|
36
|
-
var(--code-block-background-color, var(--helix-color-background))
|
|
37
|
-
);}[part="removed"] {background-color: color-mix(
|
|
38
|
-
in srgb,
|
|
39
|
-
var(--code-block-removed-color, var(--helix-color-danger)) 14%,
|
|
40
|
-
var(--code-block-background-color, var(--helix-color-background))
|
|
41
|
-
);}[part="added"] [part="changed"] {background-color: color-mix(
|
|
42
|
-
in srgb,
|
|
43
|
-
var(--code-block-added-color, var(--helix-color-success)) 32%,
|
|
44
|
-
var(--code-block-background-color, var(--helix-color-background))
|
|
45
|
-
);border-radius: var(--helix-radii-sm);}[part="removed"] [part="changed"] {background-color: color-mix(
|
|
46
|
-
in srgb,
|
|
47
|
-
var(--code-block-removed-color, var(--helix-color-danger)) 32%,
|
|
48
|
-
var(--code-block-background-color, var(--helix-color-background))
|
|
49
|
-
);border-radius: var(--helix-radii-sm);}[part="marker"] {padding-inline-end: var(--helix-space-xs);user-select: none;}[part="added"] [part="marker"] {color: color-mix(
|
|
50
|
-
in oklab,
|
|
51
|
-
var(--code-block-added-color, var(--helix-color-success)) 55%,
|
|
52
|
-
var(--helix-color-foreground)
|
|
53
|
-
);}[part="removed"] [part="marker"] {color: color-mix(
|
|
54
|
-
in oklab,
|
|
55
|
-
var(--code-block-removed-color, var(--helix-color-danger)) 55%,
|
|
56
|
-
var(--helix-color-foreground)
|
|
57
|
-
);}[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;}[part="gutter"] > [part="number"] {block-size: var(--code-block-line-size, auto);color: inherit;display: block;padding-inline-end: var(--helix-space-none);}@media print {:host {background-color: transparent;}:host([diff]) [part="block"],
|
|
58
|
-
[part="old"],
|
|
59
|
-
[part="new"] {overflow: visible;white-space: pre-wrap;}[part="added"],
|
|
60
|
-
[part="removed"],
|
|
61
|
-
[part="changed"],
|
|
62
|
-
[part="hunk"],
|
|
63
|
-
[part="filler"] {print-color-adjust: exact;}}`);
|
|
2
|
+
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="actions"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto}[part="header"] > :is([part="actions"], [part="wrap-toggle"]) ~ :is([part="copy"], [part="wrap-toggle"]) {margin-inline-start: var(--helix-space-none)}[part="wrap-toggle"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);margin-inline-start: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs)}[part="wrap-toggle"]:hover, [part="wrap-toggle"][aria-pressed="true"] {color: var(--helix-color-foreground)}[part="wrap-toggle"][aria-pressed="true"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)}[part="wrap-toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[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="files"] {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-block-end-width: var(--helix-space-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;overflow-x: auto;padding-inline: var(--helix-space-xs)}[part="file-tab"] {background-color: transparent;border: none;border-block-end: var(--helix-border-thick) solid transparent;color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="file-tab"]:hover, [part="file-tab"][aria-selected="true"] {color: var(--helix-color-foreground)}[part="file-tab"][aria-selected="true"] {border-block-end-color: var(--helix-color-accent)}[part="file-tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}:host(:state(tabbed)) :is([part="header"], [part="block"]) {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;isolation: isolate;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;position: relative}: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)}::slotted([slot="expand-icon"]) {margin-inline-end: var(--helix-space-xs);vertical-align: middle}[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)}[part="block"]:focus-visible, [part="code"]:focus-visible, [part="old"]:focus-visible, [part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}:host([wrap]:not([diff])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap}[part~="mark"] {background-color: var(--code-block-mark-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent));block-size: var(--code-block-mark-size, 0);border-inline-start: var(--helix-border-thick) solid var(--code-block-mark-edge-color, var(--helix-color-primary));box-sizing: border-box;inline-size: max(100%, var(--code-block-mark-inline-size, 100%));inset-block-start: var(--code-block-mark-start, 0);inset-inline-start: 0;pointer-events: none;position: absolute;z-index: var(--helix-layer-beneath)}[part~="mark-added"] {background-color: color-mix(in oklab, var(--code-block-added-color, var(--helix-color-success)) 14%, transparent);border-inline-start-color: var(--code-block-added-color, var(--helix-color-success))}[part~="mark-removed"] {background-color: color-mix(in oklab, var(--code-block-removed-color, var(--helix-color-danger)) 14%, transparent);border-inline-start-color: var(--code-block-removed-color, var(--helix-color-danger))}: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="frame"]:not([part="header"] + *) :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="fold"] {all: unset;background-color: var(--helix-color-surface-sunken);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;font-family: var(--helix-font-sans);inline-size: 100%;padding-inline: var(--helix-space-md)}[part="fold"]:hover {color: var(--helix-color-foreground)}[part="fold"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="added"] {background-color: color-mix(in srgb, 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(in srgb, var(--code-block-removed-color, var(--helix-color-danger)) 14%, var(--code-block-background-color, var(--helix-color-background)))}[part="added"] [part="changed"] {background-color: color-mix(in srgb, var(--code-block-added-color, var(--helix-color-success)) 32%, var(--code-block-background-color, var(--helix-color-background)));border-radius: var(--helix-radii-sm)}[part="removed"] [part="changed"] {background-color: color-mix(in srgb, var(--code-block-removed-color, var(--helix-color-danger)) 32%, var(--code-block-background-color, var(--helix-color-background)));border-radius: var(--helix-radii-sm)}[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}[part="gutter"] > [part="number"] {block-size: var(--code-block-line-size, auto);color: inherit;display: block;padding-inline-end: var(--helix-space-none)}@media print {:host {background-color: transparent}:host([diff]) [part="block"], [part="old"], [part="new"] {overflow: visible;white-space: pre-wrap}[part="added"], [part="removed"], [part="changed"], [part="hunk"], [part="filler"] {print-color-adjust: exact}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCodeBlock } from '@fusion.dev/helix-headless/code-block';
|
|
9
4
|
import { styles } from './code-block-root.css.js';
|
|
@@ -1,14 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--color-input-background-color, var(--helix-color-well));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);overflow: hidden;padding-inline-start: var(--helix-space-xs);transition:
|
|
3
|
-
background-color var(--helix-duration-fast) var(--helix-easing-standard),
|
|
4
|
-
border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {all: unset;align-items: stretch;align-self: stretch;box-sizing: border-box;cursor: pointer;display: flex;flex: none;}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="preview"] {background-image:
|
|
5
|
-
linear-gradient(var(--color-input-swatch, transparent), var(--color-input-swatch, transparent)),
|
|
6
|
-
conic-gradient(
|
|
7
|
-
var(--helix-color-surface-sunken) 0 25%,
|
|
8
|
-
var(--helix-color-surface) 0 50%,
|
|
9
|
-
var(--helix-color-surface-sunken) 0 75%,
|
|
10
|
-
var(--helix-color-surface) 0
|
|
11
|
-
);background-size:
|
|
12
|
-
100% 100%,
|
|
13
|
-
var(--helix-space-sm) var(--helix-space-sm);border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: block;inline-size: var(--helix-size-control);}[part="surface"] {--_floating-border-color: var(--color-input-border-color, var(--helix-color-border));--_floating-border-width: var(--color-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--color-input-shadow, var(--helix-shadow-floating));inline-size: var(--color-input-panel-size, 264px);overflow: hidden;padding: var(--helix-space-none);position: absolute;}[part="picker"] {display: block;padding: var(--helix-space-sm);}::slotted([slot="panel-header"]) {display: block;margin: var(--helix-space-sm) var(--helix-space-sm) var(--helix-space-none);}::slotted([slot="panel-footer"]) {display: block;margin: var(--helix-space-none) var(--helix-space-sm) var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="field"] {transition: none;}}:host([variant="swatch"]) [part="field"] {background-color: transparent;border: none;inline-size: max-content;padding-inline: var(--helix-space-none);}:host([variant="swatch"]) [part="trigger"] {block-size: var(--color-input-swatch-size, var(--helix-size-control));inline-size: var(--color-input-swatch-size, var(--helix-size-control));}:host([variant="swatch"]:focus-within) [part="field"] {outline: none;}:host([variant="swatch"]) [part="preview"] {block-size: 100%;border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--color-input-swatch-radius, var(--helix-radii-sm));inline-size: 100%;}slot[name="start"]::slotted(*),
|
|
14
|
-
slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}@media print {:host {print-color-adjust: exact;}}`);
|
|
2
|
+
export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--color-input-background-color, var(--helix-color-well));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);overflow: hidden;padding-inline-start: var(--helix-space-xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle)}[part="trigger"] {all: unset;align-items: stretch;align-self: stretch;box-sizing: border-box;cursor: pointer;display: flex;flex: none}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}:host(:disabled) [part="trigger"] {cursor: not-allowed}[part="preview"] {background-image: linear-gradient(var(--color-input-swatch, transparent), var(--color-input-swatch, transparent)), conic-gradient(var(--helix-color-surface-sunken) 0 25%, var(--helix-color-surface) 0 50%, var(--helix-color-surface-sunken) 0 75%, var(--helix-color-surface) 0);background-size: 100% 100%, var(--helix-space-sm) var(--helix-space-sm);border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: block;inline-size: var(--helix-size-control)}[part="surface"] {--_floating-border-color: var(--color-input-border-color, var(--helix-color-border));--_floating-border-width: var(--color-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--color-input-shadow, var(--helix-shadow-floating));inline-size: var(--color-input-panel-size, 264px);overflow: hidden;padding: var(--helix-space-none);position: absolute}[part="picker"] {display: block;padding: var(--helix-space-sm)}::slotted([slot="panel-header"]) {display: block;margin: var(--helix-space-sm) var(--helix-space-sm) var(--helix-space-none)}::slotted([slot="panel-footer"]) {display: block;margin: var(--helix-space-none) var(--helix-space-sm) var(--helix-space-sm)}@media (prefers-reduced-motion: reduce) {[part="field"] {transition: none}}:host([variant="swatch"]) [part="field"] {background-color: transparent;border: none;inline-size: max-content;padding-inline: var(--helix-space-none)}:host([variant="swatch"]) [part="trigger"] {block-size: var(--color-input-swatch-size, var(--helix-size-control));inline-size: var(--color-input-swatch-size, var(--helix-size-control))}:host([variant="swatch"]:focus-within) [part="field"] {outline: none}:host([variant="swatch"]) [part="preview"] {block-size: 100%;border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--color-input-swatch-radius, var(--helix-radii-sm));inline-size: 100%}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto}@media print {:host {print-color-adjust: exact}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessColorInput } from '@fusion.dev/helix-headless/color-input';
|
|
9
4
|
import '../../color-picker/index.js';
|
|
@@ -1,76 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_color-picker-along: to right;display: block;padding-block-end: var(--color-picker-padding, var(--helix-space-none));}:host(:dir(rtl)) {--_color-picker-along: to left;}[part="sample"],
|
|
3
|
-
[part="swatch"] {background-image:
|
|
4
|
-
linear-gradient(
|
|
5
|
-
var(--color-picker-swatch, transparent),
|
|
6
|
-
var(--color-picker-swatch, transparent)
|
|
7
|
-
),
|
|
8
|
-
conic-gradient(
|
|
9
|
-
var(--helix-color-surface-sunken) 0 25%,
|
|
10
|
-
var(--helix-color-surface) 0 50%,
|
|
11
|
-
var(--helix-color-surface-sunken) 0 75%,
|
|
12
|
-
var(--helix-color-surface) 0
|
|
13
|
-
);background-size:
|
|
14
|
-
100% 100%,
|
|
15
|
-
var(--helix-space-sm) var(--helix-space-sm);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;}[part="grid"] {aspect-ratio: var(--color-picker-grid-ratio, 1 / 0.7);background-image:
|
|
16
|
-
linear-gradient(to top, hsl(0 0% 0%), transparent),
|
|
17
|
-
linear-gradient(var(--_color-picker-along), hsl(0 0% 100%), transparent),
|
|
18
|
-
linear-gradient(hsl(var(--color-picker-hue) 100% 50%), hsl(var(--color-picker-hue) 100% 50%));border-radius: var(--color-picker-grid-radius, var(--helix-radii-sm));cursor: crosshair;position: relative;touch-action: none;}[part="grid"]::after {--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);block-size: var(--helix-size-icon-tight);border: var(--helix-border-thick) solid var(--helix-color-foreground-media);border-radius: var(--helix-radii-full);box-shadow:
|
|
19
|
-
0 0 0 var(--helix-border-thin)
|
|
20
|
-
color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent),
|
|
21
|
-
var(--helix-shadow-sm);content: "";inline-size: var(--helix-size-icon-tight);inset-block-start: clamp(
|
|
22
|
-
var(--_color-picker-mark-half),
|
|
23
|
-
calc(100% - var(--color-picker-brightness, 100%)),
|
|
24
|
-
calc(100% - var(--_color-picker-mark-half))
|
|
25
|
-
);inset-inline-start: clamp(
|
|
26
|
-
var(--_color-picker-mark-half),
|
|
27
|
-
var(--color-picker-saturation, 100%),
|
|
28
|
-
calc(100% - var(--_color-picker-mark-half))
|
|
29
|
-
);pointer-events: none;position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="grid"]::after {translate: 50% -50%;}[part="grid-saturation"],
|
|
30
|
-
[part="grid-brightness"] {appearance: none;background: none;inline-size: 100%;inset: 0;margin: var(--helix-space-none);opacity: 0;pointer-events: none;position: absolute;}[part="grid"]:has(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="wheel"] {--_color-picker-ring: var(--color-picker-wheel-thickness, var(--helix-space-lg));aspect-ratio: 1;border-radius: var(--helix-radii-full);cursor: crosshair;display: grid;margin-inline: auto;max-inline-size: var(--color-picker-wheel-size, 100%);place-items: center;position: relative;touch-action: none;}[part="wheel"]::before {background-image: conic-gradient(
|
|
31
|
-
hsl(0 100% 50%),
|
|
32
|
-
hsl(60 100% 50%),
|
|
33
|
-
hsl(120 100% 50%),
|
|
34
|
-
hsl(180 100% 50%),
|
|
35
|
-
hsl(240 100% 50%),
|
|
36
|
-
hsl(300 100% 50%),
|
|
37
|
-
hsl(360 100% 50%)
|
|
38
|
-
);border-radius: inherit;content: "";inset: 0;mask-image: radial-gradient(
|
|
39
|
-
farthest-side,
|
|
40
|
-
transparent calc(100% - var(--_color-picker-ring)),
|
|
41
|
-
#000 calc(100% - var(--_color-picker-ring) + 0.5px)
|
|
42
|
-
);position: absolute;}[part="wheel"]::after {--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);background-image: radial-gradient(
|
|
43
|
-
circle at 50% calc(var(--_color-picker-ring) / 2),
|
|
44
|
-
transparent calc(var(--_color-picker-mark-half) - var(--helix-border-thick)),
|
|
45
|
-
var(--helix-color-foreground-media)
|
|
46
|
-
calc(var(--_color-picker-mark-half) - var(--helix-border-thick))
|
|
47
|
-
var(--_color-picker-mark-half),
|
|
48
|
-
color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent)
|
|
49
|
-
var(--_color-picker-mark-half) calc(var(--_color-picker-mark-half) + var(--helix-border-thin)),
|
|
50
|
-
transparent calc(var(--_color-picker-mark-half) + var(--helix-border-thin))
|
|
51
|
-
);content: "";inset: 0;pointer-events: none;position: absolute;rotate: calc(var(--color-picker-hue, 0) * 1deg);}[part="wheel"] [part="grid"] {aspect-ratio: 1;inline-size: calc((100% - var(--_color-picker-ring) * 2 - var(--helix-space-sm) * 2) * 0.7071);}[part="wheel-hue"] {appearance: none;background: none;inset: 0;margin: var(--helix-space-none);opacity: 0;pointer-events: none;position: absolute;}[part="wheel"]:has([part="wheel-hue"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] {align-items: center;display: flex;gap: var(--helix-space-xs);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="sample"] {appearance: none;background-color: transparent;block-size: var(--color-picker-sample-size, 36px);box-sizing: border-box;cursor: copy;flex: none;font: inherit;inline-size: var(--color-picker-sample-size, 36px);padding: var(--helix-space-none);position: relative;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}[part="sample"]:disabled {cursor: not-allowed;}[part="sample"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="sample"][data-copied] {scale: 0.94;}[part="sample"][data-copied]::after {background-color: var(--helix-color-surface-overlay);block-size: 100%;content: "";inset: 0;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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 60%;position: absolute;}[part="channels"] {display: flex;flex: 1 1 auto;flex-direction: column;gap: var(--helix-space-sm);min-inline-size: 0;}[part="channel"]::part(label) {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap;}[part="channel"][data-channel="hue"] {--slider-track-image: linear-gradient(
|
|
52
|
-
var(--_color-picker-along),
|
|
53
|
-
hsl(0 100% 50%),
|
|
54
|
-
hsl(60 100% 50%),
|
|
55
|
-
hsl(120 100% 50%),
|
|
56
|
-
hsl(180 100% 50%),
|
|
57
|
-
hsl(240 100% 50%),
|
|
58
|
-
hsl(300 100% 50%),
|
|
59
|
-
hsl(360 100% 50%)
|
|
60
|
-
);}[part="channel"][data-channel="alpha"] {--slider-track-image:
|
|
61
|
-
linear-gradient(var(--_color-picker-along), transparent, hsl(var(--color-picker-hue) 100% 50%)),
|
|
62
|
-
conic-gradient(
|
|
63
|
-
var(--helix-color-surface-sunken) 0 25%,
|
|
64
|
-
var(--helix-color-surface) 0 50%,
|
|
65
|
-
var(--helix-color-surface-sunken) 0 75%,
|
|
66
|
-
var(--helix-color-surface) 0
|
|
67
|
-
);background-size:
|
|
68
|
-
100% 100%,
|
|
69
|
-
var(--helix-space-sm) var(--helix-space-sm);}[part="channel"] {--slider-fill-color: transparent;--slider-track-color: transparent;}[part="footer"]:empty {display: none;}[part="footer"] {display: flex;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="value"] {all: unset;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-control));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="value"]:hover {border-color: var(--helix-color-foreground-muted);}[part="value"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host([invalid]) [part="value"],
|
|
70
|
-
:host([invalid]) [part="value"]:hover,
|
|
71
|
-
:host([invalid]) [part="value"]:focus-visible,
|
|
72
|
-
:host(:state(invalid)) [part="value"],
|
|
73
|
-
:host(:state(invalid)) [part="value"]:hover,
|
|
74
|
-
:host(:state(invalid)) [part="value"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="fields"] {display: grid;gap: var(--color-picker-fields-gap, var(--helix-space-xs));grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([alpha]) [part="fields"] {grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr));}[part="field"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);min-inline-size: 0;}[part="field-label"] {color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);}[part="field-input"] {all: unset;appearance: textfield;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-control));font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: 100%;min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field-input"]::-webkit-inner-spin-button,
|
|
75
|
-
[part="field-input"]::-webkit-outer-spin-button {appearance: none;margin: 0;}[part="field-input"]:hover {border-color: var(--helix-color-foreground-muted);}[part="field-input"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="actions"] {display: flex;flex: 1 1 auto;}[part="actions"] helix-button {flex: 1 1 0;}::slotted([slot="eyedropper-icon"]) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="format"] {font-family: var(--helix-font-mono);font-variant-caps: all-small-caps;}[part="swatches"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);margin-block-start: var(--helix-space-sm);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="swatch"] {block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));cursor: pointer;inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));padding: var(--helix-space-none);}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);margin-block-end: var(--helix-space-xs);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([required]) [part="label"]::after {color: var(--helix-color-danger);content: "*";margin-inline-start: var(--helix-space-2xs);}@supports (content: "*" / "") {:host([required]) [part="label"]::after {content: "*" / "";}}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="feedback"] {color: var(--color-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);padding-inline: var(--color-picker-padding, var(--helix-space-none));}@media (prefers-reduced-motion: reduce) {[part="sample"] {transition: none;}[part="sample"][data-copied] {scale: 1;}}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="grid"],
|
|
76
|
-
:host([readonly]) [part="swatch"] {cursor: default;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_color-picker-along: to right;display: block;padding-block-end: var(--color-picker-padding, var(--helix-space-none))}:host(:dir(rtl)) {--_color-picker-along: to left}[part="sample"], [part="swatch"] {background-image: linear-gradient(var(--color-picker-swatch, transparent), var(--color-picker-swatch, transparent)), conic-gradient(var(--helix-color-surface-sunken) 0 25%, var(--helix-color-surface) 0 50%, var(--helix-color-surface-sunken) 0 75%, var(--helix-color-surface) 0);background-size: 100% 100%, var(--helix-space-sm) var(--helix-space-sm);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box}[part="grid"] {aspect-ratio: var(--color-picker-grid-ratio, 1 / 0.7);background-image: linear-gradient(to top, hsl(0 0% 0%), transparent), linear-gradient(var(--_color-picker-along), hsl(0 0% 100%), transparent), linear-gradient(hsl(var(--color-picker-hue) 100% 50%), hsl(var(--color-picker-hue) 100% 50%));border-radius: var(--color-picker-grid-radius, var(--helix-radii-sm));cursor: crosshair;position: relative;touch-action: none}[part="grid"]::after {--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);block-size: var(--helix-size-icon-tight);border: var(--helix-border-thick) solid var(--helix-color-foreground-media);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin) color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent), var(--helix-shadow-sm);content: "";inline-size: var(--helix-size-icon-tight);inset-block-start: clamp(var(--_color-picker-mark-half), calc(100% - var(--color-picker-brightness, 100%)), calc(100% - var(--_color-picker-mark-half)));inset-inline-start: clamp(var(--_color-picker-mark-half), var(--color-picker-saturation, 100%), calc(100% - var(--_color-picker-mark-half)));pointer-events: none;position: absolute;translate: -50% -50%}:host(:dir(rtl)) [part="grid"]::after {translate: 50% -50%}[part="grid-saturation"], [part="grid-brightness"] {appearance: none;background: none;inline-size: 100%;inset: 0;margin: var(--helix-space-none);opacity: 0;pointer-events: none;position: absolute}[part="grid"]:has(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="wheel"] {--_color-picker-ring: var(--color-picker-wheel-thickness, var(--helix-space-lg));aspect-ratio: 1;border-radius: var(--helix-radii-full);cursor: crosshair;display: grid;margin-inline: auto;max-inline-size: var(--color-picker-wheel-size, 100%);place-items: center;position: relative;touch-action: none}[part="wheel"]::before {background-image: conic-gradient(hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));border-radius: inherit;content: "";inset: 0;mask-image: radial-gradient(farthest-side, transparent calc(100% - var(--_color-picker-ring)), #000 calc(100% - var(--_color-picker-ring) + 0.5px));position: absolute}[part="wheel"]::after {--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);background-image: radial-gradient(circle at 50% calc(var(--_color-picker-ring) / 2), transparent calc(var(--_color-picker-mark-half) - var(--helix-border-thick)), var(--helix-color-foreground-media) calc(var(--_color-picker-mark-half) - var(--helix-border-thick)) var(--_color-picker-mark-half), color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent) var(--_color-picker-mark-half) calc(var(--_color-picker-mark-half) + var(--helix-border-thin)), transparent calc(var(--_color-picker-mark-half) + var(--helix-border-thin)));content: "";inset: 0;pointer-events: none;position: absolute;rotate: calc(var(--color-picker-hue, 0) * 1deg)}[part="wheel"] [part="grid"] {aspect-ratio: 1;inline-size: calc((100% - var(--_color-picker-ring) * 2 - var(--helix-space-sm) * 2) * 0.7071)}[part="wheel-hue"] {appearance: none;background: none;inset: 0;margin: var(--helix-space-none);opacity: 0;pointer-events: none;position: absolute}[part="wheel"]:has([part="wheel-hue"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="controls"] {align-items: center;display: flex;gap: var(--helix-space-xs);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none))}[part="sample"] {appearance: none;background-color: transparent;block-size: var(--color-picker-sample-size, 36px);box-sizing: border-box;cursor: copy;flex: none;font: inherit;inline-size: var(--color-picker-sample-size, 36px);padding: var(--helix-space-none);position: relative;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized)}[part="sample"]:disabled {cursor: not-allowed}[part="sample"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="sample"][data-copied] {scale: 0.94}[part="sample"][data-copied]::after {background-color: var(--helix-color-surface-overlay);block-size: 100%;content: "";inset: 0;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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 60%;position: absolute}[part="channels"] {display: flex;flex: 1 1 auto;flex-direction: column;gap: var(--helix-space-sm);min-inline-size: 0}[part="channel"]::part(label) {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap}[part="channel"][data-channel="hue"] {--slider-track-image: linear-gradient(var(--_color-picker-along), hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))}[part="channel"][data-channel="alpha"] {--slider-track-image: linear-gradient(var(--_color-picker-along), transparent, hsl(var(--color-picker-hue) 100% 50%)), conic-gradient(var(--helix-color-surface-sunken) 0 25%, var(--helix-color-surface) 0 50%, var(--helix-color-surface-sunken) 0 75%, var(--helix-color-surface) 0);background-size: 100% 100%, var(--helix-space-sm) var(--helix-space-sm)}[part="channel"] {--slider-fill-color: transparent;--slider-track-color: transparent}[part="footer"]:empty {display: none}[part="footer"] {display: flex;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none))}[part="value"] {all: unset;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-control));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="value"]:hover {border-color: var(--helix-color-foreground-muted)}[part="value"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host([invalid]) [part="value"], :host([invalid]) [part="value"]:hover, :host([invalid]) [part="value"]:focus-visible, :host(:state(invalid)) [part="value"], :host(:state(invalid)) [part="value"]:hover, :host(:state(invalid)) [part="value"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}[part="fields"] {display: grid;gap: var(--color-picker-fields-gap, var(--helix-space-xs));grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none))}:host([alpha]) [part="fields"] {grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr))}[part="field"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);min-inline-size: 0}[part="field-label"] {color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium)}[part="field-input"] {all: unset;appearance: textfield;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-control));font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: 100%;min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="field-input"]::-webkit-inner-spin-button, [part="field-input"]::-webkit-outer-spin-button {appearance: none;margin: 0}[part="field-input"]:hover {border-color: var(--helix-color-foreground-muted)}[part="field-input"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}[part="actions"] {display: flex;flex: 1 1 auto}[part="actions"] helix-button {flex: 1 1 0}::slotted([slot="eyedropper-icon"]) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon))}[part="format"] {font-family: var(--helix-font-mono);font-variant-caps: all-small-caps}[part="swatches"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);margin-block-start: var(--helix-space-sm);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none))}[part="swatch"] {block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));cursor: pointer;inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));padding: var(--helix-space-none)}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);margin-block-end: var(--helix-space-xs);padding-inline: var(--color-picker-padding, var(--helix-space-none))}:host([required]) [part="label"]::after {color: var(--helix-color-danger);content: "*";margin-inline-start: var(--helix-space-2xs)}@supports (content: "*" / "") {:host([required]) [part="label"]::after {content: "*" / ""}}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none))}[part="feedback"] {color: var(--color-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);padding-inline: var(--color-picker-padding, var(--helix-space-none))}@media (prefers-reduced-motion: reduce) {[part="sample"] {transition: none}[part="sample"][data-copied] {scale: 1}}:host(:disabled) {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="grid"], :host([readonly]) [part="swatch"] {cursor: default}@media print {:host {box-shadow: none;print-color-adjust: exact}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picker';
|
|
9
4
|
import '../../button/index.js';
|
|
@@ -1,12 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {position: relative
|
|
3
|
-
background-color var(--helix-duration-fast) var(--helix-easing-standard),
|
|
4
|
-
border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field"]:has([part="tags"]) {block-size: auto;flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon-tight));position: relative;}[part="indicator"],
|
|
5
|
-
::slotted([slot="indicator"]) {transition: scale var(--helix-duration-fast) var(--helix-easing-standard);}[part="field"]:has([part="tags"]) [part="indicator"],
|
|
6
|
-
[part="field"]:has([part="tags"]) ::slotted([slot="indicator"]) {inset-block-start: 50%;inset-inline-end: var(--helix-space-xs);position: absolute;translate: 0 -50%;}[part="tag"] {flex: 0 0 auto;max-inline-size: 100%;}[part="field"]:has([part="tags"]) [part="control"] {flex: 1 1 var(--combobox-control-size, 4ch);}[part="control"]::placeholder {color: var(--helix-color-foreground-subtle);font-weight: var(--helix-weight-medium);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;opacity: 0.5;}[part="indicator"] {block-size: var(--helix-size-icon-tight);color: var(--helix-color-foreground-muted);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);}:host(:state(open)) [part="indicator"],
|
|
7
|
-
:host(:state(open)) ::slotted([slot="indicator"]) {scale: 1 -1;}slot[name="start"]::slotted(*),
|
|
8
|
-
slot[name="end"]::slotted(*) {--icon-size: var(--helix-size-icon);color: var(--helix-color-foreground-muted);flex: 0 0 auto;}[part="surface"] {--_floating-border-color: var(--combobox-border-color, var(--helix-color-border));--_floating-border-width: var(--combobox-border-width, var(--helix-border-floating));--_floating-shadow: var(--combobox-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--combobox-panel-size, max-content);max-block-size: var(--floating-available-block-size, none);max-inline-size: calc(100vw - var(--helix-space-md) * 2);min-inline-size: var(--floating-anchor-inline-size, 100%);overflow: hidden;padding: var(--helix-space-none);position: absolute;}[part~="create"] {all: unset;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding: var(--helix-space-xs) var(--helix-space-sm);text-align: start;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part~="create"]:hover,
|
|
9
|
-
[part~="create-active"] {background-color: light-dark(
|
|
10
|
-
color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
|
|
11
|
-
color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
|
|
12
|
-
);}[part~="create"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block;}@media (prefers-reduced-motion: reduce) {[part="field"] {transition: none;}[part~="create"] {transition: none;}}@media print {:host {print-color-adjust: exact;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {position: relative}[part="field"] {align-items: center;background-color: var(--combobox-background-color, var(--helix-color-well));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;display: flex;gap: var(--helix-space-xs);padding-inline: var(--helix-space-xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="field"]:has([part="tags"]) {block-size: auto;flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon-tight));position: relative}[part="indicator"], ::slotted([slot="indicator"]) {transition: scale var(--helix-duration-fast) var(--helix-easing-standard)}[part="field"]:has([part="tags"]) [part="indicator"], [part="field"]:has([part="tags"]) ::slotted([slot="indicator"]) {inset-block-start: 50%;inset-inline-end: var(--helix-space-xs);position: absolute;translate: 0 -50%}[part="tag"] {flex: 0 0 auto;max-inline-size: 100%}[part="field"]:has([part="tags"]) [part="control"] {flex: 1 1 var(--combobox-control-size, 4ch)}[part="control"]::placeholder {color: var(--helix-color-foreground-subtle);font-weight: var(--helix-weight-medium)}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;opacity: 0.5}[part="indicator"] {block-size: var(--helix-size-icon-tight);color: var(--helix-color-foreground-muted);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host(:state(open)) [part="indicator"], :host(:state(open)) ::slotted([slot="indicator"]) {scale: 1 -1}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {--icon-size: var(--helix-size-icon);color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="surface"] {--_floating-border-color: var(--combobox-border-color, var(--helix-color-border));--_floating-border-width: var(--combobox-border-width, var(--helix-border-floating));--_floating-shadow: var(--combobox-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--combobox-panel-size, max-content);max-block-size: var(--floating-available-block-size, none);max-inline-size: calc(100vw - var(--helix-space-md) * 2);min-inline-size: var(--floating-anchor-inline-size, 100%);overflow: hidden;padding: var(--helix-space-none);position: absolute}[part~="create"] {all: unset;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding: var(--helix-space-xs) var(--helix-space-sm);text-align: start;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard)}[part~="create"]:hover, [part~="create-active"] {background-color: light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent))}[part~="create"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block}@media (prefers-reduced-motion: reduce) {[part="field"] {transition: none}[part~="create"] {transition: none}}@media print {:host {print-color-adjust: exact}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
|
|
9
4
|
import '../../listbox/index.js';
|
|
@@ -1,4 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`helix-dialog::part(dialog) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none)
|
|
3
|
-
:host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs);}:host([data-density="lg"]),
|
|
4
|
-
:host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md);}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding);}[part="footer"][hidden] {display: none;}:host([inline]) {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: block;inline-size: min(var(--command-size, 40rem), 100%);overflow: hidden;}@media print {:host {display: none;}}`);
|
|
2
|
+
export const styles = createSheet(`helix-dialog::part(dialog) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none)}:host {--option-padding: var(--helix-space-sm)}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs)}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding)}helix-listbox::part(search-field) {font-size: max(var(--helix-text-field-min), var(--helix-text-md))}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row)}:host([data-density="sm"]), :host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs)}:host([data-density="lg"]), :host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md)}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding)}[part="footer"][hidden] {display: none}:host([inline]) {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: block;inline-size: min(var(--command-size, 40rem), 100%);overflow: hidden}@media print {:host {display: none}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
|
|
9
4
|
import '../../dialog/index.js';
|
|
@@ -1,6 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_icon-button-ink: var(--copy-button-color, var(--helix-color-foreground-muted));--_icon-button-ink-hover: var(
|
|
3
|
-
--copy-button-color-hover,
|
|
4
|
-
var(--copy-button-color, var(--helix-color-foreground))
|
|
5
|
-
);--_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)));}[part="button"] {display: inline-grid;place-items: center;}[part="button"] > slot {grid-area: 1 / 1;}:host([show-label]) [part="button"] {column-gap: var(--helix-space-xs);grid-auto-flow: column;inline-size: auto;padding-inline: var(--helix-space-sm);}[part="text"] {display: inline-grid;font-weight: var(--helix-weight-medium);grid-area: 1 / 2;justify-items: start;}[part="text"] > span {grid-area: 1 / 1;}[part="text"] > [hidden] {display: block;visibility: hidden;}slot[hidden] {display: none;}[part="button"][data-copied] {color: var(--copy-button-success-color, var(--helix-color-success));}:host(:not(:disabled)) [part="button"][data-copied]:hover {color: var(--copy-button-success-color, var(--helix-color-success));}[part="button"][data-failed],
|
|
6
|
-
:host(:not(:disabled)) [part="button"][data-failed]:hover {color: var(--copy-button-error-color, var(--helix-color-danger));}slot > svg {block-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));inline-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));}@media print {:host {display: none;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_icon-button-ink: var(--copy-button-color, var(--helix-color-foreground-muted));--_icon-button-ink-hover: var(--copy-button-color-hover, var(--copy-button-color, var(--helix-color-foreground)));--_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)))}[part="button"] {display: inline-grid;place-items: center}[part="button"] > slot {grid-area: 1 / 1}:host([show-label]) [part="button"] {column-gap: var(--helix-space-xs);grid-auto-flow: column;inline-size: auto;padding-inline: var(--helix-space-sm)}[part="text"] {display: inline-grid;font-weight: var(--helix-weight-medium);grid-area: 1 / 2;justify-items: start}[part="text"] > span {grid-area: 1 / 1}[part="text"] > [hidden] {display: block;visibility: hidden}slot[hidden] {display: none}[part="button"][data-copied] {color: var(--copy-button-success-color, var(--helix-color-success))}:host(:not(:disabled)) [part="button"][data-copied]:hover {color: var(--copy-button-success-color, var(--helix-color-success))}[part="button"][data-failed], :host(:not(:disabled)) [part="button"][data-failed]:hover {color: var(--copy-button-error-color, var(--helix-color-danger))}slot > svg {block-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));inline-size: var(--copy-button-icon-size, var(--helix-size-icon-tight))}@media print {:host {display: none}}`);
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
1
|
+
import { __decorate } from "tslib";
|
|
7
2
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { HelixHeadlessCopyButton } from '@fusion.dev/helix-headless/copy-button';
|
|
9
4
|
import { HelixIconButton } from '../../icon-button/root/icon-button-root.js';
|