@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/accordion.js

@@ -1 +1,240 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(l<3?i(n):l>3?i(t,o,n):i(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Accordion=class Accordion extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&t&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(e&&t)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))}}));else if(t&&(this.isClosing=!0,this.#e.value)){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}))}}click(){this.#l.value?.click()}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing,open:this.open})}" data-test="summary" @click="${this.#n}" ${ref(this.#l)}>${chevronIcon}<div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#i)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" ${assertSlot()} ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#i.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0}),required],Accordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Accordion.prototype,"open",null),__decorate([property({reflect:!0})],Accordion.prototype,"version",void 0),__decorate([state()],Accordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],Accordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],Accordion.prototype,"isClosing",void 0),Accordion=__decorate([customElement("glide-core-accordion"),final],Accordion);export default Accordion;
+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 { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import packageJson from '../package.json' with { type: 'json' };
+import chevronIcon from './icons/chevron.js';
+import styles from './accordion.styles.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [open=false]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} - The content of the accordion
+ * @slot {Element} [prefix-icon] - An icon before the label
+ * @slot {Element} [suffix-icons] - Icons after the label
+ *
+ * @fires {Event} toggle
+ */
+let Accordion = class Accordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+        this.hasPrefixIcon = false;
+        this.hasSuffixIcons = false;
+        this.isClosing = false;
+        this.#defaultSlotElementRef = createRef();
+        this.#detailsElementRef = createRef();
+        this.#isOpen = false;
+        this.#prefixIconSlotElementRef = createRef();
+        this.#suffixIconsSlotElementRef = createRef();
+        this.#summaryElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get open() {
+        return this.#isOpen;
+    }
+    set open(isOpen) {
+        const hasChanged = isOpen !== this.#isOpen;
+        this.#isOpen = isOpen;
+        const isReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (isReducedMotion && hasChanged && this.#detailsElementRef.value) {
+            this.#detailsElementRef.value.open = isOpen;
+            this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+            return;
+        }
+        if (isOpen && hasChanged) {
+            // Wait for `.summary` to re-render after the "active" class addition to
+            // prevent animation jank, especially in Firefox and Safari.
+            this.updateComplete.then(() => {
+                if (this.#detailsElementRef.value &&
+                    this.#defaultSlotElementRef.value) {
+                    const bottomPadding = Number.parseFloat(getComputedStyle(this.#defaultSlotElementRef.value)?.paddingBottom);
+                    this.#detailsElementRef.value.open = true;
+                    this.#defaultSlotElementRef.value
+                        .animate({
+                        height: [
+                            '0px',
+                            `${this.#defaultSlotElementRef.value.offsetHeight -
+                                bottomPadding}px`,
+                        ],
+                        opacity: [0, 1],
+                    }, {
+                        duration: Number(getComputedStyle(this.#defaultSlotElementRef.value)
+                            .getPropertyValue('--private-open-duration')
+                            .replace('ms', '')),
+                        easing: getComputedStyle(this.#defaultSlotElementRef.value).getPropertyValue('--private-easing'),
+                    })
+                        .addEventListener('finish', () => {
+                        if (this.#detailsElementRef.value) {
+                            this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+                        }
+                    });
+                }
+            });
+        }
+        else if (hasChanged) {
+            this.isClosing = true;
+            if (this.#defaultSlotElementRef.value) {
+                const bottomPadding = Number.parseFloat(getComputedStyle(this.#defaultSlotElementRef.value)?.paddingBottom);
+                this.#defaultSlotElementRef.value
+                    .animate({
+                    height: [
+                        `${this.#defaultSlotElementRef.value.offsetHeight - bottomPadding}px`,
+                        '0px',
+                    ],
+                    opacity: [1, 0],
+                }, {
+                    duration: Number(getComputedStyle(this.#defaultSlotElementRef.value)
+                        .getPropertyValue('--private-close-duration')
+                        .replace('ms', '')),
+                    easing: getComputedStyle(this.#defaultSlotElementRef.value).getPropertyValue('--private-easing'),
+                })
+                    .addEventListener('finish', () => {
+                    if (this.#detailsElementRef.value) {
+                        this.#detailsElementRef.value.open = false;
+                        this.isClosing = false;
+                        this.dispatchEvent(new Event('toggle', { bubbles: true, composed: true }));
+                    }
+                });
+            }
+        }
+    }
+    click() {
+        this.#summaryElementRef.value?.click();
+    }
+    render() {
+        return html `<details class="component" ${ref(this.#detailsElementRef)}>
+      <summary
+        class=${classMap({
+            summary: true,
+            active: this.open || this.isClosing,
+            open: this.open,
+        })}
+        data-test="summary"
+        @click=${this.#onSummaryClick}
+        ${ref(this.#summaryElementRef)}
+      >
+        ${chevronIcon}
+
+        <div class="label-container">
+          <slot
+            class="prefix-icon-slot"
+            name="prefix-icon"
+            @slotchange=${this.#onPrefixIconSlotChange}
+            ${ref(this.#prefixIconSlotElementRef)}
+          >
+            <!--
+              An icon before the label
+              @type {Element}
+            -->
+          </slot>
+
+          <span class="label">${this.label}</span>
+        </div>
+
+        <slot
+          class=${classMap({
+            'suffix-icons-slot': true,
+            icons: this.hasSuffixIcons,
+        })}
+          name="suffix-icons"
+          @slotchange=${this.#onSuffixIconsSlotChange}
+          ${ref(this.#suffixIconsSlotElementRef)}
+        >
+          <!--
+            Icons after the label
+            @type {Element}
+          -->
+        </slot>
+      </summary>
+
+      <slot
+        class=${classMap({
+            'default-slot': true,
+            indented: this.hasPrefixIcon,
+        })}
+        data-test="default-slot"
+        style=${styleMap({
+            '--private-close-duration': 'var(--glide-core-duration-fast-02)',
+            '--private-easing': 'var(--glide-core-animation-swoop)',
+            '--private-open-duration': 'var(--glide-core-duration-slow-01)',
+        })}
+        ${assertSlot()}
+        ${ref(this.#defaultSlotElementRef)}
+      >
+        <!--
+          The content of the accordion
+
+          @required
+          @type {Element | string}
+        -->
+      </slot>
+    </details>`;
+    }
+    #defaultSlotElementRef;
+    #detailsElementRef;
+    #isOpen;
+    #prefixIconSlotElementRef;
+    #suffixIconsSlotElementRef;
+    #summaryElementRef;
+    #onPrefixIconSlotChange() {
+        const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
+        this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
+    }
+    #onSuffixIconsSlotChange() {
+        const assignedNodes = this.#suffixIconsSlotElementRef.value?.assignedNodes();
+        this.hasSuffixIcons = Boolean(assignedNodes && assignedNodes.length > 0);
+    }
+    #onSummaryClick(event) {
+        // Canceling it prevents `details` from immediately showing and hiding
+        // the default slot on open and close, letting us animate it when we're ready.
+        event.preventDefault();
+        this.open = !this.open;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Accordion.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Accordion.prototype, "open", null);
+__decorate([
+    property({ reflect: true })
+], Accordion.prototype, "version", void 0);
+__decorate([
+    state()
+], Accordion.prototype, "hasPrefixIcon", void 0);
+__decorate([
+    state()
+], Accordion.prototype, "hasSuffixIcons", void 0);
+__decorate([
+    state()
+], Accordion.prototype, "isClosing", void 0);
+Accordion = __decorate([
+    customElement('glide-core-accordion'),
+    final
+], Accordion);
+export default Accordion;

package/dist/accordion.styles.js

@@ -1,17 +1,21 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".summary:focus-visible")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+export default [
+    css `
+    ${focusOutline('.summary:focus-visible')}
+  `,
+    css `
     .component {
       border: 1px solid
         var(--glide-core-color-static-surface-container-secondary);
-      border-radius: var(--glide-core-rounding-base-radius-sm);
+      border-radius: var(--glide-core-rounding-base-radius-md);
       box-shadow: var(--glide-core-effect-lifted);
       font-family: var(--glide-core-typography-family-primary);
     }
 
     .summary {
       align-items: center;
-      border-radius: var(--glide-core-rounding-base-radius-sm);
+      border-radius: var(--glide-core-rounding-base-radius-md);
       color: var(--glide-core-color-static-text-default);
       cursor: pointer;
       display: flex;
@@ -50,7 +54,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         rotate: -90deg;
 
         @media (prefers-reduced-motion: no-preference) {
-          transition: 250ms rotate ease;
+          transition: var(--glide-core-duration-slow-01) rotate
+            var(--glide-core-animation-swoop);
         }
       }
     }
@@ -99,4 +104,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         display: flex;
       }
     }
-  `];
+  `,
+];

package/dist/button-group.button.js

@@ -1 +1,143 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ButtonGroupButton=class ButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#t=createRef(),this.#e=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(t){this.#o=t,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#t.value?.click()}focus(t){this.#t.value?.focus(t)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#e)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#t;#e;#o;#r(){const t=this.#e.value?.assignedNodes();this.hasIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],ButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],ButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],ButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],ButtonGroupButton.prototype,"value",void 0),__decorate([property()],ButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],ButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],ButtonGroupButton.prototype,"version",void 0),__decorate([state()],ButtonGroupButton.prototype,"hasIcon",void 0),ButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],ButtonGroupButton);export default ButtonGroupButton;
+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 { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './button-group.button.styles.js';
+import assertSlot from './library/assert-slot.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [selected=false]
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element} [icon]
+ *
+ * @fires {Event} selected
+ */
+let ButtonGroupButton = class ButtonGroupButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        // `value` is used by consumers to identify selections based on something other
+        // than the label.
+        this.value = '';
+        // Private because it's only meant to be used by Button Group.
+        this.privateOrientation = 'horizontal';
+        this.version = packageJson.version;
+        this.hasIcon = false;
+        this.#componentElementRef = createRef();
+        this.#iconSlotElementRef = createRef();
+        this.#isSelected = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get selected() {
+        return this.#isSelected;
+    }
+    set selected(isSelected) {
+        this.#isSelected = isSelected;
+        this.dispatchEvent(new Event('private-selected', { bubbles: true }));
+    }
+    click() {
+        this.#componentElementRef.value?.click();
+    }
+    focus(options) {
+        this.#componentElementRef.value?.focus(options);
+    }
+    privateSelect() {
+        this.selected = true;
+        this.dispatchEvent(new Event('selected', { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `<div
+      aria-checked=${this.selected}
+      aria-disabled=${this.disabled}
+      class=${classMap({
+            component: true,
+            selected: this.selected,
+            disabled: this.disabled,
+            [this.privateOrientation]: true,
+            icon: this.hasIcon,
+            'icon-only': this.privateVariant === 'icon-only',
+        })}
+      data-test="radio"
+      role="radio"
+      tabindex=${!this.selected || this.disabled ? -1 : 0}
+      ${ref(this.#componentElementRef)}
+    >
+      <slot
+        name="icon"
+        @slotchange=${this.#onIconSlotChange}
+        ${assertSlot(null, this.privateVariant !== 'icon-only')}
+        ${ref(this.#iconSlotElementRef)}
+      >
+        <!-- @type {Element} -->
+      </slot>
+
+      <div
+        class=${classMap({
+            label: true,
+            'visually-hidden': this.privateVariant === 'icon-only',
+        })}
+      >
+        ${this.label}
+      </div>
+    </div>`;
+    }
+    #componentElementRef;
+    #iconSlotElementRef;
+    #isSelected;
+    #onIconSlotChange() {
+        const assignedNodes = this.#iconSlotElementRef.value?.assignedNodes();
+        this.hasIcon = Boolean(assignedNodes && assignedNodes.length > 0);
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], ButtonGroupButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ButtonGroupButton.prototype, "selected", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ButtonGroupButton.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], ButtonGroupButton.prototype, "value", void 0);
+__decorate([
+    property()
+], ButtonGroupButton.prototype, "privateOrientation", void 0);
+__decorate([
+    property()
+], ButtonGroupButton.prototype, "privateVariant", void 0);
+__decorate([
+    property({ reflect: true })
+], ButtonGroupButton.prototype, "version", void 0);
+__decorate([
+    state()
+], ButtonGroupButton.prototype, "hasIcon", void 0);
+ButtonGroupButton = __decorate([
+    customElement('glide-core-button-group-button'),
+    final
+], ButtonGroupButton);
+export default ButtonGroupButton;

package/dist/button-group.button.styles.js

@@ -1,31 +1,58 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${focusOutline(".component:focus-visible")}
-    ${visuallyHidden(".label.visually-hidden")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${focusOutline('.component:focus-visible')}
+    ${visuallyHidden('.label.visually-hidden')}
+  `,
+    css `
     /*
     Nesting within :host does not work as expected in Safari
     https://bugs.webkit.org/show_bug.cgi?id=275341#c1
     */
     :host(:first-of-type) .component.horizontal {
-      border-end-start-radius: 0.6875rem;
-      border-start-start-radius: 0.6875rem;
+      /*
+        Button Group Button's border radius needs to be slightly
+        smaller than the parent's border radius, otherwise the
+        Button won't appear to fill the Group when selected or
+        hovered.
+      */
+      border-end-start-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
+      border-start-start-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
     }
 
     :host(:first-of-type) .component.vertical {
-      border-start-end-radius: 0.6875rem;
-      border-start-start-radius: 0.6875rem;
+      border-start-end-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
+      border-start-start-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
     }
 
     :host(:last-of-type) .component.horizontal {
-      border-end-end-radius: 0.6875rem;
+      border-end-end-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
       border-inline-end: none;
-      border-start-end-radius: 0.6875rem;
+      border-start-end-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
     }
 
     :host(:last-of-type) .component.vertical {
       border-block-end: none;
-      border-end-end-radius: 0.6875rem;
-      border-end-start-radius: 0.6875rem;
+      border-end-end-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
+      border-end-start-radius: calc(
+        var(--glide-core-rounding-base-radius-sm) - 1px
+      );
     }
 
     .component {
@@ -45,9 +72,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       min-inline-size: 2.75rem;
       padding-block: var(--glide-core-spacing-base-xs);
       padding-inline: var(--glide-core-spacing-base-md);
-      transition-duration: 150ms;
+      transition-duration: var(--glide-core-duration-moderate-02);
       transition-property: color, background-color, fill, stroke;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-timing-function: var(--glide-core-animation-swoop-in);
       user-select: none;
       white-space: nowrap;
 
@@ -121,4 +148,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         color: var(--glide-core-color-interactive-text-link);
       }
     }
-  `];
+  `,
+];