@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/src/utilities/_truncation.scss

@@ -0,0 +1,126 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - TRUNCATION
+   Text overflow and truncation utilities
+
+   Dependencies:
+   - None (standalone utilities)
+
+   Generated classes:
+   - .bh-truncate (single line ellipsis)
+   - .bh-line-clamp_{n} (multi-line clamp)
+   - .bh-truncate_none (disable truncation)
+   - .bh-break-word, .bh-break-all (word breaking)
+   ========================================================================== */
+
+/* --- SINGLE LINE TRUNCATE --- */
+
+.bh-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- MULTI-LINE CLAMP --- */
+/* Uses -webkit-line-clamp for cross-browser support */
+
+.bh-line-clamp_1 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+
+.bh-line-clamp_2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.bh-line-clamp_3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.bh-line-clamp_4 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.bh-line-clamp_5 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  overflow: hidden;
+}
+
+.bh-line-clamp_6 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+  overflow: hidden;
+}
+
+/* --- DISABLE TRUNCATION --- */
+
+.bh-truncate_none {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+/* --- WORD BREAKING --- */
+
+.bh-break-word {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.bh-break-all {
+  word-break: break-all;
+}
+
+.bh-break-normal {
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.bh-break-keep {
+  word-break: keep-all;
+}
+
+/* --- WHITE SPACE --- */
+
+.bh-whitespace-normal {
+  white-space: normal;
+}
+
+.bh-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.bh-whitespace-pre {
+  white-space: pre;
+}
+
+.bh-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.bh-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+/* --- TEXT OVERFLOW --- */
+
+.bh-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.bh-text-clip {
+  text-overflow: clip;
+}

package/src/utilities/_visibility.scss

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   BELLHOP UTILITIES - VISIBILITY
+   Responsive show/hide and accessibility utilities
+
+   Dependencies:
+   - _semantic.scss (tokens)
+   - _responsive.scss (breakpoint mixins)
+
+   Generated classes:
+   - .bh-hidden, .bh-invisible (always hidden)
+   - .bh-hide@{breakpoint} (responsive hide)
+   - .bh-show@{breakpoint} (responsive show)
+   - .bh-sr-only (screen reader only)
+   - .bh-hide@print, .bh-show@print (print utilities)
+   ========================================================================== */
+
+@use '../mixins/responsive' as *;
+
+/* --- ALWAYS HIDDEN --- */
+
+.bh-hidden {
+  display: none !important;
+}
+
+.bh-invisible {
+  visibility: hidden;
+}
+
+/* --- RESPONSIVE HIDE --- */
+/* Hidden at breakpoint and below (mobile-first) */
+
+.bh-hide\@mobile {
+  @include bh-breakpoint-only('mobile') {
+    display: none !important;
+  }
+}
+
+.bh-hide\@tablet {
+  @include bh-breakpoint-down('tablet') {
+    display: none !important;
+  }
+}
+
+.bh-hide\@desktop {
+  @include bh-breakpoint-down('desktop') {
+    display: none !important;
+  }
+}
+
+/* --- RESPONSIVE SHOW --- */
+/* Hidden by default, shown at breakpoint and above */
+
+.bh-show\@tablet {
+  display: none !important;
+
+  @include bh-breakpoint-up('tablet') {
+    display: block !important;
+  }
+}
+
+.bh-show\@desktop {
+  display: none !important;
+
+  @include bh-breakpoint-up('desktop') {
+    display: block !important;
+  }
+}
+
+.bh-show\@wide {
+  display: none !important;
+
+  @include bh-breakpoint-up('wide') {
+    display: block !important;
+  }
+}
+
+/* --- SCREEN READER ONLY --- */
+/* Accessible to screen readers but visually hidden */
+
+.bh-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Allow element to be focusable when navigated to via keyboard */
+.bh-sr-only-focusable:focus,
+.bh-sr-only-focusable:active {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: inherit;
+  margin: inherit;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* --- PRINT UTILITIES --- */
+
+.bh-hide\@print {
+  @media print {
+    display: none !important;
+  }
+}
+
+.bh-show\@print {
+  @media not print {
+    display: none !important;
+  }
+}

package/src/utilities.scss

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   BELLHOP UTILITIES
+   Public entry point for all utility classes
+
+   Usage:
+   @import '@actabldesign/bellhop-styles/utilities';
+
+   Or import specific utilities:
+   @import '@actabldesign/bellhop-styles/utilities/spacing';
+
+   Available utilities:
+
+   Phase 1 - Foundation:
+   - Spacing: margin, padding, gap with responsive variants
+   - Breakpoints: CSS custom properties for JavaScript access
+
+   Phase 2 - Layout:
+   - Grid: CSS Grid layout utilities
+   - Flex: Flexbox alignment utilities
+   - Sizing: Width/height utilities
+
+   Phase 3 - Content:
+   - Visibility: Show/hide utilities with responsive and print support
+   - Truncation: Text overflow and line-clamp utilities
+   - Scrollable: Overflow and scroll behavior utilities
+   ========================================================================== */
+
+// Import design tokens first (required for utilities)
+@use './bh-tokens/semantic';
+
+// Import all utilities
+@use './utilities/index';

package/components/appbar.css

@@ -1,167 +0,0 @@
-.appbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 56px;
-  padding: 0 var(--spacing-sm);
-  background-color: var(--color-white);
-  border-bottom: 1px solid var(--color-neutral-200);
-  font-family: var(--font-inter);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  box-sizing: border-box;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-/* Left Section */
-.left-section {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xl);
-  flex-shrink: 0;
-}
-
-/* Menu toggle styles removed - now using app-button component */
-
-.logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--spacing-4xl);
-  height: var(--spacing-4xl);
-  color: var(--color-brand-500);
-}
-
-.logo-image {
-  width: 36px;
-  height: 36px;
-  object-fit: contain;
-}
-
-.property-name {
-  font-size: var(--text-md-size);
-  font-weight: var(--weight-semibold);
-  color: var(--color-neutral-800);
-  line-height: var(--text-md-line);
-  white-space: nowrap;
-}
-
-/* Center Section */
-.center-section {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  min-width: 0;
-}
-
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  max-width: 100%;
-}
-
-.breadcrumb-item {
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-500);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-xs) var(--spacing-md);
-  border-radius: var(--radius-xs);
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-
-.breadcrumb-item.active {
-  color: var(--color-neutral-800);
-  font-weight: var(--weight-medium);
-  cursor: default;
-}
-
-.breadcrumb-item:disabled {
-  cursor: default;
-}
-
-.breadcrumb-separator {
-  color: var(--color-neutral-200);
-  flex-shrink: 0;
-}
-
-/* Right Section */
-.right-section {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  flex-shrink: 0;
-}
-
-/* Icon button styles removed - now using app-button component */
-
-.icon-button-wrapper {
-  position: relative;
-}
-
-.icon-badge-dot {
-  position: absolute;
-  top: 0;
-  right: 4px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .appbar {
-    padding: 0 16px;
-  }
-
-  .property-name {
-    display: none;
-  }
-
-  .left-section {
-    gap: 12px;
-  }
-
-  .breadcrumbs {
-    max-width: 200px;
-  }
-
-  .breadcrumb-item {
-    font-size: 13px;
-    padding: 2px 6px;
-    max-width: 80px;
-  }
-}
-
-@media (max-width: 480px) {
-  .appbar {
-    padding: 0 12px;
-  }
-
-  .breadcrumbs {
-    max-width: 150px;
-  }
-
-  .breadcrumb-item {
-    font-size: 12px;
-    max-width: 60px;
-  }
-
-  .right-section {
-    gap: 4px;
-  }
-
-  .icon-button {
-    width: 32px;
-    height: 32px;
-  }
-}

package/components/autocomplete-menu.css

@@ -1,142 +0,0 @@
-/* ==========================================================================
-   AUTOCOMPLETE MENU COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-.autocomplete-menu {
-  position: absolute;
-  z-index: 1000;
-  top: calc(100% + var(--spacing-sm));
-  left: 0;
-  right: 0;
-  width: 100%;
-  min-width: 240px;
-  background: var(--color-white);
-  border-radius: var(--radius-md);
-  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),
-    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
-  border: 1px solid var(--color-neutral-200);
-  overflow: hidden;
-  overflow-y: auto;
-  /* Add padding like dropdown-menu items container */
-  padding: var(--spacing-xs) 0;
-  /* Optimizations for stable layout */
-  box-sizing: border-box;
-  transform: translateZ(0); /* Hardware acceleration */
-  will-change: opacity, transform;
-}
-
-
-/* Menu Items - Match dropdown-menu styling exactly */
-.autocomplete-item {
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  cursor: pointer;
-}
-
-.autocomplete-item.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.item-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-  padding: var(--spacing-xl) var(--spacing-md);
-  border-radius: var(--radius-sm);
-  transition: background-color 0.15s ease;
-}
-
-.autocomplete-item:hover:not(.disabled) .item-content {
-  background: var(--color-neutral-100);
-}
-
-.autocomplete-item.selected .item-content {
-  background: var(--color-neutral-100);
-}
-
-.item-text {
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-700);
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.autocomplete-item.selected .item-text {
-  color: var(--color-neutral-700);
-  font-weight: var(--weight-medium);
-}
-
-.autocomplete-item.disabled .item-text {
-  color: var(--color-neutral-400);
-}
-
-/* Highlight matching text */
-.item-text .highlight {
-  font-weight: var(--weight-semibold);
-  color: var(--color-neutral-800);
-}
-
-/* Check icon for multi-select */
-.check-icon {
-  font-size: var(--text-xl-size);
-  color: var(--color-brand-600);
-  flex-shrink: 0;
-  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
-}
-
-/* Custom Scrollbar */
-.autocomplete-menu::-webkit-scrollbar {
-  width: 6px;
-}
-
-.autocomplete-menu::-webkit-scrollbar-track {
-  background: var(--color-neutral-50);
-  border-radius: var(--radius-xs);
-}
-
-.autocomplete-menu::-webkit-scrollbar-thumb {
-  background: var(--color-neutral-200);
-  border-radius: var(--radius-xs);
-}
-
-.autocomplete-menu::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neutral-300);
-}
-
-/* Firefox scrollbar */
-.autocomplete-menu {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .autocomplete-menu {
-    border-width: 2px;
-  }
-
-  .autocomplete-item.selected {
-    outline: 2px solid var(--color-brand-500);
-    outline-offset: -2px;
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .autocomplete-menu.animate-dropdown-enter,
-  .autocomplete-menu.animate-dropdown-exit {
-    animation: none;
-  }
-
-  .autocomplete-item {
-    transition: none;
-  }
-}

package/components/avatar-add.css

@@ -1,112 +0,0 @@
-/* ==========================================================================
-   AVATAR ADD BUTTON COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-/* Base Button */
-.avatar-add {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--color-white);
-  border: 1px dashed var(--color-neutral-300);
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  padding: 0;
-  outline: none;
-}
-
-/* Button Sizes */
-.avatar-add-xs {
-  width: 24px;
-  height: 24px;
-}
-
-.avatar-add-sm {
-  width: 32px;
-  height: 32px;
-}
-
-.avatar-add-md {
-  width: 40px;
-  height: 40px;
-}
-
-/* ==========================================================================
-   BUTTON STATES
-   ========================================================================== */
-
-/* Hover State */
-.avatar-add-hover,
-.avatar-add:hover:not(:disabled) {
-  background-color: var(--color-neutral-50);
-}
-
-.avatar-add-hover .avatar-add-icon,
-.avatar-add:hover:not(:disabled) .avatar-add-icon {
-  color: var(--color-neutral-600);
-}
-
-/* Focus State */
-.avatar-add-focus,
-.avatar-add:focus-visible {
-  background-color: var(--color-white);
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-brand-500);
-}
-
-/* Disabled State */
-.avatar-add-disabled,
-.avatar-add:disabled {
-  background-color: var(--color-neutral-50);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.avatar-add-disabled .avatar-add-icon,
-.avatar-add:disabled .avatar-add-icon {
-  color: var(--color-neutral-300);
-}
-
-/* ==========================================================================
-   CONTENT ELEMENTS
-   ========================================================================== */
-
-/* Content Container */
-.avatar-add-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-}
-
-/* Icon */
-.avatar-add-icon {
-  color: var(--color-neutral-500);
-  line-height: 1;
-}
-
-/* Icon Sizes - adjusted for Material Symbols stroke weight */
-.avatar-add-xs .avatar-add-icon,
-.avatar-add-sm .avatar-add-icon {
-  font-variation-settings: 'wght' 400;
-}
-
-.avatar-add-md .avatar-add-icon {
-  font-variation-settings: 'wght' 500;
-}
-
-/* ==========================================================================
-   TOOLTIP POSITIONING
-   ========================================================================== */
-
-.avatar-add-button {
-  position: relative;
-}
-
-.avatar-add-tooltip {
-  position: absolute;
-  top: 0;
-  left: 50%;
-}