@limetech/lime-elements 39.7.1 → 39.8.0

package/dist/types/components/icon-button/icon-button.d.ts

@@ -5,6 +5,7 @@ import { Icon } from '../../global/shared-types/icon.types';
  * @exampleComponent limel-example-icon-button-elevated
  * @exampleComponent limel-example-icon-button-toggle-state
  * @exampleComponent limel-example-icon-button-icon
+ * @exampleComponent limel-example-icon-button-helper-label
  * @exampleComponent limel-example-icon-button-composite
  */
 export declare class IconButton {
@@ -19,8 +20,16 @@ export declare class IconButton {
     elevated: boolean;
     /**
      * The text to show to screenreaders and other assistive tech.
+     * It is also displayed as a tooltip when the user hovers
+     * or focuses the button.
      */
     label: string;
+    /**
+     * Additional helper text for the tooltip.
+     * Example usage can be a keyboard shortcut to activate
+     * the function of the button.
+     */
+    helperLabel?: string;
     /**
      * Set to `true` to disable the button.
      */

package/dist/types/components.d.ts

@@ -2042,6 +2042,7 @@ export namespace Components {
      * @exampleComponent limel-example-icon-button-elevated
      * @exampleComponent limel-example-icon-button-toggle-state
      * @exampleComponent limel-example-icon-button-icon
+     * @exampleComponent limel-example-icon-button-helper-label
      * @exampleComponent limel-example-icon-button-composite
      */
     interface LimelIconButton {
@@ -2055,12 +2056,16 @@ export namespace Components {
           * @default false
          */
         "elevated": boolean;
+        /**
+          * Additional helper text for the tooltip. Example usage can be a keyboard shortcut to activate the function of the button.
+         */
+        "helperLabel"?: string;
         /**
           * The icon to display.
          */
         "icon": string | Icon;
         /**
-          * The text to show to screenreaders and other assistive tech.
+          * The text to show to screenreaders and other assistive tech. It is also displayed as a tooltip when the user hovers or focuses the button.
          */
         "label": string;
     }
@@ -5258,6 +5263,7 @@ declare global {
      * @exampleComponent limel-example-icon-button-elevated
      * @exampleComponent limel-example-icon-button-toggle-state
      * @exampleComponent limel-example-icon-button-icon
+     * @exampleComponent limel-example-icon-button-helper-label
      * @exampleComponent limel-example-icon-button-composite
      */
     interface HTMLLimelIconButtonElement extends Components.LimelIconButton, HTMLStencilElement {
@@ -8450,6 +8456,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-icon-button-elevated
      * @exampleComponent limel-example-icon-button-toggle-state
      * @exampleComponent limel-example-icon-button-icon
+     * @exampleComponent limel-example-icon-button-helper-label
      * @exampleComponent limel-example-icon-button-composite
      */
     interface LimelIconButton {
@@ -8463,12 +8470,16 @@ declare namespace LocalJSX {
           * @default false
          */
         "elevated"?: boolean;
+        /**
+          * Additional helper text for the tooltip. Example usage can be a keyboard shortcut to activate the function of the button.
+         */
+        "helperLabel"?: string;
         /**
           * The icon to display.
          */
         "icon"?: string | Icon;
         /**
-          * The text to show to screenreaders and other assistive tech.
+          * The text to show to screenreaders and other assistive tech. It is also displayed as a tooltip when the user hovers or focuses the button.
          */
         "label"?: string;
     }
@@ -10736,6 +10747,7 @@ declare namespace LocalJSX {
         "icon": string | Icon;
         "elevated": boolean;
         "label": string;
+        "helperLabel": string;
         "disabled": boolean;
     }
     interface LimelInfoTileAttributes {
@@ -11821,6 +11833,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-icon-button-elevated
              * @exampleComponent limel-example-icon-button-toggle-state
              * @exampleComponent limel-example-icon-button-icon
+             * @exampleComponent limel-example-icon-button-helper-label
              * @exampleComponent limel-example-icon-button-composite
              */
             "limel-icon-button": LocalJSX.IntrinsicElements["limel-icon-button"] & JSXBase.HTMLAttributes<HTMLLimelIconButtonElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "39.7.1",
+  "version": "39.8.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-26bc957e.entry.js

@@ -1 +0,0 @@
-import{r as o,h as t,H as e,a}from"./p-DBTJNfo7.js";import{m as s,r as i}from"./p-BgTwPGeH.js";import{c as n}from"./p-JbKhhoXs.js";import{d as r,g as l}from"./p-CgNJbSP4.js";const d=class{constructor(t){o(this,t),this.elevated=!1,this.disabled=!1,this.tooltipId=n(),this.filterClickWhenDisabled=o=>{this.disabled&&o.preventDefault()}}connectedCallback(){this.initialize()}componentWillLoad(){s(this.host)}disconnectedCallback(){i(this.host)}componentDidLoad(){this.initialize()}initialize(){this.host.shadowRoot.querySelector(".mdc-icon-button")}render(){const o={};return this.host.hasAttribute("tabindex")&&(o.tabindex=this.host.getAttribute("tabindex")),t(e,{key:"eb93a508920a2a1124a5002faf24cbe837c5ff48",onClick:this.filterClickWhenDisabled},t("button",Object.assign({key:"b4ef2d7c4f260a88be131e072e9db8f560ed136b",disabled:this.disabled,id:this.tooltipId},o),this.renderIcon(),this.renderTooltip(this.tooltipId)))}renderIcon(){var o,e;const a=l(this.icon),s=r(this.icon);return t("limel-icon",{name:a,"aria-label":s,"aria-hidden":s?null:"true",style:{color:`${null===(o=this.icon)||void 0===o?void 0:o.color}`,"--icon-background-color":`${null===(e=this.icon)||void 0===e?void 0:e.backgroundColor}`}})}renderTooltip(o){if(this.label)return t("limel-tooltip",{elementId:o,label:this.label})}static get delegatesFocus(){return!0}get host(){return a(this)}};d.style='@charset "UTF-8";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{all:unset}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button:not(:hover):not(:active):not(:disabled):not(:focus-visible){box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{padding:0.25rem;width:1.75rem}';export{d as limel_icon_button}