From 4f0a7e0326a4bbc4c711a21569672cc13109e5e7 Mon Sep 17 00:00:00 2001 From: gtbu Date: Sun, 6 Apr 2025 13:17:18 +0200 Subject: [PATCH] added php - function Bootstrap5() --- include/admin/Settings/Classes.php | 418 +++++++++++++++++++++++++++++ 1 file changed, 418 insertions(+) diff --git a/include/admin/Settings/Classes.php b/include/admin/Settings/Classes.php index ae85670..84dc07a 100644 --- a/include/admin/Settings/Classes.php +++ b/include/admin/Settings/Classes.php @@ -671,6 +671,424 @@ class Classes extends \gp\special\Base{ return $bs4; } + /** + * Return list of classes for the Bootstrap 5 framework (up to v5.3) + * Includes features like subtle colors, link utilities, stacks, focus rings, etc. + * @return array + */ + public static function Bootstrap5(){ + + $cols_count = 12; + // Note: Base breakpoint (xs) uses no infix in BS5 utilities + $breakpoints = ['', 'sm', 'md', 'lg', 'xl', 'xxl']; + + // Standard Theme Colors + $colors = [ 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark' ]; + // Body/Subtle Colors (Introduced/Expanded in 5.2/5.3) + $body_colors = ['body', 'body-secondary', 'body-tertiary']; // Subtle background/text colors + $subtle_colors = array_map(fn($c) => $c . '-subtle', $colors); // e.g., primary-subtle + + // Combined Color Lists for Utilities + $all_bg_colors = array_merge($colors, $body_colors, $subtle_colors, ['white', 'black', 'transparent']); + $all_text_colors = array_merge($colors, $body_colors, ['white', 'black', 'muted', 'black-50', 'white-50', 'reset', 'body-emphasis'], $subtle_colors); // Added body-emphasis, subtle text + $all_border_colors= array_merge($colors, $subtle_colors, ['white', 'black']); // Subtle borders added 5.3 + + $spacers = range(0, 5); + $margins = array_merge(range(0, 5), ['auto']); // Positive margins + auto + $neg_margins= ['n1', 'n2', 'n3', 'n4', 'n5']; // Negative margins + $all_margins = array_merge($margins, $neg_margins); // All margin values + + $cols = array_merge([''], range(1, $cols_count), ['auto']); // Include plain 'col', 'col-*', 'col-auto' + $offsets = range(0, $cols_count - 1); + $orders = array_merge(['first', 'last'], range(0, 5)); // BS5 uses 0-5 for order + $border_widths = range(0, 5); // BS5 border widths 0-5 + $rounded_sizes = range(0, 5); // BS5 rounded sizes 0-5 (0=none, 1-3=sm/default/lg, 4, 5 new in 5.3) + $link_offsets = range(1, 3); // For link-offset-* + $link_opacities = [10, 25, 50, 75, 100]; // For link-opacity-* + + $bs5 = []; // array that will be returned + + // Define addSet closure for BS5 - slightly enhanced + $addSet = function(&$target_array, $desc, $name, $bps, $vals, $options = []) { + $defaults = [ + 'skip_base_zero' => false, // Skip generating class if breakpoint is base ('') and value is 0 + 'val_separator' => '-', // Separator between name and value (e.g., col-1) + 'bp_separator' => '-', // Separator between name/bp (e.g., col-sm) + ]; + $opts = array_merge($defaults, $options); + + $breakpoint_descs = [ + '' => '(mobile first / all screens)', + 'sm' => 'on small screens (≥ 576px)', + 'md' => 'on medium screens (≥ 768px)', + 'lg' => 'on large screens (≥ 992px)', + 'xl' => 'on extra large screens (≥ 1200px)', + 'xxl' => 'on extra extra large screens (≥ 1400px)', + ]; + + foreach ($bps as $bp) { + $names = []; + $d = $desc; + // Prepend breakpoint separator only if breakpoint is not empty + $bpn = $bp == '' ? '' : $opts['bp_separator'] . $bp; + + foreach ($vals as $val) { + // Option to skip zero value for base breakpoint + if ($opts['skip_base_zero'] && $bp == '' && ($val === 0 || $val === '0')) { + continue; + } + // Handle cases where value might be empty (like plain 'col') or keywords ('auto', 'first') + $val_str = ($val !== '' && $val !== null ? $opts['val_separator'] : '') . $val; + $names[] = $name . $bpn . $val_str; + } + + if (!empty($names)) { // Only add if names were generated + if (isset($breakpoint_descs[$bp])) { + $d .= ' ' . $breakpoint_descs[$bp]; + } + $target_array[] = [ + 'names' => implode(' ', $names), + 'desc' => $d, + ]; + } + } + }; + + // --- Color Modes (Bootstrap 5.3+) --- + $bs5[] = [ + 'names' => '[data-bs-theme="light"] [data-bs-theme="dark"] [data-bs-theme="auto"]', + 'desc' => 'BS5.3+ Color Modes: Apply theme to `` or component wrapper. Utilities like `*-subtle` adapt automatically. Not a class, but the core concept.', + ]; + + + // --- Layout --- + + // Containers + $bs5[] = [ + 'names' => 'container container-sm container-md container-lg container-xl container-xxl container-fluid', + 'desc' => 'BS5 Containers: Control the max-width of the layout. Use container-fluid for full width.', + ]; + + // Grid: Rows + $bs5[] = [ + 'names' => 'row', + 'desc' => 'BS5 Grid: Wrapper for columns. Use with `col-*` classes inside.', + ]; + + // Grid: Columns + $addSet($bs5, 'BS5 Grid: Column width (auto, specific fraction, or equal width). Use inside a `row`.', 'col', $breakpoints, $cols); + + // Grid: Row Columns (Control columns per row) + $addSet($bs5, 'BS5 Grid: Set the number of columns fitting per row. Use on a `row`.', 'row-cols', $breakpoints, array_merge(['auto'], range(1, 6))); // Auto + common values + + // Grid: Offsets + $addSet($bs5, 'BS5 Grid: Offset a column to the right (in twelfths).', 'offset', $breakpoints, $offsets, ['skip_base_zero' => true]); + + // Grid: Gutters (Spacing between columns) + $addSet($bs5, 'BS5 Grid: Set gutter width (padding on columns)', 'g', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Grid: Set horizontal gutter width', 'gx', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Grid: Set vertical gutter width', 'gy', $breakpoints, $spacers); + + // Stacks (New in BS5, vertical/horizontal layout helpers) + $bs5[] = [ + 'names' => 'vstack', + 'desc' => 'BS5 Layout Stacks: Creates a vertical flexbox layout. Use with `gap-*` utilities.', + ]; + $bs5[] = [ + 'names' => 'hstack', + 'desc' => 'BS5 Layout Stacks: Creates an inline horizontal flexbox layout. Use with `gap-*` utilities.', + ]; + $addSet($bs5, 'BS5 Layout Stacks: Adds space between items in a stack or grid.', 'gap', $breakpoints, $spacers); // Gap utility for stacks/grid + + // Clearfix + $bs5[] = [ + 'names' => 'clearfix', + 'desc' => 'BS5 Clearfix: Contains floats within a wrapper section.', + ]; + + + // --- Content & Typography --- + + // Headings (Classes match elements) + $bs5[] = [ + 'names' => 'h1 h2 h3 h4 h5 h6', + 'desc' => 'BS5 Typography: Style any text like a heading element.', + ]; + // Display Headings + $bs5[] = [ + 'names' => 'display-1 display-2 display-3 display-4 display-5 display-6', + 'desc' => 'BS5 Typography: Larger, more opinionated headings.', + ]; + + // Text Alignment + $addSet($bs5, 'BS5 Text: Alignment (respects LTR/RTL)', 'text', $breakpoints, ['start', 'center', 'end']); + $bs5[] = [ + 'names' => 'text-justify', // Non-responsive justify + 'desc' => 'BS5 Text: Justify paragraph text (applies to all screen sizes).' + ]; + + // Text Wrapping & Breaking + $bs5[] = [ + 'names' => 'text-wrap text-nowrap', + 'desc' => 'BS5 Text: Control text wrapping.', + ]; + $bs5[] = [ + 'names' => 'text-truncate', + 'desc' => 'BS5 Text: Truncate long text with an ellipsis.', + ]; + $bs5[] = [ + 'names' => 'text-break', + 'desc' => 'BS5 Text: Prevent long words from breaking layout by forcing wrap.', + ]; + + // Text Transform + $bs5[] = [ + 'names' => 'text-lowercase text-uppercase text-capitalize', + 'desc' => 'BS5 Text: Transform text case.', + ]; + + // Font Size + $bs5[] = [ + 'names' => 'fs-1 fs-2 fs-3 fs-4 fs-5 fs-6', + 'desc' => 'BS5 Typography: Responsive font sizes, scaling with viewport.', + ]; + + // Font Weight & Style + $bs5[] = [ + 'names' => 'fw-bold fw-bolder fw-semibold fw-normal fw-light fw-lighter', + 'desc' => 'BS5 Text: Font weight utilities.', + ]; + $bs5[] = [ + 'names' => 'fst-italic fst-normal', + 'desc' => 'BS5 Text: Font style utilities.', + ]; + + // Line Height + $bs5[] = [ + 'names' => 'lh-1 lh-sm lh-base lh-lg', + 'desc' => 'BS5 Text: Line height utilities.', + ]; + + // Monospace + $bs5[] = [ + 'names' => 'font-monospace', + 'desc' => 'BS5 Text: Use monospace font stack.', + ]; + + // Reset color + $bs5[] = [ + 'names' => 'text-reset', + 'desc' => 'BS5 Text: Resets text color to inherit from parent.', + ]; + + // Text Decoration + $bs5[] = [ + 'names' => 'text-decoration-underline text-decoration-line-through text-decoration-none', + 'desc' => 'BS5 Text: Add or remove text decoration.', + ]; + + // Lead & Small Text + $bs5[] = [ + 'names' => 'lead', + 'desc' => 'BS5 Text: Make a paragraph stand out.', + ]; + $bs5[] = [ + 'names' => 'small', + 'desc' => 'BS5 Text: Creates smaller, secondary text (like ``).', + ]; + + // Text Colors (Including 5.3 additions) + $bs5[] = [ + 'names' => implode(' ', array_map(fn($c) => "text-$c", $all_text_colors)), + 'desc' => 'BS5 Text Colors: Apply theme, body, subtle, muted, emphasis, white/black variations etc. Subtle colors adapt to light/dark modes.', + ]; + $bs5[] = [ + 'names' => 'text-opacity-25 text-opacity-50 text-opacity-75 text-opacity-100', + 'desc' => 'BS5 Text Opacity: Control the opacity of text colors (use with `text-*` utilities).', + ]; + + // --- Link Utilities (New/Expanded in 5.3) --- + $bs5[] = [ + 'names' => implode(' ', array_map(fn($c) => "link-$c", $colors)) . ' link-body-emphasis', + 'desc' => 'BS5 Link Helpers: Set link color. `link-body-emphasis` provides high contrast.', + ]; + $addSet($bs5, 'BS5 Link Helpers: Set link offset from text (underline spacing)', 'link-offset', ['', 'hover'], $link_offsets, ['bp_separator' => '']); // e.g., link-offset-2, link-offset-2-hover + $addSet($bs5, 'BS5 Link Helpers: Set link opacity', 'link-opacity', ['', 'hover'], $link_opacities, ['bp_separator' => '']); // e.g., link-opacity-50, link-opacity-75-hover + $bs5[] = [ + 'names' => 'link-underline', + 'desc' => 'BS5 Link Helpers: Base class for controlling underline style/opacity/offset.', + ]; + $addSet($bs5, 'BS5 Link Helpers: Set link underline color', 'link-underline', [''], $colors, ['val_separator' => '-']); // e.g., link-underline-primary + $addSet($bs5, 'BS5 Link Helpers: Set link underline opacity', 'link-underline-opacity', ['', 'hover'], $link_opacities, ['bp_separator' => '']); // e.g., link-underline-opacity-50 + + // --- Backgrounds (Including 5.3 additions) --- + $bs5[] = [ + 'names' => implode(' ', array_map(fn($c) => "bg-$c", $all_bg_colors)), + 'desc' => 'BS5 Background Colors: Apply theme, body shades, subtle colors, white/black/transparent. Subtle colors adapt to light/dark modes.', + ]; + $bs5[] = [ + 'names' => 'bg-opacity-10 bg-opacity-25 bg-opacity-50 bg-opacity-75 bg-opacity-100', + 'desc' => 'BS5 Background Opacity: Control the opacity of background colors (use with `bg-*` utilities).', + ]; + $bs5[] = [ + 'names' => 'bg-gradient', + 'desc' => 'BS5 Background Gradient: Adds a subtle top-to-bottom gradient (use with `bg-*` colors). Requires $enable-gradients: true;', + ]; + + // --- Text Background Helpers (New in 5.2) --- + $bs5[] = [ + 'names' => implode(' ', array_map(fn($c) => "text-bg-$c", $colors)), + 'desc' => 'BS5 Text/Background Helpers: Set background color and contrasting text color simultaneously (e.g., for badges, alerts).', + ]; + + // --- Spacing (Margin & Padding - RTL Aware) --- + // Padding + $addSet($bs5, 'BS5 Spacing: Set padding on all sides', 'p', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Spacing: Set padding top', 'pt', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Spacing: Set padding end (right in LTR, left in RTL)', 'pe', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Spacing: Set padding bottom', 'pb', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Spacing: Set padding start (left in LTR, right in RTL)', 'ps', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Spacing: Set horizontal padding (start and end)', 'px', $breakpoints, $spacers); + $addSet($bs5, 'BS5 Spacing: Set vertical padding (top and bottom)', 'py', $breakpoints, $spacers); + + // Margin (Positive & Auto) + $addSet($bs5, 'BS5 Spacing: Set margin on all sides (0-5, auto)', 'm', $breakpoints, $margins); + $addSet($bs5, 'BS5 Spacing: Set margin top (0-5, auto)', 'mt', $breakpoints, $margins); + $addSet($bs5, 'BS5 Spacing: Set margin end (0-5, auto)', 'me', $breakpoints, $margins); + $addSet($bs5, 'BS5 Spacing: Set margin bottom (0-5, auto)', 'mb', $breakpoints, $margins); + $addSet($bs5, 'BS5 Spacing: Set margin start (0-5, auto)', 'ms', $breakpoints, $margins); + $addSet($bs5, 'BS5 Spacing: Set horizontal margin (0-5, auto)', 'mx', $breakpoints, $margins); + $addSet($bs5, 'BS5 Spacing: Set vertical margin (0-5, auto)', 'my', $breakpoints, $margins); + + // Negative Margin + $addSet($bs5, 'BS5 Spacing: Set negative margin top', 'mt', $breakpoints, $neg_margins); + $addSet($bs5, 'BS5 Spacing: Set negative margin end', 'me', $breakpoints, $neg_margins); + $addSet($bs5, 'BS5 Spacing: Set negative margin bottom', 'mb', $breakpoints, $neg_margins); + $addSet($bs5, 'BS5 Spacing: Set negative margin start', 'ms', $breakpoints, $neg_margins); + $addSet($bs5, 'BS5 Spacing: Set negative horizontal margin', 'mx', $breakpoints, $neg_margins); + $addSet($bs5, 'BS5 Spacing: Set negative vertical margin', 'my', $breakpoints, $neg_margins); + + + // --- Sizing --- + // Width + $bs5[] = ['names' => 'w-25 w-50 w-75 w-100 w-auto', 'desc' => 'BS5 Sizing: Set width relative to parent (%).']; + $bs5[] = ['names' => 'mw-100', 'desc' => 'BS5 Sizing: Set max-width to 100%.']; + $bs5[] = ['names' => 'vw-100', 'desc' => 'BS5 Sizing: Set width to 100% of viewport width.']; + $bs5[] = ['names' => 'min-vw-100', 'desc' => 'BS5 Sizing: Set min-width to 100% of viewport width.']; + + // Height + $bs5[] = ['names' => 'h-25 h-50 h-75 h-100 h-auto', 'desc' => 'BS5 Sizing: Set height relative to parent (%).']; + $bs5[] = ['names' => 'mh-100', 'desc' => 'BS5 Sizing: Set max-height to 100%.']; + $bs5[] = ['names' => 'vh-100', 'desc' => 'BS5 Sizing: Set height to 100% of viewport height.']; + $bs5[] = ['names' => 'min-vh-100', 'desc' => 'BS5 Sizing: Set min-height to 100% of viewport height.']; + + + // --- Display & Visibility --- + // Display Property + $addSet($bs5, 'BS5 Display: Change the display property (e.g., d-none to hide)', 'd', $breakpoints, ['none', 'inline', 'inline-block', 'block', 'grid', 'table', 'table-row', 'table-cell', 'flex', 'inline-flex']); + + // Visibility Property + $bs5[] = ['names' => 'visible invisible', 'desc' => 'BS5 Visibility: Control visibility without changing display. Invisible elements still take up space.']; + + // Screen Readers (Accessibility) + $bs5[] = ['names' => 'visually-hidden', 'desc' => 'BS5 Accessibility: Hide elements visually but keep accessible to screen readers.']; + $bs5[] = ['names' => 'visually-hidden-focusable', 'desc' => 'BS5 Accessibility: Combine with visually-hidden; shows element only when focused.']; + + + // --- Flexbox --- (Apply to flex containers e.g., sections with `d-flex`) + $addSet($bs5, 'BS5 Flex: Set flex direction', 'flex', $breakpoints, ['row', 'column', 'row-reverse', 'column-reverse']); + $addSet($bs5, 'BS5 Flex: Justify content along main axis', 'justify-content', $breakpoints, ['start', 'end', 'center', 'between', 'around', 'evenly']); + $addSet($bs5, 'BS5 Flex: Align items along cross axis', 'align-items', $breakpoints, ['start', 'end', 'center', 'baseline', 'stretch']); + $addSet($bs5, 'BS5 Flex: Align self (on flex item) along cross axis', 'align-self', $breakpoints, ['start', 'end', 'center', 'baseline', 'stretch', 'auto']); + $addSet($bs5, 'BS5 Flex: Control wrapping of flex items', 'flex', $breakpoints, ['wrap', 'nowrap', 'wrap-reverse']); + $addSet($bs5, 'BS5 Flex: Control grow behavior of flex item', 'flex', $breakpoints, ['grow-0', 'grow-1']); + $addSet($bs5, 'BS5 Flex: Control shrink behavior of flex item', 'flex', $breakpoints, ['shrink-0', 'shrink-1']); + $addSet($bs5, 'BS5 Flex: Fill available space (apply to flex items)', 'flex', $breakpoints, ['fill']); + $addSet($bs5, 'BS5 Flex: Change visual order of flex items', 'order', $breakpoints, $orders); + + + // --- Positioning --- + $bs5[] = ['names' => 'position-static position-relative position-absolute position-fixed position-sticky', 'desc' => 'BS5 Position: Set the element\'s position type.']; + $bs5[] = ['names' => 'top-0 top-50 top-100 bottom-0 bottom-50 bottom-100 start-0 start-50 start-100 end-0 end-50 end-100', 'desc' => 'BS5 Position: Position element edges (requires non-static position). Start/End are LTR/RTL aware.']; + $bs5[] = ['names' => 'translate-middle translate-middle-x translate-middle-y', 'desc' => 'BS5 Position: Center element using transforms (use with edge utilities like top-50/start-50).']; + $bs5[] = ['names' => 'fixed-top fixed-bottom sticky-top sticky-bottom', 'desc' => 'BS5 Position: Shorthand for fixed/sticky positioning at top or bottom of viewport. `sticky-bottom` added in 5.2.',]; + // Responsive sticky top added in 5.2 + $addSet($bs5, 'BS5 Position: Responsive sticky top positioning', 'sticky', $breakpoints, ['top']); + + + // --- Borders (Including 5.3 additions) --- + $bs5[] = ['names' => 'border border-top border-end border-bottom border-start', 'desc' => 'BS5 Borders: Add borders to specific sides (respects LTR/RTL).']; + $bs5[] = ['names' => 'border-0 border-top-0 border-end-0 border-bottom-0 border-start-0', 'desc' => 'BS5 Borders: Remove borders from specific sides.']; + $bs5[] = ['names' => implode(' ', array_map(fn($c) => "border-$c", $all_border_colors)), 'desc' => 'BS5 Borders: Set border color using theme, subtle, white/black colors. Subtle colors adapt to light/dark modes.',]; + $bs5[] = ['names' => 'border-opacity-10 border-opacity-25 border-opacity-50 border-opacity-75 border-opacity-100', 'desc' => 'BS5 Borders: Set border color opacity.',]; + $bs5[] = ['names' => implode(' ', array_map(fn($w) => "border-$w", $border_widths)), 'desc' => 'BS5 Borders: Set border width (0-5).',]; + + // Border Radius (Including 5.3 additions) + $bs5[] = ['names' => 'rounded rounded-top rounded-end rounded-bottom rounded-start rounded-circle rounded-pill', 'desc' => 'BS5 Borders: Apply border radius to corners (specific sides respect LTR/RTL, circle, pill).']; + $bs5[] = ['names' => implode(' ', array_map(fn($s) => "rounded-$s", $rounded_sizes)), 'desc' => 'BS5 Borders: Apply specific border radius sizes (0=none, 1-5=increasingly round). `rounded-4`, `rounded-5` added 5.3.',]; + + + // --- Shadows --- + $bs5[] = ['names' => 'shadow-none shadow-sm shadow shadow-lg', 'desc' => 'BS5 Shadows: Add or remove box shadows.',]; + + + // --- Components (Examples suitable for sections) --- + // Alerts + $bs5[] = ['names' => 'alert', 'desc' => 'BS5 Alert: Base class for alert message boxes. Use with alert-* color classes or text-bg-* helpers.',]; + $bs5[] = ['names' => implode(' ', array_map(fn($c) => "alert-$c", $colors)), 'desc' => 'BS5 Alert Colors: Contextual alert styles (traditional method).',]; + $bs5[] = ['names' => 'alert-heading', 'desc' => 'BS5 Alert: Style heading text within an alert.',]; + $bs5[] = ['names' => 'alert-link', 'desc' => 'BS5 Alert: Style links within an alert to match the color.',]; + $bs5[] = ['names' => 'alert-dismissible', 'desc' => 'BS5 Alert: Add for a closable alert (requires JS & button).',]; + + // Cards + $bs5[] = ['names' => 'card', 'desc' => 'BS5 Card: Base class for card component wrapper section.',]; + $bs5[] = ['names' => 'card-header card-body card-footer', 'desc' => 'BS5 Card Content: Use for child sections inside a `card` section for structure.',]; + $bs5[] = ['names' => 'card-img card-img-top card-img-bottom', 'desc' => 'BS5 Card Image: Use for image sections within a card.',]; + $bs5[] = ['names' => 'card-img-overlay', 'desc' => 'BS5 Card Overlay: Use for content section placed *after* `card-img` to overlay text.',]; + $bs5[] = ['names' => 'card-title card-subtitle card-text card-link', 'desc' => 'BS5 Card Typography: Use for text/link elements inside card content sections.',]; + $bs5[] = ['names' => 'card-group', 'desc' => 'BS5 Card Layout: Group cards without gutters.',]; + // Note: card-columns removed (use Masonry JS), card-deck removed (use grid). + + // Offcanvas (Responsive added in 5.2) + $bs5[] = ['names' => 'offcanvas offcanvas-start offcanvas-end offcanvas-top offcanvas-bottom', 'desc' => 'BS5 Offcanvas: Base classes for the offcanvas panel itself (place outside main content). Position determines slide direction.']; + $addSet($bs5, 'BS5 Offcanvas: Make offcanvas responsive, showing permanently above breakpoint', 'offcanvas', $breakpoints, ['']); // Generates offcanvas-sm, offcanvas-md etc. Applied to the .offcanvas element. + + + // --- Utilities --- + + // Float (Use flexbox/grid where possible) + $addSet($bs5, 'BS5 Float: Float element start/end (right/left in LTR). Avoid if possible.', 'float', $breakpoints, ['start', 'end', 'none']); + + // Overflow + $bs5[] = ['names' => 'overflow-auto overflow-hidden overflow-visible overflow-scroll', 'desc' => 'BS5 Overflow: Control how content overflows the element\'s box.',]; + $addSet($bs5, 'BS5 Overflow: Control horizontal overflow', 'overflow-x', [''], ['auto', 'hidden', 'visible', 'scroll']); + $addSet($bs5, 'BS5 Overflow: Control vertical overflow', 'overflow-y', [''], ['auto', 'hidden', 'visible', 'scroll']); + + + // Interactions + $bs5[] = ['names' => 'user-select-all user-select-auto user-select-none', 'desc' => 'BS5 Interaction: Control text selection behavior.']; + $bs5[] = ['names' => 'pe-none pe-auto', 'desc' => 'BS5 Interaction: Control pointer events (e.g., make element unclickable).']; + + // Focus Ring (New in 5.2, enhanced 5.3) + $bs5[] = ['names' => 'focus-ring', 'desc' => 'BS5 Interaction Helper: Apply custom focus ring styles (often via CSS vars). Can be used with color helpers like `focus-ring-primary`.']; + $bs5[] = ['names' => implode(' ', array_map(fn($c) => "focus-ring-$c", $colors)), 'desc' => 'BS5 Interaction Helper: Set focus ring color. Requires `focus-ring` base class.',]; + + + // Icon Link (New in 5.2) + $bs5[] = ['names' => 'icon-link', 'desc' => 'BS5 Helper: Style links with accompanying SVG icons (requires specific HTML structure).']; + $bs5[] = ['names' => 'icon-link-hover', 'desc' => 'BS5 Helper: Apply icon link transform effect on hover.']; + + // Ratios + $bs5[] = ['names' => 'ratio ratio-1x1 ratio-4x3 ratio-16x9 ratio-21x9', 'desc' => 'BS5 Ratios: Create responsive aspect ratios for embeddable content (video, maps). Apply to parent element.']; + + // Vertical Rule
Helper + $bs5[] = ['names' => 'vr', 'desc' => 'BS5 Helper: Create vertical dividers, typically used within flex layouts.']; + + // Print Utilities + $bs5[] = ['names' => 'd-print-none d-print-inline d-print-inline-block d-print-block d-print-grid d-print-table d-print-table-row d-print-table-cell d-print-flex d-print-inline-flex', 'desc' => 'BS5 Print: Change element display property only when printing.',]; + + return $bs5; + } /**