@openwarelabs/ui 0.1.1 → 0.2.0

package/dist/styles.css

@@ -82,6 +82,7 @@
     --ow-key-ground: var(--ow-gray-50);
     --ow-track: var(--ow-gray-100);
     --ow-thumb: #ffffff;
+    --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
     --ow-code-block: #15171c;
@@ -158,6 +159,7 @@
     --ow-key-ground: #22262e;
     --ow-track: #14161b;
     --ow-thumb: #2f3541;
+    --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
     --ow-code-block-border: #2c313a;
@@ -230,6 +232,7 @@
         --ow-key-ground: #22262e;
         --ow-track: #14161b;
         --ow-thumb: #2f3541;
+        --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
         --ow-code-block-border: #2c313a;
@@ -467,6 +470,7 @@
    back into it. useFloating sets data-side and --ow-floating-origin; usePresence sets data-state. */
 .ow-floating {
     --ow-floating-shift: -4px;
+    --ow-floating-shift-x: 0px;
     transform-origin: var(--ow-floating-origin, top center);
 }
 
@@ -474,6 +478,16 @@
     --ow-floating-shift: 4px;
 }
 
+.ow-floating[data-side="left"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: 4px;
+}
+
+.ow-floating[data-side="right"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: -4px;
+}
+
 .ow-floating[data-state="open"] {
     animation: ow-floating-in var(--ow-duration-base) var(--ow-ease-emphasized);
 }
@@ -486,14 +500,14 @@
 @keyframes ow-floating-in {
     from {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.96);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.96);
     }
 }
 
 @keyframes ow-floating-out {
     to {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.97);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.97);
     }
 }
 
@@ -922,6 +936,8 @@
     border-radius: var(--ow-radius-container);
     background: var(--ow-track);
     padding: var(--ow-space-2xs);
+    /* A hairline edge, so the well shows on the canvas as well as on a surface. */
+    box-shadow: inset 0 0 0 1px var(--ow-border);
 }
 
 .ow-segmented--full {
@@ -1225,6 +1241,8 @@
 .ow-input-group {
     display: flex;
     width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
     height: 40px;
     align-items: center;
     gap: var(--ow-space-sm);
@@ -1271,6 +1289,8 @@
 }
 
 .ow-input-group__input {
+    /* A percentage width lets the field's minimum size come from its start and end content alone. */
+    width: 100%;
     min-width: 0;
     height: 100%;
     flex: 1;
@@ -1877,7 +1897,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ow-radius-pill);
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: var(--ow-shadow-control);
     transform: translateX(2px);
     transition:
@@ -1899,7 +1919,7 @@
 }
 
 /* components/Slider/Slider.css */
-/* Slider: native range inputs over a drawn track. The thumb is the switch's knob: white, round, with a soft shadow. */
+/* Slider: native range inputs over a drawn track. The thumb is the switch's knob (ow-knob): round, with a soft shadow. */
 .ow-slider {
     display: grid;
     gap: var(--ow-space-sm);
@@ -1990,7 +2010,7 @@
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2003,7 +2023,7 @@
     height: 18px;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2613,7 +2633,7 @@
 }
 
 /* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, above the child (or below when there's no room). */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
     display: inline-flex;
 }
@@ -4417,6 +4437,19 @@
     font-size: 13px;
 }
 
+.ow-avatar--xl {
+    width: 48px;
+    height: 48px;
+    font-size: 17px;
+}
+
+/* Any size in pixels, through --ow-avatar-size: the initials stay in proportion. */
+.ow-avatar--custom {
+    width: var(--ow-avatar-size);
+    height: var(--ow-avatar-size);
+    font-size: calc(var(--ow-avatar-size) * 0.36);
+}
+
 .ow-avatar__image {
     width: 100%;
     height: 100%;
@@ -4453,6 +4486,18 @@
     gap: var(--ow-space-md);
 }
 
+.ow-user--xl {
+    gap: var(--ow-space-lg);
+}
+
+.ow-user--xl .ow-user__name {
+    font-size: 15px;
+}
+
+.ow-user--xl .ow-user__description {
+    font-size: 13px;
+}
+
 .ow-user__text {
     display: grid;
     min-width: 0;

package/dist/tailwind.css

@@ -83,6 +83,7 @@
     --color-key-ground: var(--ow-key-ground);
     --color-track: var(--ow-track);
     --color-thumb: var(--ow-thumb);
+    --color-knob: var(--ow-knob);
     --color-meter-track: var(--ow-meter-track);
     --color-progress: var(--ow-progress);
     --color-code-block: var(--ow-code-block);

package/dist/tokens.css

@@ -82,6 +82,7 @@
     --ow-key-ground: var(--ow-gray-50);
     --ow-track: var(--ow-gray-100);
     --ow-thumb: #ffffff;
+    --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
     --ow-code-block: #15171c;
@@ -158,6 +159,7 @@
     --ow-key-ground: #22262e;
     --ow-track: #14161b;
     --ow-thumb: #2f3541;
+    --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
     --ow-code-block-border: #2c313a;
@@ -230,6 +232,7 @@
         --ow-key-ground: #22262e;
         --ow-track: #14161b;
         --ow-thumb: #2f3541;
+        --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
         --ow-code-block-border: #2c313a;

package/dist/tokens.json

@@ -556,7 +556,7 @@
           "light": "{ow-gray-100}",
           "dark": "#14161b"
         },
-        "usage": "The well behind segmented controls and segmented tabs."
+        "usage": "The well behind segmented controls and segmented tabs, edged with ow-border so it shows on the canvas too."
       },
       {
         "name": "ow-thumb",
@@ -566,6 +566,14 @@
         },
         "usage": "The selected segment in a segmented control or segmented tabs; ow-text on it."
       },
+      {
+        "name": "ow-knob",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#e4e7ec"
+        },
+        "usage": "Switch knobs and slider thumbs: white in light, a softer white in dark so it doesn't glare. Its shadow separates it from the ground."
+      },
       {
         "name": "ow-meter-track",
         "value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwarelabs/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Openware UI: React components and design tokens — midnight and brass, tactile buttons and Inter, in light and dark.",
   "license": "MIT",
   "author": "Alexander Silver",