@spectrum-web-components/swatch 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,246 @@
+## Description
+
+An `<sp-swatch>` shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/swatch?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/swatch)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/swatch?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/swatch)
+
+```
+yarn add @spectrum-web-components/swatch
+```
+
+Import the side effectful registration of `<sp-swatch>` via:
+
+```
+import '@spectrum-web-components/swatch/sp-swatch.js';
+```
+
+When looking to leverage the `Swatch` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Swatch } from '@spectrum-web-components/swatch';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="xs">Extra Small</sp-tab>
+<sp-tab-panel value="xs">
+
+```html
+<div style="display: flex;gap: 5px;">
+    <sp-swatch color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
+    <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
+    <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
+    <sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
+    <sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
+    <sp-swatch nothing size="xs"></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        color="rgb(255 0 0 / 0.7)"
+        size="xs"
+    ></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        disabled
+        color="rgb(255 0 0 / 0.7)"
+        size="xs"
+    ></sp-swatch>
+    <sp-swatch
+        rounding="full"
+        shape="rectangle"
+        mixed-value
+        size="xs"
+    ></sp-swatch>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html
+<div style="display: flex;gap: 5px;">
+    <sp-swatch color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
+    <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
+    <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
+    <sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
+    <sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
+    <sp-swatch nothing size="s"></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        color="rgb(255 0 0 / 0.7)"
+        size="s"
+    ></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        disabled
+        color="rgb(255 0 0 / 0.7)"
+        size="s"
+    ></sp-swatch>
+    <sp-swatch
+        rounding="full"
+        shape="rectangle"
+        mixed-value
+        size="s"
+    ></sp-swatch>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<div style="display: flex;gap: 5px;">
+    <sp-swatch color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
+    <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
+    <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
+    <sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
+    <sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
+    <sp-swatch nothing size="m"></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        color="rgb(255 0 0 / 0.7)"
+        size="m"
+    ></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        disabled
+        color="rgb(255 0 0 / 0.7)"
+        size="m"
+    ></sp-swatch>
+    <sp-swatch
+        rounding="full"
+        shape="rectangle"
+        mixed-value
+        size="m"
+    ></sp-swatch>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<div style="display: flex;gap: 5px;">
+    <sp-swatch color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
+    <sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
+    <sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
+    <sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
+    <sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
+    <sp-swatch nothing size="l"></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        color="rgb(255 0 0 / 0.7)"
+        size="l"
+    ></sp-swatch>
+    <sp-swatch
+        shape="rectangle"
+        disabled
+        color="rgb(255 0 0 / 0.7)"
+        size="l"
+    ></sp-swatch>
+    <sp-swatch
+        rounding="full"
+        shape="rectangle"
+        mixed-value
+        size="l"
+    ></sp-swatch>
+</div>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Modifying attributes
+
+An `<sp-swatch>` element can be modified by the following attributes/properties to customize its delivery as desired for your use case: `border`, `color`, `disabled`, `mixedValue` (accepted as the `mixed-value` attribute), `nothing`, `rounding`, and `shape`. Use these in concert with each other for a variety of final visual deliveries.
+
+### Border
+
+The `border` attribute/property is not required and when applied accepts the values of `none` or `light`.
+
+```html
+<sp-swatch-group>
+    <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch color="rgb(255 0 0 / 0.7)" border="light"></sp-swatch>
+    <sp-swatch color="rgb(255 0 0 / 0.7)" border="none"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Color
+
+The `color` attribute/property determines the color value that the `<sp-swatch>` element will deliver.
+
+```html
+<sp-swatch-group>
+    <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch color="orange"></sp-swatch>
+    <sp-swatch color="var(--spectrum-magenta-500)"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Disabled
+
+The `disabled` attribute/property determines prevents interaction on the `<sp-swatch>` element.
+
+```html
+<sp-swatch-group>
+    <sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch disabled color="orange"></sp-swatch>
+    <sp-swatch disabled color="var(--spectrum-magenta-500)"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Mixed value
+
+The `mixed-value` attribute and `mixedValue` property outline when an `<sp-swatch>` element represents more than one color.
+
+```html
+<sp-swatch-group selects="multiple">
+    <sp-swatch mixed-value></sp-swatch>
+    <sp-swatch mixed-value rounding="full"></sp-swatch>
+    <sp-swatch mixed-value shape="rectangle"></sp-swatch>
+</sp-swatch-group>
+```
+
+Please note that the `aria-checked="mixed"` value only applies when the swatch is in a group with `selects="multiple"`
+
+### Nothing
+
+The `nothing` attribute/property outlines that the `<sp-swatch>` represents no color or that it represents "transparent".
+
+```html
+<sp-swatch-group>
+    <sp-swatch nothing></sp-swatch>
+    <sp-swatch nothing rounding="full"></sp-swatch>
+    <sp-swatch nothing shape="rectangle"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Rounding
+
+The `rounding` attribute/property is not required and when applied accepts the values of `none` or `full`.
+
+```html
+<sp-swatch-group>
+    <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch color="rgb(255 0 0 / 0.7)" rounding="none"></sp-swatch>
+    <sp-swatch color="rgb(255 0 0 / 0.7)" rounding="full"></sp-swatch>
+</sp-swatch-group>
+```
+
+### Shape
+
+The `shape` attribute/property is not required and when applied accepts the values of `rectangle`.
+
+```html
+<sp-swatch-group>
+    <sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
+    <sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
+</sp-swatch-group>
+```

package/package.json

@@ -0,0 +1,89 @@
+{
+    "name": "@spectrum-web-components/swatch",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Swatch",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/swatch"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/swatch",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Swatch.js": {
+            "development": "./src/Swatch.dev.js",
+            "default": "./src/Swatch.js"
+        },
+        "./src/SwatchGroup.js": {
+            "development": "./src/SwatchGroup.dev.js",
+            "default": "./src/SwatchGroup.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/swatch-group-overrides.css.js": "./src/swatch-group-overrides.css.js",
+        "./src/swatch-group.css.js": "./src/swatch-group.css.js",
+        "./src/swatch-overrides.css.js": "./src/swatch-overrides.css.js",
+        "./src/swatch.css.js": "./src/swatch.css.js",
+        "./sp-swatch.js": {
+            "development": "./sp-swatch.dev.js",
+            "default": "./sp-swatch.js"
+        },
+        "./sp-swatch-group.js": {
+            "development": "./sp-swatch-group.dev.js",
+            "default": "./sp-swatch-group.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@lit-labs/observers": "^2.0.2",
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/icon": "0.0.0-20241209155954",
+        "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
+        "@spectrum-web-components/opacity-checkerboard": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
+        "@spectrum-web-components/shared": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/swatch": "^7.0.0-s2-foundations.17",
+        "@spectrum-css/swatchgroup": "^4.0.0-s2-foundations.15"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-swatch-group.d.ts

@@ -0,0 +1,6 @@
+import { SwatchGroup } from './src/SwatchGroup.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-swatch-group': SwatchGroup;
+    }
+}

package/sp-swatch-group.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { SwatchGroup } from "./src/SwatchGroup.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-swatch-group", SwatchGroup);
+//# sourceMappingURL=sp-swatch-group.dev.js.map

package/sp-swatch-group.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-swatch-group.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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 { SwatchGroup } from './src/SwatchGroup.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,cAAc,mBAAmB,WAAW;",
+  "names": []
+}

package/sp-swatch-group.js

@@ -0,0 +1,2 @@
+"use strict";import{SwatchGroup as e}from"./src/SwatchGroup.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-swatch-group",e);
+//# sourceMappingURL=sp-swatch-group.js.map

package/sp-swatch-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-swatch-group.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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 { SwatchGroup } from './src/SwatchGroup.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch-group': SwatchGroup;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,eAAAA,MAAmB,uBAC5B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,kBAAmBD,CAAW",
+  "names": ["SwatchGroup", "defineElement"]
+}

package/sp-swatch.d.ts

@@ -0,0 +1,6 @@
+import { Swatch } from './src/Swatch.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-swatch': Swatch;
+    }
+}

package/sp-swatch.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Swatch } from "./src/Swatch.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-swatch", Swatch);
+//# sourceMappingURL=sp-swatch.dev.js.map

package/sp-swatch.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-swatch.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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 { Swatch } from './src/Swatch.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch', Swatch);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch': Swatch;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
+  "names": []
+}

package/sp-swatch.js

@@ -0,0 +1,2 @@
+"use strict";import{Swatch as e}from"./src/Swatch.js";import{defineElement as a}from"@spectrum-web-components/base/src/define-element.js";a("sp-swatch",e);
+//# sourceMappingURL=sp-swatch.js.map

package/sp-swatch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-swatch.ts"],
+  "sourcesContent": ["/*\nCopyright 2022 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 { Swatch } from './src/Swatch.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-swatch', Swatch);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-swatch': Swatch;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
+  "names": ["Swatch", "defineElement"]
+}

package/src/Swatch.d.ts

@@ -0,0 +1,43 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';
+export type SwatchBorder = 'light' | 'none' | undefined;
+export type SwatchRounding = 'none' | 'full' | undefined;
+export type SwatchShape = 'rectangle' | undefined;
+declare const Swatch_base: typeof Focusable & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+};
+/**
+ * @element sp-swatch
+ */
+export declare class Swatch extends Swatch_base {
+    static get styles(): CSSResultArray;
+    border: SwatchBorder;
+    color: string;
+    label: string;
+    mixedValue: boolean;
+    nothing: boolean;
+    role: string;
+    rounding: SwatchRounding;
+    selected: boolean;
+    shape: SwatchShape;
+    get value(): string;
+    set value(value: string);
+    private _value?;
+    get focusElement(): HTMLElement;
+    toggle(force?: boolean): void;
+    private handleClick;
+    protected handleKeydown(event: KeyboardEvent): void;
+    private handleKeypress;
+    protected handleKeyup(event: KeyboardEvent): void;
+    protected renderDisabled: () => TemplateResult;
+    protected renderMixedValue: () => TemplateResult;
+    protected render(): TemplateResult;
+    protected willUpdate(changes: PropertyValues): void;
+    protected firstUpdated(changes: PropertyValues): void;
+}
+export {};