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

package/src/intl/uk-UA.json

@@ -0,0 +1,49 @@
+{
+  "actionbar.actions": "Дії",
+  "actionbar.actionsAvailable": "Доступні дії.",
+  "actionbar.clearSelection": "Очистити вибір",
+  "actionbar.selected": "Вибрано: {count}",
+  "actionbar.selectedAll": "Усе вибрано",
+  "breadcrumbs.more": "Більше елементів",
+  "button.pending": "в очікуванні",
+  "calendar.invalidSelection": "{selectedCount, plural, one {Вибрана дата недоступна} other {Вибрані дати недоступні}}.",
+  "combobox.noResults": "Результатів немає",
+  "contextualhelp.help": "Довідка",
+  "contextualhelp.info": "Інформація",
+  "datepicker.endTime": "Час завершення",
+  "datepicker.startTime": "Час початку",
+  "datepicker.time": "Час",
+  "dialog.alert": "Сигнал тривоги",
+  "dialog.dismiss": "Скасувати",
+  "dropzone.replaceMessage": "Перетягніть файл для заміни",
+  "inlinealert.informative": "Інформація",
+  "inlinealert.negative": "Помилка",
+  "inlinealert.notice": "Попередження",
+  "inlinealert.positive": "Успішно",
+  "label.(optional)": "(необов’язково)",
+  "label.(required)": "(обов’язково)",
+  "menu.moreActions": "Більше дій",
+  "menu.unavailable": "Недоступно, розгорніть для докладнішої інформації",
+  "notificationbadge.indicatorOnly": "Нова активність",
+  "notificationbadge.plus": "{notifications}+",
+  "picker.placeholder": "Вибрати…",
+  "picker.selectedCount": "{count, plural, =0 {Жодних елементів не вибрано} one {# елемент вибрано} other {Елементів вибрано: #}}",
+  "slider.maximum": "Максимум",
+  "slider.minimum": "Мінімум",
+  "table.cancel": "Скасувати",
+  "table.drag": "Перетягнути",
+  "table.editCell": "Редагувати клітинку",
+  "table.loading": "Завантаження…",
+  "table.loadingMore": "Завантаження інших об’єктів...",
+  "table.resizeColumn": "Змінити розмір стовпця",
+  "table.save": "Зберегти",
+  "table.sortAscending": "Сортувати за зростанням",
+  "table.sortDescending": "Сортувати за спаданням",
+  "tag.actions": "Дії",
+  "tag.hideButtonLabel": "Показувати менше",
+  "tag.noTags": "Немає",
+  "tag.showAllButtonLabel": "Показати всі ({tagCount, number})",
+  "toast.clearAll": "Очистити все",
+  "toast.collapse": "Згорнути",
+  "toast.showAll": "Показати все"
+}

package/src/intl/zh-CN.json

@@ -0,0 +1,49 @@
+{
+  "actionbar.actions": "操作",
+  "actionbar.actionsAvailable": "有可用操作。",
+  "actionbar.clearSelection": "清除选择",
+  "actionbar.selected": "{count, plural, =0 {无选择} other {已选择 # 个}}",
+  "actionbar.selectedAll": "全选",
+  "breadcrumbs.more": "更多项目",
+  "button.pending": "待处理",
+  "calendar.invalidSelection": "选定的 {selectedCount, plural, one {个日期} other {个日期}} 不可用。",
+  "combobox.noResults": "无结果",
+  "contextualhelp.help": "帮助",
+  "contextualhelp.info": "信息",
+  "datepicker.endTime": "结束时间",
+  "datepicker.startTime": "开始时间",
+  "datepicker.time": "时间",
+  "dialog.alert": "警报",
+  "dialog.dismiss": "取消",
+  "dropzone.replaceMessage": "删除要替换的文件",
+  "inlinealert.informative": "信息",
+  "inlinealert.negative": "错误",
+  "inlinealert.notice": "警告",
+  "inlinealert.positive": "成功",
+  "label.(optional)": "（非必须）",
+  "label.(required)": "（必填）",
+  "menu.moreActions": "更多操作",
+  "menu.unavailable": "不可用，展开以查看详细信息",
+  "notificationbadge.indicatorOnly": "新活动",
+  "notificationbadge.plus": "{notifications}+",
+  "picker.placeholder": "选择…",
+  "picker.selectedCount": "{count, plural, =0 {未选择任何项} one {已选择 # 个项} other {已选择 # 个项}}",
+  "slider.maximum": "最大",
+  "slider.minimum": "最小",
+  "table.cancel": "取消",
+  "table.drag": "拖动",
+  "table.editCell": "编辑单元格",
+  "table.loading": "正在加载...",
+  "table.loadingMore": "正在加载更多...",
+  "table.resizeColumn": "调整列大小",
+  "table.save": "保存",
+  "table.sortAscending": "升序排序",
+  "table.sortDescending": "降序排序",
+  "tag.actions": "操作",
+  "tag.hideButtonLabel": "显示更少",
+  "tag.noTags": "无",
+  "tag.showAllButtonLabel": "全部显示 ({tagCount, number})",
+  "toast.clearAll": "全部清除",
+  "toast.collapse": "折叠",
+  "toast.showAll": "显示全部"
+}

package/src/intl/zh-TW.json

@@ -0,0 +1,49 @@
+{
+  "actionbar.actions": "動作",
+  "actionbar.actionsAvailable": "可執行的動作。",
+  "actionbar.clearSelection": "清除選取項目",
+  "actionbar.selected": "{count, plural, =0 {未選取任何項目} other {已選取 # 個}}",
+  "actionbar.selectedAll": "已選取所有項目",
+  "breadcrumbs.more": "更多項目",
+  "button.pending": "待處理",
+  "calendar.invalidSelection": "所選的{selectedCount, plural, one {日期} other {日期}}無法使用。",
+  "combobox.noResults": "無任何結果",
+  "contextualhelp.help": "說明",
+  "contextualhelp.info": "資訊",
+  "datepicker.endTime": "結束時間",
+  "datepicker.startTime": "開始時間",
+  "datepicker.time": "時間",
+  "dialog.alert": "警示",
+  "dialog.dismiss": "關閉",
+  "dropzone.replaceMessage": "放置要取代的檔案",
+  "inlinealert.informative": "資訊",
+  "inlinealert.negative": "錯誤",
+  "inlinealert.notice": "警告",
+  "inlinealert.positive": "成功",
+  "label.(optional)": "(選填)",
+  "label.(required)": "(必填)",
+  "menu.moreActions": "更多動作",
+  "menu.unavailable": "無法使用，展開以取得詳細資料",
+  "notificationbadge.indicatorOnly": "新活動",
+  "notificationbadge.plus": "{notifications}+",
+  "picker.placeholder": "選取…",
+  "picker.selectedCount": "{count, plural, =0 {未選取任何項目} one {已選取 # 個項目} other {已選取 # 個項目}}",
+  "slider.maximum": "最大值",
+  "slider.minimum": "最小值",
+  "table.cancel": "取消",
+  "table.drag": "拖曳",
+  "table.editCell": "編輯儲存格",
+  "table.loading": "載入中…",
+  "table.loadingMore": "正在載入更多…",
+  "table.resizeColumn": "調整欄大小",
+  "table.save": "儲存",
+  "table.sortAscending": "遞增排序",
+  "table.sortDescending": "遞減排序",
+  "tag.actions": "動作",
+  "tag.hideButtonLabel": "顯示較少",
+  "tag.noTags": "無",
+  "tag.showAllButtonLabel": "顯示全部 ({tagCount, number})",
+  "toast.clearAll": "全部清除",
+  "toast.collapse": "收合",
+  "toast.showAll": "顯示全部"
+}

package/src/label/index.tsx

@@ -1,9 +1,25 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * 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/style-utils.ts
+
+// Port of packages/@react-spectrum/s2/src/style-utils.ts.
+import type { JSX } from "@solidjs/web";
 import {
   Label as HeadlessLabel,
   type LabelProps as HeadlessLabelProps,
 } from "@proyecto-viviana/solidaria-components";
 import { style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type LabelSize = "sm" | "md" | "lg";
 

package/src/labeledvalue/index.tsx

@@ -1,4 +1,19 @@
-import { type JSX, Show, createMemo, splitProps } from "solid-js";
+/*
+ * 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/LabeledValue.tsx
+
+import { Show, createMemo } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { NumberFormatter, useLocale } from "@proyecto-viviana/solidaria";
 import type { StyleString } from "../style";
 import { style } from "../style" with { type: "macro" };
@@ -11,6 +26,7 @@ import {
   getAllowedOverrides,
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { useFormProps, useIsInForm } from "../form";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type LabeledValueSize = "S" | "M" | "L" | "XL";
 export type LabeledValueLabelPosition = "top" | "side";
@@ -113,10 +129,11 @@ const valueStyles = style<LabeledValueStyleProps>({
  * A LabeledValue displays a non-editable value with a label. It formats numbers and lists
  * according to the user's locale.
  *
- * Faithful port of `@react-spectrum/s2` `LabeledValue`: the shared `field()` grid, a
- * `FieldLabel` rendered as a `<span>`, and a value `<span>` styled with `fieldInput()` +
- * `controlFont()`. `size` / `labelPosition` / `labelAlign` are inherited from an enclosing
- * `Form` via `useFormProps` for any prop left undefined.
+ * Based on packages/@react-spectrum/s2/src/LabeledValue.tsx.
+ * The Solid adaptation uses the shared `field()` grid, a `FieldLabel` rendered as a
+ * `<span>`, and a value `<span>` styled with `fieldInput()` + `controlFont()`.
+ * `size`, `labelPosition`, and `labelAlign` are inherited from an enclosing `Form`
+ * through `useFormProps` for each prop left undefined.
  */
 export function LabeledValue(props: LabeledValueProps): JSX.Element {
   const merged = useFormProps(props);

package/src/landmark/index.tsx

@@ -1,4 +1,5 @@
-import { type JSX, splitProps, Show } from "solid-js";
+import { Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Landmark as HeadlessLandmark,
   useLandmarkController,
@@ -7,6 +8,7 @@ import {
   type LandmarkController,
 } from "@proyecto-viviana/solidaria-components";
 import { style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface LandmarkProps extends Omit<HeadlessLandmarkProps, "class" | "style"> {
   /** Additional CSS class name. */

package/src/layout/Flex.tsx

@@ -1,4 +1,20 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2020 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/@adobe/react-spectrum/src/layout/Flex.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/layout/Flex.tsx.
+import type { JSX } from "@solidjs/web";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface FlexProps {
   /** The flex direction. @default 'row' */
@@ -15,6 +31,8 @@ export interface FlexProps {
   inline?: boolean;
   /** Additional CSS class name. */
   class?: string;
+  /** Additional inline styles. */
+  style?: JSX.CSSProperties;
   /** The content. */
   children?: JSX.Element;
 }
@@ -69,12 +87,17 @@ export function Flex(props: FlexProps): JSX.Element {
     "justifyContent",
     "inline",
     "class",
+    "style",
     "children",
   ]);
 
+  // `style` is merged rather than left in `rest`, where the assignment below would have
+  // silently dropped it. Grid already accepted one; the two primitives are meant to be
+  // interchangeable, and without it every decorated row has to fall back to a bare div.
   const flexStyle = (): JSX.CSSProperties => {
     const s: JSX.CSSProperties = {
       display: local.inline ? "inline-flex" : "flex",
+      ...local.style,
     };
 
     if (local.direction) s["flex-direction"] = local.direction;

package/src/layout/Grid.tsx

@@ -1,5 +1,21 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2020 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/@adobe/react-spectrum/src/layout/Grid.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/layout/Grid.tsx.
+import type { JSX } from "@solidjs/web";
 import { resolveGap } from "./Flex";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface GridProps {
   /** The number of columns, or a grid-template-columns value. */

package/src/layout/css-utils.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright 2020 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/@adobe/react-spectrum/src/layout/Grid.tsx
+
+// Port of @react-spectrum source: https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/layout/Grid.tsx.
 /**
  * Creates a CSS `fit-content()` value.
  * @param value - The max content size (e.g., '200px', '50%')

package/src/link/index.tsx

@@ -1,4 +1,22 @@
-import { type JSX, createContext, mergeProps, splitProps, useContext } from "solid-js";
+/*
+ * 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/Link.tsx
+
+// Port of packages/@react-spectrum/s2/src/Link.tsx.
+
+import { createContext, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   Link as HeadlessLink,
   type LinkProps as HeadlessLinkProps,
@@ -19,6 +37,7 @@ import {
   staticColor as staticColorStyle,
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { createIsSkeleton, useInertAttribute, useSkeletonText } from "../skeleton";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 type LinkVariant = "primary" | "secondary";
 type LinkStaticColor = "white" | "black" | "auto";
@@ -89,7 +108,9 @@ const linkStyles = style<
     },
     color: {
       variant: {
-        primary: baseColor("accent"),
+        // Accent-as-ink has its own AA-safe role. `accent` remains the brighter
+        // brand blue used by decorative marks, rings, and indicators.
+        primary: "[var(--text-link)]",
         secondary: baseColor("neutral"),
       },
       isStaticColor: "transparent-overlay-1000",
@@ -99,14 +120,17 @@ const linkStyles = style<
     fontWeight: {
       isStandalone: "medium",
     },
+    /* Glasselated: a STANDALONE link is a piece of chrome — the register draws it
+     * bare and reveals the underline on hover/focus, the same reveal the nav rows
+     * use. An INLINE link keeps its underline at rest: inside running text the
+     * underline is the only non-colour cue that the run is a link, and dropping it
+     * would leave colour as the sole indicator (WCAG 1.4.1). */
     textDecoration: {
       default: "underline",
       isStandalone: {
-        isQuiet: {
-          default: "none",
-          isHovered: "underline",
-          isFocusVisible: "underline",
-        },
+        default: "none",
+        isHovered: "underline",
+        isFocusVisible: "underline",
       },
     },
     outlineColor: {

package/src/listbox/index.tsx

@@ -1,4 +1,21 @@
-import { type JSX, splitProps, createContext, useContext, Show, createUniqueId } from "solid-js";
+/*
+ * 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/ListBox.tsx
+
+// Port of packages/@react-spectrum/s2/src/ListBox.tsx.
+
+import { createContext, useContext, Show, createUniqueId } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   ListBox as HeadlessListBox,
   ListBoxOption as HeadlessListBoxOption,
@@ -12,6 +29,7 @@ import {
 import type { Key } from "@proyecto-viviana/solid-stately";
 import { useProviderProps } from "../provider";
 import { style, focusRing } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type ListBoxSize = "sm" | "md" | "lg";
 
@@ -113,7 +131,7 @@ const optionStyles = style<ListBoxOptionRenderProps & { size: ListBoxSize }>({
     default: "neutral-subdued",
     isHovered: "neutral",
     isFocused: "neutral",
-    isSelected: "accent",
+    isSelected: "[var(--text-link)]",
     isDisabled: "disabled",
   },
 });
@@ -127,7 +145,7 @@ const optionIconStyles = style<{ size: ListBoxSize }>({
 
 const checkmarkStyles = style<{ size: ListBoxSize }>({
   flexShrink: 0,
-  color: "accent",
+  color: "[var(--text-link)]",
   width: { size: { sm: 16, md: 20, lg: 24 } },
   height: { size: { sm: 16, md: 20, lg: 24 } },
 });
@@ -210,7 +228,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
       .join(" ") || undefined;
 
   return (
-    <ListBoxSizeContext.Provider value={size}>
+    <ListBoxSizeContext value={size}>
       <div class={fieldStyles}>
         <Show when={local.label}>
           <span id={labelId} class={labelStyles({ size })}>
@@ -232,7 +250,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
           </span>
         </Show>
       </div>
-    </ListBoxSizeContext.Provider>
+    </ListBoxSizeContext>
   );
 }