feat(components): DLT-3159 enforce positive boolean props

.claude/rules/documentation-writing.md

@@ -176,7 +176,7 @@ Use GFM-style blockquote alerts to render `<dt-notice>` components. A markdown-i
 
 **KIND** must be one of: `BASE`, `INFO`, `SUCCESS`, `WARNING`, `ERROR` (case-insensitive, but uppercase is the convention — maps to DtNotice's `kind` prop).
 
-The plugin always adds `hide-close` and `class="d-wmx100p d-my-200 dialtone-doc-notice"`. Links in the body automatically get `d-link` styling.
+The plugin always adds `:show-close="false"` and `class="d-wmx100p d-my-200 dialtone-doc-notice"`. Links in the body automatically get `d-link` styling.
 
 ### Choosing a kind
 

.claude/rules/vue-components.md

@@ -15,7 +15,7 @@ paths:
 - Use `validator` — NEVER `validate`. Vue silently ignores `validate`.
 - Import allowed values from `*_constants.js`. Never hardcode valid value arrays inline.
 - Add JSDoc with `@values` annotation.
-- Boolean visibility toggles: prefer `hideX` negative polarity (`hideClose`, `hideHeader`, `hideArrow`).
+- Boolean visibility toggles: use positive polarity (`showClose`, `showHeader`, `showArrow`). Never use negative names (`hideX`, `preventX`, `skipX`).
 
 ## Events
 

.claude/skills/vue-conventions.md

@@ -20,6 +20,6 @@ Detailed rules are applied automatically via path-scoped rules when editing comp
 | Structural slots | `header` / `footer` |
 | Sizes (interactive) | `xs`, `sm`, `md`, `lg`, `xl` |
 | Sizes (icons) | `100`–`800` numeric |
-| Visibility toggles | `hideX` negative polarity |
+| Visibility toggles | `showX` positive polarity |
 | Styles | `<style scoped>` or `d-*` utility classes, `var(--dt-*)` tokens only |
 | Shared behavior | Composables for new, mixins for legacy in `packages/dialtone-vue/common/mixins/` (`InputMixin`, `CheckableMixin`, `GroupableMixin`, `MessagesMixin`) |

apps/dialtone-documentation/docs/.vuepress/baseComponents/CodeExampleTabs.vue

@@ -51,7 +51,7 @@
         v-if="showHtmlWarning"
         class="d-ps-static"
         kind="warning"
-        hide-close
+        :show-close="false"
       >
         Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
       </dt-banner>

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleRichTextEditor.vue

@@ -7,7 +7,7 @@
     :output-format="$attrs.outputFormat"
     :auto-focus="false"
     placeholder="Type here..."
-    :prevent-typing="$attrs.preventTyping"
+    :allow-typing="$attrs.allowTyping"
     :link="true"
     :mention-suggestion="$attrs.mentionSuggestion"
     :channel-suggestion="$attrs.channelSuggestion"

apps/dialtone-documentation/docs/.vuepress/plugins/markdown-it-notice.js

@@ -9,7 +9,7 @@
  * Supported kinds: BASE, INFO, SUCCESS, WARNING, ERROR
  * (uppercase by convention, case-insensitive — maps to DtNotice's `kind` prop)
  *
- * Always outputs: hide-close, class="d-wmx100p d-my-200"
+ * Always outputs: :show-close="false", class="d-wmx100p d-my-200"
  *
  * Two-pass design:
  *   1. `notice_detect` runs BEFORE inline parsing — matches [!KIND] in raw
@@ -106,7 +106,7 @@ export default function noticePlugin (md) {
       if (title) {
         attrs.push(`title="${encodeForAttr(title)}"`);
       }
-      attrs.push('hide-close', 'class="d-wmx100p d-my-200 dialtone-doc-notice"');
+      attrs.push(':show-close="false"', 'class="d-wmx100p d-my-200 dialtone-doc-notice"');
 
       const html = `<dt-notice ${attrs.join(' ')}>\n${bodyHtml}</dt-notice>\n`;
 

apps/dialtone-documentation/docs/components/banner.md

@@ -40,7 +40,7 @@ Banners are a type of notice and so you can use the following [Notice](notice.md
 
 ```vue demo-only
 <dt-stack direction="row" gap="200">
-  <dt-select-menu :label-visible="false" label="Style" :options="bannerOptions" v-model="selectedKind" />
+  <dt-select-menu :show-label="false" label="Style" :options="bannerOptions" v-model="selectedKind" />
   <dt-checkbox value="important" @input="toggleImportant">Important</dt-checkbox>
   <dt-button @click="toggleBanner('example-kind')">Toggle Example</dt-button>
 </dt-stack>

apps/dialtone-documentation/docs/components/chip.md

@@ -38,13 +38,13 @@ Use the `disabled` prop to disable both the Chip and its close button. This sets
 ### Without Close Button
 
 ```vue demo
-<dt-chip :hide-close="true">Chip</dt-chip>
+<dt-chip :show-close="false">Chip</dt-chip>
 ```
 
 ### With Icon
 
 ```vue demo
-<dt-chip :hide-close="true">
+<dt-chip :show-close="false">
   <template #icon>
     <dt-icon
       name="phone"

apps/dialtone-documentation/docs/components/filter-pill.md

@@ -183,15 +183,15 @@ A clear button appears when any filter is active. It emits the `reset` event whe
 
 ### Non clearable
 
-Setting the `hide-clear` prop hides the reset/clear button.
+Setting the `:show-clear="false"` prop hides the reset/clear button.
 
 ```vue demo
 <!-- @wrapper -->
 <dt-stack direction="row" gap="100">
   <dt-filter-pill
     :model-value="[{name: '0–5 min', active: true}, {name: '5–15 min'}, {name: '15–30 min'}, {name: '30+ min'}]"
     label="Duration"
-    hide-clear
+    :show-clear="false"
   >
   </dt-filter-pill>
 </dt-stack>

apps/dialtone-documentation/docs/components/segmented-control.md

@@ -101,15 +101,15 @@ Remove the border and padding from the container.
 ```vue demo
 <!-- @wrapper -->
 <div class="d-w100p">
-  <dt-segmented-control v-model="selected" hide-divider aria-label="View filter">
+  <dt-segmented-control v-model="selected" :show-divider="false" aria-label="View filter">
     <dt-segmented-control-item value="all">All</dt-segmented-control-item>
     <dt-segmented-control-item value="favorites">Favorites</dt-segmented-control-item>
     <dt-segmented-control-item value="recent">Recent</dt-segmented-control-item>
     <dt-segmented-control-item value="groups">Groups</dt-segmented-control-item>
   </dt-segmented-control>
 </div>
 <!-- @code -->
-<dt-segmented-control v-model="selected" hide-divider>
+<dt-segmented-control v-model="selected" :show-divider="false">
   ...
 </dt-segmented-control>
 ```
@@ -141,7 +141,7 @@ Add `disabled` to the group to disable all items.
 ```vue demo
 <!-- @wrapper -->
 <div class="d-w100p">
-  <dt-segmented-control v-model="selected" disabled aria-label="Disabled example" hide-divider>
+  <dt-segmented-control v-model="selected" disabled aria-label="Disabled example" :show-divider="false">
     <dt-segmented-control-item value="all">All</dt-segmented-control-item>
     <dt-segmented-control-item value="favorites">Favorites</dt-segmented-control-item>
     <dt-segmented-control-item value="recent">Recent</dt-segmented-control-item>

apps/dialtone-documentation/docs/components/toast.md

@@ -16,7 +16,7 @@ keywords: ["notification", "snackbar", "alert", "message", "d-toast", "DtToast",
 ```vue demo
 <dt-stack direction="row" gap="200" class="d-w100p">
   <div class="d-fl-grow1">
-    <dt-select-menu :label-visible="false" label="Style" :options="toastOptions" v-model="selectedKind" />
+    <dt-select-menu :show-label="false" label="Style" :options="toastOptions" v-model="selectedKind" />
   </div>
   <dt-checkbox value="important" @input="toggleImportant">Important</dt-checkbox>
   <dt-button @click="toggleToast">Toggle Example</dt-button>

apps/dialtone-documentation/docs/guides/mcp-server/index.md

@@ -45,7 +45,7 @@ Create or update `.mcp.json` in your project root:
 
 Commit `.mcp.json` to version control. Restart Claude Code to connect.
 
-<DtNotice kind="info" title="Priority" :hideClose="true">
+<DtNotice kind="info" title="Priority" :show-close="false">
 
 Project-scoped configuration overrides user-scoped. The `dialtone-mcp-server` command resolves from `node_modules/.bin/` first.
 
@@ -90,7 +90,7 @@ Remote server deployment for enterprise use.
 claude mcp add dialtone-http --transport http --scope user https://mcp.dialtone.dialpad.com
 ```
 
-<DtNotice kind="info" title="Version Checking" :hideClose="true">
+<DtNotice kind="info" title="Version Checking" :show-close="false">
 
 When the server starts, you'll see the current version. If outdated, follow the instructions shown to update.
 
@@ -379,7 +379,7 @@ Restart Claude Desktop and look for the 🔌 icon to confirm connection.
    cat ~/.claude/mcp.json
    ```
 
-<DtNotice kind="warning" title="Important" :hideClose="true">
+<DtNotice kind="warning" title="Important" :show-close="false">
 
 Project-scoped configuration overrides user-scoped. If you have both, the project-level `.mcp.json` takes precedence.
 
@@ -425,7 +425,7 @@ Now that you have the MCP server installed, explore these resources:
 
 ---
 
-<DtNotice kind="info" title="Developer Tip" :hideClose="true">
+<DtNotice kind="info" title="Developer Tip" :show-close="false">
 
 The MCP server is perfect for discovering Dialtone patterns while coding. Instead of searching documentation manually, simply ask your AI assistant about components, tokens, or utilities, and it will search for you in real-time.
 

apps/dialtone-documentation/docs/scratch.md

@@ -305,7 +305,7 @@ Add `data-dt-focusgroup-skip` to exclude an element from arrow-key navigation
         ]"
     label="Default"
     :model-value="modelValue"
-    :label-visible="false"
+    :show-label="false"
     @input="onInput"
     @change="onChange"
   />
@@ -754,7 +754,7 @@ Real-world patterns showing how `v-dt-focusgroup` composes with Dialtone compone
     <dt-stack gap="200" direction="row" class="d-bgc-moderate-opaque d-p-150 d-bar8">
       <dt-select-menu
         label="Label Size"
-        :label-visible="false"
+        :show-label="false"
         :options="[
           { value: 'default', label: 'Default' },
           { value: 'xs', label: 'xs' },
@@ -767,7 +767,7 @@ Real-world patterns showing how `v-dt-focusgroup` composes with Dialtone compone
       />
       <dt-select-menu
         label="Label Strength"
-        :label-visible="false"
+        :show-label="false"
         :options="[
           { value: 'default', label: 'Default' },
           { value: 'bold', label: 'bold' },
@@ -1187,41 +1187,41 @@ Real-world patterns showing how `v-dt-focusgroup` composes with Dialtone compone
       <div class="d-d-grid d-g-400 d-g-cols2">
         <dt-stack gap="100">
           <dt-text as="h3" kind="headline" :size="300">Default</dt-text>
-          <dt-notice kind="success" title="Success" hide-action>
+          <dt-notice kind="success" title="Success" :show-action="false">
             Action completed successfully.
           </dt-notice>
-          <dt-notice kind="warning" title="Warning" hide-action>
+          <dt-notice kind="warning" title="Warning" :show-action="false">
             Please review before proceeding.
           </dt-notice>
-          <dt-notice kind="critical" title="Critical" hide-action>
+          <dt-notice kind="critical" title="Critical" :show-action="false">
             Something went wrong. Please try again.
           </dt-notice>
-          <dt-notice kind="base" title="Base" hide-action>
+          <dt-notice kind="base" title="Base" :show-action="false">
             A neutral notice for general information.
           </dt-notice>
         </dt-stack>
         <dt-stack gap="100">
           <dt-text as="h3" kind="headline" :size="300">Important</dt-text>
-          <dt-notice kind="info" title="Important info" :important="true" hide-action>
+          <dt-notice kind="info" title="Important info" :important="true" :show-action="false">
             Visually prominent variant with filled background.
           </dt-notice>
-          <dt-notice kind="success" title="Important success" :important="true" hide-action>
+          <dt-notice kind="success" title="Important success" :important="true" :show-action="false">
             Visually prominent variant with filled background.
           </dt-notice>
-          <dt-notice kind="warning" title="Important warning" :important="true" hide-action>
+          <dt-notice kind="warning" title="Important warning" :important="true" :show-action="false">
             Visually prominent variant with filled background.
           </dt-notice>
-          <dt-notice kind="critical" title="Important critical" :important="true" hide-action>
+          <dt-notice kind="critical" title="Important critical" :important="true" :show-action="false">
             Visually prominent variant with filled background.
           </dt-notice>
         </dt-stack>
         <dt-stack gap="100">
           <dt-text as="h3" kind="headline" :size="300">Alignment per internal parts</dt-text>
-          <dt-notice kind="info" title="Title only" hide-action />
-          <dt-notice kind="info" hide-action>
+          <dt-notice kind="info" title="Title only" :show-action="false" />
+          <dt-notice kind="info" :show-action="false">
             Message only — icon aligns to center when there is a single line of content.
           </dt-notice>
-          <dt-notice kind="info" title="Title and message" hide-action>
+          <dt-notice kind="info" title="Title and message" :show-action="false">
             When both title and message are present, the icon aligns to the top of the content stack.
           </dt-notice>
         </dt-stack>
@@ -1298,7 +1298,7 @@ Real-world patterns showing how `v-dt-focusgroup` composes with Dialtone compone
     <dt-stack gap="200" direction="row" class="d-bgc-moderate-opaque d-p-150 d-bar8">
       <dt-select-menu
         label="Label Size"
-        :label-visible="false"
+        :show-label="false"
         :options="[
           { value: 'default', label: 'Default' },
           { value: 'xs', label: 'xs' },
@@ -1311,7 +1311,7 @@ Real-world patterns showing how `v-dt-focusgroup` composes with Dialtone compone
       />
       <dt-select-menu
         label="Label Strength"
-        :label-visible="false"
+        :show-label="false"
         :options="[
           { value: 'default', label: 'Default' },
           { value: 'bold', label: 'bold' },

packages/combinator/src/components/code_example/code_example.vue

@@ -61,7 +61,7 @@
         v-if="showHtmlWarning"
         class="d-ps-static"
         kind="warning"
-        hide-close
+        :show-close="false"
       >
         Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
       </dt-banner>

packages/combinator/src/components/renderer/renderer_menu.vue

@@ -6,7 +6,7 @@
     transition="fade"
     placement="left-start"
     initial-focus-element="dialog"
-    :hide-on-click="false"
+    :close-on-click="false"
     :modal="false"
     sticky
   >

packages/combinator/src/components/renderer/renderer_target.vue

@@ -133,7 +133,7 @@ function renderTarget () {
 function renderError (exception, container) {
   render(h(DtNotice, {
     kind: 'critical',
-    hideClose: true,
+    showClose: false,
     title: ERROR_MESSAGE,
   }, {
     default: () => exception.toString(),

packages/combinator/src/variants/variants_filter_pill.js

@@ -104,7 +104,7 @@ export default {
         ],
       },
       label: { initialValue: 'Duration' },
-      hideClear: { initialValue: true },
+      showClear: { initialValue: false },
     },
   },
 

packages/combinator/src/variants/variants_input.js

@@ -4,7 +4,7 @@
 export default {
   exclusions: [
     {
-      when: { labelVisible: false },
+      when: { showLabel: false },
       hide: { props: ['labelClass', 'labelSize', 'labelStrength'] },
     },
   ],
@@ -140,7 +140,7 @@ export default {
       label: {
         initialValue: 'Search',
       },
-      labelVisible: {
+      showLabel: {
         initialValue: false,
       },
     },

packages/combinator/src/variants/variants_notice.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+ 
 
 export default {
   default: {
@@ -18,7 +18,7 @@ export default {
     props: {
       title: { initialValue: 'Info title' },
       kind: { initialValue: 'info' },
-      hideClose: { initialValue: true },
+      showClose: { initialValue: false },
     },
     slots: {
       default: { initialValue: 'Message body with <dt-link to="/path/to/">a link</dt-link>.' },

packages/combinator/src/variants/variants_radio.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+ 
 
 export default {
   default: {
@@ -12,7 +12,7 @@ export default {
   'hidden label': {
     props: {
       label: { initialValue: 'Radio label' },
-      labelVisible: { initialValue: false },
+      showLabel: { initialValue: false },
     },
   },
 

packages/combinator/src/variants/variants_segmented_control.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+ 
 
 export default {
   default: {
@@ -108,7 +108,7 @@ export default {
     props: {
       modelValue: { initialValue: 'all' },
       ariaLabel: { initialValue: 'View filter' },
-      hideDivider: { initialValue: true },
+      showDivider: { initialValue: false },
     },
   },
 

packages/combinator/src/variants/variants_select_menu.js

@@ -1,10 +1,10 @@
-/* eslint-disable max-len */
+ 
 
 
 export default {
   exclusions: [
     {
-      when: { labelVisible: false },
+      when: { showLabel: false },
       hide: { props: ['labelClass', 'labelSize', 'labelStrength', 'labelChildProps'] },
     },
   ],