@spectrum-web-components/opacity-checkerboard 0.38.0 → 0.39.1

package/README.md

@@ -4,21 +4,22 @@ The `opacity-checkerboard` class is used to highlight opacity. Leverage these st
 
 ## Usage
 
-Import the styles from `opacity-checkerboard` css
+Import the styles from the `opacity-checkerboard` CSS:
 
 ```
-import opacityCheckeryBoardStyles from '@spectrum-web-components/tools/opacity-checkerboard/src/opacity-checkerboard.css.js';
+import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
 ```
 
-Add it to your component's styles array
+Add it to your component's styles array before your component's styles. The order that you include the styles in makes a difference, because selectors within opacity checkerboard may have the same
+specificity as those within your component.
 
 ```js
 public static override get styles(): CSSResultArray {
-    return [...styles, opacityCheckeryBoardStyles];
+    return [opacityCheckerBoardStyles, styles];
 }
 ```
 
-Use the `opacity-checkerboard` class in `render()` method
+Use the `opacity-checkerboard` class in your component's `render()` method:
 
 ```html-live demo
 <div

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/opacity-checkerboard",
-    "version": "0.38.0",
+    "version": "0.39.1",
     "publishConfig": {
         "access": "public"
     },
@@ -16,12 +16,13 @@
     "bugs": {
         "url": "https://github.com/adobe/spectrum-web-components/issues"
     },
-    "main": "./src/index.js",
-    "module": "./src/index.js",
+    "main": "./src/opacity-checkerboard.css.js",
+    "module": "./src/opacity-checkerboard.css.js",
     "type": "module",
     "exports": {
         ".": "./src/opacity-checkerboard.css.js",
         "./package.json": "./package.json",
+        "./src/is-opacity-checkerboard.css.js": "./src/is-opacity-checkerboard.css.js",
         "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js"
     },
     "scripts": {
@@ -42,12 +43,12 @@
         "lit-html"
     ],
     "devDependencies": {
-        "@spectrum-css/opacitycheckerboard": "^1.0.0"
+        "@spectrum-css/opacitycheckerboard": "^1.0.4"
     },
-    "types": "./src/index.d.ts",
+    "types": "./src/opacity-checkerboard.d.ts",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
+    "gitHead": "d374f8645b54b978d830c95ff777b5b1e9172ac7"
 }

package/src/is-opacity-checkerboard.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/is-opacity-checkerboard.css.dev.js

@@ -0,0 +1,25 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+:host{--spectrum-opacity-checkerboard-dark:var(
+--spectrum-opacity-checkerboard-square-dark
+);--spectrum-opacity-checkerboard-light:var(
+--spectrum-opacity-checkerboard-square-light
+);--spectrum-opacity-checkerboard-size:var(
+--spectrum-opacity-checkerboard-square-size
+);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(
+--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)
+) 0 25%,var(
+--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)
+) 0 50%) var(
+--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)
+) /calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2) calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}
+`;
+export default styles;
+//# sourceMappingURL=is-opacity-checkerboard.css.dev.js.map

package/src/is-opacity-checkerboard.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["is-opacity-checkerboard.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-opacity-checkerboard-dark:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-opacity-checkerboard-light:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-opacity-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(\n--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)\n) 0 25%,var(\n--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)\n) 0 50%) var(\n--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)\n) /calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2) calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBf,eAAe;",
+  "names": []
+}

package/src/is-opacity-checkerboard.css.js

@@ -0,0 +1,22 @@
+"use strict";import{css as c}from"@spectrum-web-components/base";const r=c`
+:host{--spectrum-opacity-checkerboard-dark:var(
+--spectrum-opacity-checkerboard-square-dark
+);--spectrum-opacity-checkerboard-light:var(
+--spectrum-opacity-checkerboard-square-light
+);--spectrum-opacity-checkerboard-size:var(
+--spectrum-opacity-checkerboard-square-size
+);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(
+--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)
+) 0 25%,var(
+--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)
+) 0 50%) var(
+--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)
+) /calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2) calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}
+`;export default r;
+//# sourceMappingURL=is-opacity-checkerboard.css.js.map

package/src/is-opacity-checkerboard.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["is-opacity-checkerboard.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-opacity-checkerboard-dark:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-opacity-checkerboard-light:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-opacity-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(\n--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)\n) 0 25%,var(\n--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)\n) 0 50%) var(\n--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)\n) /calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2) calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBf,eAAeC",
+  "names": ["css", "styles"]
+}

package/src/spectrum-config.js

@@ -31,6 +31,12 @@ const config = {
                 ),
             ],
         },
+        {
+            inPackage: '@spectrum-css/opacitycheckerboard',
+            outPackage: ['tools', 'opacity-checkerboard'],
+            fileName: 'is-opacity-checkerboard',
+            components: [converter.classToHost('spectrum-OpacityCheckerboard')],
+        },
     ],
 };
 

package/src/spectrum-is-opacity-checkerboard.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/spectrum-is-opacity-checkerboard.css.dev.js

@@ -0,0 +1,25 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+:host{--spectrum-opacity-checkerboard-dark:var(
+--spectrum-opacity-checkerboard-square-dark
+);--spectrum-opacity-checkerboard-light:var(
+--spectrum-opacity-checkerboard-square-light
+);--spectrum-opacity-checkerboard-size:var(
+--spectrum-opacity-checkerboard-square-size
+);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(
+--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)
+) 0 25%,var(
+--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)
+) 0 50%) var(
+--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)
+) /calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2) calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}
+`;
+export default styles;
+//# sourceMappingURL=spectrum-is-opacity-checkerboard.css.dev.js.map

package/src/spectrum-is-opacity-checkerboard.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["spectrum-is-opacity-checkerboard.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-opacity-checkerboard-dark:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-opacity-checkerboard-light:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-opacity-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(\n--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)\n) 0 25%,var(\n--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)\n) 0 50%) var(\n--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)\n) /calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2) calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBf,eAAe;",
+  "names": []
+}

package/src/spectrum-is-opacity-checkerboard.css.js

@@ -0,0 +1,22 @@
+"use strict";import{css as c}from"@spectrum-web-components/base";const r=c`
+:host{--spectrum-opacity-checkerboard-dark:var(
+--spectrum-opacity-checkerboard-square-dark
+);--spectrum-opacity-checkerboard-light:var(
+--spectrum-opacity-checkerboard-square-light
+);--spectrum-opacity-checkerboard-size:var(
+--spectrum-opacity-checkerboard-square-size
+);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(
+--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)
+) 0 25%,var(
+--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)
+) 0 50%) var(
+--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)
+) /calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2) calc(var(
+--mod-opacity-checkerboard-size,
+var(--spectrum-opacity-checkerboard-size)
+)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}
+`;export default r;
+//# sourceMappingURL=spectrum-is-opacity-checkerboard.css.js.map

package/src/spectrum-is-opacity-checkerboard.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["spectrum-is-opacity-checkerboard.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-opacity-checkerboard-dark:var(\n--spectrum-opacity-checkerboard-square-dark\n);--spectrum-opacity-checkerboard-light:var(\n--spectrum-opacity-checkerboard-square-light\n);--spectrum-opacity-checkerboard-size:var(\n--spectrum-opacity-checkerboard-square-size\n);--spectrum-opacity-checkerboard-position:left top}:host{background:repeating-conic-gradient(var(\n--mod-opacity-checkerboard-light,var(--spectrum-opacity-checkerboard-light)\n) 0 25%,var(\n--mod-opacity-checkerboard-dark,var(--spectrum-opacity-checkerboard-dark)\n) 0 50%) var(\n--mod-opacity-checkerboard-position,var(--spectrum-opacity-checkerboard-position)\n) /calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2) calc(var(\n--mod-opacity-checkerboard-size,\nvar(--spectrum-opacity-checkerboard-size)\n)*2);block-size:100%;inline-size:100%}@media (forced-colors:active){:host{forced-color-adjust:none}}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBf,eAAeC",
+  "names": ["css", "styles"]
+}