@lo-ink/ui 0.4.2 → 0.4.4

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/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;
@@ -503,7 +520,7 @@
   overflow: hidden;
   display: inline-grid;
   place-items: center;
-  border-radius: 11px;
+  border-radius: 20%;
   color: var(--lo-color-accent-contrast);
   background: var(--lo-color-accent-fill);
   font-size: 18px;
@@ -514,14 +531,12 @@
 .lo-ui-app-icon--small {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
   font-size: 14px;
 }
 
 .lo-ui-app-icon--large {
   width: 64px;
   height: 64px;
-  border-radius: 16px;
   font-size: 26px;
 }
 
@@ -710,6 +725,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.2",
+  "version": "0.4.4",
   "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/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;
@@ -503,7 +520,7 @@
   overflow: hidden;
   display: inline-grid;
   place-items: center;
-  border-radius: 11px;
+  border-radius: 20%;
   color: var(--lo-color-accent-contrast);
   background: var(--lo-color-accent-fill);
   font-size: 18px;
@@ -514,14 +531,12 @@
 .lo-ui-app-icon--small {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
   font-size: 14px;
 }
 
 .lo-ui-app-icon--large {
   width: 64px;
   height: 64px;
-  border-radius: 16px;
   font-size: 26px;
 }
 
@@ -710,6 +725,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);
 }