@unofficialbox/box-open-elements 0.1.0 → 0.2.1

package/README.md

@@ -116,6 +116,7 @@ The docs index is at [docs/README.md](./docs/README.md). The most important entr
 - [Taxonomy](./docs/taxonomy.md)
 - [Architecture](./docs/architecture.md)
 - [API Guidelines](./docs/api-guidelines.md)
+- [Using with React, Angular, Vue, and Svelte](./docs/integration/frameworks.md)
 - [Design Tokens](./docs/foundations/tokens.md)
 - [Content Explorer](./docs/patterns/content-explorer.md)
 - [Box Server Integration](./docs/integration/box-server.md)

package/dist/patterns/content-explorer/adapters/table.js

@@ -17,6 +17,10 @@ const elementStyles = `
           display: block;
           color: inherit;
           font: inherit;
+          /* The table's header row is nowrap, so its min-content width is wide.
+             Without this the host refuses to shrink below that width and pushes
+             out of grid/flex containers instead of scrolling. */
+          min-width: 0;
         }
 
         [part="table-shell"] {
@@ -24,7 +28,10 @@ const elementStyles = `
           border-radius: ${boePanel.radius};
           background: var(--boe-token-surface-surface, #ffffff);
           box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-          overflow: hidden;
+          /* Scroll the table within its own frame when the host is narrower
+             than the table's intrinsic width. */
+          overflow-x: auto;
+          overflow-y: hidden;
         }
 
         [part="table-shell"][aria-busy="true"] {

package/dist/patterns/search/filter-bar.js

@@ -13,6 +13,9 @@ const elementStyles = `
           display: block;
           color: inherit;
           font: inherit;
+          /* Let the host shrink below its controls' intrinsic width when a
+             container constrains it. */
+          min-width: 0;
           --_obp-surface: var(--boe-token-surface-surface, #ffffff);
           --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
           --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
@@ -38,9 +41,17 @@ const elementStyles = `
           text-transform: uppercase;
         }
 
+        /* Zero track floors, not fixed rem floors. The columns still size to
+           their content (so a shrink-to-fit host keeps the three-up layout at
+           its natural width) but can compress when a container constrains the
+           bar, instead of forcing the host wider than its container.
+           auto-fit was rejected: it collapses to one column whenever the host
+           is shrink-to-fit. A container query was too: container-type makes
+           the host's width independent of its content, which collapses the bar
+           anywhere it isn't explicitly stretched. */
         [part="controls"] {
           display: grid;
-          grid-template-columns: minmax(14rem, 1.4fr) repeat(2, minmax(10rem, 0.8fr));
+          grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
           gap: ${boePanel.gap};
           align-items: center;
         }
@@ -100,11 +111,6 @@ const elementStyles = `
           color: var(--_obp-brand);
         }
 
-        @media (max-width: 900px) {
-          [part="controls"] {
-            grid-template-columns: 1fr;
-          }
-        }
       `;
 export class BoxFilterBarElement extends BaseElement {
     static get observedAttributes() {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
-  "homepage": "https://components.unofficialbox.dev",
+  "homepage": "https://unofficialbox.github.io/box-open-elements",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/unofficialbox/box-open-elements.git"

package/dist/foundations/typography/index.d.ts

@@ -1,2 +0,0 @@
-export { boeFontFamily, boeType, boeTypeStyles, boeTypographyHostDeclaration, } from "./tokens.js";
-export type { BoeTypeRole } from "./tokens.js";

package/dist/foundations/typography/index.js

@@ -1 +0,0 @@
-export { boeFontFamily, boeType, boeTypeStyles, boeTypographyHostDeclaration, } from "./tokens.js";

package/dist/foundations/typography/tokens.d.ts

@@ -1,76 +0,0 @@
-/** Authoritative modern Box typography stack. Lato belongs to legacy BUE only. */
-export declare const boeFontFamily: {
-    readonly base: "var(--boe-token-font-family-base, InterVariable, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif)";
-    readonly fallback: "InterVariable, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif";
-};
-export interface BoeTypeRole {
-    fontSize: string;
-    fontWeight: 400 | 500 | 600 | 700;
-    letterSpacing: string;
-    lineHeight: string;
-}
-/** Product type roles derived from the current Box measurements in the visual reference contract. */
-export declare const boeType: {
-    readonly pageHeading: {
-        readonly fontSize: "21px";
-        readonly lineHeight: "32px";
-        readonly fontWeight: 700;
-        readonly letterSpacing: "-0.01em";
-    };
-    readonly dialogHeading: {
-        readonly fontSize: "19px";
-        readonly lineHeight: "24px";
-        readonly fontWeight: 700;
-        readonly letterSpacing: "-0.005em";
-    };
-    readonly sectionHeading: {
-        readonly fontSize: "16px";
-        readonly lineHeight: "24px";
-        readonly fontWeight: 700;
-        readonly letterSpacing: "0";
-    };
-    readonly button: {
-        readonly fontSize: "16px";
-        readonly lineHeight: "24px";
-        readonly fontWeight: 700;
-        readonly letterSpacing: "0";
-    };
-    readonly menuItem: {
-        readonly fontSize: "15px";
-        readonly lineHeight: "20px";
-        readonly fontWeight: 400;
-        readonly letterSpacing: "0";
-    };
-    readonly body: {
-        readonly fontSize: "14px";
-        readonly lineHeight: "20px";
-        readonly fontWeight: 400;
-        readonly letterSpacing: "0";
-    };
-    readonly bodyStrong: {
-        readonly fontSize: "14px";
-        readonly lineHeight: "20px";
-        readonly fontWeight: 600;
-        readonly letterSpacing: "0";
-    };
-    readonly label: {
-        readonly fontSize: "13px";
-        readonly lineHeight: "20px";
-        readonly fontWeight: 600;
-        readonly letterSpacing: "0";
-    };
-    readonly metadata: {
-        readonly fontSize: "12px";
-        readonly lineHeight: "16px";
-        readonly fontWeight: 400;
-        readonly letterSpacing: "0";
-    };
-    readonly caption: {
-        readonly fontSize: "11px";
-        readonly lineHeight: "16px";
-        readonly fontWeight: 600;
-        readonly letterSpacing: "0";
-    };
-};
-export declare const boeTypographyHostDeclaration: string;
-export declare const boeTypeStyles: (selector: string, role: BoeTypeRole) => string;

package/dist/foundations/typography/tokens.js

@@ -1,27 +0,0 @@
-/** Authoritative modern Box typography stack. Lato belongs to legacy BUE only. */
-export const boeFontFamily = {
-    base: "var(--boe-token-font-family-base, InterVariable, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif)",
-    fallback: "InterVariable, Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif",
-};
-/** Product type roles derived from the current Box measurements in the visual reference contract. */
-export const boeType = {
-    pageHeading: { fontSize: "21px", lineHeight: "32px", fontWeight: 700, letterSpacing: "-0.01em" },
-    dialogHeading: { fontSize: "19px", lineHeight: "24px", fontWeight: 700, letterSpacing: "-0.005em" },
-    sectionHeading: { fontSize: "16px", lineHeight: "24px", fontWeight: 700, letterSpacing: "0" },
-    button: { fontSize: "16px", lineHeight: "24px", fontWeight: 700, letterSpacing: "0" },
-    menuItem: { fontSize: "15px", lineHeight: "20px", fontWeight: 400, letterSpacing: "0" },
-    body: { fontSize: "14px", lineHeight: "20px", fontWeight: 400, letterSpacing: "0" },
-    bodyStrong: { fontSize: "14px", lineHeight: "20px", fontWeight: 600, letterSpacing: "0" },
-    label: { fontSize: "13px", lineHeight: "20px", fontWeight: 600, letterSpacing: "0" },
-    metadata: { fontSize: "12px", lineHeight: "16px", fontWeight: 400, letterSpacing: "0" },
-    caption: { fontSize: "11px", lineHeight: "16px", fontWeight: 600, letterSpacing: "0" },
-};
-export const boeTypographyHostDeclaration = `font-family: ${boeFontFamily.base};`;
-export const boeTypeStyles = (selector, role) => `
-  ${selector} {
-    font-size: ${role.fontSize};
-    line-height: ${role.lineHeight};
-    font-weight: ${role.fontWeight};
-    letter-spacing: ${role.letterSpacing};
-  }
-`;