@fusion.dev/helix 0.182.0 → 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 +7900 -5780
- 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 +214 -204
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_step-inset: var(--helix-space-sm);align-content: start;align-items: start;column-gap: var(--helix-space-2xs);counter-increment: helix-step;display: grid;flex: 0 0 auto;grid-template-columns: var(--_steps-columns, minmax(0, 1fr));min-inline-size: 0;position: relative;row-gap: var(--_steps-row-gap, var(--helix-space-2xs));}:host::before,
|
|
3
|
-
:host::after {background-color: var(--steps-connector-color, var(--helix-color-border));content: "";position: absolute;z-index: 0;}:host::before {block-size: var(--_steps-lead-block-size, var(--helix-border-thin));inline-size: var(--_steps-lead-inline-size, 0);inset-block-start: var(--_steps-lead-block-start, 50%);inset-inline-start: var(--_steps-lead-inline-start, 0);}:host::after {block-size: var(--_steps-trail-block-size, var(--helix-border-thin));inline-size: var(--_steps-trail-inline-size, 0);inset-block-start: var(--_steps-trail-block-start, 50%);inset-inline-start: var(--_steps-trail-inline-start, 0);}:host(:first-child)::before,
|
|
4
|
-
:host(:last-child)::after {display: none;}[part="marker"] {align-items: center;grid-column: var(--_steps-marker-column, 1);grid-row: 1;justify-self: var(--_steps-marker-justify, center);block-size: var(--_steps-mark-box, var(--helix-size-icon));box-sizing: border-box;color: var(--_steps-marker-color, var(--helix-color-border));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);inline-size: var(--_steps-mark-box, var(--helix-size-icon));justify-content: center;position: relative;transition: color var(--helix-duration-fast) var(--helix-easing-standard);z-index: 1;}[part="marker"] slot {align-items: center;display: inline-flex;justify-content: center;}[part="marker"]::after {content: var(--_steps-count, none);}[part="marker"] svg {block-size: var(--_steps-m, var(--helix-size-icon));display: var(--_steps-mark, inline);flex: 0 0 auto;inline-size: var(--_steps-m, var(--helix-size-icon));}slot[name="marker"]::slotted(*) {--icon-size: var(--_steps-m, var(--helix-size-icon));}:host([complete]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}:host([current]) [part="marker"] {color: var(--steps-current-color, var(--_steps-ink-current, var(--helix-color-primary)));}:host([complete][current]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}[part="body"] {align-items: var(--_steps-body-align, center);grid-column: var(--_steps-body-column, 1);grid-row: var(--_steps-body-row, 2);display: flex;flex-direction: column;min-inline-size: 0;position: relative;z-index: 1;}[part="label"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-space-control: var(--_step-inset);--helix-text-control: var(--helix-text-sm);--button-foreground-color: var(--helix-color-foreground-muted);max-inline-size: 100%;}:host([complete]) [part="label"],
|
|
5
|
-
:host([current]) [part="label"] {--button-foreground-color: var(--helix-color-foreground);}[part="description"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-inline: var(--_step-inset);}:host([disabled]) [part="marker"],
|
|
6
|
-
:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition:
|
|
7
|
-
grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard),
|
|
8
|
-
visibility var(--helix-duration-normal) var(--helix-easing-standard);visibility: hidden;}:host([current]) [part="content"] {grid-template-rows: 1fr;visibility: visible;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_step-inset: var(--helix-space-sm);align-content: start;align-items: start;column-gap: var(--helix-space-2xs);counter-increment: helix-step;display: grid;flex: 0 0 auto;grid-template-columns: var(--_steps-columns, minmax(0, 1fr));min-inline-size: 0;position: relative;row-gap: var(--_steps-row-gap, var(--helix-space-2xs))}:host::before, :host::after {background-color: var(--steps-connector-color, var(--helix-color-border));content: "";position: absolute;z-index: 0}:host::before {block-size: var(--_steps-lead-block-size, var(--helix-border-thin));inline-size: var(--_steps-lead-inline-size, 0);inset-block-start: var(--_steps-lead-block-start, 50%);inset-inline-start: var(--_steps-lead-inline-start, 0)}:host::after {block-size: var(--_steps-trail-block-size, var(--helix-border-thin));inline-size: var(--_steps-trail-inline-size, 0);inset-block-start: var(--_steps-trail-block-start, 50%);inset-inline-start: var(--_steps-trail-inline-start, 0)}:host(:first-child)::before, :host(:last-child)::after {display: none}[part="marker"] {align-items: center;grid-column: var(--_steps-marker-column, 1);grid-row: 1;justify-self: var(--_steps-marker-justify, center);block-size: var(--_steps-mark-box, var(--helix-size-icon));box-sizing: border-box;color: var(--_steps-marker-color, var(--helix-color-border));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);inline-size: var(--_steps-mark-box, var(--helix-size-icon));justify-content: center;position: relative;transition: color var(--helix-duration-fast) var(--helix-easing-standard);z-index: 1}[part="marker"] slot {align-items: center;display: inline-flex;justify-content: center}[part="marker"]::after {content: var(--_steps-count, none)}[part="marker"] svg {block-size: var(--_steps-m, var(--helix-size-icon));display: var(--_steps-mark, inline);flex: 0 0 auto;inline-size: var(--_steps-m, var(--helix-size-icon))}slot[name="marker"]::slotted(*) {--icon-size: var(--_steps-m, var(--helix-size-icon))}:host([complete]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)))}:host([current]) [part="marker"] {color: var(--steps-current-color, var(--_steps-ink-current, var(--helix-color-primary)))}:host([complete][current]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)))}[part="body"] {align-items: var(--_steps-body-align, center);grid-column: var(--_steps-body-column, 1);grid-row: var(--_steps-body-row, 2);display: flex;flex-direction: column;min-inline-size: 0;position: relative;z-index: 1}[part="label"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-space-control: var(--_step-inset);--helix-text-control: var(--helix-text-sm);--button-foreground-color: var(--helix-color-foreground-muted);max-inline-size: 100%}:host([complete]) [part="label"], :host([current]) [part="label"] {--button-foreground-color: var(--helix-color-foreground)}[part="description"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-inline: var(--_step-inset)}:host([disabled]) [part="marker"], :host([disabled]) [part="description"] {opacity: 0.5}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard), visibility var(--helix-duration-normal) var(--helix-easing-standard);visibility: hidden}:host([current]) [part="content"] {grid-template-rows: 1fr;visibility: visible}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden}`);
|
package/dist/steps/step/step.js
CHANGED
|
@@ -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 { HelixHeadlessStep } from '@fusion.dev/helix-headless/steps';
|
|
9
4
|
import '../../button/index.js';
|
|
@@ -1,8 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(
|
|
3
|
-
115deg,
|
|
4
|
-
var(--_strands-ground) 20%,
|
|
5
|
-
color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%,
|
|
6
|
-
color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%,
|
|
7
|
-
var(--_strands-ground) 82%
|
|
8
|
-
);pointer-events: none;}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath);}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color;}[part="content"] {inset: 0;pointer-events: none;position: absolute;}::slotted(*) {pointer-events: auto;}[part="canvas"][hidden] {display: none;}@media print {:host {display: none;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_strands-glow: var(--strands-glow, var(--helix-color-primary));--_strands-ground: var(--strands-ground, var(--helix-color-background));--_strands-tint: var(--strands-tint, var(--helix-color-accent));position: relative;display: block;inline-size: 100%;block-size: 100%;background-image: linear-gradient(115deg, var(--_strands-ground) 20%, color-mix(in oklab, var(--_strands-glow) 22%, var(--_strands-ground)) 48%, color-mix(in oklab, var(--_strands-tint) 12%, var(--_strands-ground)) 58%, var(--_strands-ground) 82%);pointer-events: none}:host([travel]) {block-size: auto;inline-size: auto;inset: 0;position: fixed;z-index: var(--helix-layer-beneath)}[part="canvas"] {display: block;inline-size: 100%;block-size: 100%;caret-color: var(--strands-peak, var(--helix-color-primary-hover));color: var(--_strands-glow);column-rule-color: var(--strands-peak, var(--helix-color-primary-active));outline-color: var(--_strands-ground);text-decoration-color: var(--_strands-tint);transition-duration: var(--helix-duration-fast);transition-property: caret-color, color, column-rule-color, outline-color, text-decoration-color}[part="content"] {inset: 0;pointer-events: none;position: absolute}::slotted(*) {pointer-events: auto}[part="canvas"][hidden] {display: none}@media print {:host {display: none}}`);
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
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
|
-
};
|
|
7
1
|
var HelixStrands_1;
|
|
2
|
+
import { __decorate } from "tslib";
|
|
8
3
|
import { customElement, drawsInSoftware, elementById, HelixElement, HelixStrandsFallbackEvent, MAX_FRAME_STEP, PaintGateController, readColor, } from '@fusion.dev/helix-core';
|
|
9
4
|
import { html } from 'lit';
|
|
10
5
|
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: none
|
|
2
|
+
export const styles = createSheet(`:host {display: none}@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, HelixElement } from '@fusion.dev/helix-core';
|
|
8
3
|
import { nothing } from 'lit';
|
|
9
4
|
import { property } from 'lit/decorators.js';
|
|
@@ -1,4 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_switch-height: var(--switch-block-size, var(--helix-size-switch));--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));--_switch-inset: calc(var(--helix-space-2xs) / 2);--_field-control-inline-size: var(--_switch-width);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);}[part="thumb"] {align-items: center;color: var(--switch-icon-color, var(--helix-color-foreground-muted));display: flex;justify-content: center;background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);inset-block-start: 50%;inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));pointer-events: none;position: absolute;translate: 0 -50%;transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized);}:host(:state(checked)) [part="thumb"] {border-color: transparent;color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary)));}[part="thumb"] ::slotted(*) {--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7);}:host(:state(checked)) [part="track"] {background-color: var(--switch-on-color, var(--helix-color-primary));border-color: var(--switch-on-color, var(--helix-color-primary));}[part="control"] {appearance: none;block-size: 100%;cursor: inherit;grid-area: 1 / 1;inline-size: 100%;margin: var(--helix-space-none);opacity: 0;}:host(:state(checked)) [part="thumb"] {background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;}[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:state(invalid)) [part="track"] {border-color: var(--helix-color-danger);}[part="label"][data-empty] {display: none;}@media print {:host {print-color-adjust: exact;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_switch-height: var(--switch-block-size, var(--helix-size-switch));--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));--_switch-inset: calc(var(--helix-space-2xs) / 2);--_field-control-inline-size: var(--_switch-width);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="track"] {background-color: var(--helix-color-surface-sunken);block-size: var(--_switch-height);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_switch-width);position: relative;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="thumb"] {align-items: center;color: var(--switch-icon-color, var(--helix-color-foreground-muted));display: flex;justify-content: center;background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-full);inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);inset-block-start: 50%;inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));pointer-events: none;position: absolute;translate: 0 -50%;transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized)}:host(:state(checked)) [part="thumb"] {border-color: transparent;color: var(--switch-icon-color, var(--switch-on-color, var(--helix-color-primary)))}[part="thumb"] ::slotted(*) {--icon-size: calc((var(--_switch-height) - var(--_switch-inset) * 2) * 0.7)}:host(:state(checked)) [part="track"] {background-color: var(--switch-on-color, var(--helix-color-primary));border-color: var(--switch-on-color, var(--helix-color-primary))}[part="control"] {appearance: none;block-size: 100%;cursor: inherit;grid-area: 1 / 1;inline-size: 100%;margin: var(--helix-space-none);opacity: 0}:host(:state(checked)) [part="thumb"] {background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-primary));translate: calc(var(--_switch-width) - var(--_switch-height)) -50%}[part="track"]:has([part="control"]:focus-visible) [part="thumb"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(invalid)) [part="track"] {border-color: var(--helix-color-danger)}[part="label"][data-empty] {display: 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 { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
|
|
9
4
|
import { html } from 'lit';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: flex;font-size: var(--helix-text-sm);justify-content: var(--table-cell-align);min-block-size: var(--helix-size-control);min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none) var(--helix-space-md);text-align: var(--table-cell-align)
|
|
2
|
+
export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: flex;font-size: var(--helix-text-sm);justify-content: var(--table-cell-align);min-block-size: var(--helix-size-control);min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none) var(--helix-space-md);text-align: var(--table-cell-align)}:host(:state(text)) slot {display: block;min-inline-size: 0}::slotted(*) {min-inline-size: 0}:host([header]) {font-weight: var(--helix-weight-medium)}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}`);
|
|
@@ -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 { HelixHeadlessTableCell } from '@fusion.dev/helix-headless/table';
|
|
9
4
|
import { styles } from './table-cell.css.js';
|
|
@@ -1,11 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: contents;}[part="column"] {align-items: center;border-block-end: var(--helix-border-thin) solid
|
|
3
|
-
var(--_table-heading-rule-color, var(--helix-color-border));box-sizing: border-box;color: var(--_table-heading-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--_table-heading-text, var(--helix-text-sm));font-weight: var(--helix-weight-semibold);min-block-size: var(--helix-size-control-loose);min-inline-size: 0;padding-block: var(--_table-heading-padding-block, var(--helix-space-none));padding-inline: var(
|
|
4
|
-
--_table-heading-padding-inline,
|
|
5
|
-
var(--helix-space-none) var(--helix-space-md)
|
|
6
|
-
);}[part="column"] {background-color: var(--_table-heading-background-color, transparent);inset-block-start: 0;position: var(--_table-heading-position, relative);z-index: var(--_table-heading-layer, auto);}[part="sort"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;flex: 1;gap: var(--helix-space-2xs);min-inline-size: 0;}:host([text-align="center"]) [part="column"],
|
|
7
|
-
:host([text-align="center"]) [part="sort"] {justify-content: center;}:host([text-align="end"]) [part="column"],
|
|
8
|
-
:host([text-align="end"]) [part="sort"] {justify-content: flex-end;}[part="sort"]:focus-visible,
|
|
9
|
-
[part="grip"]:focus-visible,
|
|
10
|
-
[part="resizer"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="column"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: grab;display: inline-flex;flex: none;margin-inline-end: var(--helix-space-2xs);touch-action: none;}[part="grip"]:active {cursor: grabbing;}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}[part="resizer"] {cursor: col-resize;inline-size: var(--helix-space-sm);inset-block: 0;inset-inline-end: 0;position: absolute;touch-action: none;}[part="resizer"]::after {border-inline-end: var(--helix-border-thin) solid transparent;content: "";inset-block: var(--helix-space-xs);inset-inline-end: 0;position: absolute;}[part="resizer"]:hover::after,
|
|
11
|
-
[part="resizer"]:focus-visible::after {border-inline-end-color: var(--helix-color-foreground-muted);}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: contents}[part="column"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--_table-heading-rule-color, var(--helix-color-border));box-sizing: border-box;color: var(--_table-heading-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--_table-heading-text, var(--helix-text-sm));font-weight: var(--helix-weight-semibold);min-block-size: var(--helix-size-control-loose);min-inline-size: 0;padding-block: var(--_table-heading-padding-block, var(--helix-space-none));padding-inline: var(--_table-heading-padding-inline, var(--helix-space-none) var(--helix-space-md))}[part="column"] {background-color: var(--_table-heading-background-color, transparent);inset-block-start: 0;position: var(--_table-heading-position, relative);z-index: var(--_table-heading-layer, auto)}[part="sort"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;flex: 1;gap: var(--helix-space-2xs);min-inline-size: 0}:host([text-align="center"]) [part="column"], :host([text-align="center"]) [part="sort"] {justify-content: center}:host([text-align="end"]) [part="column"], :host([text-align="end"]) [part="sort"] {justify-content: flex-end}[part="sort"]:focus-visible, [part="grip"]:focus-visible, [part="resizer"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="column"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="grip"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: grab;display: inline-flex;flex: none;margin-inline-end: var(--helix-space-2xs);touch-action: none}[part="grip"]:active {cursor: grabbing}[part="grip-mark"] {block-size: 1em;inline-size: 1em}[part="resizer"] {cursor: col-resize;inline-size: var(--helix-space-sm);inset-block: 0;inset-inline-end: 0;position: absolute;touch-action: none}[part="resizer"]::after {border-inline-end: var(--helix-border-thin) solid transparent;content: "";inset-block: var(--helix-space-xs);inset-inline-end: 0;position: absolute}[part="resizer"]:hover::after, [part="resizer"]:focus-visible::after {border-inline-end-color: var(--helix-color-foreground-muted)}`);
|
|
@@ -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 { HelixHeadlessTableColumn } from '@fusion.dev/helix-headless/table';
|
|
9
4
|
import { styles } from './table-column.css.js';
|
|
@@ -1,11 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block;overflow-x: auto
|
|
3
|
-
[part="grip-head"]:focus-visible,
|
|
4
|
-
[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center;}:host([windowed]) [part="table"] {align-content: start;block-size: var(--table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(
|
|
5
|
-
--table-heading-background-color,
|
|
6
|
-
var(--helix-color-background)
|
|
7
|
-
);--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky;}:host([windowed]) [part="expand-head"],
|
|
8
|
-
:host([windowed]) [part="grip-head"],
|
|
9
|
-
:host([windowed]) [part="select-all"] {background-color: var(--table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="after"],
|
|
10
|
-
[part="before"] {grid-column: 1 / -1;}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
|
|
11
|
-
var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block;overflow-x: auto}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%}[part="head"] {display: contents}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm))}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md)}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose)}[part="expand-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose)}[part="expand-head"]:focus-visible, [part="grip-head"]:focus-visible, [part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center}:host([windowed]) [part="table"] {align-content: start;block-size: var(--table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(--table-heading-background-color, var(--helix-color-background));--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky}:host([windowed]) [part="expand-head"], :host([windowed]) [part="grip-head"], :host([windowed]) [part="select-all"] {background-color: var(--table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky)}[part="after"], [part="before"] {grid-column: 1 / -1}:host([loading]) [part="table"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9)}@media print {:host {print-color-adjust: economy}}`);
|
|
@@ -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 { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
|
|
9
4
|
import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
|
|
@@ -1,25 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: contents
|
|
3
|
-
var(--helix-space-xs);}:host(:state(selected)) [part~="select"],
|
|
4
|
-
:host(:state(selected)) [part~="expand"],
|
|
5
|
-
:host(:state(selected)) ::slotted(*) {background-color: color-mix(
|
|
6
|
-
in srgb,
|
|
7
|
-
var(--helix-color-primary) 10%,
|
|
8
|
-
var(--helix-color-background)
|
|
9
|
-
);}:host([disabled]) [part~="select"],
|
|
10
|
-
:host([disabled]) [part~="expand"],
|
|
11
|
-
:host([disabled]) ::slotted(*) {opacity: var(--table-row-disabled-opacity, 0.5);}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
|
|
12
|
-
--table-row-hover-background-color,
|
|
13
|
-
color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
|
|
14
|
-
);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="expand-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-expand-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;justify-content: center;}[part="expand-button"]:hover {color: var(--helix-color-foreground);}[part="expand-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="expand-mark"] {block-size: 1em;inline-size: 1em;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(expanded)) [part="expand-mark"] {rotate: 90deg;}[part~="grip"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-2xs) var(--helix-space-sm);}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="grip-button"]:active {cursor: grabbing;}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="grip"],
|
|
15
|
-
:host(:state(dragging)) [part~="select"],
|
|
16
|
-
:host(:state(dragging)) [part~="expand"],
|
|
17
|
-
:host(:state(dragging)) ::slotted(*) {opacity: var(--table-dragging-opacity, 0.5);}:host(:state(drop-before)) [part~="grip"],
|
|
18
|
-
:host(:state(drop-before)) [part~="select"],
|
|
19
|
-
:host(:state(drop-before)) [part~="expand"],
|
|
20
|
-
:host(:state(drop-before)) ::slotted(*) {box-shadow: inset 0 var(--table-drop-indicator-size, var(--helix-border-thick)) 0 0
|
|
21
|
-
var(--table-drop-indicator-color, var(--helix-color-primary));}:host(:state(drop-after)) [part~="grip"],
|
|
22
|
-
:host(:state(drop-after)) [part~="select"],
|
|
23
|
-
:host(:state(drop-after)) [part~="expand"],
|
|
24
|
-
:host(:state(drop-after)) ::slotted(*) {box-shadow: inset 0 calc(var(--table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0
|
|
25
|
-
var(--table-drop-indicator-color, var(--helix-color-primary));}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: contents}[part~="select"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-none) var(--helix-space-md)}[part~="expand"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: calc((var(--table-row-level, 1) - 1) * var(--table-indent, var(--helix-space-lg))) var(--helix-space-xs)}:host(:state(selected)) [part~="select"], :host(:state(selected)) [part~="expand"], :host(:state(selected)) ::slotted(*) {background-color: color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background))}:host([disabled]) [part~="select"], :host([disabled]) [part~="expand"], :host([disabled]) ::slotted(*) {opacity: var(--table-row-disabled-opacity, 0.5)}:host(:state(link)) ::slotted(*) {cursor: pointer}:host(:state(link):hover) ::slotted(*) {background-color: var(--table-row-hover-background-color, color-mix(in oklab, var(--helix-color-foreground) 5%, transparent))}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="expand-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-expand-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;justify-content: center}[part="expand-button"]:hover {color: var(--helix-color-foreground)}[part="expand-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="expand-mark"] {block-size: 1em;inline-size: 1em;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(expanded)) [part="expand-mark"] {rotate: 90deg}[part~="grip"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-2xs) var(--helix-space-sm)}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none}[part="grip-button"]:active {cursor: grabbing}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4)}[part="grip-mark"] {block-size: 1em;inline-size: 1em}:host(:state(dragging)) [part~="grip"], :host(:state(dragging)) [part~="select"], :host(:state(dragging)) [part~="expand"], :host(:state(dragging)) ::slotted(*) {opacity: var(--table-dragging-opacity, 0.5)}:host(:state(drop-before)) [part~="grip"], :host(:state(drop-before)) [part~="select"], :host(:state(drop-before)) [part~="expand"], :host(:state(drop-before)) ::slotted(*) {box-shadow: inset 0 var(--table-drop-indicator-size, var(--helix-border-thick)) 0 0 var(--table-drop-indicator-color, var(--helix-color-primary))}:host(:state(drop-after)) [part~="grip"], :host(:state(drop-after)) [part~="select"], :host(:state(drop-after)) [part~="expand"], :host(:state(drop-after)) ::slotted(*) {box-shadow: inset 0 calc(var(--table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0 var(--table-drop-indicator-color, var(--helix-color-primary))}`);
|
|
@@ -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 { HelixHeadlessTableRow } from '@fusion.dev/helix-headless/table';
|
|
9
4
|
import { styles } from './table-row.css.js';
|
|
@@ -1,5 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: contents
|
|
3
|
-
--tabs-panel-padding-block-start,
|
|
4
|
-
var(--_tabs-panel-padding-block-start, var(--helix-space-md))
|
|
5
|
-
);padding-inline-start: var(--_tabs-panel-padding-inline-start, var(--helix-space-none));}[part="panel"][hidden] {display: none;}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: contents}[part="panel"] {min-block-size: 0;min-inline-size: 0;outline: none;padding-block-start: var(--tabs-panel-padding-block-start, var(--_tabs-panel-padding-block-start, var(--helix-space-md)));padding-inline-start: var(--_tabs-panel-padding-inline-start, var(--helix-space-none))}[part="panel"][hidden] {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 { HelixHeadlessTabPanel } from '@fusion.dev/helix-headless/tabs';
|
|
9
4
|
import { styles } from './tab-panel.css.js';
|
|
@@ -1,23 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0
|
|
3
|
-
[part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-subtle);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1;}[part="scroll-start"] {inset-inline-start: 0;}[part="scroll-end"] {inset-inline-end: 0;}[part="scroll-start"][hidden],
|
|
4
|
-
[part="scroll-end"][hidden] {display: none;}[part="scroll-start"] svg,
|
|
5
|
-
[part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="scroll-start-icon"]::slotted(*),
|
|
6
|
-
slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="scroll-start"]:hover,
|
|
7
|
-
[part="scroll-end"]:hover {color: var(--helix-color-foreground);}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs);}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs);}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(
|
|
8
|
-
var(--tabs-rule-color, var(--helix-color-border)),
|
|
9
|
-
var(--tabs-rule-color, var(--helix-color-border))
|
|
10
|
-
);--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent;}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;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);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content;}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0;}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px))
|
|
11
|
-
calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition:
|
|
12
|
-
translate var(--helix-duration-normal) var(--helix-easing-emphasized),
|
|
13
|
-
inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
|
|
14
|
-
opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}[part="tabs"] {position: relative;}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised);}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(
|
|
15
|
-
var(--indicator-block-size, 0px) -
|
|
16
|
-
var(--tabs-indicator-thickness, var(--helix-border-thick))
|
|
17
|
-
);}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px;}:host([variant="segmented"]) {--_tab-selected-surface: transparent;}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px;}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none;}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr);}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1;}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto;}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left;}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start;}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start;}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc(
|
|
18
|
-
(
|
|
19
|
-
var(--indicator-inline-size, 0px) -
|
|
20
|
-
var(--tabs-indicator-thickness, var(--helix-border-thick))
|
|
21
|
-
) *
|
|
22
|
-
var(--_tabs-inline-sign, 1)
|
|
23
|
-
);inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick));}@media print {:host {box-shadow: none;overflow: visible;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_tabs-rule: none;--_tab-radius: var(--helix-radii-sm);--_tab-selected-shadow: var(--helix-shadow-sm);--_tab-selected-surface: var(--helix-color-surface-raised);display: grid;grid-template-rows: auto minmax(0, 1fr);min-block-size: 0}[part="tabs"] {background-image: var(--_tabs-rule, none);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);display: flex;gap: var(--tabs-gap, var(--helix-space-2xs));overflow-x: auto}[part="scroll-start"], [part="scroll-end"] {align-items: center;background-color: var(--tabs-scroll-background-color, var(--helix-color-surface));border: none;color: var(--helix-color-foreground-subtle);cursor: pointer;display: inline-flex;flex: none;justify-content: center;padding-inline: var(--helix-space-2xs);position: sticky;z-index: 1}[part="scroll-start"] {inset-inline-start: 0}[part="scroll-end"] {inset-inline-end: 0}[part="scroll-start"][hidden], [part="scroll-end"][hidden] {display: none}[part="scroll-start"] svg, [part="scroll-end"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}slot[name="scroll-start-icon"]::slotted(*), slot[name="scroll-end-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="scroll-start"]:hover, [part="scroll-end"]:hover {color: var(--helix-color-foreground)}:host([orientation="vertical"]) [part="scroll-start"] {inset-block-start: 0;inset-inline-start: auto;padding-block: var(--helix-space-2xs)}:host([orientation="vertical"]) [part="scroll-end"] {inset-block-end: 0;inset-inline-end: auto;padding-block: var(--helix-space-2xs)}:host([variant="underlined"]) {--_tabs-rule: linear-gradient(var(--tabs-rule-color, var(--helix-color-border)), var(--tabs-rule-color, var(--helix-color-border)));--_tab-radius: var(--helix-radii-none);--_tab-selected-shadow: none;--_tab-selected-surface: transparent}:host([variant="segmented"]) [part="tabs"] {--_tab-selected-surface: var(--helix-color-surface-overlay);--_tab-height: 100%;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);justify-self: start;padding: var(--helix-space-2xs);inline-size: fit-content}[part="panels"] {display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;min-inline-size: 0}[part="indicator"] {background-color: var(--_indicator-color, transparent);block-size: var(--_indicator-block, var(--helix-border-thick));border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));inline-size: var(--indicator-inline-size, 0);inset-block-start: 0;inset-inline-start: 0;opacity: 0;position: absolute;translate: calc(var(--indicator-x, 0px) + var(--_indicator-offset-x, 0px)) calc(var(--indicator-y, 0px) + var(--_indicator-offset, 0px));transition: translate var(--helix-duration-normal) var(--helix-easing-emphasized), inline-size var(--helix-duration-normal) var(--helix-easing-emphasized), opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base)}[part="indicator"][data-placed] {opacity: 1}[part="tabs"] {position: relative}::slotted(helix-tab) {position: relative;z-index: var(--helix-layer-raised)}:host([variant="underlined"]) [part="indicator"] {--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));--_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick)))}:host([variant="segmented"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host([variant="segmented"]) {--_tab-selected-surface: transparent}:host(:not([variant])) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-border: var(--helix-border-thin);--_indicator-border-color: var(--helix-color-border);--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));--_indicator-radius: var(--helix-radii-sm);--_indicator-shadow: var(--helix-shadow-sm);--_indicator-offset: 0px}:host(:not([variant])) {--_tab-selected-surface: transparent;--_tab-selected-shadow: none}:host([orientation="vertical"]) {--_tabs-inline-sign: 1;--_tabs-panel-padding-block-start: var(--helix-space-none);--_tabs-panel-padding-inline-start: var(--helix-space-md);grid-template-columns: auto minmax(0, 1fr);grid-template-rows: minmax(0, 1fr)}:host([orientation="vertical"]:dir(rtl)) {--_tabs-inline-sign: -1}:host([orientation="vertical"]) [part="tabs"] {align-content: start;background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;flex-direction: column;overflow-x: visible;overflow-y: auto}:host([orientation="vertical"]:dir(rtl)) [part="tabs"] {background-position: left}:host([orientation="vertical"]) ::slotted(helix-tab) {--_tab-inline-size: 100%;--_tab-justify: flex-start}:host([orientation="vertical"][variant="segmented"]) [part="tabs"] {--_tab-height: initial;block-size: auto;justify-self: start}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {--_indicator-block: var(--indicator-block-size, 0);--_indicator-offset: 0px;--_indicator-offset-x: calc((var(--indicator-inline-size, 0px) - var(--tabs-indicator-thickness, var(--helix-border-thick))) * var(--_tabs-inline-sign, 1));inline-size: var(--tabs-indicator-thickness, var(--helix-border-thick))}@media print {:host {box-shadow: none;overflow: visible}}`);
|
|
@@ -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 { HelixHeadlessTabs } from '@fusion.dev/helix-headless/tabs';
|
|
9
4
|
import { styles } from './tabs-root.css.js';
|
package/dist/tabs/tab/tab.css.js
CHANGED
|
@@ -1,13 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: inline-flex
|
|
3
|
-
background-color var(--helix-duration-fast) var(--helix-easing-standard),
|
|
4
|
-
border-color var(--helix-duration-normal) var(--helix-easing-emphasized),
|
|
5
|
-
color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {background-color: var(
|
|
6
|
-
--tabs-tab-hover-background-color,
|
|
7
|
-
color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
|
|
8
|
-
);color: var(--tabs-tab-hover-color, var(--helix-color-foreground));}:host(:state(selected)) [part="tab"],
|
|
9
|
-
:host(:state(selected)) [part="tab"]:hover {background-color: var(
|
|
10
|
-
--tabs-tab-selected-background-color,
|
|
11
|
-
var(--_tab-selected-surface, transparent)
|
|
12
|
-
);box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground));}[part="tab"]:disabled,
|
|
13
|
-
[part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5);}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-none);}[part="dismiss"] svg {block-size: 1em;inline-size: 1em;}slot[name="dismiss-icon"]::slotted(*) {--icon-size: 1em;block-size: 1em;inline-size: 1em;}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent);}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: inline-flex}[part="tab"] {align-items: center;background-color: transparent;block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-control)));border: none;border-block-end: var(--helix-border-thick) solid transparent;border-radius: var(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));color: var(--tabs-tab-color, var(--helix-color-foreground-subtle));cursor: pointer;font: inherit;font-size: var(--tabs-tab-font-size, var(--helix-text-sm));font-weight: var(--tabs-tab-font-weight, var(--helix-weight-medium));display: inline-flex;inline-size: var(--_tab-inline-size, auto);justify-content: var(--_tab-justify, center);padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));text-decoration: none;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-normal) var(--helix-easing-emphasized), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {background-color: var(--tabs-tab-hover-background-color, color-mix(in oklab, var(--helix-color-foreground) 5%, transparent));color: var(--tabs-tab-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="tab"], :host(:state(selected)) [part="tab"]:hover {background-color: var(--tabs-tab-selected-background-color, var(--_tab-selected-surface, transparent));box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground))}[part="tab"]:disabled, [part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5)}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-none)}[part="dismiss"] svg {block-size: 1em;inline-size: 1em}slot[name="dismiss-icon"]::slotted(*) {--icon-size: 1em;block-size: 1em;inline-size: 1em}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent)}`);
|
package/dist/tabs/tab/tab.js
CHANGED
|
@@ -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 { HelixHeadlessTab } from '@fusion.dev/helix-headless/tabs';
|
|
9
4
|
import { styles } from './tab.css.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: flex;flex-wrap: wrap;gap: var(--tag-group-gap, var(--helix-space-2xs))
|
|
2
|
+
export const styles = createSheet(`:host {display: flex;flex-wrap: wrap;gap: var(--tag-group-gap, var(--helix-space-2xs))}[part="empty"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);
|
|
@@ -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 { HelixHeadlessTagGroup } from '@fusion.dev/helix-headless/tag';
|
|
9
4
|
import { styles } from './tag-group.css.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_tag-height: var(--helix-size-tag);--_tag-color: var(--helix-color-foreground-muted);--_tag-text: var(--helix-text-xs);--_tag-inset: var(--helix-space-xs);--_tag-fill: color-mix(in srgb, var(--_tag-color) 14%, var(--helix-color-background));--_tag-edge: color-mix(in srgb, var(--_tag-color) 28%, var(--helix-color-background));--_tag-label: color-mix(in oklab, var(--_tag-color) 55%, var(--helix-color-foreground));align-items: center;background-color: var(--tag-background-color, var(--_tag-fill));block-size: var(--_tag-height);border: var(--helix-border-thin) solid var(--tag-border-color, var(--_tag-edge));border-radius: var(--tag-radius, var(--helix-radii-sm));color: var(--tag-foreground-color, var(--_tag-label));display: inline-flex;font-size: var(--_tag-text);font-weight: var(--tag-font-weight, var(--helix-weight-medium));gap: var(--tag-gap, var(--helix-space-2xs));line-height: var(--helix-leading-tight);padding-inline: var(--_tag-inset);white-space: nowrap
|
|
2
|
+
export const styles = createSheet(`:host {--_tag-height: var(--helix-size-tag);--_tag-color: var(--helix-color-foreground-muted);--_tag-text: var(--helix-text-xs);--_tag-inset: var(--helix-space-xs);--_tag-fill: color-mix(in srgb, var(--_tag-color) 14%, var(--helix-color-background));--_tag-edge: color-mix(in srgb, var(--_tag-color) 28%, var(--helix-color-background));--_tag-label: color-mix(in oklab, var(--_tag-color) 55%, var(--helix-color-foreground));align-items: center;background-color: var(--tag-background-color, var(--_tag-fill));block-size: var(--_tag-height);border: var(--helix-border-thin) solid var(--tag-border-color, var(--_tag-edge));border-radius: var(--tag-radius, var(--helix-radii-sm));color: var(--tag-foreground-color, var(--_tag-label));display: inline-flex;font-size: var(--_tag-text);font-weight: var(--tag-font-weight, var(--helix-weight-medium));gap: var(--tag-gap, var(--helix-space-2xs));line-height: var(--helix-leading-tight);padding-inline: var(--_tag-inset);white-space: nowrap}:host([shape="pill"]) {border-radius: var(--tag-radius, var(--helix-radii-full))}:host([shape="pill"]) [part="dismiss"] {border-radius: var(--helix-radii-full)}slot:not([name]) {display: block;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}@supports (text-box: trim-both cap alphabetic) {slot:not([name]) {padding-block: var(--helix-space-2xs);text-box: trim-both cap alphabetic}}slot:not([name])::slotted(helix-icon) {vertical-align: middle}:host([emphasis="solid"]) {--_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));--_tag-edge: var(--_tag-fill);--_tag-label: var(--helix-color-foreground-inverse)}:host([emphasis="outlined"]) {--_tag-fill: transparent;--_tag-edge: color-mix(in srgb, var(--_tag-color) 45%, var(--helix-color-background))}:host([tone="primary"]) {--_tag-color: var(--helix-color-primary)}:host([tone="accent"]) {--_tag-color: var(--helix-color-accent)}:host([tone="info"]) {--_tag-color: var(--helix-color-info)}:host([tone="success"]) {--_tag-color: var(--helix-color-success)}:host([tone="warning"]) {--_tag-color: var(--helix-color-warning)}:host([tone="danger"]) {--_tag-color: var(--helix-color-danger)}[part="dismiss"] {font: inherit;background: none;border: none;border-radius: var(--helix-radii-sm);color: inherit;cursor: pointer;display: inline-flex;margin-inline-end: calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-2xs)}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--_tag-color) 20%, transparent)}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="dismiss"] svg {block-size: 0.85em;inline-size: 0.85em}slot[name="start"]::slotted(*) {font-weight: var(--helix-weight-semibold);margin-inline-end: var(--_tag-inset);opacity: 0.75}[part="link"] {color: inherit;display: block;min-inline-size: 0;text-decoration: none}@media (hover: hover) {[part="link"][href]:hover {text-decoration: underline}}[part="link"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([disabled]) {opacity: var(--tag-disabled-opacity, 0.5)}:host([disabled]) [part="dismiss"] {cursor: not-allowed}[part="cell"] {align-items: center;align-self: stretch;border-radius: inherit;cursor: default;display: inline-flex;gap: var(--tag-gap, var(--helix-space-2xs));margin-inline: calc(var(--_tag-inset) * -1);min-inline-size: 0;padding-inline: var(--_tag-inset)}[part="cell"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:state(selected)) {--_tag-fill: color-mix(in oklab, var(--_tag-color) 82%, var(--helix-color-foreground));--_tag-edge: var(--_tag-fill);--_tag-label: var(--helix-color-foreground-inverse)}@media print {:host {print-color-adjust: economy}}`);
|
|
@@ -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 { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag/root';
|
|
9
4
|
import { property } from 'lit/decorators.js';
|
|
@@ -1,31 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: inline;font-family: var(--text-font-family);font-size: var(--text-font-size);font-weight: var(--text-font-weight);letter-spacing: var(--text-letter-spacing);line-height: var(--text-line-height);}:host([as="p"]),
|
|
3
|
-
:host([as="h1"]),
|
|
4
|
-
:host([as="h2"]),
|
|
5
|
-
:host([as="h3"]),
|
|
6
|
-
:host([as="h4"]),
|
|
7
|
-
:host([as="h5"]),
|
|
8
|
-
:host([as="h6"]) {display: block;}:host([variant="display"]),
|
|
9
|
-
:host(:not([variant])[as="h1"]) {font-family: var(--text-font-family, var(--helix-font-display));font-size: var(--text-font-size, var(--helix-text-3xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="heading"]),
|
|
10
|
-
:host(:not([variant])[as="h2"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-2xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="subheading"]),
|
|
11
|
-
:host(:not([variant])[as="h3"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="title"]),
|
|
12
|
-
:host(:not([variant])[as="h4"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-lg));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-heading));}:host([variant="body"]),
|
|
13
|
-
:host(:not([variant])[as="p"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-md));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="body-strong"]),
|
|
14
|
-
:host(:not([variant])[as="h5"]),
|
|
15
|
-
:host(:not([variant])[as="h6"]),
|
|
16
|
-
:host(:not([variant])[as="strong"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-md));font-weight: var(--text-font-weight, var(--helix-weight-medium));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="caption"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-sm));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="label"]),
|
|
17
|
-
:host(:not([variant])[as="label"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-xs));font-weight: var(--text-font-weight, var(--helix-weight-medium));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-wide));line-height: var(--text-line-height, var(--helix-leading-normal));}:host([variant="code"]),
|
|
18
|
-
:host(:not([variant])[as="code"]) {font-family: var(--text-font-family, var(--helix-font-mono));font-size: var(--text-font-size, var(--helix-text-xs));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal));}:host(
|
|
19
|
-
:is(
|
|
20
|
-
[as="h1"],
|
|
21
|
-
[as="h2"],
|
|
22
|
-
[as="h3"],
|
|
23
|
-
[as="h4"],
|
|
24
|
-
[as="h5"],
|
|
25
|
-
[as="h6"],
|
|
26
|
-
[variant="display"],
|
|
27
|
-
[variant="heading"],
|
|
28
|
-
[variant="subheading"],
|
|
29
|
-
[variant="title"]
|
|
30
|
-
)
|
|
31
|
-
) {color: var(--_heading-ink, currentColor);}:host([emphasis="muted"]) {color: var(--helix-color-foreground-muted);}:host([emphasis="subtle"]) {color: var(--helix-color-foreground-subtle);}:host([tone="accent"]) {color: var(--helix-color-accent);}:host([tone="danger"]) {color: var(--helix-color-danger);}:host([tone="info"]) {color: var(--helix-color-info);}:host([tone="primary"]) {color: var(--helix-color-primary);}:host([tone="success"]) {color: var(--helix-color-success);}:host([tone="warning"]) {color: var(--helix-color-warning);}:host([tone="accent"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-accent-muted);}:host([tone="danger"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-danger-muted);}:host([tone="info"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-info-muted);}:host([tone="primary"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-primary-muted);}:host([tone="success"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-success-muted);}:host([tone="warning"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-warning-muted);}[part="text"] {color: inherit;font: inherit;letter-spacing: inherit;margin: var(--helix-space-none);}:host([lines]) {display: block;min-inline-size: 0;}:host([text-align="start"]) {text-align: start;}:host([text-align="center"]) {text-align: center;}:host([text-align="end"]) {text-align: end;}:host([text-align="justify"]) {text-align: justify;}:host([text-wrap="balance"]) {text-wrap: balance;}:host([text-wrap="pretty"]) {text-wrap: pretty;}:host([text-wrap="nowrap"]) {text-wrap: nowrap;}:host([as="em"]) [part="text"] {font-style: italic;}@media print {:host {print-color-adjust: economy;}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: inline;font-family: var(--text-font-family);font-size: var(--text-font-size);font-weight: var(--text-font-weight);letter-spacing: var(--text-letter-spacing);line-height: var(--text-line-height)}:host([as="p"]), :host([as="h1"]), :host([as="h2"]), :host([as="h3"]), :host([as="h4"]), :host([as="h5"]), :host([as="h6"]) {display: block}:host([variant="display"]), :host(:not([variant])[as="h1"]) {font-family: var(--text-font-family, var(--helix-font-display));font-size: var(--text-font-size, var(--helix-text-3xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading))}:host([variant="heading"]), :host(:not([variant])[as="h2"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-2xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading))}:host([variant="subheading"]), :host(:not([variant])[as="h3"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-xl));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-tight));line-height: var(--text-line-height, var(--helix-leading-heading))}:host([variant="title"]), :host(:not([variant])[as="h4"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-lg));font-weight: var(--text-font-weight, var(--helix-weight-semibold));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-heading))}:host([variant="body"]), :host(:not([variant])[as="p"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-md));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal))}:host([variant="body-strong"]), :host(:not([variant])[as="h5"]), :host(:not([variant])[as="h6"]), :host(:not([variant])[as="strong"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-md));font-weight: var(--text-font-weight, var(--helix-weight-medium));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal))}:host([variant="caption"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-sm));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal))}:host([variant="label"]), :host(:not([variant])[as="label"]) {font-family: var(--text-font-family, var(--helix-font-sans));font-size: var(--text-font-size, var(--helix-text-xs));font-weight: var(--text-font-weight, var(--helix-weight-medium));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-wide));line-height: var(--text-line-height, var(--helix-leading-normal))}:host([variant="code"]), :host(:not([variant])[as="code"]) {font-family: var(--text-font-family, var(--helix-font-mono));font-size: var(--text-font-size, var(--helix-text-xs));font-weight: var(--text-font-weight, var(--helix-weight-regular));letter-spacing: var(--text-letter-spacing, var(--helix-tracking-normal));line-height: var(--text-line-height, var(--helix-leading-normal))}:host(:is([as="h1"], [as="h2"], [as="h3"], [as="h4"], [as="h5"], [as="h6"], [variant="display"], [variant="heading"], [variant="subheading"], [variant="title"])) {color: var(--_heading-ink, currentColor)}:host([emphasis="muted"]) {color: var(--helix-color-foreground-muted)}:host([emphasis="subtle"]) {color: var(--helix-color-foreground-subtle)}:host([tone="accent"]) {color: var(--helix-color-accent)}:host([tone="danger"]) {color: var(--helix-color-danger)}:host([tone="info"]) {color: var(--helix-color-info)}:host([tone="primary"]) {color: var(--helix-color-primary)}:host([tone="success"]) {color: var(--helix-color-success)}:host([tone="warning"]) {color: var(--helix-color-warning)}:host([tone="accent"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-accent-muted)}:host([tone="danger"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-danger-muted)}:host([tone="info"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-info-muted)}:host([tone="primary"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-primary-muted)}:host([tone="success"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-success-muted)}:host([tone="warning"]:is([emphasis="muted"], [emphasis="subtle"])) {color: var(--helix-color-warning-muted)}[part="text"] {color: inherit;font: inherit;letter-spacing: inherit;margin: var(--helix-space-none)}:host([lines]) {display: block;min-inline-size: 0}:host([text-align="start"]) {text-align: start}:host([text-align="center"]) {text-align: center}:host([text-align="end"]) {text-align: end}:host([text-align="justify"]) {text-align: justify}:host([text-wrap="balance"]) {text-wrap: balance}:host([text-wrap="pretty"]) {text-wrap: pretty}:host([text-wrap="nowrap"]) {text-wrap: nowrap}:host([as="em"]) [part="text"] {font-style: italic}@media print {:host {print-color-adjust: economy}}`);
|
|
@@ -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, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
|
|
8
3
|
import { nothing } from 'lit';
|
|
9
4
|
import { property } from 'lit/decorators.js';
|
|
@@ -1,5 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, var(--helix-space-xs));transition:
|
|
3
|
-
border-color var(--helix-duration-fast) var(--helix-easing-standard),
|
|
4
|
-
background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical);}slot[name="start"]::slotted(*),
|
|
5
|
-
slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {color: var(--helix-color-foreground);}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([auto-grow]) [part="control"] {overflow: hidden;resize: none;}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="field"] {background-color: transparent;}@media print {:host {print-color-adjust: exact;}}`);
|
|
2
|
+
export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, var(--helix-space-xs));transition: border-color var(--helix-duration-fast) var(--helix-easing-standard), background-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical)}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-subtle);flex: 0 0 auto}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="clear"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([auto-grow]) [part="control"] {overflow: hidden;resize: none}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}@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 { HelixHeadlessTextarea } from '@fusion.dev/helix-headless/textarea';
|
|
9
4
|
import { styles as fieldStyles } from '../../shared/field/field.css.js';
|
|
@@ -1,19 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--time-input-background-color, var(--helix-color-well));flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);padding-inline: 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);}slot[name="start"]::slotted(*),
|
|
5
|
-
slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none;}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap;}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size);}[part="trigger"]:hover {color: var(--helix-color-foreground);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard);}[part="clear"]:hover {color: var(--helix-color-foreground);}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute;}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="clear"],
|
|
6
|
-
[part="field"],
|
|
7
|
-
[part="trigger"] {transition: none;}}:host([variant="wheels"]) [part="surface"] {inline-size: max-content;}[part="time"] {flex: none;}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose);}[part="segments"] {--_segment-focus-background-color: var(
|
|
8
|
-
--time-input-segment-focus-background-color,
|
|
9
|
-
var(--helix-color-primary)
|
|
10
|
-
);--_segment-focus-color: var(
|
|
11
|
-
--time-input-segment-focus-color,
|
|
12
|
-
var(--helix-color-foreground-on-primary)
|
|
13
|
-
);--_segment-literal-color: var(
|
|
14
|
-
--time-input-segment-literal-color,
|
|
15
|
-
var(--helix-color-foreground-muted)
|
|
16
|
-
);--_segment-placeholder-color: var(
|
|
17
|
-
--time-input-segment-placeholder-color,
|
|
18
|
-
var(--helix-color-foreground-subtle)
|
|
19
|
-
);}@media print {:host {print-color-adjust: exact;}}`);
|
|
2
|
+
export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--time-input-background-color, var(--helix-color-well));flex-wrap: wrap;min-block-size: var(--helix-size-control);padding-block: var(--helix-space-2xs);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);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)}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: none}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle)}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: none;transition: color var(--helix-duration-fast) var(--helix-easing-standard)}:host(:not([mode="multiple"])) [part="field"] {flex-wrap: nowrap}[part="trigger-icon"] {block-size: var(--icon-size);inline-size: var(--icon-size)}[part="trigger"]:hover {color: var(--helix-color-foreground)}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="clear"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host(:disabled) [part="trigger"] {cursor: not-allowed}[part="surface"] {--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));inline-size: var(--floating-anchor-inline-size, 100%);min-inline-size: max-content;overflow: hidden;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute}::slotted([slot="panel-header"]) {display: block;margin-block-end: var(--helix-space-sm);margin-inline: var(--helix-space-sm)}::slotted([slot="panel-footer"]) {display: block;margin-block-start: var(--helix-space-sm);margin-inline: var(--helix-space-sm)}@media (prefers-reduced-motion: reduce) {[part="clear"], [part="field"], [part="trigger"] {transition: none}}:host([variant="wheels"]) [part="surface"] {inline-size: max-content}[part="time"] {flex: none}:host([mode="multiple"]) [part="control"] {flex-basis: 0;min-inline-size: var(--helix-size-icon-loose)}[part="segments"] {--_segment-focus-background-color: var(--time-input-segment-focus-background-color, var(--helix-color-primary));--_segment-focus-color: var(--time-input-segment-focus-color, var(--helix-color-foreground-on-primary));--_segment-literal-color: var(--time-input-segment-literal-color, var(--helix-color-foreground-muted));--_segment-placeholder-color: var(--time-input-segment-placeholder-color, var(--helix-color-foreground-subtle))}@media print {:host {print-color-adjust: exact}}`);
|