@fusion.dev/helix 0.145.0 → 0.147.0

package/dist/map/marker/map-marker.css.js

@@ -1,345 +1,32 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_map-marker-color: var(--map-marker-color, var(--helix-color-primary));
-
---_map-marker-fill: var(--map-marker-color, var(--helix-color-primary-surface));
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-primary));
-
---_map-marker-edge: var(--helix-color-surface);
---_map-marker-lift: 0px;
---_map-marker-shadow: var(--helix-shadow-sm);
---_map-marker-size: var(--map-marker-size, 0.875rem);
-
---_map-marker-leg: 0px;
---_map-marker-leg-angle: 0rad;
---_map-marker-x: 0px;
---_map-marker-y: 0px;
-block-size: 0;
-display: block;
-inline-size: 0;
-inset-block-start: var(--_map-marker-y);
-left: var(--_map-marker-x);
-position: absolute;
-}
-
-:host(:hover),
-:host(:focus-within) {
-z-index: calc(var(--helix-layer-raised) + 1);
-}
-
-:host(:not(:state(placed))) {
-visibility: hidden;
-}
-
-:host(:state(behind)) {
-opacity: 0;
-pointer-events: none;
-}
-
-[part="marker"] {
-align-items: center;
-cursor: pointer;
-display: flex;
-gap: var(--helix-space-xs);
-left: 0;
-outline: none;
-
-pointer-events: none;
-position: absolute;
-top: 0;
-transform: translate(calc(var(--_map-marker-size) / -2), calc(-50% - var(--_map-marker-lift)));
-}
-
-:host(:dir(rtl)) [part="marker"],
-:host(:state(start)) [part="marker"] {
-transform: translate(
+export const styles = createSheet(`:host {--_map-marker-color: var(--map-marker-color, var(--helix-color-primary));--_map-marker-fill: var(--map-marker-color, var(--helix-color-primary-surface));--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-primary));--_map-marker-edge: var(--helix-color-surface);--_map-marker-lift: 0px;--_map-marker-shadow: var(--helix-shadow-sm);--_map-marker-size: var(--map-marker-size, 0.875rem);--_map-marker-leg: 0px;--_map-marker-leg-angle: 0rad;--_map-marker-x: 0px;--_map-marker-y: 0px;block-size: 0;display: block;inline-size: 0;inset-block-start: var(--_map-marker-y);left: var(--_map-marker-x);position: absolute;}:host(:hover),
+:host(:focus-within) {z-index: calc(var(--helix-layer-raised) + 1);}:host(:not(:state(placed))) {visibility: hidden;}:host(:state(behind)) {opacity: 0;pointer-events: none;}[part="marker"] {align-items: center;cursor: pointer;display: flex;gap: var(--helix-space-xs);left: 0;outline: none;pointer-events: none;position: absolute;top: 0;transform: translate(calc(var(--_map-marker-size) / -2), calc(-50% - var(--_map-marker-lift)));}:host(:dir(rtl)) [part="marker"],
+:host(:state(start)) [part="marker"] {transform: translate(
 calc(-100% + var(--_map-marker-size) / 2),
 calc(-50% - var(--_map-marker-lift))
-);
-}
-
-:host(:dir(rtl):state(start)) [part="marker"] {
-transform: translate(calc(var(--_map-marker-size) / -2), calc(-50% - var(--_map-marker-lift)));
-}
-
-:host(:state(start)) [part="marker"] {
-flex-direction: row-reverse;
-}
-
-[part="point"] {
-align-items: center;
-background: var(--_map-marker-color);
-block-size: var(--_map-marker-size);
-border: var(--helix-border-thick) solid var(--_map-marker-edge);
-border-radius: var(--helix-radii-full);
-box-shadow: var(--_map-marker-shadow);
-box-sizing: border-box;
-color: var(--_map-marker-ink);
-display: grid;
-flex: none;
-font-family: var(--helix-font-sans);
-font-size: calc(var(--_map-marker-size) * 0.5);
-font-weight: var(--helix-weight-semibold);
-inline-size: var(--_map-marker-size);
-isolation: isolate;
-justify-items: center;
-line-height: 1;
-pointer-events: auto;
-position: relative;
-transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:state(icon)) {
---_map-marker-size: var(--map-marker-size, 1.375rem);
-}
-
-:host(:state(icon)) [part="point"] {
-background: var(--_map-marker-fill);
-}
-
-:host([shape="rounded"]) [part="point"] {
-border-radius: var(--helix-radii-md);
-}
-
-:host([shape="square"]) [part="point"] {
-border-radius: var(--helix-radii-none);
-}
-
-:host([shape="diamond"]) [part="point"] {
-border-radius: var(--helix-radii-none);
-rotate: 45deg;
-scale: 0.85;
-}
-
-:host([shape="diamond"]) ::slotted(*) {
-rotate: -45deg;
-}
-
-:host([shape="ring"]) [part="point"] {
-background: var(--helix-color-surface);
-border-color: var(--_map-marker-color);
-border-width: calc(var(--_map-marker-size) * 0.18);
-color: var(--_map-marker-color);
-}
-
-:host([shape="pin"]) {
---_map-marker-lift: calc(var(--_map-marker-size) * 0.72);
---_map-marker-size: var(--map-marker-size, 1.625rem);
-}
-
-:host([shape="pin"]) [part="point"] {
-background: var(--_map-marker-fill);
-border: 0;
-border-radius: var(--helix-radii-full);
-box-shadow: none;
-}
-
-:host([shape="pin"]) [part="point"]::before {
-background: var(--_map-marker-fill);
-border: var(--helix-border-thick) solid var(--_map-marker-edge);
-border-radius: var(--helix-radii-full) var(--helix-radii-full) var(--helix-radii-full)
-var(--helix-radii-none);
-box-shadow: var(--_map-marker-shadow);
-box-sizing: border-box;
-content: "";
-inset: 0;
-position: absolute;
-rotate: -45deg;
-z-index: var(--helix-layer-beneath);
-}
-
-:host([shape="pin"]) [part="point"]::after {
-background: var(--_map-marker-fill);
-block-size: calc(var(--_map-marker-size) * 0.26);
-border: var(--helix-border-thin) solid var(--_map-marker-edge);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-content: "";
-inline-size: calc(var(--_map-marker-size) * 0.26);
-left: 50%;
-position: absolute;
-top: calc(50% + var(--_map-marker-lift));
-translate: -50% -50%;
-z-index: calc(var(--helix-layer-beneath) - 1);
-}
-
-:host(:state(cluster)) {
---_map-marker-lift: 0px;
---_map-marker-size: var(--map-marker-cluster-size, 1.75rem);
-}
-
-:host(:state(cluster)) [part="point"] {
-background: var(--map-marker-cluster-color, var(--helix-color-primary-surface));
-border: var(--helix-border-thick) solid var(--_map-marker-edge);
-border-radius: var(--helix-radii-full);
-box-shadow:
+);}:host(:dir(rtl):state(start)) [part="marker"] {transform: translate(calc(var(--_map-marker-size) / -2), calc(-50% - var(--_map-marker-lift)));}:host(:state(start)) [part="marker"] {flex-direction: row-reverse;}[part="point"] {align-items: center;background: var(--_map-marker-color);block-size: var(--_map-marker-size);border: var(--helix-border-thick) solid var(--_map-marker-edge);border-radius: var(--helix-radii-full);box-shadow: var(--_map-marker-shadow);box-sizing: border-box;color: var(--_map-marker-ink);display: grid;flex: none;font-family: var(--helix-font-sans);font-size: calc(var(--_map-marker-size) * 0.5);font-weight: var(--helix-weight-semibold);inline-size: var(--_map-marker-size);isolation: isolate;justify-items: center;line-height: 1;pointer-events: auto;position: relative;transition: transform var(--helix-duration-fast) var(--helix-easing-standard);}:host(:state(icon)) {--_map-marker-size: var(--map-marker-size, 1.375rem);}:host(:state(icon)) [part="point"] {background: var(--_map-marker-fill);}:host([shape="rounded"]) [part="point"] {border-radius: var(--helix-radii-md);}:host([shape="square"]) [part="point"] {border-radius: var(--helix-radii-none);}:host([shape="diamond"]) [part="point"] {border-radius: var(--helix-radii-none);rotate: 45deg;scale: 0.85;}:host([shape="diamond"]) ::slotted(*) {rotate: -45deg;}:host([shape="ring"]) [part="point"] {background: var(--helix-color-surface);border-color: var(--_map-marker-color);border-width: calc(var(--_map-marker-size) * 0.18);color: var(--_map-marker-color);}:host([shape="pin"]) {--_map-marker-lift: calc(var(--_map-marker-size) * 0.72);--_map-marker-size: var(--map-marker-size, 1.625rem);}:host([shape="pin"]) [part="point"] {background: var(--_map-marker-fill);border: 0;border-radius: var(--helix-radii-full);box-shadow: none;}:host([shape="pin"]) [part="point"]::before {background: var(--_map-marker-fill);border: var(--helix-border-thick) solid var(--_map-marker-edge);border-radius: var(--helix-radii-full) var(--helix-radii-full) var(--helix-radii-full)
+var(--helix-radii-none);box-shadow: var(--_map-marker-shadow);box-sizing: border-box;content: "";inset: 0;position: absolute;rotate: -45deg;z-index: var(--helix-layer-beneath);}:host([shape="pin"]) [part="point"]::after {background: var(--_map-marker-fill);block-size: calc(var(--_map-marker-size) * 0.26);border: var(--helix-border-thin) solid var(--_map-marker-edge);border-radius: var(--helix-radii-full);box-sizing: border-box;content: "";inline-size: calc(var(--_map-marker-size) * 0.26);left: 50%;position: absolute;top: calc(50% + var(--_map-marker-lift));translate: -50% -50%;z-index: calc(var(--helix-layer-beneath) - 1);}:host(:state(cluster)) {--_map-marker-lift: 0px;--_map-marker-size: var(--map-marker-cluster-size, 1.75rem);}:host(:state(cluster)) [part="point"] {background: var(--map-marker-cluster-color, var(--helix-color-primary-surface));border: var(--helix-border-thick) solid var(--_map-marker-edge);border-radius: var(--helix-radii-full);box-shadow:
 0 0 0 calc(var(--_map-marker-size) * 0.18)
 color-mix(
 in oklab,
 var(--map-marker-cluster-color, var(--helix-color-primary-surface)) 28%,
 transparent
 ),
-var(--_map-marker-shadow);
-color: var(--helix-color-foreground-on-primary);
-font-size: calc(var(--_map-marker-size) * 0.42);
-font-variant-numeric: tabular-nums;
-rotate: none;
-scale: none;
-}
-
-:host(:state(cluster)) [part="point"]::before,
-:host(:state(cluster)) [part="point"]::after {
-content: none;
-}
-
-:host(:state(fanned))::before {
---_map-marker-leg-ink: color-mix(
+var(--_map-marker-shadow);color: var(--helix-color-foreground-on-primary);font-size: calc(var(--_map-marker-size) * 0.42);font-variant-numeric: tabular-nums;rotate: none;scale: none;}:host(:state(cluster)) [part="point"]::before,
+:host(:state(cluster)) [part="point"]::after {content: none;}:host(:state(fanned))::before {--_map-marker-leg-ink: color-mix(
 in oklab,
 var(--helix-color-foreground) 55%,
 var(--helix-color-surface)
-);
---_map-marker-leg-dot: calc(var(--helix-border-thick) * 1.75);
-
-background:
+);--_map-marker-leg-dot: calc(var(--helix-border-thick) * 1.75);background:
 radial-gradient(
 circle at calc(100% - var(--_map-marker-leg-dot)) 50%,
 var(--_map-marker-leg-ink) var(--_map-marker-leg-dot),
 transparent calc(var(--_map-marker-leg-dot) + var(--helix-border-thin))
 ),
 linear-gradient(var(--_map-marker-leg-ink), var(--_map-marker-leg-ink)) 0 50% / 100%
-var(--helix-border-thick) no-repeat;
-
-block-size: calc((var(--_map-marker-leg-dot) + var(--helix-border-thin)) * 2);
-content: "";
-inline-size: calc(var(--_map-marker-leg) + var(--_map-marker-leg-dot));
-left: 0;
-position: absolute;
-rotate: var(--_map-marker-leg-angle);
-top: 0;
-transform-origin: 0 50%;
-translate: 0 -50%;
-}
-
-:host(:state(clustered)) {
-display: none;
-}
-
-:host([separation="outlined"]) {
---_map-marker-shadow: none;
-}
-
-:host([separation="elevated"]) {
---_map-marker-shadow: var(--helix-shadow-md);
-}
-
-:host([separation="filled"]) {
---_map-marker-edge: transparent;
---_map-marker-shadow: 0 0 0 calc(var(--_map-marker-size) * 0.3)
-color-mix(in oklab, var(--_map-marker-color) 22%, transparent);
-}
-
-:host([separation="plain"]) {
---_map-marker-edge: transparent;
---_map-marker-shadow: none;
-}
-
-[part="label"] {
-
-background: var(--helix-color-surface-overlay);
-border: var(--map-marker-label-border-width, var(--helix-border-floating)) solid
-var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--map-marker-label-shadow, var(--helix-shadow-floating));
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-opacity: 0;
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-pointer-events: none;
-transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
-white-space: nowrap;
-}
-
-:host(:state(cluster)) [part="label"] {
-
-inline-size: max-content;
-max-inline-size: 16rem;
-white-space: normal;
-}
-
-:host([material="glass"]) [part="label"] {
-backdrop-filter: var(--helix-material-backdrop);
-background: var(--helix-material-translucent);
-}
-
-:host([material="frosted"]) [part="label"] {
-backdrop-filter: blur(var(--helix-material-blur-lg));
-background: var(--helix-material-translucent-strong);
-}
-
-:host([material="transparent"]) [part="label"] {
-backdrop-filter: none;
-background: transparent;
-}
-
-:host(:hover) [part="label"],
-[part="marker"]:focus-visible [part="label"] {
-opacity: 1;
-}
-
-:host(:hover) [part="point"],
-[part="marker"]:focus-visible [part="point"] {
-transform: scale(1.25);
-}
-
-[part="marker"]:focus-visible [part="point"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([tone="accent"]) {
---_map-marker-color: var(--helix-color-accent);
---_map-marker-fill: var(--helix-color-accent-surface);
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));
-}
-:host([tone="danger"]) {
---_map-marker-color: var(--helix-color-danger);
---_map-marker-fill: var(--helix-color-danger-surface);
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
-}
-:host([tone="info"]) {
---_map-marker-color: var(--helix-color-info);
---_map-marker-fill: var(--helix-color-info-surface);
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
-}
-
-:host([tone="neutral"]) {
---_map-marker-color: var(--helix-color-foreground-muted);
---_map-marker-fill: var(--helix-color-foreground-muted);
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-surface));
-}
-:host([tone="success"]) {
---_map-marker-color: var(--helix-color-success);
---_map-marker-fill: var(--helix-color-success-surface);
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
-}
-:host([tone="warning"]) {
---_map-marker-color: var(--helix-color-warning);
---_map-marker-fill: var(--helix-color-warning-surface);
---_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));
-}
-
-:host(:state(passed)) {
---_map-marker-color: var(--helix-color-foreground-muted);
---_map-marker-fill: var(--helix-color-foreground-muted);
---_map-marker-ink: var(--helix-color-surface);
---_map-marker-shadow: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="label"],
-[part="point"] {
-transition: none;
-}
-}`);
+var(--helix-border-thick) no-repeat;block-size: calc((var(--_map-marker-leg-dot) + var(--helix-border-thin)) * 2);content: "";inline-size: calc(var(--_map-marker-leg) + var(--_map-marker-leg-dot));left: 0;position: absolute;rotate: var(--_map-marker-leg-angle);top: 0;transform-origin: 0 50%;translate: 0 -50%;}:host(:state(clustered)) {display: none;}:host([separation="outlined"]) {--_map-marker-shadow: none;}:host([separation="elevated"]) {--_map-marker-shadow: var(--helix-shadow-md);}:host([separation="filled"]) {--_map-marker-edge: transparent;--_map-marker-shadow: 0 0 0 calc(var(--_map-marker-size) * 0.3)
+color-mix(in oklab, var(--_map-marker-color) 22%, transparent);}:host([separation="plain"]) {--_map-marker-edge: transparent;--_map-marker-shadow: none;}[part="label"] {background: var(--helix-color-surface-overlay);border: var(--map-marker-label-border-width, var(--helix-border-floating)) solid
+var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--map-marker-label-shadow, var(--helix-shadow-floating));color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);opacity: 0;padding: var(--helix-space-2xs) var(--helix-space-xs);pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}:host(:state(cluster)) [part="label"] {inline-size: max-content;max-inline-size: 16rem;white-space: normal;}:host([material="glass"]) [part="label"] {backdrop-filter: var(--helix-material-backdrop);background: var(--helix-material-translucent);}:host([material="frosted"]) [part="label"] {backdrop-filter: blur(var(--helix-material-blur-lg));background: var(--helix-material-translucent-strong);}:host([material="transparent"]) [part="label"] {backdrop-filter: none;background: transparent;}:host(:hover) [part="label"],
+[part="marker"]:focus-visible [part="label"] {opacity: 1;}:host(:hover) [part="point"],
+[part="marker"]:focus-visible [part="point"] {transform: scale(1.25);}[part="marker"]:focus-visible [part="point"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([tone="accent"]) {--_map-marker-color: var(--helix-color-accent);--_map-marker-fill: var(--helix-color-accent-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-accent));}:host([tone="danger"]) {--_map-marker-color: var(--helix-color-danger);--_map-marker-fill: var(--helix-color-danger-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host([tone="info"]) {--_map-marker-color: var(--helix-color-info);--_map-marker-fill: var(--helix-color-info-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host([tone="neutral"]) {--_map-marker-color: var(--helix-color-foreground-muted);--_map-marker-fill: var(--helix-color-foreground-muted);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-surface));}:host([tone="success"]) {--_map-marker-color: var(--helix-color-success);--_map-marker-fill: var(--helix-color-success-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host([tone="warning"]) {--_map-marker-color: var(--helix-color-warning);--_map-marker-fill: var(--helix-color-warning-surface);--_map-marker-ink: var(--map-marker-ink, var(--helix-color-foreground-on-status));}:host(:state(passed)) {--_map-marker-color: var(--helix-color-foreground-muted);--_map-marker-fill: var(--helix-color-foreground-muted);--_map-marker-ink: var(--helix-color-surface);--_map-marker-shadow: none;}@media (prefers-reduced-motion: reduce) {[part="label"],
+[part="point"] {transition: none;}}`);

package/dist/map/points/map-points.css.js

@@ -1,87 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-border-color: var(--map-points-casing-color, var(--helix-color-surface));
-color: var(--map-points-color, var(--helix-color-primary-surface));
-
-block-size: 0;
-display: block;
-inline-size: 0;
-inset-block-start: 0;
-left: 0;
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-primary));
-pointer-events: none;
-position: absolute;
-}
-
-[part~="place"] {
-block-size: var(--helix-size-control-sm);
-border-radius: var(--helix-radii-full);
-inline-size: var(--helix-size-control-sm);
-left: var(--_map-place-x);
-outline: none;
-position: absolute;
-top: var(--_map-place-y);
-translate: -50% -50%;
-}
-
-[part~="count"] {
-block-size: var(--helix-size-control-lg);
-inline-size: var(--helix-size-control-lg);
-}
-
-[part~="place"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="label"] {
-background: var(--helix-color-surface-overlay);
-border: var(--helix-border-floating) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--helix-shadow-floating);
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-inset-inline-start: calc(100% + var(--helix-space-sm));
-opacity: 0;
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-position: absolute;
-top: 50%;
-translate: 0 -50%;
-white-space: nowrap;
-}
-
-[part~="place"]:focus-visible [part="label"] {
-opacity: 1;
-}
-
-:host([tone="accent"]) {
-color: var(--helix-color-accent-surface);
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));
-}
-
-:host([tone="danger"]) {
-color: var(--helix-color-danger-surface);
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
-}
-
-:host([tone="info"]) {
-color: var(--helix-color-info-surface);
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
-}
-
-:host([tone="neutral"]) {
-color: var(--helix-color-foreground-muted);
-outline-color: var(--map-points-ink, var(--helix-color-surface));
-}
-
-:host([tone="success"]) {
-color: var(--helix-color-success-surface);
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
-}
-
-:host([tone="warning"]) {
-color: var(--helix-color-warning-surface);
-outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));
-}`);
+export const styles = createSheet(`:host {border-color: var(--map-points-casing-color, var(--helix-color-surface));color: var(--map-points-color, var(--helix-color-primary-surface));block-size: 0;display: block;inline-size: 0;inset-block-start: 0;left: 0;outline-color: var(--map-points-ink, var(--helix-color-foreground-on-primary));pointer-events: none;position: absolute;}[part~="place"] {block-size: var(--helix-size-control-sm);border-radius: var(--helix-radii-full);inline-size: var(--helix-size-control-sm);left: var(--_map-place-x);outline: none;position: absolute;top: var(--_map-place-y);translate: -50% -50%;}[part~="count"] {block-size: var(--helix-size-control-lg);inline-size: var(--helix-size-control-lg);}[part~="place"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="label"] {background: var(--helix-color-surface-overlay);border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inset-inline-start: calc(100% + var(--helix-space-sm));opacity: 0;padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;top: 50%;translate: 0 -50%;white-space: nowrap;}[part~="place"]:focus-visible [part="label"] {opacity: 1;}:host([tone="accent"]) {color: var(--helix-color-accent-surface);outline-color: var(--map-points-ink, var(--helix-color-foreground-on-accent));}:host([tone="danger"]) {color: var(--helix-color-danger-surface);outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));}:host([tone="info"]) {color: var(--helix-color-info-surface);outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));}:host([tone="neutral"]) {color: var(--helix-color-foreground-muted);outline-color: var(--map-points-ink, var(--helix-color-surface));}:host([tone="success"]) {color: var(--helix-color-success-surface);outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));}:host([tone="warning"]) {color: var(--helix-color-warning-surface);outline-color: var(--map-points-ink, var(--helix-color-foreground-on-status));}`);