mdui 2.0.5 → 2.0.6

package/components/radio/radio-style.js

@@ -1,108 +1,2 @@
 import { css } from 'lit';
-export const radioStyle = css `
-  :host {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-user-select: none;
-    user-select: none;
-    touch-action: manipulation;
-    zoom: 1;
-    -webkit-user-drag: none;
-    border-radius: 0.125rem;
-    font-size: var(--mdui-typescale-label-large-size);
-    font-weight: var(--mdui-typescale-label-large-weight);
-    letter-spacing: var(--mdui-typescale-label-large-tracking);
-    line-height: var(--mdui-typescale-label-large-line-height);
-  }
-  .icon {
-    display: flex;
-    position: absolute;
-    font-size: 1.5rem;
-  }
-  :not(.initial) .icon {
-    transition-duration: var(--mdui-motion-duration-short4);
-    transition-timing-function: var(--mdui-motion-easing-standard);
-  }
-  .unchecked-icon {
-    transition-property: color;
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  :host([hover]) .unchecked-icon,
-  :host([focused]) .unchecked-icon,
-  :host([pressed]) .unchecked-icon {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  .checked-icon {
-    opacity: 0;
-    transform: scale(0.2);
-    transition-property: color, opacity, transform;
-    color: rgb(var(--mdui-color-primary));
-  }
-  .icon .i,
-  ::slotted([slot='unchecked-icon']),
-  ::slotted([slot='checked-icon']) {
-    color: inherit;
-    font-size: inherit;
-  }
-  i {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border-radius: 50%;
-    width: 2.5rem;
-    min-width: 2.5rem;
-    height: 2.5rem;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  .label {
-    display: flex;
-    width: 100%;
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  .label:not(.initial) {
-    transition: color var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-  }
-  /* 选中状态的图标 */
-  :host([checked]) i {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
-  }
-  :host([checked]) .icon {
-    color: rgb(var(--mdui-color-primary));
-  }
-  :host([checked]) .checked-icon {
-    opacity: 1;
-    transform: scale(0.5);
-  }
-  /* 验证不通过状态 */
-  i.invalid {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
-  }
-  i.invalid .icon {
-    color: rgb(var(--mdui-color-error));
-  }
-  .label.invalid {
-    color: rgb(var(--mdui-color-error));
-  }
-  /* 禁用状态的图标 */
-  :host([disabled]),
-  :host([group-disabled]) {
-    cursor: default;
-    pointer-events: none;
-  }
-  :host([disabled]) .icon,
-  :host([group-disabled]) .icon {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  :host([disabled]) .label,
-  :host([group-disabled]) .label {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-`;
+export const radioStyle = css `:host{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none;border-radius:.125rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon{display:flex;position:absolute;font-size:1.5rem}:not(.initial) .icon{transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.unchecked-icon{transition-property:color;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .unchecked-icon,:host([hover]) .unchecked-icon,:host([pressed]) .unchecked-icon{color:rgb(var(--mdui-color-on-surface))}.checked-icon{opacity:0;transform:scale(.2);transition-property:color,opacity,transform;color:rgb(var(--mdui-color-primary))}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:2.5rem;min-width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface))}.label:not(.initial){transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .checked-icon{opacity:1;transform:scale(.5)}i.invalid{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}i.invalid .icon{color:rgb(var(--mdui-color-error))}.label.invalid{color:rgb(var(--mdui-color-error))}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon,:host([group-disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label,:host([group-disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/radio/radio.js

@@ -91,29 +91,11 @@ let Radio = class Radio extends RippleMixin(FocusableMixin(MduiElement)) {
             invalid: this.invalid,
             initial: this.isInitial,
         });
-        return html `<i part="control" class=${className}>
-        <mdui-ripple
-          ${ref(this.rippleRef)}
-          .noRipple=${this.noRipple}
-        ></mdui-ripple>
-        <slot
-          name="unchecked-icon"
-          part="unchecked-icon"
-          class="icon unchecked-icon"
-        >
-          ${this.uncheckedIcon
-            ? html `<mdui-icon name=${this.uncheckedIcon} class="i"></mdui-icon>`
-            : html `<mdui-icon-radio-button-unchecked
-                class="i"
-              ></mdui-icon-radio-button-unchecked>`}
-        </slot>
-        <slot name="checked-icon" part="checked-icon" class="icon checked-icon">
-          ${this.checkedIcon
-            ? html `<mdui-icon name=${this.checkedIcon} class="i"></mdui-icon>`
-            : html `<mdui-icon-circle class="i"></mdui-icon-circle>`}
-        </slot>
-      </i>
-      <slot part="label" class="label ${className}"></slot>`;
+        return html `<i part="control" class="${className}"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
+            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-radio-button-unchecked class="i"></mdui-icon-radio-button-unchecked>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
+            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-circle class="i"></mdui-icon-circle>`}</slot></i><slot part="label" class="label ${className}"></slot>`;
     }
     isDisabled() {
         return this.disabled || this.groupDisabled;

package/components/range-slider/index.d.ts

@@ -54,7 +54,7 @@ export declare class RangeSlider extends SliderBase<RangeSliderEventMap> impleme
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     protected render(): TemplateResult;
-    protected getRippleIndex: () => 1 | 0;
+    protected getRippleIndex: () => 0 | 1;
     private updateStyle;
     private onInput;
 }

package/components/range-slider/index.js

@@ -143,66 +143,18 @@ let RangeSlider = class RangeSlider extends SliderBase {
      * <input class="invalid" /> 用于提供 html5 自带的表单错误提示
      */
     render() {
-        return html `<label class=${classMap({ invalid: this.invalid })}>
-      <input
-        ${ref(this.inputRef)}
-        type="range"
-        step=${this.step}
-        min=${this.min}
-        max=${this.max}
-        ?disabled=${this.disabled}
-        @input=${this.onInput}
-        @change=${this.onChange}
-      />
-      <div part="track-inactive" class="track-inactive"></div>
-      <div
-        ${ref(this.trackActiveRef)}
-        part="track-active"
-        class="track-active"
-      ></div>
-      <div
-        ${ref(this.handleStartRef)}
-        part="handle"
-        class="handle start"
-        style=${styleMap({
+        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="range" step="${this.step}" min="${this.min}" max="${this.max}" ?disabled="${this.disabled}" @input="${this.onInput}" @change="${this.onChange}"><div part="track-inactive" class="track-inactive"></div><div ${ref(this.trackActiveRef)} part="track-active" class="track-active"></div><div ${ref(this.handleStartRef)} part="handle" class="handle start" style="${styleMap({
             'z-index': this.currentHandle === 'start' ? '2' : '1',
-        })}
-      >
-        <div class="elevation"></div>
-        <mdui-ripple
-          ${ref(this.rippleStartRef)}
-          .noRipple=${this.noRipple}
-        ></mdui-ripple>
-        ${this.renderLabel(this.value[0])}
-      </div>
-      <div
-        ${ref(this.handleEndRef)}
-        part="handle"
-        class="handle end"
-        style=${styleMap({
+        })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleStartRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[0])}</div><div ${ref(this.handleEndRef)} part="handle" class="handle end" style="${styleMap({
             'z-index': this.currentHandle === 'end' ? '2' : '1',
-        })}
-      >
-        <div class="elevation"></div>
-        <mdui-ripple
-          ${ref(this.rippleEndRef)}
-          .noRipple=${this.noRipple}
-        ></mdui-ripple>
-        ${this.renderLabel(this.value[1])}
-      </div>
-      ${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div
-              part="tickmark"
-              class="tickmark ${classMap({
+        })}"><div class="elevation"></div><mdui-ripple ${ref(this.rippleEndRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.renderLabel(this.value[1])}</div>${when(this.tickmarks, () => map(this.getCandidateValues(), (value) => html `<div part="tickmark" class="tickmark ${classMap({
             active: value > this.value[0] && value < this.value[1],
-        })}"
-              style="${styleMap({
+        })}" style="${styleMap({
             left: `${((value - this.min) / this.max) * 100}%`,
             display: value === this.value[0] || value === this.value[1]
                 ? 'none'
                 : 'block',
-        })}"
-            ></div>`))}
-    </label>`;
+        })}"></div>`))}</label>`;
     }
     updateStyle() {
         const getPercent = (value) => ((value - this.min) / (this.max - this.min)) * 100;

package/components/ripple/index.js

@@ -144,14 +144,11 @@ let Ripple = class Ripple extends MduiElement {
         this.dragged = false;
     }
     render() {
-        return html `<div
-      ${ref(this.surfaceRef)}
-      class="surface ${classMap({
+        return html `<div ${ref(this.surfaceRef)} class="surface ${classMap({
             hover: this.hover,
             focused: this.focused,
             dragged: this.dragged,
-        })}"
-    ></div>`;
+        })}"></div>`;
     }
 };
 Ripple.styles = [componentStyle, style];

package/components/ripple/style.js

@@ -1,97 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    pointer-events: none;
-  }
-  .surface {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transition-duration: 280ms;
-    transition-property: background-color;
-    pointer-events: none;
-    transition-timing-function: var(--mdui-motion-easing-standard);
-  }
-  .hover {
-    background-color: rgba(
-      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface)),
-      var(--mdui-state-layer-hover)
-    );
-  }
-  :host-context([focus-visible]) .focused {
-    background-color: rgba(
-      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface)),
-      var(--mdui-state-layer-focus)
-    );
-  }
-  .dragged {
-    background-color: rgba(
-      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface)),
-      var(--mdui-state-layer-dragged)
-    );
-  }
-  .wave {
-    position: absolute;
-    z-index: 1;
-    background-color: rgb(
-      var(--mdui-comp-ripple-state-layer-color, var(--mdui-color-on-surface))
-    );
-    border-radius: 50%;
-    transform: translate3d(0, 0, 0) scale(0.4);
-    opacity: 0;
-    animation:
-      225ms ease 0s 1 normal forwards running mdui-comp-ripple-radius-in,
-      75ms ease 0s 1 normal forwards running mdui-comp-ripple-opacity-in;
-    pointer-events: none;
-  }
-  .out {
-    transform: translate3d(
-        var(--mdui-comp-ripple-transition-x, 0),
-        var(--mdui-comp-ripple-transition-y, 0),
-        0
-      )
-      scale(1);
-    animation: 150ms ease 0s 1 normal none running mdui-comp-ripple-opacity-out;
-  }
-  @keyframes mdui-comp-ripple-radius-in {
-    from {
-      transform: translate3d(0, 0, 0) scale(0.4);
-      animation-timing-function: var(--mdui-motion-easing-standard);
-    }
-    to {
-      transform: translate3d(
-          var(--mdui-comp-ripple-transition-x, 0),
-          var(--mdui-comp-ripple-transition-y, 0),
-          0
-        )
-        scale(1);
-    }
-  }
-  @keyframes mdui-comp-ripple-opacity-in {
-    from {
-      opacity: 0;
-      animation-timing-function: linear;
-    }
-    to {
-      opacity: var(--mdui-state-layer-pressed);
-    }
-  }
-  @keyframes mdui-comp-ripple-opacity-out {
-    from {
-      animation-timing-function: linear;
-      opacity: var(--mdui-state-layer-pressed);
-    }
-    to {
-      opacity: 0;
-    }
-  }
-`;
+export const style = css `:host{position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.surface{position:absolute;top:0;left:0;width:100%;height:100%;transition-duration:280ms;transition-property:background-color;pointer-events:none;transition-timing-function:var(--mdui-motion-easing-standard)}.hover{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-hover))}:host-context([focus-visible]) .focused{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-focus))}.dragged{background-color:rgba(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)),var(--mdui-state-layer-dragged))}.wave{position:absolute;z-index:1;background-color:rgb(var(--mdui-comp-ripple-state-layer-color,var(--mdui-color-on-surface)));border-radius:50%;transform:translate3d(0,0,0) scale(.4);opacity:0;animation:225ms ease 0s 1 normal forwards running mdui-comp-ripple-radius-in,75ms ease 0s 1 normal forwards running mdui-comp-ripple-opacity-in;pointer-events:none}.out{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1);animation:150ms ease 0s 1 normal none running mdui-comp-ripple-opacity-out}@keyframes mdui-comp-ripple-radius-in{from{transform:translate3d(0,0,0) scale(.4);animation-timing-function:var(--mdui-motion-easing-standard)}to{transform:translate3d(var(--mdui-comp-ripple-transition-x,0),var(--mdui-comp-ripple-transition-y,0),0) scale(1)}}@keyframes mdui-comp-ripple-opacity-in{from{opacity:0;animation-timing-function:linear}to{opacity:var(--mdui-state-layer-pressed)}}@keyframes mdui-comp-ripple-opacity-out{from{animation-timing-function:linear;opacity:var(--mdui-state-layer-pressed)}to{opacity:0}}`;

package/components/segmented-button/segmented-button-group-style.js

@@ -1,29 +1,2 @@
 import { css } from 'lit';
-export const segmentedButtonGroupStyle = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-full);
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    height: 2.5rem;
-    font-size: var(--mdui-typescale-label-large-size);
-    font-weight: var(--mdui-typescale-label-large-weight);
-    letter-spacing: var(--mdui-typescale-label-large-tracking);
-    line-height: var(--mdui-typescale-label-large-line-height);
-    color: rgb(var(--mdui-color-on-surface));
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  :host([full-width]) {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-  input,
-  select {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-`;
+export const segmentedButtonGroupStyle = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;vertical-align:middle;height:2.5rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`;

package/components/segmented-button/segmented-button-group.js

@@ -236,27 +236,7 @@ let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `${when(this.isSelectable && this.isSingle, () => html `<input
-            ${ref(this.inputRef)}
-            type="radio"
-            name=${ifDefined(this.name)}
-            value="1"
-            .disabled=${this.disabled}
-            .required=${this.required}
-            .checked=${!!this.value}
-            tabindex="-1"
-            @keydown=${this.onInputKeyDown}
-          />`)}${when(this.isSelectable && this.isMultiple, () => html `<select
-            ${ref(this.inputRef)}
-            name=${ifDefined(this.name)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            multiple
-            tabindex="-1"
-            @keydown=${this.onInputKeyDown}
-          >
-            ${map(this.value, (value) => html `<option selected value=${value}></option>`)}
-          </select>`)}<slot @slotchange=${this.onSlotChange} @click=${this.onClick}></slot>`;
+        return html `${when(this.isSelectable && this.isSingle, () => html `<input ${ref(this.inputRef)} type="radio" name="${ifDefined(this.name)}" value="1" .disabled="${this.disabled}" .required="${this.required}" .checked="${!!this.value}" tabindex="-1" @keydown="${this.onInputKeyDown}">`)}${when(this.isSelectable && this.isMultiple, () => html `<select ${ref(this.inputRef)} name="${ifDefined(this.name)}" .disabled="${this.disabled}" .required="${this.required}" multiple="multiple" tabindex="-1" @keydown="${this.onInputKeyDown}">${map(this.value, (value) => html `<option selected="selected" value="${value}"></option>`)}</select>`)}<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
     }
     // 切换一个元素的选中状态
     selectOne(item) {

package/components/segmented-button/segmented-button-style.js

@@ -1,83 +1,4 @@
 import { css } from 'lit';
-export const segmentedButtonStyle = css `
-  :host {
-    position: relative;
-    display: inline-flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    float: left;
-    height: 100%;
-    overflow: hidden;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    border: 0.0625rem solid rgb(var(--mdui-color-outline));
-  }
-  .button {
-    width: 100%;
-    padding: 0rem 0.75rem;
-  }
-  :host([invalid]) {
-    color: rgb(var(--mdui-color-error));
-    border-color: rgb(var(--mdui-color-error));
-  }
-  :host([invalid]) .button {
-    background-color: rgb(var(--mdui-color-error-container));
-  }
-  :host([selected]) {
-    color: rgb(var(--mdui-color-on-secondary-container));
-    background-color: rgb(var(--mdui-color-secondary-container));
-    --mdui-comp-ripple-state-layer-color: var(
+export const segmentedButtonStyle = css `:host{position:relative;display:inline-flex;flex-grow:1;flex-shrink:0;float:left;height:100%;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;border:.0625rem solid rgb(var(--mdui-color-outline))}.button{width:100%;padding:0 .75rem}:host([invalid]){color:rgb(var(--mdui-color-error));border-color:rgb(var(--mdui-color-error))}:host([invalid]) .button{background-color:rgb(var(--mdui-color-error-container))}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
       --mdui-color-on-secondary-container
-    );
-  }
-  :host([disabled]),
-  :host([group-disabled]) {
-    cursor: default;
-    pointer-events: none;
-    color: rgba(var(--mdui-color-on-surface), 38%);
-    border-color: rgba(var(--mdui-color-on-surface), 12%);
-  }
-  :host([loading]) {
-    cursor: default;
-    pointer-events: none;
-  }
-  :host(:not(.mdui-segmented-button-first)) {
-    margin-left: -0.0625rem;
-  }
-  :host(.mdui-segmented-button-first) {
-    border-radius: var(--shape-corner) 0 0 var(--shape-corner);
-  }
-  :host(.mdui-segmented-button-last) {
-    border-radius: 0 var(--shape-corner) var(--shape-corner) 0;
-  }
-  .icon,
-  .end-icon,
-  .selected-icon {
-    display: inline-flex;
-    font-size: 1.28571429em;
-  }
-  .icon .i,
-  .end-icon .i,
-  .selected-icon .i,
-  ::slotted([slot='icon']),
-  ::slotted([slot='end-icon']),
-  ::slotted([slot='selected-icon']) {
-    font-size: inherit;
-  }
-  mdui-circular-progress {
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-  :host([disabled]) mdui-circular-progress {
-    opacity: 0.38;
-  }
-  .label {
-    display: inline-flex;
-  }
-  .has-icon .label {
-    padding-left: 0.5rem;
-  }
-  .has-end-icon .label {
-    padding-right: 0.5rem;
-  }
-`;
+    )}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none;color:rgba(var(--mdui-color-on-surface),38%);border-color:rgba(var(--mdui-color-on-surface),12%)}:host([loading]){cursor:default;pointer-events:none}:host(:not(.mdui-segmented-button-first)){margin-left:-.0625rem}:host(.mdui-segmented-button-first){border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host(.mdui-segmented-button-last){border-radius:0 var(--shape-corner) var(--shape-corner) 0}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}mdui-circular-progress{width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{opacity:.38}.label{display:inline-flex}.has-icon .label{padding-left:.5rem}.has-end-icon .label{padding-right:.5rem}`;

package/components/segmented-button/segmented-button.js

@@ -74,20 +74,14 @@ let SegmentedButton = class SegmentedButton extends ButtonBase {
                 this.hasSlotController.test('icon'),
             'has-end-icon': this.endIcon || this.hasSlotController.test('end-icon'),
         });
-        return html `<mdui-ripple
-        ${ref(this.rippleRef)}
-        .noRipple=${this.noRipple}
-      ></mdui-ripple>
-      ${this.isButton()
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
             ? this.renderButton({
                 className,
                 part: 'button',
                 content: this.renderInner(),
             })
             : this.isDisabled() || this.loading
-                ? html `<span part="button" class="_a ${className}">
-            ${this.renderInner()}
-          </span>`
+                ? html `<span part="button" class="_a ${className}">${this.renderInner()}</span>`
                 : this.renderAnchor({
                     className,
                     part: 'button',
@@ -102,21 +96,13 @@ let SegmentedButton = class SegmentedButton extends ButtonBase {
             return this.renderLoading();
         }
         if (this.selected) {
-            return html `<slot
-        name="selected-icon"
-        part="selected-icon"
-        class="selected-icon"
-      >
-        ${this.selectedIcon
-                ? html `<mdui-icon name=${this.selectedIcon} class="i"></mdui-icon>`
-                : html `<mdui-icon-check class="i"></mdui-icon-check>`}
-      </slot>`;
+            return html `<slot name="selected-icon" part="selected-icon" class="selected-icon">${this.selectedIcon
+                ? html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot>`;
         }
-        return html `<slot name="icon" part="icon" class="icon">
-      ${this.icon
-            ? html `<mdui-icon name=${this.icon} class="i"></mdui-icon>`
-            : nothingTemplate}
-    </slot>`;
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot>`;
     }
     renderLabel() {
         const hasLabel = this.hasSlotController.test('[default]');
@@ -126,11 +112,9 @@ let SegmentedButton = class SegmentedButton extends ButtonBase {
         return html `<slot part="label" class="label"></slot>`;
     }
     renderEndIcon() {
-        return html `<slot name="end-icon" part="end-icon" class="end-icon">
-      ${this.endIcon
-            ? html `<mdui-icon name=${this.endIcon} class="i"></mdui-icon>`
-            : nothingTemplate}
-    </slot>`;
+        return html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+            ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot>`;
     }
     renderInner() {
         return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()];