@lessly/ui 4.1.0 → 4.1.1

package/README.md

@@ -135,6 +135,14 @@ import '@lessly/ui/styles-federated.css';
 The shell keeps importing `@lessly/ui/styles.css`; it owns the fonts and the
 base layer.
 
+The preset is not optional on this path either, and installing it is not the
+same as reaching it: Tailwind v4 has no `presets:` key, so **both** entries —
+federation and standalone — need `@config`, and one that lacks it compiles to
+Tailwind's defaults with no error anywhere. What each sheet carries, why the
+federated one declares its variables at zero specificity, and why
+`theme(reference)` is not the fix are in
+[`docs/federated-styles.md`](docs/federated-styles.md).
+
 ## Storybook
 
 ```bash

package/dist/index.js

@@ -384,7 +384,7 @@ var Input = React5.forwardRef(
         {
           className: cn(
             FIELD_BOX,
-            "items-center gap-1.5 focus-within:ring-2 focus-within:ring-border-focus has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
+            "items-center gap-1.5 focus-within:ring-2 focus-within:ring-inset focus-within:ring-border-focus has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
             className
           ),
           children: [
@@ -410,7 +410,7 @@ var Input = React5.forwardRef(
         style,
         className: cn(
           FIELD_BOX,
-          "file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ref,
@@ -431,7 +431,7 @@ var InputGroup = React6.forwardRef(
       ref,
       className: cn(
         "flex h-10 w-full items-stretch overflow-hidden rounded-md border border-border-default bg-bg-primary text-sm text-text-primary",
-        "focus-within:ring-2 focus-within:ring-border-focus",
+        "focus-within:ring-2 focus-within:ring-inset focus-within:ring-border-focus",
         "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
         className
       ),
@@ -611,7 +611,7 @@ function Select({
         "aria-labelledby": ariaLabelledby,
         disabled,
         className: cn(
-          "flex items-center text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "flex items-center text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
           quiet ? (
             // No border at all, so there is no filled step to paint: what a row's control has to
             // say is its value, and the hover fill is what says it can be pressed.
@@ -823,7 +823,7 @@ var Textarea = React13.forwardRef(
       {
         ref,
         className: cn(
-          "flex min-h-20 w-full rounded-md border border-field-border hover:border-field-border-hover bg-bg-primary px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-20 w-full rounded-md border border-field-border hover:border-field-border-hover bg-bg-primary px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
           className
         ),
         ...props
@@ -4685,7 +4685,7 @@ var triggerBox = "flex min-h-[40px] w-full items-center gap-2.5 rounded-xl px-1.
 var inlineTriggerBox = "flex items-center gap-1.5 rounded-lg px-2 py-1 text-sm font-semibold text-text-primary transition-colors duration-fast hover:bg-[var(--hov-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
 var menuItem = "gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-text-secondary focus:bg-[var(--menu-hov)] focus:text-text-primary";
 var sectionLabel = "px-2 pt-1.5 pb-1 text-xs font-medium text-text-tertiary";
-var searchBox = "mx-1 mb-1 flex h-8 shrink-0 items-center gap-2 rounded-md border border-field-border bg-bg-primary px-2 focus-within:ring-2 focus-within:ring-border-focus";
+var searchBox = "mx-1 mb-1 flex h-8 shrink-0 items-center gap-2 rounded-md border border-field-border bg-bg-primary px-2 focus-within:ring-2 focus-within:ring-inset focus-within:ring-border-focus";
 var rowScroller = "flex max-h-[18rem] min-h-0 flex-col gap-px overflow-y-auto overscroll-contain";
 var NO_ORG_LABEL = "Select an organization\u2026";
 var nameOf = (item) => item?.name.trim() ? item.name : void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",