@openwarelabs/ui 0.10.0 → 0.11.0

package/dist/styles.css

@@ -268,7 +268,10 @@
     --ow-space-6xl: 26px;
     --ow-space-7xl: 28px;
     --ow-page-max: 1200px;
+    --ow-page-narrow: 720px;
+    --ow-page-wide: 1440px;
     --ow-page-gutter: 20px;
+    --ow-page-gutter-wide: 32px;
     --ow-header-height: 56px;
     --ow-section-y: 96px;
     --ow-radius-sm: 4px;
@@ -1652,7 +1655,14 @@
 }
 
 .ow-date-field__segment {
+    /* At least 24px each way, the smallest a pointer target may be (WCAG 2.2, 2.5.8). */
+    box-sizing: border-box;
+    display: inline-flex;
+    min-width: 24px;
+    min-height: 24px;
     flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     border-radius: var(--ow-radius-sm);
     padding: 2px;
     color: var(--ow-text);
@@ -1664,6 +1674,11 @@
     transition-timing-function: var(--ow-ease-standard);
 }
 
+.ow-date-field__segment[data-segment="0"] {
+    /* The first, often one digit ("6:12"), keeps to the separator after it; the spare width goes before it. */
+    justify-content: flex-end;
+}
+
 .ow-date-field__segment::selection {
     background: transparent;
 }
@@ -5511,6 +5526,10 @@
     line-height: 1;
 }
 
+.ow-avatar[data-initials]::before {
+    content: attr(data-initials);
+}
+
 .ow-avatar--empty {
     background: var(--ow-avatar-empty);
     color: var(--ow-on-avatar-empty);
@@ -6623,6 +6642,73 @@
     outline-offset: 2px;
 }
 
+/* components/Container/Container.css */
+/* The page's width and side margins, the same as every block's: the content is at most the size's width, inside a
+   32px gutter (the phone gutter under 760px). */
+
+.ow-container {
+    box-sizing: border-box;
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: var(--ow-page-gutter-wide);
+}
+
+.ow-container--page {
+    max-width: calc(var(--ow-page-max) + 2 * var(--ow-page-gutter-wide));
+}
+
+.ow-container--narrow {
+    max-width: calc(var(--ow-page-narrow) + 2 * var(--ow-page-gutter-wide));
+}
+
+.ow-container--wide {
+    max-width: calc(var(--ow-page-wide) + 2 * var(--ow-page-gutter-wide));
+}
+
+@media (max-width: 760px) {
+    .ow-container {
+        padding-inline: var(--ow-page-gutter);
+    }
+}
+
+/* components/Section/Section.css */
+/* A band of the page: a block's vertical space and ground, full width. Its Container sets the width inside. */
+
+.ow-section {
+    box-sizing: border-box;
+    width: 100%;
+    color: var(--ow-text);
+}
+
+.ow-section--paper {
+    background: var(--ow-paper);
+}
+
+.ow-section--canvas {
+    background: var(--ow-canvas);
+}
+
+.ow-section--surface {
+    background: var(--ow-surface);
+}
+
+.ow-section--space-md {
+    padding-block: var(--ow-section-y);
+}
+
+.ow-section--space-sm {
+    padding-block: calc(var(--ow-section-y) / 2);
+}
+
+@media (max-width: 760px) {
+    .ow-section--space-md {
+        padding-block: 72px;
+    }
+    .ow-section--space-sm {
+        padding-block: 36px;
+    }
+}
+
 /* components/Marketing/Marketing.css */
 /* Marketing patterns from the site: Chip, SectionHeading, SiteHeader and the dot grid. */
 .ow-chip {

package/dist/tokens.css

@@ -268,7 +268,10 @@
     --ow-space-6xl: 26px;
     --ow-space-7xl: 28px;
     --ow-page-max: 1200px;
+    --ow-page-narrow: 720px;
+    --ow-page-wide: 1440px;
     --ow-page-gutter: 20px;
+    --ow-page-gutter-wide: 32px;
     --ow-header-height: 56px;
     --ow-section-y: 96px;
     --ow-radius-sm: 4px;

package/dist/tokens.json

@@ -900,11 +900,26 @@
         "value": "1200px",
         "usage": "Marketing pages' content width cap."
       },
+      {
+        "name": "ow-page-narrow",
+        "value": "720px",
+        "usage": "Reading width: an article, a form, a settings page (Container size narrow)."
+      },
+      {
+        "name": "ow-page-wide",
+        "value": "1440px",
+        "usage": "Wide pages that need room: dashboards and big tables (Container size wide)."
+      },
       {
         "name": "ow-page-gutter",
         "value": "20px",
         "usage": "Page side gutter on phones; 32px from 768px up."
       },
+      {
+        "name": "ow-page-gutter-wide",
+        "value": "32px",
+        "usage": "Page side gutter from 760px up, as every block and Container uses."
+      },
       {
         "name": "ow-header-height",
         "value": "56px",

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@openwarelabs/ui",
-  "version": "0.10.0",
+  "version": "0.11.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",
-  "homepage": "https://github.com/openwarelabs/ui#readme",
+  "homepage": "https://openwarelabs.github.io/ui/",
   "bugs": {
     "url": "https://github.com/openwarelabs/ui/issues"
   },
@@ -68,7 +68,7 @@
   "dependencies": {
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource-variable/inter": "^5.3.0",
-    "react-colorful": "5.6.1",
+    "react-colorful": "5.8.1",
     "sonner": "^2.0.8"
   },
   "devDependencies": {
@@ -78,7 +78,7 @@
     "@types/react-dom": "^18.3.1",
     "axe-core": "^4.14.0",
     "culori": "^4.0.1",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.28.2",
     "eslint": "^10.12.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "lucide-react": "^1.48.0",