@lo-ink/ui 0.4.1 → 0.4.3

package/dist/Button.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { classes } from "./utils.js";
 export const Button = forwardRef(function Button({ variant = "primary", size = "medium", loading = false, loadingLabel = "Loading", fullWidth = false, leading, trailing, className, disabled, children, type = "button", ...props }, ref) {
-    return (_jsx("button", { ...props, ref: ref, type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: classes("lo-ui-button", `lo-ui-button--${variant}`, `lo-ui-button--${size}`, fullWidth && "lo-ui-button--full", className), children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "lo-ui-spinner", "aria-hidden": "true" }), _jsx("span", { children: loadingLabel })] })) : (_jsxs(_Fragment, { children: [leading && _jsx("span", { className: "lo-ui-button__icon", children: leading }), _jsx("span", { children: children }), trailing && _jsx("span", { className: "lo-ui-button__icon", children: trailing })] })) }));
+    return (_jsx("button", { ...props, ref: ref, type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: classes("lo-ui-button", `lo-ui-button--${variant}`, `lo-ui-button--${size}`, fullWidth && "lo-ui-button--full", className), children: loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "lo-ui-spinner", "aria-hidden": "true" }), _jsx("span", { className: "lo-ui-button__label", children: loadingLabel })] })) : (_jsxs(_Fragment, { children: [leading && _jsx("span", { className: "lo-ui-button__icon", children: leading }), _jsx("span", { className: "lo-ui-button__label", children: children }), trailing && _jsx("span", { className: "lo-ui-button__icon", children: trailing })] })) }));
 });

package/dist/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,EACb,EAAE,EAAE,UAAU,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BA8EX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,EACb,EAAE,EAAE,UAAU,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BAkFX"}

package/dist/Tabs.js

@@ -9,6 +9,8 @@ export function Tabs({ options, value, onValueChange, id: providedId, className,
     const focusValue = options.some((option) => option.value === value && !option.disabled)
         ? value
         : options.find((option) => !option.disabled)?.value;
+    // Recreated arrays and labels must not override a user's manual scrolling.
+    const optionStructure = JSON.stringify(options.map((option) => [option.value, Boolean(option.disabled)]));
     useEffect(() => {
         const selected = row.current?.querySelector('[aria-selected="true"]');
         if (!selected || !row.current)
@@ -20,7 +22,7 @@ export function Tabs({ options, value, onValueChange, id: providedId, className,
             viewport.scrollLeft += bounds.left - visible.left;
         else if (bounds.right > visible.right)
             viewport.scrollLeft += bounds.right - visible.right;
-    }, [value, options]);
+    }, [value, optionStructure]);
     return (_jsx("div", { ...props, id: id, ref: row, role: "tablist", "aria-orientation": "horizontal", className: classes("lo-ui-tabs", className), children: options.map((option, index) => (_jsx("button", { id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": option.value === value, "aria-controls": option.panelId, tabIndex: option.value === focusValue ? 0 : -1, disabled: option.disabled, className: "lo-ui-tab", onClick: () => onValueChange(option.value), onKeyDown: (event) => {
                 if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
                     return;

package/dist/styles.css

@@ -112,7 +112,13 @@
   background: transparent;
 }
 
+.lo-ui-button__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .lo-ui-button__icon {
+  flex: 0 0 auto;
   width: 20px;
   height: 20px;
   display: inline-grid;
@@ -327,6 +333,10 @@
   transform: translateX(20px);
 }
 
+.lo-ui-switch:dir(rtl):checked::after {
+  transform: translateX(-20px);
+}
+
 .lo-ui-switch:disabled {
   cursor: default;
   opacity: 0.55;
@@ -356,7 +366,8 @@
   transition: transform var(--lo-motion-fast) var(--lo-ease-out);
 }
 
-.lo-ui-checkbox:checked {
+.lo-ui-checkbox:checked,
+.lo-ui-checkbox:indeterminate {
   background: var(--lo-color-accent-fill);
   border-color: var(--lo-color-accent-fill);
 }
@@ -370,6 +381,12 @@
   transform: translateY(-1px) rotate(-45deg) scale(1);
 }
 
+.lo-ui-checkbox:indeterminate::after {
+  height: 0;
+  border-width: 0 0 2px;
+  transform: none;
+}
+
 .lo-ui-list-section {
   display: flex;
   flex-direction: column;
@@ -710,6 +727,57 @@
   border-radius: var(--lo-radius-full);
 }
 
+@media (forced-colors: active) {
+  .lo-ui-switch,
+  .lo-ui-checkbox {
+    forced-color-adjust: none;
+    background: Canvas;
+    border: 1px solid ButtonText;
+    --lo-color-focus: ButtonText;
+  }
+
+  .lo-ui-switch {
+    padding: 1px;
+  }
+
+  .lo-ui-switch::after {
+    background: ButtonText;
+    box-shadow: none;
+  }
+
+  .lo-ui-switch:checked,
+  .lo-ui-checkbox:checked,
+  .lo-ui-checkbox:indeterminate {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .lo-ui-switch:checked::after {
+    background: HighlightText;
+  }
+
+  .lo-ui-checkbox::after {
+    border-color: HighlightText;
+  }
+
+  .lo-ui-tab[aria-selected="true"] {
+    forced-color-adjust: none;
+    color: HighlightText;
+    --lo-color-focus: ButtonText;
+  }
+
+  .lo-ui-tab[aria-selected="true"]::before {
+    background: Highlight;
+  }
+
+  .lo-ui-progress {
+    forced-color-adjust: none;
+    border: 1px solid CanvasText;
+    --lo-color-border: Canvas;
+    --lo-color-accent: Highlight;
+  }
+}
+
 :where(.lo-ui-root code, .lo-ui-root pre) {
   font-family: var(--lo-font-family-mono);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Accessible React components for LO miniapps",
   "type": "module",
   "license": "MIT",

package/src/Button.tsx

@@ -47,12 +47,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {loading ? (
           <>
             <span className="lo-ui-spinner" aria-hidden="true" />
-            <span>{loadingLabel}</span>
+            <span className="lo-ui-button__label">{loadingLabel}</span>
           </>
         ) : (
           <>
             {leading && <span className="lo-ui-button__icon">{leading}</span>}
-            <span>{children}</span>
+            <span className="lo-ui-button__label">{children}</span>
             {trailing && <span className="lo-ui-button__icon">{trailing}</span>}
           </>
         )}

package/src/Tabs.tsx

@@ -39,6 +39,10 @@ export function Tabs({
   )
     ? value
     : options.find((option) => !option.disabled)?.value;
+  // Recreated arrays and labels must not override a user's manual scrolling.
+  const optionStructure = JSON.stringify(
+    options.map((option) => [option.value, Boolean(option.disabled)]),
+  );
   useEffect(() => {
     const selected = row.current?.querySelector<HTMLElement>(
       '[aria-selected="true"]',
@@ -51,7 +55,7 @@ export function Tabs({
       viewport.scrollLeft += bounds.left - visible.left;
     else if (bounds.right > visible.right)
       viewport.scrollLeft += bounds.right - visible.right;
-  }, [value, options]);
+  }, [value, optionStructure]);
   return (
     <div
       {...props}

package/src/styles.css

@@ -112,7 +112,13 @@
   background: transparent;
 }
 
+.lo-ui-button__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .lo-ui-button__icon {
+  flex: 0 0 auto;
   width: 20px;
   height: 20px;
   display: inline-grid;
@@ -327,6 +333,10 @@
   transform: translateX(20px);
 }
 
+.lo-ui-switch:dir(rtl):checked::after {
+  transform: translateX(-20px);
+}
+
 .lo-ui-switch:disabled {
   cursor: default;
   opacity: 0.55;
@@ -356,7 +366,8 @@
   transition: transform var(--lo-motion-fast) var(--lo-ease-out);
 }
 
-.lo-ui-checkbox:checked {
+.lo-ui-checkbox:checked,
+.lo-ui-checkbox:indeterminate {
   background: var(--lo-color-accent-fill);
   border-color: var(--lo-color-accent-fill);
 }
@@ -370,6 +381,12 @@
   transform: translateY(-1px) rotate(-45deg) scale(1);
 }
 
+.lo-ui-checkbox:indeterminate::after {
+  height: 0;
+  border-width: 0 0 2px;
+  transform: none;
+}
+
 .lo-ui-list-section {
   display: flex;
   flex-direction: column;
@@ -710,6 +727,57 @@
   border-radius: var(--lo-radius-full);
 }
 
+@media (forced-colors: active) {
+  .lo-ui-switch,
+  .lo-ui-checkbox {
+    forced-color-adjust: none;
+    background: Canvas;
+    border: 1px solid ButtonText;
+    --lo-color-focus: ButtonText;
+  }
+
+  .lo-ui-switch {
+    padding: 1px;
+  }
+
+  .lo-ui-switch::after {
+    background: ButtonText;
+    box-shadow: none;
+  }
+
+  .lo-ui-switch:checked,
+  .lo-ui-checkbox:checked,
+  .lo-ui-checkbox:indeterminate {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .lo-ui-switch:checked::after {
+    background: HighlightText;
+  }
+
+  .lo-ui-checkbox::after {
+    border-color: HighlightText;
+  }
+
+  .lo-ui-tab[aria-selected="true"] {
+    forced-color-adjust: none;
+    color: HighlightText;
+    --lo-color-focus: ButtonText;
+  }
+
+  .lo-ui-tab[aria-selected="true"]::before {
+    background: Highlight;
+  }
+
+  .lo-ui-progress {
+    forced-color-adjust: none;
+    border: 1px solid CanvasText;
+    --lo-color-border: Canvas;
+    --lo-color-accent: Highlight;
+  }
+}
+
 :where(.lo-ui-root code, .lo-ui-root pre) {
   font-family: var(--lo-font-family-mono);
 }