@openwarelabs/ui 0.10.1 → 0.11.1

package/dist/components/Container/Container.d.cts

@@ -0,0 +1,7 @@
+import type { ContainerProps } from "./Container.types.cjs";
+export type { ContainerProps, ContainerSize } from "./Container.types.cjs";
+/**
+ * Centres content at a set width with the page's side margins: 32px, and the phone gutter under 760px. Every block
+ * lines its content up the same way, so whatever sits in a Container lines up with the blocks above and below it.
+ */
+export declare function Container({ size, as: Element, className, ...props }: ContainerProps): import("react").JSX.Element;

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,7 @@
+import type { ContainerProps } from "./Container.types.js";
+export type { ContainerProps, ContainerSize } from "./Container.types.js";
+/**
+ * Centres content at a set width with the page's side margins: 32px, and the phone gutter under 760px. Every block
+ * lines its content up the same way, so whatever sits in a Container lines up with the blocks above and below it.
+ */
+export declare function Container({ size, as: Element, className, ...props }: ContainerProps): import("react").JSX.Element;

package/dist/components/Container/Container.types.d.cts

@@ -0,0 +1,12 @@
+import type { ElementType, HTMLAttributes } from "react";
+export type ContainerSize = "narrow" | "page" | "wide" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * How wide the content can get: `page` is the blocks' width (1200px), `narrow` a reading width for an article or
+     * a form (720px), `wide` room for a dashboard or a big table (1440px), `full` no cap, only the side margins.
+     * @default "page"
+     */
+    size?: ContainerSize;
+    /** The element to render, such as `main` or `section`. @default "div" */
+    as?: ElementType;
+}

package/dist/components/Container/Container.types.d.ts

@@ -0,0 +1,12 @@
+import type { ElementType, HTMLAttributes } from "react";
+export type ContainerSize = "narrow" | "page" | "wide" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * How wide the content can get: `page` is the blocks' width (1200px), `narrow` a reading width for an article or
+     * a form (720px), `wide` room for a dashboard or a big table (1440px), `full` no cap, only the side margins.
+     * @default "page"
+     */
+    size?: ContainerSize;
+    /** The element to render, such as `main` or `section`. @default "div" */
+    as?: ElementType;
+}

package/dist/components/Section/Section.d.cts

@@ -0,0 +1,7 @@
+import type { SectionProps } from "./Section.types.cjs";
+export type { SectionProps } from "./Section.types.cjs";
+/**
+ * A full-width band of a page, with the blocks' space above and below and their width and side margins inside (a
+ * Container). Your own sections then sit in line with the blocks around them.
+ */
+export declare function Section({ tone, spacing, size, as: Element, className, children, ...props }: SectionProps): import("react").JSX.Element;

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,7 @@
+import type { SectionProps } from "./Section.types.js";
+export type { SectionProps } from "./Section.types.js";
+/**
+ * A full-width band of a page, with the blocks' space above and below and their width and side margins inside (a
+ * Container). Your own sections then sit in line with the blocks around them.
+ */
+export declare function Section({ tone, spacing, size, as: Element, className, children, ...props }: SectionProps): import("react").JSX.Element;

package/dist/components/Section/Section.types.d.cts

@@ -0,0 +1,16 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { ContainerSize } from "../Container/Container.types.cjs";
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The band's ground: `paper` for marketing pages, as the blocks use; `canvas` for the app's grey; `surface` for a
+     * white band that stands out from the paper; `none` to show what's behind it.
+     * @default "paper"
+     */
+    tone?: "paper" | "canvas" | "surface" | "none";
+    /** The space above and below: `md` is a block's (96px, 72px on phones), `sm` half that. @default "md" */
+    spacing?: "sm" | "md" | "none";
+    /** How wide the content inside can get, as for Container. `false` leaves the content full width, without one. @default "page" */
+    size?: ContainerSize | false;
+    /** The element to render. @default "section" */
+    as?: ElementType;
+}

package/dist/components/Section/Section.types.d.ts

@@ -0,0 +1,16 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { ContainerSize } from "../Container/Container.types.js";
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The band's ground: `paper` for marketing pages, as the blocks use; `canvas` for the app's grey; `surface` for a
+     * white band that stands out from the paper; `none` to show what's behind it.
+     * @default "paper"
+     */
+    tone?: "paper" | "canvas" | "surface" | "none";
+    /** The space above and below: `md` is a block's (96px, 72px on phones), `sm` half that. @default "md" */
+    spacing?: "sm" | "md" | "none";
+    /** How wide the content inside can get, as for Container. `false` leaves the content full width, without one. @default "page" */
+    size?: ContainerSize | false;
+    /** The element to render. @default "section" */
+    as?: ElementType;
+}

package/dist/components.css

@@ -1999,7 +1999,8 @@
 
 .ow-slider__control {
     position: relative;
-    height: 20px;
+    /* 24px tall so each handle's input is a big enough target to tap (WCAG 2.2 target size). */
+    height: 24px;
 }
 
 /* The track runs between the thumb's centre at each end (9px in), so the fill meets the thumb exactly. */
@@ -2045,12 +2046,12 @@
 }
 
 .ow-slider__input::-webkit-slider-runnable-track {
-    height: 20px;
+    height: 24px;
     background: transparent;
 }
 
 .ow-slider__input::-moz-range-track {
-    height: 20px;
+    height: 24px;
     background: transparent;
 }
 
@@ -2058,7 +2059,7 @@
     box-sizing: border-box;
     width: 18px;
     height: 18px;
-    margin-top: 1px;
+    margin-top: 3px;
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
@@ -6208,6 +6209,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 {