@excom/detect-browser 0.1.0

package/support/demos/language.html

@@ -0,0 +1,16 @@
+<div>
+  <detect-browser>
+    <span lang="en">Hello</span>
+    <span lang="es">Hola</span>
+  </detect-browser>
+  <style>
+    #demo-detect-browser-language > :first-child {
+      detect-browser {
+        [lang="en"],
+        [lang="es"] { display: none; }
+        &[language-id^="es"] [lang="es"],
+        &:not([language-id^="es"]) [lang="en"] { display: inline; }
+      }
+    }
+  </style>
+</div>

package/support/demos/safari.html

@@ -0,0 +1,11 @@
+<div>
+  <small role="note">Spoof an iOS Safari user agent in DevTools and reload.</small>
+  <detect-browser></detect-browser>
+  <quark-sheet>
+    @use "/demo-utils" as *;
+
+    detect-browser[browser-name="safari"] {
+      content: loadPolyfills(prop("provision"));
+    }
+  </quark-sheet>
+</div>

package/support/demos/simple.html

@@ -0,0 +1,15 @@
+<div>
+  <detect-browser></detect-browser>
+  <style>
+    #demo-detect-browser-simple> :first-child {
+      detect-browser::before { content: "Rendered with CSS: "; }
+      detect-browser::after {
+        content:
+        "browser: " attr(browser-name) " " attr(browser-version)
+        " · engine: " attr(browser-engine)
+        " · os: " attr(operating-system)
+        " · device: " attr(device-type);
+      }
+    }
+  </style>
+</div>

package/support/dist-docs/detect-browser.md

@@ -0,0 +1,145 @@
+# detect-browser
+
+Drop-in tag provides browser, OS, device, and language metadata — target Safari, standalone mode, mobile devices, etc. Helpful in creating device-specific UX.
+
+
+```html
+<div>
+  <detect-browser></detect-browser>
+  <style>
+    #demo-detect-browser-simple> :first-child {
+      detect-browser::before { content: "Rendered with CSS: "; }
+      detect-browser::after {
+        content:
+        "browser: " attr(browser-name) " " attr(browser-version)
+        " · engine: " attr(browser-engine)
+        " · os: " attr(operating-system)
+        " · device: " attr(device-type);
+      }
+    }
+  </style>
+</div>
+```
+
+
+## Features
+
+- **Attribute metadata** Set once on connect for CSS / Quark targeting
+- **Standalone / PWA detection** `is-standalone` reflects installed mode
+- **Language detection** `language-id` reflects system-selected language
+- **Device class** `device-type` (`mobile` / `desktop`) for coarse targeting
+- **Full metadata** `.provision` exposes user agent, languages, hardware hints
+
+## Installation
+
+
+`@excom/detect-browser` v0.1.0
+
+```bash
+pnpm add @excom/detect-browser
+```
+
+```bash
+npm install @excom/detect-browser
+```
+
+```bash
+yarn add @excom/detect-browser
+```
+
+### Import
+
+```ts
+import "@excom/detect-browser";
+```
+
+
+
+## Usage
+
+Drop it anywhere and select on its attributes with plain CSS.
+
+```html
+<detect-browser></detect-browser>
+```
+
+```css
+html:has(detect-browser[browser-name="safari"]) .safari-only {
+  display: block;
+}
+```
+
+Live touch / pointer detection is `detect-media media-query="(pointer: coarse)"` — this element reports what the user agent says once, not what the input is now.
+
+### API Reference
+
+
+#### Attributes
+
+| Name | Surface | Type | Default | Values | Description |
+| --- | --- | --- | --- | --- | --- |
+| `browser-name` | state | `string` |  | `"chrome"` \| `"firefox"` \| `"safari"` \| `"edge"` \| `"opera"` \| `internet explorer` | Detected browser family. |
+| `browser-version` | state | `string` |  |  | Browser version, as reported by the user agent string. |
+| `browser-engine` | state | `string` |  | `"blink"` \| `"gecko"` \| `"webkit"` \| `"trident"` | Rendering engine. |
+| `browser-vendor` | state | `string` |  |  | `navigator.vendor`, lowercased. |
+| `operating-system` | state | `string` |  | `windows 10+` \| `windows 8.1` \| `windows 8` \| `windows 7` \| `macos <version>` \| `"android"` \| `"ios"` \| `"linux"` | Detected OS and, where available, version. |
+| `operating-platform` | state | `string` |  |  | `navigator.userAgentData.platform` (falls back to `navigator.platform`), lowercased. |
+| `device-type` | state | `string` |  | `"mobile"` \| `"desktop"` | Coarse device class inferred from the user agent string. |
+| `is-standalone` | state | `boolean` |  |  | Present when running in standalone / installed PWA mode. |
+| `language-id` | state | `string` |  |  | `navigator.language`, lowercased. |
+| `cookies-enabled` | state | `boolean` |  |  | Present when `navigator.cookieEnabled` is `true`. |
+| `do-not-track` | state | `string` |  |  | `navigator.doNotTrack`, as reported by the browser. |
+
+#### Provision
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `provision` | `BrowserInfo` (`{ browserName: string \| null; browserVersion: string \| null; browserEngine: string \| null; browserVendor: string \| null; operatingSystem: string \| null; operatingPlatform: string \| null; deviceType: string \| null; isStandalone: boolean \| null; languageId: string \| null; cookiesEnabled: boolean \| null; doNotTrack: string \| null; userAgent: string \| null; languageIds: string[] \| null; hardwareConcurrency: number \| null; deviceMemory: number \| null; }`) | Every field above, plus values with no CSS-friendly attribute form: full user agent string, `navigator.languages`, hardware concurrency, and device memory (GB, where supported). Not reflected as an attribute. |
+
+
+
+### Examples
+
+#### Language
+
+Showing a greeting in your system language (Only Spanish or English for this example). `language-id` mirrors `navigator.language` (lowercased). Spanish prefixes show `Hola`; everything else shows `Hello`. Change the browser language (or override it in DevTools) and reload to flip it.
+
+
+```html
+<div>
+  <detect-browser>
+    <span lang="en">Hello</span>
+    <span lang="es">Hola</span>
+  </detect-browser>
+  <style>
+    #demo-detect-browser-language > :first-child {
+      detect-browser {
+        [lang="en"],
+        [lang="es"] { display: none; }
+        &[language-id^="es"] [lang="es"],
+        &:not([language-id^="es"]) [lang="en"] { display: inline; }
+      }
+    }
+  </style>
+</div>
+```
+
+
+#### Loading platform-specific polyfills
+
+In this demo, when the browser is Safari, polyfills are loaded. Spoof an iOS Safari user agent in DevTools and reload to trigger it. It will also `console.log` the full device info.
+
+
+```html
+<div>
+  <small role="note">Spoof an iOS Safari user agent in DevTools and reload.</small>
+  <detect-browser></detect-browser>
+  <quark-sheet>
+    @use "/demo-utils" as *;
+
+    detect-browser[browser-name="safari"] {
+      content: loadPolyfills(prop("provision"));
+    }
+  </quark-sheet>
+</div>
+```

package/support/docs/README.md

@@ -0,0 +1,51 @@
+# detect-browser
+
+Drop-in tag provides browser, OS, device, and language metadata — target Safari, standalone mode, mobile devices, etc. Helpful in creating device-specific UX.
+
+<include-content data-demo="simple"></include-content>
+
+## Features
+
+- **Attribute metadata** Set once on connect for CSS / Quark targeting
+- **Standalone / PWA detection** `is-standalone` reflects installed mode
+- **Language detection** `language-id` reflects system-selected language
+- **Device class** `device-type` (`mobile` / `desktop`) for coarse targeting
+- **Full metadata** `.provision` exposes user agent, languages, hardware hints
+
+## Installation
+
+<include-content is-active template-ref="/views/install-section/install-section.html"></include-content>
+
+## Usage
+
+Drop it anywhere and select on its attributes with plain CSS.
+
+```html
+<detect-browser></detect-browser>
+```
+
+```css
+html:has(detect-browser[browser-name="safari"]) .safari-only {
+  display: block;
+}
+```
+
+Live touch / pointer detection is `detect-media media-query="(pointer: coarse)"` — this element reports what the user agent says once, not what the input is now.
+
+### API Reference
+
+<include-content is-active template-ref="/views/api-reference/api-reference.html"></include-content>
+
+### Examples
+
+#### Language
+
+Showing a greeting in your system language (Only Spanish or English for this example). `language-id` mirrors `navigator.language` (lowercased). Spanish prefixes show `Hola`; everything else shows `Hello`. Change the browser language (or override it in DevTools) and reload to flip it.
+
+<include-content data-demo="language"></include-content>
+
+#### Loading platform-specific polyfills
+
+In this demo, when the browser is Safari, polyfills are loaded. Spoof an iOS Safari user agent in DevTools and reload to trigger it. It will also `console.log` the full device info.
+
+<include-content data-demo="safari"></include-content>

package/support/package-meta.json

@@ -0,0 +1,146 @@
+{
+  "shortName": "detect-browser",
+  "package": {
+    "name": "@excom/detect-browser",
+    "version": "0.1.0",
+    "description": "<detect-browser> custom element",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "kit-element"
+    }
+  },
+  "demos": {
+    "language": "<div>\n  <detect-browser>\n    <span lang=\"en\">Hello</span>\n    <span lang=\"es\">Hola</span>\n  </detect-browser>\n  <style>\n    #demo-detect-browser-language > :first-child {\n      detect-browser {\n        [lang=\"en\"],\n        [lang=\"es\"] { display: none; }\n        &[language-id^=\"es\"] [lang=\"es\"],\n        &:not([language-id^=\"es\"]) [lang=\"en\"] { display: inline; }\n      }\n    }\n  </style>\n</div>\n",
+    "safari": "<div>\n  <small role=\"note\">Spoof an iOS Safari user agent in DevTools and reload.</small>\n  <detect-browser></detect-browser>\n  <quark-sheet>\n    @use \"/demo-utils\" as *;\n\n    detect-browser[browser-name=\"safari\"] {\n      content: loadPolyfills(prop(\"provision\"));\n    }\n  </quark-sheet>\n</div>\n",
+    "simple": "<div>\n  <detect-browser></detect-browser>\n  <style>\n    #demo-detect-browser-simple> :first-child {\n      detect-browser::before { content: \"Rendered with CSS: \"; }\n      detect-browser::after {\n        content:\n        \"browser: \" attr(browser-name) \" \" attr(browser-version)\n        \" · engine: \" attr(browser-engine)\n        \" · os: \" attr(operating-system)\n        \" · device: \" attr(device-type);\n      }\n    }\n  </style>\n</div>"
+  },
+  "readme": "<h1 id=\"md-detect-browser\">detect-browser</h1>\n<p>Drop-in tag provides browser, OS, device, and language metadata — target Safari, standalone mode, mobile devices, etc. Helpful in creating device-specific UX.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Attribute metadata</strong> Set once on connect for CSS / Quark targeting</li>\n<li><strong>Standalone / PWA detection</strong> <code>is-standalone</code> reflects installed mode</li>\n<li><strong>Language detection</strong> <code>language-id</code> reflects system-selected language</li>\n<li><strong>Device class</strong> <code>device-type</code> (<code>mobile</code> / <code>desktop</code>) for coarse targeting</li>\n<li><strong>Full metadata</strong> <code>.provision</code> exposes user agent, languages, hardware hints</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Drop it anywhere and select on its attributes with plain CSS.</p>\n<include-content data-language=\"html\"><template>&lt;detect-browser&gt;&lt;/detect-browser&gt;</template></include-content>\n<include-content data-language=\"css\"><template>html:has(detect-browser[browser-name=\"safari\"]) .safari-only {\n  display: block;\n}</template></include-content>\n<p>Live touch / pointer detection is <code>detect-media media-query=&quot;(pointer: coarse)&quot;</code> — this element reports what the user agent says once, not what the input is now.</p>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-language\">Language</h4>\n<p>Showing a greeting in your system language (Only Spanish or English for this example). <code>language-id</code> mirrors <code>navigator.language</code> (lowercased). Spanish prefixes show <code>Hola</code>; everything else shows <code>Hello</code>. Change the browser language (or override it in DevTools) and reload to flip it.</p>\n<p><include-content data-demo=\"language\"></include-content></p>\n<h4 id=\"md-loading-platform-specific-polyfills\">Loading platform-specific polyfills</h4>\n<p>In this demo, when the browser is Safari, polyfills are loaded. Spoof an iOS Safari user agent in DevTools and reload to trigger it. It will also <code>console.log</code> the full device info.</p>\n<p><include-content data-demo=\"safari\"></include-content></p>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-detect-browser\">detect-browser</h1>\n<p>Drop-in tag provides browser, OS, device, and language metadata — target Safari, standalone mode, mobile devices, etc. Helpful in creating device-specific UX.</p>\n<p><include-content data-demo=\"simple\"></include-content></p>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Attribute metadata</strong> Set once on connect for CSS / Quark targeting</li>\n<li><strong>Standalone / PWA detection</strong> <code>is-standalone</code> reflects installed mode</li>\n<li><strong>Language detection</strong> <code>language-id</code> reflects system-selected language</li>\n<li><strong>Device class</strong> <code>device-type</code> (<code>mobile</code> / <code>desktop</code>) for coarse targeting</li>\n<li><strong>Full metadata</strong> <code>.provision</code> exposes user agent, languages, hardware hints</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Drop it anywhere and select on its attributes with plain CSS.</p>\n<include-content data-language=\"html\"><template>&lt;detect-browser&gt;&lt;/detect-browser&gt;</template></include-content>\n<include-content data-language=\"css\"><template>html:has(detect-browser[browser-name=\"safari\"]) .safari-only {\n  display: block;\n}</template></include-content>\n<p>Live touch / pointer detection is <code>detect-media media-query=&quot;(pointer: coarse)&quot;</code> — this element reports what the user agent says once, not what the input is now.</p>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-language\">Language</h4>\n<p>Showing a greeting in your system language (Only Spanish or English for this example). <code>language-id</code> mirrors <code>navigator.language</code> (lowercased). Spanish prefixes show <code>Hola</code>; everything else shows <code>Hello</code>. Change the browser language (or override it in DevTools) and reload to flip it.</p>\n<p><include-content data-demo=\"language\"></include-content></p>\n<h4 id=\"md-loading-platform-specific-polyfills\">Loading platform-specific polyfills</h4>\n<p>In this demo, when the browser is Safari, polyfills are loaded. Spoof an iOS Safari user agent in DevTools and reload to trigger it. It will also <code>console.log</code> the full device info.</p>\n<p><include-content data-demo=\"safari\"></include-content></p>\n"
+  },
+  "installation": {
+    "name": "@excom/detect-browser",
+    "shortName": "detect-browser",
+    "version": "0.1.0",
+    "description": "<detect-browser> custom element",
+    "packageType": "kit-element",
+    "cdn": "<script src=\"https://unpkg.com/@excom/kit-utils/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/neutron/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/detect-browser@0.1.0/dist/index.umd.min.js\"></script>",
+    "install": {
+      "npm": "npm install @excom/detect-browser"
+    },
+    "imports": {
+      "js": "import \"@excom/detect-browser\";",
+      "html": "<!-- import path to `node_modules` will depend on your build setup -->\n<script type=\"module\" src=\"/node_modules/@excom/detect-browser\"></script>\n<link rel=\"stylesheet\" href=\"/node_modules/@excom/detect-browser\">"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "detect-browser",
+      "summary": "CSS-selectable browser, OS, and device metadata.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "browser-engine",
+          "type": "string",
+          "description": "Rendering engine.",
+          "fieldName": "browserEngine",
+          "surface": "state",
+          "values": "\"blink\" | \"gecko\" | \"webkit\" | \"trident\""
+        },
+        {
+          "name": "browser-name",
+          "type": "string",
+          "description": "Detected browser family.",
+          "fieldName": "browserName",
+          "surface": "state",
+          "values": "\"chrome\" | \"firefox\" | \"safari\" | \"edge\" | \"opera\" | internet explorer"
+        },
+        {
+          "name": "browser-vendor",
+          "type": "string",
+          "description": "<code>navigator.vendor</code>, lowercased.",
+          "fieldName": "browserVendor",
+          "surface": "state"
+        },
+        {
+          "name": "browser-version",
+          "type": "string",
+          "description": "Browser version, as reported by the user agent string.",
+          "fieldName": "browserVersion",
+          "surface": "state"
+        },
+        {
+          "name": "cookies-enabled",
+          "type": "boolean",
+          "description": "Present when <code>navigator.cookieEnabled</code> is <code>true</code>.",
+          "fieldName": "cookiesEnabled",
+          "surface": "state"
+        },
+        {
+          "name": "device-type",
+          "type": "string",
+          "description": "Coarse device class inferred from the user agent string.",
+          "fieldName": "deviceType",
+          "surface": "state",
+          "values": "\"mobile\" | \"desktop\""
+        },
+        {
+          "name": "do-not-track",
+          "type": "string",
+          "description": "<code>navigator.doNotTrack</code>, as reported by the browser.",
+          "fieldName": "doNotTrack",
+          "surface": "state"
+        },
+        {
+          "name": "is-standalone",
+          "type": "boolean",
+          "description": "Present when running in standalone / installed PWA mode.",
+          "fieldName": "isStandalone",
+          "surface": "state"
+        },
+        {
+          "name": "language-id",
+          "type": "string",
+          "description": "<code>navigator.language</code>, lowercased.",
+          "fieldName": "languageId",
+          "surface": "state"
+        },
+        {
+          "name": "operating-platform",
+          "type": "string",
+          "description": "<code>navigator.userAgentData.platform</code> (falls back to <code>navigator.platform</code>), lowercased.",
+          "fieldName": "operatingPlatform",
+          "surface": "state"
+        },
+        {
+          "name": "operating-system",
+          "type": "string",
+          "description": "Detected OS and, where available, version.",
+          "fieldName": "operatingSystem",
+          "surface": "state",
+          "values": "windows 10+ | windows 8.1 | windows 8 | windows 7 | macos <version> | \"android\" | \"ios\" | \"linux\""
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "cssProperties": [],
+      "cssClasses": [],
+      "cssAliases": [],
+      "listens": [],
+      "commands": [],
+      "defaultActions": [],
+      "expectedChildren": [],
+      "provisions": [
+        {
+          "name": "provision",
+          "type": "BrowserInfo",
+          "typeExpanded": "{ browserName: string | null; browserVersion: string | null; browserEngine: string | null; browserVendor: string | null; operatingSystem: string | null; operatingPlatform: string | null; deviceType: string | null; isStandalone: boolean | null; languageId: string | null; cookiesEnabled: boolean | null; doNotTrack: string | null; userAgent: string | null; languageIds: string[] | null; hardwareConcurrency: number | null; deviceMemory: number | null; }",
+          "description": "Every field above, plus values with no CSS-friendly attribute form: full user agent string, <code>navigator.languages</code>, hardware concurrency, and device memory (GB, where supported). Not reflected as an attribute.",
+          "fieldName": "provision"
+        }
+      ]
+    }
+  ],
+  "exportedFiles": {}
+}