@sveltia/ui 0.42.0 → 0.43.0

package/dist/components/button/button.svelte

@@ -109,277 +109,178 @@
   </Popup>
 {/if}
 
-<style lang="scss">
-  button {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    margin: var(--sui-focus-ring-width);
-    border-width: 0;
-    border-style: solid;
-    border-color: transparent;
-    padding: 0;
-    color: var(--sui-control-foreground-color, inherit);
-    background-color: transparent;
-    box-shadow: none;
-    font-family: var(--sui-control-font-family);
-    font-size: var(--sui-control-font-size);
-    line-height: var(--sui-control-line-height);
-    font-weight: var(--sui-font-weight-normal, normal);
-    text-align: start;
-    cursor: pointer;
-    transition: all 200ms;
-
-    &[hidden] {
-      display: none !important;
-    }
-
-    &:not(:disabled):focus-visible {
-      z-index: 1;
-    }
-
-    &:is(.primary, .secondary, .tertiary, .ghost) {
-      justify-content: center;
-      border-width: 1px;
-
-      .label:only-child {
-        padding: 0 4px;
-      }
-    }
-
-    &.primary {
-      border-width: var(--sui-button-primary-border-width, 1px);
-      border-style: var(--sui-button-primary-border-style, solid);
-      border-color: var(--sui-button-primary-border-color, var(--sui-primary-accent-color));
-      color: var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted));
-      background-color: var(--sui-button-primary-background-color, var(--sui-primary-accent-color));
-      font-weight: var(--sui-button-primary-font-weight, var(--sui-font-weight-normal, normal));
-
-      &:is(:hover, :focus-visible, [aria-expanded='true']) {
-        color: var(
-          --sui-button-primary-foreground-color-focus,
-          var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted))
-        );
-        background-color: var(
-          --sui-button-primary-background-color-focus,
-          var(--sui-primary-accent-color-light)
-        );
-      }
-
-      &:active {
-        color: var(
-          --sui-button-primary-foreground-color-active,
-          var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted))
-        );
-        background-color: var(
-          --sui-button-primary-background-color-active,
-          var(--sui-primary-accent-color-dark)
-        );
-      }
-    }
-
-    &.secondary {
-      border-width: var(--sui-button-secondary-border-width, 1px);
-      border-style: var(--sui-button-secondary-border-style, solid);
-      border-color: var(--sui-button-secondary-border-color, var(--sui-primary-accent-color));
-      color: var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text));
-      background-color: var(
-        --sui-button-secondary-background-color,
-        var(--sui-button-background-color)
-      );
-      font-weight: var(--sui-button-secondary-font-weight, var(--sui-font-weight-normal, normal));
-
-      &:is(:hover, :focus-visible, [aria-expanded='true']) {
-        color: var(
-          --sui-button-secondary-foreground-color-focus,
-          var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text))
-        );
-        background-color: var(
-          --sui-button-secondary-background-color-focus,
-          var(--sui-hover-background-color)
-        );
-      }
-
-      &:active {
-        color: var(
-          --sui-button-secondary-foreground-color-active,
-          var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text))
-        );
-        background-color: var(
-          --sui-button-secondary-background-color-active,
-          var(--sui-active-background-color)
-        );
-      }
-
-      &[aria-pressed='true'] {
-        color: var(--sui-button-secondary-foreground-color-pressed);
-        background-color: var(
-          --sui-button-secondary-background-color-pressed,
-          var(--sui-primary-accent-color)
-        );
-      }
-    }
-
-    &.tertiary {
-      border-width: var(--sui-button-tertiary-border-width, 1px);
-      border-style: var(--sui-button-tertiary-border-style, solid);
-      border-color: var(--sui-button-tertiary-border-color, var(--sui-button-border-color));
-      color: var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color));
-      background-color: var(
-        --sui-button-tertiary-background-color,
-        var(--sui-button-background-color)
-      );
-      font-weight: var(--sui-button-tertiary-font-weight, var(--sui-font-weight-normal, normal));
-
-      &:is(:hover, :focus-visible, [aria-expanded='true']) {
-        color: var(
-          --sui-button-tertiary-foreground-color-focus,
-          var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color))
-        );
-        background-color: var(
-          --sui-button-tertiary-background-color-focus,
-          var(--sui-hover-background-color)
-        );
-      }
-
-      &:active {
-        color: var(
-          --sui-button-tertiary-foreground-color-active,
-          var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color))
-        );
-        background-color: var(
-          --sui-button-tertiary-background-color-active,
-          var(--sui-active-background-color)
-        );
-      }
-
-      &[aria-pressed='true'] {
-        color: var(--sui-button-tertiary-foreground-color-pressed);
-        background-color: var(
-          --sui-button-tertiary-background-color-pressed,
-          var(--sui-selected-background-color)
-        );
-      }
-    }
-
-    &.ghost {
-      font-weight: var(--sui-button-ghost-font-weight, var(--sui-font-weight-normal, normal));
-
-      &:is(:hover, :focus-visible, [aria-expanded='true']) {
-        color: var(--sui-button-ghost-foreground-color-focus);
-        background-color: var(
-          --sui-button-ghost-background-color-focus,
-          var(--sui-hover-background-color)
-        );
-      }
-
-      &:active {
-        color: var(--sui-button-ghost-foreground-color-active);
-        background-color: var(
-          --sui-button-ghost-background-color-active,
-          var(--sui-active-background-color)
-        );
-      }
-
-      &[aria-pressed='true'] {
-        color: var(--sui-button-ghost-foreground-color-pressed);
-        background-color: var(
-          --sui-button-ghost-background-color-pressed,
-          var(--sui-selected-background-color)
-        );
-      }
-    }
-
-    &.link {
-      outline: 0;
-      margin: 0;
-      border-radius: 0 !important;
-      padding: 0 !important;
-      height: auto !important;
-      color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
-
-      .label {
-        padding: 0;
-        line-height: var(--sui-line-height-compact);
-        text-decoration: var(--sui-button-link-text-decoration, none);
-        text-underline-offset: 2px;
-        white-space: normal;
-
-        :global(:is(:root, :host)[data-underline-links='true']) & {
-          text-decoration: underline;
-        }
-      }
-
-      &:is(:hover, :focus, :active) {
-        .label {
-          text-decoration: var(--sui-button-link-text-decoration-focus, underline);
-        }
-      }
-    }
-
-    &.small {
-      border-radius: var(--sui-button-small-border-radius);
-      padding: var(--sui-button-small-padding);
-      height: var(--sui-button-small-height);
-      font-size: var(--sui-button-small-font-size, var(--sui-font-size-small));
-
-      :global {
-        .icon {
-          font-size: var(--sui-font-size-large);
-        }
-      }
-    }
-
-    &.medium {
-      border-radius: var(--sui-button-medium-border-radius);
-      padding: var(--sui-button-medium-padding);
-      height: var(--sui-button-medium-height);
-      font-size: var(--sui-button-medium-font-size, var(--sui-font-size-default));
-    }
-
-    &.large {
-      border-radius: var(--sui-button-large-border-radius);
-      padding: var(--sui-button-large-padding);
-      height: var(--sui-button-large-height);
-      font-size: var(--sui-button-large-font-size, var(--sui-font-size-large));
-    }
-
-    &.pill {
-      border-radius: 80px;
-      padding: var(--sui-button-medium-pill-padding, 0 12px);
-    }
-
-    &.flex:not([hidden]) {
-      display: inline-flex; // Avoid Tailwind .flex class collisions
-      flex: auto;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    &.iconic {
-      justify-content: center;
-      padding: 0;
-      aspect-ratio: 1 / 1;
-    }
-
-    &.danger {
-      background-color: var(--sui-error-background-color);
-    }
-
-    .label {
-      padding: 0 4px;
-    }
-
-    :global {
-      & > * {
-        pointer-events: none;
-      }
-
-      &:has([slot='start-icon'] + [slot='end-icon']) {
-        gap: 0;
-      }
-    }
-  }
-</style>
+<style>button {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: var(--sui-focus-ring-width);
+  border-width: 0;
+  border-style: solid;
+  border-color: transparent;
+  padding: 0;
+  color: var(--sui-control-foreground-color, inherit);
+  background-color: transparent;
+  box-shadow: none;
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+  font-weight: var(--sui-font-weight-normal, normal);
+  text-align: start;
+  cursor: pointer;
+  transition: all 200ms;
+}
+button[hidden] {
+  display: none !important;
+}
+button:not(:disabled):focus-visible {
+  z-index: 1;
+}
+button:is(.primary, .secondary, .tertiary, .ghost) {
+  justify-content: center;
+  border-width: 1px;
+}
+button:is(.primary, .secondary, .tertiary, .ghost) .label:only-child {
+  padding: 0 4px;
+}
+button.primary {
+  border-width: var(--sui-button-primary-border-width, 1px);
+  border-style: var(--sui-button-primary-border-style, solid);
+  border-color: var(--sui-button-primary-border-color, var(--sui-primary-accent-color));
+  color: var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted));
+  background-color: var(--sui-button-primary-background-color, var(--sui-primary-accent-color));
+  font-weight: var(--sui-button-primary-font-weight, var(--sui-font-weight-normal, normal));
+}
+button.primary:is(:hover, :focus-visible, [aria-expanded=true]) {
+  color: var(--sui-button-primary-foreground-color-focus, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
+  background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light));
+}
+button.primary:active {
+  color: var(--sui-button-primary-foreground-color-active, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
+  background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark));
+}
+button.secondary {
+  border-width: var(--sui-button-secondary-border-width, 1px);
+  border-style: var(--sui-button-secondary-border-style, solid);
+  border-color: var(--sui-button-secondary-border-color, var(--sui-primary-accent-color));
+  color: var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text));
+  background-color: var(--sui-button-secondary-background-color, var(--sui-button-background-color));
+  font-weight: var(--sui-button-secondary-font-weight, var(--sui-font-weight-normal, normal));
+}
+button.secondary:is(:hover, :focus-visible, [aria-expanded=true]) {
+  color: var(--sui-button-secondary-foreground-color-focus, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
+  background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color));
+}
+button.secondary:active {
+  color: var(--sui-button-secondary-foreground-color-active, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
+  background-color: var(--sui-button-secondary-background-color-active, var(--sui-active-background-color));
+}
+button.secondary[aria-pressed=true] {
+  color: var(--sui-button-secondary-foreground-color-pressed);
+  background-color: var(--sui-button-secondary-background-color-pressed, var(--sui-primary-accent-color));
+}
+button.tertiary {
+  border-width: var(--sui-button-tertiary-border-width, 1px);
+  border-style: var(--sui-button-tertiary-border-style, solid);
+  border-color: var(--sui-button-tertiary-border-color, var(--sui-button-border-color));
+  color: var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color));
+  background-color: var(--sui-button-tertiary-background-color, var(--sui-button-background-color));
+  font-weight: var(--sui-button-tertiary-font-weight, var(--sui-font-weight-normal, normal));
+}
+button.tertiary:is(:hover, :focus-visible, [aria-expanded=true]) {
+  color: var(--sui-button-tertiary-foreground-color-focus, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
+  background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color));
+}
+button.tertiary:active {
+  color: var(--sui-button-tertiary-foreground-color-active, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
+  background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color));
+}
+button.tertiary[aria-pressed=true] {
+  color: var(--sui-button-tertiary-foreground-color-pressed);
+  background-color: var(--sui-button-tertiary-background-color-pressed, var(--sui-selected-background-color));
+}
+button.ghost {
+  font-weight: var(--sui-button-ghost-font-weight, var(--sui-font-weight-normal, normal));
+}
+button.ghost:is(:hover, :focus-visible, [aria-expanded=true]) {
+  color: var(--sui-button-ghost-foreground-color-focus);
+  background-color: var(--sui-button-ghost-background-color-focus, var(--sui-hover-background-color));
+}
+button.ghost:active {
+  color: var(--sui-button-ghost-foreground-color-active);
+  background-color: var(--sui-button-ghost-background-color-active, var(--sui-active-background-color));
+}
+button.ghost[aria-pressed=true] {
+  color: var(--sui-button-ghost-foreground-color-pressed);
+  background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color));
+}
+button.link {
+  outline: 0;
+  margin: 0;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  height: auto !important;
+  color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
+}
+button.link .label {
+  padding: 0;
+  line-height: var(--sui-line-height-compact);
+  text-decoration: var(--sui-button-link-text-decoration, none);
+  text-underline-offset: 2px;
+  white-space: normal;
+}
+:global(:is(:root, :host)[data-underline-links='true']) button.link .label {
+  text-decoration: underline;
+}
+button.link:is(:hover, :focus, :active) .label {
+  text-decoration: var(--sui-button-link-text-decoration-focus, underline);
+}
+button.small {
+  border-radius: var(--sui-button-small-border-radius);
+  padding: var(--sui-button-small-padding);
+  height: var(--sui-button-small-height);
+  font-size: var(--sui-button-small-font-size, var(--sui-font-size-small));
+}
+button.small :global(.icon) {
+  font-size: var(--sui-font-size-large);
+}
+button.medium {
+  border-radius: var(--sui-button-medium-border-radius);
+  padding: var(--sui-button-medium-padding);
+  height: var(--sui-button-medium-height);
+  font-size: var(--sui-button-medium-font-size, var(--sui-font-size-default));
+}
+button.large {
+  border-radius: var(--sui-button-large-border-radius);
+  padding: var(--sui-button-large-padding);
+  height: var(--sui-button-large-height);
+  font-size: var(--sui-button-large-font-size, var(--sui-font-size-large));
+}
+button.pill {
+  border-radius: 80px;
+  padding: var(--sui-button-medium-pill-padding, 0 12px);
+}
+button.flex:not([hidden]) {
+  display: inline-flex;
+  flex: auto;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+}
+button.iconic {
+  justify-content: center;
+  padding: 0;
+  aspect-ratio: 1/1;
+}
+button.danger {
+  background-color: var(--sui-error-background-color);
+}
+button .label {
+  padding: 0 4px;
+}
+button > :global(*) {
+  pointer-events: none;
+}
+button :global(:has([slot=start-icon] + [slot=end-icon])) {
+  gap: 0;
+}</style>

package/dist/components/button/floating-action-button-wrapper.svelte

@@ -20,28 +20,23 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
+<style>.floating-action-button-wrapper {
+  display: contents;
+}
+@media (width < 768px) {
   .floating-action-button-wrapper {
-    display: contents;
-
-    @media (width < 768px) {
-      display: block;
-      position: fixed;
-      inset-inline-end: 16px;
-      inset-block-end: 72px;
-      z-index: 100;
-
-      :global {
-        button {
-          border-radius: 50%;
-          height: 56px;
-          box-shadow: 0 4px 8px #0006;
-
-          .icon {
-            font-size: 32px;
-          }
-        }
-      }
-    }
+    display: block;
+    position: fixed;
+    inset-inline-end: 16px;
+    inset-block-end: 72px;
+    z-index: 100;
+  }
+  .floating-action-button-wrapper :global(button) {
+    border-radius: 50%;
+    height: 56px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  }
+  .floating-action-button-wrapper :global(button) :global(.icon) {
+    font-size: 32px;
   }
-</style>
+}</style>

package/dist/components/button/select-button-group.svelte

@@ -65,61 +65,45 @@
   </div>
 </div>
 
-<style lang="scss">
-  .select-button-group {
-    flex: none;
-    display: inline-flex;
-    align-items: center;
-    margin: var(--sui-focus-ring-width);
+<style>.select-button-group {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  margin: var(--sui-focus-ring-width);
+}
+.select-button-group:focus-visible {
+  outline-width: 0 !important;
+}
+.select-button-group :global(button) {
+  margin: 0 !important;
+  border-radius: 0 !important;
+  color: var(--sui-primary-foreground-color);
+}
+.select-button-group :global(button:first-child) {
+  border-start-start-radius: 4px !important;
+  border-end-start-radius: 4px !important;
+}
+.select-button-group :global(button:not(:first-child)) {
+  border-inline-start-width: 0;
+}
+.select-button-group :global(button:last-child) {
+  border-start-end-radius: 4px !important;
+  border-end-end-radius: 4px !important;
+}
+.select-button-group :global(button[aria-checked=true]) {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-selected-background-color);
+}
+.select-button-group :global([aria-invalid=true]) :global(button) {
+  border-color: var(--sui-error-border-color);
+}
+.select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) {
+  filter: grayscale(0) opacity(1);
+}
+.select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) :global(*) {
+  filter: grayscale(1) opacity(0.35);
+}
 
-    &:focus-visible {
-      outline-width: 0 !important;
-    }
-
-    :global {
-      button {
-        margin: 0 !important;
-        border-radius: 0 !important;
-        color: var(--sui-primary-foreground-color);
-
-        &:first-child {
-          border-start-start-radius: 4px !important;
-          border-end-start-radius: 4px !important;
-        }
-
-        &:not(:first-child) {
-          border-inline-start-width: 0;
-        }
-
-        &:last-child {
-          border-start-end-radius: 4px !important;
-          border-end-end-radius: 4px !important;
-        }
-
-        &[aria-checked='true'] {
-          color: var(--sui-highlight-foreground-color);
-          background-color: var(--sui-selected-background-color);
-        }
-      }
-
-      &[aria-invalid='true'] button {
-        border-color: var(--sui-error-border-color);
-      }
-
-      // Maintain the border opacity
-      &[aria-disabled='false'] {
-        button[aria-disabled='true'] {
-          filter: grayscale(0) opacity(1);
-
-          * {
-            filter: grayscale(1) opacity(0.35);
-          }
-        }
-      }
-    }
-  }
-
-  .inner {
-    display: contents;
-  }
-</style>
+.inner {
+  display: contents;
+}</style>

package/dist/components/button/split-button.svelte

@@ -82,28 +82,21 @@
   </MenuButton>
 </div>
 
-<style lang="scss">
-  .split-button {
-    flex: none;
-    display: inline-flex;
-    margin: var(--sui-focus-ring-width);
-
-    :global {
-      button {
-        margin: 0;
-
-        &.menu-button {
-          border-inline-start-width: 0;
-          border-start-start-radius: 0;
-          border-end-start-radius: 0;
-          aspect-ratio: 3 / 4;
-        }
-
-        &:not(.menu-button) {
-          border-start-end-radius: 0;
-          border-end-end-radius: 0;
-        }
-      }
-    }
-  }
-</style>
+<style>.split-button {
+  flex: none;
+  display: inline-flex;
+  margin: var(--sui-focus-ring-width);
+}
+.split-button :global(button) {
+  margin: 0;
+}
+.split-button :global(button.menu-button) {
+  border-inline-start-width: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  aspect-ratio: 3/4;
+}
+.split-button :global(button:not(.menu-button)) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}</style>