@fusion.dev/helix 0.142.1 → 0.144.0

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

@@ -16,6 +16,10 @@ import '../../copy-button/index.js';
  * backgrounds. A split diff stacks its two versions when the file is narrower
  * than about 40rem.
  *
+ * Long lines scroll by default. Set `wrap` to wrap them instead, for prose-like
+ * code such as a long command, and set `--code-block-max-block-size` to cap the
+ * height of a long file, which then scrolls.
+ *
  * @since 0.1.0
  * @status stable
  * @category typography
@@ -24,11 +28,22 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-backdrop - A backdrop filter for the block and its header, for a translucent background.
  * @cssproperty --code-block-background-color - The background behind the code. Set it for a block that sits on a surface other than the page background.
  * @cssproperty --code-block-border-color - The line around the block and its header.
+ * @cssproperty --code-block-gutter-color - The color of the line numbers.
  * @cssproperty --code-block-header-background-color - The background behind the name. The default is `surface-raised`.
+ * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls. The default is no limit.
  * @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
     static tier: string;
+    /**
+     * Whether long lines wrap.
+     *
+     * Off by default, so long lines scroll, because a line break can be
+     * significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
+     * a log line, a wrap reads better than a scroll. Line numbers keep the lines
+     * unwrapped, since a wrapped line would take one number and several rows.
+     */
+    wrap: boolean;
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,12 +6,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCodeBlock } from '@fusion.dev/helix-headless/code-block';
+import { property } from 'lit/decorators.js';
 import { styles } from './code-block-root.css.js';
 import '../../copy-button/index.js';
 let HelixCodeBlock = class HelixCodeBlock extends HelixHeadlessCodeBlock {
+    constructor() {
+        super(...arguments);
+        this.wrap = false;
+    }
     static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixCodeBlock.prototype, "wrap", void 0);
 HelixCodeBlock = __decorate([
     customElement('helix-code-block')
 ], HelixCodeBlock);

package/dist/color-picker/root/color-picker-root.css.js

@@ -235,6 +235,70 @@ border-color: var(--helix-color-danger);
 outline-color: var(--helix-color-danger);
 }
 
+[part="fields"] {
+display: grid;
+gap: var(--color-picker-fields-gap, var(--helix-space-xs));
+grid-auto-columns: minmax(0, 1fr);
+grid-auto-flow: column;
+margin-block-start: var(--helix-space-sm);
+padding-inline: var(--color-picker-padding, var(--helix-space-none));
+}
+
+:host([alpha]) [part="fields"] {
+grid-auto-flow: row;
+grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+[part="field"] {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+min-inline-size: 0;
+}
+
+[part="field-label"] {
+color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+}
+
+[part="field-input"] {
+all: unset;
+
+appearance: textfield;
+background-color: var(--helix-color-surface-sunken);
+block-size: var(--helix-size-control);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-control);
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+min-inline-size: 0;
+padding-inline: var(--helix-space-xs);
+transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="field-input"]::-webkit-inner-spin-button,
+[part="field-input"]::-webkit-outer-spin-button {
+appearance: none;
+margin: 0;
+}
+
+[part="field-input"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+[part="field-input"]:focus-visible {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: 0;
+}
+
 [part="actions"] {
 display: flex;
 flex: 1 1 auto;

package/dist/color-picker/root/color-picker-root.d.ts

@@ -2,7 +2,6 @@ import { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picke
 import type { CSSResultGroup } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
-import '../../icon/index.js';
 import '../../slider/index.js';
 /**
  * @summary A color picker made of a square and two ramps.
@@ -35,6 +34,8 @@ import '../../slider/index.js';
  * @aliases Color, ColorArea, Swatch picker
  * @documentation https://fusion.dev/helix/components/color-picker
  *
+ * @cssproperty --color-picker-field-label-color - The color of the names above the channel number fields, in `channel-fields`.
+ * @cssproperty --color-picker-fields-gap - The space between the channel number fields, in `channel-fields`.
  * @cssproperty --color-picker-grid-radius - The corner radius of the square.
  * @cssproperty --color-picker-grid-ratio - The aspect ratio of the square.
  * @cssproperty --color-picker-padding - The inset of the rows under the square and of the picker's bottom edge.

package/dist/color-picker/root/color-picker-root.js

@@ -8,7 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picker';
 import '../../button/index.js';
 import '../../button-group/index.js';
-import '../../icon/index.js';
 import '../../slider/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './color-picker-root.css.js';

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

@@ -97,7 +97,7 @@ padding: var(--helix-space-none);
 position: absolute;
 }
 
-[part="create"] {
+[part~="create"] {
 all: unset;
 
 border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
@@ -114,14 +114,15 @@ text-align: start;
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="create"]:hover {
+[part~="create"]:hover,
+[part~="create-active"] {
 background-color: light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
 );
 }
 
-[part="create"]:focus-visible {
+[part~="create"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }
@@ -138,7 +139,7 @@ display: block;
 transition: none;
 }
 
-[part="create"] {
+[part~="create"] {
 transition: none;
 }
 }

package/dist/copy-button/root/copy-button-root.css.js

@@ -20,6 +20,11 @@ color: var(--helix-color-success);
 color: var(--helix-color-success);
 }
 
+[part="button"][data-failed],
+:host(:not(:disabled)) [part="button"][data-failed]:hover {
+color: var(--helix-color-danger);
+}
+
 slot > svg {
 block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);

package/dist/data-table/root/data-table-root.css.js

@@ -86,6 +86,13 @@ border-block-end-color: transparent;
 cursor: pointer;
 }
 
+[part~="cell"]:focus-visible,
+[part~="select"]: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~="select"],
 [part="select-all"] {
 align-items: center;

package/dist/date-input/root/date-input-root.css.js

@@ -77,6 +77,25 @@ flex-basis: 0;
 min-inline-size: var(--helix-size-icon-loose);
 }
 
+[part="segments"] {
+--_segment-focus-background-color: var(
+--date-input-segment-focus-background-color,
+var(--helix-color-primary)
+);
+--_segment-focus-color: var(
+--date-input-segment-focus-color,
+var(--helix-color-foreground-on-primary)
+);
+--_segment-literal-color: var(
+--date-input-segment-literal-color,
+var(--helix-color-foreground-muted)
+);
+--_segment-placeholder-color: var(
+--date-input-segment-placeholder-color,
+var(--helix-color-foreground-subtle)
+);
+}
+
 @media print {
 :host {
 print-color-adjust: exact;

package/dist/date-input/root/date-input-root.d.ts

@@ -27,6 +27,14 @@ import '../../tag/index.js';
  * @cssproperty --date-input-border-width - The width of the panel's border. It
  *   follows `--helix-border-floating`, which is `0`, so the panel stands out by its
  *   shadow unless a theme sets a border.
+ * @cssproperty --date-input-segment-focus-background-color - The fill behind the
+ *   segment with focus, in `segmented`. It follows `--helix-color-primary`.
+ * @cssproperty --date-input-segment-focus-color - The text of the segment with
+ *   focus, in `segmented`.
+ * @cssproperty --date-input-segment-literal-color - The text the locale writes
+ *   between two segments, in `segmented`.
+ * @cssproperty --date-input-segment-placeholder-color - The dashes of a segment
+ *   with nothing in it, in `segmented`. It matches the text field's placeholder.
  * @cssproperty --date-input-shadow - The shadow under the panel. It follows
  *   `--helix-shadow-floating`. The panel can sit over any content, so it has a
  *   shadow by default.

package/dist/date-input/root/date-input-root.js

@@ -10,6 +10,7 @@ import '../../date-picker/index.js';
 import '../../tag/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
+import { styles as fieldSegmentsStyles } from '../../shared/field/field-segments.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
 import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
@@ -21,6 +22,7 @@ let HelixDateInput = class HelixDateInput extends HelixHeadlessDateInput {
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,
+        fieldSegmentsStyles,
         tagRowStyles,
         floatingPanelStyles,
         floatingEntranceStyles,

package/dist/date-picker/root/date-picker-root.css.js

@@ -56,12 +56,92 @@ inline-size: var(--_calendar-day);
 justify-content: center;
 }
 
-[part="previous"]:hover,
-[part="next"]:hover {
+[part="previous"]:hover:not(:disabled),
+[part="next"]:hover:not(:disabled) {
 background-color: var(--helix-color-surface-sunken);
 color: var(--helix-color-foreground);
 }
 
+[part="previous"]:focus-visible,
+[part="next"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="heading-button"] {
+all: unset;
+box-sizing: border-box;
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+padding-inline: var(--helix-space-2xs);
+}
+
+[part="heading-button"]:hover:not(:disabled) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="heading-button"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="periods"] {
+display: grid;
+gap: var(--helix-space-2xs);
+inline-size: calc(var(--_calendar-track) * 7);
+}
+
+[part="period-row"] {
+display: grid;
+gap: var(--helix-space-2xs);
+grid-template-columns: repeat(3, 1fr);
+}
+
+[part~="period"] {
+align-items: center;
+block-size: var(--date-picker-period-size, calc(var(--_calendar-row) * 1.5));
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+display: inline-flex;
+font-size: var(--helix-text-sm);
+justify-content: center;
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part~="period"]:hover:not([aria-disabled]) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part~="period-current"] {
+box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);
+}
+
+[part~="period-selected"] {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+color: var(--helix-color-foreground-inverse);
+}
+
+[part~="period-selected"]:hover:not([aria-disabled]) {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+}
+
+[part~="period-disabled"] {
+color: var(--helix-color-foreground-subtle);
+cursor: default;
+opacity: 0.4;
+}
+
+[part~="period"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="previous"]:disabled,
+[part="next"]:disabled {
+cursor: default;
+opacity: 0.4;
+}
+
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="previous-icon"]),
@@ -167,7 +247,7 @@ color: var(--helix-color-foreground-inverse);
 cursor: default;
 }
 
-[part~="cell"][aria-disabled] [part~="day"] {
+[part~="day-disabled"] {
 color: var(--helix-color-foreground-subtle);
 opacity: 0.4;
 }

package/dist/date-picker/root/date-picker-root.d.ts

@@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
  * @cssproperty --date-picker-day-size - Width and height of a day.
+ * @cssproperty --date-picker-period-size - Height of a month or a year in the months and years views, where `max-view` is set.
  * @cssproperty --date-picker-range-color - Band behind the days in a range.
  * @cssproperty --date-picker-row-size - Height of a week row.
  * @cssproperty --date-picker-selected-color - Fill behind a selected day.

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

@@ -176,6 +176,53 @@ justify-content: center;
 margin-inline: auto;
 }
 
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+position: absolute;
+inset-block-start: calc(
+var(--dialog-padding, var(--helix-space-lg)) +
+(var(--helix-text-xl) * var(--helix-leading-tight) - var(--helix-size-control-sm)) /
+2
+);
+inset-inline-end: var(--helix-space-md);
+block-size: var(--helix-size-control-sm);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--helix-size-control-sm);
+place-content: center;
+place-items: center;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon-sm);
+inline-size: var(--helix-size-icon-sm);
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([dismissible]) ::slotted([slot="header"]) {
+padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs));
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dismiss"] {
+transition: none;
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -7,8 +7,8 @@ display: flex;
 }
 
 [part="content"] {
-color: var(--helix-color-foreground-muted);
-margin-inline: var(--helix-space-sm);
+color: var(--divider-content-color, var(--helix-color-foreground-muted));
+margin-inline: var(--divider-content-gap, var(--helix-space-sm));
 display: inline-flex;
 flex: 0 0 auto;
 font-family: var(--helix-font-sans);
@@ -49,7 +49,7 @@ flex-direction: column;
 }
 
 :host([orientation="vertical"]) [part="content"] {
-margin-block: var(--helix-space-sm);
+margin-block: var(--divider-content-gap, var(--helix-space-sm));
 margin-inline: var(--helix-space-none);
 }
 
@@ -74,6 +74,11 @@ inline-size: var(--_divider-thickness);
 min-block-size: 1em;
 }
 
+:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
+:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {
+flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

package/dist/divider/root/divider-root.d.ts

@@ -8,15 +8,23 @@ import type { CSSResultGroup } from 'lit';
  * default. A vertical divider stretches to fit its flex parent, so it matches
  * the height of what it sits beside.
  *
+ * Content set into the line sits at its middle. `content-placement` moves it
+ * toward the start or the end, leaving a short length of line before or after
+ * it, the way a section label sits in a form.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
  * @aliases Separator, Rule
  * @documentation https://fusion.dev/helix/components/divider
  *
- * @csspart line - The line.
+ * @csspart content - The content set into the line.
+ * @csspart line - The line, or each half of it when content is set into it.
  *
  * @cssproperty --divider-color - The color of the line.
+ * @cssproperty --divider-content-color - The color of the content set into the line.
+ * @cssproperty --divider-content-gap - The space either side of the content set into the line.
+ * @cssproperty --divider-content-offset - The length of line before the content under `content-placement="start"`, or after it under `end`.
  * @cssproperty --divider-length - The length of a vertical line. A horizontal line takes the divider's width.
  * @cssproperty --divider-padding - The space removed from both ends of the line.
  * @cssproperty --divider-padding-end - The space removed from the end of the line only.
@@ -24,6 +32,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --divider-thickness - The thickness of the line.
  */
 export declare class HelixDivider extends HelixHeadlessDivider {
+    /**
+     * Where content set into the line sits along it.
+     *
+     * Absent is the middle. `start` and `end` move it toward one end, with a
+     * short length of line, `--divider-content-offset`, kept before or after it.
+     * A divider with nothing set into it is one line whatever this says.
+     */
+    contentPlacement?: 'end' | 'start';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/divider/root/divider-root.js

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
+import { property } from 'lit/decorators.js';
 import { styles } from './divider-root.css.js';
 let HelixDivider = class HelixDivider extends HelixHeadlessDivider {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'content-placement', reflect: true })
+], HelixDivider.prototype, "contentPlacement", void 0);
 HelixDivider = __decorate([
     customElement('helix-divider')
 ], HelixDivider);

package/dist/donut-chart/root/donut-chart-root.css.js

@@ -175,4 +175,14 @@ stroke-opacity: calc(0.62 * var(--helix-material-opacity));
 
 :host([material="frosted"]) [part~="segment"] {
 stroke-opacity: calc(0.88 * var(--helix-material-opacity));
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

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

@@ -55,6 +55,8 @@ flex-direction: column;
 outline: none;
 position: fixed;
 
+transform: var(--_drawer-away);
+
 transition:
 transform var(--helix-duration-normal) var(--helix-easing-decelerate),
 display var(--helix-duration-normal) allow-discrete,
@@ -62,6 +64,10 @@ overlay var(--helix-duration-normal) allow-discrete;
 z-index: var(--helix-layer-overlay);
 }
 
+[part="panel"]:not([open]) {
+display: none;
+}
+
 :host([material="glass"]) [part="panel"] {
 backdrop-filter: var(--drawer-backdrop, var(--helix-material-backdrop));
 background-color: var(
@@ -84,7 +90,7 @@ block-size: 100%;
 inline-size: min(var(--_drawer-size), 100%);
 inset-block: 0;
 inset-inline-end: 0;
-transform: translateX(100%);
+--_drawer-away: translateX(100%);
 }
 
 :host([placement="start"]) [part="panel"] {
@@ -94,7 +100,7 @@ block-size: 100%;
 inline-size: min(var(--_drawer-size), 100%);
 inset-block: 0;
 inset-inline-start: 0;
-transform: translateX(-100%);
+--_drawer-away: translateX(-100%);
 }
 
 :host([placement="bottom"]) [part="panel"] {
@@ -103,7 +109,7 @@ border-end-end-radius: var(--helix-radii-none);
 block-size: min(var(--_drawer-size), 100%);
 inset-block-end: 0;
 inset-inline: 0;
-transform: translateY(100%);
+--_drawer-away: translateY(100%);
 }
 
 :host([placement="top"]) [part="panel"] {
@@ -112,14 +118,45 @@ border-start-end-radius: var(--helix-radii-none);
 block-size: min(var(--_drawer-size), 100%);
 inset-block-start: 0;
 inset-inline: 0;
-transform: translateY(-100%);
+--_drawer-away: translateY(-100%);
+}
+
+:host(:dir(rtl):not([placement])) [part="panel"],
+:host(:dir(rtl)[placement="end"]) [part="panel"] {
+--_drawer-away: translateX(-100%);
+}
+
+:host(:dir(rtl)[placement="start"]) [part="panel"] {
+--_drawer-away: translateX(100%);
 }
 
 :host(:state(open)) [part="panel"] {
 border: var(--drawer-border-width, var(--helix-border-floating)) solid
 var(--drawer-border-color, var(--helix-color-border));
 box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));
-transform: translate(0, 0);
+
+transform: translate(var(--drawer-swipe-x, 0), var(--drawer-swipe-y, 0));
+}
+
+[part="panel"],
+[part="content"] {
+touch-action: pan-y;
+}
+
+:host([placement="bottom"]) [part="panel"],
+:host([placement="top"]) [part="panel"] {
+touch-action: pan-x;
+}
+
+[part="panel"][data-swiping] {
+transition: none;
+user-select: none;
+}
+
+@starting-style {
+:host(:state(open)) [part="panel"][open] {
+transform: var(--_drawer-away);
+}
 }
 
 [part="header"] {
@@ -138,6 +175,17 @@ margin: var(--helix-space-none);
 margin-block-end: var(--helix-space-md);
 }
 
+[part="footer"] {
+flex: 0 0 auto;
+}
+
+::slotted([slot="footer"]) {
+display: flex;
+flex-wrap: wrap;
+gap: var(--helix-space-xs);
+margin-block-start: var(--helix-space-md);
+}
+
 [part="content"] {
 flex: 1 1 auto;
 min-block-size: 0;