@spectrum-web-components/checkbox 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,164 @@
+## Description
+
+`<sp-checkbox>` allow users to select multiple items from a list of independent
+options, or to mark an individual option as selected.
+
+Should I use a checkbox or a switch? Use a switch when activating something
+instead of selecting.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/checkbox?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/checkbox)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/checkbox?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/checkbox)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/jeIGAXHMUrTp6hGMquoD/src/index.ts)
+
+```
+yarn add @spectrum-web-components/checkbox
+```
+
+Import the side effectful registration of `<sp-checkbox>` via:
+
+```
+import '@spectrum-web-components/checkbox/sp-checkbox.js';
+```
+
+When looking to leverage the `Checkbox` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Checkbox } from '@spectrum-web-components/checkbox';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html demo
+<sp-field-group>
+    <sp-checkbox size="s">Small</sp-checkbox>
+    <sp-checkbox size="s" checked>Small Checked</sp-checkbox>
+    <sp-checkbox size="s" indeterminate>Small Indeterminate</sp-checkbox>
+</sp-field-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html demo
+<sp-field-group>
+    <sp-checkbox size="m">Medium</sp-checkbox>
+    <sp-checkbox size="m" checked>Medium Checked</sp-checkbox>
+    <sp-checkbox size="m" indeterminate>Medium Indeterminate</sp-checkbox>
+</sp-field-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html demo
+<sp-field-group>
+    <sp-checkbox size="l">Large</sp-checkbox>
+    <sp-checkbox size="l" checked>Large Checked</sp-checkbox>
+    <sp-checkbox size="l" indeterminate>Large Indeterminate</sp-checkbox>
+</sp-field-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html demo
+<sp-field-group>
+    <sp-checkbox size="xl">Extra Large</sp-checkbox>
+    <sp-checkbox size="xl" checked>Extra Large Checked</sp-checkbox>
+    <sp-checkbox size="xl" indeterminate>Extra Large Indeterminate</sp-checkbox>
+</sp-field-group>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Variants
+
+### Standard checkboxes
+
+Standard checkboxes are the default style for checkboxes. They are optimal for
+application panels where all visual elements are monochrome in order to direct
+focus to the content.
+
+```html-live
+<div style="display: flex; justify-content: space-between;">
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Default</h4>
+        <sp-checkbox>Web component</sp-checkbox>
+        <sp-checkbox checked>Web component</sp-checkbox>
+        <sp-checkbox indeterminate>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Invalid</h4>
+        <sp-checkbox invalid>Web component</sp-checkbox>
+        <sp-checkbox checked invalid>Web component</sp-checkbox>
+        <sp-checkbox indeterminate invalid>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Disabled</h4>
+        <sp-checkbox disabled>Web component</sp-checkbox>
+        <sp-checkbox checked disabled>Web component</sp-checkbox>
+        <sp-checkbox indeterminate disabled>Web component</sp-checkbox>
+    </div>
+</div>
+```
+
+### Emphasized checkboxes
+
+Emphasized checkboxes are a secondary style for checkboxes. The blue color
+provides a visual prominence that is optimal for forms, settings, lists or grids
+of assets, etc. where the checkboxes need to be noticed.
+
+```html-live
+<div style="display: flex; justify-content: space-between;">
+    <div style="display: flex; flex-direction: column; justify-content: space-between;">
+        <h4 class="spectrum-Heading--subtitle1">Default</h4>
+        <sp-checkbox emphasized>Web component</sp-checkbox>
+        <sp-checkbox emphasized checked>Web component</sp-checkbox>
+        <sp-checkbox emphasized indeterminate>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Invalid</h4>
+        <sp-checkbox emphasized invalid>Web component</sp-checkbox>
+        <sp-checkbox emphasized checked invalid>Web component</sp-checkbox>
+        <sp-checkbox emphasized indeterminate invalid>Web component</sp-checkbox>
+    </div>
+
+    <div style="display: flex; flex-direction: column;">
+        <h4 class="spectrum-Heading--subtitle1">Disabled</h4>
+        <sp-checkbox emphasized disabled>Web component</sp-checkbox>
+        <sp-checkbox emphasized checked disabled>Web component</sp-checkbox>
+        <sp-checkbox emphasized indeterminate disabled>Web component</sp-checkbox>
+    </div>
+</div>
+```
+
+### Handling events
+
+Event handlers for clicks and other user actions can be registered on an `<sp-checkbox>` as they would a standard `<input type="checkbox">` element.
+
+```html
+<sp-checkbox
+    id="checkbox-example"
+    onclick="spAlert(this, '<sp-radio> clicked!')"
+>
+    Web component
+</sp-checkbox>
+```
+
+## Accessibility
+
+Checkboxes are accessible by default, rendered in HTML using the `<input type="checkbox">` element. When the checkbox is set as `indeterminate` or
+`invalid`, the appropriate ARIA state attribute will automatically be applied.

package/package.json

@@ -0,0 +1,83 @@
+{
+    "name": "@spectrum-web-components/checkbox",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/checkbox"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/checkbox",
+    "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/Checkbox.js": {
+            "development": "./src/Checkbox.dev.js",
+            "default": "./src/Checkbox.js"
+        },
+        "./src/CheckboxBase.js": {
+            "development": "./src/CheckboxBase.dev.js",
+            "default": "./src/CheckboxBase.js"
+        },
+        "./src/CheckboxMixin.js": {
+            "development": "./src/CheckboxMixin.dev.js",
+            "default": "./src/CheckboxMixin.js"
+        },
+        "./src/checkbox-overrides.css.js": "./src/checkbox-overrides.css.js",
+        "./src/checkbox.css.js": "./src/checkbox.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-checkbox.js": {
+            "development": "./sp-checkbox.dev.js",
+            "default": "./sp-checkbox.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": {
+        "@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/shared": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/checkbox": "^10.0.0-s2-foundations.18"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-checkbox.d.ts

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

package/sp-checkbox.dev.js

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

package/sp-checkbox.dev.js.map

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

package/sp-checkbox.js

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

package/sp-checkbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-checkbox.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 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 { Checkbox } from './src/Checkbox.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-checkbox', Checkbox);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-checkbox': Checkbox;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,YAAAA,MAAgB,oBACzB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,cAAeD,CAAQ",
+  "names": ["Checkbox", "defineElement"]
+}

package/src/Checkbox.d.ts

@@ -0,0 +1,43 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.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';
+declare const Checkbox_base: typeof SpectrumElement & {
+    new (...args: any[]): import("./CheckboxMixin.js").CheckboxElement;
+    prototype: import("./CheckboxMixin.js").CheckboxElement;
+} & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+};
+/**
+ * @element sp-checkbox
+ * @slot - content to display as the label for the Checkbox
+ * @fires change - Announces a change in the `checked` property of a Checkbox
+ */
+export declare class Checkbox extends Checkbox_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    /**
+     * Disable this control. It will not receive focus or events
+     */
+    disabled: boolean;
+    indeterminate: boolean;
+    invalid: boolean;
+    emphasized: boolean;
+    tabIndex: number;
+    connectedCallback(): void;
+    static get styles(): CSSResultArray;
+    click(): void;
+    handleChange(): void;
+    protected render(): TemplateResult;
+    protected updated(changes: PropertyValues): void;
+}
+export {};

package/src/Checkbox.dev.js

@@ -0,0 +1,192 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SizedMixin,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { CheckboxMixin } from "./CheckboxMixin.dev.js";
+import checkboxStyles from "./checkbox.css.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.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";
+import checkmarkSmallStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
+import checkmarkSmallOverrides from "@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js";
+import dashSmallStyles from "@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";
+import dashSmallOverrides from "@spectrum-web-components/icon/src/icon-dash-overrides.css.js";
+const checkmarkIcon = {
+  s: () => {
+    return html`
+            <sp-icon-checkmark75
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark75"
+            ></sp-icon-checkmark75>
+        `;
+  },
+  m: () => {
+    return html`
+            <sp-icon-checkmark100
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark100"
+            ></sp-icon-checkmark100>
+        `;
+  },
+  l: () => {
+    return html`
+            <sp-icon-checkmark200
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark200"
+            ></sp-icon-checkmark200>
+        `;
+  },
+  xl: () => {
+    return html`
+            <sp-icon-checkmark300
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark300"
+            ></sp-icon-checkmark300>
+        `;
+  }
+};
+const dashIcon = {
+  s: () => {
+    return html`
+            <sp-icon-dash75
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash75"
+            ></sp-icon-dash75>
+        `;
+  },
+  m: () => {
+    return html`
+            <sp-icon-dash100
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash100"
+            ></sp-icon-dash100>
+        `;
+  },
+  l: () => {
+    return html`
+            <sp-icon-dash200
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash200"
+            ></sp-icon-dash200>
+        `;
+  },
+  xl: () => {
+    return html`
+            <sp-icon-dash300
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash300"
+            ></sp-icon-dash300>
+        `;
+  }
+};
+export class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {
+  noDefaultSize: true
+}) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.indeterminate = false;
+    this.invalid = false;
+    this.emphasized = false;
+    this.tabIndex = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasAttribute("autofocus")) {
+      this.updateComplete.then(() => {
+        this.focus();
+      });
+    }
+  }
+  static get styles() {
+    return [
+      checkboxStyles,
+      checkmarkSmallStyles,
+      dashSmallStyles,
+      checkmarkSmallOverrides,
+      dashSmallOverrides
+    ];
+  }
+  click() {
+    var _a;
+    if (this.disabled) {
+      return;
+    }
+    (_a = this.inputElement) == null ? void 0 : _a.click();
+  }
+  handleChange() {
+    this.indeterminate = false;
+    super.handleChange();
+  }
+  render() {
+    return html`
+            ${super.render()}
+            <span id="box">
+                ${this.checked ? checkmarkIcon[this.size]() : html``}
+                ${this.indeterminate ? dashIcon[this.size]() : html``}
+            </span>
+            <label id="label" for="input"><slot></slot></label>
+        `;
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("disabled") && (typeof changes.get("disabled") !== "undefined" || this.disabled)) {
+      if (this.disabled) {
+        this.inputElement.tabIndex = this.tabIndex;
+        this.tabIndex = -1;
+      } else {
+        this.tabIndex = this.inputElement.tabIndex;
+        this.inputElement.removeAttribute("tabindex");
+      }
+      this.inputElement.disabled = this.disabled;
+    }
+    if (changes.has("indeterminate")) {
+      this.inputElement.indeterminate = this.indeterminate;
+    }
+    if (changes.has("invalid")) {
+      if (this.invalid) {
+        this.inputElement.setAttribute("aria-invalid", "true");
+      } else {
+        this.inputElement.removeAttribute("aria-invalid");
+      }
+    }
+  }
+}
+Checkbox.shadowRootOptions = {
+  ...SpectrumElement.shadowRootOptions,
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "emphasized", 2);
+__decorateClass([
+  property({ reflect: true, type: Number, attribute: "tabindex" })
+], Checkbox.prototype, "tabIndex", 2);
+//# sourceMappingURL=Checkbox.dev.js.map

package/src/Checkbox.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Checkbox.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 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*/\n\nimport {\n    CSSResultArray,\n    DefaultElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxMixin } from './CheckboxMixin.dev.js'\nimport checkboxStyles from './checkbox.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\nimport dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.css.js';\n\nconst checkmarkIcon = {\n    s: () => {\n        return html`\n            <sp-icon-checkmark75\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark75\"\n            ></sp-icon-checkmark75>\n        `;\n    },\n    m: () => {\n        return html`\n            <sp-icon-checkmark100\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark100\"\n            ></sp-icon-checkmark100>\n        `;\n    },\n    l: () => {\n        return html`\n            <sp-icon-checkmark200\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark200\"\n            ></sp-icon-checkmark200>\n        `;\n    },\n    xl: () => {\n        return html`\n            <sp-icon-checkmark300\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark300\"\n            ></sp-icon-checkmark300>\n        `;\n    },\n};\n\nconst dashIcon = {\n    s: () => {\n        return html`\n            <sp-icon-dash75\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash75\"\n            ></sp-icon-dash75>\n        `;\n    },\n    m: () => {\n        return html`\n            <sp-icon-dash100\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash100\"\n            ></sp-icon-dash100>\n        `;\n    },\n    l: () => {\n        return html`\n            <sp-icon-dash200\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash200\"\n            ></sp-icon-dash200>\n        `;\n    },\n    xl: () => {\n        return html`\n            <sp-icon-dash300\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash300\"\n            ></sp-icon-dash300>\n        `;\n    },\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {\n    noDefaultSize: true,\n}) {\n    static override shadowRootOptions = {\n        ...SpectrumElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    /**\n     * Disable this control. It will not receive focus or events\n     */\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public indeterminate = false;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property({ type: Boolean, reflect: true })\n    public emphasized = false;\n\n    @property({ reflect: true, type: Number, attribute: 'tabindex' })\n    public override tabIndex = 0;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (this.hasAttribute('autofocus')) {\n            this.updateComplete.then(() => {\n                this.focus();\n            });\n        }\n    }\n\n    public static override get styles(): CSSResultArray {\n        return [\n            checkboxStyles,\n            checkmarkSmallStyles,\n            dashSmallStyles,\n            checkmarkSmallOverrides,\n            dashSmallOverrides,\n        ];\n    }\n\n    public override click(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.inputElement?.click();\n    }\n\n    public override handleChange(): void {\n        this.indeterminate = false;\n        super.handleChange();\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${super.render()}\n            <span id=\"box\">\n                ${this.checked\n                    ? checkmarkIcon[this.size as DefaultElementSize]()\n                    : html``}\n                ${this.indeterminate\n                    ? dashIcon[this.size as DefaultElementSize]()\n                    : html``}\n            </span>\n            <label id=\"label\" for=\"input\"><slot></slot></label>\n        `;\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (\n            changes.has('disabled') &&\n            (typeof changes.get('disabled') !== 'undefined' || this.disabled)\n        ) {\n            if (this.disabled) {\n                this.inputElement.tabIndex = this.tabIndex;\n                this.tabIndex = -1;\n            } else {\n                this.tabIndex = this.inputElement.tabIndex;\n                this.inputElement.removeAttribute('tabindex');\n            }\n            this.inputElement.disabled = this.disabled;\n        }\n        if (changes.has('indeterminate')) {\n            this.inputElement.indeterminate = this.indeterminate;\n        }\n        if (changes.has('invalid')) {\n            if (this.invalid) {\n                this.inputElement.setAttribute('aria-invalid', 'true');\n            } else {\n                this.inputElement.removeAttribute('aria-invalid');\n            }\n        }\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/Checkbox.js

@@ -0,0 +1,49 @@
+"use strict";var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(n,s,e,c)=>{for(var i=c>1?void 0:c?d(s,e):s,l=n.length-1,o;l>=0;l--)(o=n[l])&&(i=(c?o(s,e,i):o(i))||i);return c&&i&&m(s,e,i),i};import{html as t,SizedMixin as u,SpectrumElement as p}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{CheckboxMixin as h}from"./CheckboxMixin.js";import k from"./checkbox.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.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";import b from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";import f from"@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js";import I from"@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";import v from"@spectrum-web-components/icon/src/icon-dash-overrides.css.js";const S={s:()=>t`
+            <sp-icon-checkmark75
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark75"
+            ></sp-icon-checkmark75>
+        `,m:()=>t`
+            <sp-icon-checkmark100
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark100"
+            ></sp-icon-checkmark100>
+        `,l:()=>t`
+            <sp-icon-checkmark200
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark200"
+            ></sp-icon-checkmark200>
+        `,xl:()=>t`
+            <sp-icon-checkmark300
+                id="checkmark"
+                class="spectrum-Icon spectrum-UIIcon-Checkmark300"
+            ></sp-icon-checkmark300>
+        `},y={s:()=>t`
+            <sp-icon-dash75
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash75"
+            ></sp-icon-dash75>
+        `,m:()=>t`
+            <sp-icon-dash100
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash100"
+            ></sp-icon-dash100>
+        `,l:()=>t`
+            <sp-icon-dash200
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash200"
+            ></sp-icon-dash200>
+        `,xl:()=>t`
+            <sp-icon-dash300
+                id="partialCheckmark"
+                class="spectrum-Icon spectrum-UIIcon-Dash300"
+            ></sp-icon-dash300>
+        `};export class Checkbox extends u(h(p),{noDefaultSize:!0}){constructor(){super(...arguments);this.disabled=!1;this.indeterminate=!1;this.invalid=!1;this.emphasized=!1;this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[k,b,I,f,v]}click(){var e;this.disabled||(e=this.inputElement)==null||e.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return t`
+            ${super.render()}
+            <span id="box">
+                ${this.checked?S[this.size]():t``}
+                ${this.indeterminate?y[this.size]():t``}
+            </span>
+            <label id="label" for="input"><slot></slot></label>
+        `}updated(e){super.updated(e),e.has("disabled")&&(typeof e.get("disabled")!="undefined"||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),e.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),e.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}}Checkbox.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0},r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"disabled",2),r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"indeterminate",2),r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"invalid",2),r([a({type:Boolean,reflect:!0})],Checkbox.prototype,"emphasized",2),r([a({reflect:!0,type:Number,attribute:"tabindex"})],Checkbox.prototype,"tabIndex",2);
+//# sourceMappingURL=Checkbox.js.map

package/src/Checkbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Checkbox.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 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*/\n\nimport {\n    CSSResultArray,\n    DefaultElementSize,\n    html,\n    PropertyValues,\n    SizedMixin,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxMixin } from './CheckboxMixin.js';\nimport checkboxStyles from './checkbox.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';\nimport checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\nimport checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js';\nimport dashSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';\nimport dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.css.js';\n\nconst checkmarkIcon = {\n    s: () => {\n        return html`\n            <sp-icon-checkmark75\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark75\"\n            ></sp-icon-checkmark75>\n        `;\n    },\n    m: () => {\n        return html`\n            <sp-icon-checkmark100\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark100\"\n            ></sp-icon-checkmark100>\n        `;\n    },\n    l: () => {\n        return html`\n            <sp-icon-checkmark200\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark200\"\n            ></sp-icon-checkmark200>\n        `;\n    },\n    xl: () => {\n        return html`\n            <sp-icon-checkmark300\n                id=\"checkmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Checkmark300\"\n            ></sp-icon-checkmark300>\n        `;\n    },\n};\n\nconst dashIcon = {\n    s: () => {\n        return html`\n            <sp-icon-dash75\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash75\"\n            ></sp-icon-dash75>\n        `;\n    },\n    m: () => {\n        return html`\n            <sp-icon-dash100\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash100\"\n            ></sp-icon-dash100>\n        `;\n    },\n    l: () => {\n        return html`\n            <sp-icon-dash200\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash200\"\n            ></sp-icon-dash200>\n        `;\n    },\n    xl: () => {\n        return html`\n            <sp-icon-dash300\n                id=\"partialCheckmark\"\n                class=\"spectrum-Icon spectrum-UIIcon-Dash300\"\n            ></sp-icon-dash300>\n        `;\n    },\n};\n\n/**\n * @element sp-checkbox\n * @slot - content to display as the label for the Checkbox\n * @fires change - Announces a change in the `checked` property of a Checkbox\n */\nexport class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {\n    noDefaultSize: true,\n}) {\n    static override shadowRootOptions = {\n        ...SpectrumElement.shadowRootOptions,\n        delegatesFocus: true,\n    };\n\n    /**\n     * Disable this control. It will not receive focus or events\n     */\n    @property({ type: Boolean, reflect: true })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    public indeterminate = false;\n\n    @property({ type: Boolean, reflect: true })\n    public invalid = false;\n\n    @property({ type: Boolean, reflect: true })\n    public emphasized = false;\n\n    @property({ reflect: true, type: Number, attribute: 'tabindex' })\n    public override tabIndex = 0;\n\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        if (this.hasAttribute('autofocus')) {\n            this.updateComplete.then(() => {\n                this.focus();\n            });\n        }\n    }\n\n    public static override get styles(): CSSResultArray {\n        return [\n            checkboxStyles,\n            checkmarkSmallStyles,\n            dashSmallStyles,\n            checkmarkSmallOverrides,\n            dashSmallOverrides,\n        ];\n    }\n\n    public override click(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.inputElement?.click();\n    }\n\n    public override handleChange(): void {\n        this.indeterminate = false;\n        super.handleChange();\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            ${super.render()}\n            <span id=\"box\">\n                ${this.checked\n                    ? checkmarkIcon[this.size as DefaultElementSize]()\n                    : html``}\n                ${this.indeterminate\n                    ? dashIcon[this.size as DefaultElementSize]()\n                    : html``}\n            </span>\n            <label id=\"label\" for=\"input\"><slot></slot></label>\n        `;\n    }\n\n    protected override updated(changes: PropertyValues): void {\n        super.updated(changes);\n        if (\n            changes.has('disabled') &&\n            (typeof changes.get('disabled') !== 'undefined' || this.disabled)\n        ) {\n            if (this.disabled) {\n                this.inputElement.tabIndex = this.tabIndex;\n                this.tabIndex = -1;\n            } else {\n                this.tabIndex = this.inputElement.tabIndex;\n                this.inputElement.removeAttribute('tabindex');\n            }\n            this.inputElement.disabled = this.disabled;\n        }\n        if (changes.has('indeterminate')) {\n            this.inputElement.indeterminate = this.indeterminate;\n        }\n        if (changes.has('invalid')) {\n            if (this.invalid) {\n                this.inputElement.setAttribute('aria-invalid', 'true');\n            } else {\n                this.inputElement.removeAttribute('aria-invalid');\n            }\n        }\n    }\n}\n"],
+  "mappings": "qNAYA,OAGI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,iBAAAC,MAAqB,qBAC9B,OAAOC,MAAoB,oBAC3B,MAAO,iEACP,MAAO,kEACP,MAAO,kEACP,MAAO,kEACP,MAAO,4DACP,MAAO,6DACP,MAAO,6DACP,MAAO,6DACP,OAAOC,MAA0B,mEACjC,OAAOC,MAA6B,oEACpC,OAAOC,MAAqB,8DAC5B,OAAOC,MAAwB,+DAE/B,MAAMC,EAAgB,CAClB,EAAG,IACQV;AAAA;AAAA;AAAA;AAAA;AAAA,UAOX,EAAG,IACQA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOX,EAAG,IACQA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOX,GAAI,IACOA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOf,EAEMW,EAAW,CACb,EAAG,IACQX;AAAA;AAAA;AAAA;AAAA;AAAA,UAOX,EAAG,IACQA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOX,EAAG,IACQA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOX,GAAI,IACOA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOf,EAOO,aAAM,iBAAiBC,EAAWG,EAAcF,CAAe,EAAG,CACrE,cAAe,EACnB,CAAC,CAAE,CAFI,kCAYH,KAAO,SAAW,GAGlB,KAAO,cAAgB,GAGvB,KAAO,QAAU,GAGjB,KAAO,WAAa,GAGpB,KAAgB,SAAW,EAEX,mBAA0B,CACtC,MAAM,kBAAkB,EACpB,KAAK,aAAa,WAAW,GAC7B,KAAK,eAAe,KAAK,IAAM,CAC3B,KAAK,MAAM,CACf,CAAC,CAET,CAEA,WAA2B,QAAyB,CAChD,MAAO,CACHG,EACAC,EACAE,EACAD,EACAE,CACJ,CACJ,CAEgB,OAAc,CA7JlC,IAAAG,EA8JY,KAAK,WAITA,EAAA,KAAK,eAAL,MAAAA,EAAmB,OACvB,CAEgB,cAAqB,CACjC,KAAK,cAAgB,GACrB,MAAM,aAAa,CACvB,CAEmB,QAAyB,CACxC,OAAOZ;AAAA,cACD,MAAM,OAAO,CAAC;AAAA;AAAA,kBAEV,KAAK,QACDU,EAAc,KAAK,IAA0B,EAAE,EAC/CV,GAAM;AAAA,kBACV,KAAK,cACDW,EAAS,KAAK,IAA0B,EAAE,EAC1CX,GAAM;AAAA;AAAA;AAAA,SAIxB,CAEmB,QAAQa,EAA+B,CACtD,MAAM,QAAQA,CAAO,EAEjBA,EAAQ,IAAI,UAAU,IACrB,OAAOA,EAAQ,IAAI,UAAU,GAAM,aAAe,KAAK,YAEpD,KAAK,UACL,KAAK,aAAa,SAAW,KAAK,SAClC,KAAK,SAAW,KAEhB,KAAK,SAAW,KAAK,aAAa,SAClC,KAAK,aAAa,gBAAgB,UAAU,GAEhD,KAAK,aAAa,SAAW,KAAK,UAElCA,EAAQ,IAAI,eAAe,IAC3B,KAAK,aAAa,cAAgB,KAAK,eAEvCA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,aAAa,eAAgB,MAAM,EAErD,KAAK,aAAa,gBAAgB,cAAc,EAG5D,CACJ,CAnGa,SAGO,kBAAoB,CAChC,GAAGX,EAAgB,kBACnB,eAAgB,EACpB,EAMOY,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,SAYF,wBAGAW,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdjC,SAeF,6BAGAW,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjBjC,SAkBF,uBAGAW,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBjC,SAqBF,0BAGSW,EAAA,CADfX,EAAS,CAAE,QAAS,GAAM,KAAM,OAAQ,UAAW,UAAW,CAAC,GAvBvD,SAwBO",
+  "names": ["html", "SizedMixin", "SpectrumElement", "property", "CheckboxMixin", "checkboxStyles", "checkmarkSmallStyles", "checkmarkSmallOverrides", "dashSmallStyles", "dashSmallOverrides", "checkmarkIcon", "dashIcon", "_a", "changes", "__decorateClass"]
+}

package/src/CheckboxBase.d.ts

@@ -0,0 +1,9 @@
+import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+declare const CheckboxBase_base: typeof Focusable & {
+    new (...args: any[]): import("./CheckboxMixin.js").CheckboxElement;
+    prototype: import("./CheckboxMixin.js").CheckboxElement;
+};
+export declare class CheckboxBase extends CheckboxBase_base {
+    get focusElement(): HTMLElement;
+}
+export {};

package/src/CheckboxBase.dev.js

@@ -0,0 +1,9 @@
+"use strict";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import { CheckboxMixin } from "./CheckboxMixin.dev.js";
+export class CheckboxBase extends CheckboxMixin(Focusable) {
+  get focusElement() {
+    return this.inputElement;
+  }
+}
+//# sourceMappingURL=CheckboxBase.dev.js.map