@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.daba936

package/dist/cjs/six-tab-panel.cjs.entry.js

@@ -2,24 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
+const index = require('./index-5dd19c4b.js');
 
-const sixTabPanelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";
+const sixTabPanelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.tab-panel{border:solid 1px transparent;padding:20px 20px}";
 
 let id = 0;
 const SixTabPanel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.componentId = `tab-panel-${++id}`;
-    this.name = '';
-    this.active = false;
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-    index.h(index.Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, index.h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.componentId = `tab-panel-${++id}`;
+        this.name = '';
+        this.active = false;
+    }
+    render() {
+        return (
+        // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
+        index.h(index.Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } }, index.h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' }, index.h("slot", null))));
+    }
+    get host() { return index.getElement(this); }
 };
 SixTabPanel.style = sixTabPanelCss;
 

package/dist/cjs/six-tab-panel.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-tab-panel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,yNAAyN;;ACEhP,IAAI,EAAE,GAAG,CAAC,CAAC;MAkBE,WAAW;;;IACd,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;gBAK3B,EAAE;kBAGiB,KAAK;;EAEvC,MAAM;IACJ;;IAEEA,QAACC,UAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,IAC5FD,iBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,iBAChC,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,IAE3CA,qBAAQ,CACJ,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","./src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  font-family: var(--six-font-family);\n}\n\n.tab-panel {\n  border: solid 1px transparent;\n  padding: 20px 20px;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  private componentId = `tab-panel-${++id}`;\n\n  @Element() host!: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-tab-panel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,4NAA4N;;ACEnP,IAAI,EAAE,GAAG,CAAC,CAAC;MAkBE,WAAW;;;QACd,gBAAW,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC;oBAK3B,EAAE;sBAGiB,KAAK;;IAEvC,MAAM;QACJ;;QAEEA,QAACC,UAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,IAC5FD,iBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,iBAChC,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,IAE3CA,qBAAQ,CACJ,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/six-tab-panel/six-tab-panel.scss?tag=six-tab-panel&encapsulation=shadow","src/components/six-tab-panel/six-tab-panel.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  font-family: var(--six-font-family);\n}\n\n.tab-panel {\n  border: solid 1px transparent;\n  padding: 20px 20px;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab panel's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab-panel',\n  styleUrl: 'six-tab-panel.scss',\n  shadow: true,\n})\nexport class SixTabPanel {\n  private componentId = `tab-panel-${++id}`;\n\n  @Element() host!: HTMLSixTabPanelElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab panel will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>\n        <div\n          part=\"base\"\n          class=\"tab-panel\"\n          role=\"tabpanel\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-hidden={this.active ? 'false' : 'true'}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-tab.cjs.entry.js

@@ -2,49 +2,65 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
+const index = require('./index-5dd19c4b.js');
 
-const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";
+const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";
 
 let id = 0;
 const SixTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixClose = index.createEvent(this, "six-tab-close", 7);
-    this.componentId = `tab-${++id}`;
-    this.panel = '';
-    this.active = false;
-    this.closable = false;
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-  }
-  /** Sets focus to the tab. */
-  async setFocus(options) {
-    var _a;
-    (_a = this.tab) === null || _a === void 0 ? void 0 : _a.focus(options);
-  }
-  /** Removes focus from the tab. */
-  async removeFocus() {
-    var _a;
-    (_a = this.tab) === null || _a === void 0 ? void 0 : _a.blur();
-  }
-  handleCloseClick() {
-    this.sixClose.emit();
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    index.h(index.Host, { id: this.host.id || this.componentId }, index.h("div", { part: "base", ref: (el) => (this.tab = el), class: {
-        tab: true,
-        // States
-        'tab--active': this.active,
-        'tab--closable': this.closable,
-        'tab--disabled': this.disabled,
-      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, index.h("slot", null), this.closable && (index.h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
-  }
-  get host() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixClose = index.createEvent(this, "six-tab-close", 7);
+        this.componentId = `tab-${++id}`;
+        this.panel = '';
+        this.active = false;
+        this.closable = false;
+        this.disabled = false;
+    }
+    connectedCallback() {
+        this.handleCloseClick = this.handleCloseClick.bind(this);
+    }
+    /** Sets focus to the tab. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.tab) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the tab. */
+    async removeFocus() {
+        var _a;
+        (_a = this.tab) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    handleCloseClick() {
+        this.sixClose.emit();
+    }
+    render() {
+        var _a;
+        const tabGroup = this.host.closest('six-tab-group');
+        const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
+        return (
+        // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
+        index.h(index.Host, { id: this.host.id || this.componentId }, index.h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+                tab: true,
+                // Placements
+                'tab--top': placement === 'top',
+                'tab--bottom': placement === 'bottom',
+                'tab--left': placement === 'left',
+                'tab--right': placement === 'right',
+                // States
+                'tab--active': this.active,
+                'tab--closable': this.closable,
+                'tab--disabled': this.disabled,
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, index.h("slot", null), this.closable && (index.h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), index.h("div", { class: {
+                tab__indicator: true,
+                'tab__indicator--active': this.active,
+                // Placements
+                'tab__indicator--top': placement === 'top',
+                'tab__indicator--bottom': placement === 'bottom',
+                'tab__indicator--left': placement === 'left',
+                'tab__indicator--right': placement === 'right',
+            } })));
+    }
+    get host() { return index.getElement(this); }
 };
 SixTab.style = sixTabCss;
 

package/dist/cjs/six-tab.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,ikCAAikC;;ACGnlC,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;IACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;iBAMH,EAAE;kBAGD,KAAK;oBAGpB,KAAK;oBAGY,KAAK;;EAKzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;;EAID,MAAM,QAAQ,CAAC,OAAsB;;IACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;GAC1B;;EAID,MAAM,WAAW;;IACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;GAClB;EAEO,gBAAgB;IACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,MAAM;IACJ;;IAEEA,QAACC,UAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxCD,iBACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,aAAa,EAAE,IAAI,CAAC,MAAM;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;OAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpDA,qBAAQ,EACP,IAAI,CAAC,QAAQ,KACZA,6BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","./src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  border-radius: 4px;\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  transition: var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,orDAAorD;;ACGtsD,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;QACT,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;qBAMH,EAAE;sBAGD,KAAK;wBAGpB,KAAK;wBAGY,KAAK;;IAKzC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;;IAID,MAAM,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KAC1B;;IAID,MAAM,WAAW;;QACf,MAAA,IAAI,CAAC,GAAG,0CAAE,IAAI,EAAE,CAAC;KAClB;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,KAAK,CAAC;QAC/C;;QAEEA,QAACC,UAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxCD,iBACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpDA,qBAAQ,EACP,IAAI,CAAC,QAAQ,KACZA,6BACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,EACNA,iBACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,GACI,CACF,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: flex;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n  position: absolute;\n  &.tab__indicator--active {\n    background-color: var(--six-tab-border-color-active);\n  }\n}\n\n// TOP\n.tab--top {\n  margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n  width: 100%;\n  bottom: 0;\n  height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n  margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n  width: 100%;\n  top: 0;\n  height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n  margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n  height: 100%;\n  right: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n  margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n  height: 100%;\n  left: 0;\n  top: 0;\n  width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  private componentId = `tab-${++id}`;\n  private tab?: HTMLElement;\n\n  @Element() host!: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab?.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab?.blur();\n  }\n\n  private handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    const tabGroup: HTMLSixTabGroupElement | null = this.host.closest('six-tab-group');\n    const placement = tabGroup?.placement ?? 'top';\n    return (\n      // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // Placements\n            'tab--top': placement === 'top',\n            'tab--bottom': placement === 'bottom',\n            'tab--left': placement === 'left',\n            'tab--right': placement === 'right',\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n        <div\n          class={{\n            tab__indicator: true,\n            'tab__indicator--active': this.active,\n\n            // Placements\n            'tab__indicator--top': placement === 'top',\n            'tab__indicator--bottom': placement === 'bottom',\n            'tab__indicator--left': placement === 'left',\n            'tab__indicator--right': placement === 'right',\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-tag.cjs.entry.js

@@ -2,42 +2,64 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ccf35821.js');
+const index = require('./index-5dd19c4b.js');
+const slot = require('./slot-1b1232a1.js');
+const executionControl = require('./execution-control-d728da70.js');
 
-const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
+const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
 
 const SixTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixClear = index.createEvent(this, "six-tag-clear", 7);
-    this.handleClearClick = () => {
-      this.sixClear.emit();
-    };
-    this.type = 'primary';
-    this.size = 'medium';
-    this.pill = false;
-    this.clearable = false;
-  }
-  render() {
-    return (index.h("span", { part: "base", class: {
-        tag: true,
-        // Types
-        'tag--primary': this.type === 'primary',
-        'tag--success': this.type === 'success',
-        'tag--info': this.type === 'info',
-        'tag--warning': this.type === 'warning',
-        'tag--danger': this.type === 'danger',
-        'tag--action': this.type === 'action',
-        'tag--text': this.type === 'text',
-        // Sizes
-        'tag--small': this.size === 'small',
-        'tag--medium': this.size === 'medium',
-        'tag--large': this.size === 'large',
-        // Modifers
-        'tag--pill': this.pill,
-        'tag--clear': this.clearable,
-      } }, index.h("span", { part: "content", class: "tag__content" }, index.h("slot", null)), this.clearable && (index.h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.sixClear = index.createEvent(this, "six-tag-clear", 7);
+        this.resizeObserver = new ResizeObserver(executionControl.debounce(() => this.updateTooltip()));
+        this.updateTooltip = () => {
+            if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {
+                this.tooltipElement.content = slot.getTextContent(this.contentSlotElement);
+                this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);
+            }
+        };
+        this.handleClearClick = () => {
+            this.sixClear.emit();
+        };
+        this.type = 'primary';
+        this.size = 'medium';
+        this.pill = false;
+        this.clearable = false;
+    }
+    connectedCallback() {
+        if (this.contentElement != null) {
+            this.resizeObserver.observe(this.contentElement);
+        }
+    }
+    componentDidLoad() {
+        if (this.contentElement != null) {
+            this.resizeObserver.observe(this.contentElement);
+        }
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+    }
+    render() {
+        return (index.h("span", { part: "base", class: {
+                tag: true,
+                // Types
+                'tag--primary': this.type === 'primary',
+                'tag--success': this.type === 'success',
+                'tag--info': this.type === 'info',
+                'tag--warning': this.type === 'warning',
+                'tag--danger': this.type === 'danger',
+                'tag--action': this.type === 'action',
+                'tag--text': this.type === 'text',
+                // Sizes
+                'tag--small': this.size === 'small',
+                'tag--medium': this.size === 'medium',
+                'tag--large': this.size === 'large',
+                // Modifers
+                'tag--pill': this.pill,
+                'tag--clear': this.clearable,
+            } }, index.h("six-tooltip", { ref: (el) => (this.tooltipElement = el) }, index.h("span", { ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, index.h("slot", { ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (index.h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+    }
 };
 SixTag.style = sixTagCss;
 

package/dist/cjs/six-tag.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-tag.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,owEAAowE;;MCqBzwE,MAAM;;;;IAgBT,qBAAgB,GAAG;MACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;gBAhByG,SAAS;gBAGtD,QAAQ;gBAGtC,KAAK;qBAGA,KAAK;;EAS1C,MAAM;IACJ,QACEA,kBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;QACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;QAGjC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;;QAGnC,WAAW,EAAE,IAAI,CAAC,IAAI;QACtB,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,IAEDA,kBAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,IACvCA,qBAAQ,CACH,EAEN,IAAI,CAAC,SAAS,KACbA,6BACE,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CACI,EACP;GACH;;;;;;","names":["h"],"sources":["./src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","./src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  font-family: var(--six-font-family);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n  color: var(--six-color-white);\n  background-color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-success-500);\n  background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-clay-50);\n  background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-warning-700);\n  background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n  color: var(--six-color-white);\n  border-color: var(--six-color-danger-800);\n  background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n  color: var(--six-color-white);\n  border-color: var(--six-color-action-500);\n  background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--six-button-font-size-small);\n  height: calc(var(--six-height-small) * 0.8);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-small);\n  padding: 0 var(--six-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: calc(var(--six-height-medium) * 0.8);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-medium);\n  padding: 0 var(--six-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--six-button-font-size-large);\n  height: calc(var(--six-height-large) * 0.8);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-large);\n  padding: 0 var(--six-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <span part=\"content\" class=\"tag__content\">\n          <slot />\n        </span>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-tag.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,40EAA40E;;MCuBj1E,MAAM;;;;QAmBT,mBAAc,GAAG,IAAI,cAAc,CAACA,yBAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAkB1E,kBAAa,GAAG;YACtB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;gBACjG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAGC,mBAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACtE,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;aACrG;SACF,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;oBA5CyG,SAAS;oBAGtD,QAAQ;oBAGtC,KAAK;yBAGA,KAAK;;IAU1C,iBAAiB;QACf,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAClD;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAClD;KACF;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;IAaD,MAAM;QACJ,QACEC,kBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;;gBAGT,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;gBAGjC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;;gBAGnC,WAAW,EAAE,IAAI,CAAC,IAAI;gBACtB,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,IAEDA,yBAAa,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAClDA,kBAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,IAChFA,kBAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAqB,CAAC,GAAI,CACnE,CACK,EAEb,IAAI,CAAC,SAAS,KACbA,6BACE,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,CACI,EACP;KACH;;;;;;","names":["debounce","getTextContent","h"],"sources":["src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  font-family: var(--six-font-family);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n  color: var(--six-color-white);\n  background-color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-success-500);\n  background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-clay-50);\n  background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n  color: var(--six-color-web-rock-900);\n  border-color: var(--six-color-warning-700);\n  background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n  color: var(--six-color-white);\n  border-color: var(--six-color-danger-800);\n  background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n  color: var(--six-color-white);\n  border-color: var(--six-color-action-500);\n  background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n  font-size: var(--six-button-font-size-small);\n  height: calc(var(--six-height-small) * 0.8);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-small);\n  padding: 0 var(--six-spacing-x-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xxx-small));\n  }\n}\n\n.tag--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: calc(var(--six-height-medium) * 0.8);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-medium);\n  padding: 0 var(--six-spacing-small);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-xx-small));\n  }\n}\n\n.tag--large {\n  font-size: var(--six-button-font-size-large);\n  height: calc(var(--six-height-large) * 0.8);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n  border-radius: var(--six-input-border-radius-large);\n  padding: 0 var(--six-spacing-medium);\n\n  .tag__clear {\n    margin-left: var(--six-spacing-xx-small);\n    margin-right: calc(-1 * var(--six-spacing-x-small));\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n  border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tag's content.\n *\n * @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n */\n\n@Component({\n  tag: 'six-tag',\n  styleUrl: 'six-tag.scss',\n  shadow: true,\n})\nexport class SixTag {\n  /** The tag's type. */\n  @Prop({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'action' | 'text' = 'primary';\n\n  /** The tag's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw a pill-style tag with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to make the tag clearable. */\n  @Prop({ reflect: true }) clearable = false;\n\n  /** Emitted when the clear button is activated. */\n  @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n  private contentSlotElement: HTMLSlotElement | undefined;\n  private tooltipElement: HTMLSixTooltipElement | undefined;\n  private contentElement: HTMLElement | undefined;\n  private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n  connectedCallback() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.contentElement != null) {\n      this.resizeObserver.observe(this.contentElement);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  private updateTooltip = () => {\n    if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n      this.tooltipElement.content = getTextContent(this.contentSlotElement);\n      this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n    }\n  };\n\n  private handleClearClick = () => {\n    this.sixClear.emit();\n  };\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        class={{\n          tag: true,\n\n          // Types\n          'tag--primary': this.type === 'primary',\n          'tag--success': this.type === 'success',\n          'tag--info': this.type === 'info',\n          'tag--warning': this.type === 'warning',\n          'tag--danger': this.type === 'danger',\n          'tag--action': this.type === 'action',\n          'tag--text': this.type === 'text',\n\n          // Sizes\n          'tag--small': this.size === 'small',\n          'tag--medium': this.size === 'medium',\n          'tag--large': this.size === 'large',\n\n          // Modifers\n          'tag--pill': this.pill,\n          'tag--clear': this.clearable,\n        }}\n      >\n        <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n          <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n            <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n          </span>\n        </six-tooltip>\n\n        {this.clearable && (\n          <six-icon-button\n            exportparts=\"base:clear-button\"\n            size=\"xSmall\"\n            name=\"clear\"\n            class=\"tag__clear\"\n            onClick={this.handleClearClick}\n          />\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}