yattho_view_components 0.0.1

data/app/components/yattho/beta/button.css

@@ -0,0 +1,365 @@
+/* CSS for Button  */
+
+/* temporary, pre primitives release */
+
+:root {
+  --yattho-duration-fast: 80ms;
+  --yattho-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* base button */
+
+.Button {
+  position: relative;
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-medium, 500);
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: var(--yattho-borderWidth-thin, 1px) solid;
+  border-color: transparent;
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  color: var(--color-btn-text);
+  transition: var(--yattho-duration-fast) var(--yattho-easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  text-align: center;
+  height: var(--yattho-control-medium-size, 32px);
+  padding: 0 var(--yattho-control-medium-paddingInline-normal, 12px);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--yattho-control-medium-gap, 8px);
+  min-width: max-content;
+
+  /* mobile friendly sizing */
+}
+
+@media (pointer: coarse) {
+      .Button::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-height: 48px;
+    content: "";
+    transform: translateX(-50%) translateY(-50%);
+    min-width: 48px;
+  }
+  }
+
+/* base states */
+
+.Button:hover {
+    transition-duration: var(--yattho-duration-fast);
+  }
+
+.Button:active {
+    transition: none;
+  }
+
+.Button:disabled,
+  .Button[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+.Button-withTooltip {
+  position: relative;
+  display: inline-block;
+}
+
+a.Button,
+summary.Button {
+  display: inline-flex;
+}
+
+a.Button:hover, summary.Button:hover {
+    text-decoration: none;
+  }
+
+/* wrap grid content to allow trailingAction to lock-right */
+
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+  place-content: center;
+
+  /* padding-bottom: 1px; optical alignment for firefox */
+}
+
+.Button-content > :not(:last-child) {
+    margin-right: var(--yattho-control-medium-gap, 8px);
+  }
+
+/* center child elements for fullWidth */
+
+.Button-content--alignStart {
+  justify-content: start;
+}
+
+/* button child elements */
+
+/* align svg */
+
+.Button-visual {
+  display: flex;
+  pointer-events: none; /* allow click handler to work, avoiding visuals */
+}
+
+.Button-visual .Counter {
+    color: inherit;
+    background-color: var(--color-btn-counter-bg);
+  }
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4, 4px) * -1);
+}
+
+/* sizes */
+
+.Button--small {
+  font-size: var(--yattho-text-body-size-small, 12px);
+  height: var(--yattho-control-small-size, 28px);
+  padding: 0 var(--yattho-control-small-paddingInline-condensed, 8px);
+  gap: var(--yattho-control-small-gap, 4px);
+}
+
+.Button--small .Button-label {
+    line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
+  }
+
+.Button--small .Button-content > :not(:last-child) {
+      margin-right: var(--yattho-control-small-gap, 4px);
+    }
+
+.Button--large {
+  height: var(--yattho-control-large-size, 40px);
+  padding: 0 var(--yattho-control-large-paddingInline-spacious, 16px);
+  gap: var(--yattho-control-large-gap, 8px);
+}
+
+.Button--large .Button-label {
+    line-height: var(--yattho-text-body-lineHeight-large, calc(48 / 32));
+  }
+
+.Button--large .Button-content > :not(:last-child) {
+      margin-right: var(--yattho-control-large-gap, 8px);
+    }
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+/* variants */
+
+/* primary */
+
+.Button--primary {
+  color: var(--color-btn-primary-text);
+  fill: var(--color-btn-primary-icon);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+}
+
+.Button--primary:hover:not(:disabled) {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
+  }
+
+/* fallback :focus state */
+
+.Button--primary:focus {
+    outline: 2px solid var(--color-accent-fg);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+
+.Button--primary:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+
+/* default focus state */
+
+.Button--primary:focus-visible {
+    outline: 2px solid var(--color-accent-fg);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  }
+
+.Button--primary:active:not(:disabled),
+  .Button--primary[aria-pressed='true'] {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
+  }
+
+.Button--primary:disabled,
+  .Button--primary[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
+    fill: var(--color-btn-primary-disabled-text);
+  }
+
+/* default (secondary) */
+
+.Button--secondary {
+  color: var(--color-btn-text);
+  fill: var(--color-fg-muted); /* help this */
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+}
+
+.Button--secondary:hover:not(:disabled) {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+  }
+
+.Button--secondary:active:not(:disabled) {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+  }
+
+.Button--secondary[aria-pressed='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-yattho-shadow-inset);
+  }
+
+.Button--secondary:disabled,
+  .Button--secondary[aria-disabled='true'] {
+    color: var(--color-yattho-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-yattho-fg-disabled);
+  }
+
+.Button--invisible {
+  color: var(--color-btn-text);
+}
+
+.Button--invisible:hover:not(:disabled) {
+    background-color: var(--color-action-list-item-default-hover-bg);
+  }
+
+.Button--invisible[aria-pressed='true'],
+  .Button--invisible:active:not(:disabled) {
+    background-color: var(--color-action-list-item-default-active-bg);
+  }
+
+.Button--invisible:disabled,
+  .Button--invisible[aria-disabled='true'] {
+    color: var(--color-yattho-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-yattho-fg-disabled);
+  }
+
+/* if button has no visuals, use link blue for text */
+
+.Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--color-accent-fg);
+  }
+
+.Button--invisible .Button-visual {
+    color: var(--color-fg-muted);
+  }
+
+.Button--link {
+  color: var(--color-accent-fg);
+  fill: var(--color-accent-fg);
+  display: inline-block;
+  font-size: inherit;
+  border: none;
+  height: unset;
+  padding: 0;
+}
+
+.Button--link:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+
+.Button--link:focus-visible, .Button--link:focus {
+    outline-offset: 2px;
+  }
+
+.Button--link:disabled,
+  .Button--link[aria-disabled='true'] {
+    color: var(--color-yattho-fg-disabled);
+    background-color: transparent;
+    border-color: transparent;
+    fill: var(--color-yattho-fg-disabled);
+  }
+
+/* danger */
+
+.Button--danger {
+  color: var(--color-btn-danger-text);
+  fill: var(--color-btn-danger-icon);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+}
+
+.Button--danger:hover:not(:disabled) {
+    color: var(--color-btn-danger-hover-text);
+    fill: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+  }
+
+.Button--danger:active:not(:disabled),
+  .Button--danger[aria-pressed='true'] {
+    color: var(--color-btn-danger-selected-text);
+    fill: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+.Button--danger:disabled,
+  .Button--danger[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    fill: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+  }
+
+.Button--iconOnly {
+  display: grid;
+  place-content: center;
+  padding: unset;
+  width: var(--yattho-control-medium-size, 32px);
+}
+
+.Button--iconOnly.Button--small {
+    width: var(--yattho-control-small-size, 28px);
+  }
+
+.Button--iconOnly.Button--large {
+    width: var(--yattho-control-large-size, 40px);
+  }

data/app/components/yattho/beta/button.css.json

@@ -0,0 +1 @@
+{"name":"beta/button","selectors":[":root",".Button",".Button::before",".Button:hover",".Button:active",".Button:disabled","\n  .Button[aria-disabled='true']",".Button-withTooltip","a.Button","\nsummary.Button","a.Button:hover"," summary.Button:hover",".Button-content",".Button-content > :not(:last-child)",".Button-content--alignStart",".Button-visual",".Button-visual .Counter",".Button-label",".Button-leadingVisual",".Button-trailingVisual",".Button-trailingAction",".Button--small",".Button--small .Button-label",".Button--small .Button-content > :not(:last-child)",".Button--large",".Button--large .Button-label",".Button--large .Button-content > :not(:last-child)",".Button--fullWidth",".Button--primary",".Button--primary:hover:not(:disabled)",".Button--primary:focus",".Button--primary:focus:not(:focus-visible)",".Button--primary:focus-visible",".Button--primary:active:not(:disabled)","\n  .Button--primary[aria-pressed='true']",".Button--primary:disabled","\n  .Button--primary[aria-disabled='true']",".Button--secondary",".Button--secondary:hover:not(:disabled)",".Button--secondary:active:not(:disabled)",".Button--secondary[aria-pressed='true']",".Button--secondary:disabled","\n  .Button--secondary[aria-disabled='true']",".Button--invisible",".Button--invisible:hover:not(:disabled)",".Button--invisible[aria-pressed='true']","\n  .Button--invisible:active:not(:disabled)",".Button--invisible:disabled","\n  .Button--invisible[aria-disabled='true']",".Button--invisible.Button--invisible-noVisuals .Button-label",".Button--invisible .Button-visual",".Button--link",".Button--link:hover:not(:disabled)",".Button--link:focus-visible"," .Button--link:focus",".Button--link:disabled","\n  .Button--link[aria-disabled='true']",".Button--danger",".Button--danger:hover:not(:disabled)",".Button--danger:active:not(:disabled)","\n  .Button--danger[aria-pressed='true']",".Button--danger:disabled","\n  .Button--danger[aria-disabled='true']",".Button--iconOnly",".Button--iconOnly.Button--small",".Button--iconOnly.Button--large"]}

data/app/components/yattho/beta/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --yattho-duration-fast: 80ms;\n  --yattho-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-medium, 500);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--yattho-borderWidth-thin, 1px) solid;\n  border-color: transparent;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  color: var(--color-btn-text);\n  transition: var(--yattho-duration-fast) var(--yattho-easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--yattho-control-medium-size, 32px);\n  padding: 0 var(--yattho-control-medium-paddingInline-normal, 12px);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--yattho-control-medium-gap, 8px);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--yattho-duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  display: inline-flex;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--yattho-control-medium-gap, 8px);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--color-btn-counter-bg);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--yattho-text-body-size-small, 12px);\n  height: var(--yattho-control-small-size, 28px);\n  padding: 0 var(--yattho-control-small-paddingInline-condensed, 8px);\n  gap: var(--yattho-control-small-gap, 4px);\n\n  & .Button-label {\n    line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--yattho-control-small-gap, 4px);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--yattho-control-large-size, 40px);\n  padding: 0 var(--yattho-control-large-paddingInline-spacious, 16px);\n  gap: var(--yattho-control-large-gap, 8px);\n\n  & .Button-label {\n    line-height: var(--yattho-text-body-lineHeight-large, calc(48 / 32));\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--yattho-control-large-gap, 8px);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--color-btn-primary-text);\n  fill: var(--color-btn-primary-icon);\n  background-color: var(--color-btn-primary-bg);\n  border-color: var(--color-btn-primary-border);\n  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-primary-hover-bg);\n    border-color: var(--color-btn-primary-hover-border);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-primary-selected-bg);\n    box-shadow: var(--color-btn-primary-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-primary-disabled-text);\n    background-color: var(--color-btn-primary-disabled-bg);\n    border-color: var(--color-btn-primary-disabled-border);\n    fill: var(--color-btn-primary-disabled-text);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--color-btn-text);\n  fill: var(--color-fg-muted); /* help this */\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-btn-hover-bg);\n    border-color: var(--color-btn-hover-border);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--color-btn-active-bg);\n    border-color: var(--color-btn-active-border);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--color-btn-selected-bg);\n    box-shadow: var(--color-yattho-shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-yattho-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-yattho-fg-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--color-btn-text);\n\n  &:hover:not(:disabled) {\n    background-color: var(--color-action-list-item-default-hover-bg);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--color-action-list-item-default-active-bg);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-yattho-fg-disabled);\n    background-color: var(--color-btn-bg);\n    border-color: var(--color-btn-border);\n    fill: var(--color-yattho-fg-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--color-accent-fg);\n  }\n\n  & .Button-visual {\n    color: var(--color-fg-muted);\n  }\n}\n\n.Button--link {\n  color: var(--color-accent-fg);\n  fill: var(--color-accent-fg);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible, &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-yattho-fg-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--color-yattho-fg-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--color-btn-danger-text);\n  fill: var(--color-btn-danger-icon);\n  background-color: var(--color-btn-bg);\n  border-color: var(--color-btn-border);\n  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n  &:hover:not(:disabled) {\n    color: var(--color-btn-danger-hover-text);\n    fill: var(--color-btn-danger-hover-text);\n    background-color: var(--color-btn-danger-hover-bg);\n    border-color: var(--color-btn-danger-hover-border);\n    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--color-btn-danger-selected-text);\n    fill: var(--color-btn-danger-selected-text);\n    background-color: var(--color-btn-danger-selected-bg);\n    border-color: var(--color-btn-danger-selected-border);\n    box-shadow: var(--color-btn-danger-selected-shadow);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--color-btn-danger-disabled-text);\n    fill: var(--color-btn-danger-disabled-text);\n    background-color: var(--color-btn-danger-disabled-bg);\n    border-color: var(--color-btn-border);\n  }\n}\n\n\n.Button--iconOnly {\n  display: grid;\n  place-content: center;\n  padding: unset;\n  width: var(--yattho-control-medium-size, 32px);\n\n  &.Button--small {\n    width: var(--yattho-control-small-size, 28px);\n  }\n\n  &.Button--large {\n    width: var(--yattho-control-large-size, 40px);\n  }\n}",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}"]}

data/app/components/yattho/beta/button.html.erb

@@ -0,0 +1,23 @@
+<%= render Yattho::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, classes: "Button-withTooltip") do -%>
+  <%= render Yattho::Beta::BaseButton.new(**@system_arguments) do -%>
+    <span class="<%= @align_content_classes %>">
+      <% if leading_visual %>
+        <span class="Button-visual Button-leadingVisual">
+          <%= leading_visual %>
+        </span>
+      <% end %>
+      <span class="Button-label"><%= trimmed_content %></span>
+      <% if trailing_visual %>
+        <span class="Button-visual Button-trailingVisual">
+          <%= trailing_visual %>
+        </span>
+      <% end %>
+    </span>
+    <% if trailing_action %>
+      <span class="Button-visual Button-trailingAction">
+        <%= trailing_action %>
+      </span>
+    <% end %>
+  <% end -%>
+  <%= tooltip %>
+<% end -%>