@freightos/freightwind 2.1.2 → 2.1.3-host-isolation.0

package/host-isolation/webcargo.css

@@ -0,0 +1,293 @@
+/* @freightos/freightwind/host-isolation/webcargo.css ─────────────────────────
+ *
+ * Cancellation sheet for the WebCargo host's global CSS bleed into FreightWind
+ * components. Opt-in: import this only when mounting FreightWind inside the
+ * WebCargo shell. Clean hosts (e.g. freightwind-playground, partner apps with
+ * no Bootstrap layer) should NOT import this file.
+ *
+ * Why this exists
+ * ───────────────
+ * WebCargo loads `bootstrap.min.css`, `bootstrap_wcn.css`, and a ~3,000-rule
+ * `apps.php` stylesheet that target bare element names (`h1-h6`, `p`,
+ * `button`, `input`, `a`, `*`, …) with specificity 0-0-1. FreightWind 2.x
+ * intentionally skips Tailwind's global Preflight (it uses the per-element
+ * `@utility fw-base` reset). The side-effect is that host element-level
+ * rules bleed INTO FreightWind subtrees — heading margins, paragraph
+ * margins, button border-radius, focus rings, list bullets, table borders.
+ *
+ * Strategy
+ * ────────
+ * Scope a Tailwind-equivalent Preflight to a `.fw-root` ancestor. Wrap the
+ * scope class in `:where()` so it contributes ZERO specificity — the rule
+ * ties with Bootstrap's bare element selectors (0-0-1) and wins by source
+ * order (this file loads after the host). FDS class-anchored selectors
+ * (`.ant-btn`, etc.) and FreightWind utility classes (loaded via
+ * `@layer utilities important`) keep their full specificity advantage and
+ * are never affected by this reset.
+ *
+ * Usage
+ * ─────
+ *   import '@freightos/freightwind/tokens.css';
+ *   import '@freightos/freightwind/host-isolation/webcargo.css';
+ *
+ *   <div className="fw-root">
+ *     <App />
+ *   </div>
+ *
+ * Pattern is identical to Tailwind v4's official Preflight, plus a `:focus`
+ * cancellation keyed on FW's `.fw-base` per-element marker so the rule also
+ * covers FreightWind components rendered inside Radix portals (Dialog,
+ * Popover, Tooltip, DropdownMenu, Select) that mount outside `.fw-root`.
+ * ──────────────────────────────────────────────────────────────────────── */
+
+/* 1 ── Universal box model & border reset ─────────────────────────────────── */
+:where(.fw-root) *,
+:where(.fw-root) *::before,
+:where(.fw-root) *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+}
+
+/* 2 ── Block-level margins ───────────────────────────────────────────────────
+   Bootstrap adds margin-bottom to h1–h6, p, pre, blockquote, dl, dd, figure.   */
+:where(.fw-root) blockquote,
+:where(.fw-root) dl,
+:where(.fw-root) dd,
+:where(.fw-root) h1,
+:where(.fw-root) h2,
+:where(.fw-root) h3,
+:where(.fw-root) h4,
+:where(.fw-root) h5,
+:where(.fw-root) h6,
+:where(.fw-root) hr,
+:where(.fw-root) figure,
+:where(.fw-root) p,
+:where(.fw-root) pre,
+:where(.fw-root) fieldset {
+    margin: 0;
+    padding: 0;
+}
+
+/* 3 ── Headings — strip Bootstrap font-size/weight/line-height overrides ────
+   Bootstrap 4 sets h1=2.5rem, h2=2rem … h6=1rem, all with font-weight:500.
+   FreightWind components set their own heading styles via Tailwind utilities.  */
+:where(.fw-root) h1,
+:where(.fw-root) h2,
+:where(.fw-root) h3,
+:where(.fw-root) h4,
+:where(.fw-root) h5,
+:where(.fw-root) h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+}
+
+/* 4 ── Lists ─────────────────────────────────────────────────────────────────
+   Bootstrap adds margin-bottom:1rem to ol/ul and sets list-style-type.         */
+:where(.fw-root) ol,
+:where(.fw-root) ul,
+:where(.fw-root) menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* 5 ── Links — strip Bootstrap link color (#337ab7) and underline rules ─────  */
+:where(.fw-root) a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+/* 6 ── LABEL — Bootstrap sets `display:inline-block; margin-bottom:.5rem` ────
+   Resetting to `display:block; margin:0` restores the FreightWind layout.
+   FDS / Ant labels carry their own class (.ant-form-item-label, 0-1-0) and
+   beat this reset, so they keep their styling.                                 */
+:where(.fw-root) label {
+    display: block;
+    margin: 0;
+    font-weight: inherit;
+    font-size: inherit;
+}
+
+/* 7 ── Form controls ─────────────────────────────────────────────────────────
+   Bootstrap and browsers set font, margin, and padding on inputs/buttons that
+   differ from the page font. Inherit from the FW root instead.                 */
+:where(.fw-root) button,
+:where(.fw-root) input,
+:where(.fw-root) optgroup,
+:where(.fw-root) select,
+:where(.fw-root) textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+:where(.fw-root) button,
+:where(.fw-root) select {
+    text-transform: none;
+}
+
+/* Bootstrap 4 adds background gradients and border-radius to buttons. */
+:where(.fw-root) button,
+:where(.fw-root) input:where([type='button']),
+:where(.fw-root) input:where([type='reset']),
+:where(.fw-root) input:where([type='submit']) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+}
+
+:where(.fw-root) :-moz-focusring {
+    outline: auto;
+}
+
+:where(.fw-root) :-moz-ui-invalid {
+    box-shadow: none;
+}
+
+:where(.fw-root) progress {
+    vertical-align: baseline;
+}
+
+:where(.fw-root) ::-webkit-inner-spin-button,
+:where(.fw-root) ::-webkit-outer-spin-button {
+    height: auto;
+}
+
+:where(.fw-root) [type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+:where(.fw-root) ::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+:where(.fw-root) ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+:where(.fw-root) summary {
+    display: list-item;
+}
+
+/* 8 ── Tables ────────────────────────────────────────────────────────────────
+   Bootstrap adds border-spacing and td borders; collapse restores clean table. */
+:where(.fw-root) table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+}
+
+/* 9 ── Typography ────────────────────────────────────────────────────────────  */
+:where(.fw-root) b,
+:where(.fw-root) strong {
+    font-weight: bolder;
+}
+
+:where(.fw-root) code,
+:where(.fw-root) kbd,
+:where(.fw-root) samp,
+:where(.fw-root) pre {
+    font-size: 1em;
+}
+
+:where(.fw-root) small {
+    font-size: 80%;
+}
+
+:where(.fw-root) sub,
+:where(.fw-root) sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+:where(.fw-root) sub { bottom: -0.25em; }
+:where(.fw-root) sup { top: -0.5em; }
+
+/* 10 ── Media ────────────────────────────────────────────────────────────────
+   Bootstrap sets `svg { overflow:hidden; vertical-align:middle }` which is
+   inline, leaving white-space gaps. Tailwind preflight uses display:block.    */
+:where(.fw-root) img,
+:where(.fw-root) svg,
+:where(.fw-root) video,
+:where(.fw-root) canvas,
+:where(.fw-root) audio,
+:where(.fw-root) iframe,
+:where(.fw-root) embed,
+:where(.fw-root) object {
+    display: block;
+    vertical-align: middle;
+}
+
+:where(.fw-root) img,
+:where(.fw-root) video {
+    max-width: 100%;
+    height: auto;
+}
+
+/* 11 ── Misc ──────────────────────────────────────────────────────────────── */
+:where(.fw-root) textarea {
+    resize: vertical;
+}
+
+:where(.fw-root) input::placeholder,
+:where(.fw-root) textarea::placeholder {
+    opacity: 1;
+    color: #9ca3af;
+}
+
+:where(.fw-root) button,
+:where(.fw-root) [role='button'] {
+    cursor: pointer;
+}
+
+:where(.fw-root) :disabled {
+    cursor: default;
+}
+
+:where(.fw-root) [hidden]:not([hidden='until-found']) {
+    display: none;
+}
+
+/* 12 ── Cancel host `:focus` bleed-through ──────────────────────────────────
+   Bootstrap sets `button:focus { outline: 5px auto -webkit-focus-ring-color }`
+   and `.btn:focus { box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) }`. Both
+   target generic focusable elements and beat FreightWind utilities that
+   don't explicitly counter the property.
+
+   We *cancel* the host bleed without imposing a replacement ring — that
+   would hardcode an outline style at the isolation layer and drift from
+   FreightWind's own focus tokens whenever FW evolves. Two clean outcomes:
+
+   1. FW components carry `focus-visible:outline-none focus-visible:ring-*`
+      utilities loaded via `@layer utilities important` (so `!important`).
+      Those utilities beat this reset and FW components render their own
+      ring exactly as the design system specifies.                          ✓
+   2. Native / non-FW focusables fall back to the browser's UA
+      `:focus-visible` default — never visually out-of-sync with FW because
+      we never set a competing value.                                       ✓
+
+   The `.fw-base:focus` arm catches FW components rendered inside Radix
+   portals (Dialog, Popover, Tooltip, DropdownMenu, Select) — those mount
+   under `<body>` outside `.fw-root`, so a scope-only rule would miss them.
+   `.fw-base` travels with every FW-rendered native element.                  */
+:where(.fw-root) :is(
+    button, [role="button"], a, input, select, textarea, [tabindex], summary
+):focus,
+.fw-base:focus {
+    outline: 0;
+    box-shadow: none;
+}

package/package.json

@@ -1,102 +1,104 @@
-{
-  "name": "@freightos/freightwind",
-  "version": "2.1.2",
-  "private": false,
-  "description": "FreightWind Design System — icons, constants, and utilities for Freightos applications",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./icons": {
-      "types": "./dist/types/icons/index.d.ts",
-      "import": "./dist/esm/icons/index.js",
-      "require": "./dist/cjs/icons/index.js"
-    },
-    "./constants": {
-      "types": "./dist/types/constants/index.d.ts",
-      "import": "./dist/esm/constants/index.js",
-      "require": "./dist/cjs/constants/index.js"
-    },
-    "./tokens.css": "./tokens.css",
-    "./package.json": "./package.json"
-  },
-  "typesVersions": {
-    "*": {
-      "icons": [
-        "./dist/types/icons/index.d.ts"
-      ],
-      "constants": [
-        "./dist/types/constants/index.d.ts"
-      ]
-    }
-  },
-  "files": [
-    "dist",
-    "tokens.css",
-    "guidelines",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "scripts": {
-    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types",
-    "build:esm": "tsc --project tsconfig.esm.json",
-    "build:cjs": "tsc --project tsconfig.cjs.json",
-    "build:types": "tsc --project tsconfig.types.json",
-    "clean": "rm -rf dist",
-    "sync": "bash scripts/sync.sh",
-    "fetch-icons": "node scripts/fetch-figma-icons.js",
-    "generate": "node scripts/generate-icons.js",
-    "prepublishOnly": "npm run build",
-    "release:patch": "npm version patch && npm publish --access public && git push --follow-tags",
-    "release:minor": "npm version minor && npm publish --access public && git push --follow-tags",
-    "release:major": "npm version major && npm publish --access public && git push --follow-tags",
-    "publish:dry": "npm publish --dry-run --access public"
-  },
-  "keywords": [
-    "design-system",
-    "react",
-    "components",
-    "icons",
-    "freightos",
-    "freightwind",
-    "ui",
-    "typescript",
-    "tailwindcss"
-  ],
-  "author": "Jiries Nasrawi <jiries@freightos.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://Jeries_Nasrawi@bitbucket.org/freightos/freightwind.git"
-  },
-  "devDependencies": {
-    "@types/node": "^20.10.0",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "typescript": "^5.3.3"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": false
-    },
-    "react-dom": {
-      "optional": false
-    }
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0"
-  }
-}
+{
+  "name": "@freightos/freightwind",
+  "version": "2.1.3-host-isolation.0",
+  "private": false,
+  "description": "FreightWind Design System — icons, constants, and utilities for Freightos applications",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./icons": {
+      "types": "./dist/types/icons/index.d.ts",
+      "import": "./dist/esm/icons/index.js",
+      "require": "./dist/cjs/icons/index.js"
+    },
+    "./constants": {
+      "types": "./dist/types/constants/index.d.ts",
+      "import": "./dist/esm/constants/index.js",
+      "require": "./dist/cjs/constants/index.js"
+    },
+    "./tokens.css": "./tokens.css",
+    "./host-isolation/webcargo.css": "./host-isolation/webcargo.css",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "icons": [
+        "./dist/types/icons/index.d.ts"
+      ],
+      "constants": [
+        "./dist/types/constants/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "tokens.css",
+    "host-isolation",
+    "guidelines",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types",
+    "build:esm": "tsc --project tsconfig.esm.json",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "build:types": "tsc --project tsconfig.types.json",
+    "clean": "rm -rf dist",
+    "sync": "bash scripts/sync.sh",
+    "fetch-icons": "node scripts/fetch-figma-icons.js",
+    "generate": "node scripts/generate-icons.js",
+    "prepublishOnly": "npm run build",
+    "release:patch": "npm version patch && npm publish --access public && git push --follow-tags",
+    "release:minor": "npm version minor && npm publish --access public && git push --follow-tags",
+    "release:major": "npm version major && npm publish --access public && git push --follow-tags",
+    "publish:dry": "npm publish --dry-run --access public"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "icons",
+    "freightos",
+    "freightwind",
+    "ui",
+    "typescript",
+    "tailwindcss"
+  ],
+  "author": "Jiries Nasrawi <jiries@freightos.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://Jeries_Nasrawi@bitbucket.org/freightos/freightwind.git"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  }
+}