fixes #855

docs/components/input.md

@@ -5,7 +5,7 @@
 Inputs collect data from the user.
 
 ```html preview
-<sl-input></sl-input>
+<sl-input type="date" clearable></sl-input>
 ```
 
 ```jsx react

docs/resources/changelog.md

@@ -18,6 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-popup>` that prevented the `arrow-padding` attribute from working as expected
 - Improved accessibility of `<sl-rating>` so keyboard nav works better and screen readers announce it properly
 - Improved accessibility of `<sl-spinner>` so screen readers no longer skip over it
+- Removed a user agent sniffing notice that appeared in Chrome [#855](https://github.com/shoelace-style/shoelace/issues/855)
 - Removed the default hover effect in `<sl-tree-items>` to make selections more obvious
 - Updated Floating UI to 1.0.1
 - Updated esbuild to 0.15.1

package.json

@@ -106,7 +106,8 @@
     "sinon": "^14.0.0",
     "strip-css-comments": "^5.0.0",
     "tslib": "^2.4.0",
-    "typescript": "4.7.4"
+    "typescript": "4.7.4",
+    "user-agent-data-types": "^0.3.0"
   },
   "lint-staged": {
     "*.{ts,js}": [

src/components/input/input.ts

@@ -13,6 +13,17 @@ import '../icon/icon';
 import styles from './input.styles';
 import type { CSSResultGroup } from 'lit';
 
+// It's currently impossible to hide Firefox's built-in clear icon when using <input type="date|time">, so we need this
+// check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but, if it fails, we only see a
+// redundant clear icon so nothing important is breaking. The benefits outweigh the costs for this one. See the
+// discussion at: https://github.com/shoelace-style/shoelace/pull/794
+//
+// Also note that we do the Chromium check first to prevent Chrome from logging a console notice as described here:
+// https://github.com/shoelace-style/shoelace/issues/855
+//
+const isChromium = navigator.userAgentData?.brands.some(b => b.brand.includes('Chromium'));
+const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
+
 /**
  * @since 2.0
  * @status stable
@@ -369,12 +380,7 @@ export default class SlInput extends LitElement {
               'input--empty': !this.value,
               'input--invalid': this.invalid,
               'input--no-spin-buttons': this.noSpinButtons,
-
-              // It's currently impossible to hide Firefox's built-in clear icon when using <input type="date|time">, so
-              // we need this check to apply a clip-path to hide it. I know, I know...user agent sniffing is nasty but
-              // if it fails, we only see a redundant clear icon so nothing important is breaking. The benefits outweigh
-              // the costs for this one. See the discussion at: https://github.com/shoelace-style/shoelace/pull/794
-              'input--is-firefox': navigator.userAgent.includes('Firefox')
+              'input--is-firefox': isFirefox
             })}
           >
             <span part="prefix" class="input__prefix">

tsconfig.json

@@ -26,7 +26,10 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "useUnknownInCatchVariables": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "types": [
+      "./node_modules/user-agent-data-types"
+    ]
   },
   "include": [
     "src"