@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/tooltip.container.js

@@ -1 +1,130 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(s<3?i(a):s>3?i(e,o,a):i(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#t};__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import styles from './tooltip.container.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import uniqueId from './library/unique-id.js';
+// This component exists because Tooltip's target and its tooltip both need to
+// be in the light DOM so the `aria-describedby` on its target can be associated
+// with the ID it references. Tooltip adds this element to its light DOM and then
+// associates it with its target.
+//
+// One alternative solution is to ask consumers to add this component to Tooltip's
+// default slot. But that would be additional work for them and would be a less
+// natural API because consumers would pass `label`, `shortcut`, and other
+// attributes to Tooltip Container instead of Tooltip.
+//
+// Another is to require that consumers always wrap their default slot content
+// in an element, such as `<div>`. But an apparently stray `<div>` in our Storybook
+// code example would beget questions or may be removed by the consumer after
+// copying the code, resulting in an error from Tooltip and frustration.
+//
+// The latter solution would also prevent us from restricting allowed content by
+// using an attribute (`label`). We'd be forced to allow arbitrary content via a
+// slot.
+/**
+ * @attr {string} [description]
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [label]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement]
+ * @attr {boolean} [screenreader-hidden=false]
+ * @attr {string[]} [shortcut=[]]
+ */
+let TooltipContainer = class TooltipContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.screenreaderHidden = false;
+        this.shortcut = [];
+        this.#isDisabled = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        this.role = isDisabled || this.screenreaderHidden ? 'none' : 'tooltip';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = uniqueId();
+        this.role = this.role =
+            this.disabled || this.screenreaderHidden ? 'none' : 'tooltip';
+        this.slot = 'private';
+    }
+    render() {
+        return html `
+      <div
+        aria-hidden=${this.screenreaderHidden}
+        class=${classMap({
+            component: true,
+        })}
+      >
+        <div class="label-and-shortcut">
+          <div class="label">${this.label}</div>
+
+          <kbd
+            class=${classMap({
+            shortcut: true,
+            visible: this.shortcut.length > 0,
+        })}
+            data-test="shortcut"
+          >
+            ${this.shortcut.length === 1
+            ? this.shortcut.at(0)
+            : map(this.shortcut, (shortcut, index) => {
+                return html `
+                    <kbd>${shortcut}</kbd>
+                    ${index === this.shortcut.length - 1 ? '' : ' + '}
+                  `;
+            })}
+          </kbd>
+        </div>
+
+        ${when(this.description, () => {
+            return html `<div class="description">${this.description}</div>`;
+        })}
+      </div>
+    `;
+    }
+    #isDisabled;
+};
+__decorate([
+    property({ reflect: true })
+], TooltipContainer.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], TooltipContainer.prototype, "disabled", null);
+__decorate([
+    property()
+], TooltipContainer.prototype, "label", void 0);
+__decorate([
+    property()
+], TooltipContainer.prototype, "placement", void 0);
+__decorate([
+    property({ attribute: 'screenreader-hidden', type: Boolean })
+], TooltipContainer.prototype, "screenreaderHidden", void 0);
+__decorate([
+    property({ type: Array })
+], TooltipContainer.prototype, "shortcut", void 0);
+TooltipContainer = __decorate([
+    customElement('glide-core-private-tooltip-container'),
+    final
+], TooltipContainer);
+export default TooltipContainer;

package/dist/tooltip.container.styles.js

@@ -1,10 +1,11 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     .component {
       background-color: var(
         --glide-core-private-color-tooltip-surface-container
       );
       border-radius: var(--glide-core-spacing-base-xs);
-      display: flex;
       font-family: var(--glide-core-typography-family-primary);
       font-size: var(--glide-core-typography-size-body-default);
       font-weight: var(--glide-core-typography-weight-regular);
@@ -14,15 +15,27 @@ import{css}from"lit";export default[css`
         var(--glide-core-spacing-base-xs);
     }
 
+    .label-and-shortcut {
+      display: flex;
+    }
+
     .label {
       color: var(--glide-core-color-static-text-onsolid);
-      display: block;
       hyphens: auto;
       max-inline-size: 11.25rem;
       min-inline-size: 1.875rem;
       overflow-wrap: anywhere;
     }
 
+    .description {
+      color: var(--glide-core-color-static-text-onsolid);
+      hyphens: auto;
+      margin-block-start: var(--glide-core-spacing-base-xs);
+      max-inline-size: 11.25rem;
+      min-inline-size: 1.875rem;
+      overflow-wrap: anywhere;
+    }
+
     .shortcut {
       color: var(--glide-core-private-color-tooltip-text-shortcut);
       display: none;
@@ -37,4 +50,5 @@ import{css}from"lit";export default[css`
     kbd {
       font-family: var(--glide-core-typography-family-primary);
     }
-  `];
+  `,
+];

package/dist/tooltip.d.ts

@@ -7,6 +7,7 @@ declare global {
 }
 /**
  * @attr {string} label
+ * @attr {string} [description]
  * @attr {boolean} [disabled=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
@@ -31,6 +32,11 @@ export default class Tooltip extends LitElement {
      */
     get label(): string | undefined;
     set label(label: string);
+    /**
+     * @default undefined
+     */
+    get description(): string | undefined;
+    set description(description: string);
     /**
      * @default false
      */