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

Author: braddialpad

.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>