@esri/solutions-components 0.2.1 → 0.2.2

package/dist/components/tabs.js

@@ -1,190 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
- */
-const SLOTS = {
-  tabNav: "tab-nav"
-};
-
-const tabsCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-ui-border-1);background-color:var(--calcite-ui-foreground-1)}:host([bordered]:not([position=below])) ::slotted(calcite-tab-nav){-webkit-margin-after:-1px;margin-block-end:-1px}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){-webkit-margin-after:-1px;margin-block-end:-1px}:host([bordered][position=below]) ::slotted(calcite-tab-nav){-webkit-margin-before:-1px;margin-block-start:-1px}:host([bordered][position=below]){box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1)}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1)}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=below]){flex-direction:column-reverse}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-ui-border-1);border-block-start-style:solid}:host([position=below]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-ui-border-1)}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-ui-border-1)}:host([position=below]:not([bordered])) section{border-block-end-style:solid}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=below][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}";
-
-const Tabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
-     */
-    this.layout = "inline";
-    /**
-     * Specifies the position of the component in relation to the `calcite-tab`s. The `"above"` and `"below"` values are deprecated.
-     *
-     */
-    this.position = "top";
-    /**
-     * Specifies the size of the component.
-     */
-    this.scale = "m";
-    /**
-     * When `true`, the component will display with a folder style menu.
-     */
-    this.bordered = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Events
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    /**
-     *
-     * Stores an array of ids of `<calcite-tab-titles>`s to match up ARIA
-     * attributes.
-     */
-    this.titles = [];
-    /**
-     *
-     * Stores an array of ids of `<calcite-tab>`s to match up ARIA attributes.
-     */
-    this.tabs = [];
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  render() {
-    return (h(Fragment, null, h("slot", { name: SLOTS.tabNav }), h("section", null, h("slot", null))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * @param event
-   * @internal
-   */
-  calciteInternalTabTitleRegister(event) {
-    this.titles = [...this.titles, event.target];
-    this.registryHandler();
-    event.stopPropagation();
-  }
-  /**
-   * @param event
-   * @internal
-   */
-  calciteTabTitleUnregister(event) {
-    this.titles = this.titles.filter((el) => el !== event.detail);
-    this.registryHandler();
-    event.stopPropagation();
-  }
-  /**
-   * @param event
-   * @internal
-   */
-  calciteInternalTabRegister(event) {
-    this.tabs = [...this.tabs, event.target];
-    this.registryHandler();
-    event.stopPropagation();
-  }
-  /**
-   * @param event
-   * @internal
-   */
-  calciteTabUnregister(event) {
-    this.tabs = this.tabs.filter((el) => el !== event.detail);
-    this.registryHandler();
-    event.stopPropagation();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  /**
-   *
-   * Matches up elements from the internal `tabs` and `titles` to automatically
-   * update the ARIA attributes and link `<calcite-tab>` and
-   * `<calcite-tab-title>` components.
-   */
-  async registryHandler() {
-    let tabIds;
-    let titleIds;
-    // determine if we are using `tab` based or `index` based tab identifiers.
-    if (this.tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
-      // if we are using `tab` based identifiers sort by `tab` to account for
-      // possible out of order tabs and get the id of each tab
-      tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
-      titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
-    }
-    else {
-      // if we are using index based tabs then the `<calcite-tab>` and
-      // `<calcite-tab-title>` might have been rendered out of order so the
-      // order of `this.tabs` and `this.titles` might not reflect the DOM state,
-      // and might not match each other so we need to get the index of all the
-      // tabs and titles in the DOM order to match them up as a source of truth
-      const tabDomIndexes = await Promise.all(this.tabs.map((el) => el.getTabIndex()));
-      const titleDomIndexes = await Promise.all(this.titles.map((el) => el.getTabIndex()));
-      // once we have the DOM order as a source of truth we can build the
-      // matching tabIds and titleIds arrays
-      tabIds = tabDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
-        ids[indexInDOM] = this.tabs[registryIndex].id;
-        return ids;
-      }, []);
-      titleIds = titleDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
-        ids[indexInDOM] = this.titles[registryIndex].id;
-        return ids;
-      }, []);
-    }
-    // pass all our new aria information to each `<calcite-tab>` and
-    // `<calcite-tab-title>` which will check if they can update their internal
-    // `controlled` or `labeledBy` states and re-render if necessary
-    this.tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
-    this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
-  }
-  get el() { return this; }
-  static get style() { return tabsCss; }
-}, [1, "calcite-tabs", {
-    "layout": [513],
-    "position": [513],
-    "scale": [513],
-    "bordered": [1540],
-    "titles": [32],
-    "tabs": [32]
-  }, [[0, "calciteInternalTabTitleRegister", "calciteInternalTabTitleRegister"], [16, "calciteTabTitleUnregister", "calciteTabTitleUnregister"], [0, "calciteInternalTabRegister", "calciteInternalTabRegister"], [16, "calciteTabUnregister", "calciteTabUnregister"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-tabs"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tabs);
-      }
-      break;
-  } });
-}
-defineCustomElement();
-
-export { Tabs as T, defineCustomElement as d };
-
-//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -1 +0,0 @@
-{"file":"tabs.js","mappings":"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","names":[],"sources":["./node_modules/@esri/calcite-components/dist/collection/components/tabs/resources.js","./node_modules/@esri/calcite-components/dist/collection/components/tabs/tabs.css?tag=calcite-tabs&encapsulation=shadow","./node_modules/@esri/calcite-components/dist/collection/components/tabs/tabs.js"],"sourcesContent":["/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nexport const SLOTS = {\n  tabNav: \"tab-nav\"\n};\n","/* mixins & extensions */\n@keyframes in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes in-down {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, -5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-up {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, 5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-scale {\n  0% {\n    opacity: 0;\n    transform: scale3D(0.95, 0.95, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale3D(1, 1, 1);\n  }\n}\n:root {\n  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);\n  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));\n}\n\n.calcite-animate {\n  opacity: 0;\n  animation-fill-mode: both;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.calcite-animate__in {\n  animation-name: in;\n}\n\n.calcite-animate__in-down {\n  animation-name: in-down;\n}\n\n.calcite-animate__in-up {\n  animation-name: in-up;\n}\n\n.calcite-animate__in-scale {\n  animation-name: in-scale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0.01;\n  }\n}\n/**\n* Currently only used in Checkbox.\n*/\n:root {\n  --calcite-floating-ui-transition: var(--calcite-animation-timing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n\n:host([bordered]) {\n  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1);\n  background-color: var(--calcite-ui-foreground-1);\n}\n\n:host([bordered]:not([position=below])) ::slotted(calcite-tab-nav) {\n  margin-block-end: -1px;\n}\n\n:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav) {\n  margin-block-end: -1px;\n}\n\n:host([bordered][position=below]) ::slotted(calcite-tab-nav) {\n  margin-block-start: -1px;\n}\n\n:host([bordered][position=below]) {\n  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);\n}\n\n:host([bordered][position=bottom]) {\n  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);\n}\n\n:host([bordered]) section {\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--calcite-ui-border-1);\n}\n\n:host([bordered][scale=s]) section {\n  padding: 0.75rem;\n}\n\n:host([bordered][scale=m]) section {\n  padding: 0.5rem;\n}\n\n:host([bordered][scale=l]) section {\n  padding: 1rem;\n}\n\n:host([position=below]) {\n  flex-direction: column-reverse;\n}\n\n:host([position=bottom]) {\n  flex-direction: column-reverse;\n}\n\nsection {\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  border-block-start-width: 1px;\n  border-block-start-color: var(--calcite-ui-border-1);\n  border-block-start-style: solid;\n}\n\n:host([position=below]) section {\n  flex-direction: column-reverse;\n  border-block-start-width: 0px;\n  border-block-end-width: 1px;\n  border-block-end-color: var(--calcite-ui-border-1);\n}\n\n:host([position=bottom]) section {\n  flex-direction: column-reverse;\n  border-block-start-width: 0px;\n  border-block-end-width: 1px;\n  border-block-end-color: var(--calcite-ui-border-1);\n}\n\n:host([position=below]:not([bordered])) section {\n  border-block-end-style: solid;\n}\n\n:host([position=bottom]:not([bordered])) section {\n  border-block-end-style: solid;\n}\n\n@media (forced-colors: active) {\n  :host([bordered]) section {\n    border-block-start-width: 0px;\n    border-block-end-width: 1px;\n  }\n\n  :host([position=below][bordered]) section {\n    border-block-start-width: 1px;\n    border-block-end-width: 0px;\n  }\n\n  :host([position=bottom][bordered]) section {\n    border-block-start-width: 1px;\n    border-block-end-width: 0px;\n  }\n}","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nimport { h, Fragment } from \"@stencil/core\";\nimport { SLOTS } from \"./resources\";\n/**\n * @slot - A slot for adding `calcite-tab`s.\n * @slot tab-nav - A slot for adding a `calcite-tab-nav`.\n */\nexport class Tabs {\n  constructor() {\n    //--------------------------------------------------------------------------\n    //\n    //  Public Properties\n    //\n    //--------------------------------------------------------------------------\n    /**\n     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`\"inline\"`), or across and centered (`\"center\"`).\n     */\n    this.layout = \"inline\";\n    /**\n     * Specifies the position of the component in relation to the `calcite-tab`s. The `\"above\"` and `\"below\"` values are deprecated.\n     *\n     */\n    this.position = \"top\";\n    /**\n     * Specifies the size of the component.\n     */\n    this.scale = \"m\";\n    /**\n     * When `true`, the component will display with a folder style menu.\n     */\n    this.bordered = false;\n    //--------------------------------------------------------------------------\n    //\n    //  Events\n    //\n    //--------------------------------------------------------------------------\n    //--------------------------------------------------------------------------\n    //\n    //  Private State/Props\n    //\n    //--------------------------------------------------------------------------\n    /**\n     *\n     * Stores an array of ids of `<calcite-tab-titles>`s to match up ARIA\n     * attributes.\n     */\n    this.titles = [];\n    /**\n     *\n     * Stores an array of ids of `<calcite-tab>`s to match up ARIA attributes.\n     */\n    this.tabs = [];\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n  render() {\n    return (h(Fragment, null, h(\"slot\", { name: SLOTS.tabNav }), h(\"section\", null, h(\"slot\", null))));\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n  /**\n   * @param event\n   * @internal\n   */\n  calciteInternalTabTitleRegister(event) {\n    this.titles = [...this.titles, event.target];\n    this.registryHandler();\n    event.stopPropagation();\n  }\n  /**\n   * @param event\n   * @internal\n   */\n  calciteTabTitleUnregister(event) {\n    this.titles = this.titles.filter((el) => el !== event.detail);\n    this.registryHandler();\n    event.stopPropagation();\n  }\n  /**\n   * @param event\n   * @internal\n   */\n  calciteInternalTabRegister(event) {\n    this.tabs = [...this.tabs, event.target];\n    this.registryHandler();\n    event.stopPropagation();\n  }\n  /**\n   * @param event\n   * @internal\n   */\n  calciteTabUnregister(event) {\n    this.tabs = this.tabs.filter((el) => el !== event.detail);\n    this.registryHandler();\n    event.stopPropagation();\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n  /**\n   *\n   * Matches up elements from the internal `tabs` and `titles` to automatically\n   * update the ARIA attributes and link `<calcite-tab>` and\n   * `<calcite-tab-title>` components.\n   */\n  async registryHandler() {\n    let tabIds;\n    let titleIds;\n    // determine if we are using `tab` based or `index` based tab identifiers.\n    if (this.tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {\n      // if we are using `tab` based identifiers sort by `tab` to account for\n      // possible out of order tabs and get the id of each tab\n      tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);\n      titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);\n    }\n    else {\n      // if we are using index based tabs then the `<calcite-tab>` and\n      // `<calcite-tab-title>` might have been rendered out of order so the\n      // order of `this.tabs` and `this.titles` might not reflect the DOM state,\n      // and might not match each other so we need to get the index of all the\n      // tabs and titles in the DOM order to match them up as a source of truth\n      const tabDomIndexes = await Promise.all(this.tabs.map((el) => el.getTabIndex()));\n      const titleDomIndexes = await Promise.all(this.titles.map((el) => el.getTabIndex()));\n      // once we have the DOM order as a source of truth we can build the\n      // matching tabIds and titleIds arrays\n      tabIds = tabDomIndexes.reduce((ids, indexInDOM, registryIndex) => {\n        ids[indexInDOM] = this.tabs[registryIndex].id;\n        return ids;\n      }, []);\n      titleIds = titleDomIndexes.reduce((ids, indexInDOM, registryIndex) => {\n        ids[indexInDOM] = this.titles[registryIndex].id;\n        return ids;\n      }, []);\n    }\n    // pass all our new aria information to each `<calcite-tab>` and\n    // `<calcite-tab-title>` which will check if they can update their internal\n    // `controlled` or `labeledBy` states and re-render if necessary\n    this.tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));\n    this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));\n  }\n  static get is() { return \"calcite-tabs\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() {\n    return {\n      \"$\": [\"tabs.scss\"]\n    };\n  }\n  static get styleUrls() {\n    return {\n      \"$\": [\"tabs.css\"]\n    };\n  }\n  static get properties() {\n    return {\n      \"layout\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"TabLayout\",\n          \"resolved\": \"\\\"center\\\" | \\\"inline\\\"\",\n          \"references\": {\n            \"TabLayout\": {\n              \"location\": \"import\",\n              \"path\": \"./interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`\\\"inline\\\"`), or across and centered (`\\\"center\\\"`).\"\n        },\n        \"attribute\": \"layout\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"inline\\\"\"\n      },\n      \"position\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"TabPosition\",\n          \"resolved\": \"\\\"above\\\" | \\\"below\\\" | \\\"bottom\\\" | \\\"top\\\"\",\n          \"references\": {\n            \"TabPosition\": {\n              \"location\": \"import\",\n              \"path\": \"./interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the position of the component in relation to the `calcite-tab`s. The `\\\"above\\\"` and `\\\"below\\\"` values are deprecated.\"\n        },\n        \"attribute\": \"position\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"top\\\"\"\n      },\n      \"scale\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"Scale\",\n          \"resolved\": \"\\\"l\\\" | \\\"m\\\" | \\\"s\\\"\",\n          \"references\": {\n            \"Scale\": {\n              \"location\": \"import\",\n              \"path\": \"../interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the size of the component.\"\n        },\n        \"attribute\": \"scale\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"m\\\"\"\n      },\n      \"bordered\": {\n        \"type\": \"boolean\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, the component will display with a folder style menu.\"\n        },\n        \"attribute\": \"bordered\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      }\n    };\n  }\n  static get states() {\n    return {\n      \"titles\": {},\n      \"tabs\": {}\n    };\n  }\n  static get elementRef() { return \"el\"; }\n  static get listeners() {\n    return [{\n        \"name\": \"calciteInternalTabTitleRegister\",\n        \"method\": \"calciteInternalTabTitleRegister\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteTabTitleUnregister\",\n        \"method\": \"calciteTabTitleUnregister\",\n        \"target\": \"body\",\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteInternalTabRegister\",\n        \"method\": \"calciteInternalTabRegister\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteTabUnregister\",\n        \"method\": \"calciteTabUnregister\",\n        \"target\": \"body\",\n        \"capture\": false,\n        \"passive\": false\n      }];\n  }\n}\n"],"version":3}

package/dist/components/tile.js

@@ -1,131 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { b as getSlotted } from './dom.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { u as updateHostInteraction } from './interactive.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './link.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.97
- */
-const SLOTS = {
-  contentStart: "content-start",
-  contentEnd: "content-end"
-};
-
-const tileCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{box-sizing:border-box;display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .container{pointer-events:none;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:0.5rem}:host .content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:0.5rem;inline-size:10%}:host .content-container{display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;padding:0px;color:var(--calcite-ui-text-2);outline-color:transparent}:host .content-slot-container{display:flex;align-items:center;background-color:var(--calcite-ui-foreground-1)}:host .content-slot-container:first-child{padding-inline:0 0.75rem}:host .content-slot-container:last-child{padding-inline:0.75rem 0}:host .heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .large-visual{align-items:center;text-align:center;min-block-size:12rem}:host .large-visual .icon{display:flex;justify-content:center;align-self:flex-end}:host .large-visual .content-container{align-self:center}:host .description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host(:not([embed])){padding:0.75rem;box-shadow:0 0 0 1px var(--calcite-ui-border-2)}:host(:not([embed])[href]:hover){cursor:pointer;box-shadow:0 0 0 2px var(--calcite-ui-brand)}:host(:not([embed])[href]:active){box-shadow:0 0 0 3px var(--calcite-ui-brand)}:host([icon][heading]:not([description]):not([embed])){padding:0px}:host([icon][heading]:not([description])) .icon{display:flex;justify-content:center}:host([icon][heading]:not([description])) .large-visual{text-align:center}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host(:hover) .heading,:host([active]) .heading{color:var(--calcite-ui-text-1)}:host(:hover) .description,:host([active]) .description{color:var(--calcite-ui-text-2)}";
-
-const Tile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     */
-    this.active = false;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * The component's embed mode.
-     *
-     * When `true`, renders without a border and padding for use by other components.
-     */
-    this.embed = false;
-    /**
-     * The focused state of the component.
-     *
-     * @internal
-     */
-    this.focused = false;
-    /** When `true`, the component is not displayed and is not focusable.  */
-    this.hidden = false;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    disconnectConditionalSlotComponent(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderTile() {
-    const { icon, el, heading, description } = this;
-    const isLargeVisual = heading && icon && !description;
-    const iconStyle = isLargeVisual
-      ? {
-        height: "64px",
-        width: "64px"
-      }
-      : undefined;
-    return (h("div", { class: { container: true, "large-visual": isLargeVisual } }, icon && (h("div", { class: "icon" }, h("calcite-icon", { icon: icon, scale: "l", style: iconStyle }))), h("div", { class: "content-container" }, getSlotted(el, SLOTS.contentStart) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentStart }))) : null, h("div", { class: "content" }, heading && h("div", { class: "heading" }, heading), description && h("div", { class: "description" }, description)), getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: "content-slot-container" }, h("slot", { name: SLOTS.contentEnd }))) : null)));
-  }
-  render() {
-    return (h(Fragment, null, this.href ? (h("calcite-link", { disabled: this.disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
-  }
-  get el() { return this; }
-  static get style() { return tileCss; }
-}, [1, "calcite-tile", {
-    "active": [516],
-    "description": [513],
-    "disabled": [516],
-    "embed": [516],
-    "focused": [516],
-    "heading": [513],
-    "hidden": [516],
-    "href": [513],
-    "icon": [513]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-tile", "calcite-icon", "calcite-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-tile":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tile);
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "calcite-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-defineCustomElement();
-
-export { Tile as T, defineCustomElement as d };
-
-//# sourceMappingURL=tile.js.map

package/dist/components/tile.js.map

@@ -1 +0,0 @@
-{"file":"tile.js","mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACO,MAAM,KAAK,GAAG;AACrB,EAAE,YAAY,EAAE,eAAe;AAC/B,EAAE,UAAU,EAAE,aAAa;AAC3B,CAAC;;ACRD,MAAM,OAAO,GAAG,gwHAAgwH;;MCcnwH,IAAI;EACf;;;;;;;;;;;;IASE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;;;;IAIpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;;;;;;IAMtB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;;;;;;IAMnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;;IAErB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;;;;;;EAMD,iBAAiB;IACf,+BAA+B,CAAC,IAAI,CAAC,CAAC;GACvC;EACD,oBAAoB;IAClB,kCAAkC,CAAC,IAAI,CAAC,CAAC;GAC1C;EACD,kBAAkB;IAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;GAC7B;;;;;;EAMD,UAAU;IACR,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAChD,MAAM,aAAa,GAAG,OAAO,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;IACtD,MAAM,SAAS,GAAG,aAAa;QAC3B;QACA,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;OACd;QACC,SAAS,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,WAAW,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE;GAChoB;EACD,MAAM;IACJ,QAAQ,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE;GACpJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./node_modules/@esri/calcite-components/dist/collection/components/tile/resources.js","./node_modules/@esri/calcite-components/dist/collection/components/tile/tile.css?tag=calcite-tile&encapsulation=shadow","./node_modules/@esri/calcite-components/dist/collection/components/tile/tile.js"],"sourcesContent":["/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nexport const SLOTS = {\n  contentStart: \"content-start\",\n  contentEnd: \"content-end\"\n};\n","/* mixins & extensions */\n@keyframes in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes in-down {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, -5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-up {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, 5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-scale {\n  0% {\n    opacity: 0;\n    transform: scale3D(0.95, 0.95, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale3D(1, 1, 1);\n  }\n}\n:root {\n  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);\n  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));\n}\n\n.calcite-animate {\n  opacity: 0;\n  animation-fill-mode: both;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.calcite-animate__in {\n  animation-name: in;\n}\n\n.calcite-animate__in-down {\n  animation-name: in-down;\n}\n\n.calcite-animate__in-up {\n  animation-name: in-up;\n}\n\n.calcite-animate__in-scale {\n  animation-name: in-scale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0.01;\n  }\n}\n/**\n* Currently only used in Checkbox.\n*/\n:root {\n  --calcite-floating-ui-transition: var(--calcite-animation-timing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  cursor: default;\n  -webkit-user-select: none;\n          user-select: none;\n  opacity: var(--calcite-ui-opacity-disabled);\n}\n\n:host {\n  box-sizing: border-box;\n  display: inline-block;\n  -webkit-user-select: none;\n          user-select: none;\n  background-color: var(--calcite-ui-foreground-1);\n  color: var(--calcite-ui-text-3);\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host .container {\n  pointer-events: none;\n  display: grid;\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n  gap: 0.5rem;\n}\n:host .content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  justify-content: center;\n  gap: 0.5rem;\n  inline-size: 10%;\n}\n:host .content-container {\n  display: flex;\n  inline-size: 100%;\n  flex: 1 1 auto;\n  align-items: stretch;\n  padding: 0px;\n  color: var(--calcite-ui-text-2);\n  outline-color: transparent;\n}\n:host .content-slot-container {\n  display: flex;\n  align-items: center;\n  background-color: var(--calcite-ui-foreground-1);\n}\n:host .content-slot-container:first-child {\n  padding-inline: 0 0.75rem;\n}\n:host .content-slot-container:last-child {\n  padding-inline: 0.75rem 0;\n}\n:host .heading {\n  pointer-events: none;\n  overflow-wrap: break-word;\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-2);\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n:host .large-visual {\n  align-items: center;\n  text-align: center;\n  min-block-size: 12rem;\n}\n:host .large-visual .icon {\n  display: flex;\n  justify-content: center;\n  align-self: flex-end;\n}\n:host .large-visual .content-container {\n  align-self: center;\n}\n:host .description {\n  pointer-events: none;\n  overflow-wrap: break-word;\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n  color: var(--calcite-ui-text-3);\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host(:not([embed])) {\n  padding: 0.75rem;\n  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);\n}\n\n:host(:not([embed])[href]:hover) {\n  cursor: pointer;\n  box-shadow: 0 0 0 2px var(--calcite-ui-brand);\n}\n\n:host(:not([embed])[href]:active) {\n  box-shadow: 0 0 0 3px var(--calcite-ui-brand);\n}\n\n:host([icon][heading]:not([description]):not([embed])) {\n  padding: 0px;\n}\n\n:host([icon][heading]:not([description])) .icon {\n  display: flex;\n  justify-content: center;\n}\n:host([icon][heading]:not([description])) .large-visual {\n  text-align: center;\n}\n\n:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled] {\n  /* prevent opacity stacking */\n  opacity: 1;\n}\n\n:host(:hover) .heading, \n:host([active]) .heading {\n  color: var(--calcite-ui-text-1);\n}\n:host(:hover) .description, \n:host([active]) .description {\n  color: var(--calcite-ui-text-2);\n}","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nimport { Fragment, h } from \"@stencil/core\";\nimport { SLOTS } from \"./resources\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from \"../../utils/conditionalSlot\";\nimport { updateHostInteraction } from \"../../utils/interactive\";\n/**\n * @slot content-start - A slot for adding non-actionable elements before the component's content.\n * @slot content-end - A slot for adding non-actionable elements after the component's content.\n */\nexport class Tile {\n  constructor() {\n    //--------------------------------------------------------------------------\n    //\n    //  Properties\n    //\n    //--------------------------------------------------------------------------\n    /**\n     * When `true`, the component is active.\n     */\n    this.active = false;\n    /**\n     * When `true`, interaction is prevented and the component is displayed with lower opacity.\n     */\n    this.disabled = false;\n    /**\n     * The component's embed mode.\n     *\n     * When `true`, renders without a border and padding for use by other components.\n     */\n    this.embed = false;\n    /**\n     * The focused state of the component.\n     *\n     * @internal\n     */\n    this.focused = false;\n    /** When `true`, the component is not displayed and is not focusable.  */\n    this.hidden = false;\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n  connectedCallback() {\n    connectConditionalSlotComponent(this);\n  }\n  disconnectedCallback() {\n    disconnectConditionalSlotComponent(this);\n  }\n  componentDidRender() {\n    updateHostInteraction(this);\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  renderTile() {\n    const { icon, el, heading, description } = this;\n    const isLargeVisual = heading && icon && !description;\n    const iconStyle = isLargeVisual\n      ? {\n        height: \"64px\",\n        width: \"64px\"\n      }\n      : undefined;\n    return (h(\"div\", { class: { container: true, \"large-visual\": isLargeVisual } }, icon && (h(\"div\", { class: \"icon\" }, h(\"calcite-icon\", { icon: icon, scale: \"l\", style: iconStyle }))), h(\"div\", { class: \"content-container\" }, getSlotted(el, SLOTS.contentStart) ? (h(\"div\", { class: \"content-slot-container\" }, h(\"slot\", { name: SLOTS.contentStart }))) : null, h(\"div\", { class: \"content\" }, heading && h(\"div\", { class: \"heading\" }, heading), description && h(\"div\", { class: \"description\" }, description)), getSlotted(el, SLOTS.contentEnd) ? (h(\"div\", { class: \"content-slot-container\" }, h(\"slot\", { name: SLOTS.contentEnd }))) : null)));\n  }\n  render() {\n    return (h(Fragment, null, this.href ? (h(\"calcite-link\", { disabled: this.disabled, href: this.href }, this.renderTile())) : (this.renderTile())));\n  }\n  static get is() { return \"calcite-tile\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() {\n    return {\n      \"$\": [\"tile.scss\"]\n    };\n  }\n  static get styleUrls() {\n    return {\n      \"$\": [\"tile.css\"]\n    };\n  }\n  static get properties() {\n    return {\n      \"active\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, the component is active.\"\n        },\n        \"attribute\": \"active\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"description\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"A description for the component, which displays below the heading.\"\n        },\n        \"attribute\": \"description\",\n        \"reflect\": true\n      },\n      \"disabled\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, interaction is prevented and the component is displayed with lower opacity.\"\n        },\n        \"attribute\": \"disabled\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"embed\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"The component's embed mode.\\n\\nWhen `true`, renders without a border and padding for use by other components.\"\n        },\n        \"attribute\": \"embed\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"focused\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"The focused state of the component.\"\n        },\n        \"attribute\": \"focused\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"heading\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"The component header text, which displays between the icon and description.\"\n        },\n        \"attribute\": \"heading\",\n        \"reflect\": true\n      },\n      \"hidden\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, the component is not displayed and is not focusable.\"\n        },\n        \"attribute\": \"hidden\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"href\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When embed is `\\\"false\\\"`, the URL for the component.\"\n        },\n        \"attribute\": \"href\",\n        \"reflect\": true\n      },\n      \"icon\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies an icon to display.\"\n        },\n        \"attribute\": \"icon\",\n        \"reflect\": true\n      }\n    };\n  }\n  static get elementRef() { return \"el\"; }\n}\n"],"version":3}