@limetech/lime-elements 37.1.0-next.29 → 37.1.0-next.30

package/dist/collection/components/dialog/dialog.css

@@ -4,6 +4,41 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -76,7 +111,7 @@
  * @prop --dialog-max-width: Max width of the dialog.
  * @prop --dialog-max-height: Max height of the dialog.
  * @prop --dialog-border-radius: Border radius of the dialog corners
- * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Defaults to `1.5rem`.
+ * @prop --dialog-padding-top-bottom: Padding on top and bottom of dialog content. Affects the height of fade-out effects on top and bottom edges when the content is scrollable and has overflowed out of the content area. Defaults to `1.5rem`. Note that if you use this variable and set it to numbers smaller than 1rem, you will loose the fade-out effects on the edges. If you have set these paddings to `0`, losing the fade out effects should be however fine for your use case! Because in such a case your intention is to handle the `overflow` internally in the component that is displayed in the dialog's content.
  * @prop --dialog-padding-left-right: Padding on the sides of dialog content. Defaults to `1.25rem`.
  */
 :host {
@@ -693,21 +728,25 @@
   border-radius: var(--dialog-border-radius, 0.25rem);
 }
 .mdc-dialog .mdc-dialog__content {
+  --limel-top-edge-fade-height: var(--dialog-padding-top-bottom, 1.5rem);
+  --limel-bottom-edge-fade-height: var(
+      --dialog-padding-top-bottom,
+      1.5rem
+  );
+  --limel-overflow-mask-vertical: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),
+      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),
+      transparent 100%
+  );
+  -webkit-mask-image: var(--limel-overflow-mask-vertical);
+  mask-image: var(--limel-overflow-mask-vertical);
+  padding-top: var(--limel-top-edge-fade-height, 1rem);
+  padding-bottom: var(--limel-bottom-edge-fade-height, 1rem);
   color: var(--mdc-theme-on-surface);
-  padding: var(--dialog-padding-top-bottom, min(1.5rem, 3vw)) var(--dialog-padding-left-right, min(1.25rem, 3vw));
-}
-
-.scrollbox {
-  --dialog-background-color-transparent: rgba(var(--contrast-100), 0);
-  --dialog-scroll-shadow-color: rgba(var(--color-black), 0.2);
-  --dialog-scroll-shadow-color-transparent: rgba(var(--color-black), 0);
-  /* prettier-ignore */
-  background: linear-gradient(var(--dialog-background-color) 30%, var(--dialog-background-color-transparent)), linear-gradient(var(--dialog-background-color-transparent), var(--dialog-background-color) 70%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--dialog-scroll-shadow-color), var(--dialog-scroll-shadow-color-transparent)), radial-gradient(farthest-side at 50% 100%, var(--dialog-scroll-shadow-color), var(--dialog-scroll-shadow-color-transparent)) 0 100%;
-  background-repeat: no-repeat;
-  background-color: var(--dialog-background-color);
-  background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.875rem, 100% 0.875rem;
-  /* Opera doesn't support this in the shorthand */
-  background-attachment: local, local, scroll, scroll;
+  padding-left: var(--dialog-padding-left-right, min(1.25rem, 3vw));
+  padding-right: var(--dialog-padding-left-right, min(1.25rem, 3vw));
 }
 
 #initialFocusElement {

package/dist/collection/components/dialog/dialog.js

@@ -78,7 +78,7 @@ export class Dialog {
     return (h("div", { class: {
         'mdc-dialog': true,
         'full-screen': !!this.fullscreen,
-      }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { hidden: true, id: "initialFocusEl" }), h("div", { class: "mdc-dialog__container" }, h("div", { class: "mdc-dialog__surface" }, h("input", { type: "text", id: "initialFocusElement" }), this.renderHeading(), h("div", { class: "mdc-dialog__content scrollbox", id: 'limel-dialog-content-' + this.id }, h("slot", null)), this.renderFooter())), h("div", { class: "mdc-dialog__scrim" })));
+      }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { hidden: true, id: "initialFocusEl" }), h("div", { class: "mdc-dialog__container" }, h("div", { class: "mdc-dialog__surface" }, h("input", { type: "text", id: "initialFocusElement" }), this.renderHeading(), h("div", { class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", null)), this.renderFooter())), h("div", { class: "mdc-dialog__scrim" })));
   }
   watchHandler(newValue, oldValue) {
     if (oldValue === newValue) {

package/dist/collection/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DialogHeading, ClosingActions } from '@limetech/lime-elements';\nimport { MDCDialog } from '@material/dialog';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot button - The dialog buttons\n */\n@Component({\n    tag: 'limel-dialog',\n    shadow: true,\n    styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n    /**\n     * The heading for the dialog, if any.\n     */\n    @Prop()\n    public heading: string | DialogHeading;\n\n    /**\n     * Set to `true` to make the dialog \"fullscreen\".\n     */\n    @Prop({ reflect: true })\n    public fullscreen = false;\n\n    /**\n     * `true` if the dialog is open, `false` otherwise.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public open = false;\n\n    /**\n     * Defines which action triggers a close-event.\n     */\n    @Prop({ reflect: true })\n    public closingActions: ClosingActions = {\n        escapeKey: true,\n        scrimClick: true,\n    };\n    /**\n     * Emitted when the dialog is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when the dialog is in the process of being closed.\n     */\n    @Event()\n    private closing: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelDialogElement;\n\n    private mdcDialog: MDCDialog;\n\n    private id: string;\n\n    private showFooter = true;\n\n    constructor() {\n        this.handleMdcOpened = this.handleMdcOpened.bind(this);\n        this.handleMdcClosed = this.handleMdcClosed.bind(this);\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.id = createRandomString();\n        this.showFooter = !!this.host.querySelector('[slot=\"button\"]');\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n        if (!element) {\n            return;\n        }\n\n        this.mdcDialog = new MDCDialog(element);\n        if (this.open) {\n            this.mdcDialog.open();\n        }\n\n        this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n        this.setClosingActions();\n    }\n\n    public disconnectedCallback() {\n        this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n        this.mdcDialog.destroy();\n    }\n\n    public render() {\n        return (\n            <div\n                class={{\n                    'mdc-dialog': true,\n                    'full-screen': !!this.fullscreen,\n                }}\n                role=\"alertdialog\"\n                aria-modal=\"true\"\n                aria-labelledby={'limel-dialog-title-' + this.id}\n                aria-describedby={'limel-dialog-content-' + this.id}\n            >\n                <input hidden={true} id=\"initialFocusEl\" />\n                <div class=\"mdc-dialog__container\">\n                    <div class=\"mdc-dialog__surface\">\n                        {/*\n                            The `initialFocusElement` below is needed to make\n                            focus trapping work. At the time of writing, the\n                            focusable elements inside the slots are not\n                            detected, so we supply our own hidden element for\n                            the focus trap to use. Read more here:\n                            https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n                        */}\n                        <input type=\"text\" id=\"initialFocusElement\" />\n                        {this.renderHeading()}\n                        <div\n                            class=\"mdc-dialog__content scrollbox\"\n                            id={'limel-dialog-content-' + this.id}\n                        >\n                            <slot />\n                        </div>\n                        {this.renderFooter()}\n                    </div>\n                </div>\n                <div class=\"mdc-dialog__scrim\" />\n            </div>\n        );\n    }\n\n    @Watch('open')\n    protected watchHandler(newValue: boolean, oldValue: boolean) {\n        if (oldValue === newValue) {\n            return;\n        }\n\n        if (!this.mdcDialog) {\n            return;\n        }\n\n        if (newValue) {\n            this.mdcDialog.open();\n        } else {\n            this.mdcDialog.close();\n        }\n    }\n\n    @Watch('closingActions')\n    protected closingActionsChanged(\n        newValue: ClosingActions,\n        oldValue: ClosingActions\n    ) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.setClosingActions();\n    }\n\n    private handleMdcOpened() {\n        // When the opening-animation has completed, dispatch a\n        // resize-event so that any content that depends on\n        // javascript for layout has a chance to update to the\n        // final layout of the dialog. /Ads\n        const waitForUiToRender = 100;\n        setTimeout(dispatchResizeEvent, waitForUiToRender);\n    }\n\n    private handleMdcClosed() {\n        if (this.open) {\n            this.close.emit();\n        }\n\n        this.open = false;\n    }\n\n    private handleMdcClosing() {\n        this.closing.emit();\n    }\n\n    private isBadgeHeading(\n        heading: string | DialogHeading\n    ): heading is DialogHeading {\n        return typeof heading === 'object' && !!heading.title && !!heading.icon;\n    }\n\n    private renderHeading() {\n        if (this.isBadgeHeading(this.heading)) {\n            const { title, subtitle, supportingText, icon } = this.heading;\n\n            return (\n                <limel-header\n                    icon={icon}\n                    heading={title}\n                    subheading={subtitle}\n                    supportingText={supportingText}\n                ></limel-header>\n            );\n        } else if (typeof this.heading === 'string') {\n            return <limel-header heading={this.heading}></limel-header>;\n        }\n\n        return null;\n    }\n\n    private renderFooter() {\n        if (this.showFooter) {\n            return (\n                <footer class=\"mdc-dialog__actions\">\n                    <slot name=\"button\" />\n                </footer>\n            );\n        }\n    }\n\n    private setClosingActions() {\n        this.mdcDialog.scrimClickAction = '';\n        if (this.closingActions.scrimClick) {\n            this.mdcDialog.scrimClickAction = 'close';\n        }\n\n        this.mdcDialog.escapeKeyAction = '';\n        if (this.closingActions.escapeKey) {\n            this.mdcDialog.escapeKeyAction = 'close';\n        }\n    }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAMH,MAAM,OAAO,MAAM;EAiDf;IAFQ,eAAU,GAAG,IAAI,CAAC;;sBApCN,KAAK;gBAMX,KAAK;0BAMqB;MACpC,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;KACnB;IAwBG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5D;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;EACnE,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAClE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACzB;IAED,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAElE,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAClE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAClE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,CACH,WACI,KAAK,EAAE;QACH,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACnC,EACD,IAAI,EAAC,aAAa,gBACP,MAAM,qBACA,qBAAqB,GAAG,IAAI,CAAC,EAAE,sBAC9B,uBAAuB,GAAG,IAAI,CAAC,EAAE;MAEnD,aAAO,MAAM,EAAE,IAAI,EAAE,EAAE,EAAC,gBAAgB,GAAG;MAC3C,WAAK,KAAK,EAAC,uBAAuB;QAC9B,WAAK,KAAK,EAAC,qBAAqB;UAS5B,aAAO,IAAI,EAAC,MAAM,EAAC,EAAE,EAAC,qBAAqB,GAAG;UAC7C,IAAI,CAAC,aAAa,EAAE;UACrB,WACI,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAE,uBAAuB,GAAG,IAAI,CAAC,EAAE;YAErC,eAAQ,CACN;UACL,IAAI,CAAC,YAAY,EAAE,CAClB,CACJ;MACN,WAAK,KAAK,EAAC,mBAAmB,GAAG,CAC/B,CACT,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB,EAAE,QAAiB;IACvD,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACvB,OAAO;KACV;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,QAAQ,EAAE;MACV,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACH,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;KAC1B;EACL,CAAC;EAGS,qBAAqB,CAC3B,QAAwB,EACxB,QAAwB;IAExB,IAAI,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;MAC7B,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEO,eAAe;IACnB,uDAAuD;IACvD,mDAAmD;IACnD,sDAAsD;IACtD,mCAAmC;IACnC,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;EACvD,CAAC;EAEO,eAAe;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;IAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACtB,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,cAAc,CAClB,OAA+B;IAE/B,OAAO,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;EAC5E,CAAC;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACnC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;MAE/D,OAAO,CACH,oBACI,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,cAAc,GAClB,CACnB,CAAC;KACL;SAAM,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MACzC,OAAO,oBAAc,OAAO,EAAE,IAAI,CAAC,OAAO,GAAiB,CAAC;KAC/D;IAED,OAAO,IAAI,CAAC;EAChB,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,OAAO,CACH,cAAQ,KAAK,EAAC,qBAAqB;QAC/B,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACZ,CAAC;KACL;EACL,CAAC;EAEO,iBAAiB;IACrB,IAAI,CAAC,SAAS,CAAC,gBAAgB,GAAG,EAAE,CAAC;IACrC,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;MAChC,IAAI,CAAC,SAAS,CAAC,gBAAgB,GAAG,OAAO,CAAC;KAC7C;IAED,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,EAAE,CAAC;IACpC,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;MAC/B,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,OAAO,CAAC;KAC5C;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { DialogHeading, ClosingActions } from '@limetech/lime-elements';\nimport { MDCDialog } from '@material/dialog';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogService](https://lundalogik.github.io/lime-web-components/versions/latest/#/api/dialog-service)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot button - The dialog buttons\n */\n@Component({\n    tag: 'limel-dialog',\n    shadow: true,\n    styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n    /**\n     * The heading for the dialog, if any.\n     */\n    @Prop()\n    public heading: string | DialogHeading;\n\n    /**\n     * Set to `true` to make the dialog \"fullscreen\".\n     */\n    @Prop({ reflect: true })\n    public fullscreen = false;\n\n    /**\n     * `true` if the dialog is open, `false` otherwise.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public open = false;\n\n    /**\n     * Defines which action triggers a close-event.\n     */\n    @Prop({ reflect: true })\n    public closingActions: ClosingActions = {\n        escapeKey: true,\n        scrimClick: true,\n    };\n    /**\n     * Emitted when the dialog is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when the dialog is in the process of being closed.\n     */\n    @Event()\n    private closing: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelDialogElement;\n\n    private mdcDialog: MDCDialog;\n\n    private id: string;\n\n    private showFooter = true;\n\n    constructor() {\n        this.handleMdcOpened = this.handleMdcOpened.bind(this);\n        this.handleMdcClosed = this.handleMdcClosed.bind(this);\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.id = createRandomString();\n        this.showFooter = !!this.host.querySelector('[slot=\"button\"]');\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n        if (!element) {\n            return;\n        }\n\n        this.mdcDialog = new MDCDialog(element);\n        if (this.open) {\n            this.mdcDialog.open();\n        }\n\n        this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n        this.setClosingActions();\n    }\n\n    public disconnectedCallback() {\n        this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n        this.mdcDialog.destroy();\n    }\n\n    public render() {\n        return (\n            <div\n                class={{\n                    'mdc-dialog': true,\n                    'full-screen': !!this.fullscreen,\n                }}\n                role=\"alertdialog\"\n                aria-modal=\"true\"\n                aria-labelledby={'limel-dialog-title-' + this.id}\n                aria-describedby={'limel-dialog-content-' + this.id}\n            >\n                <input hidden={true} id=\"initialFocusEl\" />\n                <div class=\"mdc-dialog__container\">\n                    <div class=\"mdc-dialog__surface\">\n                        {/*\n                            The `initialFocusElement` below is needed to make\n                            focus trapping work. At the time of writing, the\n                            focusable elements inside the slots are not\n                            detected, so we supply our own hidden element for\n                            the focus trap to use. Read more here:\n                            https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n                        */}\n                        <input type=\"text\" id=\"initialFocusElement\" />\n                        {this.renderHeading()}\n                        <div\n                            class=\"mdc-dialog__content\"\n                            id={'limel-dialog-content-' + this.id}\n                        >\n                            <slot />\n                        </div>\n                        {this.renderFooter()}\n                    </div>\n                </div>\n                <div class=\"mdc-dialog__scrim\" />\n            </div>\n        );\n    }\n\n    @Watch('open')\n    protected watchHandler(newValue: boolean, oldValue: boolean) {\n        if (oldValue === newValue) {\n            return;\n        }\n\n        if (!this.mdcDialog) {\n            return;\n        }\n\n        if (newValue) {\n            this.mdcDialog.open();\n        } else {\n            this.mdcDialog.close();\n        }\n    }\n\n    @Watch('closingActions')\n    protected closingActionsChanged(\n        newValue: ClosingActions,\n        oldValue: ClosingActions\n    ) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.setClosingActions();\n    }\n\n    private handleMdcOpened() {\n        // When the opening-animation has completed, dispatch a\n        // resize-event so that any content that depends on\n        // javascript for layout has a chance to update to the\n        // final layout of the dialog. /Ads\n        const waitForUiToRender = 100;\n        setTimeout(dispatchResizeEvent, waitForUiToRender);\n    }\n\n    private handleMdcClosed() {\n        if (this.open) {\n            this.close.emit();\n        }\n\n        this.open = false;\n    }\n\n    private handleMdcClosing() {\n        this.closing.emit();\n    }\n\n    private isBadgeHeading(\n        heading: string | DialogHeading\n    ): heading is DialogHeading {\n        return typeof heading === 'object' && !!heading.title && !!heading.icon;\n    }\n\n    private renderHeading() {\n        if (this.isBadgeHeading(this.heading)) {\n            const { title, subtitle, supportingText, icon } = this.heading;\n\n            return (\n                <limel-header\n                    icon={icon}\n                    heading={title}\n                    subheading={subtitle}\n                    supportingText={supportingText}\n                ></limel-header>\n            );\n        } else if (typeof this.heading === 'string') {\n            return <limel-header heading={this.heading}></limel-header>;\n        }\n\n        return null;\n    }\n\n    private renderFooter() {\n        if (this.showFooter) {\n            return (\n                <footer class=\"mdc-dialog__actions\">\n                    <slot name=\"button\" />\n                </footer>\n            );\n        }\n    }\n\n    private setClosingActions() {\n        this.mdcDialog.scrimClickAction = '';\n        if (this.closingActions.scrimClick) {\n            this.mdcDialog.scrimClickAction = 'close';\n        }\n\n        this.mdcDialog.escapeKeyAction = '';\n        if (this.closingActions.escapeKey) {\n            this.mdcDialog.escapeKeyAction = 'close';\n        }\n    }\n}\n"]}

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -6,6 +6,33 @@
  *
  * Or, just don't import anything, that works too.
  */
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/dock/dock.css

@@ -6,6 +6,33 @@
  *
  * Or, just don't import anything, that works too.
  */
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/form/form.css

@@ -643,6 +643,33 @@ limel-code-editor {
  *
  * Or, just don't import anything, that works too.
  */
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
 .limel-form-row--layout {
   --limel-form-row-border-radius: 0.375rem;
   --limel-form-row-icon-size: 1.75rem;

package/dist/collection/components/header/header.css

@@ -6,6 +6,33 @@
  *
  * Or, just don't import anything, that works too.
  */
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/icon-button/icon-button.css

@@ -6,233 +6,33 @@
  *
  * Or, just don't import anything, that works too.
  */
-/*
- * This file is imported into every component!
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
  */
-.mdc-icon-button {
-  font-size: 24px;
-  width: 48px;
-  height: 48px;
-  padding: 12px;
-}
-.mdc-icon-button.mdc-icon-button--reduced-size {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-}
-.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch {
-  margin-top: 4px;
-  margin-bottom: 4px;
-  margin-right: 4px;
-  margin-left: 4px;
-}
-.mdc-icon-button .mdc-icon-button__touch {
-  position: absolute;
-  top: 50%;
-  height: 48px;
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
-  width: 48px;
-  transform: translate(-50%, -50%);
-}
-.mdc-icon-button:disabled {
-  color: rgba(0, 0, 0, 0.38);
-  /* @alternate */
-  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
-}
-.mdc-icon-button svg,
-.mdc-icon-button img {
-  width: 24px;
-  height: 24px;
-}
-
-.mdc-icon-button {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  fill: currentColor;
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  overflow: visible;
-}
-.mdc-icon-button .mdc-icon-button__touch {
-  position: absolute;
-  top: 50%;
-  height: 48px;
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
-  width: 48px;
-  transform: translate(-50%, -50%);
-}
-.mdc-icon-button:disabled {
-  cursor: default;
-  pointer-events: none;
-}
-
-.mdc-icon-button--display-flex {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-}
-
-.mdc-icon-button__icon {
-  display: inline-block;
-}
-.mdc-icon-button__icon.mdc-icon-button__icon--on {
-  display: none;
-}
-
-.mdc-icon-button--touch {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-
-.mdc-icon-button--on .mdc-icon-button__icon {
-  display: none;
-}
-.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on {
-  display: inline-block;
-}
-
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-  }
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-}
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
-}
-.mdc-icon-button {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-}
-.mdc-icon-button .mdc-icon-button__ripple::before,
-.mdc-icon-button .mdc-icon-button__ripple::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-icon-button .mdc-icon-button__ripple::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-icon-button .mdc-icon-button__ripple::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
-  top: 0;
-  /* @noflip */ /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-icon-button .mdc-icon-button__ripple::before,
-.mdc-icon-button .mdc-icon-button__ripple::after {
-  top: calc(50% - 50%);
-  /* @noflip */ /*rtl:ignore*/
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
-}
-.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,
-.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
-  top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */ /*rtl:ignore*/
-  left: var(--mdc-ripple-left, calc(50% - 50%));
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-icon-button .mdc-icon-button__ripple::before, .mdc-icon-button .mdc-icon-button__ripple::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-.mdc-icon-button:hover .mdc-icon-button__ripple::before, .mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
-  transition: opacity 150ms linear;
-}
-.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-icon-button.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-icon-button .mdc-icon-button__ripple {
-  pointer-events: none;
-  z-index: 1;
-}
-
 /**
  * @prop --icon-background-color: Background color of the button.
  */
@@ -244,7 +44,8 @@
   pointer-events: none;
 }
 
-.mdc-icon-button {
+button {
+  all: unset;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
@@ -252,33 +53,33 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   height: 2.25rem;
   width: 2.25rem;
-  padding: 0.125rem;
   border-radius: 50%;
 }
-.mdc-icon-button:hover {
+button:hover {
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
-.mdc-icon-button:active {
+button:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible) {
+button:focus {
+  outline: none;
+}
+button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+:host([elevated]) button:not(:hover):not(:active):not(:focus-visible) {
   box-shadow: var(--button-shadow-normal);
 }
-.mdc-icon-button:disabled {
+button:disabled {
   color: var(--mdc-theme-text-disabled-on-background);
 }
-.mdc-icon-button:focus-visible {
-  box-shadow: var(--shadow-depth-8-focused);
-  border-radius: 50%;
-}
 
 limel-icon {
   width: 1.25rem;
-  height: 1.25rem;
 }

package/dist/collection/components/icon-button/icon-button.js

@@ -37,7 +37,7 @@ export class IconButton {
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true })));
+    return (h("button", Object.assign({ disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true })));
   }
   static get is() { return "limel-icon-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AAEvC;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                class=\"mdc-icon-button\"\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AAEvC;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"]}