@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/meter/index.tsx

@@ -1,14 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Meter.tsx
+
+// Port of packages/@react-spectrum/s2/src/Meter.tsx.
+
+import { For, createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
-  type JSX,
-  For,
-  createContext,
-  createMemo,
-  createUniqueId,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
-import { createMeter } from "@proyecto-viviana/solidaria";
+  Label as HeadlessLabel,
+  Meter as HeadlessMeter,
+} from "@proyecto-viviana/solidaria-components";
 import { SkeletonWrapper } from "../skeleton";
 import { Text } from "../text";
 import type { StyleString } from "../style";
@@ -23,6 +35,7 @@ import {
   getAllowedOverrides,
   staticColor as staticColorStyles,
 } from "../s2-internal/style-utils" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -33,7 +46,11 @@ import {
 } from "../button/spectrum-context";
 
 type MeterSize = "S" | "M" | "L" | "XL";
-type MeterVariant = "informative" | "positive" | "notice" | "negative";
+/* `metric` is the register's fourth status channel — the cyan that reports a
+ * measurement rather than a state. Badge and StatusLight already expose it; without it
+ * a metric meter has to borrow `informative`, which is a different channel reporting a
+ * different thing. Local addition — no S2 counterpart. */
+type MeterVariant = "informative" | "positive" | "notice" | "negative" | "metric";
 /* `success` and `warning` are accepted alias names for `positive`/`notice` — the
  * negative/warning/success status trio Button and Badge also expose — folded onto
  * the canonical channel by normalizeVariant before styling. */
@@ -73,7 +90,12 @@ export interface MeterProps {
    * continuous.
    */
   segments?: number;
-  /** The visual style variant. `success`/`warning` alias `positive`/`notice`. @default 'informative' */
+  /**
+   * The visual style variant. `success`/`warning` alias `positive`/`notice`.
+   * `metric` is a local addition — no S2 counterpart — for the register's cyan
+   * measurement channel.
+   * @default 'informative'
+   */
   variant?: MeterVariantProp;
   /** The label to display above the meter. */
   label?: JSX.Element;
@@ -219,13 +241,16 @@ const trackStyles = style<MeterStyleState>({
     forcedColors: "ButtonText",
   },
   zIndex: 1,
+  /* The register's bar is 8px, so the band is shifted one rung up to put the DEFAULT
+   * size on the drawn value instead of two rungs under it. Four distinct rungs are
+   * kept — the size axis still moves, it just starts where the register draws. */
   height: {
-    default: 6,
+    default: 8,
     size: {
-      S: 4,
-      M: 6,
-      L: 8,
-      XL: 10,
+      S: 6,
+      M: 8,
+      L: 10,
+      XL: 12,
     },
   },
 });
@@ -248,17 +273,31 @@ const trackRimStyles = style({
   boxShadow: "edge-glass",
 });
 
+/* One channel map, three call sites: the bar's fill, and the blocks' border and their
+ * fill. The register reports a status with a CHANNEL TOKEN, not with a ramp stop —
+ * `--status-info` · `--status-signal` · `--status-metric` · `--status-fault` are the
+ * same four a log line and a StatusLight dot use, so a meter can no longer drift into
+ * a different red from the dot reporting the same fault. They are the ink-strength
+ * stops of each channel deliberately: a bar is a non-text graphic held to 3:1, and the
+ * raw signal FILL (`--yellow-500`) reads ~1.6:1 against a daylight track where
+ * `--status-signal` clears the floor. `positive` has no status channel — success is the
+ * library's own green — and keeps its ramp pair. */
+const channelFill = {
+  default: "[var(--status-info)]",
+  variant: {
+    positive: lightDark("positive-800", "positive-900"),
+    notice: "[var(--status-signal)]",
+    negative: "[var(--status-fault)]",
+    metric: "[var(--status-metric)]",
+  },
+} as const;
+
 const fillStyles = style<MeterStyleState>({
   height: "full",
   borderStyle: "none",
   borderRadius: "none",
   backgroundColor: {
-    default: lightDark("informative-800", "informative-900"),
-    variant: {
-      positive: lightDark("positive-800", "positive-900"),
-      notice: lightDark("notice-800", "notice-900"),
-      negative: lightDark("negative-800", "negative-900"),
-    },
+    ...channelFill,
     isStaticColor: "transparent-overlay-900",
     forcedColors: "ButtonText",
   },
@@ -290,24 +329,14 @@ const segmentStyles = style<MeterSegmentStyleState>({
   borderStyle: "solid",
   borderWidth: 1,
   borderColor: {
-    default: lightDark("informative-800", "informative-900"),
-    variant: {
-      positive: lightDark("positive-800", "positive-900"),
-      notice: lightDark("notice-800", "notice-900"),
-      negative: lightDark("negative-800", "negative-900"),
-    },
+    ...channelFill,
     isStaticColor: "transparent-overlay-900",
     forcedColors: "ButtonText",
   },
   backgroundColor: {
     default: "transparent",
     isFilled: {
-      default: lightDark("informative-800", "informative-900"),
-      variant: {
-        positive: lightDark("positive-800", "positive-900"),
-        notice: lightDark("notice-800", "notice-900"),
-        negative: lightDark("negative-800", "negative-900"),
-      },
+      ...channelFill,
       isStaticColor: "transparent-overlay-900",
       forcedColors: "ButtonText",
     },
@@ -376,7 +405,6 @@ export function Meter(props: MeterProps): JSX.Element {
     "showValueLabel",
     "children",
   ]);
-  const labelId = createUniqueId();
   const size = () => local.size ?? "M";
   const variant = () => normalizeVariant(local.variant);
   const labelPosition = () => local.labelPosition ?? "top";
@@ -390,72 +418,33 @@ export function Meter(props: MeterProps): JSX.Element {
     isStaticColor: isStaticColor(),
     isSegmented: segmentCount() != null,
   });
-  const accessibleLabelledBy = () =>
-    local["aria-labelledby"] ?? (!local["aria-label"] && local.label ? labelId : undefined);
-
-  const meterAria = createMeter({
-    get id() {
-      return local.id;
-    },
-    get value() {
-      return local.value;
-    },
-    get minValue() {
-      return local.minValue;
-    },
-    get maxValue() {
-      return local.maxValue;
-    },
-    get valueLabel() {
-      return stringValueLabel(local.valueLabel);
-    },
-    get formatOptions() {
-      return local.formatOptions;
-    },
-    get "aria-label"() {
-      return local["aria-label"];
-    },
-    get "aria-labelledby"() {
-      return accessibleLabelledBy();
-    },
-    get "aria-describedby"() {
-      return local["aria-describedby"];
-    },
-    get "aria-details"() {
-      return local["aria-details"];
-    },
-  });
-
-  const percentage = createMemo(() => {
-    const minValue = local.minValue ?? 0;
-    const maxValue = local.maxValue ?? 100;
-    const value = clamp(local.value ?? 0, minValue, maxValue);
-    return ((value - minValue) / (maxValue - minValue)) * 100;
-  });
-  const valueText = () =>
-    local.valueLabel ?? (meterAria.meterProps["aria-valuetext"] as string | undefined);
   const segmentCount = () => {
     const segments = local.segments;
     return segments != null && Number.isFinite(segments) && segments >= 1
       ? Math.floor(segments)
       : null;
   };
-  const filledCount = createMemo(() => {
+  const filledCount = (percentage: number) => {
     const segments = segmentCount();
-    return segments == null
-      ? 0
-      : clamp(Math.round((percentage() / 100) * segments), 0, segments);
-  });
-  const showValue = () => !!local.label;
+    return segments == null ? 0 : clamp(Math.round((percentage / 100) * segments), 0, segments);
+  };
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
   const mergedUnsafeStyle = () =>
     mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
 
   return (
-    <div
+    <HeadlessMeter
       {...getDataAttributes(merged)}
-      {...meterAria.meterProps}
-      role="meter"
+      id={local.id}
+      value={local.value}
+      minValue={local.minValue}
+      maxValue={local.maxValue}
+      valueLabel={stringValueLabel(local.valueLabel)}
+      formatOptions={local.formatOptions}
+      aria-label={local["aria-label"]}
+      aria-labelledby={local["aria-labelledby"]}
+      aria-describedby={local["aria-describedby"]}
+      aria-details={local["aria-details"]}
       ref={mergeContextRefs(
         (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,
         props.ref,
@@ -466,30 +455,47 @@ export function Meter(props: MeterProps): JSX.Element {
       style={mergedUnsafeStyle()}
       slot={local.slot ?? undefined}
     >
-      {local.label && (
-        <div class={labelWrapperStyles(state("start"))}>
-          <span id={labelId} class={labelStyles(state("start"))}>
-            {local.label}
-          </span>
-        </div>
+      {({ percentage, valueText }) => (
+        <>
+          {local.label && (
+            <div class={labelWrapperStyles(state("start"))}>
+              <HeadlessLabel class={labelStyles(state("start"))}>{local.label}</HeadlessLabel>
+            </div>
+          )}
+          {local.label && (
+            <Text styles={valueStyles(state("end"))}>{local.valueLabel ?? valueText}</Text>
+          )}
+          <SkeletonWrapper>
+            {segmentCount() != null ? (
+              <div class={segmentRowStyles} aria-hidden="true">
+                <For each={Array.from({ length: segmentCount() ?? 0 })}>
+                  {(_, index) => (
+                    <div
+                      class={segmentStyles({
+                        ...state(),
+                        isFilled: index() < filledCount(percentage),
+                      })}
+                    />
+                  )}
+                </For>
+              </div>
+            ) : (
+              <div class={trackStyles(state())}>
+                <div class={fillStyles(state())} style={{ width: `${percentage}%` }} />
+                <div aria-hidden="true" class={trackRimStyles} />
+              </div>
+            )}
+          </SkeletonWrapper>
+        </>
       )}
-      {showValue() && <Text styles={valueStyles(state("end"))}>{valueText()}</Text>}
-      <SkeletonWrapper>
-        {segmentCount() != null ? (
-          <div class={segmentRowStyles} aria-hidden="true">
-            <For each={Array.from({ length: segmentCount() ?? 0 })}>
-              {(_, index) => (
-                <div class={segmentStyles({ ...state(), isFilled: index() < filledCount() })} />
-              )}
-            </For>
-          </div>
-        ) : (
-          <div class={trackStyles(state())}>
-            <div class={fillStyles(state())} style={{ width: `${percentage()}%` }} />
-            <div aria-hidden="true" class={trackRimStyles} />
-          </div>
-        )}
-      </SkeletonWrapper>
-    </div>
+    </HeadlessMeter>
   );
 }
+
+export { PixelMeter } from "./PixelMeter";
+export type {
+  PixelMeterProps,
+  PixelMeterShape,
+  PixelMeterChannel,
+  PixelMeterLevels,
+} from "./PixelMeter";

package/src/notificationbadge/index.tsx

@@ -1,5 +1,26 @@
-import { type JSX, createContext, createMemo, mergeProps, splitProps, useContext } from "solid-js";
-import { createStringFormatter, filterDOMProps, useLocale } from "@proyecto-viviana/solidaria";
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/NotificationBadge.tsx
+
+// Port of packages/@react-spectrum/s2/src/NotificationBadge.tsx.
+import { createContext, createMemo, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import {
+  mergeProps,
+  createStringFormatter,
+  filterDOMProps,
+  useLocale,
+} from "@proyecto-viviana/solidaria";
 import type { StyleString } from "../style";
 import { fontRelative, style } from "../style" with { type: "macro" };
 import type { UnsafeClassName } from "../s2-internal/style-utils";
@@ -13,6 +34,7 @@ import {
   type SpectrumContextValue,
 } from "../button/spectrum-context";
 import { s2IntlStrings } from "../intl";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface NotificationBadgeProps {
   /** The value to display in the notification badge. */
@@ -52,43 +74,63 @@ const notificationBadge = style(
       isDisabled: "none",
     },
     font: "ui",
+    /* The register sets a notification count in the PIXEL face, not the UI face: the
+     * count on the icon-rail bell is `--font-display` 10px/700 (TerminalGlassLab.tsx
+     * §01). It is the one numeral in the chrome that is meant to read as a stamp
+     * rather than as text, which is exactly the role `fontFamily: "display"` carries
+     * in this package. Declared after `font: "ui"` so it overrides only the family
+     * and weight that shorthand established. */
+    fontFamily: "display",
+    fontWeight: "bold",
     color: {
-      default: "white",
+      /* Fuchsia is the register's ASK colour, and a notification count is an ask —
+       * DECISIONS lists NotificationBadge as the one non-`create` surface that keeps
+       * it (it counts as *notification*, not a second CTA). Ink is the create pair's
+       * own ink so the contrast holds in both schemes without a per-scheme value here. */
+      default: "create-ink",
       isStaticColor: "auto",
       forcedColors: "ButtonText",
     },
     fontSize: {
       size: {
-        S: "ui-xs",
+        /* 10px flat at S, the rung the handoff draws. The other three keep the shared
+         * ui ramp rather than acquiring three invented px values. */
+        S: "[10px]",
         M: "ui-xs",
         L: "ui-sm",
         XL: "ui",
       },
     },
-    borderStyle: {
-      forcedColors: "solid",
-    },
-    borderWidth: {
-      forcedColors: "[1px]",
-    },
+    /* The badge rim is not a forced-colors-only affordance any more: the register
+     * draws a 1px `--accent-create-border` around the fuchsia stamp so it separates
+     * from whatever icon it overlaps. `boxSizing: border-box` keeps that rim inside
+     * the 17px box below instead of growing it to 19px. */
+    boxSizing: "border-box",
+    borderStyle: "solid",
+    borderWidth: "[1px]",
     borderColor: {
+      default: "create-border",
+      isStaticColor: "transparent-overlay-1000",
       forcedColors: "ButtonBorder",
     },
     justifyContent: "center",
     alignItems: "center",
     backgroundColor: {
-      default: "accent",
+      default: "create-bg",
       isStaticColor: "transparent-overlay-1000",
       forcedColors: "ButtonFace",
     },
     height: {
       size: {
+        /* 17px, the handoff's own badge box (§01 icon rail). 12px was Spectrum's S
+         * rung and could not hold a 10px pixel numeral with a 1px rim. Only the drawn
+         * rung moves; the indicator-only dot stays 8px. */
         S: {
-          default: 12,
+          default: "[17px]",
           isIndicatorOnly: 8,
         },
         M: {
-          default: fontRelative(18),
+          default: "1lh",
           isIndicatorOnly: 8,
         },
         L: {
@@ -105,6 +147,18 @@ const notificationBadge = style(
       isIndicatorOnly: "square",
       isSingleDigit: "square",
     },
+    /* A single-digit badge is square by `aspectRatio` below, but a 10px numeral in a
+     * 17px box is narrower than it is tall at the double-digit rung too — the register
+     * draws `min-width: 17px` so "1" and "12" sit in the same footprint. Only the drawn
+     * S rung takes it; the rest stay on `aspectRatio` alone. */
+    minWidth: {
+      size: {
+        S: {
+          default: "[17px]",
+          isIndicatorOnly: 0,
+        },
+      },
+    },
     width: "max",
     paddingX: {
       isDoubleDigit: "edge-to-text",