@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/scss/components/_input_group.scss

@@ -0,0 +1,151 @@
+/* Input Group */
+.input-group:not(:has(> .form-control[type="file"])) {
+  border: $input-border-width solid $input-border-color;
+  border-radius: var(--moo-input-group-border-radius);
+  background-color: var(--moo-input-bg, transparent);
+}
+
+.input-group:not(:has(> .form-control[type="file"])):not(:has(> .dropdown-menu)) {
+  overflow: hidden;
+}
+
+.input-group.rounded-pill:not(:has(> .form-control[type="file"])) {
+  --moo-input-group-border-radius: var(--bs-border-radius-pill);
+}
+
+.input-group:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):not(:has(textarea)):not(:has(> .form-control[type="file"])):not(:has(> [data-align])) {
+  height: calc(#{$input-height} + #{$input-border-width} * 2);
+}
+
+.input-group:not(:has(> :is(.valid-feedback, .invalid-feedback, .valid-tooltip, .invalid-tooltip))):not(:has(textarea)):not(:has(> .form-control[type="file"])):not(:has(> [data-align])) > .form-control {
+  min-height: 0;
+}
+
+.input-group > textarea.form-control {
+  resize: none;
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :not(:first-child):not([class~="dropdown-menu"]):not([class~="valid-tooltip"]):not([class~="valid-feedback"]):not([class~="invalid-tooltip"]):not([class~="invalid-feedback"]) {
+  margin: 0;
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :not(ul) {
+  border: 0;
+  border-radius: 0;
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :first-child:not(ul) {
+  border-start-start-radius: var(--moo-input-group-border-radius);
+  border-end-start-radius: var(--moo-input-group-border-radius);
+}
+
+.input-group:not(:has(> .form-control[type="file"])) > :is(:last-child, :nth-last-child(2):has(+ .dropdown-menu)):not(ul) {
+  border-start-end-radius: var(--moo-input-group-border-radius);
+  border-end-end-radius: var(--moo-input-group-border-radius);
+}
+
+.input-group > :is(button, a) {
+  border: var(--bs-btn-border-width) var(--bs-border-style) var(--bs-btn-border-color);
+}
+
+.input-group > .btn-ghost {
+  --bs-btn-hover-bg: transparent;
+  --bs-btn-active-bg: transparent;
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--moo-input-group-border-radius) !important;
+}
+
+.input-group > .btn-ghost::before {
+  position: absolute;
+  inset: $spacer * 0.25;
+  z-index: -1;
+  content: "";
+  border-radius: var(--moo-input-group-border-radius);
+  background-color: var(--moo-muted-surface);
+  opacity: 0;
+  transition: $transition-fade;
+}
+
+.input-group > .btn-ghost:hover::before,
+.input-group > .btn-ghost:is(.show, [aria-expanded="true"])::before {
+  opacity: 1;
+}
+
+.input-group > .btn-ghost:is(.show, [aria-expanded="true"]) {
+  color: var(--bs-btn-active-color);
+}
+
+.input-group > .btn-ghost[aria-pressed="true"] {
+  color: var(--bs-btn-active-color);
+}
+
+.input-group > .btn-ghost[aria-pressed="true"]::before {
+  opacity: 1;
+}
+
+.input-group > .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
+  transform: none;
+}
+
+.input-group > :is(.btn-xs, .btn-icon-xs) {
+  --bs-btn-padding-y: #{$spacer * 0.125};
+  --bs-btn-padding-x: #{$spacer * 0.375};
+  --bs-btn-line-height: #{$spacer * 0.875};
+}
+
+.input-group > .input-group-text {
+  color: var(--bs-secondary-color);
+}
+
+.input-group > .input-group-text:first-child {
+  padding-inline-end: 0;
+}
+
+.input-group > .input-group-text:first-child + .form-control {
+  padding-inline-start: $input-btn-padding-y;
+}
+
+.input-group > .input-group-text:last-child {
+  padding-inline-start: 0;
+}
+
+.input-group > .form-control:has(+ .input-group-text:last-child) {
+  padding-inline-end: $input-btn-padding-y;
+}
+
+.input-group-text > [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: var(--bs-secondary-color);
+}
+
+.input-group:has(> [data-align]) {
+  height: auto;
+}
+
+.input-group > [data-align] {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  width: 100%;
+  padding: $input-btn-padding-y $input-padding-x $input-padding-y-lg;
+}
+
+.input-group > [data-align="block-start"] {
+  order: -1;
+}
+
+.input-group > [data-align] > .input-group-text {
+  padding: 0;
+  color: var(--bs-secondary-color);
+  border: 0;
+  background-color: transparent;
+}
+
+
+.input-group:not(:has(> .form-control[type="file"])) > :is(.form-control, .form-select):focus {
+  outline: 0;
+  box-shadow: none;
+}

package/scss/components/_kbd.scss

@@ -0,0 +1,11 @@
+/* Keyboard keys */
+kbd {
+  display: inline-flex;
+  height: $moo-chip-height;
+  min-width: $moo-chip-height;
+  align-items: center;
+  justify-content: center;
+  font-family: $font-family-sans-serif;
+  line-height: $spacer;
+  font-weight: $font-weight-medium;
+}

package/scss/components/_menubar.scss

@@ -0,0 +1,17 @@
+/* Menubar */
+.menubar {
+  gap: $moo-menubar-gap;
+  padding: $moo-menubar-padding;
+}
+
+.menubar .dropdown-menu {
+  z-index: $zindex-dropdown;
+}
+
+.menubar [data-bs-toggle="dropdown"].show,
+.menubar .dropdown-toggle.show {
+  --bs-btn-color: var(--moo-foreground);
+
+  color: var(--bs-btn-color);
+  font-weight: $font-weight-medium;
+}

package/scss/components/_navigation.scss

@@ -0,0 +1,36 @@
+/* Navigation */
+.nav {
+  --bs-nav-link-color: var(--moo-foreground);
+  --bs-nav-link-hover-color: var(--moo-foreground);
+  --bs-nav-link-disabled-color: var(--moo-disabled-foreground);
+}
+
+.nav-pills {
+  --bs-nav-pills-border-radius: var(--bs-border-radius);
+  --bs-nav-pills-link-active-color: var(--moo-foreground);
+  --bs-nav-pills-link-active-bg: var(--moo-muted-surface);
+}
+
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacer * 0.5;
+}
+
+.nav.flex-column .nav-link {
+  width: 100%;
+}
+
+.nav-pills .nav-link:not(.active, .disabled):hover {
+  background-color: var(--moo-muted-surface);
+}
+
+.nav-pills:has(.nav-link:hover) .nav-link.active:not(:hover) {
+  background-color: transparent;
+}
+
+.nav-link [data-icon] {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}

package/scss/components/_pagination.scss

@@ -0,0 +1,58 @@
+/* Pagination */
+.page-link {
+  $page-link-square-size: calc(
+    #{$moo-chip-height} + #{$moo-pagination-square-inset} + var(--bs-pagination-border-width) * 2
+  );
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: $spacer * 0.375;
+  min-width: $page-link-square-size;
+  min-height: $page-link-square-size;
+  line-height: 1.25rem;
+  font-weight: 500;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.page-link[aria-label]:has(> span:not(.visually-hidden):not(.d-none)):has([data-icon="inline-start"]) {
+  padding-inline-start: $spacer * 0.375;
+  padding-inline-end: $spacer * 0.625;
+}
+
+.page-link[aria-label]:has(> span:not(.visually-hidden):not(.d-none)):has([data-icon="inline-end"]) {
+  padding-inline-start: $spacer * 0.625;
+  padding-inline-end: $spacer * 0.375;
+}
+
+@include media-breakpoint-up(sm) {
+  .page-link[aria-label]:has(> .d-sm-inline):has([data-icon="inline-start"]) {
+    padding-inline-start: $spacer * 0.375;
+    padding-inline-end: $spacer * 0.625;
+  }
+
+  .page-link[aria-label]:has(> .d-sm-inline):has([data-icon="inline-end"]) {
+    padding-inline-start: $spacer * 0.625;
+    padding-inline-end: $spacer * 0.375;
+  }
+}
+
+.page-link:has([data-icon]):not(:has(> span:not(.visually-hidden))) {
+  padding-inline: 0;
+}
+
+.page-link [data-icon] {
+  width: $spacer;
+  height: $spacer;
+  flex: 0 0 auto;
+}
+
+.page-item:not(.disabled) .page-link:active {
+  transform: translateY($moo-control-active-translate-y);
+}
+
+.page-item.disabled {
+  opacity: var(--moo-disabled-control-opacity);
+}

package/scss/components/_popover.scss

@@ -0,0 +1,26 @@
+/* Popover */
+.popover {
+  --bs-popover-border-radius: var(--bs-border-radius-lg);
+  --bs-popover-border-color: var(--moo-border);
+  --bs-popover-header-bg: var(--bs-popover-bg);
+  --bs-popover-header-color: var(--bs-popover-body-color);
+  --bs-popover-header-padding-x: #{$spacer * 0.625};
+  --bs-popover-header-padding-y: #{$spacer * 0.625};
+  --bs-popover-body-padding-x: #{$spacer * 0.625};
+  --bs-popover-body-padding-y: #{$spacer * 0.625};
+  --bs-popover-font-size: 0.875rem;
+  line-height: 1.43;
+  --bs-popover-max-width: 20rem;
+  width: 20rem;
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.popover-header {
+  padding-bottom: 0;
+  border-bottom: 0;
+  font-weight: $font-weight-medium;
+}
+
+.popover .popover-arrow {
+  display: none;
+}

package/scss/components/_progress.scss

@@ -0,0 +1,5 @@
+/* Progress */
+.progress {
+  --bs-progress-bar-color: var(--moo-primary-foreground);
+  --bs-progress-bar-bg: var(--moo-primary);
+}

package/scss/components/_radio_group.scss

@@ -0,0 +1,108 @@
+/* Radio Group */
+.radio-group legend.form-label {
+  font-size: inherit;
+}
+
+.form-check-card {
+  position: relative;
+  padding: 0;
+  margin-bottom: 0;
+
+  + .form-check-card {
+    margin-block-start: $spacer * 0.5;
+  }
+
+  > .form-check-input:not(.visually-hidden) {
+    position: absolute;
+    inset-block-start: $spacer * 0.75;
+    inset-inline-end: $spacer * 0.75;
+    float: none;
+    margin: 0;
+  }
+
+  > .form-check-label {
+    display: flex;
+    align-items: center;
+    gap: $spacer * 0.75;
+    padding: $spacer * 0.75;
+    padding-inline-end: $spacer * 1.5 + $form-check-input-width;
+    border: var(--bs-border-width) solid var(--moo-border);
+    border-radius: var(--bs-border-radius);
+    color: var(--moo-foreground);
+    cursor: pointer;
+  }
+
+  &.form-check-card--no-control > .form-check-label {
+    padding-inline-end: $spacer * 0.75;
+  }
+
+  > .form-check-input:not(:disabled) ~ .form-check-label:hover,
+  > .form-check-input:checked ~ .form-check-label {
+    background-color: var(--moo-muted-surface);
+  }
+
+  > .form-check-input:checked ~ .form-check-label {
+    border-color: var(--moo-foreground);
+  }
+
+  > .form-check-input:checked ~ .form-check-label .form-check-card-media {
+    border-color: var(--moo-primary);
+    background-color: var(--moo-primary);
+    color: var(--moo-primary-foreground);
+  }
+
+  > .form-check-input:focus-visible ~ .form-check-label {
+    border-color: var(--moo-ring);
+    box-shadow: $form-check-input-focus-box-shadow;
+  }
+
+  > .form-check-input.is-invalid ~ .form-check-label {
+    border-color: var(--bs-form-invalid-border-color);
+  }
+
+  > .form-check-input.is-invalid:focus-visible ~ .form-check-label {
+    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--moo-form-invalid-ring-color);
+  }
+}
+
+.form-check-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  min-width: 0;
+  line-height: $line-height-sm;
+  overflow-wrap: anywhere;
+
+  > .form-text {
+    margin: 0;
+    font-size: $font-size-sm;
+    line-height: inherit;
+    color: $moo-form-check-card-description-color;
+  }
+}
+
+.form-check-card-title {
+  font-weight: $font-weight-medium;
+}
+
+.form-check-card-media {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  inline-size: ($font-size-base + $font-size-sm) * $line-height-sm + $spacer * 0.25;
+  aspect-ratio: 1;
+  border: var(--bs-border-width) solid var(--moo-border);
+  border-radius: var(--bs-border-radius-sm);
+  background-color: var(--moo-muted-surface);
+  color: var(--moo-foreground);
+
+  > span {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+  }
+
+  > [data-icon] {
+    width: $font-size-base;
+    height: $font-size-base;
+  }
+}

package/scss/components/_search_trigger.scss

@@ -0,0 +1,61 @@
+/* Search Trigger */
+.search-trigger {
+  width: $moo-search-trigger-width;
+  max-width: 100%;
+  flex: 0 1 $moo-search-trigger-width;
+  min-width: 0;
+  justify-content: space-between;
+  height: $moo-search-trigger-height;
+  padding: $moo-search-trigger-padding-y $moo-search-trigger-padding-x;
+  color: var(--bs-secondary-color);
+  border: var(--bs-border-width) solid $moo-search-trigger-border-color;
+  border-radius: var(--bs-border-radius);
+  background: color-mix(in srgb, var(--bs-secondary-bg) 55%, var(--bs-body-bg));
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  box-shadow: none;
+}
+
+.search-trigger:hover {
+  color: var(--bs-secondary-color);
+  border-color: $moo-search-trigger-border-color;
+  background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
+}
+
+.search-trigger:focus-visible {
+  color: var(--bs-secondary-color);
+  border-color: $moo-search-trigger-border-color;
+  background: color-mix(in srgb, var(--bs-secondary-bg) 78%, var(--bs-body-bg));
+}
+
+.search-trigger__label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: $moo-search-trigger-label-gap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-trigger__shortcut {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: $moo-search-trigger-shortcut-gap;
+  margin-inline-start: auto;
+}
+
+@include media-breakpoint-up(lg) {
+  .search-trigger {
+    width: $moo-search-trigger-width-lg;
+    flex-basis: $moo-search-trigger-width-lg;
+  }
+}
+
+@include media-breakpoint-up(xxl) {
+  .search-trigger {
+    width: $moo-search-trigger-width-xxl;
+    flex-basis: $moo-search-trigger-width-xxl;
+  }
+}

package/scss/components/_select.scss

@@ -0,0 +1,8 @@
+/* Select */
+.form-select {
+  option,
+  optgroup {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+  }
+}

package/scss/components/_separator.scss

@@ -0,0 +1,10 @@
+/* Separator */
+hr {
+  opacity: 1;
+  border-top: var(--bs-border-width) solid var(--moo-border);
+}
+
+.vr {
+  opacity: 1;
+  background-color: var(--moo-border);
+}

package/scss/components/_sheet.scss

@@ -0,0 +1,16 @@
+/* Sheet */
+.offcanvas.sheet {
+  --bs-offcanvas-width: 24rem;
+  --bs-offcanvas-border-color: var(--moo-border);
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.offcanvas.sheet[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-box-shadow-lg);
+}
+
+.offcanvas.sheet .offcanvas-title {
+  font-size: 1rem;
+  font-weight: $font-weight-medium;
+}

package/scss/components/_sidebar.scss

@@ -0,0 +1,5 @@
+/* Sidebar */
+@import "sidebar/base";
+@import "sidebar/menus";
+@import "sidebar/identity";
+@import "sidebar/collapsed";

package/scss/components/_skeleton.scss

@@ -0,0 +1,10 @@
+/* Skeleton */
+.skeleton {
+  color: var(--moo-border);
+  border-radius: var(--bs-border-radius);
+  overflow: hidden;
+}
+
+.skeleton > .placeholder {
+  display: block;
+}