@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/src/bh-tokens/components/pagination.scss

@@ -0,0 +1,324 @@
+/* ==========================================================================
+   BH-PAGINATION COMPONENT STYLES
+   Uses tokens from _pagination.tokens.scss
+   ========================================================================== */
+
+@use './_pagination.tokens.scss';
+
+/* ==========================================================================
+   BASE PAGINATION CONTAINER
+   ========================================================================== */
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bh-pagination-gap);
+  padding: var(--bh-pagination-padding-block) var(--bh-pagination-padding-inline);
+  background-color: var(--bh-pagination-bg);
+  border-top: var(--bh-pagination-border-width) solid var(--bh-pagination-border-color);
+  font-family: var(--bh-font-family);
+}
+
+/* ==========================================================================
+   DISABLED STATE
+   ========================================================================== */
+
+.pagination-disabled {
+  opacity: var(--bh-pagination-disabled-opacity);
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   INFO SECTION
+   ========================================================================== */
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+}
+
+.pagination-info-text {
+  font-size: var(--bh-pagination-info-font-size);
+  color: var(--bh-pagination-info-color);
+  white-space: nowrap;
+}
+
+/* ==========================================================================
+   CONTROLS SECTION
+   ========================================================================== */
+
+.pagination-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: var(--bh-pagination-controls-gap);
+}
+
+/* ==========================================================================
+   PAGE SIZE SELECTOR
+   ========================================================================== */
+
+.pagination-page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-pagination-page-size-gap);
+}
+
+.pagination-page-size-label {
+  font-size: var(--bh-pagination-page-size-label-font-size);
+  color: var(--bh-pagination-page-size-label-color);
+  white-space: nowrap;
+}
+
+.pagination-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: var(--bh-pagination-select-bg);
+  border: 1px solid var(--bh-pagination-select-border);
+  border-radius: var(--bh-pagination-select-border-radius);
+  padding: 0 var(--bh-pagination-select-padding-inline-end) 0 var(--bh-pagination-select-padding-inline);
+  height: var(--bh-pagination-select-height);
+  font-size: var(--bh-pagination-select-font-size);
+  color: var(--bh-pagination-select-color);
+  cursor: pointer;
+  transition: var(--bh-pagination-select-transition);
+
+  /* Custom dropdown arrow */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 16px;
+}
+
+.pagination-select:hover:not(:disabled) {
+  border-color: var(--bh-pagination-select-border-hover);
+}
+
+.pagination-select:focus {
+  outline: none;
+  border-color: var(--bh-pagination-select-border-focus);
+  box-shadow: var(--bh-pagination-select-focus-ring);
+}
+
+.pagination-select:disabled,
+.pagination-select-disabled {
+  background-color: var(--bh-pagination-select-bg-disabled);
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+   NAVIGATION BUTTONS
+   ========================================================================== */
+
+.pagination-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-pagination-nav-gap);
+}
+
+.pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bh-pagination-btn-size);
+  height: var(--bh-pagination-btn-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--bh-pagination-btn-border-radius);
+  background-color: var(--bh-pagination-btn-bg);
+  color: var(--bh-pagination-btn-color);
+  cursor: pointer;
+  transition: var(--bh-pagination-btn-transition);
+}
+
+.pagination-btn .material-symbols-outlined {
+  font-size: var(--bh-pagination-btn-icon-size);
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background-color: var(--bh-pagination-btn-bg-hover);
+  color: var(--bh-pagination-btn-color-hover);
+}
+
+.pagination-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--bh-pagination-btn-focus-ring);
+}
+
+.pagination-btn:active:not(:disabled) {
+  background-color: var(--bh-pagination-btn-bg-active);
+}
+
+.pagination-btn:disabled,
+.pagination-btn-disabled {
+  opacity: var(--bh-pagination-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+   PAGE NUMBERS DISPLAY
+   ========================================================================== */
+
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-pagination-nav-gap);
+}
+
+.pagination-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--bh-pagination-page-btn-min-width);
+  height: var(--bh-pagination-page-btn-height);
+  padding: 0 var(--bh-pagination-page-btn-padding-inline);
+  border: 1px solid transparent;
+  border-radius: var(--bh-pagination-page-btn-border-radius);
+  background-color: var(--bh-pagination-page-btn-bg);
+  color: var(--bh-pagination-page-btn-color);
+  font-size: var(--bh-pagination-page-btn-font-size);
+  font-weight: var(--bh-pagination-page-btn-font-weight);
+  cursor: pointer;
+  transition: var(--bh-pagination-page-btn-transition);
+}
+
+.pagination-page-btn:hover:not(:disabled) {
+  background-color: var(--bh-pagination-page-btn-bg-hover);
+  color: var(--bh-pagination-page-btn-color-hover);
+}
+
+.pagination-page-btn-active {
+  background-color: var(--bh-pagination-page-btn-bg-active);
+  color: var(--bh-pagination-page-btn-color-active);
+  border-color: var(--bh-pagination-page-btn-border-color-active);
+}
+
+.pagination-page-btn-active:hover:not(:disabled) {
+  background-color: var(--bh-pagination-page-btn-bg-active);
+  border-color: var(--bh-pagination-page-btn-border-color-active);
+  color: var(--bh-pagination-page-btn-color-active);
+}
+
+.pagination-page-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--bh-pagination-page-btn-focus-ring);
+}
+
+.pagination-page-btn:disabled,
+.pagination-page-btn-disabled {
+  opacity: var(--bh-pagination-page-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--bh-pagination-ellipsis-min-width);
+  color: var(--bh-pagination-ellipsis-color);
+  font-size: var(--bh-pagination-ellipsis-font-size);
+  user-select: none;
+}
+
+/* ==========================================================================
+   COMPACT MODE - PAGE INPUT
+   ========================================================================== */
+
+.pagination-page-display {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-pagination-page-display-gap);
+}
+
+.pagination-page-text {
+  font-size: var(--bh-pagination-page-text-font-size);
+  color: var(--bh-pagination-page-text-color);
+  white-space: nowrap;
+}
+
+.pagination-page-input {
+  width: var(--bh-pagination-page-input-width);
+  height: var(--bh-pagination-page-input-height);
+  padding: 0 var(--bh-pagination-page-input-padding);
+  border: 1px solid var(--bh-pagination-page-input-border);
+  border-radius: var(--bh-pagination-page-input-border-radius);
+  font-size: var(--bh-pagination-page-input-font-size);
+  text-align: center;
+  color: var(--bh-pagination-page-input-color);
+  background-color: var(--bh-pagination-page-input-bg);
+  transition: var(--bh-pagination-page-input-transition);
+}
+
+.pagination-page-input:hover:not(:disabled) {
+  border-color: var(--bh-pagination-page-input-border-hover);
+}
+
+.pagination-page-input:focus {
+  outline: none;
+  border-color: var(--bh-pagination-page-input-border-focus);
+  box-shadow: var(--bh-pagination-page-input-focus-ring);
+}
+
+.pagination-page-input:disabled,
+.pagination-page-input-disabled {
+  background-color: var(--bh-pagination-page-input-bg-disabled);
+  cursor: not-allowed;
+}
+
+/* Remove number input spinners */
+.pagination-page-input::-webkit-inner-spin-button,
+.pagination-page-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.pagination-page-input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* ==========================================================================
+   ACCESSIBILITY
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .pagination-btn,
+  .pagination-page-btn,
+  .pagination-select,
+  .pagination-page-input {
+    transition: none;
+  }
+}
+
+/* ==========================================================================
+   RESPONSIVE ADJUSTMENTS
+   ========================================================================== */
+
+@media (max-width: 640px) {
+  .pagination {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--bh-pagination-mobile-gap);
+  }
+
+  .pagination-info {
+    justify-content: center;
+  }
+
+  .pagination-controls {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .pagination-page-size {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .pagination-nav {
+    justify-content: center;
+  }
+}

package/src/bh-tokens/components/password.scss

@@ -0,0 +1,193 @@
+/* ==========================================================================
+   BH-PASSWORD COMPONENT STYLES
+   Uses tokens from _password.tokens.scss
+   Extends base input styles
+   ========================================================================== */
+
+@use './password.tokens' as *;
+@use './input.scss' as *;
+
+:host {
+  display: block;
+  font-family: var(--bh-input-font-family);
+}
+
+/* ==========================================================================
+   PASSWORD CONTAINER
+   ========================================================================== */
+
+.password-container {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-password-container-gap);
+  padding: var(--bh-password-container-padding-md);
+  height: var(--bh-password-height-md);
+  background: var(--bh-password-bg);
+  border: var(--bh-password-border-width) solid var(--bh-password-border);
+  border-radius: var(--bh-password-radius);
+  transition: var(--bh-password-transition);
+  cursor: text;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   PASSWORD SIZES
+   ========================================================================== */
+
+.password-container.password-container-small {
+  height: var(--bh-password-height-sm);
+  padding: var(--bh-password-container-padding-sm);
+  font-size: var(--bh-input-font-size-sm);
+}
+
+.password-container.password-container-large {
+  height: var(--bh-password-height-lg);
+  padding: var(--bh-password-container-padding-lg);
+  font-size: var(--bh-input-font-size-lg);
+}
+
+/* ==========================================================================
+   PASSWORD VARIANTS
+   ========================================================================== */
+
+.password-container.password-container-filled {
+  background: var(--bh-input-filled-bg);
+  border-color: var(--bh-input-filled-border);
+}
+
+.password-container.password-container-filled:not(.password-container-disabled):hover {
+  background: var(--bh-input-filled-bg-hover);
+}
+
+.password-container.password-container-filled.password-container-focused {
+  background: var(--bh-input-filled-bg-focused);
+  border-color: var(--bh-input-filled-border-focused);
+}
+
+/* ==========================================================================
+   FLUID (FULL-WIDTH)
+   ========================================================================== */
+
+.password-container.password-container-fluid {
+  width: 100%;
+}
+
+/* ==========================================================================
+   PASSWORD STATES
+   ========================================================================== */
+
+.password-container.password-container-hover {
+  border-color: var(--bh-input-border-hover);
+}
+
+.password-container.password-container-focused {
+  border-color: var(--bh-input-border-focused);
+  box-shadow: var(--bh-input-shadow-focused);
+}
+
+.password-container.password-container-disabled {
+  opacity: var(--bh-input-opacity-disabled);
+  cursor: not-allowed;
+  background: var(--bh-input-bg-disabled);
+}
+
+.password-container.password-container-invalid {
+  border-color: var(--bh-input-border-invalid);
+}
+
+.password-container.password-container-invalid.password-container-hover {
+  border-color: var(--bh-input-border-invalid-hover);
+}
+
+.password-container.password-container-invalid.password-container-focused {
+  border-color: var(--bh-input-border-invalid-focused);
+}
+
+/* ==========================================================================
+   TOGGLE MASK BUTTON
+   ========================================================================== */
+
+.password-toggle-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: var(--bh-password-toggle-button-size);
+  height: var(--bh-password-toggle-button-size);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--bh-password-toggle-button-color);
+  transition: var(--bh-password-toggle-button-transition);
+  flex-shrink: 0;
+}
+
+.password-toggle-button:hover {
+  color: var(--bh-password-toggle-button-color-hover);
+}
+
+.password-toggle-button .material-symbols-outlined {
+  font-size: var(--bh-password-toggle-icon-size);
+}
+
+/* ==========================================================================
+   FEEDBACK PANEL
+   ========================================================================== */
+
+.password-feedback-panel {
+  margin-top: var(--bh-password-feedback-panel-margin-top);
+  padding: var(--bh-password-feedback-panel-padding);
+  background: var(--bh-password-feedback-panel-bg);
+  border: var(--bh-password-feedback-panel-border);
+  border-radius: var(--bh-password-feedback-panel-radius);
+  box-shadow: var(--bh-password-feedback-panel-shadow);
+}
+
+.password-feedback-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--bh-password-feedback-header-gap);
+  font-family: inherit;
+  font-weight: var(--bh-password-feedback-header-font-weight);
+  font-size: var(--bh-password-feedback-header-font-size);
+  line-height: 1.43;
+}
+
+.password-prompt {
+  color: var(--bh-password-prompt-color);
+}
+
+.password-strength-label {
+  color: var(--bh-password-strength-label-color);
+}
+
+/* ==========================================================================
+   STRENGTH METER
+   ========================================================================== */
+
+.password-strength-meter-container {
+  width: var(--bh-password-strength-meter-width);
+  height: var(--bh-password-strength-meter-height);
+  background: var(--bh-password-strength-meter-bg);
+  border-radius: var(--bh-password-strength-meter-radius);
+  overflow: hidden;
+}
+
+.strength-meter {
+  height: 100%;
+  transition: var(--bh-password-strength-meter-transition);
+  border-radius: var(--bh-password-strength-meter-radius);
+}
+
+.strength-meter.strength-meter-weak {
+  background: var(--bh-password-strength-weak-color);
+}
+
+.strength-meter.strength-meter-medium {
+  background: var(--bh-password-strength-medium-color);
+}
+
+.strength-meter.strength-meter-strong {
+  background: var(--bh-password-strength-strong-color);
+}

package/src/bh-tokens/components/progress-bar.scss

@@ -0,0 +1,124 @@
+/* ==========================================================================
+   BH-PROGRESS-BAR COMPONENT STYLES
+   Uses tokens from _progress-bar.tokens.scss
+   ========================================================================== */
+
+@use './_progress-bar.tokens.scss';
+
+:host {
+  display: block;
+  width: 100%;
+  position: relative;
+}
+
+.bh-progress-bar:has(.bh-progress-bar-value-right) {
+  margin-right: 50px;
+}
+
+/* ==========================================================================
+   BASE PROGRESS BAR CONTAINER
+   ========================================================================== */
+
+.bh-progress-bar-container {
+  position: relative;
+  height: var(--bh-progress-bar-height);
+  background-color: var(--bh-progress-bar-bg);
+  border-radius: var(--bh-progress-bar-radius);
+  /* overflow: visible is required for all floating and right labels */
+  overflow: visible;
+}
+
+/* ==========================================================================
+   PROGRESS BAR VALUE (FILLED PORTION)
+   ========================================================================== */
+.bh-progress-bar-value {
+  height: 100%;
+  background-color: var(--bh-progress-bar-bg-filled);
+  transition: var(--bh-progress-bar-transition);
+  border-radius: var(--bh-progress-bar-radius);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* ==========================================================================
+   INDETERMINATE MODE (ANIMATION)
+   ========================================================================== */
+
+/* The class is usually applied to the host via controller.classes */
+:host-context(.bh-progress-bar-indeterminate),
+.bh-progress-bar-indeterminate {
+  .bh-progress-bar-value {
+    width: 100% !important;
+    background-image: linear-gradient(
+      to right,
+      var(--bh-progress-bar-bg-filled) 10%,
+      var(--bh-brand-300) 50%,
+      var(--bh-progress-bar-bg-filled) 100%
+    );
+    background-size: 200% 100%;
+    animation: bh-progress-bar-shimmer var(--bh-progress-bar-animation-duration)
+      linear infinite;
+  }
+}
+
+@keyframes bh-progress-bar-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ==========================================================================
+   VALUE LABEL POSITIONS
+   ========================================================================== */
+
+.bh-progress-bar-label {
+  color: var(--bh-progress-bar-label-color);
+  font-size: var(--bh-progress-bar-label-font-size);
+  line-height: var(--bh-progress-bar-label-line-height);
+  font-weight: var(--bh-progress-bar-label-font-weight);
+  white-space: nowrap;
+  position: absolute; /* All labels are now absolute relative to the container */
+
+  /* 1. RIGHT: Fixed at the end of the gray track (100% of container width) */
+  &.bh-progress-bar-value-right {
+    left: calc(100% + var(--bh-spacing-sm));
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: left;
+    min-width: 3rem;
+  }
+
+  /* 2. BOTTOM: Aligned to the far right, below the bar */
+  &.bh-progress-bar-value-bottom {
+    right: 0;
+    top: calc(100% + var(--bh-spacing-xs));
+    text-align: right;
+  }
+
+  /* 3. FLOATING: Tied to the 'left' style percentage from the template */
+  &.bh-progress-bar-value-top-floating,
+  &.bh-progress-bar-value-bottom-floating {
+    transform: translateX(-50%);
+    transition: left var(--bh-progress-bar-transition);
+  }
+
+  &.bh-progress-bar-value-top-floating {
+    bottom: calc(100% + var(--bh-spacing-xs));
+  }
+
+  &.bh-progress-bar-value-bottom-floating {
+    top: calc(100% + var(--bh-spacing-xs));
+  }
+
+  &.bh-progress-bar-value-floating {
+    padding: var(--bh-spacing-xxs) var(--bh-spacing-xs);
+    background-color: var(--bh-white);
+    border: 1px solid var(--bh-progress-bar-label-border);
+    border-radius: var(--bh-progress-bar-label-radius);
+    box-shadow: var(--bh-progress-bar-label-shadow);
+  }
+}