Docs: Add docs for toggle/show/hide and examples. Move other visibility helpers to dedicated docs

Author: jlukic

docs/src/content/examples/query-clippingparent.mdx

@@ -4,7 +4,7 @@ shortTitle: '.clippingParent()'
 id: 'query-clippingparent'
 exampleType: 'component'
 category: 'Query'
-subcategory: 'DOM Traversal'
+subcategory: 'Visibility'
 tags: ['query', 'clipping', 'parent', 'overflow']
 description: 'Finds nearest clipping parent element'
 tip: 'Essential for positioning dropdowns and tooltips that respect overflow boundaries'

docs/src/content/examples/query-containingparent.mdx

@@ -4,7 +4,7 @@ shortTitle: '.containingParent()'
 id: 'query-containingparent'
 exampleType: 'component'
 category: 'Query'
-subcategory: 'DOM Traversal'
+subcategory: 'Visibility'
 tags: ['query', 'containing', 'parent', 'position']
 description: 'Finds nearest containing parent element'
 tip: 'Used for positioning elements relative to their containing block context'

docs/src/content/examples/query-is-visible.mdx

@@ -4,7 +4,7 @@ shortTitle: '.isVisible()'
 id: 'query-is-visible'
 exampleType: 'component'
 category: 'Query'
-subcategory: 'Logical Operators'
+subcategory: 'Visibility'
 tags: ['query', 'dom', 'is', 'visible', 'test', 'selector', 'traverse']
 description: 'Tests if element is visible in the page'
 selectedFile: 'page.js'

docs/src/content/examples/query-naturaldisplay.mdx

@@ -4,7 +4,7 @@ shortTitle: '.naturalDisplay()'
 id: 'query-naturaldisplay'
 exampleType: 'component'
 category: 'Query'
-subcategory: 'Dimensions'
+subcategory: 'Visibility'
 tags: ['query', 'dimensions', 'display', 'natural', 'css']
 description: 'Gets element natural display value ignoring display:none rules'
 tip: 'Useful for determining original display value before visibility changes'

docs/src/content/examples/query-visibility-hide.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Query .hide()'
+shortTitle: '.hide()'
+id: 'query-visibility-hide'
+exampleType: 'component'
+category: 'Query'
+subcategory: 'Visibility'
+tags: ['query', 'visibility', 'display', 'hide']
+description: 'Hides elements by setting display to none'
+tip: 'hide() works on any element regardless of current display value'
+selectedFile: 'page.js'
+---

docs/src/content/examples/query-visibility-show.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Query .show()'
+shortTitle: '.show()'
+id: 'query-visibility-show'
+exampleType: 'component'
+category: 'Query'
+subcategory: 'Visibility'
+tags: ['query', 'visibility', 'display', 'show']
+description: 'Shows hidden elements using their natural display value'
+tip: 'Use calculate: false for better performance with simple elements'
+selectedFile: 'page.js'
+---

docs/src/content/examples/query-visibility-toggle.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Query .toggle()'
+shortTitle: '.toggle()'
+id: 'query-visibility-toggle'
+exampleType: 'component'
+category: 'Query'
+subcategory: 'Visibility'
+tags: ['query', 'visibility', 'display', 'toggle']
+description: 'Toggles element visibility between hidden and shown states'
+tip: 'toggle() intelligently shows or hides based on current display state'
+selectedFile: 'page.js'
+---

docs/src/examples/query-visibility-hide/page.css

@@ -0,0 +1,63 @@
+.elements {
+  padding: 15px;
+  background: var(--standard-5);
+  border-radius: var(--border-radius);
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.item {
+  padding: 10px;
+  border-radius: var(--border-radius);
+  font-weight: bold;
+}
+
+.block-item {
+  background: var(--blue-background-color);
+  color: var(--blue-text-color);
+  border: var(--blue-border);
+}
+
+.inline-item {
+  background: var(--green-background-color);
+  color: var(--green-text-color);
+  border: var(--green-border);
+  display: inline-block;
+  align-self: flex-start;
+}
+
+.flex-container {
+  background: var(--purple-background-color);
+  color: var(--purple-text-color);
+  border: var(--purple-border);
+  display: flex;
+  gap: 10px;
+  
+  span {
+    background: var(--orange-background-color);
+    color: var(--orange-text-color);
+    border: var(--orange-border);
+    padding: 8px 12px;
+    border-radius: var(--border-radius);
+  }
+}
+
+.controls {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.status {
+  padding: 10px;
+  background: var(--standard-10);
+  border-radius: var(--border-radius);
+  font-family: monospace;
+  
+  .count {
+    font-weight: bold;
+  }
+}

docs/src/examples/query-visibility-hide/page.html

@@ -0,0 +1,20 @@
+<p>Click buttons to hide visible elements</p>
+
+<div class="elements">
+  <div class="item block-item">Block Item 1</div>
+  <div class="item block-item">Block Item 2</div>
+  <span class="item inline-item">Inline 1</span>
+  <span class="item inline-item">Inline 2</span>
+  <div class="item flex-container">
+    <span>Flex Item 1</span>
+    <span>Flex Item 2</span>
+  </div>
+</div>
+
+<div class="controls">
+  <ui-button class="hide-blocks">Hide Blocks</ui-button>
+  <ui-button class="hide-inlines">Hide Inlines</ui-button>
+  <ui-button class="hide-flex">Hide Flex</ui-button>
+  <ui-button class="hide-all">Hide All</ui-button>
+  <ui-button class="show-all">Show All</ui-button>
+</div>

docs/src/examples/query-visibility-hide/page.js

@@ -0,0 +1,26 @@
+import { $ } from '@semantic-ui/query';
+
+// Hide block elements
+$('.hide-blocks').on('click', () => {
+  $('.block-item').hide();
+});
+
+// Hide inline elements
+$('.hide-inlines').on('click', () => {
+  $('.inline-item').hide();
+});
+
+// Hide flex container
+$('.hide-flex').on('click', () => {
+  $('.flex-container').hide();
+});
+
+// Hide all elements
+$('.hide-all').on('click', () => {
+  $('.item').hide();
+});
+
+// Show all elements to reset
+$('.show-all').on('click', () => {
+  $('.item').show();
+});