@fusion.dev/helix 0.213.0 → 0.214.0
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/api.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/table/cell/table-cell.css.js +1 -1
- package/dist/table/cell/table-cell.d.ts +9 -0
- package/dist/table/column/table-column.css.js +1 -1
- package/dist/table/column/table-column.d.ts +5 -0
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +2 -2
- package/types/jsx.d.ts +26 -0
- package/types/vue.d.ts +6 -0
|
@@ -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)}: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)}`);
|
|
2
|
+
export const styles = createSheet(`:host {align-items: center;border-block-end: var(--helix-border-thin) solid var(--table-rule-color, 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(--table-cell-min-block-size, var(--helix-size-control));min-inline-size: 0;overflow-wrap: anywhere;padding-block: var(--table-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)}`);
|
|
@@ -14,6 +14,15 @@ import type { CSSResultGroup } from 'lit';
|
|
|
14
14
|
* @documentation https://fusion.dev/helix/components/table
|
|
15
15
|
*
|
|
16
16
|
* @slot - The cell's content.
|
|
17
|
+
*
|
|
18
|
+
* @cssproperty --table-cell-min-block-size - The least height of a cell, and so of its
|
|
19
|
+
* row. Unset, every row is as tall as a control, whatever its cells hold.
|
|
20
|
+
* @cssproperty --table-padding-block - The space above and below a cell's content. Two
|
|
21
|
+
* values set the space above and the space below.
|
|
22
|
+
* @cssproperty --table-rule-color - The color of the line under a cell, which is the line
|
|
23
|
+
* between rows. It takes a color only, because it fills the color in a border shorthand,
|
|
24
|
+
* and a full border value makes the rule invalid. It is drawn on the cells, because the
|
|
25
|
+
* row is `display: contents`.
|
|
17
26
|
*/
|
|
18
27
|
export declare class HelixTableCell extends HelixHeadlessTableCell {
|
|
19
28
|
static styles: CSSResultGroup;
|
|
@@ -1,2 +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 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)}`);
|
|
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(--table-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(--table-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)}`);
|
|
@@ -11,6 +11,11 @@ import type { CSSResultGroup } from 'lit';
|
|
|
11
11
|
* @status stable
|
|
12
12
|
* @aliases Column header, Th
|
|
13
13
|
* @documentation https://fusion.dev/helix/components/table
|
|
14
|
+
*
|
|
15
|
+
* @cssproperty --table-padding-block - The space above and below a heading's words. Unset,
|
|
16
|
+
* the heading takes none, and its height comes from its own least height.
|
|
17
|
+
* @cssproperty --table-rule-color - The color of the line under the headings. It takes a
|
|
18
|
+
* color only, because it fills the color in a border shorthand.
|
|
14
19
|
*/
|
|
15
20
|
export declare class HelixTableColumn extends HelixHeadlessTableColumn {
|
|
16
21
|
static styles: CSSResultGroup;
|