@fusion.dev/helix 0.149.1 → 0.150.0

package/dist/element-events.generated.js

@@ -266,7 +266,7 @@ registerElementEvents({
     'helix-time-picker': ['change', 'helix-before-change', 'input'],
     'helix-toast': ['helix-dismiss'],
     'helix-toast-item': ['helix-dismiss'],
-    'helix-toggle': ['helix-select'],
+    'helix-toggle': ['change', 'helix-select'],
     'helix-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-tour': [

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

@@ -1,5 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");display: block;}:host([hidden]) {display: none;}[part~="item"] {align-items: center;border-radius: var(--option-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);min-block-size: var(--helix-size-control-tight);box-sizing: border-box;padding-block: var(--option-block-padding, var(--helix-space-2xs));padding-inline: var(--option-padding, var(--helix-space-xs));user-select: none;}[part="text"] {display: flex;flex: 1 1 auto;flex-direction: column;min-inline-size: 0;}[part="description"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);line-height: var(--helix-leading-tight);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="label"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}:host(:state(selected)) [part~="item"]::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;mask-image: var(--_option-check);mask-position: center;mask-repeat: no-repeat;mask-size: contain;}:host(:state(active)) [part~="item"],
+export const styles = createSheet(`:host {--_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");display: block;}:host([hidden]) {display: none;}[part~="item"] {align-items: center;border-radius: var(--option-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs);min-block-size: var(--helix-size-control-tight);box-sizing: border-box;padding-block: var(--option-block-padding, var(--helix-space-2xs));padding-inline: var(--option-padding, var(--helix-space-xs));user-select: none;}[part="text"] {display: flex;flex: 1 1 auto;flex-direction: column;min-inline-size: 0;}[part="description"],
+slot[name="description"]::slotted(*) {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);line-height: var(--helix-leading-tight);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}[part="label"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}slot[name="indicator"]::slotted(*) {display: none;}:host(:state(selected)) slot[name="indicator"]::slotted(*) {block-size: var(--helix-size-icon-tight);display: block;flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;}:host(:state(selected)) [part~="item"]::after {content: "";background-color: currentColor;block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight);margin-inline-start: auto;mask-image: var(--_option-check);mask-position: center;mask-repeat: no-repeat;mask-size: contain;}:host(:state(has-indicator)) [part~="item"]::after {content: none;}:host(:state(active)) [part~="item"],
 :host(:not([disabled])) [part~="item"]:hover {background-color: var(
 --option-active-color,
 light-dark(

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-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;}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;}}`);
+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;}}`);

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

@@ -46,6 +46,11 @@ export declare class HelixTag extends HelixHeadlessTag {
      * neither. That is the test the whole axis registry answers to.
      */
     emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * The tag's outline. `pill` rounds its ends fully, for a set of tags among
+     * rounded controls. Absent is the theme's small radius.
+     */
+    shape?: 'pill';
     /**
      * The meaning the tag's color shows, such as `success` or `danger`.
      *

package/dist/tag/root/tag-root.js

@@ -14,6 +14,9 @@ let HelixTag = class HelixTag extends HelixHeadlessTag {
 __decorate([
     property({ reflect: true })
 ], HelixTag.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixTag.prototype, "shape", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixTag.prototype, "tone", void 0);